/* INTXA UI layer — catalogue, course cards, plans, course page, checkout, feedback states.
   Built on app.css + v2.css tokens (tones: found/build/data/gov). */

/* ---------- motion primitives ---------- */
@keyframes u-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes u-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes u-spin { to { transform: rotate(360deg); } }
@keyframes u-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes u-draw { to { stroke-dashoffset: 0; } }
@keyframes u-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes u-orbit { to { transform: rotate(360deg); } }
@keyframes u-shimmer { to { background-position: -200% 0; } }
main { animation: u-fade .35s var(--ease) both; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--rd, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- breadcrumbs ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--haze); }
.crumb a { color: var(--haze); }
.crumb a:hover { color: var(--starlight); }

/* ---------- generative course art ---------- */
.ca { position: absolute; inset: 0; width: 100%; height: 100%; }
.ca__g0 { stop-color: color-mix(in srgb, var(--tone, var(--ion)) 55%, #050816); }
.ca__g1 { stop-color: #050816; }
:root.v2[data-theme="light"] .ca__g0 { stop-color: color-mix(in srgb, var(--tone, var(--ion)) 30%, #eef1fc); }
:root.v2[data-theme="light"] .ca__g1 { stop-color: #f7f8fe; }
.ca__ring { fill: none; stroke: var(--tone, var(--ion)); stroke-opacity: .7; stroke-width: 1.3; }
.ca__ring--2 { stroke-opacity: .5; stroke-dasharray: 4 7; animation: ca-dash 14s linear infinite; }
@keyframes ca-dash { to { stroke-dashoffset: -110; } }
.ca__ring--3 { stroke-opacity: .32; }
.ca__dot { fill: #fff; }
.ca__glow { fill: var(--tone, var(--ion)); opacity: .28; }
.ca__dot--2 { fill: var(--tone, var(--ion)); } .ca__dot--3 { fill: color-mix(in srgb, var(--tone, var(--ion)) 60%, #fff); }
.ca__halo { fill: var(--tone, var(--ion)); opacity: .18; transform-box: fill-box; transform-origin: center; animation: ca-pulse 3.2s ease-in-out infinite; }
@keyframes ca-pulse { 50% { opacity: .32; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .ca__dot, .ca__ring--2, .ca__halo { animation: none; } .ca__dot { display: none; } }
.ca__core { fill: var(--tone, var(--ion)); filter: drop-shadow(0 0 6px var(--tone, var(--ion))) drop-shadow(0 0 16px var(--tone, var(--ion))); }
.ca__star { fill: #fff; opacity: .5; animation: u-twinkle 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
:root.v2[data-theme="light"] .ca__star { fill: var(--tone); opacity: .4; }
.ca__rings { transform-box: fill-box; transition: transform 1.2s var(--ease); }

/* ---------- course card ---------- */
.cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cc-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; color: var(--starlight);
  background: var(--orbit); border: 1px solid var(--line); isolation: isolate;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease); }
.cc:hover, .cc:focus-visible { text-decoration: none; transform: translateY(-6px); border-color: color-mix(in srgb, var(--tone) 65%, var(--line));
  box-shadow: 0 28px 60px -34px var(--tone), 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); }
.cc:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
.cc__art { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--line); }
.cc:hover .ca__rings { transform: scale(1.06); }
.cc__n { position: absolute; inset-inline-start: 18px; bottom: 10px; font: 700 3.4rem/1 var(--font-mono); color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tone) 85%, #fff); letter-spacing: -.02em; opacity: .9; }
.cc__chips { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.cc__chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: rgba(5, 8, 22, .72); color: #E8EEFF; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.cc__chip--ok { background: color-mix(in srgb, var(--tone-build) 30%, rgba(5,8,22,.8)); border-color: var(--tone-build); }
.cc__chip--soon { background: color-mix(in srgb, var(--tone-gov) 25%, rgba(5,8,22,.8)); border-color: color-mix(in srgb, var(--tone-gov) 60%, transparent); }
.cc__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.cc__track { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--tone); }
.cc__t { font-size: 1.12rem; font-weight: 700; line-height: 1.6; }
.cc__o { color: var(--haze); font-size: var(--fs-sm); line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-read); }
.cc__meta { list-style: none; margin: auto 0 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; border-top: 1px dashed var(--line); font-size: var(--fs-sm); font-weight: 600; }
.cc__meta li { display: inline-flex; align-items: center; gap: 6px; }
.cc__meta span { font-weight: 400; color: var(--haze); }
.cc__meta svg { width: 15px; height: 15px; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc__meta li:first-child svg { fill: var(--tone); stroke: none; }
.cc__prog { height: 5px; border-radius: 5px; background: var(--nebula); overflow: hidden; }
.cc__prog span { display: block; height: 100%; width: var(--w, 0%); background: var(--tone); border-radius: 5px; transition: width 1s var(--ease); }
.cc__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); }
.cc__plan { color: var(--haze); }
.cc__go { color: var(--tone); font-weight: 600; display: inline-flex; gap: 6px; }
.cc__go span { transition: transform .3s var(--ease); }
.cc:hover .cc__go span { transform: translateX(-5px); }
html[dir="ltr"] .cc:hover .cc__go span { transform: translateX(5px); }
.cc__spot { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone) 14%, transparent), transparent 45%); }
.cc:hover .cc__spot { opacity: 1; }
.cc.is-hidden { display: none; }
.cc.is-leaving { opacity: 0; transform: scale(.96); }

/* ---------- catalogue page ---------- */
.cat-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 80px) clamp(28px, 4vw, 48px); isolation: isolate; }
.cat-hero__bg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--tone-found) 18%, transparent), transparent 40%),
              radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--tone-data) 14%, transparent), transparent 40%),
              repeating-radial-gradient(circle at 15% 30%, transparent 0 69px, var(--x-grid) 69px 70px); }
.cat-hero__t { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 700; margin-top: 18px; line-height: 1.4; }
.cat-hero__lead { max-width: 62ch; margin-top: 12px; color: var(--haze); font-size: var(--fs-lg); line-height: 2; font-family: var(--font-read); }
.cat-hero__stats { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cat-hero__stats li { padding: 12px 20px; border-radius: 14px; background: var(--x-glass); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 120px; }
.cat-hero__stats b { font: 700 1.7rem/1.2 var(--font-mono); }
.cat-hero__stats span { font-size: var(--fs-xs); color: var(--haze); }
.cat { padding-bottom: 72px; }
.cat-bar { position: sticky; top: 68px; z-index: 20; display: flex; flex-direction: column; gap: 12px; padding: 14px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--void) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cat-search { position: relative; display: flex; align-items: center; }
.cat-search svg { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; fill: none; stroke: var(--haze); stroke-width: 1.8; stroke-linecap: round; }
.cat-search input { width: 100%; min-height: 50px; padding: 10px 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--orbit); color: var(--starlight); font-size: var(--fs-base); transition: border-color .2s, box-shadow .2s; }
.cat-search input:focus { outline: none; border-color: var(--ion); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion) 20%, transparent); }
.cat-search kbd { position: absolute; inset-inline-end: 14px; font: 12px var(--font-mono); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--haze); }
.cat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cat-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--haze); cursor: pointer; font-size: var(--fs-sm); transition: all .2s var(--ease); }
.cat-chip > span:last-child { font: 11px var(--font-mono); padding: 1px 7px; border-radius: 999px; background: var(--nebula); }
.cat-chip:hover { color: var(--starlight); border-color: var(--tone, var(--ion)); }
.cat-chip[aria-pressed="true"] { color: var(--starlight); background: var(--nebula); border-color: var(--tone, var(--ion)); box-shadow: inset 0 0 0 1px var(--tone, var(--ion)); }
.cat-chip .x-dot { width: 7px; height: 7px; box-shadow: none; }
.cat-toggles { display: flex; flex-wrap: wrap; gap: 16px; }
.cat-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--haze); cursor: pointer; }
.cat-toggle input { position: absolute; opacity: 0; }
.cat-toggle__ui { width: 36px; height: 20px; border-radius: 20px; background: var(--nebula); border: 1px solid var(--line); position: relative; transition: background .2s; }
.cat-toggle__ui::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--haze); transition: transform .2s var(--ease), background .2s; }
.cat-toggle input:checked + .cat-toggle__ui { background: var(--ion); border-color: var(--ion); }
.cat-toggle input:checked + .cat-toggle__ui::after { background: #fff; transform: translateX(-16px); }
html[dir="ltr"] .cat-toggle input:checked + .cat-toggle__ui::after { transform: translateX(16px); }
.cat-toggle input:focus-visible + .cat-toggle__ui { outline: 2px solid var(--ion); outline-offset: 2px; }
.cat-count { margin: 14px 0; font-size: var(--fs-sm); color: var(--haze); min-height: 1.5em; }
.cat-empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: u-rise .4s var(--ease); }
.cat-empty[hidden] { display: none; }
.cat-empty__orb { width: 90px; height: 90px; border-radius: 50%; border: 1px dashed var(--line); position: relative; animation: u-orbit 8s linear infinite; }
.cat-empty__orb::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ion); box-shadow: 0 0 12px var(--ion); }

