/* =====================================================================
   ИнклюзивЛаб: дизайн жүйесі
   Қараңғы premium тақырып (әдепкі) + жарық тақырып + жоғары контраст.
   Қаріптер: Unbounded (тақырыптар) + Inter (мәтін); екеуі де қазақ әріптерін қамтиды.
   ===================================================================== */
:root,:root[data-theme="dark"]{
  --bg:#070B14;--bg-2:#0B1120;--surface:#0F1626;--surface-2:#151E31;--glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.08);
  --text:#EEF2FF;--muted:#9AA6C2;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
  --brand:#7DD3FC;--brand-2:#A5B4FC;--on-brand:#06101F;--accent:#FBBF24;--ok:#34D399;--danger:#F87171;--chip:rgba(125,211,252,.12);
  --c1:#22D3EE;--c2:#818CF8;--c3:#C084FC;--grad:linear-gradient(110deg,var(--c1),var(--c2) 50%,var(--c3));
  --hero-bg:#0B1324;--g-game:#FBBF24;--g-ict:#22D3EE;--g-coop:#34D399;--g-adapt:#C084FC;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 40px rgba(0,0,0,.35);
  --glow:0 8px 30px rgba(99,102,241,.45),0 0 0 1px rgba(255,255,255,.12) inset;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F5F7FC;--bg-2:#EEF1F8;--surface:#FFFFFF;--surface-2:#F1F4FA;--glass:rgba(255,255,255,.75);--glass-2:rgba(15,23,42,.05);
  --text:#0B1220;--muted:#56607A;--line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.16);
  --brand:#4F46E5;--brand-2:#6366F1;--on-brand:#fff;--accent:#D97706;--ok:#059669;--danger:#DC2626;--chip:rgba(79,70,229,.08);
  --c1:#0891B2;--c2:#6366F1;--c3:#A855F7;
  --hero-bg:#0B1324;--g-game:#B45309;--g-ict:#0891B2;--g-coop:#059669;--g-adapt:#9333EA;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px rgba(15,23,42,.07);
  --glow:0 8px 24px rgba(79,70,229,.35);
  color-scheme:light;
}
:root[data-contrast="high"]{
  --bg:#000;--bg-2:#000;--surface:#000;--surface-2:#111;--glass:#000;--glass-2:#111;--text:#fff;--muted:#FFEF5C;--line:#fff;--line-2:#fff;
  --brand:#FFEF5C;--brand-2:#FFEF5C;--on-brand:#000;--chip:#222;--c1:#FFEF5C;--c2:#FFEF5C;--c3:#FFEF5C;--grad:linear-gradient(#FFEF5C,#FFEF5C);
  --hero-bg:#000;--ok:#5CFFB0;--danger:#FF8A80;--g-game:#FFEF5C;--g-ict:#7FE0FF;--g-coop:#5CFFB0;--g-adapt:#E8B8FF;--shadow:none;--glow:none;
}
:root{
  --r-s:10px;--r-m:16px;--r-l:24px;--fs:16px;--lh:1.6;--ease:cubic-bezier(.22,1,.36,1);--top-h:68px;--bnav:0px;
  --display:"Rubik","Onest",system-ui,sans-serif;
  --body:"Onest","Segoe UI",Roboto,system-ui,sans-serif;
}
/* Andika: оқу үйретуге арналған қаріп, қазақ әріптерін толық қамтиды (Lexend қамтымайды) */
:root[data-dys="on"]{--display:"Andika","Onest",sans-serif;--body:"Andika","Onest",sans-serif;letter-spacing:.02em;word-spacing:.12em}
:root[data-calm="on"] *,:root[data-calm="on"] *::before,:root[data-calm="on"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

*{box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);line-height:var(--lh);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--c3) 16%,transparent),transparent 70%),radial-gradient(800px 500px at -10% 30%,color-mix(in srgb,var(--c1) 10%,transparent),transparent 70%)}
:root[data-contrast="high"] body::before{display:none}
a{color:var(--brand);text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.15;margin:.35em 0 .45em;max-width:24ch}
h2{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;margin:0 0 .6em}
h3{font-size:1rem;line-height:1.4;margin:.1em 0 .4em;font-weight:600;letter-spacing:-.01em}
p{max-width:72ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:8px;z-index:99;background:var(--brand);color:var(--on-brand);padding:8px 12px;border-radius:var(--r-s)}
:focus-visible{outline:2px solid var(--c1);outline-offset:3px}
.muted,.hint{color:var(--muted)}
.hint{font-size:.88rem}
kbd{border:1px solid var(--line-2);border-radius:5px;padding:0 6px;font-size:.85em;background:var(--glass-2)}
[hidden]{display:none!important}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Жоғарғы панель мен мәзір: css/app.css (қолданба қабығы) */
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.icon-btn:hover{background:var(--glass-2);border-color:var(--line-2)}

