/* Результат, жанры, советы, лаборатория, чек-лист, история, FAQ, методика, диалог шаринга. */
.result { padding-block: 28px 8px; }
.verdict { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: 4px; background: linear-gradient(120deg, rgba(16, 19, 31, .94), rgba(9, 11, 20, .94)); overflow: hidden; animation: v-in .5s var(--ease-out); }
@keyframes v-in { from { opacity: 0; transform: translateY(14px); } }
.verdict::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--lime)); }
.verdict[data-level="0"] { --c: var(--lv0); } .verdict[data-level="1"] { --c: var(--lv1); } .verdict[data-level="2"] { --c: var(--lv2); } .verdict[data-level="3"] { --c: var(--lv3); } .verdict[data-level="4"] { --c: var(--lv4); }
.v-mascot img { width: 100%; max-height: 250px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .5)); }
.v-body h2 { font-size: 20px; color: var(--dim); }
.v-word { font: 400 clamp(40px, 7vw, 76px)/1.02 var(--f-head); margin: 2px 0 8px; text-shadow: 0 0 36px color-mix(in srgb, currentColor 40%, transparent); }
.v-why { color: var(--text); max-width: 60ch; }
.v-src { color: var(--dim); font-size: 14px; margin-top: 10px; max-width: 70ch; }
.v-aim { grid-column: 1 / -1; color: var(--dim); font-size: 14px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 8px; }
.v-aim:empty { display: none; }
.v-score { position: relative; width: 132px; height: 132px; display: grid; place-items: center; text-align: center; }
.v-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #1b2236; stroke-width: 9; }
.ring { fill: none; stroke: var(--c, var(--lime)); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s var(--ease-out); }
.v-score b { display: block; font: 600 40px/1 var(--f-num); }
.v-score small { color: var(--dim); font-size: 13px; }

.ladder ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 16px; max-width: 520px; }
.ladder li { display: grid; gap: 6px; font-size: 13px; color: var(--faint); }
.ladder i { height: 6px; background: #1b2236; border-radius: 2px; transition: background-color .4s var(--ease-out) calc(var(--n, 0) * 60ms); }
.ladder li.on i { background: var(--c); }
.ladder li.cur { color: var(--text); }
.ladder li.cur i { height: 8px; box-shadow: 0 0 16px var(--c); margin-top: -1px; }

.res-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cmp { margin-top: 8px; }
.cmp-when { color: var(--dim); font-size: 14px; margin: -6px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: grid; gap: 1px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); min-width: 150px; }
.chip span { color: var(--dim); font-size: 13px; }
.chip b { font: 600 18px var(--f-num); }
.chip em { font: 500 13px var(--f-num); font-style: normal; color: var(--dim); }
.chip[data-dir="up"] { border-color: color-mix(in srgb, var(--lime) 50%, transparent); } .chip[data-dir="up"] em { color: var(--lime); }
.chip[data-dir="down"] { border-color: color-mix(in srgb, var(--mag) 50%, transparent); } .chip[data-dir="down"] em { color: #ff7aa9; }

/* жанры */
.genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.genre { border: 1px solid var(--line); border-left: 3px solid var(--c, var(--faint)); background: var(--panel); border-radius: 4px; animation: g-in .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes g-in { from { opacity: 0; transform: translateY(8px); } }
.g-btn { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 14px 16px; background: transparent; border: 0; color: inherit; cursor: pointer; min-height: 72px; align-content: center; }
@media (hover: hover) and (pointer: fine) { .g-btn:hover { background: var(--panel-2); } }
.g-name { font: 400 18px var(--f-head); }
.g-ex { grid-column: 1; color: var(--dim); font-size: 13px; }
.g-bar { grid-column: 2; grid-row: 1; display: flex; gap: 3px; align-self: center; }
.g-bar i { width: 9px; height: 14px; background: #1b2236; border-radius: 1px; }
.g-bar i.on { background: var(--c); }
.g-label { grid-column: 2; grid-row: 2; color: var(--c); font-weight: 700; font-size: 15px; justify-self: end; }
.g-times { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 16px 12px; color: var(--dim); font-size: 14px; }
.g-times b { color: var(--text); font-family: var(--f-num); font-weight: 600; margin-right: 4px; }
.g-more { padding: 0 16px 14px; color: var(--dim); font-size: 15px; }

/* советы */
.advice { display: grid; gap: 8px; max-width: 900px; }
.adv { border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line-2)); background: var(--panel); border-radius: 4px; }
.adv[data-level="crit"] { --c: var(--mag); } .adv[data-level="warn"] { --c: var(--lv1); } .adv[data-level="info"] { --c: var(--cyan); } .adv[data-level="good"] { --c: var(--lime); }
.adv summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 52px; font-weight: 600; }
.adv summary::-webkit-details-marker { display: none; }
.adv-mark { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 10px var(--c); }
.adv summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .2s var(--ease-out); flex: none; }
.adv details[open] summary::after { transform: rotate(-135deg); }
.adv-b { padding: 0 16px 16px 38px; color: var(--dim); display: grid; gap: 8px; max-width: 70ch; }
.adv-b b { color: var(--text); }
.adv-b ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.adv-b li::marker { color: var(--c); }
.adv-h { margin-bottom: -4px; }