/* ---------- plans ---------- */
.plans-sec { padding-block: clamp(64px, 9vw, 110px); background: var(--orbit); border-top: 1px solid var(--line); }
.plans-sec__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.plans-sec__note { text-align: center; margin-top: 28px; color: var(--haze); font-size: var(--fs-sm); line-height: 1.9; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; max-width: 1100px; margin-inline: auto; }
.pc { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 26px; border-radius: 22px; background: var(--void); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.pc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ion) 50%, var(--line)); }
.pc--hl { border: 1px solid transparent; background: linear-gradient(var(--void), var(--void)) padding-box, linear-gradient(135deg, var(--tone-gov), var(--tone-data), var(--ion)) border-box;
  box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--tone-gov) 70%, transparent); }
.pc__ribbon { position: absolute; top: -13px; inset-inline-start: 24px; padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a1200; background: linear-gradient(90deg, var(--tone-gov), #ffd98a); box-shadow: 0 6px 20px -6px var(--tone-gov); }
.pc__name { font-size: var(--fs-xl); }
.pc__tag { color: var(--haze); font-size: var(--fs-sm); line-height: 1.9; min-height: 3.8em; }
.pc__price { display: flex; align-items: baseline; gap: 8px; }
.pc__price b { font: 700 3rem/1.1 var(--font-mono); letter-spacing: -.02em; }
.pc--hl .pc__price b { background: linear-gradient(90deg, var(--tone-gov), #ffe2a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc__price span { color: var(--haze); font-size: var(--fs-sm); }
.pc__eq { font-size: var(--fs-xs); color: var(--haze); margin-top: -6px; }
.pc__nums { display: flex; flex-wrap: wrap; gap: 4px; }
.pc__nums span { font: 11px var(--font-mono); padding: 2px 7px; border-radius: 6px; background: var(--nebula); border: 1px solid var(--line); color: var(--ion-soft); }
.pc__nums--all span { font-family: var(--font); font-size: 12px; color: var(--tone-gov); border-color: color-mix(in srgb, var(--tone-gov) 40%, var(--line)); }
.pc__feat { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; flex: 1; font-size: var(--fs-sm); }
.pc__feat li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.8; }
.pc__feat svg { width: 16px; height: 16px; margin-top: 5px; flex: none; fill: none; stroke: var(--tone-build); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc__jobs { margin: 10px 0 0; padding: 14px 14px 12px; border-radius: 14px; background: color-mix(in srgb, var(--ion) 8%, var(--nebula)); border: 1px solid color-mix(in srgb, var(--ion) 22%, var(--line)); }
.pc--hl .pc__jobs { background: color-mix(in srgb, var(--tone-gov) 9%, var(--nebula)); border-color: color-mix(in srgb, var(--tone-gov) 32%, var(--line)); }
.pc__jobs-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--ion-soft); font-weight: 700; letter-spacing: .01em; }
.pc--hl .pc__jobs-h { color: #ffd98a; }
.pc__jobs-ico { width: 15px; height: 15px; flex: none; fill: currentColor; }
.pc__jobs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pc__jobs-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.6; color: var(--starlight); }
.pc__jobs-item--lead { font-weight: 700; color: #ffd98a !important; padding-bottom: 5px; margin-bottom: 2px; border-bottom: 1px dashed color-mix(in srgb, var(--tone-gov) 35%, transparent); }
.pc__jobs-bullet { width: 14px; height: 14px; margin-top: 3px; flex: none; fill: none; stroke: var(--tone-build); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc--hl .pc__jobs-bullet { stroke: var(--tone-gov); }
.pc__jobs-bullet--lead { stroke: #ffd98a !important; stroke-width: 2.5; }
.pc__cta { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.pc__state { text-align: center; color: var(--tone-build); font-weight: 600; font-size: var(--fs-sm); padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--tone-build) 8%, transparent); }
.pc__note { font-size: var(--fs-xs); color: var(--haze); text-align: center; }
.pc--free .pc__price b { color: var(--haze); }

/* ---------- course page ---------- */
.ch { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(28px, 5vw, 56px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.ch__art { position: absolute; inset: 0; z-index: -2; opacity: .75; }
.ch__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, color-mix(in srgb, var(--void) 20%, transparent), var(--void) 72%); }
html[dir="ltr"] .ch__art::after { background: linear-gradient(to right, color-mix(in srgb, var(--void) 20%, transparent), var(--void) 72%); }
.ch__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.ch__num { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font: 600 var(--fs-sm) var(--font-mono); color: var(--tone); }
.ch__t { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.45; margin-top: 8px; }
.ch__o { margin-top: 14px; font-size: var(--fs-lg); line-height: 2; color: var(--haze); font-family: var(--font-read); max-width: 60ch; }
.ch__o b { color: var(--starlight); }
.ch__stats { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ch__stats li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--x-glass); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--haze); }
.ch__stats b { color: var(--starlight); font-family: var(--font-mono); }
.ch__stats svg { width: 16px; height: 16px; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch__stats li:first-child svg { fill: var(--tone); stroke: none; }
.ch__free { color: var(--tone-build) !important; border-color: color-mix(in srgb, var(--tone-build) 40%, var(--line)) !important; }
.ch__free svg { stroke: var(--tone-build) !important; }
.ch__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ch__prog { margin-top: 22px; max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.ch__prog .lprog { margin: 0; }
.chip-ok { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 12px; color: var(--tone-build); background: color-mix(in srgb, var(--tone-build) 10%, transparent); font-weight: 600; }
.ch__side { position: sticky; top: 88px; }
.buycard { padding: 24px; border-radius: 22px; background: var(--x-glass); border: 1px solid var(--line); backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px -50px var(--tone); }
.buycard__k { font-weight: 700; font-size: var(--fs-lg); }
.buycard__ok { font-weight: 700; color: var(--tone-build); font-size: var(--fs-lg); }
.buyopt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.buyopt:hover { text-decoration: none; border-color: var(--ion); transform: translateY(-2px); box-shadow: 0 14px 30px -20px var(--ion); }
.buyopt--hl { border-color: color-mix(in srgb, var(--tone-gov) 60%, var(--line)); background: linear-gradient(140deg, color-mix(in srgb, var(--tone-gov) 9%, var(--void)), var(--void) 60%); }
.buyopt--hl:hover { border-color: var(--tone-gov); box-shadow: 0 14px 30px -18px var(--tone-gov); }
.buyopt__n { font-weight: 700; }
.buyopt__n em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--tone-gov); color: #1a1200; margin-inline-start: 6px; }
.buyopt__d { grid-column: 1; font-size: var(--fs-xs); color: var(--haze); }
.buyopt__p { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 var(--fs-lg) var(--font-mono); }
.buycard__trust { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--haze); line-height: 1.8; }
.buycard__trust li::before { content: "✓ "; color: var(--tone-build); font-weight: 700; }
.buycard__login { font-size: var(--fs-sm); color: var(--haze); text-align: center; }
.cpage { padding-block: 24px 96px; }
.cblock { padding-top: 48px; }
.cblock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cblock__t { font-size: var(--fs-xl); font-weight: 700; line-height: 1.6; margin-bottom: 18px; }
.cblock__head .cblock__t { margin-bottom: 0; }
.cblock__sum { margin: 6px 0 16px; }
.linkbtn { background: none; border: 0; color: var(--ion-soft); cursor: pointer; font-size: var(--fs-sm); padding: 6px; }
.learn-grid { list-style: none; margin: 0; padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); }
.learn-grid li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.9; }
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc__item { border-radius: 16px; border: 1px solid var(--line); background: var(--orbit); overflow: hidden; transition: border-color .25s; }
.acc__item[open] { border-color: color-mix(in srgb, var(--ion) 40%, var(--line)); }
.acc__item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary:hover { background: color-mix(in srgb, var(--nebula) 50%, transparent); }
.acc__n { font: 600 var(--fs-sm) var(--font-mono); color: var(--ion-soft); }
.acc__t { flex: 1; font-weight: 600; line-height: 1.7; }
.acc__meta { font-size: var(--fs-xs); color: var(--haze); white-space: nowrap; }
.acc__chev { width: 10px; height: 10px; border-inline-end: 2px solid var(--haze); border-bottom: 2px solid var(--haze); transform: rotate(45deg); transition: transform .3s var(--ease); margin-top: -4px; }
.acc__item[open] .acc__chev { transform: rotate(225deg); margin-top: 4px; }
.acc__list { list-style: none; margin: 0; padding: 0 0 8px; }
.acc__item[open] .acc__list { animation: u-rise .35s var(--ease); }
.lrow a { display: flex; align-items: center; gap: 12px; padding: 11px 20px; color: var(--starlight); font-size: var(--fs-sm); border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); transition: background .2s; }
.lrow a:hover { text-decoration: none; background: color-mix(in srgb, var(--nebula) 60%, transparent); }
.lrow__ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 1px solid var(--line); color: var(--ion-soft); }
.lrow.is-done .lrow__ic { background: var(--tone-build); border-color: var(--tone-build); color: var(--void); font-size: 12px; }
.lrow.is-locked a { color: var(--haze); }
.lrow__t { flex: 1; line-height: 1.8; }
.lrow__d { font: 12px var(--font-mono); color: var(--haze); }
.lrow__lock svg { width: 15px; height: 15px; fill: none; stroke: var(--haze); stroke-width: 1.8; }
.prelinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.prelinks a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--orbit); color: var(--starlight); font-size: var(--fs-sm); }
.prelinks a:hover { text-decoration: none; border-color: var(--ion); }
.stickybuy { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 50; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 16px; background: var(--x-glass); border: 1px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); animation: u-rise .35s var(--ease); }
.stickybuy span { display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: 1.5; }
.stickybuy small { color: var(--haze); }