/* Қолжетімділік панелі */
.a11y-panel{position:fixed;right:16px;top:calc(var(--top-h) + 14px);z-index:35;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);border-radius:var(--r-l);padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);display:grid;gap:12px;animation:pop .25s var(--ease)}
.a11y-panel h2{display:flex;align-items:center;gap:8px;font-size:1.05rem;margin:0}
.a11y-panel label{margin:0;font-weight:500}
.sw{display:flex!important;align-items:center;gap:12px;cursor:pointer;font-size:.92rem}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw span{flex:none;width:40px;height:24px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line-2);position:relative;transition:background .2s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background .2s}
.sw input:checked+span{background:var(--grad);border-color:transparent}
.sw input:checked+span::after{transform:translateX(16px);background:#fff}
.sw input:focus-visible+span{outline:2px solid var(--c1);outline-offset:2px}
.reading-ruler{position:fixed;left:0;right:0;height:2.2em;pointer-events:none;z-index:25;background:color-mix(in srgb,var(--accent) 18%,transparent);border-block:2px solid var(--accent)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* ---------------- Негізгі бөлім ---------------- */
main{max-width:1240px;margin:0 auto;padding:28px 26px 72px;outline:none}
main:focus,main:focus-visible{outline:none}
.view{display:none}
.view.active{display:block;animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0}
.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}
.view-head{margin:8px 0 22px}
.badge-pill{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;color:var(--text);padding:6px 14px 6px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(8px)}
.badge-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent)}}
.how{display:flex;gap:12px;align-items:flex-start;background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--c1);border-radius:var(--r-m);padding:14px 18px;margin:6px 0 12px;max-width:880px;font-size:.95rem}
.how svg.i{margin-top:3px;color:var(--c1)}
.goals{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 18px;max-width:880px}
.goals summary{cursor:pointer;font-weight:600;font-size:.92rem}
.goals ul{margin:8px 0 4px;color:var(--muted);font-size:.92rem}

