.asc-calc {
  padding: 40px 0 80px;
  color: var(--white);
}

.asc-calc [hidden] { display: none !important; }

.asc-calc__lead {
  max-width: 68ch;
  margin: 16px 0 28px;
  color: rgba(242, 238, 231, .72);
  font-size: 18px;
  line-height: 1.55;
}

.asc-calc .calc {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(205, 172, 127, .26);
  border-radius: var(--radius-3);
  background: rgba(12, 29, 62, .55);
}

.asc-calc .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.asc-calc .field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.asc-calc label,
.asc-calc .label {
  color: rgba(242, 238, 231, .72);
  font-size: 14px;
  font-weight: 500;
}

.asc-calc input,
.asc-calc select {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(242, 238, 231, .16);
  border-radius: 12px;
  background: var(--bg-color);
  color: var(--white);
  font: inherit;
}

.asc-calc input::placeholder { color: rgba(242, 238, 231, .42); }

.asc-calc input:focus,
.asc-calc select:focus {
  border-color: var(--color-4);
  outline: none;
  box-shadow: 0 0 0 3px rgba(205, 172, 127, .16);
}

.asc-calc .seg { display: flex; flex-wrap: wrap; gap: 6px; }

.asc-calc .seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.asc-calc .seg label {
  padding: 7px 14px;
  border: 1px solid rgba(242, 238, 231, .16);
  border-radius: 999px;
  color: rgba(242, 238, 231, .72);
  cursor: pointer;
}

.asc-calc .seg input:checked + label {
  border-color: var(--color-4);
  background: rgba(205, 172, 127, .16);
  color: var(--white);
}

.asc-calc .hint { color: rgba(242, 238, 231, .42); font-size: 13px; }

.asc-calc .linkbtn {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-4);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.asc-calc .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.asc-calc .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 26px;
  border: 0;
  border-radius: 50px;
  background: var(--color-2);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.asc-calc .btn:hover { background: var(--color-2-hover); color: var(--white); }

.asc-calc .btn.ghost {
  background: transparent;
  border: 1px solid rgba(205, 172, 127, .4);
}

.asc-calc .btn.ghost:hover { border-color: var(--color-4); background: transparent; }