/* лаборатория цифр */
.lab { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 24px; margin-top: 28px; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--line-2); background: rgba(16, 19, 31, .86); border-radius: 4px; }
.lab-ctl { display: grid; gap: 18px; align-content: start; }
.rng { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; color: var(--dim); font-size: 15px; }
.lab-ctl output { font: 600 15px var(--f-num); color: var(--text); }
.rng input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--lime); min-height: 44px; margin: 0; }
.lab-view { display: grid; gap: 12px; align-content: start; min-width: 0; }
#lane { width: 100%; height: 150px; border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; }
.lab-verdict { display: grid; gap: 4px; font-size: 17px; }
.lab-verdict b { font: 400 22px var(--f-head); }
.lv-why { color: var(--dim); font-size: 15px; }
.check { display: flex !important; grid-template-columns: none; gap: 10px; align-items: center; cursor: pointer; color: var(--dim); font-size: 15px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--lime); flex: none; margin: 0; }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 28px 0 0; background: var(--line); border: 1px solid var(--line); }
.terms div { background: var(--panel); padding: 16px 18px; }
.terms dt { font: 400 18px var(--f-head); color: var(--lime); margin-bottom: 6px; }
.terms dd { margin: 0; color: var(--dim); font-size: 15px; }

/* чек-лист */
.tips-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.progress { height: 6px; background: #1b2236; border-radius: 3px; margin-top: 22px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--lime)); transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease-out); }
.tip-count { color: var(--dim); font-size: 14px; margin: 8px 0 12px; }
.checks { display: grid; gap: 4px; }
.check-i { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 12px 8px; cursor: pointer; border-radius: 6px; align-items: start; }
@media (hover: hover) and (pointer: fine) { .check-i:hover { background: var(--panel); } }
.check-i input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box { width: 24px; height: 24px; border: 2px solid var(--line-2); border-radius: 5px; display: grid; place-items: center; margin-top: 1px; transition: border-color .15s, background-color .15s; }
.box::after { content: ''; width: 11px; height: 6px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .18s var(--ease-out); }
.check-i input:checked + .box { background: var(--lime); border-color: var(--lime); }
.check-i input:checked + .box::after { transform: rotate(-45deg) scale(1); }
.check-i input:focus-visible + .box { outline: 2px solid var(--lime); outline-offset: 3px; }
.ck-t { display: grid; gap: 2px; }
.ck-t b { font-weight: 600; }
.ck-t small { color: var(--dim); font-size: 15px; line-height: 1.45; }
.check-i input:checked ~ .ck-t b { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--faint); }
.router { margin: 0; position: sticky; top: 90px; }
.router img { width: 100%; border: 1px solid var(--line-2); border-radius: 4px; background: var(--ink-2); height: auto; }
.router figcaption { color: var(--dim); font-size: 14px; margin-top: 8px; }