/* ---------- auth ---------- */
.auth__why { padding: 10px 14px; border-radius: 12px; font-size: var(--fs-sm); color: var(--tone-gov); background: color-mix(in srgb, var(--tone-gov) 8%, transparent); border: 1px solid color-mix(in srgb, var(--tone-gov) 35%, transparent); line-height: 1.8; }
.auth__switch { text-align: center; font-size: var(--fs-sm); color: var(--haze); padding-top: 12px; border-top: 1px solid var(--line); }
.pwmeter { height: 4px; border-radius: 4px; background: var(--nebula); overflow: hidden; margin-top: 4px; }
.pwmeter i { display: block; height: 100%; width: var(--s, 0%); background: var(--sc, var(--flare)); transition: width .3s, background .3s; }
.pwhint { font-size: var(--fs-xs); }
.pwwrap { position: relative; display: block; }
.pwwrap input { padding-inline-end: 48px !important; }
.pwtoggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: var(--haze); cursor: pointer; display: grid; place-items: center; }
.pwtoggle:hover { color: var(--starlight); background: var(--nebula); }
.pwtoggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.formerr { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.8; color: var(--starlight);
  background: color-mix(in srgb, var(--flare) 10%, transparent); border: 1px solid color-mix(in srgb, var(--flare) 45%, transparent); animation: u-shake .45s var(--ease); }