.asc-calc .err { color: #ffbf73; }

.asc-calc .suggest {
  position: absolute;
  z-index: 5;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 320px;
  margin: 4px 0 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid rgba(205, 172, 127, .26);
  border-radius: 12px;
  background: #122345;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.asc-calc .suggest li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.asc-calc .suggest li[aria-selected="true"],
.asc-calc .suggest li:hover { background: #183060; }

.asc-calc .suggest .reg,
.asc-calc .suggest .alias { color: rgba(242, 238, 231, .42); font-size: 14px; text-align: right; }

.asc-calc .manual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px dashed rgba(242, 238, 231, .16);
  border-radius: 12px;
}

.asc-calc .out { display: grid; gap: 22px; margin-top: 28px; }
.asc-calc .hero { display: grid; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(205, 172, 127, .26); }
.asc-calc .hero .big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.asc-calc .hero .sign { font-family: var(--forum); font-size: clamp(36px, 6vw, 54px); line-height: 1; }
.asc-calc .glyph { margin-right: .18em; color: var(--color-4); }
.asc-calc .hero .deg { color: var(--color-4); font-family: var(--forum); font-size: 32px; }
.asc-calc .meta,
.asc-calc .src,
.asc-calc .kicker { color: rgba(242, 238, 231, .42); font-size: 13px; }
.asc-calc .kicker { letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.asc-calc .note {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(205, 172, 127, .26);
  border-radius: 14px;
  background: rgba(205, 172, 127, .16);
}
.asc-calc .note.warn { border-color: rgba(255, 191, 115, .45); background: rgba(255, 191, 115, .12); }
.asc-calc .note.warn strong { color: #ffbf73; }
.asc-calc .note .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.asc-calc .note .opts button {
  padding: 6px 12px;
  border: 1px solid rgba(205, 172, 127, .4);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.asc-calc .note .opts button[aria-pressed="true"] { border-color: var(--color-4); background: var(--color-4); color: var(--bg-color); }
.asc-calc .block { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(242, 238, 231, .1); }
.asc-calc .block h3 { margin: 0; font-family: var(--forum); font-size: 28px; font-weight: 400; }
.asc-calc .block p { max-width: 66ch; }
.asc-calc .quote { padding-left: 14px; border-left: 2px solid var(--color-4); }
.asc-calc .src a,
.asc-calc a { color: var(--color-4); }
.asc-calc .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 28px; }
.asc-calc .ribbon { position: relative; display: flex; height: 54px; overflow: hidden; border: 1px solid rgba(242, 238, 231, .1); border-radius: 12px; }
.asc-calc .ribbon .seg-r { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; border-right: 1px solid rgba(7, 18, 33, .55); color: var(--white); font-size: 13px; white-space: nowrap; }
.asc-calc .ribbon .seg-r.me { box-shadow: inset 0 0 0 2px var(--color-4); }
.asc-calc .ribbon .seg-r.dim { opacity: .45; }
.asc-calc .el-fire { background: #9b5a45; }
.asc-calc .el-earth { background: #5f7148; }
.asc-calc .el-air { background: #52679a; }
.asc-calc .el-water { background: #3d6f7d; }
.asc-calc .ribbon .band { position: absolute; top: 0; bottom: 0; border-right: 1px dashed var(--white); border-left: 1px dashed var(--white); background: rgba(242, 238, 231, .16); pointer-events: none; }
.asc-calc .ribbon .mark { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--white); }
.asc-calc .ticks { position: relative; height: 18px; color: rgba(242, 238, 231, .42); font-size: 12px; }
.asc-calc .ticks span { position: absolute; white-space: nowrap; transform: translateX(-50%); }
.asc-calc .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: rgba(242, 238, 231, .42); font-size: 13px; }
.asc-calc .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.asc-calc .tbl-wrap { overflow-x: auto; }
.asc-calc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.asc-calc th,
.asc-calc td { padding: 8px 10px; border-bottom: 1px solid rgba(242, 238, 231, .1); text-align: left; vertical-align: top; }
.asc-calc th { color: rgba(242, 238, 231, .42); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.asc-calc tr.me td { background: rgba(205, 172, 127, .16); }
.asc-calc details { padding: 10px 14px; border: 1px solid rgba(242, 238, 231, .1); border-radius: 12px; }
.asc-calc details summary { color: rgba(242, 238, 231, .72); cursor: pointer; }
.asc-calc .cta {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(205, 172, 127, .26);
  border-radius: var(--radius-3);
  background: rgba(12, 29, 62, .55);
}
.asc-calc .cta h2,
.asc-calc .method h2 { margin: 0; font-family: var(--forum); font-size: 32px; font-weight: 400; }
.asc-calc .method { display: grid; gap: 12px; margin-top: 28px; color: rgba(242, 238, 231, .72); }
.asc-calc .method ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.asc-calc .num { font-variant-numeric: tabular-nums; }

.mars-calc__grid {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: stretch;
}

.mars-calc .panel h2 {
  margin: 8px 0 0;
  font-family: var(--forum);
  font-size: 32px;
  font-weight: 400;
}

.mars-calc form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.mars-calc .date-row { display: grid; grid-template-columns: 1fr 1.5fr 1.1fr; gap: 8px; }
.mars-calc .time-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mars-calc .check { display: flex; align-items: center; gap: 8px; color: rgba(242, 238, 231, .72); font-size: 14px; white-space: nowrap; cursor: pointer; }
.mars-calc .check input { width: 16px; height: 16px; accent-color: var(--color-2); }
.mars-calc .city-wrap { position: relative; }
.mars-calc .autolist {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 232px;
  overflow: auto;
  padding: 5px;
  border: 1px solid rgba(205, 172, 127, .26);
  border-radius: 12px;
  background: #122345;
}
.mars-calc .autolist button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.mars-calc .autolist button:hover,
.mars-calc .autolist button.is-on { background: rgba(205, 172, 127, .16); }
.mars-calc .autolist small { color: rgba(242, 238, 231, .42); font-size: 12px; }
.mars-calc details.more { padding: 10px 12px; border: 1px dashed rgba(242, 238, 231, .16); border-radius: 12px; }
.mars-calc details.more summary { display: flex; justify-content: space-between; gap: 10px; color: rgba(242, 238, 231, .72); cursor: pointer; list-style: none; }
.mars-calc details.more summary::-webkit-details-marker { display: none; }
.mars-calc details.more summary::after { content: "изменить"; color: var(--color-4); font-size: 13px; text-decoration: underline; }
.mars-calc details.more[open] summary::after { content: "скрыть"; }
.mars-calc .auto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mars-calc .empty {
  display: grid;
  place-items: center;
  margin-top: 18px;
  padding: 30px 20px;
  border: 1px dashed rgba(242, 238, 231, .16);
  border-radius: 12px;
  color: rgba(242, 238, 231, .55);
  text-align: center;
}
.mars-calc .res__title { margin-top: 10px; font-family: var(--forum); font-size: clamp(32px, 4vw, 46px); font-weight: 400; }
.mars-calc .res__title em { color: var(--color-2); font-style: normal; }
.mars-calc .res__pos { margin-top: 8px; color: rgba(242, 238, 231, .72); }
.mars-calc .res__grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; margin-top: 20px; }
.mars-calc .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mars-calc .tile { padding: 14px; border: 1px solid rgba(205, 172, 127, .2); border-radius: 12px; background: rgba(7, 18, 33, .4); }
.mars-calc .tile b { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--forum); font-size: 26px; font-weight: 400; }
.mars-calc .tile .sub,
.mars-calc .text p { color: rgba(242, 238, 231, .72); }
.mars-calc .text { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mars-calc .text p b { color: var(--white); }
.mars-calc .warn { padding: 9px 11px; border: 1px dashed rgba(255, 191, 115, .45); border-radius: 12px; background: rgba(255, 191, 115, .12); color: #ffbf73; }
.mars-calc .res__foot { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(242, 238, 231, .1); color: rgba(242, 238, 231, .42); font-size: 13px; }
.mars-calc .res__foot a:empty { display: none; }
.mars-calc .lbl { color: rgba(242, 238, 231, .42); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mars-calc .eyebrow { color: var(--color-4); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.mars-calc .note { margin-top: 22px; }

@media (max-width: 960px) {
  .mars-calc__grid,
  .mars-calc .res__grid { grid-template-columns: 1fr; }
  .mars-calc .mini { max-width: 300px; margin: 0 auto; }
}

@media (max-width: 560px) {
  .mars-calc .tiles,
  .mars-calc .time-row,
  .mars-calc .auto-grid { grid-template-columns: 1fr; }
}