/* история */
.hist-act { display: flex; gap: 8px; flex-wrap: wrap; }
.empty { display: grid; justify-items: center; gap: 14px; padding: 36px 12px; text-align: center; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 4px; margin-top: 20px; }
.empty img { width: min(70%, 300px); height: auto; }
.hist-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 20px; margin-top: 22px; }
.hist-chart { height: 290px; border: 1px solid var(--line); background: rgba(16, 19, 31, .8); border-radius: 4px; padding: 10px 10px 8px; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.hist-chart canvas { width: 100%; height: 100%; min-height: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--dim); }
.legend span::before { content: ''; display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; background: var(--lime); }
.legend .lg-b::before { background: var(--mag); }
.tod { border: 1px solid var(--line); background: rgba(16, 19, 31, .8); border-radius: 4px; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.tod h3 { font-size: 17px; }
.tod-row { display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; align-items: center; }
.tod-row.none { opacity: .5; }
.tod-n { color: var(--dim); font-size: 14px; }
.tod-bar { height: 8px; background: #1b2236; border-radius: 2px; overflow: hidden; }
.tod-bar i { display: block; height: 100%; background: var(--lime); }
.tod-v { grid-column: 2; font: 500 13px var(--f-num); color: var(--dim); }
.tod-note { color: var(--faint); font-size: 13px; line-height: 1.4; }
.table-wrap { position: relative; overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: 4px; }
.hist-t { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.hist-t th { text-align: left; font-weight: 500; color: var(--dim); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap; }
.hist-t td { padding: 8px 14px; border-bottom: 1px solid #1a2136; white-space: nowrap; }
.hist-t tr:last-child td { border-bottom: 0; }
.hist-t .num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c); color: var(--c); font-size: 13px; font-weight: 600; }
.del { min-height: 44px; min-width: 44px; font-size: 20px; line-height: 1; }

/* FAQ */
.faq { display: grid; gap: 6px; margin-top: 24px; max-width: 880px; }
.faq details { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 24px var(--f-num); color: var(--lime); flex: none; transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 18px; color: var(--dim); max-width: 70ch; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--lime); } }

/* методика */
.method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; margin-top: 24px; align-items: start; }
.m-text { display: grid; gap: 16px; max-width: 64ch; }
.rules { display: grid; gap: 10px; list-style: none; }
.rules li { padding-left: 16px; border-left: 2px solid var(--line-2); color: var(--dim); font-size: 16px; }
.rules b { color: var(--text); }
.m-warn { padding: 14px 16px; border: 1px solid var(--lv1); background: rgba(255, 138, 61, .08); border-radius: 4px; color: var(--text); font-size: 15px; }
.m-tables h3, .m-src h3 { font-size: 17px; margin: 18px 0 8px; }
.m-tables { min-width: 0; }
.m-tables h3:first-child { margin-top: 0; }
.thr-wrap { overflow-x: auto; max-width: 100%; }
.thr { width: 100%; border-collapse: collapse; font-size: 14px; }
.thr th, .thr td { padding: 7px 10px; border: 1px solid var(--line); text-align: left; }
.thr thead th { background: var(--panel); color: var(--dim); font-weight: 500; }
.thr tbody th { font-weight: 600; background: rgba(16, 19, 31, .6); white-space: nowrap; }
.thr td { font-family: var(--f-num); color: var(--text); white-space: nowrap; }
.m-src { grid-column: 1 / -1; }
.m-src ul { display: grid; gap: 8px; list-style: disc; padding-left: 20px; color: var(--dim); max-width: 80ch; }

/* диалог шаринга */
.share-dlg { border: 1px solid var(--lime); background: var(--ink-2); color: var(--text); border-radius: 6px; padding: 0; width: min(94vw, 860px); max-height: 94vh; overflow: auto; }
.share-dlg::backdrop { background: rgba(3, 4, 9, .82); }
.share-in { display: grid; gap: 14px; padding: clamp(14px, 3vw, 24px); }
.share-in h2 { font-size: 22px; }
#shareCanvas { width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 1px solid var(--line-2); border-radius: 4px; }
.share-act { display: flex; flex-wrap: wrap; gap: 10px; }
.net-ref { color: var(--faint); font-size: 13px; line-height: 1.4; margin-top: 8px; }

@media (max-width: 1020px) {
  .verdict { grid-template-columns: 120px minmax(0, 1fr); }
  .v-score { grid-column: 1 / -1; justify-self: start; width: 110px; height: 110px; }
  .v-score svg { width: 110px; height: 110px; }
  .v-mascot img { max-height: 170px; }
  .tips-grid, .method, .hist-grid, .lab { grid-template-columns: minmax(0, 1fr); }
  .router { position: static; max-width: 420px; }
}
@media (max-width: 520px) {
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .v-mascot { max-width: 150px; }
  .genres { grid-template-columns: minmax(0, 1fr); }
  .adv-b { padding-left: 16px; }
}