*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cream:#F0EDE4; --cream-deep:#E7E2D5; --paper:#FBFAF6;
    --ink:#1A1915; --ink-soft:#5C574C; --ink-faint:#908A7C; --line:#D8D2C4;
    --accent:#D97757; --accent-ink:#B14B26;
    --ok:#0C7C60; --ok-bg:#E8F1EC; --no:#B23C2A; --no-bg:#F6E7E2;
    --gpt:#10A37F; --gpt-ink:#0C7C60; --gemini:#4285F4; --gemini-ink:#5B57C8;
    --font-serif:'Fraunces',Georgia,serif;
    --font-sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}

html { scroll-behavior: smooth; }
body {
    background: var(--cream); color: var(--ink); font-family: var(--font-sans); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body::before {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.serif { font-family: var(--font-serif); }
.it { font-style: italic; }
.hl { color: var(--accent-ink); }

.mark svg { width:100%; height:100%; display:block; transform-origin:50% 50%; }
.mark.spin svg { animation: spin 32s linear infinite; }
.mark .ray { animation: twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.18s); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ============ AUTH SCREEN ============ */
#auth {
    position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: radial-gradient(120% 90% at 80% 10%, #F6F1E6 0%, var(--cream) 55%);
}
.auth-card {
    width: min(440px, 100%); background: var(--paper); border: 1px solid var(--line);
    border-radius: 22px; padding: clamp(1.8rem, 5vw, 3rem); text-align: center;
    box-shadow: 0 30px 70px -40px rgba(60,40,20,.5);
}
.auth-card .mark { width: 72px; height: 72px; margin: 0 auto clamp(1rem,3vw,1.6rem); }
.auth-eyebrow { font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); }
.auth-card h1 { font-family:var(--font-serif); font-weight:500; font-size: clamp(1.8rem,5vw,2.6rem); line-height:1.04; letter-spacing:-.02em; margin:.4rem 0 .7rem; }
.auth-card p { color: var(--ink-soft); font-size: 1rem; font-weight: 500; margin-bottom: 1.6rem; }
#tg-widget { display: flex; justify-content: center; min-height: 48px; }
.note { font-size:.82rem; color:var(--ink-faint); background:var(--cream); border:1px dashed var(--line); border-radius:10px; padding:.7rem .9rem; margin-bottom: 1rem; line-height:1.45; }
.note.denied { color:var(--no); border-color:#E6C4BA; background:var(--no-bg); }
.demo-btn {
    margin-top: 1rem; width: 100%; background: var(--accent); color:#fff; border:0; cursor:pointer;
    font-family: var(--font-sans); font-weight:700; font-size: 1rem; padding:.85em 1.2em; border-radius: 999px;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease; text-decoration:none; display:inline-block;
}
.demo-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(180,75,38,.6); background:#C7613F; }
.demo-btn[disabled] { opacity:.6; cursor:default; transform:none; box-shadow:none; }
.demo-btn.ghost { background:transparent; color:var(--ink-soft); border:1px solid var(--line); box-shadow:none; margin-top:1.4rem; }
.demo-btn.ghost:hover { background:rgba(217,119,87,.08); color:var(--accent-ink); border-color:var(--accent); transform:none; box-shadow:none; }
.demo-hint { margin-top:.8rem; font-size:.78rem; color:var(--ink-faint); }

/* ============ APP SHELL ============ */
#app { display: grid; grid-template-columns: 300px 1fr; height: 100vh; height: 100dvh; position: relative; z-index: 2; }

.sidebar { background: var(--cream-deep); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.side-top { padding: clamp(1.2rem,2vw,1.8rem); border-bottom: 1px solid var(--line); display:flex; align-items:center; gap:.7rem; }
.side-top .mark { width: 34px; height: 34px; flex:none; }
.side-brand { font-family:var(--font-serif); font-weight:600; font-size:1.1rem; line-height:1; letter-spacing:-.01em; }
.side-brand small { display:block; font-family:var(--font-sans); font-weight:600; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:.3rem; }

.module-label { padding: 1.2rem clamp(1.2rem,2vw,1.8rem) .5rem; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.lesson-nav { list-style:none; padding: 0 .8rem; display:flex; flex-direction:column; gap:.2rem; }
.lesson-nav button {
    width:100%; text-align:left; background:transparent; border:0; cursor:pointer; font-family:var(--font-sans);
    display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .8rem; border-radius:10px; color:var(--ink-soft);
    font-size:.92rem; font-weight:600; line-height:1.3; transition: background .2s ease, color .2s ease;
}
.lesson-nav button:hover { background: rgba(217,119,87,.1); color: var(--ink); }
.lesson-nav button.active { background: var(--accent); color:#fff; }
.lesson-nav .ln { font-family:var(--font-serif); font-style:italic; font-weight:500; flex:none; opacity:.8; }
.lesson-nav button.active .ln { opacity:1; }

.side-user { margin-top:auto; padding: clamp(1rem,2vw,1.4rem); border-top:1px solid var(--line); display:flex; align-items:center; gap:.7rem; }
.avatar { width:38px; height:38px; border-radius:50%; flex:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; background-size:cover; background-position:center; }
.side-user .uname { font-weight:700; font-size:.9rem; line-height:1.1; }
.side-user .urole { font-size:.72rem; color:var(--ink-faint); }
.side-user .urole.sensei { color:var(--accent-ink); font-weight:700; }
.side-user.is-admin { border-radius:12px; transition:background .2s ease; }
.side-user.is-admin .avatar, .side-user.is-admin .uname, .side-user.is-admin .urole { cursor:pointer; }
.side-user.is-admin:hover { background:rgba(217,119,87,.07); }
.role-go { color:var(--accent-ink); font-weight:700; white-space:nowrap; }
.logout { margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:8px; cursor:pointer; color:var(--ink-soft); font-size:.72rem; font-weight:600; padding:.35em .6em; text-decoration:none; }
.logout:hover { border-color: var(--accent); color: var(--accent-ink); }

.content { overflow-y: auto; position: relative; }
.content-inner { max-width: 760px; margin: 0 auto; padding: clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,3rem) clamp(3rem,7vw,5rem); }
.lesson { display: none; }
.lesson.active { display: block; }
.lesson-head { margin-bottom: clamp(1.6rem,4vw,2.6rem); }
.lesson-kicker { font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink); }
.lesson-title { font-family:var(--font-serif); font-weight:500; font-size: clamp(1.9rem,5vw,3.1rem); line-height:1.04; letter-spacing:-.025em; margin-top:.4rem; }
.lesson-lead { margin-top:.8rem; font-size: clamp(1rem,1.8vw,1.2rem); color:var(--ink-soft); font-weight:500; max-width:56ch; }

.block { margin-top: clamp(1.8rem,4vw,2.6rem); }
.block-head { display:flex; align-items:baseline; gap:.8rem; margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.block-num { font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:1.6rem; color:var(--accent); line-height:1; }
.block-title { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.25rem,3vw,1.75rem); letter-spacing:-.01em; }
p.body { font-size: clamp(.98rem,1.6vw,1.12rem); margin:.6rem 0; }
p.body.muted { color: var(--ink-soft); }

ul.checks { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin:.8rem 0; }
ul.checks li { position:relative; padding-left:1.4em; font-size: clamp(.95rem,1.6vw,1.08rem); }
ul.checks li::before { content:""; position:absolute; left:0; top:.72em; width:.7em; height:.14em; border-radius:2px; background:var(--accent); }
ul.checks b { font-weight:700; }

/* инлайн-ссылки в тексте уроков */
.lnk { color:var(--accent-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:rgba(177,75,38,.42); transition:color .15s ease, text-decoration-color .15s ease; overflow-wrap:break-word; }
.lnk:hover { color:var(--accent); text-decoration-color:var(--accent); }

.callout { border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem) clamp(1.1rem,2.4vw,1.5rem); margin:1.1rem 0; border-left:3px solid var(--accent); background:#FBF1EC; }
.callout.tip { border-left-color:var(--ok); background:var(--ok-bg); }
.callout .label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.35rem; }
.callout.tip .label { color:var(--ok); }
.callout p { font-size: clamp(.95rem,1.6vw,1.06rem); }
.callout b { color:var(--accent-ink); } .callout.tip b { color:var(--ok); }

/* ============ ВИДЕО УРОКА ============ */
.video-figure { margin: clamp(1.4rem,3.5vw,2.2rem) 0; }
.video-frame {
    position: relative; border-radius: 18px; overflow: hidden; background:#100E0B;
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px -42px rgba(60,40,20,.55), 0 2px 0 rgba(255,255,255,.4) inset;
}
.video-frame::after {
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px;
    box-shadow: 0 0 0 1px rgba(26,25,21,.06) inset;
}
.video-frame video { display:block; width:100%; height:auto; aspect-ratio: 1668 / 900; background:#100E0B; }
.video-cap { margin-top:.7rem; font-size:.8rem; color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); display:flex; align-items:center; gap:.5rem; }
.video-cap::before { content:""; width:14px; height:1px; background:var(--accent); flex:none; }

.twocol { display:grid; grid-template-columns:1fr 1fr; gap: clamp(.8rem,2vw,1.2rem); margin:1.1rem 0; }
.box { border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); border:1px solid var(--line); background:var(--paper); }
.box.ok { background:var(--ok-bg); border-color:#BFD9CD; } .box.no { background:var(--no-bg); border-color:#E6C4BA; }
.box h4 { font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.7rem; }
.box.ok h4 { color:var(--ok); } .box.no h4 { color:var(--no); }
.box ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.box li { font-size: clamp(.88rem,1.5vw,1rem); padding-left:1.4em; position:relative; line-height:1.4; }
.box.ok li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.box.no li::before { content:"✕"; position:absolute; left:0; color:var(--no); font-weight:700; }

.path { display:flex; flex-wrap:wrap; align-items:stretch; gap:.6rem; margin:1rem 0; }
.path-step { flex:1 1 0; min-width:120px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; }
.path-step .tier { font-family:var(--font-serif); font-weight:600; font-size:1.2rem; }
.path-step .when { font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; }
.path-arrow { align-self:center; color:var(--accent); font-weight:700; }

.code { background:#211F1B; color:#EFEAE0; border-radius:12px; padding:1rem 1.2rem; font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.88rem; line-height:1.7; overflow-x:auto; margin:1rem 0; }
.code .p { color:var(--accent); user-select:none; } .code .c { color:#9A9385; }

.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.1rem 0; }
.step3 { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding: clamp(1rem,2vw,1.5rem); position:relative; overflow:hidden; }
.step3::after { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--accent); }
.step3 .n { font-family:var(--font-serif); font-size:1.8rem; color:var(--accent); line-height:1; }
.step3 .t { font-family:var(--font-serif); font-weight:600; font-size:1.25rem; margin:.2rem 0; }
.step3 .d { font-size:.92rem; color:var(--ink-soft); }

.compare { display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(.7rem,1.6vw,1.1rem); margin:1.2rem 0; }
.ai { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding: clamp(1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.6rem; position:relative; overflow:hidden; --accent2:var(--ink-soft); --accent2-ink:var(--ink-soft); }
.ai::before { content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--accent2); }
.ai.claude { --accent2:var(--accent); --accent2-ink:var(--accent-ink); border-color:var(--accent); background:linear-gradient(180deg,#FBF2EC,var(--paper) 40%); }
.ai.gpt { --accent2:var(--gpt); --accent2-ink:var(--gpt-ink); }
.ai.gemini { --accent2:var(--gemini); --accent2-ink:var(--gemini-ink); }
.ai .badge { position:absolute; top:1rem; right:1rem; font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.3em .6em; border-radius:999px; }
.ai .mk { width:46px; height:46px; }
.ai .nm { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; line-height:.95; letter-spacing:-.02em; }
.ai .vn { display:inline-flex; align-items:center; gap:.5em; font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent2-ink); }
.ai .vn::before { content:""; width:.5em; height:.5em; border-radius:50%; background:var(--accent2); }
.ai .tg { font-family:var(--font-serif); font-style:italic; font-size:1.02rem; line-height:1.25; color:var(--accent2-ink); }
.ai ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem; }
.ai li { display:flex; gap:.5em; font-size:.9rem; line-height:1.35; }
.ai li::before { content:""; flex:none; width:.6em; height:.12em; margin-top:.6em; border-radius:2px; background:var(--accent2); }

.sub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:1.1rem 0; }
.sub { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding: clamp(1rem,2vw,1.5rem); display:flex; flex-direction:column; gap:.5rem; }
.sub.best { border-color:var(--accent); background:linear-gradient(180deg,#FBF2EC,var(--paper) 45%); position:relative; }
.sub .tier { font-family:var(--font-serif); font-weight:600; font-size:1.5rem; }
.sub .price { font-weight:800; color:var(--accent-ink); font-size:1.05rem; }
.sub .for { font-size:.9rem; color:var(--ink-soft); }
.sub .pick { margin-top:auto; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }

.cta-card { background:linear-gradient(180deg,#FBF1EC,var(--paper) 60%); border:1px solid var(--accent); border-radius:16px; padding: clamp(1.2rem,3vw,1.9rem); margin-top:1.4rem; }
.cta-card p { font-size: clamp(.98rem,1.6vw,1.12rem); } .cta-card b { color:var(--accent-ink); font-weight:700; }
.tg-btn { display:inline-flex; align-items:center; gap:.55em; margin-top:1.1rem; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; padding:.7em 1.3em; border-radius:999px; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.tg-btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(180,75,38,.65); background:#C7613F; }
.tg-btn svg { width:1.2em; height:1.2em; }

/* ============ ОБСУЖДЕНИЕ УРОКА ============ */
.comments { margin-top: clamp(2.4rem,6vw,3.8rem); padding-top: clamp(1.6rem,4vw,2.4rem); border-top: 1px solid var(--line); }
.comments-head { display:flex; align-items:baseline; gap:.55rem; margin-bottom:1.1rem; }
.comments-title { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.3rem,3vw,1.75rem); letter-spacing:-.01em; }
.comments-count { font-family:var(--font-serif); font-style:italic; color:var(--ink-faint); font-size:1.05rem; }

.comment-form { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.9rem; margin-bottom:1.5rem; transition: border-color .2s ease, box-shadow .2s ease; }
.comment-form:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(217,119,87,.12); }
.comment-form textarea { width:100%; border:0; background:transparent; resize:vertical; min-height:2.6em; font-family:var(--font-sans); font-size:1rem; line-height:1.5; color:var(--ink); outline:none; }
.comment-form textarea::placeholder { color:var(--ink-faint); }
.comment-form-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.55rem; }
.comment-hint { font-size:.8rem; color:var(--no); line-height:1.3; }
.comment-send { background:var(--accent); color:#fff; border:0; cursor:pointer; font-family:var(--font-sans); font-weight:700; font-size:.9rem; padding:.55em 1.4em; border-radius:999px; flex:none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.comment-send:hover { transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(180,75,38,.6); background:#C7613F; }
.comment-send[disabled] { opacity:.55; cursor:default; transform:none; box-shadow:none; }

.comment-list { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.comment-empty { color:var(--ink-faint); font-style:italic; font-family:var(--font-serif); font-size:1.02rem; padding:.3rem 0; }
.comment { display:flex; gap:.8rem; align-items:flex-start; }
.comment-av { flex:none; width:38px; height:38px; border-radius:50%; background:var(--cream-deep); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem; border:1px solid var(--line); background-size:cover; background-position:center; }
.comment-av.has-img { color:transparent; }
.comment-body { flex:1 1 auto; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:14px; border-top-left-radius:4px; padding:.7rem .95rem .8rem; }
.comment-meta { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.28rem; flex-wrap:wrap; }
.comment-name { font-weight:700; font-size:.92rem; }
.comment-time { font-size:.74rem; color:var(--ink-faint); }
.sensei-badge { font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.2em .55em; border-radius:999px; line-height:1.2; }
.comment-del { margin-left:auto; background:transparent; border:0; cursor:pointer; color:var(--ink-faint); font-size:.74rem; font-family:var(--font-sans); text-decoration:underline; padding:0; }
.comment-del:hover { color:var(--no); }
.comment-text { font-size:.98rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }

/* действия под комментарием: респект + ответить + удалить */
.comment-actions { display:flex; align-items:center; gap:1.1rem; margin-top:.5rem; }
.like-btn, .reply-btn { background:transparent; border:0; cursor:pointer; font-family:var(--font-sans); font-size:.8rem; font-weight:600; color:var(--ink-faint); padding:0; display:inline-flex; align-items:center; gap:.35em; transition:color .15s ease, transform .15s ease; }
.like-btn:hover, .reply-btn:hover { color:var(--accent-ink); }
.like-btn .like-ic { font-size:1rem; line-height:1; }
.like-btn .like-count { font-variant-numeric:tabular-nums; }
.like-btn.liked { color:var(--accent); }
.like-btn.liked .like-ic { color:var(--accent); transform:scale(1.05); }
.comment-actions .comment-del { margin-left:auto; }

/* ветка ответов */
.comment-replies { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-top:.9rem; padding-left:1rem; border-left:2px solid var(--line); }
.comment-replies:empty { display:none; margin-top:0; }
.comment-replies .comment-av { width:30px; height:30px; font-size:.8rem; }
.reply-box { margin-top:.7rem; }
.reply-box:empty { display:none; }
.reply-form { margin-bottom:0; }

/* ============ КНОПКА «ДАЛЬШЕ» / ФИНАЛ МОДУЛЯ ============ */
.lesson-foot { margin-top: clamp(2.2rem,5vw,3.2rem); display:flex; justify-content:flex-end; }
.lesson-foot:empty { display:none; }
.lesson-foot.done { justify-content:stretch; }
.next-btn {
    display:inline-flex; align-items:center; gap:1rem; cursor:pointer; border:0;
    background:var(--accent); color:#fff; font-family:var(--font-sans); text-align:left; line-height:1.15;
    padding:.85rem 1.5rem; border-radius:16px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.next-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(180,75,38,.6); background:#C7613F; }
.next-label { display:flex; flex-direction:column; gap:.15rem; }
.next-cap { font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.next-title { font-family:var(--font-serif); font-weight:600; font-size:1.15rem; }
.next-arrow { font-family:var(--font-serif); font-size:1.5rem; line-height:1; flex:none; transition: transform .2s ease; }
.next-btn:hover .next-arrow { transform:translateX(4px); }
.done-card { width:100%; text-align:center; background:linear-gradient(180deg,#FBF1EC,var(--paper) 60%); border:1px solid var(--accent); border-radius:18px; padding: clamp(1.5rem,4vw,2.4rem); }
.done-title { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.5rem,4vw,2.1rem); letter-spacing:-.01em; }
.done-card p { color:var(--ink-soft); margin-top:.5rem; font-size:1.05rem; max-width:46ch; margin-inline:auto; }

/* заблокированный пункт навигации */
.lesson-nav button.locked { opacity:.55; cursor:pointer; }
.lesson-nav button.locked:hover { background:rgba(217,119,87,.08); color:var(--ink-soft); }
.lesson-nav button.locked .ln { font-style:normal; }

/* всплывающее сообщение (тост) */
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); z-index:60;
    max-width:min(560px, 92vw); background:var(--ink); color:var(--paper);
    font-size:.92rem; line-height:1.4; font-weight:500; padding:.85rem 1.1rem; border-radius:14px;
    box-shadow:0 20px 50px -20px rgba(26,25,21,.6); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* заблокированная кнопка «Дальше» */
.lesson-foot.locked { justify-content:stretch; }
.next-locked { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; text-align:center;
    color:var(--ink-soft); font-size:.95rem; line-height:1.35; background:var(--cream-deep);
    border:1px dashed var(--line); border-radius:14px; padding:1rem 1.3rem; }
.next-lock { flex:none; }

/* ============ ЗАДАНИЕ ПОД УРОКОМ ============ */
.task-card { background:linear-gradient(180deg,#FBF1EC,var(--paper) 70%); border:1px solid var(--accent); border-radius:14px; padding: clamp(1rem,2.4vw,1.4rem); margin-bottom:1.4rem; }
.task-card:empty { display:none; }
.task-card.done { background:var(--ok-bg); border-color:#BFD9CD; }
.task-label { font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.4rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.task-card.done .task-label { color:var(--ok); }
.task-ok { letter-spacing:.04em; }
.task-text { font-size: clamp(1rem,1.7vw,1.12rem); line-height:1.5; }
.task-text b { color:var(--accent-ink); font-weight:700; }
.task-card.done .task-text b { color:var(--ok); }
.task-hint { margin-top:.6rem; font-size:.86rem; color:var(--ink-soft); }

.reveal { opacity:0; transform:translateY(20px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* вход в админку (в сайдбаре, только для Сенсея) */
.admin-entry { display:block; margin:.1rem .8rem .5rem; padding:.55rem .8rem; border-radius:10px; font-size:.82rem; font-weight:700; color:var(--accent-ink); text-decoration:none; border:1px dashed var(--accent); background:rgba(217,119,87,.06); transition:background .2s ease; }
.admin-entry:hover { background:rgba(217,119,87,.14); }
.admin-entry[hidden] { display:none; }

/* ============ АДМИН-ПАНЕЛЬ ============ */
.admin-wrap { position:relative; z-index:2; max-width:1100px; margin:0 auto; padding: clamp(1.5rem,4vw,3rem) clamp(1.1rem,4vw,2.5rem) 4rem; }
.admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.admin-eyebrow { font-weight:700; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-ink); }
.admin-title { font-family:var(--font-serif); font-weight:500; font-size: clamp(1.9rem,5vw,3rem); line-height:1.04; letter-spacing:-.02em; margin-top:.3rem; }
.admin-back { font-weight:700; font-size:.9rem; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:.5em 1.1em; transition:border-color .2s ease, color .2s ease; white-space:nowrap; }
.admin-back:hover { border-color:var(--accent); color:var(--accent-ink); }
.admin-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(.7rem,1.6vw,1.1rem); margin-bottom:1.8rem; }
.admin-card.accent { border-color:var(--accent); background:linear-gradient(180deg,#FBF2EC,var(--paper) 60%); }
.admin-h2 { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.2rem,3vw,1.6rem); margin:2rem 0 .9rem; letter-spacing:-.01em; }
.adm-bar { display:inline-block; vertical-align:middle; width:90px; max-width:38vw; height:7px; border-radius:999px; background:var(--cream-deep); overflow:hidden; }
.adm-bar span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.adm-pct { margin-left:.5rem; font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }
.admin-card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding: clamp(1rem,2vw,1.4rem); }
.admin-card .ac-val { font-family:var(--font-serif); font-weight:600; font-size: clamp(1.8rem,4vw,2.6rem); line-height:1; color:var(--accent-ink); }
.admin-card .ac-label { margin-top:.4rem; font-size:.8rem; color:var(--ink-soft); font-weight:600; }
.admin-tablewrap { background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.92rem; min-width:680px; }
.admin-table th { text-align:left; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:1rem 1.1rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table td { padding:.9rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.admin-table tbody tr:last-child td { border-bottom:0; }
.admin-table tbody tr:hover { background:rgba(217,119,87,.05); }
.adm-name { font-weight:700; display:flex; align-items:center; gap:.5rem; }
.adm-user { font-size:.78rem; color:var(--ink-faint); margin-top:.1rem; }
.adm-sub { font-size:.76rem; color:var(--ink-faint); margin-top:.15rem; }
.adm-tag { font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.15em .5em; border-radius:999px; }
.adm-online { color:var(--ok); font-weight:700; }
.admin-empty { text-align:center; color:var(--ink-faint); font-style:italic; padding:2rem; }
.admin-note { margin-top:1.2rem; color:var(--no); font-size:.9rem; }
@media (max-width:680px){ .admin-cards { grid-template-columns:repeat(2,1fr); } }

@media (max-width: 920px) {
    #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sidebar {
        flex-direction: row; flex-wrap: wrap; align-items: center;
        overflow-x: hidden; border-right: 0; border-bottom: 1px solid var(--line);
    }
    /* ряд 1: бренд слева + пользователь справа; ряд 2: горизонтальные табы уроков */
    .side-top { order: 1; flex: 1 1 auto; width: auto; border-bottom: 0; padding: .7rem 1rem; }
    .side-top .mark { width: 30px; height: 30px; }
    .module-label { display: none; }
    .side-user { order: 2; width: auto; margin: 0 0 0 auto; border-top: 0; padding: .7rem 1rem; }
    .lesson-nav {
        order: 3; width: 100%; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: .55rem .8rem .7rem; gap: .4rem; border-top: 1px solid var(--line);
        scrollbar-width: none;
    }
    .lesson-nav::-webkit-scrollbar { display: none; }
    .lesson-nav button { flex: none; white-space: nowrap; flex-direction: row; align-items: center; }
    .admin-entry { order: 4; width: 100%; margin: 0 .8rem .6rem; }
}
@media (max-width: 640px) {
    .steps3, .compare, .sub-grid { grid-template-columns: 1fr; }
    .twocol { grid-template-columns: 1fr; }

    /* компактная шапка на телефоне: оставляем аватар + «Выйти» */
    .side-brand small { display: none; }
    .side-user .uname, .side-user .urole { display: none; }
    .side-user .avatar { width: 32px; height: 32px; }

    /* ---- читаемая типографика уроков на телефоне ---- */
    .content-inner { padding: 1.4rem 1.25rem 3rem; }
    body { line-height: 1.6; }

    .lesson-head { margin-bottom: 1.5rem; }
    .lesson-title { font-size: 1.72rem; line-height: 1.14; letter-spacing: -.02em; }
    .lesson-lead { font-size: 1.07rem; line-height: 1.55; margin-top: .7rem; }

    p.body { font-size: 1.05rem; line-height: 1.62; margin: .7rem 0; }

    ul.checks { gap: .75rem; margin: 1rem 0; }
    ul.checks li { font-size: 1.05rem; line-height: 1.5; }
    ul.checks li::before { top: .66em; }

    .callout { padding: 1.05rem 1.15rem; margin: 1.2rem 0; }
    .callout p { font-size: 1.04rem; line-height: 1.55; }

    .block { margin-top: 1.9rem; }
    .block-title { font-size: 1.35rem; }
    .block-num { font-size: 1.4rem; }

    .step3 { padding: 1.1rem 1.15rem; }
    .step3 .t { font-size: 1.2rem; }
    .step3 .d { font-size: 1.02rem; line-height: 1.5; }

    .ai { padding: 1.1rem 1.15rem; }
    .ai .tg { font-size: 1.05rem; }
    .ai li { font-size: 1rem; line-height: 1.4; }

    .box li, .sub .for { font-size: 1rem; line-height: 1.45; }
    .sub .tier { font-size: 1.4rem; }

    /* путь тарифов: вертикально, стрелки смотрят вниз */
    .path { flex-direction: column; align-items: stretch; gap: .5rem; }
    .path-step { min-width: 0; }
    .path-arrow { transform: rotate(90deg); align-self: center; }

    /* длинные слова/ссылки переносятся, не выезжают за край */
    .lesson-title, .lesson-lead, p.body, ul.checks li, .callout p,
    .ai li, .box li, .sub .for, .comment-text { overflow-wrap: break-word; }

    /* кнопка «Дальше» во всю ширину */
    .lesson-foot { justify-content: stretch; }
    .next-btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 400px) {
    .content-inner { padding: 1.2rem 1.05rem 2.6rem; }
    .lesson-title { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
    html { scroll-behavior:auto; }
}