/* ЮНАВИА — интерфейс курса
   Палитра и типографика продолжают печатный УМК: тёмно-синий «ночного неба»,
   ледяной голубой, юнармейский красный. Заголовки — серифные, как в пособии. */

:root{
  --ink:#0E1A2B;          /* глубокий синий, основной тёмный */
  --ink-2:#16273F;        /* панели на тёмном */
  --ice:#DCE7F5;          /* ледяной голубой */
  --paper:#F4F7FB;        /* фон страниц */
  --card:#FFFFFF;
  --line:#D7E1EE;
  --muted:#5E7590;
  --text:#152233;
  --red:#C8102E;          /* акцент */
  --red-soft:#FBECEF;
  --sky:#2F6FB5;
  --ok:#1E7A52;
  --ok-soft:#E7F4ED;
  --warn:#9A6206;
  --warn-soft:#FDF2DF;

  --serif: Cambria, "Times New Roman", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r:14px;
  --shadow:0 1px 2px rgba(14,26,43,.06), 0 8px 24px -12px rgba(14,26,43,.22);
  --shadow-lg:0 2px 6px rgba(14,26,43,.08), 0 24px 48px -20px rgba(14,26,43,.32);
  --pad: clamp(16px, 4vw, 32px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif); color:var(--ink); line-height:1.2; margin:0}
a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
:focus-visible{outline:2.5px solid var(--sky); outline-offset:2px; border-radius:4px}