.formerr svg { flex: none; width: 18px; height: 18px; margin-top: 4px; fill: none; stroke: var(--flare); stroke-width: 2; stroke-linecap: round; }
.formerr--warn { background: color-mix(in srgb, var(--tone-gov) 10%, transparent); border-color: color-mix(in srgb, var(--tone-gov) 45%, transparent); animation: none; }
@keyframes u-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- loading states ---------- */
.is-loading { position: relative; pointer-events: none; opacity: .92; }
.is-loading::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: u-spin .7s linear infinite; flex: none; }
a.is-loading::before { margin-inline-end: 4px; }
.btn.is-loading .paybtn__lock { display: none; }
.pageload { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200; pointer-events: none; transform-origin: right; transform: scaleX(0); background: linear-gradient(90deg, var(--tone-gov), var(--tone-data), var(--ion)); transition: transform 8s cubic-bezier(.1, .8, .2, 1); }
html[dir="ltr"] .pageload { transform-origin: left; }
.pageload.is-on { transform: scaleX(.9); }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 84px; inset-inline-end: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55); animation: u-toast-in .45s var(--ease) both; position: relative; overflow: hidden; }
.toast::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--tc, var(--ion)); transform-origin: right; animation: u-toast-life 5.5s linear forwards; }
html[dir="ltr"] .toast::after { transform-origin: left; }
.toast p { flex: 1; font-size: var(--fs-sm); line-height: 1.8; margin: 0; }
.toast__ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tc, var(--ion)); color: #050816; font-weight: 800; font-size: 13px; }
.toast--ok { --tc: var(--tone-build); } .toast--ok .toast__ic::before { content: "✓"; }
.toast--warn { --tc: var(--tone-gov); } .toast--warn .toast__ic::before { content: "!"; }
.toast--error { --tc: var(--flare); } .toast--error .toast__ic::before { content: "×"; color: #fff; }
.toast--info .toast__ic::before { content: "i"; }
.toast__x { border: 0; background: none; color: var(--haze); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.toast.is-out { animation: u-toast-out .35s var(--ease) forwards; }
@keyframes u-toast-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes u-toast-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes u-toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- checkout ---------- */
.co2 { padding-block: 36px 88px; }
.stepper { list-style: none; margin: 0 auto 28px; padding: 0; display: flex; justify-content: center; gap: 0; max-width: 620px; }
.stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; font-size: var(--fs-sm); color: var(--haze); }
.stepper li::before { content: ""; position: absolute; top: 17px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); z-index: -1; }
.stepper li:last-child::before { display: none; }
.stepper li.is-done::before { background: var(--tone-build); }
.stepper span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--font-mono); background: var(--void); border: 2px solid var(--line); color: var(--haze); transition: all .3s; }
.stepper .is-done span { background: var(--tone-build); border-color: var(--tone-build); color: var(--void); }
.stepper .is-current span { border-color: var(--ion); color: var(--starlight); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ion) 18%, transparent); }
.stepper .is-fail span { border-color: var(--flare); color: var(--flare); }
.stepper b { color: var(--starlight); font-weight: 600; }
.stepper small { font-size: 11.5px; }
.plan-switch { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.plan-switch a { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--orbit); color: var(--haze); min-width: 170px; transition: all .2s; }
.plan-switch a:hover { text-decoration: none; border-color: var(--ion); color: var(--starlight); }
.plan-switch a.is-active { border-color: var(--ion); color: var(--starlight); background: var(--nebula); box-shadow: 0 0 0 1px var(--ion); }
.plan-switch b { font-size: var(--fs-sm); }
.plan-switch span { font: 12px var(--font-mono); }
.co2__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.co2__t { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; margin-top: 10px; line-height: 1.5; }
.co2__tag { color: var(--haze); font-size: var(--fs-lg); line-height: 2; margin-top: 6px; }
.banner { margin-top: 18px; padding: 14px 16px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.9; background: color-mix(in srgb, var(--ion) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ion) 35%, transparent); }
.banner--gov { background: color-mix(in srgb, var(--tone-gov) 9%, transparent); border-color: color-mix(in srgb, var(--tone-gov) 45%, transparent); }
.banner--ok { background: color-mix(in srgb, var(--tone-build) 9%, transparent); border-color: color-mix(in srgb, var(--tone-build) 45%, transparent); }
.co2__incl { margin-top: 22px; font-weight: 600; }
.co2__courses { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.co2__courses li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--orbit); }
.co2__courses li.is-out { opacity: .45; border-style: dashed; }
.co2__courses li.is-out small { margin-inline-start: auto; font-size: 11px; color: var(--tone-gov); }
.co2__courses .x-num { color: var(--tone); }
.co2__feat { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); }
.co2__feat li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.8; }
.co2__feat svg { width: 16px; height: 16px; margin-top: 5px; flex: none; fill: none; stroke: var(--tone-build); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.paycard { position: sticky; top: 88px; padding: 26px; border-radius: 22px; background: var(--orbit); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 80px -50px var(--ion); }
.coupon label { font-size: var(--fs-sm); color: var(--haze); }
.coupon__row { display: flex; gap: 8px; margin-top: 6px; }
.coupon__row input { flex: 1; min-height: 44px; padding: 6px 14px; border-radius: 10px; background: var(--void); border: 1px solid var(--line); color: var(--starlight); font: 600 14px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.coupon__row input:focus { outline: none; border-color: var(--ion); }
.coupon__msg { min-height: 1.4em; margin-top: 6px; font-size: var(--fs-xs); }
.coupon__msg.is-ok { color: var(--tone-build); animation: u-rise .3s var(--ease); }
.coupon__msg.is-err { color: var(--flare); animation: u-shake .45s var(--ease); }
.totals { margin: 0; padding-block: 14px; border-block: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.totals div { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.totals div[hidden] { display: none; }
.totals dt { color: var(--haze); }
.totals dd { margin: 0; font-family: var(--font-mono); transition: color .3s; }
.totals__disc dd { color: var(--tone-build); }
.totals__total { font-size: var(--fs-lg) !important; font-weight: 700; }
.totals__total dt { color: var(--starlight) !important; }
.totals dd.is-flash { animation: u-pop .45s var(--ease); color: var(--tone-build); }
.payform { display: flex; flex-direction: column; gap: 12px; }
.payform .lfield[hidden] { display: none; }
.paybtn { gap: 10px; }
.paybtn__lock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs); color: var(--haze); line-height: 1.8; }
.trust li { display: flex; gap: 8px; align-items: flex-start; }
.trust svg { width: 15px; height: 15px; margin-top: 3px; flex: none; fill: none; stroke: var(--tone-build); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- payment result ---------- */
.ret { padding-block: 36px 96px; }
.ret__card { position: relative; max-width: 560px; margin: 0 auto; padding: 44px 32px 32px; border-radius: 26px; text-align: center; background: var(--orbit); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: hidden; animation: u-rise .5s var(--ease); }
.ret__card h1 { font-size: var(--fs-2xl); line-height: 1.5; }
.ret__card .muted { line-height: 2; max-width: 44ch; }
.ret--paid { border-color: color-mix(in srgb, var(--tone-build) 50%, var(--line)); box-shadow: 0 40px 90px -50px var(--tone-build); }
.ret--failed, .ret--expired, .ret--cancelled { border-color: color-mix(in srgb, var(--flare) 40%, var(--line)); }
.ret__icon svg { width: 84px; height: 84px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ret__icon circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: u-draw .7s var(--ease) forwards; }
.ret__icon path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: u-draw .45s .55s var(--ease) forwards; }
.ret__icon--ok svg { stroke: var(--tone-build); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tone-build) 60%, transparent)); }
.ret__icon--fail svg { stroke: var(--flare); }
.ret__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.ret__ref { font-size: var(--fs-xs); color: var(--haze); }
.burst { position: absolute; top: 88px; left: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--tone-build)); animation: u-burst 1.1s .5s var(--ease) both; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0); }
.burst i:nth-child(3n) { --c: var(--tone-gov); border-radius: 50%; }
.burst i:nth-child(3n+1) { --c: var(--tone-data); }
.burst i:nth-child(4n) { --c: var(--ion); }
@keyframes u-burst { 0% { opacity: 1; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(calc(var(--i) * 25.7deg)) translateY(-130px) scale(.4); } }
.orbit-loader { position: relative; display: block; width: 84px; height: 84px; }
.orbit-loader i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ion); animation: u-spin 1.4s linear infinite; }
.orbit-loader i:nth-child(2) { inset: 12px; border-top-color: var(--tone-data); animation-duration: 1s; animation-direction: reverse; }
.orbit-loader i:nth-child(3) { inset: 26px; border-top-color: var(--tone-gov); animation-duration: .8s; }
.waitsteps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: start; font-size: var(--fs-sm); color: var(--haze); }
.waitsteps li { display: flex; align-items: center; gap: 10px; }
.waitsteps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); }
.waitsteps .is-done { color: var(--starlight); }
.waitsteps .is-done::before { background: var(--tone-build); border-color: var(--tone-build); }
.waitsteps .is-active { color: var(--starlight); }
.waitsteps .is-active::before { border-color: var(--ion); animation: u-twinkle 1s infinite; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .cc-grid, .cc-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .ch__grid, .co2__grid { grid-template-columns: minmax(0, 1fr); }
  .ch__side, .paycard { position: static; }
  .stickybuy:not([hidden]) { display: flex; }
  .learn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cc-grid, .cc-grid--row { grid-template-columns: minmax(0, 1fr); }
  .cat-bar { top: 60px; }
  .co2__courses { grid-template-columns: minmax(0, 1fr); }
  .acc__meta { display: none; }
  .stepper small { display: none; }
  .nav__join { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ca__star, .burst, .orbit-loader i, .cat-empty__orb { animation: none; }
  .cc:hover { transform: none; }
}
.pc-grid--4 { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc__price--txt { font-size: 1.4rem !important; font-family: var(--font) !important; }
.x-pricing .pc { background: var(--orbit); }
@media (max-width: 1100px) { .pc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pc-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- certificates ---------- */
.vf { padding-block: 32px 80px; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.vf__status { display: flex; gap: 14px; align-items: center; padding: 14px 20px; border-radius: 16px; width: min(100%, 980px); border: 1px solid var(--line); background: var(--orbit); }
.vf__status b { display: block; } .vf__status small { color: var(--haze); line-height: 1.8; }
.vf__seal { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.vf__status--ok { border-color: color-mix(in srgb, var(--tone-build) 50%, var(--line)); }
.vf__status--ok .vf__seal { background: var(--tone-build); color: #05120f; box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone-build) 18%, transparent); }
.vf__status--bad { border-color: color-mix(in srgb, var(--flare) 50%, var(--line)); }
.vf__status--bad .vf__seal { background: var(--flare); color: #fff; }
.cert { position: relative; width: min(100%, 980px); aspect-ratio: 297 / 210; padding: clamp(24px, 5vw, 64px) clamp(24px, 6vw, 80px); border-radius: 10px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: clamp(4px, 1vw, 10px);
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tone) 16%, #0b1030), #070b20 60%); color: #EEF2FF;
  box-shadow: 0 50px 120px -60px color-mix(in srgb, var(--tone) 80%, transparent), 0 0 0 1px rgba(255,255,255,.06); }
.cert__art { position: absolute; inset: 0; z-index: -2; opacity: .35; }
.cert__frame { position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--tone-gov) 55%, transparent); border-radius: 6px; z-index: -1; }
.cert__frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--tone-gov) 25%, transparent); border-radius: 4px; }
.cert__head { position: absolute; top: clamp(24px, 4vw, 44px); inset-inline: clamp(28px, 5vw, 64px); display: flex; justify-content: space-between; align-items: center; }
.cert__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .12em; direction: ltr; }
.cert__brand svg { width: 26px; height: 26px; color: var(--tone-gov); fill: var(--tone-gov); }
.cert__kind { font-size: clamp(11px, 1.3vw, 14px); color: var(--tone-gov); letter-spacing: .02em; }
.cert__pre { color: #AEB8E0; font-size: clamp(12px, 1.5vw, 16px); }
.cert__name { font-size: clamp(1.6rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.35; background: linear-gradient(90deg, #ffe2a6, var(--tone-gov), #ffe2a6); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: 4px; }
.cert__course { font-size: clamp(1.05rem, 2.5vw, 1.9rem); font-weight: 700; line-height: 1.5; max-width: 30ch; }
.cert__meta { font-size: clamp(11px, 1.3vw, 14px); color: #AEB8E0; }
.cert__skills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 80%; }
.cert__skills li { font-size: clamp(10px, 1.1vw, 12px); padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #D8DFFF; }
.cert__foot { position: absolute; bottom: clamp(24px, 4vw, 44px); inset-inline: clamp(28px, 5vw, 64px); display: flex; justify-content: space-between; align-items: flex-end; }
.cert__foot div { display: flex; flex-direction: column; gap: 2px; font-size: clamp(11px, 1.3vw, 14px); }
.cert__foot small { color: #AEB8E0; font-size: .85em; }
.cert__foot b { font-family: var(--font-mono); }
.cert__stamp { width: clamp(56px, 8vw, 84px); height: clamp(56px, 8vw, 84px); border-radius: 50%; border: 2px solid var(--tone-gov); display: grid !important; place-items: center; position: relative; color: var(--tone-gov); transform: rotate(-10deg); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--tone-gov) 20%, transparent); }
.cert__stamp span { font-size: 9px; letter-spacing: .2em; position: absolute; top: 18%; }
.cert__stamp i { font-style: normal; font-size: 1.6em; font-weight: 800; }
.cert__url { position: absolute; bottom: 10px; left: 0; right: 0; font: 10px var(--font-mono); color: rgba(174,184,224,.6); }
.cert--void { filter: grayscale(.85); }
.cert--void::after { content: "ملغاة"; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(3rem, 12vw, 8rem); font-weight: 800; color: rgba(255, 92, 122, .35); transform: rotate(-18deg); }
.vf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vf__actions .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.vf__note { text-align: center; }
.vf__celebrate { position: absolute; top: 160px; left: 50%; pointer-events: none; z-index: 5; }
.vf__celebrate i { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: var(--tone-gov); animation: u-burst 1.3s .3s var(--ease) both; transform: rotate(calc(var(--i) * 25.7deg)); }
.vf__celebrate i:nth-child(2n) { background: var(--tone-build); border-radius: 50%; }
.vf__celebrate i:nth-child(3n) { background: var(--tone-data); }
@media (max-width: 640px) { .cert { aspect-ratio: auto; min-height: 520px; padding-block: 110px 120px; } .cert__skills { display: none; } }
/* certificate rendered from a builder template (inline SVG in millimetres) */
.certbox { position: relative; width: min(100%, 1040px); }
.certbox svg { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); }
.certbox--void svg { filter: grayscale(.8); opacity: .55; }
.certbox__void { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(2rem, 8vw, 6rem); font-weight: 800; color: #E0314F; transform: rotate(-14deg); pointer-events: none; opacity: .75; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden; }
  .cert, .cert * { visibility: visible; }
  .cert { position: fixed; inset: 0; width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; aspect-ratio: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .certbox, .certbox * { visibility: visible; }
  .certbox { position: fixed; inset: 0; width: auto; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .certbox svg { border-radius: 0; box-shadow: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
.certlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.certchip { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--tone-gov) 10%, var(--orbit)), var(--orbit) 60%); border: 1px solid color-mix(in srgb, var(--tone-gov) 40%, var(--line)); color: var(--starlight); }
.certchip:hover { text-decoration: none; border-color: var(--tone-gov); }
.certchip b { display: block; line-height: 1.6; font-size: var(--fs-sm); }
.certchip small { color: var(--haze); font-size: var(--fs-xs); }
.certchip__seal { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-gov); color: #1a1200; font-weight: 800; }

/* ---------- careers ---------- */
.cc__jobs { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.9; color: var(--haze); margin: 0; }
.cc__jobs svg { flex: none; width: 15px; height: 15px; margin-top: 4px; fill: none; stroke: var(--tone); stroke-width: 1.8; }
.cc__jobs b { color: var(--tone); font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.jobs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.job { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 18px; background: var(--orbit);
  border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); transition-delay: var(--d, 0s); }
.job::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 220px; height: 220px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone, var(--ion)) 22%, transparent), transparent); opacity: .7; transition: opacity .4s var(--ease); }
.job:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone, var(--ion)) 55%, var(--line)); box-shadow: 0 24px 50px -34px var(--tone, var(--ion)); }
.job:hover::before { opacity: 1; }
.job__head { display: flex; gap: 12px; align-items: flex-start; }
.job__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--tone, var(--ion)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone, var(--ion)) 35%, transparent); }
.job__ic svg { width: 20px; height: 20px; fill: none; stroke: var(--tone, var(--ion)); stroke-width: 1.7; }
.job__t { font-size: 1.02rem; font-weight: 700; line-height: 1.7; }
.job__en { font-size: var(--fs-xs); color: var(--haze); font-family: var(--font-mono); text-align: end; }
.job__d { font-size: var(--fs-sm); color: var(--haze); line-height: 1.95; font-family: var(--font-read); }
.job__pay { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.job__label { font-size: var(--fs-xs); color: var(--haze); }
.job__big { font: 700 1.9rem/1.3 var(--font-mono); letter-spacing: -.02em; color: var(--starlight); text-align: end; margin: 4px 0 0;
  background: linear-gradient(90deg, var(--starlight), var(--tone, var(--ion))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.job__mo { font-size: var(--fs-xs); color: var(--haze); text-align: end; }
.job__bar { position: relative; height: 8px; margin: 14px 0 4px; border-radius: 99px; background: var(--nebula); overflow: visible; direction: ltr; }
.job__range { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); min-width: 6px; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--ion)) 45%, transparent), var(--tone, var(--ion))); transform-origin: left; animation: job-grow 1s var(--ease) both; animation-delay: calc(var(--d, 0s) + .2s); }
.job__mark { position: absolute; top: 50%; left: var(--m); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--starlight); box-shadow: 0 0 0 3px var(--tone, var(--ion)), 0 0 16px var(--tone, var(--ion)); }
@keyframes job-grow { from { transform: scaleX(0); } to { transform: none; } }
.job__scale { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font-mono); color: var(--haze); opacity: .8; }
.job__sub { font-size: var(--fs-xs); color: var(--haze); margin-top: 8px; }
.job__src { font-size: 11.5px; color: var(--haze); opacity: .85; }
.job__src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jobs__method { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--orbit); font-size: var(--fs-sm); }
.jobs__method summary { cursor: pointer; font-weight: 600; }
.jobs__method ul { margin: 12px 0 0; padding-inline-start: 18px; display: grid; gap: 8px; line-height: 1.95; color: var(--haze); font-family: var(--font-read); }
.jobs__method b { color: var(--starlight); }
@media (max-width: 960px) { .jobs__grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .job__range { animation: none; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__i { border: 1px solid var(--line); border-radius: 14px; background: var(--orbit); transition: border-color .3s var(--ease); }
.faq__i[open] { border-color: color-mix(in srgb, var(--ion, #4C8DFF) 45%, var(--line)); }
.faq__i summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; font-weight: 600; line-height: 1.8; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__ic { position: relative; flex: none; width: 18px; height: 18px; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; inset: 8px 2px auto; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
.faq__ic::after { transform: rotate(90deg); }
.faq__i[open] .faq__ic::after { transform: rotate(0); }
.faq__i p { padding: 0 18px 18px; color: var(--haze); line-height: 2; font-family: var(--font-read); animation: u-rise .35s var(--ease) both; }

/* ---------- consent banner ---------- */
.ixc { position: fixed; z-index: 90; inset-inline: 16px; bottom: 16px; max-width: 560px; margin-inline: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px; background: var(--x-glass, rgba(10,15,44,.92)); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6);
  backdrop-filter: blur(14px); transform: translateY(24px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease); }
.ixc.is-in { transform: none; opacity: 1; }
.ixc.is-out { transform: translateY(24px); opacity: 0; }
.ixc__t { flex: 1 1 260px; font-size: var(--fs-sm); line-height: 1.9; color: var(--starlight); margin: 0; }
.ixc__a { display: flex; gap: 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================== blog */
.blog-hero .cat-hero__lead { max-width: 70ch; }
.blog-search { margin-top: 24px; display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 6px 6px 14px; padding-inline-start: 16px;
  border-radius: 16px; background: var(--x-glass); border: 1px solid var(--line); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.blog-search:focus-within { border-color: var(--ion, #4C8DFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion, #4C8DFF) 18%, transparent); }
.blog-search svg { width: 18px; height: 18px; fill: none; stroke: var(--haze); stroke-width: 2; flex: none; }
.blog-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--starlight); font: inherit; padding: 8px 0; }
.blog { padding-block: 8px 72px; }
.blog-cats { margin: 8px 0 28px; }
.blog-cats .cat-chip[aria-current="page"] { background: var(--starlight); color: var(--void); border-color: var(--starlight); }
.blog-note { margin-bottom: 18px; color: var(--haze); }
.bc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bc, .blead { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.bc:hover, .bc:focus-visible, .blead:hover, .blead:focus-visible { text-decoration: none; transform: translateY(-5px); border-color: color-mix(in srgb, var(--ion, #4C8DFF) 55%, var(--line)); box-shadow: 0 28px 60px -36px var(--ion, #4C8DFF); }
.bc__media, .blead__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nebula); }
.bc__media img, .blead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bc:hover .bc__media img, .blead:hover .blead__media img { transform: scale(1.05); }
.bc__ph { position: absolute; inset: 0; display: block; }
.bc__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.bc__cat, .blead__tag { font-size: var(--fs-xs); color: var(--ion, #4C8DFF); font-weight: 600; }
.bc__t { font-size: 1.1rem; font-weight: 700; line-height: 1.7; }
.bc__x { color: var(--haze); font-size: var(--fs-sm); line-height: 1.95; font-family: var(--font-read); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc__meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); color: var(--haze); padding-top: 10px; border-top: 1px dashed var(--line); }
.blead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-bottom: 28px; }
.blead__media { aspect-ratio: auto; min-height: 320px; }
.blead__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 4vw, 40px); }
.blead__t { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.6; }
.blead__x { color: var(--haze); line-height: 2; font-family: var(--font-read); }
.blead__go { margin-top: auto; font-weight: 600; color: var(--ion, #4C8DFF); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
@media (max-width: 960px) { .bc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blead { grid-template-columns: minmax(0, 1fr); } .blead__media { min-height: 200px; aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .bc-grid { grid-template-columns: minmax(0, 1fr); } }

/* article */
.rprog { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.rprog span { display: block; height: 100%; background: linear-gradient(90deg, var(--tone-found), var(--tone-build), var(--tone-data)); transform: scaleX(0); transform-origin: right; }
[dir="ltr"] .rprog span { transform-origin: left; }
.bp-preview { margin-top: 16px; padding: 10px 16px; border-radius: 12px; border: 1px dashed var(--tone-gov); color: var(--tone-gov); font-size: var(--fs-sm); }
.bp-head { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(40px, 7vw, 84px) clamp(24px, 4vw, 40px); }
.bp-head__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 80% 0%, color-mix(in srgb, var(--tone-found) 22%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 30%, color-mix(in srgb, var(--tone-data) 14%, transparent), transparent 70%); }
.bp-head__in { max-width: 860px; }
.bp-title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 700; line-height: 1.55; margin-top: 18px; }
.bp-lead { margin-top: 16px; font-size: var(--fs-lg); color: var(--haze); line-height: 2.05; font-family: var(--font-read); }
.bp-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: var(--haze); font-size: var(--fs-sm); }
.bp-author { display: inline-flex; align-items: center; gap: 8px; color: var(--starlight); font-weight: 600; }
.bp-cover { margin-block: 8px 12px; }
.bp-cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; border: 1px solid var(--line); }
.bp-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center; gap: clamp(28px, 5vw, 64px); padding-block: 24px 40px; }
.bp-side { position: sticky; top: 90px; align-self: start; display: grid; gap: 22px; }
.bp-toc__t { font-size: var(--fs-xs); color: var(--haze); font-weight: 600; margin-bottom: 10px; letter-spacing: .02em; }
.bp-toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); display: grid; gap: 2px; }
.bp-toc a { display: block; padding: 6px 14px; margin-inline-start: -1px; border-inline-start: 2px solid transparent; color: var(--haze); font-size: var(--fs-sm); line-height: 1.7; transition: color .2s, border-color .2s; }
.bp-toc .lvl3 a { padding-inline-start: 26px; font-size: var(--fs-xs); }
.bp-toc a:hover, .bp-toc a.is-on { color: var(--starlight); border-inline-start-color: var(--ion, #4C8DFF); text-decoration: none; }
.bp-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bp-share .bp-toc__t { width: 100%; margin: 0; }
.bp-share a, .bp-share button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--orbit); color: var(--starlight); font: 700 14px/1 var(--font-mono); cursor: pointer; transition: border-color .2s, transform .2s; }
.bp-share a:hover, .bp-share button:hover { border-color: var(--ion, #4C8DFF); transform: translateY(-2px); text-decoration: none; }
.prose { font-family: var(--font-read); font-size: 1.08rem; line-height: 2.15; color: color-mix(in srgb, var(--starlight) 92%, var(--haze)); }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { position: relative; font-family: var(--font-display, inherit); color: var(--starlight); line-height: 1.6; scroll-margin-top: 90px; margin-top: 2em; }
.prose h2 { font-size: 1.6rem; } .prose h3 { font-size: 1.28rem; } .prose h4 { font-size: 1.1rem; }
.bp-anchor { margin-inline-start: 10px; opacity: 0; color: var(--haze); font-size: .8em; transition: opacity .2s; }
.prose h2:hover .bp-anchor, .prose h3:hover .bp-anchor, .prose h4:hover .bp-anchor { opacity: 1; }
.prose a { color: var(--ion, #4C8DFF); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-inline-start: 1.4em; display: grid; gap: .45em; }
.prose blockquote { padding: 14px 20px; border-inline-start: 3px solid var(--tone-data); background: color-mix(in srgb, var(--tone-data) 8%, transparent); border-radius: 0 14px 14px 0; color: var(--starlight); }
.prose code { font-family: var(--font-mono); font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--nebula); }
.bp-code { padding: 18px 20px; border-radius: 14px; background: #060a1f; border: 1px solid var(--line); overflow-x: auto; font: 14px/1.8 var(--font-mono); color: #d7e0ff; }
.bp-code code { background: none; padding: 0; }
.bp-fig img { width: 100%; border-radius: 16px; border: 1px solid var(--line); }
.bp-fig figcaption { margin-top: 8px; text-align: center; color: var(--haze); font-size: var(--fs-sm); }
.bp-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.bp-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.bp-table th, .bp-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: start; }
.bp-table th { background: var(--nebula); font-weight: 600; }
.bp-callout { padding: 16px 20px; border-radius: 14px; border: 1px solid; }
.bp-callout__t { font-weight: 700; margin-bottom: 4px; font-family: var(--font-display, inherit); }
.bp-callout--tip { border-color: color-mix(in srgb, var(--tone-build) 50%, transparent); background: color-mix(in srgb, var(--tone-build) 9%, transparent); }
.bp-callout--tip .bp-callout__t { color: var(--tone-build); }
.bp-callout--note { border-color: color-mix(in srgb, var(--tone-found) 50%, transparent); background: color-mix(in srgb, var(--tone-found) 9%, transparent); }
.bp-callout--note .bp-callout__t { color: var(--tone-found); }
.bp-callout--warn { border-color: color-mix(in srgb, var(--tone-gov) 50%, transparent); background: color-mix(in srgb, var(--tone-gov) 9%, transparent); }
.bp-callout--warn .bp-callout__t { color: var(--tone-gov); }
.bp-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.bp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-embed { margin-block: 1.6em; font-family: var(--font-ui, inherit); line-height: 1.8; }
.bp-embed--course .cc { max-width: 380px; }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2em; }
.bp-foot { padding-bottom: 72px; }
.bp-tags { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; margin: 0 auto 32px; }
.bp-tags a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--haze); font-size: var(--fs-sm); }
.bp-cta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(22px, 4vw, 40px); border-radius: 24px;
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--tone-build) 16%, transparent), transparent 60%), var(--orbit); border: 1px solid var(--line); margin-bottom: 48px; }
.bp-cta__k { color: var(--tone-build); font-weight: 600; font-size: var(--fs-sm); }
.bp-cta__t { font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.6; margin: 8px 0 10px; }
.bp-cta .btn { margin-top: 18px; }
@media (max-width: 960px) { .bp-grid { grid-template-columns: minmax(0, 1fr); } .bp-side { position: static; order: 2; } .bp-toc { display: none; } .bp-cta { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================== form builder (public) */
.fpage { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 7vw, 88px); min-height: 70vh; }
.fpage .cat-hero__bg { z-index: -1; }
.fpage__in { max-width: 760px; }
.fpage__t { font-size: clamp(1.8rem, 3.8vw, 2.7rem); font-weight: 700; line-height: 1.5; }
.fpage__lead { margin-top: 12px; color: var(--haze); font-size: var(--fs-lg); line-height: 2; font-family: var(--font-read); }
.fpage__card { margin-top: 28px; padding: clamp(20px, 4vw, 36px); border-radius: 22px; background: var(--orbit); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(0,0,0,.7); }
.fb { display: grid; gap: 18px; }
.fb--embed { padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--orbit); border: 1px solid var(--line); }
.fb__title { font-size: 1.3rem; line-height: 1.6; } .fb__intro { color: var(--haze); line-height: 1.95; margin-top: 4px; }
.fb__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.fb__f { grid-column: 1 / -1; display: grid; gap: 7px; }
.fb__f--half { grid-column: auto; }
.fb__sec { grid-column: 1 / -1; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 1.05rem; }
.fb__l { font-weight: 600; font-size: var(--fs-sm); }
.fb__req { color: var(--flare, #ff6b6b); font-weight: 700; }
.fb input:not([type="checkbox"]):not([type="radio"]), .fb select, .fb textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: inherit; line-height: 1.7;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fb input:focus, .fb select:focus, .fb textarea:focus { outline: 0; border-color: var(--ion, #4C8DFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion, #4C8DFF) 18%, transparent); }
.fb__m { min-height: 1em; color: var(--haze); font-size: var(--fs-xs); line-height: 1.7; }
.fb__f.is-bad input, .fb__f.is-bad select, .fb__f.is-bad textarea { border-color: var(--flare, #ff6b6b); }
.fb__f.is-bad .fb__m { color: var(--flare, #ff6b6b); }
.fb__f.is-bad { animation: fb-shake .4s var(--ease); }
@keyframes fb-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.fb__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb__opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.fb__opt:has(input:checked) { border-color: var(--ion, #4C8DFF); background: color-mix(in srgb, var(--ion, #4C8DFF) 12%, transparent); }
.fb__opt input, .fb__consent input { accent-color: var(--ion, #4C8DFF); width: 18px; height: 18px; }
.fb__consent { display: flex; gap: 10px; align-items: flex-start; line-height: 1.9; cursor: pointer; }
.fb__consent input { margin-top: 5px; flex: none; }
.fb__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fb__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fb__privacy { color: var(--haze); font-size: var(--fs-xs); flex: 1 1 220px; }
.fb.is-sending { opacity: .85; }
.fb-done { text-align: center; padding: clamp(24px, 5vw, 48px) 16px; animation: u-rise .5s var(--ease) both; }
.fb-done--inline { border-radius: 20px; background: var(--orbit); border: 1px solid color-mix(in srgb, var(--tone-build) 45%, var(--line)); }
.fb-done h3 { font-size: 1.3rem; margin-top: 12px; } .fb-done p { color: var(--haze); line-height: 2; margin-top: 8px; }
.fb-done .x-ctas { justify-content: center; margin-top: 24px; }
.fb-done__ic { width: 76px; height: 76px; margin-inline: auto; fill: none; stroke: var(--tone-build); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: u-pop .6s var(--ease) both; }
.fb-done__ic circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: u-draw .7s var(--ease) .1s forwards; }
.fb-done__ic path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: u-draw .45s var(--ease) .6s forwards; }
@media (max-width: 640px) { .fb__grid { grid-template-columns: minmax(0, 1fr); } .fb__f--half { grid-column: 1 / -1; } }

/* =========================================================== smart review (FSRS) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv { padding-block: clamp(28px, 5vw, 56px) 72px; max-width: 860px; }
.rv__t { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; margin-top: 14px; }
.rv__lead { color: var(--haze); line-height: 2; margin-top: 8px; font-family: var(--font-read); }
.rv__stats { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 28px; padding: 0; }
.rv__stats li { padding: 12px 16px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line); display: grid; }
.rv__stats b { font: 700 1.6rem/1.2 var(--font-mono); } .rv__stats span { font-size: var(--fs-xs); color: var(--haze); }
.rv-card, .plq__card { padding: clamp(20px, 4vw, 36px); border-radius: 24px; background: var(--orbit); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(0,0,0,.7); }
.rv-card__k, .plq__k { font-size: var(--fs-sm); color: var(--tone, var(--ion)); font-weight: 600; }
.rv-card__q, .plq__q { font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.9; margin: 10px 0 20px; font-weight: 700; }
.rv-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-opt, .plq__opt { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--void); color: var(--starlight);
  font: inherit; text-align: start; line-height: 1.9; cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.rv-opt:hover:not(:disabled), .plq__opt:hover { border-color: var(--ion, #4C8DFF); transform: translateX(-3px); }
.rv-opt__l { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--nebula); font-weight: 700; }
.rv-opt.is-right { border-color: var(--tone-build); background: color-mix(in srgb, var(--tone-build) 12%, var(--void)); }
.rv-opt.is-right .rv-opt__l { background: var(--tone-build); color: #041b18; }
.rv-opt.is-wrong { border-color: var(--flare, #ff5c7a); background: color-mix(in srgb, var(--flare, #ff5c7a) 10%, var(--void)); animation: fb-shake .4s var(--ease); }
.rv-opt:disabled { cursor: default; }
.rv-res { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); display: grid; gap: 12px; animation: u-rise .35s var(--ease) both; }
.rv-res__t { font-weight: 700; font-size: 1.1rem; } .rv-res__t.is-ok { color: var(--tone-build); } .rv-res__t.is-bad { color: var(--flare, #ff5c7a); }
.rv-res__x { color: var(--haze); line-height: 2; font-family: var(--font-read); }
.rv-rate__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) { .rv__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================== placement */
.plc { padding-block: 8px 72px; max-width: 900px; }
.plc-last { padding: 12px 16px; border-radius: 12px; background: var(--orbit); border: 1px solid var(--line); margin-bottom: 20px; }
.plc-form { display: grid; gap: 22px; }
.plc-scope { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plc-scope legend { margin-bottom: 12px; }
.plc-opt { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--orbit); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.plc-opt:has(input:checked) { border-color: var(--tone, var(--ion)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--ion)) 22%, transparent); }
.plc-opt input { accent-color: var(--tone, var(--ion)); margin-top: 6px; }
.plc-opt span { display: grid; } .plc-opt small { color: var(--haze); }
.plc-rules { margin: 0; padding-inline-start: 18px; color: var(--haze); line-height: 2; font-family: var(--font-read); }
.plc-form > .btn { justify-self: start; }
.plq { padding-block: clamp(28px, 5vw, 56px) 72px; max-width: 820px; }
.plq__bar { height: 6px; border-radius: 6px; background: var(--nebula); overflow: hidden; margin-bottom: 18px; }
.plq__bar span { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--tone, var(--ion)), var(--tone-data)); transition: width .6s var(--ease); }
.plq__opts { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.plq__opt:has(input:checked) { border-color: var(--tone, var(--ion)); background: color-mix(in srgb, var(--tone, var(--ion)) 10%, var(--void)); }
.plq__opt input { position: absolute; opacity: 0; pointer-events: none; }
.plq__opt:has(input:checked) .rv-opt__l { background: var(--tone, var(--ion)); color: #fff; }
.plq__opt:focus-within { outline: 2px solid var(--tone, var(--ion)); outline-offset: 2px; }
.plq__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 22px; }
.plr { padding-block: clamp(28px, 5vw, 56px) 72px; }
.plr__head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center; margin-bottom: 40px; padding: clamp(20px, 4vw, 36px); border-radius: 24px; background: var(--orbit); border: 1px solid var(--line); }
.plr__ring { position: relative; width: 160px; height: 160px; display: grid; place-items: center; }
.plr__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.plr__track { fill: none; stroke: var(--nebula); stroke-width: 10; }
.plr__val { fill: none; stroke: var(--tone-build); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s var(--ease); }
.plr__ring b { font: 700 2rem var(--font-mono); }
.plr__k { color: var(--tone-build); font-weight: 600; }
.plr__t { font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.6; margin: 6px 0 10px; }
.plr__lead { color: var(--haze); line-height: 2; }
.plr__head .x-ctas { margin-top: 20px; }
.plr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.plr__c { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); transition: transform .25s var(--ease), border-color .25s; }
.plr__c:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--tone); }
.plr__c.is-start { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 25%, transparent); }
.plr__n { font: 700 1.4rem var(--font-mono); color: var(--tone); }
.plr__cb { display: grid; flex: 1; } .plr__cb small { color: var(--haze); font-size: var(--fs-xs); }
.plr__dots { display: flex; gap: 4px; } .plr__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--nebula); } .plr__dots i.on { background: var(--tone-build); }
.plr__badge { position: absolute; top: -10px; inset-inline-start: 14px; font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--tone); color: #050816; font-weight: 700; }
.plr__note { margin-top: 18px; }
@media (max-width: 720px) { .plr__head { grid-template-columns: 1fr; justify-items: center; text-align: center; } .plr__head .x-ctas { justify-content: center; } }

/* =========================================================== projects */
.prj { padding-block: 8px 72px; }
.prj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.prj-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.prj-card:hover { text-decoration: none; transform: translateY(-5px); border-color: var(--tone); box-shadow: 0 28px 60px -36px var(--tone); }
.prj-card__art { position: relative; display: block; height: 120px; border-bottom: 1px solid var(--line); }
.prj-card__b { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.prj-card__t { font-size: 1.12rem; line-height: 1.7; }
.prj-card__d { color: var(--haze); font-size: var(--fs-sm); line-height: 1.95; font-family: var(--font-read); }
.prj-card__skills { display: flex; flex-wrap: wrap; gap: 6px; } .prj-card__skills span { font-size: 11.5px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--haze); }
.prj-card__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line); }
.prj-st { font-size: var(--fs-xs); padding: 2px 10px; border-radius: 999px; font-weight: 600; }
.prj-st--ok { color: var(--tone-build); background: color-mix(in srgb, var(--tone-build) 14%, transparent); }
.prj-st--warn { color: var(--tone-gov); background: color-mix(in srgb, var(--tone-gov) 14%, transparent); }
.prj-st--error { color: var(--flare, #ff5c7a); background: color-mix(in srgb, var(--flare, #ff5c7a) 12%, transparent); }
.prjd__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.rubric { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rubric li { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--orbit); border: 1px solid var(--line); }
.rubric span { color: var(--haze); font-size: var(--fs-sm); } .rubric small { font-family: var(--font-mono); color: var(--haze); }
.note { padding: 14px 18px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line); line-height: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prj-form { display: grid; gap: 16px; }
.prj-form .field { display: grid; gap: 6px; }
.prj-form .field > span { font-weight: 600; font-size: var(--fs-sm); }
.prj-form input, .prj-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: inherit; line-height: 1.9; }
.prj-form input:focus, .prj-form textarea:focus { outline: 0; border-color: var(--ion, #4C8DFF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ion, #4C8DFF) 18%, transparent); }
.prj-form .is-bad input, .prj-form .is-bad textarea { border-color: var(--flare, #ff5c7a); }
.fielderr { color: var(--flare, #ff5c7a); font-size: var(--fs-xs); }
.prj-form > .btn { justify-self: start; }
.prj-sub { padding: 14px 16px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line); margin-bottom: 10px; display: grid; gap: 6px; }
.prj-sub header { display: flex; justify-content: space-between; align-items: center; }
.prj-sub__score { font: 700 1.8rem var(--font-mono); color: var(--tone-build); }
.prj-sub__rub { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); } .prj-sub__rub li { display: flex; justify-content: space-between; }
.prj-sub__fb { padding: 10px 14px; border-radius: 10px; background: var(--void); line-height: 2; font-family: var(--font-read); font-size: var(--fs-sm); }
@media (max-width: 900px) { .prjd__grid { grid-template-columns: 1fr; } .rubric li { grid-template-columns: 1fr; } }

/* =========================================================== AI tutor */
.tut-fab { position: fixed; z-index: 70; bottom: 20px; inset-inline-start: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--ion, #4C8DFF), var(--tone-data)); color: #fff; font: 600 var(--fs-sm) var(--font-ui, inherit); box-shadow: 0 18px 40px -16px var(--ion, #4C8DFF); transition: transform .25s var(--ease), opacity .25s; }
.tut-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tut-fab:hover { transform: translateY(-2px); } .tut-fab.is-hidden { opacity: 0; pointer-events: none; }
.tut { position: fixed; z-index: 80; bottom: 16px; inset-inline-start: 16px; width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column;
  border-radius: 22px; background: var(--orbit); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); transform: translateY(20px) scale(.98); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.tut.is-open { transform: none; opacity: 1; }
.tut[hidden] { display: none; }
.tut__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tut__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--ion, #4C8DFF) 18%, transparent); color: var(--ion, #4C8DFF); }
.tut__avatar svg { width: 26px; height: 26px; }
.tut__t { font-size: 1rem; } .tut__sub { font-size: var(--fs-xs); color: var(--haze); }
.tut__x { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: none; color: inherit; font-size: 20px; cursor: pointer; }
.tut__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.tut__msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; line-height: 1.95; font-size: var(--fs-sm); font-family: var(--font-read); animation: u-rise .3s var(--ease) both; }
.tut__msg > * + * { margin-top: .6em; }
.tut__msg ul, .tut__msg ol { padding-inline-start: 1.2em; }
.tut__msg--bot { align-self: flex-start; background: var(--nebula); border-end-start-radius: 4px; }
.tut__msg--me { align-self: flex-end; background: color-mix(in srgb, var(--ion, #4C8DFF) 22%, var(--orbit)); border-end-end-radius: 4px; }
.tut__msg--err { align-self: stretch; max-width: 100%; border: 1px solid color-mix(in srgb, var(--flare, #ff5c7a) 50%, transparent); color: var(--flare, #ff5c7a); display: grid; gap: 8px; }
.tut-code { direction: ltr; text-align: left; padding: 10px 12px; border-radius: 10px; background: #060a1f; overflow-x: auto; font: 12.5px/1.7 var(--font-mono); color: #d7e0ff; }
.tut__dots { display: inline-flex; gap: 4px; } .tut__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--haze); animation: u-twinkle 1s infinite; } .tut__dots i:nth-child(2) { animation-delay: .15s; } .tut__dots i:nth-child(3) { animation-delay: .3s; }
.tut__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.tut__chips button { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--haze); cursor: pointer; }
.tut__chips button:hover { color: var(--starlight); border-color: var(--ion, #4C8DFF); }
.tut__form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.tut__form textarea { flex: 1; resize: none; max-height: 140px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: inherit; line-height: 1.8; }
.tut__form textarea:focus { outline: 0; border-color: var(--ion, #4C8DFF); }
.tut__foot { padding: 0 14px 12px; font-size: 11px; color: var(--haze); line-height: 1.7; }
@media (max-width: 560px) { .tut { inset: 0; width: 100%; height: 100%; border-radius: 0; } .tut-fab span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tut, .tut__msg { transition: none; animation: none; } }

/* dashboard widgets */
.dw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-block: 18px; }
.dw { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); transition: border-color .25s, transform .25s var(--ease); }
.dw:hover { text-decoration: none; border-color: var(--tone, var(--ion)); transform: translateY(-3px); }
.dw__k { font-size: var(--fs-xs); color: var(--tone, var(--ion)); font-weight: 600; }
.dw__v { font: 700 1.8rem/1.2 var(--font-mono); }
.dw__d { color: var(--haze); font-size: var(--fs-sm); line-height: 1.8; }
.dw__go { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--tone, var(--ion)); }

/* ---------- brand (official logo, vector) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; direction: ltr; color: var(--starlight); }
.brand__mark { width: 40px; height: 40px; flex: none; overflow: visible; transition: transform .6s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-14deg); }
.brand__word { height: 17px; width: auto; color: var(--starlight); }
:root.v2[data-theme="light"] .brand__word { color: #0F1A4D; }
.footer .brand__mark { width: 34px; height: 34px; } .footer .brand__word { height: 14px; }
.footer__inner > .brand { margin-inline-end: auto; }
@media (max-width: 480px) { .brand__mark { width: 34px; height: 34px; } .brand__word { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .brand__mark { transition: none; } }

/* =========================================================== notifications */
.bell { position: relative; }
.bell summary { list-style: none; cursor: pointer; position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--orbit); }
.bell summary::-webkit-details-marker { display: none; }
.bell summary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.bell__n { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--flare, #ff5c7a); color: #fff; font: 700 11px/18px var(--font-mono); text-align: center; animation: u-pop .4s var(--ease); }
.bell__pop { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(360px, 88vw); max-height: 70vh; overflow: auto; z-index: 60; padding: 8px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); animation: u-rise .25s var(--ease) both; }
.bell__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: var(--fs-sm); }
.bell__empty { padding: 12px; color: var(--haze); font-size: var(--fs-sm); line-height: 1.9; }
.bell__i { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; color: var(--starlight); font-size: var(--fs-sm); line-height: 1.8; }
.bell__i:hover { background: var(--nebula); text-decoration: none; }
.bell__i.is-new { background: color-mix(in srgb, var(--ion, #4C8DFF) 9%, transparent); }
.bell__i span { color: var(--haze); } .bell__i small { color: var(--haze); font-size: 11px; }
.bell__all { display: block; text-align: center; padding: 10px; font-size: var(--fs-sm); font-weight: 600; }
.ntf { padding-block: clamp(28px, 5vw, 56px) 72px; }
.ntf__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 20px; }
.ntf__list { display: grid; gap: 8px; }
.ntf__i { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); transition: border-color .2s, transform .2s var(--ease); }
.ntf__i:hover { text-decoration: none; border-color: var(--ion, #4C8DFF); transform: translateX(-3px); }
.ntf__i.is-new { border-inline-start: 3px solid var(--ion, #4C8DFF); }
.ntf__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nebula); font-weight: 700; color: var(--ion, #4C8DFF); }
.ntf__b { display: grid; line-height: 1.8; } .ntf__b span { color: var(--haze); font-size: var(--fs-sm); }
.ntf__i small { color: var(--haze); font-size: var(--fs-xs); white-space: nowrap; }
.ntf__prefs { display: grid; gap: 12px; padding: 20px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); position: sticky; top: 90px; }
.ntf__prefs .btn { justify-self: start; }
@media (max-width: 900px) { .ntf__grid { grid-template-columns: 1fr; } .ntf__prefs { position: static; } }

/* =========================================================== community */
.cm { padding-block: 8px 72px; }
.cm .cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.cm .cat-chip[aria-current="page"] { background: var(--starlight); color: var(--void); border-color: var(--starlight); }
.cm-course select { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--orbit); color: var(--starlight); font: inherit; font-size: var(--fs-sm); }
.cm-list { display: grid; gap: 10px; }
.cm-i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); transition: border-color .2s, transform .2s var(--ease); }
.cm-i:hover { text-decoration: none; border-color: var(--tone, var(--ion)); transform: translateX(-3px); }
.cm-i__stats { display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; text-align: center; min-width: 88px; }
.cm-i__stats b { font: 700 1.1rem var(--font-mono); } .cm-i__stats b.is-ok { color: var(--tone-build); }
.cm-i__stats small { color: var(--haze); font-size: 11px; }
.cm-i__b { display: grid; gap: 2px; }
.cm-i__t { font-weight: 700; line-height: 1.8; }
.cm-i__m { color: var(--haze); font-size: var(--fs-xs); }
.cm-ok { color: var(--tone-build); font-weight: 600; } .cm-staff { color: var(--tone-gov); font-weight: 700; }
.cm-list--mini .cm-i { padding: 10px 14px; } .cm-list--mini .cm-i__stats { min-width: 44px; grid-template-columns: auto; }
.discuss { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.discuss__ask summary { list-style: none; cursor: pointer; display: inline-flex; }
.discuss__ask summary::-webkit-details-marker { display: none; }
.discuss__ask form { margin-top: 14px; }
.th { padding-block: clamp(24px, 4vw, 48px) 72px; max-width: 900px; }
.th-q, .th-r { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); margin-top: 14px; }
.th-r.is-answer { border-color: var(--tone-build); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-build) 18%, transparent); }
.th-r.is-staff { border-inline-start: 3px solid var(--tone-gov); }
.th-vote { display: grid; justify-items: center; align-content: start; gap: 4px; }
.th-vote__b { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--haze); cursor: pointer; transition: all .2s; }
.th-vote__b:hover, .th-vote__b.is-on { color: var(--ion, #4C8DFF); border-color: var(--ion, #4C8DFF); }
.th-vote b { font-family: var(--font-mono); }
.th-t { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.6; }
.th-m { color: var(--haze); font-size: var(--fs-sm); margin: 4px 0 10px; }
.th-text { font-size: 1rem; }
.th-h { margin-top: 28px; }
.th-acts { display: flex; gap: 14px; margin-top: 8px; font-size: var(--fs-sm); }
.th-report { color: var(--haze); font-size: var(--fs-xs); }
.th-form { margin-top: 26px; }

/* =========================================================== support */
.sp-ctas { margin-top: 20px; }
.sp { padding-block: 8px 72px; max-width: 980px; display: grid; gap: 30px; }
.sp-cat__t { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; margin-bottom: 12px; }
.sp-cat__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--ion, #4C8DFF) 14%, transparent); color: var(--ion, #4C8DFF); font-weight: 700; }
.sp-a { padding: 0 18px 16px; line-height: 2; font-family: var(--font-read); color: var(--haze); }
.sp-a > * + * { margin-top: .6em; } .sp-a ul, .sp-a ol { padding-inline-start: 1.3em; }
.sp-help { font-size: var(--fs-xs); margin-top: 12px; }
.sp-res { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); }
.sp-res:hover { border-color: var(--ion, #4C8DFF); text-decoration: none; }
.sp-res span { color: var(--haze); font-size: var(--fs-sm); line-height: 1.9; }
.sp-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(20px, 4vw, 32px); border-radius: 22px; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--ion, #4C8DFF) 16%, transparent), transparent 60%), var(--orbit); border: 1px solid var(--line); }
.spn { padding-block: clamp(28px, 5vw, 56px) 72px; max-width: 820px; }
.spn__form { margin-top: 20px; }
.spn__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prj-form select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: inherit; }
.sp-suggest { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--ion, #4C8DFF); background: color-mix(in srgb, var(--ion, #4C8DFF) 6%, transparent); display: grid; gap: 8px; }
.sp-suggest > div { display: grid; gap: 6px; }
.spt__head { margin-bottom: 10px; }
.spt__log { display: grid; gap: 12px; }
.spt__m { padding: 16px 18px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); max-width: 92%; }
.spt__m.is-staff { justify-self: end; border-color: color-mix(in srgb, var(--tone-build) 45%, var(--line)); background: color-mix(in srgb, var(--tone-build) 6%, var(--orbit)); }
.spt__b { line-height: 2.05; font-family: var(--font-read); white-space: normal; }
.spt__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.spt__rate { margin-top: 22px; padding: 18px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); display: grid; gap: 12px; justify-items: start; }
.spt__stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.spt__stars input { position: absolute; opacity: 0; pointer-events: none; }
.spt__stars label { font-size: 30px; color: var(--line); cursor: pointer; transition: color .15s, transform .15s; }
.spt__stars label:hover, .spt__stars label:hover ~ label, .spt__stars input:checked ~ label { color: var(--tone-gov); }
.spt__stars input:focus-visible + label { outline: 2px solid var(--ion, #4C8DFF); border-radius: 6px; }
.spt__note { width: min(100%, 460px); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: inherit; }
@media (max-width: 640px) { .spn__two { grid-template-columns: 1fr; } .spt__m { max-width: 100%; } }

/* =========================================================== organizations */
.org { padding-block: clamp(28px, 5vw, 56px) 72px; }
.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.org-card { padding: 20px; border-radius: 18px; background: var(--orbit); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.org-inv { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.org-inv li { display: flex; justify-content: space-between; gap: 10px; }
.linkbox-l { display: flex; gap: 8px; } .linkbox-l input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--void); color: var(--starlight); font: 13px var(--font-mono); }
.org-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.org-c { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--orbit); border: 1px solid var(--line); }
.org-c__t { font-weight: 600; font-size: var(--fs-sm); }
.org-c__bar { height: 8px; border-radius: 8px; background: var(--nebula); overflow: hidden; }
.org-c__bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--tone, var(--ion)); transition: width .8s var(--ease); }
.org-c__v { font-size: var(--fs-xs); color: var(--haze); }
.org-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--orbit); }
.org-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.org-table th, .org-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start; }
.org-table th { color: var(--haze); font-weight: 600; font-size: var(--fs-xs); background: var(--nebula); }
.mt { margin-top: 24px; }
@media (max-width: 900px) { .org-grid { grid-template-columns: 1fr; } }
.installcta { display: flex; gap: 14px; align-items: center; width: 100%; margin-top: 14px; padding: 14px 18px; border-radius: 16px; border: 1px dashed var(--ion, #4C8DFF); background: color-mix(in srgb, var(--ion, #4C8DFF) 7%, transparent); color: var(--starlight); font: inherit; text-align: start; cursor: pointer; }
.installcta svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--ion, #4C8DFF); stroke-width: 1.8; }
.installcta span { display: grid; } .installcta small { color: var(--haze); }

/* Blue buttons: strictly white text across all pages */
.btn--primary,
button.btn--primary,
a.btn--primary,
input[type="submit"].btn--primary {
  color: #FFFFFF !important;
}
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active,
.btn--primary:visited {
  color: #FFFFFF !important;
}
.btn--primary *,
button.btn--primary *,
a.btn--primary * {
  color: inherit;
}