/* =========================================================
   ОйLA! — page interiors
   ========================================================= */
.pg {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  container-type: size; container-name: page;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #FFFEFB, #FBF8F0);
  color: var(--ink);
  font-size: clamp(13px, 2.55cqw, 16.5px);
  --accent: var(--blue);
  --accent-soft: var(--sky-2);
}
.pg.side-left { border-radius: 14px 3px 3px 14px; box-shadow: inset -18px 0 26px -18px rgba(19,34,74,.22), inset 1px 0 0 rgba(255,255,255,.8); }
.pg.side-right { border-radius: 3px 14px 14px 3px; box-shadow: inset 18px 0 26px -18px rgba(19,34,74,.22); }
.pg.side-single { border-radius: 6px 16px 16px 6px; box-shadow: inset 12px 0 18px -14px rgba(19,34,74,.25), 0 10px 30px -14px rgba(11,42,111,.3); font-size: 16px; }

.run-head { display: flex; align-items: center; gap: .8em; padding: 1.15em 1.6em .2em; font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; flex: none; }
.side-left .run-head { flex-direction: row; }
.rh-brand { font-family: var(--font-display); color: var(--navy); letter-spacing: .02em; text-transform: none; font-size: 1.15em; font-weight: 900; }
.rh-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-btn { border: 0; background: transparent; padding: 2px; color: #C2CCE0; width: 2.4em; height: 2.8em; margin: -0.8em -0.4em -0.6em 0; display: grid; place-items: center; border-radius: 6px; transition: color .2s, transform .2s; }
.bm-btn .i { width: 2em; height: 2em; }
.bm-btn:hover { color: var(--yellow-2); transform: translateY(-2px); }
.bm-btn[aria-pressed="true"] { color: var(--yellow-2); }

.pg-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .8em 1.7em 2.2em; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #D5DFEF transparent; position: relative; }
.pg-body::-webkit-scrollbar { width: 8px; }
.pg-body::-webkit-scrollbar-thumb { background: #D5DFEF; border-radius: 8px; }
.pg-foot { position: absolute; bottom: .7em; font-family: var(--font-display); font-weight: 700; font-size: .78em; color: #A7B3CC; pointer-events: none; }
.side-left .pg-foot { left: 1.6em; }
.side-right .pg-foot, .side-single .pg-foot { right: 1.6em; }

.kicker { font-size: .72em; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: .3em 0 .3em; }
.pg-h { font-family: var(--font-display); font-weight: 800; font-size: 2em; line-height: 1.05; letter-spacing: -.025em; color: var(--navy); margin: 0 0 .5em; }
.pg-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--navy); margin: 1.4em 0 .6em; }
.lead { font-family: var(--font-read); font-size: 1.05em; line-height: 1.6; color: var(--ink-2); margin: 0 0 1.2em; }
.lead.small { font-size: .95em; }

/* ---------- endpapers ---------- */
.pg.endpaper { background-color: #EAF4FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%231E6BFF' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 28c0-11 7-17 18-17 0 11-7 17-18 17zM12 28l11-11'/%3E%3Ccircle cx='60' cy='22' r='6'/%3E%3Cpath d='M49 22h22'/%3E%3Cpath d='M58 56c-5 7-7 10-7 14a7 7 0 0 0 14 0c0-4-2-7-7-14z'/%3E%3Cpath d='m22 56 2 6 6 1-5 4 1 6-4-3-5 3 1-6-5-4 6-1z'/%3E%3C/g%3E%3C/svg%3E"); }
.ex-wrap { min-height: 100%; display: grid; place-items: center; }
.exlibris { width: min(78%, 22em); background: #FFFEFB; border-radius: 1.4em; padding: 2em 1.6em 1.8em; text-align: center; box-shadow: 0 1.2em 3em -1.2em rgba(11,42,111,.35);
  border: 2px solid #fff; outline: 1.5px dashed rgba(30,107,255,.35); outline-offset: -10px; position: relative; }
.ex-oi { width: 6em; height: 6em; margin: -4.4em auto .4em; }
.ex-kicker { font-family: var(--font-read); font-style: italic; color: var(--muted); font-size: .9em; }
.ex-title { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .72em; color: var(--blue); margin-top: .4em; }
.ex-name { font-family: var(--font-read); font-weight: 600; font-size: 1.7em; color: var(--navy); margin: .3em 0 .1em; border-bottom: 1.5px solid var(--line); padding-bottom: .2em; }
.ex-class { color: var(--ink-2); font-weight: 600; }
.ex-motto { margin-top: 1em; font-weight: 800; letter-spacing: .28em; font-size: .7em; color: var(--yellow-2); }

/* ---------- title page ---------- */
.title-page { min-height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.6em .4em 1em; position: relative; }
.tp-top { font-weight: 800; letter-spacing: .3em; font-size: .78em; color: var(--muted); }
.tp-logo { font-family: var(--font-display); font-weight: 900; font-size: 5.6em; line-height: .9; letter-spacing: -.05em; color: var(--navy); margin: .3em 0 .1em; }
.tp-logo span { color: var(--blue); }
.tp-logo i { font-style: normal; color: var(--yellow-2); }
.tp-slogan { font-weight: 800; letter-spacing: .34em; font-size: .9em; color: var(--ink-2); }
.tp-full { margin-top: 1.4em; font-family: var(--font-display); font-weight: 700; font-size: 1.05em; letter-spacing: .06em; color: var(--navy); padding: .6em 1.2em; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.tp-subjects { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; margin: 1.6em 0 1em; }
.tp-sub { display: flex; align-items: center; gap: .5em; padding: .55em .9em .55em .55em; border-radius: 999px; font-weight: 700; font-size: .85em; }
.tp-ico { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.tp-ico svg { width: 1.2em; height: 1.2em; }
.c-kaz { background: var(--kaz-soft); color: var(--kaz); } .c-kaz .tp-ico { background: var(--kaz); }
.c-math { background: var(--math-soft); color: #0A7FC0; } .c-math .tp-ico { background: var(--math); }
.c-sci { background: var(--sci-soft); color: #158355; } .c-sci .tp-ico { background: var(--sci); }
.tp-meta { color: var(--muted); font-weight: 600; font-size: .85em; }
.tp-owner { margin-top: auto; width: 100%; display: grid; gap: .8em; padding-top: 1.6em; text-align: left; }
.tp-line { display: flex; gap: .6em; align-items: baseline; border-bottom: 1.5px dashed #C9D6EA; padding-bottom: .3em; font-size: .9em; color: var(--muted); }
.tp-line b { font-family: var(--font-read); font-size: 1.2em; color: var(--navy); font-weight: 600; }
.tp-oi { position: absolute; right: -.4em; bottom: 4.6em; width: 5.5em; height: 5.5em; }

/* ---------- howto ---------- */
.steps6 { list-style: none; padding: 0; margin: 0; display: grid; gap: .55em; position: relative; }
.steps6::before { content: ""; position: absolute; left: 1.15em; top: 1em; bottom: 1em; width: 2px; background: repeating-linear-gradient(180deg, var(--sky) 0 6px, transparent 6px 10px); }
.steps6 li { display: flex; gap: .9em; align-items: center; position: relative; }
.s6-n { width: 2.3em; height: 2.3em; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--azure), var(--blue)); box-shadow: 0 6px 14px -6px rgba(30,107,255,.7); }
.steps6 li:nth-child(5) .s6-n { background: linear-gradient(135deg, #FFD566, var(--yellow-2)); color: #3D2A00; }
.steps6 li:nth-child(6) .s6-n { background: linear-gradient(135deg, #3CC98C, var(--green)); }
.s6-t { font-family: var(--font-display); font-weight: 800; color: var(--navy); letter-spacing: .04em; }
.s6-t small { font-family: var(--font-ui); font-weight: 700; color: var(--muted); font-size: .68em; letter-spacing: .14em; margin-left: .6em; }
.s6-d { color: var(--ink-2); font-size: .92em; }
.howto-oi { display: flex; gap: .8em; align-items: center; margin-top: 1.6em; background: var(--sky-3); border-radius: 1.2em; padding: .9em 1em; }
.howto-oi svg { width: 4.6em; height: 4.6em; flex: none; }
.howto-oi p { margin: 0; font-size: .9em; line-height: 1.5; color: var(--ink-2); }

/* ---------- rules ---------- */
.rules { display: grid; gap: .5em; }
.rule { display: flex; align-items: center; gap: .8em; padding: .7em .9em; border-radius: .9em; background: #fff; border: 1.5px solid var(--line-2); cursor: pointer; font-weight: 600; transition: border-color .2s, background .2s; }
.rule input { position: absolute; opacity: 0; pointer-events: none; }
.rule-box { width: 1.6em; height: 1.6em; border-radius: .45em; border: 2px solid #C5D4EC; display: grid; place-items: center; color: transparent; flex: none; transition: all .2s var(--ease); }
.rule-box .i { width: 1.1em; height: 1.1em; }
.rule:has(input:checked) { border-color: #BFE6D2; background: #F3FBF7; }
.rule input:checked + .rule-box { background: var(--green); border-color: var(--green); color: #fff; transform: scale(1.06); }
.rule input:focus-visible + .rule-box { outline: 3px solid rgba(30,107,255,.4); outline-offset: 2px; }
.legend .lg-row { display: flex; flex-wrap: wrap; gap: .4em .6em; align-items: center; font-weight: 600; font-size: .88em; }
.lg-ico { width: 1.7em; height: 1.7em; border-radius: 50%; display: inline-grid; place-items: center; color: #fff !important; font-weight: 800; font-size: .85em; }
.lg-ico.c-kaz { background: var(--kaz); } .lg-ico.c-math { background: var(--math); } .lg-ico.c-sci { background: var(--sci); } .lg-ico.c-think { background: var(--think); }
.howuse { margin: 1em 0; padding-left: 1.1em; display: grid; gap: .5em; font-size: .9em; line-height: 1.5; color: var(--ink-2); }
.howuse b { color: var(--navy); }
.status-legend { display: flex; flex-wrap: wrap; gap: .4em; }

/* ---------- toc ---------- */
.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: .1em; }
.toc-row { width: 100%; display: flex; align-items: center; gap: .7em; border: 0; background: transparent; padding: .42em .5em; border-radius: .8em; text-align: left; transition: background .15s; }
.toc-row:hover { background: var(--accent-soft); }
.toc-n { width: 2.1em; height: 2.1em; border-radius: .65em; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .9em; color: var(--accent); background: var(--accent-soft); }
.toc-t { display: grid; min-width: 0; }
.toc-title { font-weight: 650; font-size: .95em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-theme { font-size: .72em; color: var(--muted); font-weight: 600; }
.toc-dots { flex: 1; min-width: 1em; border-bottom: 2px dotted #D3DCEB; transform: translateY(.3em); }
.toc-st { width: .7em; height: .7em; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--st-none); flex: none; }
.toc-st.st-draft { background: var(--st-draft); box-shadow: none; } .toc-st.st-sent { background: var(--st-sent); box-shadow: none; }
.toc-st.st-checked { background: var(--st-checked); box-shadow: none; } .toc-st.st-redo { background: var(--st-redo); box-shadow: none; }
.toc-p { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: .85em; min-width: 1.8em; text-align: right; }
.toc-extra { display: grid; gap: .4em; margin-top: 1em; padding-top: .9em; border-top: 1.5px solid var(--line-2); }
.toc-x { display: flex; align-items: center; gap: .6em; border: 0; background: var(--sky-3); border-radius: .8em; padding: .6em .8em; font-weight: 700; color: var(--navy); text-align: left; }
.toc-x .i { width: 1.3em; height: 1.3em; color: var(--blue); }
.toc-x span { margin-left: auto; font-family: var(--font-display); color: var(--muted); font-size: .85em; }
.toc-x:hover { background: var(--sky-2); }

/* ---------- map ---------- */
.map-box { border-radius: 1.2em; overflow: hidden; background: #F4F9FF; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.map-svg { width: 100%; height: auto; }
.map-svg .map-stop { cursor: pointer; }
.map-svg .map-stop:hover, .map-svg .map-stop:focus-visible { filter: brightness(1.08) drop-shadow(0 3px 4px rgba(11,42,111,.3)); outline: none; }
.map-legend { display: flex; flex-wrap: wrap; gap: .5em 1em; margin-top: .9em; font-size: .8em; font-weight: 600; color: var(--ink-2); }
.map-legend span { display: inline-flex; align-items: center; gap: .4em; }
.ml { width: .9em; height: .9em; border-radius: 50%; }
.ml.none { box-shadow: inset 0 0 0 2px #C9D6EA; } .ml.draft { background: #3DA5FF; } .ml.sent { background: #1E6BFF; } .ml.checked { background: #22A06B; } .ml.redo { background: #FF7A6B; }

/* ---------- achievements ---------- */
.ach-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-bottom: 1em; }
.ach-stats div { background: var(--sky-3); border-radius: 1em; padding: .7em; text-align: center; }
.ach-stats b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.7em; color: var(--blue); line-height: 1; }
.ach-stats span { font-size: .72em; color: var(--muted); font-weight: 600; }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6em; }
.badge { background: #fff; border: 1.5px solid var(--line-2); border-radius: 1.1em; padding: .8em; text-align: center; display: grid; justify-items: center; gap: .25em; }
.badge.earned { border-color: #FFE2A0; background: linear-gradient(180deg, #FFFCF2, #fff); box-shadow: 0 8px 20px -12px rgba(242,161,0,.5); }
.badge-art { width: 4.6em; height: 4.6em; }
.badge-name { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: .95em; }
.badge-desc { font-size: .72em; color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.badge-bar { width: 100%; height: .4em; border-radius: 9px; background: var(--line-2); overflow: hidden; }
.badge-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--azure), var(--blue)); border-radius: inherit; }
.badge.earned .badge-bar i { background: linear-gradient(90deg, #FFD566, var(--yellow-2)); }
.badge-count { font-size: .72em; font-weight: 800; color: var(--ink-2); }
.badge.earned .badge-count { color: #A06A00; }

/* ---------- lesson opener ---------- */
.opener { display: grid; gap: .9em; position: relative; }
.hero-art { position: relative; border-radius: 1.3em; overflow: hidden; aspect-ratio: 16 / 9.4; background: var(--accent-soft); box-shadow: 0 1em 2em -1.2em rgba(11,42,111,.45); }
.hero-art .scene { width: 100%; height: 100%; }
.hero-num { position: absolute; left: .25em; bottom: -.12em; font-family: var(--font-display); font-weight: 900; font-size: 5.2em; line-height: 1; color: #fff; letter-spacing: -.05em;
  text-shadow: 0 .05em .25em rgba(11,26,70,.35); mix-blend-mode: normal; }
.hero-theme { position: absolute; right: .8em; top: .8em; background: rgba(255,255,255,.88); color: var(--accent); font-weight: 800; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; padding: .45em .8em; border-radius: 999px; backdrop-filter: blur(4px); }
.op-head { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .8em; }
.op-head .kicker { width: 100%; margin: 0; }
.op-title { font-family: var(--font-display); font-weight: 800; font-size: 1.85em; line-height: 1.08; letter-spacing: -.025em; color: var(--navy); margin: 0; }
.op-owner { display: flex; flex-wrap: wrap; gap: .4em 1.4em; font-size: .85em; color: var(--muted); padding-bottom: .6em; border-bottom: 1.5px dashed var(--line); }
.op-owner b { color: var(--ink); font-weight: 650; }
.fact { display: flex; gap: .8em; background: linear-gradient(135deg, #FFF8E0, #FFF2CC); border-radius: 1.1em; padding: .9em 1em; position: relative; overflow: hidden; }
.fact::after { content: ""; position: absolute; right: -1.5em; top: -1.5em; width: 5em; height: 5em; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.7), transparent); }
.fact-ico { width: 2.3em; height: 2.3em; border-radius: .8em; background: var(--yellow); color: #4A3300; display: grid; place-items: center; flex: none; box-shadow: 0 6px 14px -6px rgba(242,161,0,.8); }
.fact-ico .i { width: 1.35em; height: 1.35em; }
.fact-k { font-weight: 800; font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: #9A6500; }
.fact p { margin: .2em 0 0; font-family: var(--font-read); line-height: 1.5; font-size: .95em; color: #4A3A10; }
.route-title { font-weight: 800; font-size: .72em; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .2em; }
.route { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5em; }
.route-step { width: 100%; display: flex; align-items: center; gap: .6em; border: 0; border-radius: 1em; padding: .65em .7em; text-align: left; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform .15s var(--ease), box-shadow .2s; }
.route-step:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--sky), 0 6px 14px -8px rgba(11,42,111,.3); }
.rs-ico { width: 2.2em; height: 2.2em; border-radius: .75em; display: grid; place-items: center; color: #fff; flex: none; }
.rs-ico svg { width: 1.25em; height: 1.25em; }
.rs-kaz .rs-ico { background: var(--kaz); } .rs-math .rs-ico { background: var(--math); } .rs-sci .rs-ico { background: var(--sci); } .rs-think .rs-ico { background: var(--think); }
.rs-t { display: grid; font-weight: 700; font-size: .88em; color: var(--ink); line-height: 1.2; }
.rs-t small { font-size: .74em; color: var(--muted); font-weight: 600; }
.rs-ok { margin-left: auto; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line); color: transparent; flex: none; }
.rs-ok .i { width: .95em; height: .95em; }
.route-step.done .rs-ok { background: var(--green); box-shadow: none; color: #fff; }
.margin-art { position: absolute; right: 0; top: 46%; width: 6em; opacity: .9; pointer-events: none; }
.margin-art.bottom { position: relative; right: auto; top: auto; margin: 1.4em 0 0 auto; width: 6em; }

/* ---------- lesson sections ---------- */
.lesson-sec { display: grid; gap: 1.1em; }
.sec { display: grid; gap: .9em; }
.sec + .sec { margin-top: .8em; padding-top: 1.2em; border-top: 2px dashed var(--line-2); }
.sec-head { display: flex; align-items: center; gap: .6em; }
.sec-n { width: 2.1em; height: 2.1em; border-radius: .7em; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; color: #fff; background: var(--sc); flex: none; box-shadow: 0 6px 14px -6px var(--sc); }
.sec-ico { display: none; }
.sec-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15em; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.sec-verbs { font-size: .7em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sc); margin-left: .2em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-prog { font-size: .75em; font-weight: 800; color: var(--muted); background: var(--line-2); border-radius: 999px; padding: .25em .6em; display: inline-grid; place-items: center; min-width: 2.6em; }
.sec-prog.done { background: var(--green); color: #fff; padding: .25em; min-width: 0; width: 1.9em; height: 1.9em; border-radius: 50%; }
.sec-prog .i { width: 1.1em; height: 1.1em; }
.prompt { position: relative; background: var(--sc-soft); border-radius: 1em; padding: .85em 1em .85em 1.15em; }
.prompt::before { content: ""; position: absolute; left: 0; top: .8em; bottom: .8em; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); }
.prompt-tag { font-size: .66em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sc); }
.prompt p { margin: .25em 0 0; font-weight: 600; line-height: 1.5; color: var(--ink); }
.lock-banner { display: flex; align-items: center; gap: .7em; padding: .7em .9em; border-radius: 1em; background: #EEF3FF; color: var(--navy); font-size: .88em; line-height: 1.4; }
.lock-banner > .i { width: 1.4em; height: 1.4em; flex: none; color: var(--blue); }
.lock-banner.ok { background: var(--green-soft); }
.lock-banner.ok > .i { color: var(--green); }
.lock-banner .btn { margin-left: auto; }

/* feedback from teacher */
.feedback { border-radius: 1.2em; padding: 1em; background: linear-gradient(135deg, #EAFBF2, #F6FFFA); box-shadow: inset 0 0 0 1.5px #BFE6D2; }
.feedback.redo { background: linear-gradient(135deg, #FFF1EE, #FFF9F8); box-shadow: inset 0 0 0 1.5px #FFD0C8; }
.fb-head { display: flex; align-items: center; gap: .7em; }
.fb-oi { width: 3em; height: 3em; flex: none; }
.fb-kicker { font-weight: 800; color: var(--navy); }
.fb-date { font-size: .78em; color: var(--muted); }
.fb-grade { margin-left: auto; font-family: var(--font-display); font-weight: 900; font-size: 1.4em; color: #fff; background: var(--green); padding: .2em .6em; border-radius: .6em; }
.feedback.redo .fb-grade { background: var(--coral); }
.fb-text { margin: .7em 0 0; font-family: var(--font-read); line-height: 1.55; white-space: pre-wrap; }

/* ---------- submit panel ---------- */
.submit { margin-top: .6em; background: linear-gradient(180deg, #F4F9FF, #FFFFFF); border-radius: 1.4em; padding: 1.1em; box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; gap: .8em; justify-items: center; text-align: center; }
.track { display: flex; align-items: flex-start; width: 100%; }
.tr-step { flex: 1; display: grid; justify-items: center; gap: .3em; position: relative; font-size: .75em; font-weight: 700; color: var(--muted); }
.tr-step + .tr-step::before { content: ""; position: absolute; top: 1em; right: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.tr-step.on + .tr-step::before, .tr-step.on + .tr-step.cur::before { background: var(--blue); }
.tr-dot { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--line); position: relative; z-index: 1; font-weight: 800; }
.tr-dot .i { width: 1.1em; height: 1.1em; }
.tr-step.on .tr-dot { background: var(--blue); color: #fff; box-shadow: none; }
.tr-step.cur .tr-dot { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.tr-step.on, .tr-step.cur { color: var(--navy); }
.track.is-redo .tr-step:last-child .tr-dot { background: var(--coral); }
.track:not(.is-redo) .tr-step.on:last-child .tr-dot { background: var(--green); }
.sub-sum { width: 100%; display: grid; gap: .35em; }
.sub-count { font-size: .9em; color: var(--ink-2); }
.sub-count b { color: var(--navy); }
.sub-bar { height: .5em; border-radius: 9px; background: var(--line-2); overflow: hidden; }
.sub-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azure), var(--green)); transition: width .4s var(--ease); }
.send-btn { width: 100%; font-size: 1.05em; }
.sub-msg { font-size: .88em; font-weight: 600; line-height: 1.45; }
.sub-msg:empty { display: none; }
.sub-msg.warn { color: #8A5A00; background: var(--yellow-soft); padding: .6em .8em; border-radius: .8em; }
.sub-msg.err { color: #A23426; background: var(--coral-soft); padding: .6em .8em; border-radius: .8em; }
.sub-note { margin: 0; font-size: .75em; color: var(--muted); line-height: 1.45; }
.sub-done { display: flex; align-items: center; gap: .7em; width: 100%; text-align: left; background: var(--green-soft); border-radius: 1em; padding: .8em 1em; }
.sub-done > .i { width: 2.2em; height: 2.2em; padding: .45em; border-radius: 50%; background: var(--green); color: #fff; flex: none; }
.sub-done.sent { background: #E7EFFF; }
.sub-done.sent > .i { background: var(--blue); }
.sub-done b { display: block; color: var(--navy); }
.sub-done span { font-size: .85em; color: var(--ink-2); }
.pf-toggle { display: inline-flex; align-items: center; gap: .5em; border: 0; background: transparent; color: var(--ink-2); font-weight: 700; font-size: .88em; padding: .5em .8em; border-radius: 999px; }
.pf-toggle .i { width: 1.3em; height: 1.3em; color: var(--yellow-2); }
.pf-toggle[aria-pressed="true"] { background: var(--yellow-soft); color: #7A5200; }

/* ---------- final / portfolio / back ---------- */
.final-hero { display: flex; align-items: center; gap: 1em; }
.final-oi { width: 6em; height: 6em; flex: none; }
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7em; }
.pf-card { border: 0; background: #fff; border-radius: 1em; padding: 0 0 .7em; overflow: hidden; text-align: left; box-shadow: 0 6px 18px -10px rgba(11,42,111,.35); display: grid; gap: .2em; }
.pf-art { aspect-ratio: 16/9; overflow: hidden; }
.pf-art .scene { width: 100%; height: 100%; }
.pf-n { padding: .2em .8em 0; font-size: .72em; font-weight: 800; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.pf-t { padding: 0 .8em; font-weight: 700; color: var(--navy); }
.pf-g { margin: .2em .8em 0; justify-self: start; background: var(--green); color: #fff; font-weight: 800; padding: .1em .6em; border-radius: .5em; }
.pf-card .pill { margin: .2em .8em 0; justify-self: start; }
.pf-empty { text-align: center; color: var(--muted); padding: 2em 1em; }
.pf-empty svg { width: 7em; height: 7em; margin: 0 auto 1em; }
.backend { min-height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: .4em; }
.be-oi { width: 9em; height: 9em; }
.be-logo { font-family: var(--font-display); font-weight: 900; font-size: 3.4em; letter-spacing: -.05em; color: var(--navy); }
.be-logo span { color: var(--blue); } .be-logo i { color: var(--yellow-2); font-style: normal; }
.be-slogan { font-weight: 800; letter-spacing: .3em; font-size: .8em; color: var(--ink-2); }
.backend p { font-family: var(--font-read); color: var(--ink-2); max-width: 18em; }
.pg-blank .pg-body { background: transparent; }