/* Bilgir design system — friendly education.
   Layout: sidebar app shell on desktop, top bar + bottom tab bar on phones.
   Colors: green (primary, "ready"), orange (the one big action), purple (presentation & brand play),
   blue for laboratoriya; each session type keeps its color everywhere. */

@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(/fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Onest";font-weight:400;font-display:swap;src:url(/fonts/onest-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Onest";font-weight:500;font-display:swap;src:url(/fonts/onest-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Onest";font-weight:600;font-display:swap;src:url(/fonts/onest-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Onest";font-weight:700;font-display:swap;src:url(/fonts/onest-latin-700-normal.woff2) format("woff2")}

:root{
  --page:#F4F5FB; --panel:#FFFFFF; --panel-2:#F9FAFD; --ink:#1D2142; --muted:#5E6487; --line:#E3E6F1;
  --green:#18A36F; --green-deep:#0E7A52; --green-soft:#E1F5EB;
  --orange:#FF7A2F; --orange-deep:#D9561A; --orange-soft:#FFEBDD;
  --purple:#7253E0; --purple-deep:#5536BE; --purple-soft:#EDE7FF;
  --blue:#2E7CE6; --blue-soft:#E3EEFD;
  --gold:#F5B40A;
  --good:#18A36F; --goodbg:#E1F5EB; --bad:#D93B3B; --badbg:#FDE8E8;
  /* names the lesson renderer already uses */
  --accent:var(--green); --accent-ink:#FFFFFF; --soft:var(--green-soft);
  --display:"Baloo 2","Onest",system-ui,sans-serif; --ui:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:var(--display);
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  --lift:0 1px 0 var(--line), 0 8px 24px -16px rgba(29,33,66,.25);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#12142A; --panel:#1B1E39; --panel-2:#212543; --ink:#EEF0FB; --muted:#A3A8C8; --line:#2E3256;
  --green:#3CCB92; --green-deep:#2AA877; --green-soft:#183A31; --orange:#FF8F4F; --orange-deep:#E0682C; --orange-soft:#3D2A22;
  --purple:#9C84F4; --purple-deep:#8064E8; --purple-soft:#2A2550; --blue:#5B9BF0; --blue-soft:#1C2C4B;
  --good:#3CCB92; --goodbg:#183A31; --bad:#FF7B7B; --badbg:#3E2026; --accent-ink:#12142A;
  --lift:0 1px 0 var(--line), 0 10px 28px -18px rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#12142A; --panel:#1B1E39; --panel-2:#212543; --ink:#EEF0FB; --muted:#A3A8C8; --line:#2E3256;
  --green:#3CCB92; --green-deep:#2AA877; --green-soft:#183A31; --orange:#FF8F4F; --orange-deep:#E0682C; --orange-soft:#3D2A22;
  --purple:#9C84F4; --purple-deep:#8064E8; --purple-soft:#2A2550; --blue:#5B9BF0; --blue-soft:#1C2C4B;
  --good:#3CCB92; --goodbg:#183A31; --bad:#FF7B7B; --badbg:#3E2026; --accent-ink:#12142A;
  --lift:0 1px 0 var(--line), 0 10px 28px -18px rgba(0,0,0,.6); color-scheme:dark}

/* Background choices (picked by each user, see theme.js) — light palettes only change the page tint */
:root[data-bg="oq"]{--page:#FFFFFF;--panel-2:#F6F7FA}
:root[data-bg="yalpiz"]{--page:#EAF7F0;--panel-2:#F4FBF7}
:root[data-bg="iliq"]{--page:#FBF6EE;--panel-2:#FDFAF5}
:root[data-bg="lavanda"]{--page:#F2EFFD;--panel-2:#F8F6FE}

/* Main color choices (theme.js). Each sets one base color; the dark-theme shade, the pressed shade and
   the soft tint are derived from it, so every color works on light and dark backgrounds. */
:root[data-accent]{--green:var(--acc);--green-deep:color-mix(in srgb,var(--acc) 78%,#000);
  --green-soft:color-mix(in srgb,var(--green) 15%,var(--panel));--good:var(--green);--goodbg:var(--green-soft)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent]{--green:color-mix(in srgb,var(--acc) 72%,#fff);--green-deep:color-mix(in srgb,var(--acc) 88%,#fff)}}
:root[data-theme="dark"][data-accent]{--green:color-mix(in srgb,var(--acc) 72%,#fff);--green-deep:color-mix(in srgb,var(--acc) 88%,#fff)}
:root[data-accent="moviy"]{--acc:#2E7CE6}
:root[data-accent="binafsha"]{--acc:#7253E0}
:root[data-accent="firuza"]{--acc:#0E9AA7}
:root[data-accent="anor"]{--acc:#D94162}
:root[data-accent="qora"]{--acc:#2B2F4A}
:root[data-accent="oltin"]{--acc:#C2870A}
:root[data-accent="pushti"]{--acc:#D63F95}
:root[data-accent="indigo"]{--acc:#4F46E5}
:root[data-accent="havorang"]{--acc:#0B93D1}
:root[data-accent="zaytun"]{--acc:#6E8B1F}
:root[data-accent="jigarrang"]{--acc:#9A5B34}
/* "Qora" is near-black, so on dark backgrounds it turns into a light grey instead */
:root[data-theme="dark"][data-accent="qora"]{--green:#D3D5E2;--green-deep:#B5B8C9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-accent="qora"]{--green:#D3D5E2;--green-deep:#B5B8C9}}

/* Dim: a softer, neutral dark — charcoal greys with no blue tint, gentler than "Tun" */
:root[data-theme="dark"][data-bg="xira"]{--page:#202124;--panel:#2A2B2F;--panel-2:#313236;--ink:#ECECEE;--muted:#A3A4AA;--line:#3D3E44;
  --green-soft:color-mix(in srgb,var(--green) 16%,#2A2B2F);--purple-soft:color-mix(in srgb,var(--purple) 18%,#2A2B2F);
  --orange-soft:color-mix(in srgb,var(--orange) 16%,#2A2B2F);--blue-soft:color-mix(in srgb,var(--blue) 16%,#2A2B2F);
  --goodbg:var(--green-soft);--badbg:color-mix(in srgb,var(--bad) 16%,#2A2B2F);--accent-ink:#202124;
  --lift:0 1px 0 var(--line), 0 10px 26px -18px rgba(0,0,0,.5)}

/* More dims: same recipe as Xira, different undertone */
:root[data-theme="dark"][data-bg="qahva"]{--page:#211D1A;--panel:#2C2723;--panel-2:#332D29;--ink:#EEEAE6;--muted:#AFA59C;--line:#433B35;
  --green-soft:color-mix(in srgb,var(--green) 16%,#2C2723);--purple-soft:color-mix(in srgb,var(--purple) 18%,#2C2723);
  --orange-soft:color-mix(in srgb,var(--orange) 16%,#2C2723);--blue-soft:color-mix(in srgb,var(--blue) 16%,#2C2723);
  --goodbg:var(--green-soft);--badbg:color-mix(in srgb,var(--bad) 16%,#2C2723);--accent-ink:#211D1A}
:root[data-theme="dark"][data-bg="ormon"]{--page:#19211D;--panel:#222C27;--panel-2:#29342E;--ink:#E7EEEA;--muted:#9DAEA5;--line:#36443D;
  --green-soft:color-mix(in srgb,var(--green) 16%,#222C27);--purple-soft:color-mix(in srgb,var(--purple) 18%,#222C27);
  --orange-soft:color-mix(in srgb,var(--orange) 16%,#222C27);--blue-soft:color-mix(in srgb,var(--blue) 16%,#222C27);
  --goodbg:var(--green-soft);--badbg:color-mix(in srgb,var(--bad) 16%,#222C27);--accent-ink:#19211D}
:root[data-bg="pushti"]{--page:#FCEFF4;--panel-2:#FEF6F9}
:root[data-bg="limon"]{--page:#FAF8E6;--panel-2:#FDFCF2}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--page);color:var(--ink)}
body{font-family:var(--ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--green-deep)}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.6rem);font-weight:800}
h2{font-size:1.45rem;font-weight:700}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.svg{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}

/* ---------- app shell ---------- */
/* the sidebar column is painted on the layout, so it reaches the bottom of long pages */
.layout{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--panel) 0 247px,var(--line) 247px 248px,transparent 248px)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--ink);text-decoration:none;padding:0 8px 14px}
.logo-mark{width:38px;height:38px;border-radius:12px;background:var(--green);display:grid;place-items:center;box-shadow:0 3px 0 var(--green-deep)}
.logo-mark svg{width:24px;height:24px;stroke:var(--accent-ink)}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--green-soft);color:var(--green-deep)}
.side-foot{margin-top:auto;display:grid;gap:12px}
.quota{background:var(--orange-soft);border-radius:var(--r-md);padding:14px}
.quota b{font-family:var(--display);font-size:1.25rem}
.quota .bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--orange) 22%,transparent);margin-top:8px;overflow:hidden}
.quota .bar span{display:block;height:100%;background:var(--orange);border-radius:99px}
.me{display:flex;align-items:center;gap:10px;padding:6px 6px 0}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;flex:none}
.me .who{min-width:0;flex:1;line-height:1.25}
.me .who b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .who span{font-size:.8rem;color:var(--muted)}
.icon-btn{border:0;background:none;color:var(--muted);padding:8px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{background:var(--panel-2);color:var(--ink)}
.main{min-width:0;padding:32px clamp(16px,3vw,40px) 64px}
.page{max-width:1080px;margin:0 auto;display:grid;gap:24px}
.topbar,.tabbar{display:none}

@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr);background:none}
  .side{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .topbar .logo{padding:0;font-size:1.35rem}
  .topbar .logo-mark{width:32px;height:32px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--panel);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{flex:1;display:grid;justify-items:center;gap:2px;padding:6px 4px;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:600;border-radius:12px}
  .tabbar a[aria-current="page"]{color:var(--green-deep);background:var(--green-soft)}
  .main{padding:20px 16px 96px}
}

/* ---------- building blocks ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--lift);min-width:0}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
label .hint{font-weight:400;color:var(--muted);font-size:.82rem}
input,select,textarea{font:inherit;font-weight:500;color:var(--ink);background:var(--panel-2);border:2px solid var(--line);border-radius:var(--r-md);padding:11px 14px;width:100%;min-width:0;transition:border-color .15s}
textarea{resize:vertical;min-height:96px}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent);font-weight:400}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);background:var(--panel)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb,var(--purple) 55%,transparent);outline-offset:2px}

.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:10px 18px;border-radius:var(--r-md);font-weight:700;font-size:.95rem;box-shadow:0 2px 0 var(--line);transition:transform .08s,box-shadow .08s}
.btn:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.primary{background:var(--green);border-color:var(--green);color:var(--accent-ink);box-shadow:0 3px 0 var(--green-deep)}
.btn.primary:hover{background:color-mix(in srgb,var(--green) 92%,#000)}
/* the one big action on a screen */
.btn.go{background:#E9631F;border-color:#E9631F;color:#fff;font-family:var(--display);font-size:1.2rem;font-weight:800;padding:12px 28px;border-radius:16px;box-shadow:0 5px 0 #B54814}
.btn.go:hover{background:#D9581A}
.btn.go:active{transform:translateY(4px);box-shadow:0 1px 0 #B54814}
.btn.danger{color:var(--bad)}
.btn.sm{padding:6px 12px;font-size:.85rem;border-radius:10px}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
button.link{border:0;background:none;color:var(--green-deep);padding:0;font-weight:600}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;padding:4px 11px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.chip.ok{background:var(--goodbg);border-color:transparent;color:var(--green-deep)}
.chip.warn{background:var(--badbg);border-color:transparent;color:var(--bad)}
.t-maruza{--tc:var(--purple);--tcs:var(--purple-soft)}
.t-amaliy{--tc:var(--green);--tcs:var(--green-soft)}
.t-seminar{--tc:var(--orange);--tcs:var(--orange-soft)}
.t-laboratoriya{--tc:var(--blue);--tcs:var(--blue-soft)}
.chip.type{background:var(--tcs);color:var(--tc);border-color:transparent}

.msg{padding:12px 14px;border-radius:var(--r-md);font-weight:500}
.msg.err{background:var(--badbg);color:var(--bad)}
.msg.ok{background:var(--goodbg);color:var(--green-deep)}
.note{color:var(--muted);font-size:.9rem}
.scroll{overflow-x:auto}
.grid2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
.empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:36px 16px;color:var(--muted)}
.empty .bubble{width:64px;height:64px;border-radius:20px;background:var(--purple-soft);color:var(--purple);display:grid;place-items:center}
.empty .bubble svg{width:30px;height:30px}

table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list th{font-size:.82rem;color:var(--muted);font-weight:600}
table.list tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* background picker */
.bgpick{position:relative}
.bgpick-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--muted);font-weight:600;padding:10px 12px;border-radius:var(--r-md);text-align:left}
.bgpick-btn:hover{background:var(--panel-2);color:var(--ink)}
.bgpick-btn .sw{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.bgpop{position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;width:272px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px -18px rgba(29,33,66,.45);padding:14px;display:grid;gap:10px}
.topbar .bgpop{bottom:auto;top:calc(100% + 8px);left:auto;right:0}
.bgpop b{font-family:var(--display);font-size:1.05rem}
.bgpop .sec{font-weight:700;font-size:.82rem;color:var(--muted);margin-top:2px}
.bgpop .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
.bgpop button{display:grid;justify-items:center;gap:4px;border:0;background:none;color:var(--muted);font-size:.72rem;font-weight:600;padding:2px;border-radius:10px}
.bgpop button .sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--line)}
.bgpop button[aria-pressed="true"]{color:var(--ink)}
.bgpop button[aria-pressed="true"] .sw{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.topbar-actions{display:flex;align-items:center;gap:4px}

/* lesson cards (shared by the main page and the library) */
.section-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.search{position:relative;flex:0 1 320px}
.search .svg{position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted)}
.search input{padding-left:42px;background:var(--panel)}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lc{display:grid;gap:0;align-content:start;background:var(--panel);border:2px solid var(--line);border-radius:var(--r-lg);padding:0;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:border-color .15s,translate .15s}
.lc::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--tc);z-index:1}
.lc-body{display:grid;gap:10px;padding:16px 18px 18px}
.lc-cover{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:var(--panel-2)}
.lc:hover .lc-cover .sd-in{filter:saturate(1.15)}
.lc:hover{border-color:var(--tc);translate:0 -2px}
.lc h3{font-size:1.15rem}
.lc .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lc .foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem;margin-top:2px}
.stars{color:var(--gold);letter-spacing:1px}

/* ================= motion (motion.js adds classes; all of it stops for reduced motion) ================= */
@media (prefers-reduced-motion:no-preference){
  /* page entrance: each block of the page rises in turn */
  .page>*{animation:pageIn .55s cubic-bezier(.2,.8,.2,1) both}
  .page>*:nth-child(2){animation-delay:.06s}.page>*:nth-child(3){animation-delay:.12s}.page>*:nth-child(4){animation-delay:.18s}.page>*:nth-child(5){animation-delay:.24s}
  @keyframes pageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* scroll reveal */
  .rv{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .55s ease var(--rv-delay,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--rv-delay,0ms)}
  .rv.rv-in{opacity:1;transform:none}
  /* nav: icon nudges on hover, active item breathes in */
  .nav a .svg,.tabbar a .svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
  .nav a:hover .svg{transform:translateX(3px) rotate(-6deg)}
  .nav a[aria-current="page"]{animation:navIn .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes navIn{from{background-size:0}0%{opacity:.4;transform:translateX(-6px)}to{opacity:1;transform:none}}
  /* buttons */
  .btn{transition:transform .12s,box-shadow .12s,background .2s,border-color .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn.go{position:relative;overflow:hidden}
  .btn.go::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:shine 3.6s ease-in-out infinite}
  @keyframes shine{0%,60%{left:-40%}85%,100%{left:130%}}
  /* lesson cards: cover zooms, card lifts */
  .lc{transition:border-color .2s,translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
  .lc:hover{box-shadow:0 22px 40px -24px rgba(0,0,0,.55)}
  .lc .lc-cover .sd-in{transition:filter .3s}
  .lc .lc-cover{overflow:hidden}
  .lc .lc-cover>.sd-in>.slide{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .lc:hover .lc-cover>.sd-in>.slide{transform:scale(1.06)}
  /* chips & stars */
  .stars button{transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
  .stars button:hover{transform:scale(1.25) rotate(-8deg)}
}
/* click ripple */
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .65s ease-out forwards;z-index:0}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.confetti i{position:absolute;border-radius:2px;animation:conf var(--d) cubic-bezier(.15,.6,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 520px)) rotate(var(--r));opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .tab-in{animation:pageIn .4s cubic-bezier(.2,.8,.2,1)}
  .opts button.right{animation:pop2 .45s cubic-bezier(.3,1.8,.5,1)}
  .opts button.wrong{animation:shake .4s}
  @keyframes pop2{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
  @keyframes shake{20%,60%{translate:-5px}40%,80%{translate:5px}}
  .tile.done,.wc.found{animation:pop2 .4s cubic-bezier(.3,1.8,.5,1)}
  .hero{animation:pageIn .6s cubic-bezier(.2,.8,.2,1) both}
}

/* ---------- source files (source.js) ---------- */
.src{display:grid;gap:10px}
.src-drop{display:flex;align-items:center;gap:14px;border:2px dashed color-mix(in srgb,var(--ink) 22%,var(--line));border-radius:18px;padding:14px 16px;cursor:pointer;background:var(--panel-2);transition:border-color .2s,background .2s,transform .15s}
.src-drop:hover,.src-drop:focus-visible,.src-drop.over{border-color:var(--purple);background:color-mix(in srgb,var(--purple) 8%,var(--panel));outline:none}
.src-drop.over{transform:scale(1.01)}
.src-drop>span:nth-child(3){flex:1;display:grid}
.src-drop small,.src-file small,.src-mode small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}
.src-ic{font-size:1.6rem}
.src-files{display:grid;gap:8px}
.src-file{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:8px 10px 8px 12px;background:var(--panel)}
.src-file.bad{border-color:var(--bad);background:var(--badbg)}
.src-fi{font-size:1.3rem}.src-fn{flex:1;min-width:0}.src-fn b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-warn{color:var(--orange-deep);font-weight:600;font-size:.85rem;margin:0}
.src-mode{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.src-mode .src-lbl{grid-column:1/-1;font-weight:700;font-size:.9rem;color:var(--muted)}
@media (max-width:640px){.src-mode{grid-template-columns:minmax(0,1fr)}}
.src-mode label{position:relative;cursor:pointer;border:2px solid var(--line);border-radius:14px;padding:10px 12px 10px 14px;font-weight:600}
.src-mode input{position:absolute;opacity:0;pointer-events:none}
.src-mode label:has(input:checked){border-color:var(--purple);background:color-mix(in srgb,var(--purple) 10%,var(--panel))}
label.need{outline:2px solid color-mix(in srgb,var(--orange) 60%,transparent);outline-offset:6px;border-radius:8px}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
label.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--green)}

/* public offer gate (common.js) */
.ofg{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--page) 80%,transparent);backdrop-filter:blur(8px);overflow-y:auto}
.ofg-card{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:26px;display:grid;gap:14px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.ofg-ic{font-size:2.4rem;line-height:1}
.ofg-card ul{margin:0;padding-left:20px;display:grid;gap:8px}
.ofg-link{font-weight:700;color:var(--purple-deep)}
.ofg-card .btn.go{width:100%}
@media (prefers-reduced-motion:no-preference){.ofg-card{animation:pageIn .45s cubic-bezier(.2,.8,.2,1)}}
.side-link{font-size:.82rem;color:var(--muted);text-decoration:none;padding:0 4px}
.side-link:hover{color:var(--ink);text-decoration:underline}