/* ---------- загрузка ---------- */
.boot{position:fixed; inset:0; display:grid; place-items:center; background:var(--ink); z-index:100}
.boot-mark{
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(220,231,245,.25); border-top-color:var(--ice);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.boot.gone{opacity:0; pointer-events:none; transition:opacity .3s}

/* ---------- шапка ---------- */
[hidden]{display:none !important}
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:20px;
  padding:0 var(--pad); height:64px;
  background:var(--ink); color:var(--ice);
}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{width:26px; height:26px; fill:var(--ice)}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text b{font-family:var(--serif); font-size:19px; letter-spacing:.09em}
.brand-text i{font-style:normal; font-size:10.5px; color:#8FA8CC; letter-spacing:.04em}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{
  color:#B9CBE4; padding:8px 13px; border-radius:9px; font-size:14.5px; font-weight:500;
}
.nav a:hover{background:rgba(220,231,245,.1); color:#fff; text-decoration:none}
.nav a.on{background:rgba(220,231,245,.16); color:#fff}
.userbox{display:flex; align-items:center; gap:10px; font-size:14px}
.userbox .uname{color:#fff; font-weight:600; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.userbox .urole{font-size:11px; color:#8FA8CC; display:block; font-weight:400}
.burger{display:none; background:none; border:0; padding:8px; cursor:pointer; margin-left:auto}
.burger span{display:block; width:22px; height:2px; background:var(--ice); margin:4px 0; border-radius:2px; transition:.2s}

/* ---------- каркас ---------- */
.view{display:block; padding:var(--pad); max-width:1240px; margin:0 auto; min-height:70vh}
.view.bleed{padding:0; max-width:none}
.view:focus{outline:none}
.stack{display:flex; flex-direction:column; gap:22px}
.stack > *{min-width:0}
.page-head{margin-bottom:22px}
.eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:6px;
}
.page-head h1{font-size:clamp(24px,3.4vw,34px)}
.page-head p{color:var(--muted); margin:8px 0 0; max-width:70ch}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.card-pad{padding:clamp(16px,2.5vw,26px)}

/* ---------- кнопки и формы ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 var(--sans); padding:12px 20px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; background:var(--ink); color:#fff;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{background:#1d3050; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.btn-accent{background:var(--red)} .btn-accent:hover{background:#a80d26}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:#EDF2F9}
.btn-sm{padding:8px 14px; font-size:13.5px; border-radius:8px}
.btn-wide{width:100%}

label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px}
.field{margin-bottom:16px}
.hint{font-size:12.5px; color:var(--muted); margin-top:5px}
input, select, textarea{
  width:100%; font:400 15px/1.4 var(--sans); color:var(--text);
  padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
input:focus, select:focus{border-color:var(--sky); outline:none; box-shadow:0 0 0 3px rgba(47,111,181,.15)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.err{background:var(--red-soft); color:#8A0B20; border:1px solid #F0CBD3;
  padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:16px}

/* ---------- вход / регистрация ---------- */
.auth{display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh}
.auth-side{background:var(--ink); color:var(--ice); padding:clamp(28px,5vw,64px); display:flex;
  flex-direction:column; justify-content:center; position:relative; overflow:hidden}
.auth-side h2{color:#fff; font-size:clamp(28px,3.6vw,42px); margin-bottom:16px}
.auth-side p{color:#B9CBE4; max-width:46ch; margin:0 0 26px}
.auth-facts{display:flex; gap:28px; flex-wrap:wrap; margin-top:8px}
.auth-facts div b{display:block; font-family:var(--serif); font-size:30px; color:#fff}
.auth-facts div span{font-size:12.5px; color:#8FA8CC}
.auth-form{padding:clamp(24px,4vw,52px); display:flex; flex-direction:column; justify-content:center;
  max-width:520px; width:100%; margin:0 auto}
.tabs{display:flex; gap:4px; background:#E8EEF6; padding:4px; border-radius:11px; margin-bottom:24px}
.tabs button{flex:1; border:0; background:none; padding:9px; border-radius:8px; cursor:pointer;
  font:600 14.5px var(--sans); color:var(--muted)}
.tabs button.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(14,26,43,.12)}

/* ---------- сигнатура: полётный маршрут ---------- */
.route{
  background:var(--ink); border-radius:var(--r); padding:clamp(18px,3vw,26px);
  color:var(--ice); box-shadow:var(--shadow-lg); overflow:hidden;
}
.route-top{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:6px}
.route-top h2{color:#fff; font-size:clamp(19px,2.4vw,25px)}
.route-top p{margin:5px 0 0; color:#8FA8CC; font-size:13.5px}
.route-pct{text-align:right}
.route-pct b{font-family:var(--serif); font-size:40px; color:#fff; display:block; line-height:1}
.route-pct span{font-size:11.5px; color:#8FA8CC; letter-spacing:.1em; text-transform:uppercase}
.route-svg{width:100%; height:auto; display:block; margin-top:4px}
.route-legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:#8FA8CC}
.route-legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}

/* ---------- сетка тем ---------- */
.exam{max-width:780px; margin:0 auto; min-width:0}
.topics{display:grid; grid-template-columns:repeat(auto-fill, minmax(275px,1fr)); gap:16px}
.topic{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; display:flex; flex-direction:column; gap:12px; position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
  text-decoration:none; color:inherit;
}
.topic:hover{text-decoration:none}
.topic.is-open:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#B9CBE4}
.topic.is-locked{opacity:.62; background:#FAFCFE}
.topic-head{display:flex; align-items:flex-start; gap:12px}
.topic-num{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:#EDF2F9; color:var(--ink); font:700 15px var(--sans);
}
.topic.is-done .topic-num{background:var(--ok-soft); color:var(--ok)}
.topic.is-current .topic-num{background:var(--red); color:#fff}
.topic h3{font-size:17px; line-height:1.25}
.topic-sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.bar{height:6px; background:#E8EEF6; border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--sky); border-radius:99px; transition:width .5s ease}
.topic.is-done .bar i{background:var(--ok)}
.topic-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:99px; background:#EDF2F9; color:var(--muted);
}
.chip-ok{background:var(--ok-soft); color:var(--ok)}
.chip-now{background:var(--red-soft); color:var(--red)}
.chip-lock{background:#EEF1F5; color:#78889C}
.topic .go{font-size:13.5px; font-weight:600; color:var(--sky)}

/* ---------- урок ---------- */
.lesson-wrap{display:grid; grid-template-columns:268px 1fr; gap:24px; align-items:start}
.lesson-wrap > *{min-width:0}
.lesson-nav{position:sticky; top:88px}
.lesson-nav ol{list-style:none; margin:0; padding:0}
.lesson-nav a[href*='lesson']{
  display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-radius:9px;
  color:var(--text); font-size:14px; line-height:1.35;
}
.lesson-nav a[href*='lesson']:hover{background:#EDF2F9; text-decoration:none}
.lesson-nav a.on{background:var(--ink); color:#fff}
.lesson-nav a[href*='lesson']{margin-bottom:2px}
.lesson-nav .tick{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:1.6px solid var(--line);
  display:grid; place-items:center; font-size:11px; margin-top:1px; color:transparent;
}
.lesson-nav a.done .tick{background:var(--ok); border-color:var(--ok); color:#fff}
.lesson-nav a.on .tick{border-color:rgba(255,255,255,.5)}
.lesson-nav a.on.done .tick{background:#fff; border-color:#fff; color:var(--ok)}

/* содержательная типографика урока */
.reader{font-size:17px; line-height:1.7; max-width:74ch; min-width:0}
.reader > *{max-width:100%}
.reader h3{font-size:clamp(21px,2.6vw,27px); margin-bottom:14px}
.reader h4{font-size:18px; margin:26px 0 8px}
.reader p{margin:0 0 15px}
.reader ul, .reader ol{margin:0 0 16px; padding-left:22px}
.reader li{margin-bottom:7px}
.reader figure{margin:22px 0; text-align:center}
.reader figure img{border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px}
.reader figcaption{font-size:13px; color:var(--muted); margin-top:8px; font-style:italic}
.tw{overflow-x:auto; margin:0 0 18px; -webkit-overflow-scrolling:touch}
.reader table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:440px}
.reader th{background:#EDF2F9; text-align:left; font-weight:700; color:var(--ink)}
.reader th, .reader td{border:1px solid var(--line); padding:9px 12px; vertical-align:top}
.reader table.two th:first-child{background:#E6EDF7}
.reader table.two th:last-child{background:var(--red-soft); color:var(--red)}
.cal{border-radius:12px; padding:16px 18px; margin:20px 0; font-size:15.5px}
.cal h5{margin:0 0 8px; font:700 15px var(--sans); color:var(--ink)}
.cal p{margin:0 0 8px} .cal p:last-child{margin:0}
.cal-note{background:#EDF2F9}
.cal-try{background:#fff; border:1px solid var(--line); border-left:4px solid var(--sky)}
.cal-story{background:#F1F4F8; border-left:4px solid var(--ink)}
.lesson-foot{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap}

/* ---------- экзамен ---------- */
.exam-bar{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.exam-bar .bar{flex:1}
.exam-bar span{font-size:13.5px; color:var(--muted); font-weight:600; white-space:nowrap}
.q{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,3vw,28px); box-shadow:var(--shadow)}
.q h3{font-size:20px; margin-bottom:18px; line-height:1.35}
.opt{display:block; position:relative; margin-bottom:10px; cursor:pointer}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{
  display:flex; gap:12px; align-items:flex-start; padding:13px 16px; border:1.5px solid var(--line);
  border-radius:11px; background:#fff; font-size:15.5px; line-height:1.45; transition:.14s;
}
.opt span::before{
  content:attr(data-k); flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  background:#EDF2F9; color:var(--muted); display:grid; place-items:center;
  font:700 12.5px var(--sans);
}
.opt:hover span{border-color:#B9CBE4; background:#FAFCFE}
.opt input:checked + span{border-color:var(--ink); background:#F2F6FB}
.opt input:checked + span::before{background:var(--ink); color:#fff}
.opt input:focus-visible + span{outline:2.5px solid var(--sky); outline-offset:2px}

.result-hero{text-align:center; padding:clamp(24px,4vw,40px); border-radius:var(--r); margin-bottom:22px}
.result-hero.pass{background:var(--ok-soft); border:1px solid #BFE3D0}
.result-hero.fail{background:var(--warn-soft); border:1px solid #F1DDB6}
.result-hero b{display:block; font-family:var(--serif); font-size:clamp(44px,8vw,68px); line-height:1;
  color:var(--ink)}
.result-hero h2{margin:12px 0 6px; font-size:clamp(20px,3vw,26px)}
.result-hero p{margin:0; color:var(--muted)}
.review{margin-top:8px}
.review-item{border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; background:#fff}
.review-item.bad{border-color:#F0CBD3; background:#FEF8F9}
.review-q{font-weight:600; margin-bottom:9px}
.review-line{font-size:14.5px; margin-bottom:5px}
.review-line b{color:var(--muted); font-weight:600}
.review-exp{font-size:14.5px; color:var(--muted); margin-top:9px; padding-top:9px; border-top:1px dashed var(--line)}

/* ---------- админ ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
.stat b{display:block; font-family:var(--serif); font-size:34px; color:var(--ink); line-height:1.1}
.stat span{font-size:12.5px; color:var(--muted)}
.tbl-wrap{overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
table.tbl{border-collapse:collapse; width:100%; font-size:14px; min-width:820px}
table.tbl th{background:#EDF2F9; padding:11px 12px; text-align:left; font-weight:700; color:var(--ink);
  position:sticky; top:0; white-space:nowrap; font-size:13px}
table.tbl td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:middle}
table.tbl tbody tr:hover{background:#FAFCFE; cursor:pointer}
.dots{display:flex; gap:3px}
.dots i{width:15px; height:15px; border-radius:4px; background:#E8EEF6; display:block}
.dots i.p{background:var(--ok)}
.dots i.s{background:#F3C969}
.mini-bar{width:78px; height:6px; background:#E8EEF6; border-radius:99px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px}
.mini-bar i{display:block; height:100%; background:var(--sky)}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.toolbar input, .toolbar select{width:auto; min-width:180px; flex:0 1 260px}
.spread{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.topic-stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.topic-stat h4{font-size:15px; margin-bottom:9px}
.row{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--muted); margin-bottom:6px; align-items:baseline}
.row b{color:var(--ink); white-space:nowrap}
.row + .row{border-top:1px dotted var(--line); padding-top:6px}
.topic-stat .row{font-size:13px; margin-bottom:4px}
.topic-stat .row + .row{border:0; padding-top:0}

/* ---------- словарь ---------- */
.gloss{columns:2; column-gap:32px}
.gloss dl{break-inside:avoid; margin:0 0 14px}
.gloss dt{font-weight:700; color:var(--ink); font-size:15px}
.gloss dt .star{color:var(--red); font-size:12px; vertical-align:super}
.gloss dd{margin:2px 0 0; font-size:14.5px; color:var(--text)}

/* ---------- прочее ---------- */
.empty{text-align:center; padding:56px 20px; color:var(--muted)}
.empty h3{margin-bottom:8px}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px);
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:11px; font-size:14.5px;
  box-shadow:var(--shadow-lg); opacity:0; transition:.28s ease; z-index:80; max-width:90vw;
}
.toast.show{transform:translate(-50%,0); opacity:1}
.cert{
  background:var(--ink); color:var(--ice); border-radius:var(--r); padding:clamp(26px,4vw,44px);
  text-align:center;
}
.cert h2{color:#fff; font-size:clamp(24px,3.6vw,34px); margin-bottom:10px}
.cert p{color:#B9CBE4; max-width:56ch; margin:0 auto}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{padding:28px var(--pad) 32px}
  .lesson-wrap{grid-template-columns:1fr}
  .lesson-nav{position:static; order:2}
  .gloss{columns:1}
}
@media (max-width:720px){
  .burger{display:block}
  .nav{
    position:absolute; top:64px; left:0; right:0; background:var(--ink);
    flex-direction:column; padding:8px var(--pad) 16px; gap:2px; display:none;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  .nav.open{display:flex}
  .userbox{display:none}
  .nav .mobile-user{display:block; color:#8FA8CC; font-size:13px; padding:10px 13px 4px; border-top:1px solid rgba(220,231,245,.15); margin-top:6px}
  .grid2{grid-template-columns:1fr}
  .route-pct{text-align:left}
}
@media (min-width:721px){ .nav .mobile-user, .nav .only-mobile{display:none} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

@media print{
  .topbar,.lesson-foot,.lesson-nav,.toast{display:none}
  body{background:#fff}
}

/* ---------- согласие в форме регистрации ---------- */
.consent{margin:4px 0 20px; padding:14px 16px; background:#EDF2F9; border-radius:11px}
.check{display:flex; gap:11px; align-items:flex-start; font-weight:400; font-size:14px;
  cursor:pointer; margin-bottom:0; line-height:1.45; color:var(--text)}
.check + .check{margin-top:11px; padding-top:11px; border-top:1px solid #DAE3EF}
.check input{width:19px; height:19px; flex:0 0 auto; margin-top:1px; accent-color:var(--red)}

/* ---------- продолжить с места остановки ---------- */
.resume{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--red);
  border-radius:12px; padding:16px 20px; margin-top:16px; color:inherit;
  transition:transform .14s ease, box-shadow .14s ease;
}
.resume:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow)}
.resume-k{display:block; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:3px}
.resume b{font-family:var(--serif); font-size:19px; color:var(--ink)}
.resume-go{font-weight:600; color:var(--red); font-size:15px; white-space:nowrap}

/* ---------- свидетельство ---------- */
.cert-actions{display:flex; gap:12px; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap}
.cert-sheet{
  background:#fff; width:100%; max-width:1000px; margin:0 auto; padding:14px;
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
}
.cert-frame{
  border:2px solid var(--ink); border-radius:6px; padding:clamp(24px,4vw,52px);
  position:relative; text-align:center;
}
.cert-frame::before{
  content:''; position:absolute; inset:7px; border:1px solid var(--line); border-radius:3px;
  pointer-events:none;
}
.cert-top{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:22px}
.cert-mark{width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:22px}
.cert-org{font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase;
  max-width:60ch; line-height:1.5}
.cert-title{font-size:clamp(28px,4.6vw,46px); letter-spacing:.16em; margin-bottom:4px}
.cert-sub{font-size:15px; color:var(--muted); margin-bottom:26px}
.cert-course{font-family:var(--serif); font-size:clamp(17px,2.2vw,21px); color:var(--ink);
  margin-bottom:26px}
.cert-name{
  font-family:var(--serif); font-size:clamp(24px,3.6vw,34px); color:var(--ink);
  border-bottom:1.5px solid var(--ink); display:inline-block; padding:0 30px 8px; margin-bottom:20px;
}
.cert-body{max-width:62ch; margin:0 auto 24px; font-size:15.5px; color:var(--text); line-height:1.6}
.cert-table{margin:0 auto 16px; border-collapse:collapse; font-size:13.5px; max-width:560px; width:100%}
.cert-table td{border-bottom:1px dotted var(--line); padding:5px 10px; text-align:left}
.cert-table td:last-child{text-align:right; font-weight:700; white-space:nowrap}
.cert-score{font-size:15px; margin-bottom:34px}
.cert-sign{display:flex; justify-content:space-between; gap:30px; margin-bottom:26px; flex-wrap:wrap}
.cert-sign > div{flex:1 1 200px; text-align:center}
.cert-line{display:block; border-bottom:1px solid var(--ink); padding-bottom:4px; margin-bottom:6px;
  min-height:22px; font-size:15px}
.cert-sign small{font-size:11.5px; color:var(--muted)}
.cert-foot{display:flex; justify-content:space-between; gap:16px; font-size:11px;
  color:var(--muted); border-top:1px solid var(--line); padding-top:12px; flex-wrap:wrap}

@media print{
  .cert-actions{display:none}
  .cert-sheet{border:0; box-shadow:none; max-width:none; padding:0; margin:0}
  .view{padding:0; max-width:none}
  @page{size:A4 portrait; margin:12mm}
}

/* ---------- заявки на восстановление ---------- */
.alert{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--warn-soft); border:1px solid #F1DDB6; border-radius:12px; padding:14px 18px;
}
.alert b{color:#7A4E05}
.pw-result{
  margin-top:10px; padding:10px 12px; background:var(--ok-soft); border:1px solid #BFE3D0;
  border-radius:9px; font-size:13.5px; display:flex; gap:10px; align-items:center;
  flex-wrap:wrap; justify-content:space-between;
}
code.pw{
  font-family:var(--mono); font-size:15px; background:#fff; padding:3px 9px;
  border-radius:6px; border:1px solid #BFE3D0; letter-spacing:.06em;
}

/* ---------- макет свидетельства в админке ---------- */
.cert-upload{display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start}
.cert-prev{
  border:1px solid var(--line); border-radius:10px; background:#F7F9FC; min-height:230px;
  display:grid; place-items:center; padding:12px; overflow:hidden;
}
.cert-prev img{max-height:380px; box-shadow:var(--shadow)}
.cert-prev-empty{color:var(--muted); text-align:center; font-size:14px; line-height:1.6}
.cert-upload-side .field{margin-bottom:12px}
table.tbl input[type=number]{width:92px; padding:6px 8px; font-size:13.5px}
table.tbl select{width:auto; min-width:112px; padding:6px 8px; font-size:13.5px}

/* ---------- свидетельство на пользовательском макете ---------- */
.cert-custom{padding:0; border:0; background:none; box-shadow:none; max-width:1000px}
.cert-canvas{
  position:relative; width:100%; background:#fff; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.cert-canvas > img{display:block; width:100%; height:auto}
.cf{position:absolute; color:var(--text); line-height:1.35; white-space:pre-wrap}
.cf-scores{display:flex; flex-direction:column; gap:1px}
.cs-row{display:flex; justify-content:space-between; gap:12px;
  border-bottom:1px dotted rgba(0,0,0,.22); padding:1px 0}
.cs-row b{white-space:nowrap}

@media print{
  .cert-custom{max-width:none}
  .cert-canvas{border:0; border-radius:0; box-shadow:none}
}
@page{size:A4 portrait; margin:0}

@media (max-width:860px){
  .cert-upload{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- направления
   Общий кабинет: карточка на каждое направление + переключатель в шапке. */

.nav-sep{display:inline-block; width:1px; height:18px; margin:0 4px;
  background:rgba(220,231,245,.22); vertical-align:middle}
.nav .nav-dir{opacity:.82}
.nav .nav-dir:hover{opacity:1}

.dcards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr))}

.dcard{background:var(--card, #fff); border:1px solid var(--line);
  border-top:4px solid var(--d-sky); border-radius:14px; padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow)}
.dcard-top{display:flex; align-items:center; gap:12px}
.dcard-mark{width:34px; height:34px; flex:none; fill:var(--d-ink)}
.dcard-name{flex:1; min-width:0}
.dcard-name b{display:block; font-family:Georgia,'Times New Roman',serif;
  font-size:19px; color:var(--d-ink); line-height:1.2}
.dcard-name i{display:block; font-style:normal; font-size:13px; color:var(--muted); margin-top:2px}
.dcard-pct{text-align:right; flex:none}
.dcard-pct b{display:block; font-size:20px; color:var(--d-ink); line-height:1}
.dcard-pct span{font-size:11px; color:var(--muted)}
.dcard-bar{height:6px; border-radius:99px; background:var(--line); overflow:hidden}
.dcard-bar i{display:block; height:100%; background:var(--d-sky); border-radius:99px}
.dcard-note{margin:0; font-size:14px; color:var(--muted); line-height:1.5; flex:1}
.dcard-go{align-self:flex-start}

@media (max-width:560px){ .dcard{padding:18px 16px 16px} }

/* ---------------------------------------------------------------- редактор
   Экран #/admin/edit: правка страниц, направлений, уроков и вопросов. */

.ed-tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:4px}
.ed-tab{
  background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
  padding:11px 15px; font:600 15px system-ui,sans-serif; color:var(--muted);
}
.ed-tab:hover{color:var(--ink)}
.ed-tab.on{color:var(--ink); border-bottom-color:var(--accent)}

.ed-scope{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 4px; font-size:14px}
.ed-scope > span{color:var(--muted)}
.ed-picker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.ed-pick{
  background:var(--card,#fff); border:1px solid var(--line); border-radius:9px;
  padding:8px 13px; cursor:pointer; font:500 14px system-ui,sans-serif; color:var(--ink);
}
.ed-pick i{font-style:normal; color:var(--muted); font-size:12.5px; margin-left:4px}
.ed-pick:hover{border-color:var(--sky)}
.ed-pick.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.ed-pick.on i{color:#B9CBE4}

/* строка состояния и кнопки */
.ed-bar{
  position:sticky; top:0; z-index:12; display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; justify-content:space-between; background:var(--card,#fff);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:14px 0 20px;
}
.ed-bar-btns{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ed-status{font-size:13.5px; color:var(--ok,#1E7A52); font-weight:600}
.ed-status.plain{color:var(--muted); font-weight:400}
.ed-status.warn{color:#B26A00}

/* блоки и карточки */
.ed-h{font-size:19px; margin:26px 0 12px}
.ed-card{
  background:var(--card,#fff); border:1px solid var(--line); border-radius:13px;
  padding:20px 20px 8px; margin-bottom:16px;
}
.ed-card h3{font-size:17.5px; margin:0 0 14px}
.ed-cols{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.ed-block{border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--card,#fff)}
.ed-block summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; padding:14px 16px;
  list-style:none; font-size:15px;
}
.ed-block summary::-webkit-details-marker{display:none}
.ed-block[open] summary{border-bottom:1px solid var(--line)}
.ed-block-kind{
  flex:none; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sky); background:var(--ice); padding:4px 9px; border-radius:6px;
}
.ed-block-title{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.ed-block-ops{display:flex; gap:4px; flex:none}
.ed-op{
  background:none; border:1px solid var(--line); border-radius:7px; width:28px; height:28px;
  cursor:pointer; color:var(--muted); font-size:14px; line-height:1;
}
.ed-op:hover{border-color:var(--sky); color:var(--sky)}
.ed-op-x:hover{border-color:var(--accent); color:var(--accent)}
.ed-block-body{padding:16px}

/* поля */
.ed-field{display:block; margin-bottom:14px}
.ed-label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px}
.ed-label i{font-style:normal; font-weight:400; color:var(--muted); margin-left:6px; font-size:12.5px}
.ed-field input[type=text], .ed-field input[type=number], .ed-field textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font:400 15px/1.5 system-ui,sans-serif; color:var(--ink); background:#fff;
}
.ed-field textarea{resize:vertical}
.ed-field input:focus, .ed-field textarea:focus{outline:2px solid var(--sky); outline-offset:-1px; border-color:var(--sky)}
.ed-color{display:flex; align-items:center; gap:10px}
.ed-color input[type=color]{width:46px; height:34px; border:1px solid var(--line); border-radius:8px; padding:2px; background:#fff; cursor:pointer}
.ed-color code{font-size:13px; color:var(--muted)}

/* повторяющиеся элементы */
.ed-items{border:1px dashed var(--line); border-radius:11px; padding:14px; margin:14px 0}
.ed-items-h{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.ed-items-h i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; margin-left:6px}
.ed-item{border-left:3px solid var(--ice); padding-left:12px; margin-bottom:14px}
.ed-item-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.ed-item-h b{font-size:12.5px; color:var(--muted)}
.ed-row{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px}
.ed-row textarea{
  flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  font:400 14.5px/1.5 system-ui,sans-serif; resize:vertical;
}
.ed-x{
  flex:none; background:none; border:1px solid var(--line); border-radius:7px;
  width:30px; height:30px; cursor:pointer; color:var(--muted); font-size:16px; line-height:1;
}
.ed-x:hover{border-color:var(--accent); color:var(--accent)}

/* варианты ответа */
.ed-opt{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px}
.ed-opt textarea{
  flex:1; border:1px solid var(--line); border-radius:9px; padding:9px 11px;
  font:400 14.5px/1.5 system-ui,sans-serif; resize:vertical;
}
.ed-opt.right textarea{border-color:var(--ok,#1E7A52); background:#F3FAF6}
.ed-mark{
  flex:none; width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:2px solid var(--line); background:#fff; color:var(--ok,#1E7A52);
  font-size:15px; font-weight:700; line-height:1;
}
.ed-opt.right .ed-mark{border-color:var(--ok,#1E7A52); background:var(--ok,#1E7A52); color:#fff}

/* текст урока */
.ed-rich{margin-top:14px}
.ed-tools{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px}
.ed-tool{
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:6px 11px;
  cursor:pointer; font:600 13.5px system-ui,sans-serif; color:var(--ink);
}
.ed-tool:hover{border-color:var(--sky); color:var(--sky)}
.ed-tool.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.ed-tool-code{margin-left:auto; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.ed-rich-body{
  border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:#fff;
  min-height:180px; font:400 16px/1.65 Georgia,'Times New Roman',serif; color:#1F2C3D;
}
.ed-rich-body:focus{outline:2px solid var(--sky); outline-offset:-1px}
.ed-rich-body h3{font-size:19px; margin:18px 0 8px}
.ed-rich-body p{margin:0 0 12px}
.ed-rich-body ul{margin:0 0 12px; padding-left:22px}
.ed-rich-code{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:14px;
  font:400 13px/1.6 ui-monospace,Menlo,Consolas,monospace; resize:vertical;
}
.ed-addblock{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:18px; font-size:14px}
.ed-addblock > span{color:var(--muted)}

@media (max-width:640px){
  .ed-bar{position:static}
  .ed-block summary{flex-wrap:wrap; gap:8px}
  .ed-block-title{width:100%; order:3}
}
.ed-checks{display:flex; flex-direction:column; gap:9px; margin-top:6px; font-size:14.5px}
.ed-checks label{display:flex; align-items:center; gap:9px; cursor:pointer}
.ed-checks input[disabled]{cursor:not-allowed}
.ed-checks input[disabled] + *{color:var(--muted)}
.ed-req, .ed-hid{font-style:normal; font-size:12px; padding:2px 7px; border-radius:5px}
.ed-req{background:#FDECEE; color:#A3121F}
.ed-hid{background:var(--ice); color:var(--muted)}

/* неактивная кнопка: приглушённая, а не акцентная */
.btn:disabled, .btn[disabled]{
  opacity:1; cursor:default; background:var(--ice); color:var(--muted);
  border-color:transparent; box-shadow:none; transform:none;
}
.btn:disabled:hover, .btn[disabled]:hover{transform:none; background:var(--ice)}
.row-btns{display:flex; gap:8px; flex-wrap:wrap}
/* загруженный логотип в шапке приложения */
.brand-logo{height:34px; width:auto; max-width:180px; object-fit:contain; display:block}
@media (max-width:640px){ .brand-logo{height:28px; max-width:130px} }
/* вопрос экзамена: запрет выделения (списывание через копирование) */
.noselect, .noselect *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* варианты ответа остаются кликабельными */
.noselect .opt{cursor:pointer}
@media print{
  .exam .q{display:none !important}
  .exam::after{content:'Печать страницы экзамена отключена'; display:block; padding:40px; text-align:center}
}
/* загрузка изображений в редакторе */
.ed-brand{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px}
.ed-brand-prev{
  display:flex; align-items:center; justify-content:center; min-width:130px; height:66px;
  padding:8px 14px; background:var(--paper); border:1px dashed var(--line); border-radius:10px;
}
.ed-brand-prev.small{min-width:66px}
.ed-brand-prev img{max-height:50px; max-width:170px; width:auto; object-fit:contain}
.ed-brand-prev span{font-size:13px; color:var(--muted)}
.ed-brand-ops{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ed-brand-ops label{margin:0; cursor:pointer}

/* Фраза поддержки после неудачной попытки экзамена. Тон спокойный: это
   подсказка, а не утешительный баннер. */
/* Селектор с элементом: правило .result-hero p выше по специфичности и
   обнуляло боковые margin, из-за чего блок прижимался к левому краю. */
.result-hero p.result-say{
  margin:16px auto 0; max-width:42ch; padding-top:14px;
  border-top:1px solid rgba(14,26,43,.14);
  font-style:italic; color:var(--ink); opacity:.85;
  text-align:center;
  text-wrap:balance;              /* строки примерно равной длины, без «хвоста» */
}

/* ------------------------------------------------------------------
   Запрет выделения текста на всём сайте.

   Выделение отключено везде, КРОМЕ трёх мест, где оно нужно для работы:
   поля ввода (иначе нельзя исправить опечатку), кабинет администратора
   (иначе не скопировать почту или телефон участника из списка) и
   редактор содержимого. Снимок экрана при этом никак не ограничивается.
   ------------------------------------------------------------------ */
body{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;      /* длинное нажатие на телефоне */
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, [contenteditable="true"],
.admin, .admin *, .ed, .ed *{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
/* перетаскивание картинок мышью — тоже способ вытащить материал */
img{ -webkit-user-drag:none; user-drag:none; }