/* ---------------- Батырмалар ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--grad);color:#fff;font:inherit;font-weight:600;font-size:.92rem;letter-spacing:-.005em;
  padding:0 20px;min-height:44px;border-radius:999px;cursor:pointer;text-decoration:none;box-shadow:var(--glow);transition:transform .2s var(--ease),box-shadow .2s,filter .2s;overflow:hidden;isolation:isolate;white-space:nowrap}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:scale(.97)}
.btn.lg{min-height:54px;padding:0 28px;font-size:1rem}
.btn.sm{min-height:36px;padding:0 14px;font-size:.84rem}
.btn.sm svg.i{width:16px;height:16px}
.btn.ghost,.btn.glass{background:var(--glass);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);backdrop-filter:blur(10px)}
.btn.ghost:hover,.btn.glass:hover{background:var(--glass-2);filter:none}
.btn.danger{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 50%,transparent)}
.btn.wide{width:100%}
.btn.icon-only{padding:0;width:44px}
:root[data-contrast="high"] .btn{color:#000}
:root[data-contrast="high"] .btn.ghost,:root[data-contrast="high"] .btn.glass,:root[data-contrast="high"] .btn.danger{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.link-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--brand);font:inherit;font-weight:600;font-size:.86rem;padding:0;cursor:pointer}
.link-btn svg.i{width:15px;height:15px;transition:transform .2s}
.link-btn:hover svg.i{transform:translateX(3px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.row.end{justify-content:flex-end}.row.center{justify-content:center}

/* ---------------- Hero ---------------- */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;min-height:min(640px,calc(100vh - 120px));padding:56px 52px;border-radius:32px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0B1324,#090E1B 60%,#0E0A22);border:1px solid rgba(255,255,255,.08);color:#EEF2FF;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hero h1,.hero .lead{color:inherit}
.hero .lead{color:#AAB4CF}
.hero .badge-pill{color:#EEF2FF;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg i{position:absolute;width:48%;aspect-ratio:1;border-radius:50%;filter:blur(90px);opacity:.55;animation:blob 24s var(--ease) infinite alternate}
.hero-bg i:nth-child(1){background:#0891B2;left:-12%;top:-30%}
.hero-bg i:nth-child(2){background:#6D28D9;right:-10%;top:-10%;animation-duration:28s;animation-delay:-8s}
.hero-bg i:nth-child(3){background:#4338CA;left:30%;bottom:-60%;animation-duration:32s;animation-delay:-14s;opacity:.45}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 60% 50%,#000,transparent 75%)}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,10%) scale(1.15)}100%{transform:translate(-6%,4%) scale(.95)}}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(1.9rem,3.5vw,3.05rem);line-height:1.12;letter-spacing:-.035em;max-width:15ch;margin:22px 0 18px}
.hero h1 .grad{background-image:linear-gradient(110deg,#67E8F9,#A5B4FC 50%,#E9D5FF)}
.hero .lead{max-width:46ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .btn.glass{color:#EEF2FF;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hero-stats{list-style:none;display:flex;gap:30px;flex-wrap:wrap;padding:0;margin:40px 0 0}
.hero-stats li{display:grid;line-height:1.1}
.hero-stats b{font-family:var(--display);font-size:1.8rem;font-weight:600;background:linear-gradient(180deg,#fff,#A5B4FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-size:.8rem;color:#8D98B6;margin-top:6px}
.hero-3d{position:relative;z-index:1;align-self:stretch;min-height:420px}
#hero3d{position:absolute;top:-12%;left:-4%;width:118%;height:124%;opacity:0;transition:opacity 1.2s var(--ease);touch-action:pan-y}
.hero-3d.ready #hero3d{opacity:1}
.hero-3d.ready .orb{opacity:0}
.orb{position:absolute;inset:12%;display:grid;place-items:center;transition:opacity 1s}
.orb i{width:min(78%,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0,#A5F3FC 8%,#818CF8 38%,#6D28D9 70%,#1E1B4B 100%);box-shadow:0 0 80px rgba(129,140,248,.55),inset -20px -30px 60px rgba(30,27,75,.7);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}
.float-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:#EEF2FF;padding:9px 14px;border-radius:14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.3);animation:floaty 7s ease-in-out infinite}
.float-chip svg.i{width:16px;height:16px;stroke:url(#gradStroke)}
.float-chip.c1{top:10%;left:2%}
.float-chip.c2{top:44%;right:-2%;animation-delay:-2.5s}
.float-chip.c3{bottom:8%;left:16%;animation-delay:-5s}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* Жүгіртпе жол */
.marquee{margin:22px 0 6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marq 40s linear infinite}
.marquee span{font-size:.85rem;font-weight:500;color:var(--muted);padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------------- Блоктар ---------------- */
.block{margin-top:56px}
.block>h2,.block-head h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.3em 0 .9em}
.block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tile{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.tile svg.i{width:21px;height:21px}
.g1{background:linear-gradient(135deg,#22D3EE,#3B82F6)}.g2{background:linear-gradient(135deg,#818CF8,#6D28D9)}.g3{background:linear-gradient(135deg,#F472B6,#C026D3)}.g4{background:linear-gradient(135deg,#FBBF24,#F97316)}.g5{background:linear-gradient(135deg,#34D399,#0D9488)}.g6{background:linear-gradient(135deg,#60A5FA,#4F46E5)}
:root[data-contrast="high"] .tile{background:#000;border:2px solid #FFEF5C;color:#FFEF5C}

.progress-card{display:flex;align-items:center;gap:16px;padding:14px 20px 14px 14px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);position:relative}
.ring{width:84px;height:84px;transform:rotate(-90deg);flex:none}
.ring-bg{fill:none;stroke:var(--glass-2);stroke-width:10}
.ring-fg{fill:none;stroke:url(#gradStroke);stroke-width:10;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .8s var(--ease)}
.ring-label{position:absolute;left:14px;width:84px;height:84px;display:grid;place-content:center;text-align:center;line-height:1}
.ring-label strong{font-family:var(--display);font-size:1.5rem;font-weight:600}
.ring-label span{font-size:.7rem;color:var(--muted)}
.pc-text{display:grid;gap:2px}
.pc-text span{font-size:.82rem;color:var(--muted);max-width:26ch}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.task-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.task-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c2) 18%,transparent),transparent 70%);opacity:0;transition:opacity .3s}
.task-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.task-card:hover::before{opacity:1}
.tc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pts{font-size:.78rem;font-weight:600;color:var(--muted);padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.task-card .num{font-size:.78rem;font-weight:600;color:var(--brand);letter-spacing:.04em;text-transform:uppercase}
.task-card h3{font-size:1.02rem;line-height:1.4;margin:0}
.task-card p{color:var(--muted);font-size:.86rem;margin:2px 0 16px}
.bar{height:6px;background:var(--glass-2);border-radius:9px;overflow:hidden;margin-top:auto}
.bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:9px;transition:width .8s var(--ease)}

.quick-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:qs}
.quick-steps li{counter-increment:qs;position:relative;display:grid;gap:8px;align-content:start;padding:22px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line)}
.quick-steps li::after{content:counter(qs,decimal-leading-zero);position:absolute;top:18px;right:20px;font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--muted);opacity:.5}
.quick-steps .tile{margin-bottom:6px}
.quick-steps span:not(.tile){color:var(--muted);font-size:.88rem;line-height:1.55}

.studio-banner{position:relative;display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;margin-top:56px;padding:18px;border-radius:28px;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 14%,var(--surface)),var(--surface) 60%);border:1px solid var(--line-2);box-shadow:var(--shadow);transition:transform .35s var(--ease)}
.studio-banner:hover{transform:translateY(-3px)}
.studio-banner h2{font-size:clamp(1.25rem,2.4vw,1.8rem);margin:.35em 0 .4em}
.studio-banner .muted{margin:0 0 18px}
.sb-art .pv{border-radius:20px;aspect-ratio:4/3}

.udl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 10px}
.udl-card{display:grid;gap:8px;padding:22px;border-radius:var(--r-l);background:var(--glass);border:1px solid var(--line)}
.udl-card .tile{margin-bottom:6px}
.udl-card span:not(.tile){color:var(--muted);font-size:.9rem}

/* Пайда болу */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
:root[data-calm="on"] .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------------- Формалар, чиптер ---------------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--text);background:var(--glass);border:1px solid var(--line-2);border-radius:12px;padding:10px 14px;width:100%;min-height:46px;transition:border-color .2s,box-shadow .2s,background .2s}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA6C2' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select option{background:var(--surface);color:var(--text)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line-2))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);background:var(--glass-2)}
::placeholder{color:var(--muted);opacity:.75}
textarea{resize:vertical;line-height:1.55}
input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--c2);padding:0}
input[type=range]{padding:0;border:0;background:none;min-height:0;accent-color:var(--c2);box-shadow:none}
label{display:grid;gap:6px;font-weight:600;font-size:.88rem;margin-bottom:12px}
.search{position:relative;flex:1 1 280px;margin:0}
.search svg.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{padding-left:42px}
.toolbar select{width:auto;min-width:180px}
.chips-label{font-weight:600;font-size:.88rem;margin:14px 0 8px}
.chips-label small{font-weight:400;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--glass);color:var(--text);padding:0 14px;min-height:38px;border-radius:999px;font:inherit;font-size:.84rem;font-weight:500;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap}
.chip:hover{border-color:var(--brand)}
.chip.on{background:color-mix(in srgb,var(--c2) 22%,transparent);border-color:color-mix(in srgb,var(--c2) 70%,transparent);color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 14%,transparent)}
.chip.on::before{content:"";width:14px;height:14px;background:var(--grad);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-contrast="high"] .chip.on{background:#FFEF5C;color:#000}
.tag{display:inline-flex;align-items:center;background:var(--chip);color:var(--text);border-radius:999px;padding:2px 10px;font-size:.74rem;margin:2px 4px 2px 0;font-weight:500;border:1px solid color-mix(in srgb,var(--brand) 18%,transparent)}
.counter{color:var(--muted);font-size:.88rem;margin:16px 0 12px}

/* ---------------- Карточкалар ---------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.ex,.idea{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .3s,opacity .8s var(--ease)}
.ex:hover{transform:translateY(-3px);border-color:var(--line-2)}
.ex.done{border-color:color-mix(in srgb,var(--ok) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent),var(--shadow)}
.ex-top{display:flex;gap:14px;align-items:flex-start}
.ex-top h3{margin:0 0 4px;font-size:1.02rem}
.ex dl{margin:0;font-size:.88rem;display:grid;gap:2px}
.ex dt{font-weight:600;color:var(--brand);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-top:8px}
.ex dd{margin:0;color:var(--text);opacity:.92}
.ex .actions{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
.ex .pick{display:flex;gap:8px;align-items:center;font-weight:500;margin:0 0 0 auto;font-size:.84rem;color:var(--muted);cursor:pointer}
.src{font-size:.8rem;color:var(--muted)}
.ok{display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-weight:600;font-size:.84rem}

.panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;margin-top:22px;box-shadow:var(--shadow)}
.panel>h2{display:flex;align-items:center;gap:10px}
.panel>h2 svg.i{stroke:url(#gradStroke);width:22px;height:22px}
.seg{display:inline-flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:5px;margin:10px 0;flex-wrap:wrap}
.seg button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--muted);font:inherit;font-size:.88rem;font-weight:500;padding:0 16px;min-height:40px;border-radius:12px;cursor:pointer;transition:all .2s}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--grad);color:#fff;font-weight:600;box-shadow:var(--glow)}
:root[data-contrast="high"] .seg button.active{color:#000}

/* Кесте */
.table-wrap{overflow-x:auto;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
th{background:var(--surface-2);position:sticky;top:0;white-space:nowrap;font-weight:600;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
th[data-sort]{cursor:pointer}
tr:last-child td{border-bottom:0}
td[contenteditable="true"]{transition:background .15s}
td[contenteditable="true"]:hover{background:var(--glass-2);cursor:text}
td[contenteditable="true"]:focus{background:var(--chip);outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
td.custom-row{box-shadow:inset 3px 0 0 var(--accent)}
.grp{--gc:var(--brand);display:inline-block;font-weight:600;font-size:.74rem;padding:3px 10px;border-radius:999px;white-space:nowrap;color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent);border:1px solid color-mix(in srgb,var(--gc) 35%,transparent)}
.grp-game{--gc:var(--g-game)}.grp-ict{--gc:var(--g-ict)}.grp-coop{--gc:var(--g-coop)}.grp-adapt{--gc:var(--g-adapt)}
#matrix td,#matrix th{text-align:center}
#matrix td:first-child,#matrix th:first-child{text-align:left}
#matrix td.cell{cursor:pointer;font-size:1.1rem;color:var(--ok)}
#matrix td.cell:hover{background:var(--glass-2)}
.map-wrap{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);overflow-x:auto}
#mindmap{width:100%;min-width:760px;height:620px;display:block}
#mindmap.vertical{min-width:0;height:auto}
#mindmap text{fill:var(--text);font-family:var(--body)}
#mindmap .node{cursor:pointer}
#mindmap .node rect{transition:stroke-width .15s}
#mindmap .node:hover rect{stroke-width:3.5}

/* Ашық микрофон */
.mic-layout{display:grid;grid-template-columns:340px 1fr;gap:20px}
.mic-layout .panel{margin-top:0}
.timer-ring{display:grid;place-items:center;margin:6px auto 4px;width:200px;height:200px;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c1));padding:3px}
.timer{width:100%;height:100%;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--display);font-size:2.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.timer.low{color:var(--danger)}
.speaker{text-align:center;font-family:var(--display);font-size:1.25rem;font-weight:600;min-height:1.6em;margin:12px 0 0}
.speaker:not(:empty){background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#ideaForm .chips{margin-bottom:14px}
.idea p{margin:0;font-size:.9rem}
.idea h3{margin:4px 0 0}
.idea-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.idea .sliders{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.idea .sliders label{margin:0;font-weight:500;font-size:.8rem;color:var(--muted)}
.idea .vote{display:flex;gap:8px}
.idea .comments{font-size:.85rem;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.idea .comments>div{padding:6px 10px;border-radius:10px;background:var(--glass-2)}
.idea .cform{display:flex;gap:6px}
.idea .cform input{min-height:38px;padding:6px 12px;font-size:.85rem}
.score-badge{margin-left:auto;font-family:var(--display);font-weight:600;font-size:1.1rem;padding:2px 12px;border-radius:999px;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
#ideaChart{width:100%;max-width:640px;display:block;margin:0 auto}
#ideaChart text{fill:var(--text);font-family:var(--body)}

/* ЖИ-студия */
.setup-title{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1rem;margin:26px 0 14px}
.studio-setup .setup-title{margin-top:0}
.step-n{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:.85rem}
.setup-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:12px}
.setup-grid label{margin:0}
#vCats{margin-bottom:18px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-bottom:16px}
.vcard{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .35s var(--ease),border-color .3s,opacity .8s var(--ease)}
.vcard:hover{transform:translateY(-4px);border-color:var(--line-2)}
.vcard .pv{cursor:pointer;margin:8px 8px 0;border-radius:18px}
.vbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.vbody h3{margin:0}
.vbody p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
.vcat{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.06em}
.vcat svg.i{width:14px;height:14px}
.vact{display:flex;gap:8px;margin-top:auto;padding-top:12px}
.vact .btn{flex:1}
.prompt-grid{display:grid;grid-template-columns:1.2fr .6fr 1.2fr;gap:12px}
.prompt-grid label{margin:0}
.prompt-out{white-space:pre-wrap;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;font-family:var(--body);font-size:.92rem;line-height:1.6;margin:0;max-width:none;color:var(--text)}
.warn{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:12px 16px;border-radius:var(--r-m);font-size:.9rem;max-width:none;margin-top:16px}
.warn svg.i{color:var(--accent);margin-top:2px}
.formula{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:f}
.formula li{counter-increment:f;background:var(--glass-2);border-radius:var(--r-m);padding:16px;display:grid;gap:6px;border:1px solid var(--line);position:relative;overflow:hidden}
.formula li::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.formula li b::before{content:counter(f,decimal-leading-zero) "  ";color:var(--brand);font-family:var(--display)}
.formula li span{color:var(--muted);font-size:.85rem;line-height:1.45}
.tips{padding-left:1.1em;margin:0}.tips li{margin-bottom:10px}

#vDialog{max-width:780px;width:min(780px,calc(100vw - 32px))}
.vd-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.vd-head h2{margin:0}
#vdOut{max-height:52vh;overflow:auto;font-size:.86rem}

/* Бағалау, дереккөздер */
.rub{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;margin-top:16px;box-shadow:var(--shadow)}
.rub-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.rub-head h2{margin:0}
.rub-head strong{font-family:var(--display);font-size:1.3rem;font-weight:600}
.crit{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border-top:1px solid var(--line);padding:12px 0;font-size:.92rem}
.crit .auto{font-size:.78rem;color:var(--muted)}
.crit select{width:auto;min-width:90px}
.rub .btn{margin-top:8px}
.total{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.total-n{display:flex;align-items:baseline;gap:6px}
.total strong{font-family:var(--display);font-size:3rem;font-weight:600;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.file{cursor:pointer;margin:0;display:inline-flex;font-size:.92rem}
.src-group{margin-bottom:28px}
.src-group h2{font-size:1.1rem}
.src-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.src-item{display:flex;gap:14px;align-items:flex-start;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .3s var(--ease)}
.src-item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.src-item .tile{width:38px;height:38px;border-radius:12px}
.src-item .tile svg.i{width:18px;height:18px}
.src-item b{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.src-item span{color:var(--muted);font-size:.82rem}

dialog{border:1px solid var(--line-2);border-radius:var(--r-l);padding:26px;width:min(640px,calc(100vw - 32px));background:var(--surface);color:var(--text);box-shadow:0 40px 100px rgba(0,0,0,.5)}
dialog[open]{animation:pop .3s var(--ease)}
dialog::backdrop{background:rgba(3,6,14,.65);backdrop-filter:blur(6px)}
dialog h2{margin-top:0}
.compare{overflow-x:auto;margin-top:14px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;visibility:hidden;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:500;font-size:.9rem;transition:all .3s var(--ease);z-index:60;max-width:calc(100vw - 32px);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.toast.show{transform:translateX(-50%);opacity:1;visibility:visible}
.foot{border-top:1px solid var(--line);margin-top:20px}
.foot-inner{max-width:1240px;margin:0 auto;padding:24px 26px 34px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}
.foot p{margin:0;max-width:none}
.brand-mini{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;color:var(--text)}

/* ---------- Превью мини-сахналар (ЖИ-студия) ---------- */
.pv{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0F1A33}
.pv i,.pv b,.pv s{position:absolute;display:block}
.pv-aurora{background:#0A1024}
.pv-aurora i{width:70%;aspect-ratio:1;border-radius:50%;filter:blur(28px);animation:blob 9s ease-in-out infinite alternate}
.pv-aurora i:nth-child(1){background:#22D3EE;left:-15%;top:-25%}
.pv-aurora i:nth-child(2){background:#8B5CF6;right:-20%;top:5%;animation-delay:-3s}
.pv-aurora i:nth-child(3){background:#34D399;left:20%;bottom:-50%;animation-delay:-6s}
.pv-aurora::after{content:"";position:absolute;inset:26% 22%;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pv-particles{background:radial-gradient(circle at 50% 40%,#1E2A5A,#070B18)}
.pv-particles i{width:4px;height:4px;border-radius:50%;background:#fff;animation:float 6s ease-in-out infinite alternate;box-shadow:0 0 8px #fff}
.pv-particles i:nth-child(3n){background:#FBBF24;width:3px;height:3px;box-shadow:0 0 8px #FBBF24}
.pv-particles i:nth-child(1){left:10%;top:20%}.pv-particles i:nth-child(2){left:22%;top:60%;animation-delay:-1s}.pv-particles i:nth-child(3){left:35%;top:30%;animation-delay:-2s}.pv-particles i:nth-child(4){left:48%;top:75%;animation-delay:-3s}.pv-particles i:nth-child(5){left:60%;top:18%;animation-delay:-4s}.pv-particles i:nth-child(6){left:72%;top:52%;animation-delay:-1.5s}.pv-particles i:nth-child(7){left:85%;top:28%;animation-delay:-2.5s}.pv-particles i:nth-child(8){left:90%;top:80%;animation-delay:-3.5s}.pv-particles i:nth-child(9){left:15%;top:85%;animation-delay:-.5s}.pv-particles i:nth-child(10){left:55%;top:45%;animation-delay:-4.5s}.pv-particles i:nth-child(11){left:30%;top:10%}.pv-particles i:nth-child(12){left:78%;top:8%;animation-delay:-2s}.pv-particles i:nth-child(13){left:42%;top:90%;animation-delay:-5s}.pv-particles i:nth-child(14){left:66%;top:88%;animation-delay:-1s}
@keyframes float{to{transform:translate(10px,-14px)}}
.pv-hero{background:linear-gradient(135deg,#0B1324,#312E81)}
.pv-hero i{left:10%;height:9px;border-radius:5px;background:#fff;animation:rise 3.2s var(--ease) infinite}
.pv-hero i:nth-child(1){top:28%;width:42%}.pv-hero i:nth-child(2){top:42%;width:30%;animation-delay:.15s;opacity:.7}
.pv-hero i:nth-child(3){top:62%;width:22%;height:16px;border-radius:9px;background:linear-gradient(90deg,#22D3EE,#A855F7);animation-delay:.3s}
.pv-hero b{right:10%;top:22%;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,#A5B4FC 30%,#7C3AED 75%);box-shadow:0 0 30px rgba(129,140,248,.6);animation:breathe 4s ease-in-out infinite}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
.pv-scroll{background:#111A33}
.pv-scroll::before{content:"";position:absolute;left:12%;top:10%;bottom:10%;width:3px;border-radius:3px;background:linear-gradient(#22D3EE 0 50%,rgba(255,255,255,.12) 0);background-size:100% 200%;animation:fill 4.5s linear infinite}
.pv-scroll i{left:20%;right:12%;height:22%;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);animation:slideup 4.5s var(--ease) infinite}
.pv-scroll i:nth-child(1){top:10%}.pv-scroll i:nth-child(2){top:39%;animation-delay:.5s}.pv-scroll i:nth-child(3){top:68%;animation-delay:1s}
@keyframes slideup{0%{opacity:0;transform:translateY(16px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fill{from{background-position:0 100%}to{background-position:0 0}}
.pv-drag{background:linear-gradient(135deg,#1E1B4B,#0F172A)}
.pv-drag i{width:26%;height:30%;border-radius:12px;top:35%;border:2px dashed rgba(165,180,252,.6)}
.pv-drag i:nth-child(1){left:12%;border:0;background:rgba(255,255,255,.08)}
.pv-drag i:nth-child(2){right:12%}
.pv-drag b{width:26%;height:30%;top:35%;left:12%;border-radius:12px;background:linear-gradient(135deg,#22D3EE,#6366F1);box-shadow:0 8px 20px rgba(34,211,238,.35);animation:drag 3.4s var(--ease) infinite}
@keyframes drag{0%,15%{transform:none}55%,85%{transform:translateX(192%);box-shadow:0 0 0 3px #34D399}100%{transform:none}}
.pv-flip{background:linear-gradient(135deg,#4C1D95,#0E7490);perspective:500px}
.pv-flip i{left:30%;top:16%;width:40%;height:68%;border-radius:14px;background:#fff;transform-style:preserve-3d;animation:flip 4s var(--ease) infinite}
.pv-flip s{inset:0;border-radius:14px;background:linear-gradient(135deg,#FBBF24,#F97316);transform:rotateY(180deg);backface-visibility:hidden}
@keyframes flip{0%,35%{transform:none}50%,85%{transform:rotateY(180deg)}100%{transform:none}}
.pv-cube{background:radial-gradient(circle at 50% 45%,#312E81,#070B18 75%);perspective:420px}
.pv-cube i{left:calc(50% - 32px);top:calc(50% - 32px);width:64px;height:64px;transform-style:preserve-3d;animation:spin 12s linear infinite}
.pv-cube s{inset:0;border:1.5px solid rgba(165,243,252,.8);background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.22));box-shadow:0 0 20px rgba(129,140,248,.35) inset}
.pv-cube s:nth-child(1){transform:translateZ(32px)}.pv-cube s:nth-child(2){transform:rotateY(180deg) translateZ(32px)}.pv-cube s:nth-child(3){transform:rotateY(90deg) translateZ(32px)}.pv-cube s:nth-child(4){transform:rotateY(-90deg) translateZ(32px)}.pv-cube s:nth-child(5){transform:rotateX(90deg) translateZ(32px)}.pv-cube s:nth-child(6){transform:rotateX(-90deg) translateZ(32px)}
.sb-art .pv-cube i{width:110px;height:110px;left:calc(50% - 55px);top:calc(50% - 55px)}
.sb-art .pv-cube s:nth-child(1){transform:translateZ(55px)}.sb-art .pv-cube s:nth-child(2){transform:rotateY(180deg) translateZ(55px)}.sb-art .pv-cube s:nth-child(3){transform:rotateY(90deg) translateZ(55px)}.sb-art .pv-cube s:nth-child(4){transform:rotateY(-90deg) translateZ(55px)}.sb-art .pv-cube s:nth-child(5){transform:rotateX(90deg) translateZ(55px)}.sb-art .pv-cube s:nth-child(6){transform:rotateX(-90deg) translateZ(55px)}
@keyframes spin{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.pv-bars{background:#0F1A33}
.pv-bars i{bottom:14%;width:10%;border-radius:6px 6px 0 0;transform-origin:bottom;animation:grow 3.6s var(--ease) infinite}
.pv-bars i:nth-child(1){left:14%;height:35%;background:#0072B2}.pv-bars i:nth-child(2){left:30%;height:55%;background:#E69F00;animation-delay:.1s}.pv-bars i:nth-child(3){left:46%;height:42%;background:#009E73;animation-delay:.2s}.pv-bars i:nth-child(4){left:62%;height:68%;background:#CC79A7;animation-delay:.3s}.pv-bars i:nth-child(5){left:78%;height:50%;background:#56B4E9;animation-delay:.4s}
@keyframes grow{0%{transform:scaleY(0)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.pv-ring{background:#0F1A33;display:grid;place-items:center}
.pv-ring svg{width:46%;height:auto;transform:rotate(-90deg)}
.pv-ring circle{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7}
.pv-ring .p{stroke:url(#gradStroke);stroke-linecap:round;stroke-dasharray:139;stroke-dashoffset:139;animation:draw 3.6s var(--ease) infinite}
@keyframes draw{40%,85%{stroke-dashoffset:35}100%{stroke-dashoffset:139}}
.pv-steps{background:linear-gradient(135deg,#0F172A,#1E1B4B)}
.pv-steps i{top:32%;width:17%;height:36%;border-radius:12px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);animation:done 5s steps(1) infinite}
.pv-steps i:nth-child(1){left:6%}.pv-steps i:nth-child(2){left:29%;animation-delay:1.2s}.pv-steps i:nth-child(3){left:52%;animation-delay:2.4s}.pv-steps i:nth-child(4){left:75%;animation-delay:3.6s}
@keyframes done{0%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}20%{background:rgba(52,211,153,.35);border-color:#34D399}}
.pv-book{background:linear-gradient(135deg,#831843,#312E81)}
.pv-book i{top:14%;width:36%;height:72%;border-radius:10px;background:#FDF4FF;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.pv-book i:nth-child(1){left:13%}
.pv-book i:nth-child(2){left:51%;transform-origin:left;animation:page 4s var(--ease) infinite}
@keyframes page{0%,40%{transform:none}70%,100%{transform:perspective(400px) rotateY(-160deg)}}
.pv-grid{background:#0F1A33;display:grid;grid-template-columns:repeat(4,1fr);gap:8%;padding:9% 10%}
.pv-grid i{position:static;border-radius:10px;background:#FDE68A;animation:tap 4s infinite}
.pv-grid i:nth-child(2n){background:#A7F3D0}.pv-grid i:nth-child(3n){background:#FDBA74}.pv-grid i:nth-child(4n){background:#C4B5FD}
.pv-grid i:nth-child(3){animation-delay:1s}.pv-grid i:nth-child(6){animation-delay:2s}
@keyframes tap{0%,10%,100%{transform:none}5%{transform:scale(.86)}}
.pv-icons{background:#0F1A33;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;padding:0 7%;gap:6%}
.pv-icons i{position:static;width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);color:#fff}
.pv-icons i svg.i{width:46%;height:46%;stroke:url(#gradStroke)}
.pv-video{background:linear-gradient(120deg,#0E7490,#6D28D9,#DB2777);background-size:200% 200%;animation:pan 8s ease infinite alternate;display:grid;place-items:center}
.pv-video i{position:static;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:#1E1B4B;display:grid;place-items:center;animation:breathe 2.4s ease-in-out infinite;box-shadow:0 0 0 10px rgba(255,255,255,.15)}
.pv-video i svg.i{width:22px;height:22px;fill:#1E1B4B;stroke:none;margin-left:3px}
@keyframes pan{to{background-position:100% 100%}}

/* ---------------- Ноутбук (кіші) ---------------- */
@media (max-width:1120px){
  .cards3,.udl-grid{grid-template-columns:1fr 1fr}
  .quick-steps,.formula{grid-template-columns:1fr 1fr}
  .studio-banner{grid-template-columns:220px 1fr}
}
@media (max-width:960px){
  .mic-layout{grid-template-columns:1fr}
  .setup-grid,.prompt-grid{grid-template-columns:1fr 1fr}
  .setup-grid label:first-child,.prompt-grid label:last-child{grid-column:1/-1}
}

/* ---------------- Телефон ---------------- */
@media (max-width:720px){
  .icon-btn{width:38px;height:38px}
  h1{font-size:clamp(1.5rem,7vw,2rem)}
  input,select,textarea{font-size:16px}
  .block{margin-top:40px}
  .block-head{align-items:stretch}
  .progress-card{width:100%}
  .cards3,.udl-grid,.quick-steps,.formula,.setup-grid,.prompt-grid,.two{grid-template-columns:1fr}
  .quick-steps li{grid-template-columns:auto 1fr;column-gap:14px;padding:16px}
  .quick-steps .tile{grid-row:span 2;margin:0}
  .studio-banner{grid-template-columns:1fr;padding:12px;border-radius:24px;margin-top:40px}
  .sb-copy{padding:4px 8px 10px}
  .toolbar{gap:8px}
  .toolbar .search{flex-basis:100%}
  .toolbar select,.toolbar .btn{flex:1 1 auto;min-width:0}
  .chips:not(.wrap){flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-14px;padding-inline:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:40px}
  .seg{display:flex;width:100%}
  .seg button{flex:1;justify-content:center;padding:0 6px;font-size:.82rem;gap:6px}
  .seg button svg.i{width:16px;height:16px}
  .grid,.vgrid,.src-list{grid-template-columns:1fr}
  .panel{padding:18px;border-radius:20px}
  .ex,.idea{padding:18px}
  .ex .pick{margin-left:0}
  .timer-ring{width:170px;height:170px}
  .timer{font-size:2.2rem}
  .idea .sliders{grid-template-columns:1fr}
  .crit{grid-template-columns:1fr}
  .crit select{width:100%}
  .total strong{font-size:2.4rem}
  .total .row .btn,.total .row label{flex:1 1 45%}

  #techTable thead{display:none}
  #techTable,#techTable tbody,#techTable tr,#techTable td{display:block;width:100%}
  #techTable tr{border:1px solid var(--line);border-radius:20px;margin:0 0 12px;padding:8px 4px;background:var(--glass);box-shadow:var(--shadow)}
  #techTable td{border:0;padding:6px 14px}
  #techTable td[data-l]::before{content:attr(data-l);display:block;font-size:.7rem;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.05em}
  #techTable td[data-f="name"]{font-size:1.05rem}
  #techTable td[data-f="comment"]{background:var(--glass-2);border-radius:12px;margin:6px 10px 8px;width:auto;min-height:46px}
  #techTable td[data-f="comment"]:empty::after{content:attr(data-ph);color:var(--muted);font-style:italic}
  #t2table .table-wrap{background:none;border:0;overflow:visible}
  #matrix th:first-child,#matrix td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;min-width:140px}

  dialog,#vDialog{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:26px 26px 0 0;max-height:92vh;overflow-y:auto;padding:22px 16px calc(22px + env(safe-area-inset-bottom))}
  dialog[open]{animation:sheet .4s var(--ease)}
  #vdOut{max-height:46vh}
}
@keyframes sheet{from{transform:translateY(60px);opacity:0}}

@media print{
  .rail,.appbar,.tabbar,.sheet,.a11y-panel,.toolbar,.seg,.foot,.btn,.hero-actions,.hero-3d,.studio-banner{display:none!important}
  :root{--bg:#fff;--text:#000;--glass:#fff;--line:#ccc;--muted:#333}
  body{background:#fff;color:#000;padding:0}body::before{display:none}
  main{margin:0;padding:0}
  .view{display:none!important}.view.active{display:block!important}
  .hero{background:#fff;color:#000;box-shadow:none;min-height:0;padding:0}
}