/* Дизайн-токены направления «Трасса» — общие для desktop и mobile.
   Различается только компоновка; цвета, шрифты, радиусы, маркеры уровней — отсюда. */
:root{
  --snow:#F5F7F9; --paper:#FFFFFF; --ink:#0E1730; --ink-2:#3A4A5C; --mute:#6A7888; --line:#E1E7EE; --line-2:#C9D5E3;
  --blue:#2563EB; --blue-d:#1D4ED8; --sky:#DCE8F7; --ice:#EEF4FB;
  --l1:#0FA968; --l2:#2563EB; --l3:#EE3352; --l4:#111C33;
  /* градиенты уровней: «свет на снегу» — от глубокого тона к светлому по диагонали */
  --g1:linear-gradient(135deg,#047857 0%,#10B981 48%,#A3E635 100%);
  --g2:linear-gradient(135deg,#1E3AFF 0%,#2F7BFF 50%,#22D3EE 100%);
  --g3:linear-gradient(135deg,#C8102E 0%,#F43F5E 50%,#FF8A3D 100%);
  --g4:linear-gradient(135deg,#05070F 0%,#1B2540 55%,#4C5A80 100%);
  --g-brand:linear-gradient(120deg,#1E3AFF 0%,#2F7BFF 55%,#22B8F0 100%);
  --g-ink:linear-gradient(160deg,#0A1124 0%,#111C33 55%,#1A2A4F 100%);
  --ok:#0FA968; --warn:#E08A1B; --err:#EE3352;
  --f-head:"Unbounded",system-ui,sans-serif; --f-body:"Golos Text",system-ui,sans-serif;
  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(12,27,44,.06),0 4px 16px rgba(12,27,44,.06);
  --sh-2:0 12px 40px rgba(12,27,44,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--ink);background:var(--snow);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}   /* height:auto — пропорции по атрибутам width/height, без вытягивания (замечание Бро 18.10, галерея) */
.h{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;line-height:1.05}

/* Маркер уровня (табличка трассы) */
.mk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;color:#fff;font:700 12px var(--f-head);flex:none}
.mk.l1{background:var(--g1)}.mk.l2{background:var(--g2)}.mk.l3{background:var(--g3)}.mk.l4{background:var(--g4)}
.mk{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mks{display:inline-flex;gap:4px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15.5px;transition:transform .15s var(--ease),background .2s,opacity .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--g-brand);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.28)}.btn-p:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(37,99,235,.38)}
.btn-d{background:var(--ink);color:#fff}
.btn-o{border:2px solid var(--ink);color:var(--ink)}.btn-o:hover{background:var(--ink);color:#fff}
.btn-g{background:var(--ice);color:var(--blue)}.btn-g:hover{background:var(--sky)}
.btn[disabled],.btn.is-disabled{opacity:.38;pointer-events:none}
.btn.is-loading{pointer-events:none;color:transparent;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Поля */
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.inp{width:100%;height:50px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;padding:0 14px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--sky)}
.inp.bad{border-color:var(--err);box-shadow:0 0 0 4px #FBE3E1}
.fld .err{display:none;color:var(--err);font-size:13px;margin-top:5px}
.fld.bad .err{display:block}.fld.bad .inp{border-color:var(--err)}
select.inp{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230C1B2C' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center}

/* Чекбокс согласия (152-ФЗ) */
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2);cursor:pointer;margin:10px 0;user-select:none}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk i{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--line-2);background:#fff;margin-top:1px;transition:.15s;display:flex;align-items:center;justify-content:center}
.chk input:checked+i{background:var(--g-brand);border-color:transparent}
.chk input:checked+i::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.chk input:focus-visible+i{box-shadow:0 0 0 4px var(--sky)}
.chk a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.chk .req{color:var(--err)}
.chk.need i{border-color:var(--err);box-shadow:0 0 0 4px #FBE3E1}
.legal-note{font-size:12.5px;color:var(--mute);margin-top:8px}

/* Код из 6 цифр */
.otp{display:flex;gap:8px}
.otp input{width:48px;height:58px;text-align:center;font:700 22px var(--f-head);border:1.5px solid var(--line-2);border-radius:12px;outline:none;background:#fff}
.otp input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--sky)}
.otp.bad input{border-color:var(--err)}

/* Звёзды оценки видео */
.stars{display:inline-flex;gap:4px}
.stars button{width:30px;height:30px;font-size:24px;line-height:1;color:var(--line-2);transition:transform .1s,color .1s}
.stars button.on{color:#F2B01E}.stars button:hover{transform:scale(1.15)}

/* Шкала рейтинга (шкала 17, засечка «эксперт» 66,7%) */
.rbar{position:relative;height:14px;border-radius:7px;background:var(--ice);overflow:visible}
.rbar>b{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#10B981,#A3E635 18%,#2F7BFF 40%,#22D3EE 52%,#F43F5E 70%,#FF8A3D 82%,#1B2540);transition:width 1.2s var(--ease)}
.rbar>i{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:.35}
.rzones{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:8px}

/* Тост */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14.5px;font-weight:500;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:999;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Панель прототипа (не часть дизайна) */
.proto{position:fixed;right:14px;bottom:14px;z-index:1000;background:#fff;border:1px dashed #9AA6B2;border-radius:12px;padding:10px 12px;font:500 12px var(--f-body);color:#3A4A5C;box-shadow:var(--sh-1);max-width:240px}
.proto b{display:block;font-weight:700;margin-bottom:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6A7888}
.proto button{display:block;width:100%;text-align:left;padding:5px 8px;border-radius:7px;margin:2px 0}
.proto button.on{background:var(--ink);color:#fff}
.proto button:hover:not(.on){background:var(--ice)}
.proto .x{position:absolute;right:6px;top:4px;width:auto;padding:2px 6px;font-size:14px}
.proto.min>*:not(.x):not(b){display:none}