/* Edufayl sayti: bosh sahifa va ilova uchun umumiy uslub */
:root{
  --bg:#F6F7FB; --card:#fff; --ink:#0C1226; --ink2:#3A4262; --mute:#6B7399; --line:#E3E6F0;
  --brand:#2457FF; --brand-d:#1B45D6; --brand-soft:#E8EDFF; --brand-line:#C9D5FF;
  --ok:#0F9D6B; --ok-soft:#E3F5EC; --warn:#8A5A00; --warn-soft:#FFF1D6; --bad:#C0392B; --bad-soft:#FDECEA;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}

/* sarlavha */
.top{position:sticky;top:0;z-index:20;background:rgba(246,247,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px}
.logo{flex:0 0 auto}
.logo img{display:block;width:54px;height:54px;border-radius:50%}
.nav{display:flex;gap:2px}
.nav a{padding:8px 14px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink2)}
.nav a:hover,.nav a.on{background:var(--brand-soft);color:var(--brand)}
.actions{display:flex;align-items:center;gap:8px}
.bal{padding:8px 12px;border-radius:10px;background:var(--ok-soft);color:#0B7A53;font-weight:700;font-size:14px;white-space:nowrap}

/* tugmalar */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;font-size:16px;border:0;white-space:nowrap}
.btn:hover{background:var(--brand-d)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{padding:10px 14px;font-size:14px;border-radius:10px}
.btn.out{background:#fff;color:var(--brand);border:1.5px solid var(--brand-line)}
.btn.out:hover{background:#EEF2FF}
.btn.ghost{background:transparent;color:var(--ink2);border:1.5px solid var(--line)}
.btn.block{width:100%}
.short{display:none}
.link{background:none;border:0;color:var(--brand);font-weight:700;padding:0}

/* kartochka va chiplar */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px;color:var(--ink2)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.soon{opacity:.7}
.chip small{font-weight:600;color:var(--mute);font-size:11px}
button.chip:hover:not(.on){border-color:var(--brand-line);color:var(--brand)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.ok{background:var(--ok-soft);color:#0B7A53}
.pill.wait{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.soon{background:#EEF0F7;color:var(--mute)}

/* maydonlar */
label.lab,.lab{display:block;font-size:13px;font-weight:700;color:#4A5272;margin:0 0 8px}
.fld{width:100%;border:1.5px solid #D5DBEE;border-radius:12px;padding:12px 14px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.fld:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
textarea.fld{resize:vertical;min-height:84px}
.hint{font-size:13px;color:var(--mute);margin-top:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* bosh sahifa: «daftar» uslubi — qog'oz fon, katak chiziqlar, sariq marker */
.home{--paper:#F6F3EB;--paper-line:#E6E0D2;--marker:#FFD84A;--pptx:#C8462B;background:var(--paper)}
.home .top{background:rgba(246,243,235,.88);border-bottom-color:var(--paper-line)}
.mark{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;letter-spacing:-.01em;color:var(--brand);
  background:linear-gradient(transparent 60%,var(--marker) 60%,var(--marker) 90%,transparent 90%);padding:0 .06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero{position:relative;padding:60px 0 24px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(12,18,38,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,38,.055) 1px,transparent 1px);
  background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 40%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 72% 40%,#000 25%,transparent 75%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy fan" "form fan";column-gap:56px;align-items:center}
.hero-copy{grid-area:copy;align-self:end}
.hero h1{margin:0;font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.hero h1>span{display:block}
.hero-copy p{margin:18px 0 0;max-width:500px;font-size:17px;color:#4A5272}

/* slaydlar yelpig'ichi */
.fan{grid-area:fan;position:relative;aspect-ratio:16/12.5;width:100%}
.fs{position:absolute;width:76%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#1d1640;
  box-shadow:0 1px 0 1px rgba(12,18,38,.05),0 30px 60px -22px rgba(12,18,38,.55);transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:fanIn .8s cubic-bezier(.2,.7,.2,1) both}
.fs.s3{top:0;right:0;transform:rotate(6deg);animation-delay:.05s}
.fs.s2{top:22%;left:0;transform:rotate(-5deg);animation-delay:.15s}
.fs.s1{bottom:2%;left:13%;width:82%;transform:rotate(-1deg);animation-delay:.25s}
.fan:hover .s3{transform:rotate(9deg) translate(4%,-3%)}
.fan:hover .s2{transform:rotate(-8deg) translate(-4%,-2%)}
.fan:hover .s1{transform:rotate(0) translateY(-2%)}
@keyframes fanIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.sticker{position:absolute;z-index:3;left:2%;top:4%;background:var(--marker);color:var(--ink);font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;transform:rotate(-7deg);box-shadow:0 8px 20px -8px rgba(12,18,38,.45)}
.filetag{position:absolute;z-index:3;right:0;bottom:0;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 14px 8px 8px;font-weight:700;font-size:13px;color:var(--ink2);box-shadow:0 14px 30px -12px rgba(12,18,38,.4)}
.filetag i{font-style:normal;background:var(--pptx);color:#fff;font-weight:800;font-size:11px;letter-spacing:.04em;padding:7px 8px;border-radius:8px}
/* tanishtiruv videosi (kirgan foydalanuvchi uchun «Haqiqiy natija» o'rnida) */
.intro{grid-area:fan;position:relative;align-self:center;padding:18px 0 0}
.intro-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0C1226;box-shadow:0 1px 0 1px rgba(12,18,38,.05),0 30px 60px -22px rgba(12,18,38,.55);animation:fanIn .8s cubic-bezier(.2,.7,.2,1) both}
.intro-frame video{display:block;width:100%;height:100%;object-fit:cover}
.intro-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:14px;padding:22px;border:0;cursor:pointer;color:#fff;text-align:left;font:inherit;background:linear-gradient(180deg,rgba(12,18,38,0) 35%,rgba(12,18,38,.78))}
.ip-ico{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--marker);color:var(--ink);box-shadow:0 12px 28px -8px rgba(0,0,0,.55);transition:transform .25s}
.ip-ico svg{margin-left:4px}
.intro-play:hover .ip-ico{transform:scale(1.08)}
.ip-t b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
.ip-t small{display:block;margin-top:3px;font-size:13.5px;color:#C9D0EA}
.intro.playing .intro-play,.intro.playing .sticker{display:none}
.intro .sticker{top:0}
.hero.studio-on .intro{display:none}
.intro-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(8,12,26,.92);padding:12px}
.intro-modal video{max-width:100%;max-height:100%;aspect-ratio:9/16;border-radius:14px;background:#000}
.intro-x{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}

/* mavzu oynasi */
.promptbox{grid-area:form;align-self:start;margin-top:28px;padding:14px;border-color:var(--paper-line);border-radius:22px;box-shadow:0 24px 50px -24px rgba(12,18,38,.22)}
.kinds{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.kinds .chip{padding:8px 13px;font-size:13.5px}
.promptbox .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:12px;border:1.5px solid var(--ink);border-radius:16px;padding:12px 12px 12px 16px;background:#fff;transition:box-shadow .2s}
.promptbox .inner:focus-within{box-shadow:0 0 0 4px var(--marker)}
.promptbox .lab{grid-column:1/-1;margin:0 0 2px;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--mute)}
.promptbox textarea{width:100%;border:0;outline:0;resize:none;font:inherit;font-size:17px;font-weight:600;line-height:1.4;min-height:50px;background:transparent;color:var(--ink);padding:0}
.btn.go{padding:12px 18px;border-radius:12px}
.promptbox .hint{margin:10px 4px 0;font-size:12.5px}

/* bo'limlar */
.sect{padding:72px 0 0}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:26px}
h2.sec{margin:0;font-size:32px;letter-spacing:-.03em;font-weight:800}
.home h2.sec::after{content:"";display:block;width:44px;height:6px;margin-top:10px;border-radius:3px;background:var(--marker);transform:rotate(-2deg)}
.sub{margin:10px 0 0;font-size:16px;color:#4A5272;max-width:560px}
.sect-head .sub{margin:0}

/* xizmatlar */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svc{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--paper-line);border-radius:16px;transition:transform .2s,box-shadow .2s,border-color .2s}
.svc:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 14px 30px -18px rgba(12,18,38,.35)}
.svc .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.svc b{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc .d{color:var(--mute);font-size:13.5px;line-height:1.4}
.svc .pill{padding:2px 8px;font-size:11px}
.ico{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.ico.c1{background:#E8EDFF;color:#2457FF}.ico.c2{background:#FFF0D6;color:#B86E00}.ico.c3{background:#E2F5EC;color:#0F8A5F}
.ico.c4{background:#FCE7EF;color:#C2306B}.ico.c5{background:#EEE7FF;color:#6A3FD6}.ico.c6{background:#E0F3F8;color:#0B7E99}
.ico.c7{background:#FFF6CC;color:#8A6A00}.ico.c8{background:#F1EDE4;color:#6B5B3E}.ico.c9{background:#FDE8E2;color:#C8462B}

/* uslublar */
.styles-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.sty{margin:0}
.sty img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;box-shadow:0 0 0 1px rgba(12,18,38,.08),0 12px 26px -16px rgba(12,18,38,.45);transition:transform .25s}
.sty:hover img{transform:translateY(-4px) rotate(-1deg)}
.sty figcaption{margin-top:10px;display:flex;flex-direction:column}
.sty b{font-size:15px}
.sty span{font-size:12.5px;color:var(--mute)}

/* uch qadam */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.flow li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:20px 22px}
.flow .no{flex:0 0 auto;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:44px;line-height:.9;color:var(--brand);
  background:linear-gradient(transparent 55%,var(--marker) 55%,var(--marker) 88%,transparent 88%);padding:0 4px}
.flow b{display:block;font-size:17px}
.flow p{margin:6px 0 0;color:#4A5272;font-size:14.5px;line-height:1.5}

/* tayyor mavzular */
.band{position:relative;overflow:hidden;display:flex;gap:32px;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:28px;padding:40px}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;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:28px 28px}
.band>*{position:relative}
.band-copy{max-width:520px}
.band h2.sec{color:#fff}
.band p{margin:14px 0 22px;color:#B7BFDD;font-size:16px}
.btn.light{background:var(--marker);color:var(--ink)}
.btn.light:hover{background:#FFE47A}
.peek{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:440px;width:100%}
.pk{display:block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;color:#fff;transition:background .2s}
.pk:hover{background:rgba(255,255,255,.12)}
.pk-img{aspect-ratio:16/9;border-radius:8px;background:#1b2440 center/cover no-repeat;margin-bottom:8px}
.pk-t{font-weight:700;font-size:14px;line-height:1.3;max-height:2.6em;overflow:hidden}
.pk-s{color:#B7BFDD;font-size:12px;margin-top:4px}
.shop-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.shop-kinds:empty{display:none}
.shop-kinds a{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;text-decoration:none}
.shop-kinds a:hover{background:rgba(255,255,255,.12)}
footer.foot{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--mute);font-size:14px;margin-top:72px}
.home footer.foot{border-top-color:var(--paper-line)}

@media (prefers-reduced-motion:reduce){.fs{animation:none;transition:none}}
@media (max-width:980px){
  .hero{padding-top:36px}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "fan" "form"}
  .fan{max-width:560px;margin:28px auto 0}
  .intro{width:100%;max-width:640px;margin:20px auto 0}
  .svcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc:last-child{grid-column:1/-1}
  .styles-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,42%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin:0 -20px;padding:4px 20px 16px;scrollbar-width:none}
  .styles-row::-webkit-scrollbar{display:none}
  .sty{scroll-snap-align:start}
  .flow{grid-template-columns:minmax(0,1fr)}
  .band{flex-direction:column;align-items:flex-start;padding:30px}
}
@media (max-width:620px){
  .hero h1{font-size:36px}
  .hero-copy p{font-size:16px;margin-top:14px}
  .fan{margin-top:20px;aspect-ratio:16/11}
  .fs{width:74%}.fs.s1{width:80%;left:12%}
  .sticker{font-size:12px;padding:6px 11px}
  .ip-ico{width:52px;height:52px}.ip-t b{font-size:16px}.ip-t small{font-size:12px}.intro-play{padding:16px}
  .filetag{font-size:12px;padding:6px 10px 6px 6px}
  .kinds{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px 12px;padding:0 14px 2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 24px),transparent)}
  .kinds::-webkit-scrollbar{display:none}
  .kinds .chip{flex:0 0 auto;white-space:nowrap}
  .promptbox .inner{grid-template-columns:minmax(0,1fr);padding:12px 14px 14px}
  .btn.go{margin-top:10px;width:100%}
  .sect{padding-top:56px}
  h2.sec{font-size:27px}
  .sect-head{margin-bottom:18px}
  .svcs{gap:8px}
  .svc{gap:10px;padding:12px;border-radius:14px}
  .svc b{font-size:14px;line-height:1.25;gap:2px 6px}
  .svc .d{display:none}
  .ico{width:36px;height:36px;border-radius:10px}.ico svg{width:19px;height:19px}
  .styles-row{grid-auto-columns:72%}
  .flow li{padding:14px 16px;gap:12px}
  .flow b{font-size:16px}.flow p{font-size:14px;margin-top:4px}
  .flow .no{font-size:36px}
  .band{padding:26px 22px;border-radius:22px}
  footer.foot{margin-top:56px}
}

/* kirish oynasi */
.modal{position:fixed;inset:0;z-index:50;background:rgba(12,18,38,.55);display:grid;place-items:center;padding:16px}
.modal .box{background:#fff;border-radius:22px;padding:28px;max-width:420px;width:100%;text-align:center}
.spin{width:22px;height:22px;border:3px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;z-index:60;max-width:92vw}

/* ilova */
.app{padding:28px 0 60px}
.tabs{display:none;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.tabs a{padding:10px 16px;border-radius:12px;font-weight:700;font-size:15px;color:var(--ink2);border:1px solid transparent}
.tabs a.on{background:#fff;border-color:var(--line);color:var(--brand)}
.tabs a:hover{color:var(--brand)}
.cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.panel{padding:22px}
.types{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.styl{border:1.5px solid var(--line);border-radius:12px;padding:8px;background:#fff;text-align:center;font-size:13px;font-weight:700}
.styl.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.styl .sl{aspect-ratio:16/9;border-radius:6px;margin-bottom:6px;border:1px solid var(--line)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.sw.on{box-shadow:0 0 0 3px var(--brand)}
.sw.auto{width:auto;padding:0 12px;border-radius:15px;display:grid;place-items:center;font-size:12px;font-weight:800;background:#fff;color:var(--mute)}
.sum{display:flex;justify-content:space-between;font-size:15px;margin:8px 0}
.sum b{font-weight:800}
.job{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) auto;gap:14px;align-items:center;padding:16px 20px;border-top:1px solid #EDF0F7}
.job:first-child{border-top:0}
.job .t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:6px;border-radius:3px;background:#E6EAF5;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--brand);transition:width .4s}
.cardno{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1.5px dashed var(--brand-line);border-radius:12px;background:#F7F9FF;margin-top:10px;font-weight:700;letter-spacing:.04em}
.drop{border:2px dashed var(--brand-line);border-radius:14px;padding:22px;text-align:center;background:#F7F9FF;color:var(--ink2)}
.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.note{padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.5}
.note.ok{background:var(--ok-soft);color:#0B6B49}
.note.wait{background:var(--warn-soft);color:var(--warn)}
.note.bad{background:var(--bad-soft);color:#8E2B20}
table.hist{width:100%;border-collapse:collapse;font-size:14px}
table.hist td,table.hist th{padding:10px 8px;border-top:1px solid #EDF0F7;text-align:left}
table.hist th{color:var(--mute);font-size:12px;font-weight:700;border-top:0}

@media (max-width:980px){
  .tabs{display:flex}.nav{display:none}.cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .job{grid-template-columns:minmax(0,1fr)}
  #actions.in .btn.out{display:none}
  .btn.hide-s{display:none}.full{display:none}.short{display:inline}
  .top .wrap{height:64px}.logo img{width:46px;height:46px}.actions .btn.sm{padding:9px 11px;font-size:13px}
}

.tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-height:340px;overflow:auto;padding:4px}
.tpl{border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:6px;text-align:center;font-size:12px;font-weight:700}
.tpl img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:5px}
.tpl.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* taqdimot formasi: qadamlar, hajm, rang, ko'rinish */
.steps{display:flex;flex-direction:column;gap:16px;min-width:0}
.side{position:sticky;top:90px;min-width:0}
.step{display:flex;gap:16px;align-items:flex-start}
.stepno{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:800;display:grid;place-items:center;font-size:15px}
.stepbody{flex:1;min-width:0}
.steptitle{font-weight:800;font-size:17px;margin-bottom:14px}
.hint-i{font-weight:500;font-size:13px;color:var(--mute)}
.srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.src{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.src small{color:var(--mute);font-size:12px}
.src.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.styl small{display:block;font-weight:500;font-size:11px;color:var(--mute);margin-top:2px}
.thms{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.thm{border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px;display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;font-weight:700;flex-wrap:wrap}
.thm i{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:14px}
.thm i.auto{background:#fff}
.thm small{flex-basis:100%;margin-left:36px;margin-top:-6px;font-weight:500;color:var(--mute);font-size:11px}
.thm.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.counter{display:flex;align-items:center;justify-content:center;gap:18px}
.cbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--brand-line);background:#fff;color:var(--brand);font-size:24px;font-weight:700;line-height:1}
.cbtn:hover{background:var(--brand-soft)}
.cval{min-width:120px;text-align:center}
.cval b{font-size:40px;letter-spacing:-.02em}
.cval span{display:block;color:var(--mute);font-size:14px;margin-top:-4px}
input[type=range]{accent-color:var(--brand)}
.chip.sm{padding:6px 10px;font-size:12px}
.pv{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;padding:7% 8%}
.pvt{position:relative;z-index:2;font-weight:800;font-size:clamp(14px,2.2vw,22px);line-height:1.2;letter-spacing:-.01em}
.pvt small{display:block;margin-top:8px;font-size:.55em;font-weight:600}
.pvbar{position:absolute;left:8%;top:0;width:14%;height:6px;border-radius:0 0 4px 4px}
.pvblock{position:absolute;left:0;top:0;bottom:0;width:100%;opacity:.95;z-index:1}
.pvframe{position:absolute;inset:6px;border:2px solid;z-index:1;border-radius:2px}
@media (max-width:980px){.side{position:static}}
@media (max-width:620px){.srcs{grid-template-columns:minmax(0,1fr)}.step{flex-direction:column;gap:10px}.stepno{width:28px;height:28px}}

/* ───────── taqdimotni varaqlash */
.vtop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.vname{flex:1;min-width:0;display:flex;gap:10px;align-items:baseline;overflow:hidden}
.vname b{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.vgrid.chat-on{grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr)}
.stage{position:relative;aspect-ratio:16/9;background:#0C1226;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(12,18,38,.18);user-select:none}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.stage .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(12,18,38,.55);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;z-index:3;opacity:.0;transition:opacity .15s}
.stage:hover .nav,.stage:focus-within .nav{opacity:1}
.stage .nav:disabled{opacity:.0!important}
.stage .prev{left:12px}.stage .next{right:12px}
.stage .num{position:absolute;left:12px;bottom:12px;background:rgba(12,18,38,.65);color:#fff;font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;z-index:3}
.stage .full{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(12,18,38,.55);color:#fff;font-size:18px;z-index:3}
.stage-ai{position:absolute;inset:0;z-index:4;background:rgba(255,255,255,.96);display:grid;place-items:center;padding:12px;overflow:hidden}
.stage-ai .aiw{width:100%;max-width:520px;transform-origin:center}
.stage:fullscreen{border-radius:0}
.stage:fullscreen>img{object-fit:contain;background:#000}
.thumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scroll-snap-type:x proximity}
.th{position:relative;flex:0 0 auto;width:132px;aspect-ratio:16/9;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;padding:0;scroll-snap-align:center}
.th img{display:block;width:100%;height:100%;object-fit:cover}
.th span{position:absolute;left:5px;bottom:4px;background:rgba(12,18,38,.7);color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px}
.th.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.th.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:thsweep 1.4s linear infinite}
@keyframes thsweep{from{background-position:120% 0}to{background-position:-120% 0}}
.vside{padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 110px);position:sticky;top:90px;overflow:hidden}
.chathead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat{flex:1;min-height:200px;max-height:420px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:#F8F9FD}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word}
.msg.ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.msg small{opacity:.75;font-weight:700}
.chips-row{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 4px;scrollbar-width:thin}
.chips-row .chip{flex:0 0 auto;white-space:nowrap}
.chatform{display:flex;gap:10px;padding:10px 16px 0;align-items:flex-end}
.chatform textarea{min-height:0;resize:none}
.vside .hint{padding:0 16px 14px}

/* ───────── «AI ishlayapti» animatsiyasi (davriy, boshi-oxiri bilinmaydi) */
.aiw{width:100%}
.aiw-win{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 40px rgba(12,18,38,.10)}
.aiw-bar{display:flex;align-items:flex-end;gap:12px;padding:9px 12px 0;background:#E9ECF6}
.aiw .dots{display:flex;gap:5px;padding-bottom:10px}
.aiw .dots i{width:9px;height:9px;border-radius:50%;background:#C4CAE0}
.aiw-tabs{display:flex;gap:4px;min-width:0;overflow:hidden}
.aiw-tab{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:9px 9px 0 0;color:var(--mute);white-space:nowrap;animation:aiwTab 9s infinite}
.aiw-tab.t0{animation-delay:-4s}.aiw-tab.t1{animation-delay:-1s}.aiw-tab.t2{animation-delay:2s}
@keyframes aiwTab{0%,100%{background:transparent;color:#7A83A8}3%,30%{background:#fff;color:#0C1226}36%{background:transparent;color:#7A83A8}}
.aiw-url{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2);min-height:38px}
.aiw-url .mag{font-size:16px;color:var(--brand);transform:scaleX(-1)}
.aiw-url .typed{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aiw-url .caret{width:2px;height:15px;background:var(--brand);animation:aiwCaret .9s steps(1) infinite}
@keyframes aiwCaret{50%{opacity:0}}
.aiw-page{position:relative;height:210px;overflow:hidden;background:#fff}
.aiw-var{position:absolute;inset:0;padding:14px 18px;opacity:0;animation:aiwVar 9s infinite}
.aiw-var.v0{animation-delay:-4s}.aiw-var.v1{animation-delay:-1s}.aiw-var.v2{animation-delay:2s}
@keyframes aiwVar{0%{opacity:0}6%{opacity:1}30%{opacity:1}36%{opacity:0}100%{opacity:0}}
.aiw-scroll{animation:aiwScroll 16s linear infinite}
.aiw-var.v1 .aiw-scroll{animation-duration:13s}.aiw-var.v2 .aiw-scroll{animation-duration:19s}
@keyframes aiwScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.aiw-scroll>div{display:flex;flex-direction:column;gap:9px;padding-bottom:9px}
.aiw .ln{display:block;height:9px;border-radius:5px;background:#E6EAF5}
.aiw .ln.h{height:15px;background:#C9D2EC}
.aiw .ln.hi{background:linear-gradient(90deg,#FFE79A 0 100%);background-size:0% 100%;background-repeat:no-repeat;background-color:#E6EAF5;animation:aiwHi 3.2s ease-in-out infinite}
@keyframes aiwHi{0%,100%{background-size:0% 100%}50%{background-size:100% 100%}}
.aiw .bars{display:flex;align-items:flex-end;gap:10px;height:70px;padding:6px 4px;border-left:2px solid #D5DBEE;border-bottom:2px solid #D5DBEE}
.aiw .bars b{flex:1;background:var(--brand);opacity:.75;border-radius:4px 4px 0 0;animation:aiwBar 2.8s ease-in-out infinite alternate}
.aiw .bars b:nth-child(2n){animation-delay:-.9s;background:#7C9BFF}.aiw .bars b:nth-child(3n){animation-delay:-1.7s;background:#2FB58B}
@keyframes aiwBar{from{transform:scaleY(.55);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.aiw .pic{height:76px;border-radius:10px;background:linear-gradient(135deg,#DCE4FF,#F3E6FF 55%,#DFF5EA);position:relative;overflow:hidden}
.aiw .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:220% 100%;animation:thsweep 2.4s linear infinite}
.aiw .rowg{display:flex;gap:8px}.aiw .rowg .ln{height:9px}
.aiw .tbl{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px}
.aiw .tbl span{height:12px;border-radius:4px;background:#E6EAF5}.aiw .tbl span:nth-child(3n+1){background:#D0D8F0}
.aiw-scan{position:absolute;left:0;right:0;height:46px;top:-46px;background:linear-gradient(180deg,rgba(36,87,255,0),rgba(36,87,255,.16));border-bottom:2px solid rgba(36,87,255,.55);animation:aiwScan 3.6s linear infinite;z-index:2;pointer-events:none}
@keyframes aiwScan{from{transform:translateY(0)}to{transform:translateY(300px)}}
.aiw-cursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}
.aiw-cursor i{display:block;width:16px;height:16px;margin:-3px 0 0 -3px;background:var(--ink);clip-path:polygon(0 0,0 100%,28% 76%,46% 100%,60% 92%,42% 68%,78% 68%);filter:drop-shadow(0 1px 1px rgba(255,255,255,.9))}
.aiw-cursor::after{content:"";position:absolute;left:-12px;top:-12px;width:26px;height:26px;border-radius:50%;border:2px solid var(--brand);opacity:0;animation:aiwClick 2.6s ease-out infinite}
@keyframes aiwClick{0%{transform:scale(.3);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.aiw-feed{margin-top:12px;height:120px;overflow:hidden;border-radius:12px;background:#F7F9FF;border:1px solid var(--line);-webkit-mask-image:linear-gradient(#0000,#000 22%,#000 78%,#0000);mask-image:linear-gradient(#0000,#000 22%,#000 78%,#0000)}
.aiw-feedin{animation:aiwFeed 24s linear infinite}
@keyframes aiwFeed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.aiw-feedin .fl{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink2)}
.aiw-feedin .fl em{margin-left:auto;width:12px;height:12px;border-radius:50%;border:2px solid var(--brand-line);border-top-color:var(--brand);animation:sp .9s linear infinite}
.aiw-msg{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-weight:700;color:var(--ink2);font-size:14px}
.aiw-dots{display:inline-flex;gap:4px;vertical-align:middle}
.aiw-dots i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:aiwDot 1.1s ease-in-out infinite}
.aiw-dots i:nth-child(2){animation-delay:.18s}.aiw-dots i:nth-child(3){animation-delay:.36s}
@keyframes aiwDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.aiw *,.th.busy::after{animation-duration:60s!important}}
@media (max-width:980px){.vgrid.chat-on{grid-template-columns:minmax(0,1fr)}.vside{position:static;max-height:none}.stage .nav{opacity:1}}
@media (max-width:620px){.th{width:104px}.aiw-page{height:170px}.aiw-feed{height:96px}}

.stage-ai .aiw-page{height:132px}.stage-ai .aiw-feed{height:74px;margin-top:8px}.stage-ai .aiw-msg{margin-top:8px;font-size:13px}.stage-ai .aiw-url{padding:6px 12px;min-height:30px}
@media (max-width:620px){.stage-ai .aiw-page{height:96px}.stage-ai .aiw-feed{display:none}.stage-ai .aiw-tabs{display:none}}
@media (max-width:620px){.vname{flex-basis:100%;order:3}.vname b{white-space:normal}}

/* ───────── kirish oynasi, til tanlagich, profil */
.modal .box.login{max-height:92vh;overflow:auto;text-align:center}
.lg-langs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gbtn{background:#fff;color:#1F1F1F;border:1.5px solid #DADCE0}
.gbtn:hover{background:#F8F9FA}
.btn.block{display:flex;width:100%}
.or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--mute);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.langsw{position:relative}
.langsw .gl{font-size:13px}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(12,18,38,.14);padding:8px;display:flex;flex-direction:column;gap:4px;min-width:140px}
.langmenu .chip{border:0;justify-content:flex-start;border-radius:10px}
.langmenu .chip.on{background:var(--brand-soft);color:var(--brand)}
.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.prow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #EDF0F7;flex-wrap:wrap}
.prow:first-of-type{border-top:0}
.prow .who{display:flex;align-items:center;gap:12px;min-width:0}
.prow .who b{display:block}
.prow .who small{color:var(--mute);font-size:13px;overflow-wrap:anywhere}
.ic{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;background:#fff}
.welcome{max-width:560px;margin:10px auto;text-align:center}
.welcome h2{margin:0 0 6px;font-size:28px;letter-spacing:-.02em}
.bigl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.bigl .chip{justify-content:center;padding:14px;font-size:16px}
@media (max-width:980px){.profile{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.actions{gap:6px}.langsw .chip{padding:7px 9px}}
@media (max-width:380px){#actions .btn.out{display:none}}

/* ───────── «Slaydlar ustaxonasi»: buyurtma tayyorlanayotgandagi animatsiya (forge.js) */
.forge{--fg-ink:#E9EDFF;--fg-mute:#8F9AC4;--fg-blue:#5B86FF;--fg-gold:#FFD84A;position:relative;overflow:hidden;border-radius:22px;
  background:radial-gradient(120% 90% at 50% -10%,#24306B 0%,#121A3D 45%,#0A0F24 100%);color:var(--fg-ink);isolation:isolate}
.fg-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fg-in{position:relative;z-index:1;padding:22px 22px 18px}
.fg-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px}
.fg-core{display:flex;align-items:center;gap:12px;min-width:0}
.fg-orb{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#FFE58A 18%,#FFB547 40%,rgba(255,140,60,0) 72%);
  box-shadow:0 0 22px 6px rgba(255,200,80,.35),0 0 60px 10px rgba(91,134,255,.25);animation:fgOrb 2.4s ease-in-out infinite}
@keyframes fgOrb{50%{transform:scale(1.12);box-shadow:0 0 30px 10px rgba(255,200,80,.45),0 0 80px 18px rgba(91,134,255,.3)}}
.fg-topic{font-weight:800;font-size:18px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fg-stage{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--fg-ink);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:999px}
.fg-stage i{width:8px;height:8px;border-radius:50%;background:var(--fg-gold);box-shadow:0 0 10px var(--fg-gold);animation:fgBlink 1.2s ease-in-out infinite}
@keyframes fgBlink{50%{opacity:.3}}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.forge.pages .fg-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.fg-card{position:relative;aspect-ratio:16/9;border-radius:8px;border:1px dashed rgba(170,185,255,.28);background:rgba(255,255,255,.03);padding:7px 8px;overflow:hidden;
  transition:background .6s,border-color .6s,transform .6s cubic-bezier(.2,.7,.2,1),opacity .5s,box-shadow .6s;animation:fgIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 30ms)}
.forge.pages .fg-card{aspect-ratio:1/1.38}
@keyframes fgIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.fg-no{position:absolute;right:6px;top:4px;font-size:9.5px;font-weight:800;color:rgba(200,210,255,.45)}
.fg-ttl{font-size:9.5px;font-weight:800;line-height:1.2;color:rgba(230,235,255,.0);max-height:2.4em;overflow:hidden;padding-right:12px;transition:color .5s;min-height:11px}
.fg-card.titled .fg-ttl{color:rgba(230,235,255,.88)}
.fg-card:not(.titled) .fg-ttl{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.16),rgba(255,255,255,.06));background-size:200% 100%;border-radius:3px;width:70%;animation:thsweep 1.6s linear infinite}
.sk{position:absolute;left:8px;right:8px;bottom:7px;height:50%;display:flex;gap:4px;opacity:.55;transition:opacity .5s}
.sk .l{display:block;height:3px;border-radius:2px;background:rgba(190,205,255,.35);margin-bottom:3px}
.sk span,.sk em,.sk b{display:block;border-radius:3px;background:rgba(190,205,255,.16)}
.sk.cover{flex-direction:column;justify-content:center}.sk.cover .l:first-child{height:6px}
.sk.plan{flex-direction:column;gap:2px}.sk.plan span{display:flex;gap:4px;align-items:center;background:none}.sk.plan b{background:none;font-size:7px;color:rgba(190,205,255,.6);font-style:normal}
.sk.plan .l{margin:0;flex:1}
.sk.pic>div{flex:1}.sk.pic em{flex:0 0 40%}
.sk.split>div{flex:1}
.sk.kpi span{flex:1;background:none}.sk.kpi b{height:10px;width:70%;margin-bottom:4px;background:rgba(190,205,255,.3)}
.sk.flow{align-items:center}.sk.flow span{flex:1;height:60%}.sk.flow i{font-style:normal;font-size:9px;color:rgba(190,205,255,.5)}
.sk.time{align-items:center;justify-content:space-between;border-top:1px solid rgba(190,205,255,.3);height:1px;bottom:25%}
.sk.time span{width:6px;height:6px;border-radius:50%;margin-top:-1px}
.sk.table{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3px}
.sk.chart{align-items:flex-end;border-left:1px solid rgba(190,205,255,.3);border-bottom:1px solid rgba(190,205,255,.3);padding:0 4px;gap:5px}
.sk.chart b{flex:1;height:var(--h);transform-origin:bottom;transform:scaleY(.15);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sk.tree{flex-direction:column;align-items:center}.sk.tree>span{width:34%;height:30%}.sk.tree div{display:flex;gap:4px;width:100%;flex:1;margin-top:4px}.sk.tree div span{flex:1}
.sk.quote{flex-direction:column;justify-content:center}.sk.quote b{background:none;font-size:18px;line-height:.6;color:rgba(190,205,255,.5)}
.sk.formula{flex-direction:column;justify-content:center;align-items:center}.sk.formula b{background:none;font-style:italic;font-size:13px;color:rgba(190,205,255,.6)}
.sk.list{flex-direction:column;gap:3px}.sk.list span{display:flex;align-items:center;gap:4px;background:none}.sk.list .d{width:4px;height:4px;border-radius:50%;background:rgba(190,205,255,.4)}.sk.list .l{margin:0}
.sk.cards span{flex:1}
.sk.end{flex-direction:column;justify-content:center;align-items:center}
.sk.page{flex-direction:column;height:auto;top:30px}
.fg-ok{position:absolute;right:5px;bottom:5px;width:14px;height:14px;border-radius:50%;background:var(--fg-gold);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) .3s}
.fg-ok::after{content:"";position:absolute;left:4px;top:2.5px;width:3.5px;height:6.5px;border:solid #1A1400;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* yozilayotgan kartochka: skaner nuri */
.fg-card.writing{border-style:solid;border-color:rgba(120,160,255,.75);box-shadow:0 0 0 1px rgba(91,134,255,.35),0 0 22px rgba(91,134,255,.35)}
.fg-card.writing::after{content:"";position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,rgba(120,160,255,0),rgba(120,160,255,.35));border-bottom:1.5px solid rgba(170,200,255,.9);animation:fgScan 1.5s linear infinite}
@keyframes fgScan{to{transform:translateY(350%)}}
/* tayyor kartochka: «slayd» rangga to'ladi */
.fg-card.built{border:1px solid rgba(255,255,255,.0);background:linear-gradient(160deg,#F7F8FF,#E3E9FF);box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.forge.pages .fg-card.built{background:#FBFBF8}
.fg-card.built .fg-ttl{color:#0C1226}
.fg-card.built .fg-no{color:rgba(12,18,38,.35)}
.fg-card.built .sk{opacity:1}
.fg-card.built .sk .l{background:rgba(12,18,38,.18)}
.fg-card.built .sk span,.fg-card.built .sk em{background:rgba(36,87,255,.16)}
.fg-card.built .sk b{background:var(--fg-blue)}
.fg-card.built .sk.kpi b{background:#2457FF}
.fg-card.built .sk.plan b,.fg-card.built .sk.quote b,.fg-card.built .sk.formula b{background:none;color:#2457FF}
.fg-card.built .sk.pic em{background:linear-gradient(135deg,#9DB4FF,#C9B6FF 55%,#9EE3C6)}
.fg-card.built .sk.chart b{transform:scaleY(1)}
.fg-card.built .sk.chart b:nth-child(2n){background:#FFB547}
.fg-card.built .sk.cover .l:first-child{background:#0C1226}
.fg-card.built .sk.time span,.fg-card.built .sk.list .d{background:#2457FF}
.fg-card.built .fg-ok{transform:scale(1)}
.fg-card.built:first-child{background:linear-gradient(160deg,#2A2470,#16123F)}
.fg-card.built:first-child .fg-ttl{color:#fff}.fg-card.built:first-child .sk .l{background:rgba(255,255,255,.35)}.fg-card.built:first-child .sk .l:first-child{background:#fff}
.forge.pages .fg-card.built:first-child{background:#FBFBF8}.forge.pages .fg-card.built:first-child .fg-ttl{color:#0C1226}
.fg-card.check{transform:translateY(-3px);box-shadow:0 0 0 2px var(--fg-gold),0 10px 26px -8px rgba(255,216,74,.5)}
.fg-foot{margin-top:16px}
.fg-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.fg-bar i{display:block;height:100%;width:3%;border-radius:3px;background:linear-gradient(90deg,var(--fg-blue),#9B7BFF,var(--fg-gold),#9B7BFF,var(--fg-blue));background-size:200% 100%;animation:fgFlow 3s linear infinite;transition:width .8s cubic-bezier(.2,.7,.2,1)}
@keyframes fgFlow{to{background-position:-200% 0}}
.fg-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--fg-mute);font-variant-numeric:tabular-nums}
/* yakun: kartochkalar bitta faylga yig'iladi */
.forge.gather .fg-card{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(calc((var(--i) - 6) * 4deg));opacity:0;transition-duration:.8s;transition-delay:calc(var(--i) * 25ms)}
.fg-final{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.fg-file{display:flex;flex-direction:column;align-items:center;gap:10px;transform:scale(.4);opacity:0}
.forge.burst .fg-file{animation:fgPop .7s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes fgPop{to{transform:scale(1);opacity:1}}
.fg-ext{display:grid;place-items:center;width:92px;height:116px;border-radius:12px;background:linear-gradient(160deg,#E2553A,#B23A22);color:#fff;font-size:20px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 0 0 6px rgba(255,216,74,.18),0 0 60px 10px rgba(255,200,80,.35),0 20px 40px -12px rgba(0,0,0,.6)}
.fg-file span{font-weight:800;color:#fff}
.forge.burst .fg-final::before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,rgba(255,230,140,.9),rgba(255,216,74,0) 70%);animation:fgBurst .9s ease-out forwards}
@keyframes fgBurst{to{transform:scale(28);opacity:0}}
.forge.failed .fg-card.writing{animation:none}
.forge.failed .fg-card.writing::after{display:none}
@media (prefers-reduced-motion:reduce){.fg-card,.fg-orb,.fg-stage i,.fg-bar i,.fg-card.writing::after{animation:none!important}}
@media (max-width:620px){
  .fg-in{padding:16px 14px 14px}
  .fg-topic{font-size:15.5px}
  .fg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .forge.pages .fg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fg-card{padding:5px 6px;border-radius:6px}
  .fg-ttl{font-size:8px;white-space:nowrap;text-overflow:ellipsis;max-height:1.3em}
  .sk{left:6px;right:6px;bottom:5px;height:46%}
  .fg-ok{width:12px;height:12px}.fg-ok::after{left:3.5px;top:2px;width:3px;height:5.5px}
}

/* ───────── bosh sahifadagi yaratish oynasi («studiya»): mavzu yozilgach kattalashadi */
.studio{display:none}
.hero-grid>.forge-box{grid-area:form;margin-top:28px}
#yaratish,.forge-box{scroll-margin-top:84px}
.hero.studio-on .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "form"}
.hero.studio-on .fan{display:none}
.hero.studio-on .hero-copy{max-width:900px}
.hero.studio-on h1{font-size:clamp(30px,3.4vw,44px)}
.hero.studio-on .hero-copy p{display:none}
.hero.studio-on .promptbox{animation:stGrow .5s cubic-bezier(.2,.7,.2,1)}
@keyframes stGrow{from{transform:scale(.985);opacity:.6}}
.hero.studio-on .btn.go,.hero.studio-on .pb-hint{display:none}
.hero.studio-on .promptbox .inner{grid-template-columns:minmax(0,1fr)}
.hero.studio-on .studio{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:22px;align-items:start;margin-top:16px;animation:stIn .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes stIn{from{opacity:0;transform:translateY(12px)}}
.st-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.st-sec{padding:14px 4px 12px;border-top:1px dashed var(--paper-line)}
.st-sec:first-child{border-top:0;padding-top:4px}
.st-lab{font-weight:800;font-size:14.5px;margin-bottom:10px;color:var(--ink)}
.st-chips{display:flex;gap:7px;flex-wrap:wrap}
.st-chips .chip{padding:7px 12px;font-size:13.5px}
.st-chips .chip.sm{padding:5px 10px;font-size:12.5px}
.st-sec .hint{margin-top:8px}
.st-sec .fld{font-size:15px;padding:10px 12px}
.st-sec #src-panel{margin-top:10px}
.st-sec .srcs{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st-sec .src{padding:10px 11px;border-radius:12px;font-size:13.5px}
.st-sec .src small{font-size:11.5px}
.st-sec .drop{display:flex;flex-direction:column;gap:4px;align-items:center;cursor:pointer;padding:18px}
.st-sec .drop input{margin-top:6px;max-width:100%}
.st-url{display:flex;gap:8px}.st-url .fld{flex:1;min-width:0}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.st-two .st-sec{border-top:1px dashed var(--paper-line)}
.st-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.st-sty{display:flex;flex-direction:column;gap:6px;padding:5px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;font-size:12.5px;transition:border-color .2s,box-shadow .2s,transform .2s}
.st-sty img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:7px}
.st-sty b{padding:0 3px 2px}
.st-sty:hover{transform:translateY(-2px)}
.st-sty.on{border-color:var(--ink);box-shadow:0 0 0 3px var(--marker)}
.st-sw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sw-b{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid #fff;background:#fff;box-shadow:0 0 0 1.5px var(--line);display:grid;place-items:center}
.sw-b i{display:block;width:100%;height:100%;border-radius:50%;font-style:normal;font-size:14px;display:grid;place-items:center}
.sw-b.on{box-shadow:0 0 0 2.5px var(--ink),0 0 0 6px var(--marker)}
.sw-name{margin-left:6px;font-size:13px;font-weight:700;color:var(--mute)}
.st-count{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.st-count .cbtn{width:40px;height:40px;font-size:22px}
.st-count .cval{min-width:64px}.st-count .cval b{font-size:32px}.st-count .cval span{font-size:12px}
.st-count input{flex:1;min-width:0}
.st-side{position:sticky;top:88px;display:flex;flex-direction:column;gap:10px;background:#FBFAF6;border:1px solid var(--paper-line);border-radius:18px;padding:14px}
.st-side .pv{border-radius:10px}
.st-side .hint{margin:0}
.st-sum .sum{font-size:13.5px;margin:6px 0;gap:10px}
.st-sum .sum span{color:var(--mute)}
.st-sum .sum b{text-align:right;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-go{border-top:1px dashed var(--paper-line);padding-top:10px}
.st-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.st-total span{color:var(--mute);font-weight:700}
.st-total b{font-size:22px;letter-spacing:-.02em}
.st-go .btn{padding:14px;font-size:16.5px}
.st-eta{text-align:center;font-size:12px}
.st-side .note{font-size:13px;padding:10px 12px;background:#F1EEE4;color:var(--ink2)}
.st-side .note.wait{background:var(--warn-soft);color:var(--warn)}.st-side .note.bad{background:var(--bad-soft);color:#8E2B20}
.forge-out{margin-top:14px}
.forge-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 10px}
.forge-out .note{max-width:640px;margin:0 auto 10px}
@media (max-width:980px){
  .hero.studio-on .studio{grid-template-columns:minmax(0,1fr)}
  .st-side{position:sticky;top:auto;bottom:10px;z-index:5;box-shadow:0 -10px 30px -12px rgba(12,18,38,.25)}
  .st-side .pv,.st-side #pv-note,.st-sum,.st-eta{display:none}
  .st-go{border-top:0;padding-top:0;display:flex;align-items:center;gap:12px}
  .st-total{flex-direction:column;align-items:flex-start;margin:0}
  .st-total span{font-size:12px}.st-total b{font-size:19px;white-space:nowrap}
  .st-go .btn{flex:1;width:auto}
  .st-styles{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(132px,38%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
  .st-styles::-webkit-scrollbar{display:none}
  .st-sty{scroll-snap-align:start}
}
@media (max-width:620px){
  .hero.studio-on h1{font-size:28px}
  .st-sec .srcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-two{grid-template-columns:minmax(0,1fr)}
  .st-count{flex-wrap:wrap}.st-count input{flex-basis:100%}
  .st-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .st-chips::-webkit-scrollbar{display:none}
  .st-chips .chip{flex:0 0 auto;white-space:nowrap}
  #pref-ex,#extras{flex-wrap:wrap}
}

/* ───────── taqdimotni qo'lda tahrirlash (bepul): matn, diagramma, tartib — deckedit.js */
.vtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.vtools .btn small{font-weight:700;opacity:.7;font-size:12px}
.vtools .btn.out small{color:var(--ok)}
.vtools #edit{margin-left:auto}
.vtools .btn:disabled{opacity:.45}
.edbar{min-height:44px;padding:8px 10px;border:1.5px dashed var(--brand-line);border-radius:14px;background:#F7F9FF}
.edbar .note{padding:8px 12px}
.edbar .ed-hint{margin:0;flex:1 1 220px}
.stage.editing .nav,.stage.editing .num,.stage.editing .full{display:none}
.vgrid.editing .thumbs{pointer-events:none;opacity:.5}
.ed-frame{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0;z-index:5;background:#fff}
.ed-panel{margin-top:14px;padding:18px}
.ed-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:16px}
.ed-scroll{overflow-x:auto;margin:10px 0 0}
.ed-tbl{border-collapse:separate;border-spacing:6px 6px;margin:-6px}
.ed-tbl th{font-size:12px;color:var(--mute);text-align:left;font-weight:700;white-space:nowrap}
.ed-tbl th .fld{display:inline-block;width:150px}
.ed-tbl .fld{padding:8px 10px;font-size:14px;width:150px}
.ed-tbl .fld.num{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.ed-del{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--mute);font-size:13px;padding:0}
.ed-del:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}
.ed-del:disabled{opacity:.35}
.ed-two{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;margin-top:14px}
.ed-two .lab{margin-bottom:6px}
.ed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.ed-row{display:flex;align-items:center;gap:12px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.ed-row img{width:96px;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--line);flex:0 0 auto;object-fit:cover}
.ed-row .t{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-row.locked{background:#F7F8FC}
.ed-acts{display:flex;gap:4px;flex:0 0 auto}
.ed-acts button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:15px;padding:0}
.ed-acts button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.ed-acts button[data-a=del]:hover:not(:disabled){border-color:var(--bad);color:var(--bad)}
.ed-acts button:disabled{opacity:.3}
@media (max-width:620px){
  .vtools .btn{flex:1 1 calc(50% - 4px);padding:9px 8px;font-size:12.5px}
  .vtools #edit{flex-basis:100%;margin-left:0}
  .ed-two{grid-template-columns:1fr}
  .edbar .ed-hint{flex:1 1 100%}
  .vtools .btn{flex:1 1 auto}
  .ed-tbl .fld{width:104px;padding:7px 8px}.ed-tbl .fld.num{width:76px}.ed-tbl th .fld{width:84px}
  .ed-panel{padding:14px}
  .ed-row img{width:64px}
  .ed-acts button{width:30px;height:30px}
  .ed-row.locked .pill{display:none}
}

/* Bosh sahifa pasti: sayt haqida bir gap va xizmat sahifalariga havolalar */
.foot-seo{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(0,0,0,.08)}
.foot-seo p{margin:0 0 10px;font-size:13.5px;max-width:80ch}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px}
.foot-links a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}

/* Bepul sinov taqdimoti (studiya tepasida) */
.trial{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;border:1px dashed #2457FF;background:rgba(36,87,255,.06);margin-bottom:16px}
.trial .tx{display:flex;flex-direction:column;gap:3px;flex:1;min-width:220px}
.trial .tx b{font-size:15px}
.trial .tx span{font-size:13.5px;color:#4A5272}
.trial.on{border-style:solid;background:rgba(22,163,74,.08);border-color:#16a34a}
.st-count.locked .cval b{color:#16a34a}