/* =========================================================
   AI CLOUD PORTAL v3 — design system
   Sky ultramarine + sunrise accent · Chakra Petch / IBM Plex Sans Thai Looped
   ========================================================= */

:root{
  --page:#F3F5FD;
  --sky-100:#E7EBFC;
  --sky-200:#D3DAFA;
  --surface:#FFFFFF;
  --ink:#121A3A;
  --ink-2:#3A4266;
  --mist:#6E7699;
  --line:#DFE3F4;
  --line-2:#C9D0EE;
  --ultra:#3B4EF5;
  --ultra-600:#2B3BD6;
  --ultra-800:#1B258F;
  --ultra-50:#EEF0FF;
  --sun:#FF8A3D;
  --sun-ink:#A9480B;
  --sun-50:#FFF2E8;
  --mint:#0E9F6A;
  --mint-50:#E3F6EE;
  --rose:#DC3E48;
  --rose-50:#FDEDEE;
  --f-display:'Chakra Petch','IBM Plex Sans Thai Looped',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Thai Looped',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow-1:0 1px 0 rgba(18,26,58,.04),0 10px 30px -14px rgba(27,37,143,.22);
  --shadow-2:0 2px 4px rgba(18,26,58,.04),0 28px 60px -24px rgba(27,37,143,.38);
  --spring:cubic-bezier(.22,1.2,.36,1);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sky-grad:linear-gradient(180deg,#2433C4 0%,#3B4EF5 58%,#6676FF 100%);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;min-height:100vh;font-family:var(--f-body);font-size:15px;line-height:1.6;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0;letter-spacing:-.005em}
p{margin:0}
a{color:var(--ultra-600)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--sky-100);padding:1px 6px;border-radius:6px}
img,svg{display:block}
.ico{width:20px;height:20px;flex:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--mist)}
.ta-r{text-align:right}
.wrap{width:min(1180px,100%);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid rgba(59,78,245,.45);outline-offset:2px;border-radius:8px}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none}
.skip-link:focus{top:12px}
[hidden]{display:none!important}

/* ---------- Buttons ---------- */
.btn{--bh:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--bh);padding:0 18px;border-radius:var(--r-md);border:1.5px solid transparent;font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,border-color .18s,color .18s;position:relative;user-select:none}
.btn .ico{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--ultra);color:#fff;box-shadow:0 10px 22px -10px rgba(59,78,245,.75)}
.btn-primary:hover{background:var(--ultra-600);transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(59,78,245,.8)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--line-2);background:var(--page)}
.btn-mint{background:var(--mint);color:#fff;box-shadow:0 10px 20px -12px rgba(14,159,106,.8)}
.btn-mint:hover{background:#0B8B5C}
.btn-sun{background:var(--sun);color:#fff;box-shadow:0 10px 20px -12px rgba(255,138,61,.9)}
.btn-danger{background:var(--rose);color:#fff}
.btn-danger:hover{background:#C52F39}
.btn-onink{background:rgba(255,255,255,.1);color:#fff}
.btn-onink:hover{background:rgba(255,255,255,.18)}
.btn-onink.is-danger:hover{background:var(--rose)}
.btn-sm{--bh:36px;padding:0 13px;font-size:14px;border-radius:11px}
.btn-lg{--bh:52px;font-size:16px;padding:0 22px}
.btn-block{width:100%}
.btn.is-busy{pointer-events:none;color:transparent!important}
.btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid;border-color:rgba(255,255,255,.95) rgba(255,255,255,.95) rgba(255,255,255,.3) rgba(255,255,255,.3);animation:spin .7s linear infinite}
.btn-ghost.is-busy::after{border-color:var(--ultra) var(--ultra) var(--sky-200) var(--sky-200)}
.link-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--ultra-600);font-weight:600;font-size:14px;padding:4px 2px}
.link-btn .ico{width:16px;height:16px}
.link-btn:hover{text-decoration:underline}

.icon-btn{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:12px;border:0;background:transparent;color:var(--ink-2);transition:background-color .15s,color .15s,transform .15s;position:relative;text-decoration:none;flex:none}
.icon-btn:hover{background:var(--sky-100);color:var(--ultra-600)}
.icon-btn:active{transform:scale(.92)}
.icon-btn-danger:hover{background:var(--rose-50);color:var(--rose)}
.icon-btn.is-done{color:var(--mint);background:var(--mint-50)}

@media (hover:hover){
  [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);background:var(--ink);color:#fff;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;padding:7px 9px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:20;font-family:var(--f-body)}
  [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
}

/* ---------- Brand ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{width:36px;height:36px;flex:none;filter:drop-shadow(0 6px 10px rgba(27,37,143,.35))}
.brand-text{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.06em;white-space:nowrap}
.brand-text em{font-style:normal;font-weight:500;opacity:.7}
.brand-role{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--sun);color:#fff;font-family:var(--f-display)}

/* ---------- Topbar (sits on the sky, frosts on scroll) ---------- */
.topbar{--tb-fg:#fff;--tb-soft:rgba(255,255,255,.72);--tb-pill:rgba(255,255,255,.16);--tb-hover:rgba(255,255,255,.1);position:sticky;top:0;z-index:40;background:#2433C4;color:var(--tb-fg);transition:background-color .3s,box-shadow .3s,color .3s}
.topbar.is-scrolled{--tb-fg:var(--ink);--tb-soft:var(--mist);--tb-pill:var(--ultra-50);--tb-hover:var(--sky-100);background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line),0 10px 30px -20px rgba(27,37,143,.4)}
.topbar-inner{width:min(1180px,100%);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:20px}
.topnav{display:flex;gap:4px;margin-left:12px}
.topnav-item{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;color:var(--tb-soft);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:15px;transition:background-color .2s,color .2s}
.topnav-item .ico{width:18px;height:18px}
.topnav-item:hover{background:var(--tb-hover);color:var(--tb-fg)}
.topnav-item.is-active{background:var(--tb-pill);color:var(--tb-fg)}
.topbar.is-scrolled .topnav-item.is-active{color:var(--ultra-600)}
.nav-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sun);color:#fff;font-size:12px;line-height:20px;text-align:center;font-family:var(--f-display);animation:badge-pulse 2.4s ease-in-out infinite}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:8px}
.user-chip{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:999px;text-decoration:none;color:var(--tb-fg);transition:background-color .2s;max-width:220px}
.user-chip:hover{background:var(--tb-hover)}
.user-chip span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:14px}
.btn-logout{--bh:38px;padding:0 14px;font-size:14px;background:rgba(220,62,72,.92);color:#fff;border-radius:12px}
.btn-logout:hover{background:var(--rose)}
.btn-logout .ico{width:17px;height:17px}

.bottomnav{display:none}

/* ---------- Avatar ---------- */
.avatar{--h:230;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:hsl(var(--h) 80% 93%);color:hsl(var(--h) 55% 34%);font-family:var(--f-display);font-weight:700;font-size:16px}
.avatar-xs{width:26px;height:26px;font-size:12px}
.avatar-sm{width:32px;height:32px;font-size:14px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.avatar-xl{width:96px;height:96px;font-size:40px;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 20px 40px -16px rgba(0,0,0,.35)}
.avatar-lg{width:84px;height:84px;font-size:34px}
.avatar-photo{background:var(--sky-100);overflow:hidden;outline:1px solid rgba(18,26,58,.1);outline-offset:-1px}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ---------- Sky band ---------- */
.sky-band{position:relative;overflow:hidden;background:var(--sky-grad);color:#fff;padding:34px 0 112px;isolation:isolate}
.sky-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative}
.sky-hello{font-family:var(--f-display);font-weight:600;font-size:15px;color:rgba(255,255,255,.75);margin-bottom:4px}
.sky-copy h1{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.01em;text-shadow:0 10px 30px rgba(10,16,80,.3)}
.sky-sub{margin-top:8px;color:rgba(255,255,255,.82);font-size:16px;max-width:46ch}

.sky-clouds{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.sky-clouds i{position:absolute;display:block;width:220px;height:62px;border-radius:999px;background:#fff;opacity:.1;animation:drift linear infinite}
.sky-clouds i::before,.sky-clouds i::after{content:"";position:absolute;background:#fff;border-radius:50%}
.sky-clouds i::before{width:96px;height:96px;left:34px;top:-48px}
.sky-clouds i::after{width:72px;height:72px;left:112px;top:-30px}
.sky-clouds i:nth-child(1){top:30%;left:-10%;animation-duration:70s}
.sky-clouds i:nth-child(2){top:64%;left:35%;scale:.7;opacity:.08;animation-duration:95s;animation-delay:-40s}
.sky-clouds i:nth-child(3){top:22%;left:68%;scale:1.3;opacity:.07;animation-duration:120s;animation-delay:-70s}
.sky-clouds i:nth-child(4){top:82%;left:10%;scale:.9;opacity:.09;animation-duration:85s;animation-delay:-20s}

/* Quota cloud meter */
.quota-cloud{position:relative;width:250px;flex:none;text-align:center}
.quota-cloud svg{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 30px rgba(10,16,80,.3))}
.qc-shape{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.55);stroke-width:1.5}
.qc-level{transform:translateY(var(--lvl,110px));transition:transform 1.2s var(--ease)}
.is-intro .qc-level{animation:fill-up 1.6s var(--ease) both .35s}
.qc-wave{fill:#fff;opacity:.95;animation:wave 3.2s linear infinite}
.qc-label{position:absolute;left:0;right:0;bottom:16%;display:flex;flex-direction:column;align-items:center;color:var(--ultra-800)}
.quota-cloud.is-low .qc-label{color:#fff}
.qc-label strong{font-family:var(--f-display);font-size:34px;line-height:1}
.qc-label span{font-size:12.5px;font-weight:600;opacity:.85}
.quota-cloud.is-full .qc-wave{fill:#FFE3CF}

/* ---------- Main app shell ---------- */
.app-main{padding-bottom:64px}

/* ---------- Uploader ---------- */
.uploader{position:relative;z-index:3;margin-top:-80px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:12px}
.dropzone{--mx:50%;--my:50%;display:grid;justify-items:center;text-align:center;gap:14px;padding:34px 22px 26px;border:2px dashed var(--line-2);border-radius:20px;cursor:pointer;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(59,78,245,.09),transparent 60%),var(--surface);transition:border-color .2s,background-color .2s,transform .25s var(--spring)}
.dropzone:hover,.dropzone:focus-within{border-color:var(--ultra)}
.dropzone.is-drag{border-color:var(--ultra);border-style:solid;background-color:var(--ultra-50);transform:scale(1.01)}
.is-full .dropzone{cursor:not-allowed;border-color:#F3C9A8;background:var(--sun-50)}
.dz-orb{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(160deg,#5B6CFF,#2433C4);color:#fff;box-shadow:0 18px 30px -14px rgba(36,51,196,.8);animation:bob 4s ease-in-out infinite}
.dz-orb .ico{width:38px;height:38px;stroke-width:1.6}
.is-drag .dz-orb{animation:none;transform:translateY(-6px) scale(1.08);box-shadow:0 0 0 10px rgba(59,78,245,.12),0 22px 34px -14px rgba(36,51,196,.8);transition:.3s var(--spring)}
.is-full .dz-orb{background:linear-gradient(160deg,#FFB27A,#F07422);animation:none}
.dz-text{display:grid;gap:4px}
.dz-text strong{font-family:var(--f-display);font-size:22px;font-weight:700}
.dz-text span{color:var(--mist)}
.on-touch{display:none}
@media (hover:none) and (pointer:coarse){.on-pointer{display:none}.on-touch{display:inline}}
.qc-label i{font-style:normal}
.dz-text u{color:var(--ultra-600);text-decoration-thickness:2px;text-underline-offset:4px;font-weight:600}
.dz-limits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.dz-limits>span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);background:var(--page);border-radius:999px;padding:5px 12px 5px 9px}
.dz-limits .ico{width:16px;height:16px;color:var(--ultra)}

/* Queue */
.queue{padding:18px 10px 6px;animation:rise .4s var(--ease) both}
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px 12px}
.queue-head h2{font-size:19px}
.queue-head p{color:var(--mist);font-size:14px}
.queue-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.queue-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 6px 8px}
.ring{position:relative;width:56px;height:56px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--sky-100);stroke-width:3.5}
.ring .ring-val{stroke:var(--ultra);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:calc(97.4 - 97.4 * var(--p) / 100);transition:stroke-dashoffset .3s var(--ease),stroke .3s}
.ring.is-done .ring-val{stroke:var(--mint)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:13px}

.q-item{--p:0;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px;border-radius:16px;background:var(--page);border:1.5px solid transparent;animation:q-in .45s var(--spring) both;transition:background-color .3s,border-color .3s}
.q-item.is-leaving{animation:q-out .3s var(--ease) both}
.q-ico{position:relative;width:44px;height:44px;border-radius:14px;background:var(--surface);color:var(--ultra);display:grid;place-items:center;box-shadow:0 4px 10px -6px rgba(27,37,143,.4);overflow:hidden;transition:background-color .3s,color .3s}
.q-ico>span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--spring),opacity .3s}
.q-ico .ico{width:22px;height:22px}
.q-ico-done,.q-ico-err{opacity:0;transform:scale(.3)}
.q-main{min-width:0;display:grid;gap:8px}
.q-row1{display:flex;align-items:baseline;gap:10px;min-width:0}
.q-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-size{color:var(--mist);font-size:13px;flex:none}
.q-bar{height:6px;border-radius:999px;background:var(--sky-100);overflow:hidden;display:none}
.q-bar span{display:block;height:100%;width:calc(var(--p) * 1%);border-radius:inherit;background:linear-gradient(90deg,#8592FF,var(--ultra),#8592FF);background-size:200% 100%;transition:width .25s linear}
.q-status{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mist)}
.q-speed{font-variant-numeric:tabular-nums;white-space:nowrap}
.q-side{display:flex;align-items:center;gap:4px}
.q-pct{display:none;font-family:var(--f-display);font-weight:700;font-size:15px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.q-retry{display:none}
.q-done{display:none;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.q-done-actions{display:flex;gap:2px}
.q-link{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--mint-50);color:#0B7A52;font-weight:600;font-size:14px;padding:7px 12px;border-radius:10px;max-width:100%;min-width:0}
.q-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-link .ico{width:16px;height:16px}

.q-item[data-state="uploading"],.q-item[data-state="processing"]{background:var(--ultra-50)}
.q-item[data-state="uploading"] .q-bar,.q-item[data-state="processing"] .q-bar{display:block}
.q-item[data-state="uploading"] .q-bar span{animation:stripes 1.2s linear infinite}
.q-item[data-state="uploading"] .q-pct{display:block}
.q-item[data-state="uploading"] .q-slug,.q-item[data-state="processing"] .q-slug,.q-item[data-state="done"] .q-slug{display:none}
.q-item[data-state="uploading"] .q-remove,.q-item[data-state="processing"] .q-remove,.q-item[data-state="done"] .q-remove{display:none}
.q-item[data-state="processing"] .q-bar span{width:40%;animation:indeterminate 1.1s var(--ease) infinite}
.q-item[data-state="processing"] .q-ico{animation:lift 1s ease-in-out infinite}
.q-item[data-state="done"]{background:var(--surface);border-color:#BFE8D6;animation:q-done .7s var(--spring)}
.q-item[data-state="done"] .q-status{display:none}
.q-item[data-state="done"] .q-done{display:flex}
.q-item[data-state="done"] .q-ico{background:var(--mint);color:#fff}
.q-item[data-state="done"] .q-ico-file{transform:translateY(-40px) scale(.6);opacity:0}
.q-item[data-state="done"] .q-ico-done{opacity:1;transform:none;transition-delay:.15s}
.q-item[data-state="error"],.q-item[data-state="invalid"]{background:var(--rose-50);border-color:#F6CDD0}
.q-item[data-state="error"] .q-status,.q-item[data-state="invalid"] .q-status{color:#B12C35;font-weight:500}
.q-item[data-state="error"] .q-ico,.q-item[data-state="invalid"] .q-ico{color:var(--rose)}
.q-item[data-state="error"] .q-ico-file,.q-item[data-state="invalid"] .q-ico-file{opacity:0;transform:scale(.3)}
.q-item[data-state="error"] .q-ico-err,.q-item[data-state="invalid"] .q-ico-err{opacity:1;transform:none}
.q-item[data-state="error"] .q-retry{display:inline-grid}
.q-item[data-state="invalid"] .q-slug{display:none}
.q-item.shake{animation:shake .4s}

/* Slug input */
.slug-input{position:relative;display:flex;align-items:center;height:48px;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color .2s,box-shadow .2s;min-width:0}
.slug-input:focus-within{border-color:var(--ultra);box-shadow:0 0 0 4px rgba(59,78,245,.14)}
.slug-prefix{padding:0 2px 0 14px;color:var(--mist);font-weight:600;flex:none}
.slug-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 38px 0 2px;font-weight:600;color:var(--ink)}
.slug-input-sm{height:40px;border-radius:11px;max-width:420px}
.slug-input-sm .slug-prefix{padding-left:11px;font-size:14px}
.slug-input-sm input{font-size:14px}
.slug-state{position:absolute;right:10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:.25s var(--spring)}
.slug-input[data-check="ok"] .slug-state{opacity:1;transform:none;background:var(--mint)}
.slug-input[data-check="bad"] .slug-state{opacity:1;transform:none;background:var(--rose)}
.slug-input[data-check="busy"] .slug-state{opacity:1;transform:none;border:2px solid var(--sky-200);border-top-color:var(--ultra);animation:spin .7s linear infinite}
.slug-input[data-check="ok"] .slug-state::before{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.slug-input[data-check="bad"] .slug-state::before{content:"!";color:#fff;font-weight:700;font-size:13px;line-height:1}
.slug-input[data-check="bad"]{border-color:#F0A9AE}

/* ---------- Stat strip ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0 38px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.stat{display:flex;align-items:center;gap:10px;padding:18px 22px;min-width:0}
.stat+.stat{border-left:1px solid var(--line)}
.stat .ico{color:var(--ultra)}
.stat-label{color:var(--mist);font-size:14px}
.stat strong{margin-left:auto;font-family:var(--f-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.stat-dot{width:10px;height:10px;border-radius:50%;flex:none}
.stat-dot.is-on{background:var(--mint);box-shadow:0 0 0 4px var(--mint-50)}
.stat-dot.is-off{background:#AEB4CC;box-shadow:0 0 0 4px var(--sky-100)}

/* ---------- Section heads & search ---------- */
.list-head,.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.list-head h2,.panel-head h2{font-size:26px}
.list-head p,.panel-head p{color:var(--mist);margin-top:2px}
.searchbox{position:relative;display:flex;align-items:center;width:min(340px,100%);height:46px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.searchbox:focus-within{border-color:var(--ultra);box-shadow:0 0 0 4px rgba(59,78,245,.12)}
.searchbox>.ico{position:absolute;left:13px;width:18px;height:18px;color:var(--mist);pointer-events:none}
.searchbox input{width:100%;height:100%;border:0;outline:0;background:transparent;padding:0 40px 0 40px;font-size:14.5px}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox-clear{position:absolute;right:6px;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:var(--mist)}
.searchbox-clear:hover{background:var(--sky-100);color:var(--ink)}
.searchbox-clear .ico{width:16px;height:16px}

/* ---------- Site grid ---------- */
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.site-card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s;min-width:0}
.site-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.is-intro .site-card{animation:card-in .6s var(--spring) both;animation-delay:calc(var(--i,0) * 45ms + 250ms)}
.site-card.is-updated{animation:flash-ring 1.2s var(--ease)}
.site-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--sky-100),#F7F8FF);isolation:isolate}
.site-thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(59,78,245,.05) 22px 23px),repeating-linear-gradient(0deg,transparent 0 22px,rgba(59,78,245,.05) 22px 23px)}
.site-thumb iframe{position:absolute;top:0;left:0;width:400%;height:400%;border:0;transform:scale(.25);transform-origin:0 0;pointer-events:none;background:#fff;opacity:0;transition:opacity .5s}
.site-thumb iframe.is-loaded{opacity:1}
.is-off .site-thumb iframe.is-loaded{filter:grayscale(1) contrast(.9);opacity:.55}
.thumb-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,58,0) 50%,rgba(18,26,58,.28));z-index:1}
.state-pill{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(255,255,255,.94);font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 4px 12px -4px rgba(18,26,58,.3)}
.state-pill i{width:8px;height:8px;border-radius:50%;background:#AEB4CC}
.state-pill.is-on i{background:var(--mint);animation:live 2s ease-in-out infinite}
.thumb-open{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:.25s var(--ease)}
.thumb-open .ico{width:15px;height:15px}
.site-thumb:hover .thumb-open,.site-thumb:focus-visible .thumb-open{opacity:1;transform:none}
.site-body{padding:16px 18px 8px;display:grid;gap:10px;min-width:0}
.site-body h3{font-family:var(--f-body);font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-url{display:flex;align-items:center;gap:7px;width:100%;min-width:0;border:0;padding:8px 10px;border-radius:11px;background:var(--ultra-50);color:var(--ultra-600);font-weight:600;font-size:14px;text-align:left;transition:background-color .2s}
.site-url:hover{background:var(--sky-200)}
.site-url .ico{width:16px;height:16px}
.site-url span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-url em{opacity:0;transition:opacity .2s}
.site-url:hover em,.site-url.is-copied em{opacity:1}
.site-url.is-copied{background:var(--mint-50);color:#0B7A52}
.site-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--mist);font-size:13px}
.site-meta li{display:inline-flex;align-items:center;gap:5px}
.site-meta .ico{width:15px;height:15px}
.site-actions{display:flex;align-items:center;gap:2px;padding:8px 10px 10px 12px;margin-top:auto;border-top:1px solid var(--line)}
.site-actions form{margin:0;display:contents}
.site-actions .switch-form{display:block;margin-left:auto}

/* Switch */
.switch{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 4px 6px 8px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--mist)}
.switch:hover{background:var(--page)}
.switch-track{position:relative;width:42px;height:24px;border-radius:999px;background:#C9CEE3;transition:background-color .25s}
.switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(18,26,58,.25);transition:transform .35s var(--spring)}
.switch.is-on{color:#0B7A52}
.switch.is-on .switch-track{background:var(--mint)}
.switch.is-on .switch-thumb{transform:translateX(18px)}
.switch.is-busy{pointer-events:none}
.switch.is-busy .switch-thumb{animation:pulse-thumb .5s ease-in-out infinite alternate}

/* Empty */
.empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 24px;background:var(--surface);border-radius:var(--r-xl);border:1.5px dashed var(--line-2)}
.empty h3{font-size:22px}
.empty p{color:var(--mist);max-width:44ch;margin-bottom:8px}
.empty-sm{padding:36px 20px;border:0;background:transparent}
.empty-sm h3{font-size:18px}
.empty-art{position:relative;width:120px;height:90px;color:var(--sky-200);margin-bottom:6px}
.empty-art>.ico{width:120px;height:90px;stroke-width:1.2}
.empty-art span{position:absolute;left:50%;top:52%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:12px;background:var(--ultra);color:#fff;display:grid;place-items:center;animation:bob 3s ease-in-out infinite;box-shadow:0 12px 20px -10px rgba(59,78,245,.8)}
.empty-art span .ico{width:24px;height:24px}

/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.pager-nums{display:flex;gap:6px}
.pager-step,.pager-num{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;min-width:42px;padding:0 12px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink-2);text-decoration:none;font-family:var(--f-display);font-weight:600;transition:.2s}
.pager-step .ico{width:16px;height:16px}
.pager-step:hover,.pager-num:hover{border-color:var(--ultra);color:var(--ultra-600)}
.pager-num.is-active{background:var(--ultra);border-color:var(--ultra);color:#fff;box-shadow:0 8px 16px -8px rgba(59,78,245,.8)}
.pager-step.is-disabled{opacity:.4}
.pager-gap{align-self:center;color:var(--mist);padding:0 2px}

/* ---------- Admin ---------- */
.sky-band-admin{padding-bottom:104px}
.sky-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;flex:0 1 640px}
.sky-metrics>div{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.sky-metrics dt{font-size:13px;color:rgba(255,255,255,.75)}
.sky-metrics dd{margin:2px 0 0;font-family:var(--f-display);font-size:32px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.sky-metrics .is-sun{background:rgba(255,138,61,.22);border-color:rgba(255,178,122,.55)}
.sky-metrics .is-sun dd{color:#FFD2AE}
.page-admin .app-main>.wrap{position:relative;z-index:3;margin-top:-76px}

.callout{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 16px;margin-bottom:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2);text-decoration:none;color:var(--ink);border:1.5px solid #FFD9BD;transition:transform .25s var(--spring)}
.callout:hover{transform:translateY(-2px)}
.callout-ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--sun-50);color:var(--sun);flex:none}
.callout-ico .ico{width:24px;height:24px;animation:hourglass 3s ease-in-out infinite}
.callout-text{display:grid;flex:1;min-width:0}
.callout-text strong{font-family:var(--f-display);font-size:18px}
.callout-text span{color:var(--mist);font-size:14px}

.panel{display:none;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:24px 24px 26px}
.panel.is-active{display:block}
.panel.is-entering{animation:rise .45s var(--ease) both}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;transition:.2s}
.chip b{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--page);font-family:var(--f-display);font-size:13px;line-height:24px;text-align:center}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.is-active b{background:rgba(255,255,255,.16)}
.chip-sun b{background:var(--sun);color:#fff}
.chip-sun.is-active{background:var(--sun-ink);border-color:var(--sun-ink)}
.preset-row .chip{padding:0 16px;cursor:pointer}
.bulk-form{display:none}

.table{border:1.5px solid var(--line);border-radius:var(--r-lg)}
.table-head,.trow{display:grid;grid-template-columns:44px minmax(230px,2.4fr) 130px minmax(140px,1.1fr) 120px minmax(150px,auto);align-items:center;gap:14px;padding:12px 18px}
.table-sites .table-head,.table-sites .trow{grid-template-columns:44px minmax(230px,2.4fr) minmax(140px,1.3fr) 120px 80px minmax(130px,auto)}
.table-head{background:var(--page);border-bottom:1.5px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;color:var(--mist);font-size:13px;font-weight:600}
.table-head .m-only{display:none}
.table-quick{padding:8px 18px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--sun-50),transparent)}
.table-quick .link-btn{color:var(--sun-ink)}
.trow{position:relative;border-bottom:1px solid var(--line);transition:background-color .2s;min-height:68px}
.trow:last-child{border-bottom:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.trow:hover{background:#FAFBFF}
.trow::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--ultra);transform:scaleY(0);transition:transform .25s var(--spring)}
.trow.state-pending::before{background:var(--sun);transform:scaleY(1);opacity:.65}
.trow.is-selected,.trow:has([data-select-item]:checked){background:var(--ultra-50)}
.trow.is-selected::before,.trow:has([data-select-item]:checked)::before{background:var(--ultra);transform:scaleY(1);opacity:1}
.is-intro .trow{animation:row-in .5s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms + 200ms)}
.trow.is-leaving{animation:row-out .4s var(--ease) both}
.trow.is-updated{animation:row-flash 1.4s var(--ease)}
.tcell{min-width:0}
.tcell-who{display:flex;align-items:center;gap:12px}
.who{display:grid;min-width:0}
.who strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who strong small{font-weight:500;color:var(--mist)}
.who span{color:var(--mist);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcell-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.tcell-actions form{margin:0}
.check-placeholder{display:grid;place-items:center;width:22px;color:var(--ultra)}
.check-placeholder .ico{width:18px;height:18px}
.file-tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ultra-50);color:var(--ultra);flex:none}
.slug-copy{border:0;background:none;padding:0;color:var(--ultra-600);font-size:13.5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.slug-copy:hover{text-decoration:underline}
.slug-copy.is-copied{color:var(--mint)}
.owner{display:flex;align-items:center;gap:8px;min-width:0}
.owner span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.num{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums}

.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-pending{background:var(--sun-50);color:var(--sun-ink)}
.badge-pending i{animation:live-sun 1.6s ease-in-out infinite}
.badge-active{background:var(--mint-50);color:#0B7A52}
.badge-suspended{background:var(--rose-50);color:#B12C35}
.badge-admin{background:var(--ultra-50);color:var(--ultra-600)}
.badge-off{background:var(--sky-100);color:var(--mist)}

.mini-quota{display:grid;gap:6px;font-size:13.5px;color:var(--ink-2)}
.mini-quota b{font-family:var(--f-display)}
.mini-quota em{font-style:normal;font-size:11.5px;color:var(--ultra-600);background:var(--ultra-50);padding:1px 6px;border-radius:6px;margin-left:4px}
.mini-bar{display:block;height:4px;border-radius:999px;background:var(--sky-100);overflow:hidden;max-width:140px}
.mini-bar i{display:block;height:100%;border-radius:inherit;background:var(--ultra)}

/* Custom checkbox */
.check{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;cursor:pointer;margin:-4px}
.check input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.check-box{width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);background:var(--surface);display:grid;place-items:center;transition:background-color .18s,border-color .18s;pointer-events:none}
.check-box svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .25s var(--ease) .05s}
.check:hover .check-box{border-color:var(--ultra)}
.check input:focus-visible+.check-box{box-shadow:0 0 0 4px rgba(59,78,245,.25)}
.check input:checked+.check-box{background:var(--ultra);border-color:var(--ultra);animation:check-pop .35s var(--spring)}
.check input:checked+.check-box svg{stroke-dashoffset:0}
.check input:indeterminate+.check-box{background:var(--ultra);border-color:var(--ultra)}
.check input:indeterminate+.check-box::after{content:"";width:10px;height:2.5px;border-radius:2px;background:#fff}
.check input:indeterminate+.check-box svg{display:none}

/* Row menu */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:232px;padding:6px;background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px var(--line),0 24px 50px -18px rgba(18,26,58,.35);display:none;transform-origin:top right}
.menu.is-open .menu-pop{display:block;animation:pop .22s var(--spring)}
.menu.is-up .menu-pop{top:auto;bottom:calc(100% + 6px);transform-origin:bottom right}
.menu-pop form{margin:0}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;text-align:left;font-size:14.5px;color:var(--ink)}
.menu-pop button .ico{width:18px;height:18px;color:var(--mist)}
.menu-pop button:hover{background:var(--page)}
.menu-pop button.is-danger{color:var(--rose)}
.menu-pop button.is-danger .ico{color:var(--rose)}
.menu-pop button.is-danger:hover{background:var(--rose-50)}
.trow:has(.menu.is-open){z-index:5}

/* Bulk bar */
.bulkbar{position:fixed;left:50%;bottom:24px;z-index:45;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:20px;background:var(--ink);color:#fff;box-shadow:0 30px 60px -20px rgba(18,26,58,.6),0 0 0 1px rgba(255,255,255,.06) inset;transform:translate(-50%,160%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s var(--spring),opacity .25s,visibility 0s .45s;max-width:calc(100% - 24px)}
.bulkbar.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto;visibility:visible;transition:transform .45s var(--spring),opacity .25s,visibility 0s}
.bulk-count{white-space:nowrap;font-size:14.5px;color:rgba(255,255,255,.8)}
.bulk-count b{display:inline-block;font-family:var(--f-display);font-size:20px;color:#fff;margin-right:4px;min-width:1ch;text-align:center}
.bulk-count b.bump{animation:bump .35s var(--spring)}
.bulk-actions{display:flex;gap:8px}
.bulk-x{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:rgba(255,255,255,.7);display:grid;place-items:center}
.bulk-x:hover{background:rgba(255,255,255,.1);color:#fff}
.has-bulkbar .app-main{padding-bottom:120px}

/* Stepper (quota) */
.stepper{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px 0 4px}
.stepper-btn{width:52px;height:52px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);font-size:24px;font-family:var(--f-display);color:var(--ink-2);transition:.15s}
.stepper-btn:hover{border-color:var(--ultra);color:var(--ultra)}
.stepper-btn:active{transform:scale(.92)}
.stepper-input{width:140px;height:64px;border-radius:18px;border:1.5px solid var(--line);text-align:center;font-family:var(--f-display);font-size:34px;font-weight:700;outline:none;-moz-appearance:textfield;appearance:textfield}
.stepper-input::-webkit-outer-spin-button,.stepper-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-input:focus{border-color:var(--ultra);box-shadow:0 0 0 4px rgba(59,78,245,.14)}
.stepper-input::placeholder{color:var(--line-2)}
.preset-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}

/* ---------- Dialog / sheet ---------- */
dialog.sheet{border:0;padding:0;border-radius:24px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px rgba(18,26,58,.6);overflow:auto}
dialog.sheet[open]{animation:sheet-in .4s var(--spring)}
dialog.sheet.is-closing{animation:sheet-out .22s var(--ease) forwards}
dialog.sheet::backdrop{background:rgba(18,26,58,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade-in .3s}
dialog.sheet.is-closing::backdrop{animation:fade-out .22s forwards}
.sheet-body{display:grid;gap:18px;padding:24px;margin:0}
.sheet-head{display:flex;align-items:flex-start;gap:14px}
.sheet-head>div{flex:1;min-width:0}
.sheet-head h2{font-size:21px}
.sheet-head p{color:var(--mist);font-size:14px;margin-top:3px}
.sheet-ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--ultra-50);color:var(--ultra);flex:none}
.sheet-ico .ico{width:23px;height:23px}
.sheet-x{width:38px;height:38px;border-radius:12px;border:0;background:var(--page);display:grid;place-items:center;color:var(--mist);flex:none}
.sheet-x:hover{color:var(--ink);background:var(--sky-100)}
.sheet-x .ico{width:18px;height:18px}
.sheet-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.sheet-confirm{width:min(420px,calc(100% - 32px))}
.sheet-confirm .sheet-body{justify-items:center;text-align:center;padding-top:30px}
.sheet-confirm h2{font-size:22px}
.sheet-confirm p{color:var(--ink-2);max-width:36ch}
.sheet-confirm .sheet-actions{width:100%;justify-content:center}
.sheet-confirm .sheet-actions .btn{flex:1;max-width:200px}
.confirm-ico{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:var(--rose-50);color:var(--rose)}
dialog[open] .confirm-ico{animation:wobble .6s var(--spring)}
.confirm-ico .ico{width:30px;height:30px}
.confirm-ico.is-calm{background:var(--ultra-50);color:var(--ultra)}
.qr-frame{display:grid;place-items:center;padding:22px;border-radius:20px;background:linear-gradient(160deg,var(--ultra-50),#fff);border:1.5px solid var(--line)}
.qr-frame>div{padding:14px;background:#fff;border-radius:16px;box-shadow:var(--shadow-1)}
dialog[open] .qr-frame>div{animation:pop .45s var(--spring)}
.qr-frame canvas,.qr-frame img{width:220px!important;height:220px!important}
.qr-url{border:0;background:var(--page);border-radius:12px;padding:10px 12px;color:var(--ultra-600);font-weight:600;font-size:14px;word-break:break-all;text-align:center}
.qr-url:hover{background:var(--sky-100)}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px;min-width:0}
.field-label{font-weight:600;font-size:14px;color:var(--ink-2)}
.field-help{font-size:13px;color:var(--mist)}
.field-help.is-ok{color:var(--mint)}
.field-help.is-bad{color:var(--rose)}
.input,.input-ico input,.pw-input input{width:100%;height:50px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface);padding:0 14px;outline:none;transition:border-color .2s,box-shadow .2s;font-size:15px}
.input:focus,.input-ico input:focus,.pw-input input:focus{border-color:var(--ultra);box-shadow:0 0 0 4px rgba(59,78,245,.14)}
.input-ico{position:relative;display:block}
.input-ico>.ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--mist);pointer-events:none;transition:color .2s}
.input-ico:focus-within>.ico{color:var(--ultra)}
.input-ico input{padding-left:46px}
.pw-input{position:relative;display:block}
.pw-input input{padding-right:52px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:11px;border:0;background:transparent;display:grid;place-items:center;color:var(--mist)}
.pw-toggle:hover{background:var(--page);color:var(--ink)}
.pw-toggle .ico{width:19px;height:19px}
.match-state{position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;opacity:0;transform:scale(.4);transition:.25s var(--spring);display:grid;place-items:center}
.pw-input[data-match="ok"] .match-state{opacity:1;transform:none;background:var(--mint)}
.pw-input[data-match="bad"] .match-state{opacity:1;transform:none;background:var(--rose)}
.pw-input[data-match="ok"] .match-state::before{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.pw-input[data-match="bad"] .match-state::before{content:"";width:10px;height:2px;background:#fff;border-radius:2px}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:5px}
.pw-meter i{height:5px;border-radius:999px;background:var(--sky-100);transition:background-color .3s}
.pw-meter em{font-style:normal;font-size:12.5px;color:var(--mist);margin-left:6px;min-width:10ch;text-align:right}
.pw-meter[data-score="1"] i:nth-child(-n+1){background:var(--rose)}
.pw-meter[data-score="2"] i:nth-child(-n+2){background:var(--sun)}
.pw-meter[data-score="3"] i:nth-child(-n+3){background:#3BA7E6}
.pw-meter[data-score="4"] i{background:var(--mint)}
.caps-hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sun-ink)}
.caps-hint .ico{width:15px;height:15px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-2-wide{grid-template-columns:1fr 130px}

.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:14.5px;line-height:1.5;margin-bottom:16px;animation:shake .45s}
.alert .ico{margin-top:1px}
.alert-error{background:var(--rose-50);color:#A8262F}
.alert-pending{background:var(--sun-50);color:var(--sun-ink);animation:rise .4s var(--ease)}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed;top:84px;right:20px;z-index:60;display:grid;gap:10px;width:min(380px,calc(100% - 24px));pointer-events:none}
.toast{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 12px 14px 14px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 24px 50px -20px rgba(18,26,58,.45);pointer-events:auto;overflow:hidden;animation:toast-in .5s var(--spring) both}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.35;transform-origin:left;animation:toast-timer 5.5s linear forwards}
.toast:hover::after{animation-play-state:paused}
.toast.is-leaving{animation:toast-out .3s var(--ease) forwards}
.toast-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.toast-ico .ico{width:18px;height:18px}
.toast-msg{flex:1;font-size:14.5px;line-height:1.45;padding-top:5px;color:var(--ink)}
.toast-close{width:30px;height:30px;border-radius:9px;border:0;background:none;display:grid;place-items:center;color:var(--mist)}
.toast-close:hover{background:var(--page)}
.toast-close .ico{width:16px;height:16px}
.toast-success{color:var(--mint)}.toast-success .toast-ico{background:var(--mint-50)}
.toast-error{color:var(--rose)}.toast-error .toast-ico{background:var(--rose-50)}
.toast-info{color:var(--ultra)}.toast-info .toast-ico{background:var(--ultra-50)}

/* ---------- Drop overlay ---------- */
.drop-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(36,51,196,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .2s}
.drop-overlay.is-visible{opacity:1}
.drop-overlay-inner{width:100%;height:100%;border:3px dashed rgba(255,255,255,.6);border-radius:32px;display:grid;place-content:center;justify-items:center;gap:10px;color:#fff;text-align:center}
.drop-overlay-inner .ico{width:96px;height:96px;stroke-width:1.3;animation:bob 1.6s ease-in-out infinite}
.drop-overlay-inner strong{font-family:var(--f-display);font-size:32px}
.drop-overlay-inner span{opacity:.8}

/* ---------- Profile ---------- */
.sky-band-profile{padding-bottom:110px}
.profile-hero{justify-content:flex-start;gap:24px}
.profile-grid{position:relative;z-index:3;margin-top:-72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px;align-items:start}
.profile-grid>.facts{grid-row:span 2}
.sky-org{display:flex;align-items:center;gap:7px;margin-top:6px;color:rgba(255,255,255,.92);font-weight:600;font-size:15px}
.sky-org .ico{width:17px;height:17px;flex:none;opacity:.85}
.avatar-edit{display:flex;align-items:center;gap:18px;padding:4px 0 6px}
.avatar-pick{position:relative;flex:none;cursor:pointer;border-radius:50%}
.avatar-pick:focus-within{outline:3px solid var(--ultra);outline-offset:3px}
.avatar-pick .avatar{transition:filter .2s}
.avatar-pick:hover .avatar{filter:brightness(.92)}
.avatar-pick-badge{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ultra);color:#fff;box-shadow:0 0 0 3px var(--surface)}
.avatar-pick-badge .ico{width:16px;height:16px}
.avatar-edit-copy{display:grid;gap:4px;min-width:0}
.avatar-edit-copy strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-edit-copy>span{color:var(--mist);font-size:13.5px}
.avatar-edit-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btn-ghost-danger{color:var(--rose)}
.btn-ghost-danger:hover{border-color:var(--rose);background:var(--rose-50)}
.onboard-who{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--page)}
.onboard-who>div{display:grid;min-width:0}
.onboard-who strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onboard-who span{color:var(--mist);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .who-org{display:flex;align-items:center;gap:5px;color:var(--ink-2)}
.who .who-org .ico{width:14px;height:14px;flex:none;color:var(--ultra)}
.who .who-org.is-missing{color:var(--sun-ink)}
.who .who-org.is-missing .ico{color:var(--sun)}
.card{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:26px}
.card h2{font-size:21px;margin-bottom:6px}
.card-lead{color:var(--mist);margin-bottom:20px;font-size:14.5px}
.facts dl{margin:14px 0 0;display:grid}
.facts dl>div{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.facts dl>div:last-child{border-bottom:0}
.facts dt{display:flex;align-items:center;gap:9px;color:var(--mist);font-size:14px}
.facts dt .ico{width:18px;height:18px;color:var(--ultra)}
.facts dd{margin:0;font-weight:600;text-align:right}
.facts-bar{height:8px;border-radius:999px;background:var(--sky-100);overflow:hidden;margin-top:6px}
.facts-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8592FF,var(--ultra));animation:grow-x 1.2s var(--ease) both .3s;transform-origin:left}

/* ---------- Auth ---------- */
.page-auth{background:var(--page)}
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.auth-scene{position:relative;overflow:hidden;isolation:isolate;background:var(--sky-grad);color:#fff;padding:36px clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:28px}
.auth-scene .sky-clouds i{opacity:.12}
.brand-light .brand-text{color:#fff}
.scene-copy{margin-top:auto}
.scene-copy h1{font-size:clamp(36px,4.6vw,62px);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-shadow:0 14px 40px rgba(10,16,80,.35)}
.scene-copy p{margin-top:16px;font-size:17px;color:rgba(255,255,255,.84);max-width:40ch}
.launch{position:relative;height:300px;width:min(480px,100%);margin-bottom:6px}
.launch-cloud{position:absolute;left:50%;top:0;width:230px;transform:translateX(-50%)}
.launch-cloud svg{width:100%;overflow:visible;fill:rgba(255,255,255,.95);filter:drop-shadow(0 20px 30px rgba(10,16,80,.35))}
.launch-glow{position:absolute;left:50%;top:58%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,rgba(255,178,122,.85),transparent 70%);animation:glow 2s ease-in-out infinite;mix-blend-mode:multiply}
.launch-file,.launch-link{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 13px 9px 10px;border-radius:13px;font-weight:600;font-size:13.5px;white-space:nowrap}
.launch-file{bottom:0;background:#fff;color:var(--ink);box-shadow:0 14px 24px -12px rgba(10,16,80,.55);animation:ascend 6s var(--ease) infinite;opacity:0}
.launch-file .ico{width:18px;height:18px;color:var(--ultra)}
.launch-file.f1{left:0;--dx:150px;animation-delay:0s}
.launch-file.f2{left:36%;--dx:10px;animation-delay:2s}
.launch-file.f3{right:0;--dx:-140px;animation-delay:4s}
.launch-link{left:50%;top:84px;background:rgba(18,26,58,.35);border:1px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px);animation:emit 6s var(--ease) infinite;opacity:0}
.launch-link .ico{width:16px;height:16px;color:#FFD2AE}
.launch-link.l1{--lx:90px;--ly:40px;animation-delay:3.6s}
.launch-link.l2{--lx:-200px;--ly:56px;animation-delay:5.6s}
.launch-link.l3{--lx:70px;--ly:110px;animation-delay:7.6s}

.auth-form{display:grid;place-items:center;padding:40px 24px}
.auth-card{width:min(420px,100%)}
.auth-card-wide{width:min(520px,100%)}
.auth-card h2{font-size:34px;font-weight:700}
.auth-lead{color:var(--mist);margin:6px 0 26px}
.auth-lead strong{color:var(--ink)}
.auth-switch{margin-top:22px;text-align:center;color:var(--mist)}
.auth-switch a{font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}

.done-burst{position:relative;width:76px;height:76px;border-radius:26px;background:var(--mint);color:#fff;display:grid;place-items:center;margin-bottom:22px;animation:pop .6s var(--spring) both;box-shadow:0 20px 34px -14px rgba(14,159,106,.8)}
.done-burst::after{content:"";position:absolute;inset:-6px;border-radius:30px;border:2px solid var(--mint);animation:burst 1.4s var(--ease) .2s both}
.done-burst .ico{width:38px;height:38px;stroke-width:2.4}
.timeline{list-style:none;margin:0 0 26px;padding:0;display:grid}
.timeline li{position:relative;display:flex;gap:14px;padding-bottom:20px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.is-done::before{background:var(--mint)}
.tl-dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--page);color:var(--mist);flex:none;border:1.5px solid var(--line)}
.tl-dot .ico{width:18px;height:18px}
.timeline .is-done .tl-dot{background:var(--mint);border-color:var(--mint);color:#fff}
.timeline .is-current .tl-dot{background:var(--sun-50);border-color:#FFC9A1;color:var(--sun);animation:ring-pulse 2s ease-out infinite}
.timeline li>div{display:grid;padding-top:6px}
.timeline strong{font-weight:600}
.timeline span{color:var(--mist);font-size:14px}

.wizard-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:8px}
.wizard-steps li{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--page);color:var(--mist);font-weight:600;font-size:14px;transition:.3s}
.wizard-steps li span{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--surface);font-family:var(--f-display);border:1.5px solid var(--line)}
.wizard-steps li.is-current{background:var(--ultra-50);color:var(--ultra-600)}
.wizard-steps li.is-current span{background:var(--ultra);border-color:var(--ultra);color:#fff}
.wizard-steps li.is-done span{background:var(--mint);border-color:var(--mint);color:#fff}
.wizard-pane{border:0;margin:0;padding:0;display:grid;gap:16px;min-width:0}
.js .wizard-pane:not(.is-current){display:none}
.js .wizard-pane.is-current{animation:rise .35s var(--ease)}
.wizard-nav{display:flex;gap:10px}
.wizard-nav .btn-primary{flex:1}

/* ---------- Public status page ---------- */
.page-status{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:1fr auto;background:var(--sky-grad);position:relative;overflow-x:hidden;isolation:isolate;color:#fff}
.page-status .sky-clouds i{opacity:.13}
.closed{align-self:center;justify-self:center;width:min(640px,100%);padding:56px 24px 40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.closed-art{position:relative;width:min(300px,72vw);margin-bottom:58px;animation:rise .8s var(--ease) both}
.closed-cloud{display:block;width:100%;overflow:visible;filter:drop-shadow(0 26px 34px rgba(10,16,80,.38));animation:bob 6s ease-in-out infinite}
.closed-face{fill:none;stroke:#8E99F0;stroke-width:3.2;stroke-linecap:round}
.closed-sign{position:absolute;left:50%;top:calc(100% - 16px);translate:-50% 0;display:inline-flex;align-items:center;gap:9px;padding:10px 18px 10px 15px;border-radius:14px;background:#fff;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:18px;white-space:nowrap;box-shadow:0 18px 30px -14px rgba(10,16,80,.55);transform-origin:50% -30px;animation:sign-swing 2.4s cubic-bezier(.3,.7,.3,1) .5s both}
.closed-sign::before,.closed-sign::after{content:"";position:absolute;bottom:100%;width:2px;height:30px;border-radius:2px;background:rgba(255,255,255,.75)}
.closed-sign::before{left:24%}
.closed-sign::after{right:24%}
.closed-sign i{width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px var(--sun-50)}
.status-missing .closed-sign i{background:var(--rose);box-shadow:0 0 0 4px var(--rose-50)}
.closed h1{font-size:clamp(30px,4.4vw,46px);line-height:1.18;font-weight:700;text-wrap:balance;text-shadow:0 14px 40px rgba(10,16,80,.3);animation:rise .8s var(--ease) .12s both}
.closed-text span{display:inline-block}
.closed-text{margin-top:14px;max-width:34em;font-size:17px;line-height:1.7;color:rgba(255,255,255,.86);text-wrap:pretty;animation:rise .8s var(--ease) .2s both}
.closed-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:30px;max-width:100%;animation:rise .8s var(--ease) .28s both}
.closed-url{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);font-size:14.5px;color:rgba(255,255,255,.92);backdrop-filter:blur(6px)}
.closed-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.closed-url .ico{width:17px;height:17px;flex:none;color:#FFD2AE}
.closed-retry{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ultra-600);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 14px 26px -14px rgba(10,16,80,.6);transition:transform .2s var(--spring),box-shadow .2s}
.closed-retry .ico{width:18px;height:18px}
.closed-retry:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(10,16,80,.7)}
.closed-retry:focus-visible,.closed-brand:focus-visible{outline:3px solid #FFD2AE;outline-offset:3px}
.closed-horizon{position:relative;z-index:1;display:flex;justify-content:center;padding:118px 20px calc(24px + env(safe-area-inset-bottom));color:var(--ink);background:linear-gradient(transparent 0 150px,#fff 150px)}
.closed-bank{position:absolute;left:0;right:0;top:0;width:100%;height:160px;z-index:-1;display:block}
.closed-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.06em}
.closed-brand .brand-mark{width:30px;height:30px}
.closed-brand em{font-style:normal;font-weight:500;opacity:.65}
@keyframes sign-swing{0%{opacity:0;transform:rotate(-14deg)}12%{opacity:1}35%{transform:rotate(9deg)}55%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}100%{opacity:1;transform:none}}
@media (max-width:560px){
  .closed{padding:36px 18px 24px}
  .closed-art{width:min(230px,66vw);margin-bottom:52px}
  .closed-sign{font-size:16px;padding:8px 15px 8px 12px}
  .closed-text{font-size:15.5px}
  .closed-actions{flex-direction:column;align-items:stretch;width:100%}
  .closed-url,.closed-retry{justify-content:center}
  .closed-horizon{padding-top:96px;background:linear-gradient(transparent 0 130px,#fff 130px)}
  .closed-bank{height:140px}
}

/* ---------- Reveal (single orchestrated load sequence) ---------- */
.is-intro [data-reveal]{animation:rise .75s var(--ease) both;animation-delay:calc(var(--r,0) * 90ms)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .sky-metrics{grid-template-columns:repeat(2,minmax(0,1fr));flex-basis:380px}
  .table-head,.trow{grid-template-columns:44px minmax(200px,2fr) 120px minmax(120px,1fr) minmax(130px,auto)}
  .table-head>span:nth-of-type(4),.trow>.tcell:nth-child(5){display:none}
  .table-sites .table-head,.table-sites .trow{grid-template-columns:44px minmax(200px,2fr) minmax(120px,1.2fr) 110px minmax(120px,auto)}
}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-scene{padding:22px 20px 56px;gap:18px;min-height:0}
  .scene-copy{margin-top:8px}
  .scene-copy h1{font-size:clamp(28px,7.5vw,40px)}
  .scene-copy p{font-size:15px;margin-top:10px}
  .launch{display:none}
  .auth-form{place-items:start center;padding:0 16px 40px;margin-top:-30px;position:relative;z-index:2}
  .auth-card{background:var(--surface);border-radius:26px;padding:26px 22px;box-shadow:var(--shadow-2)}
  .auth-card h2{font-size:28px}
  .profile-grid{grid-template-columns:1fr}
  .profile-grid>.facts{grid-row:auto}
}

@media (max-width:760px){
  body.page-app{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .wrap{padding:0 16px}
  .topbar-inner{padding:0 14px;height:60px;gap:10px}
  .topnav{display:none}
  .brand-text{font-size:14px}
  .brand-mark{width:32px;height:32px}
  .brand-role{display:none}
  .user-chip{padding:3px}
  .user-chip span:last-child{display:none}
  .btn-logout{width:38px;padding:0}
  .btn-logout span{display:none}
  .bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-top:1px solid var(--line);isolation:isolate}
  .bottomnav-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border-radius:14px;color:var(--mist);text-decoration:none;font-size:12px;font-weight:600}
  .bottomnav-item .ico{width:22px;height:22px;transition:transform .3s var(--spring)}
  .bottomnav-item.is-active{color:var(--ultra-600)}
  .bottomnav-item.is-active .ico{transform:translateY(-2px)}
  .bottomnav-item.is-active::before{content:"";position:absolute;top:3px;width:52px;height:32px;border-radius:12px;background:var(--ultra-50);z-index:-1;animation:pop .35s var(--spring)}
  .bottomnav-item .nav-badge{position:absolute;top:2px;left:calc(50% + 6px)}

  .sky-band{padding:22px 0 100px}
  .sky-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .sky-copy h1{font-size:34px}
  .sky-sub{font-size:15px}
  .quota-cloud{position:absolute;right:-6px;top:-8px;width:132px}
  .qc-label strong{font-size:22px}
  .qc-label span{font-size:11px}
  .qc-label i{display:none}
  .page-dashboard .sky-copy{padding-right:120px}

  .uploader{margin-top:-74px;border-radius:22px;padding:8px}
  .dropzone{padding:24px 14px 20px;gap:12px}
  .dz-orb{width:62px;height:62px;border-radius:20px}
  .dz-orb .ico{width:30px;height:30px}
  .dz-text strong{font-size:19px}
  .dz-text span{font-size:14px}
  .queue{padding:14px 4px 4px}
  .q-item{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:12px}
  .q-ico{width:38px;height:38px;border-radius:12px}
  .queue-foot{flex-direction:column-reverse}
  .queue-foot .btn{width:100%}

  .stat-strip{margin:16px 0 30px}
  .stat{flex-direction:column;align-items:flex-start;gap:2px;padding:14px}
  .stat strong{margin-left:0;font-size:22px;order:3}
  .stat-label{font-size:12.5px}
  .stat .ico,.stat-dot{display:none}

  .list-head h2,.panel-head h2{font-size:22px}
  .searchbox{width:100%}
  .site-grid{grid-template-columns:1fr;gap:16px}

  .sky-band-admin{padding-bottom:96px}
  .sky-metrics{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;flex-basis:auto}
  .sky-metrics dd{font-size:26px}
  .page-admin .app-main>.wrap{margin-top:-70px}
  .panel{padding:18px 14px 20px;border-radius:22px}
  .callout{flex-wrap:wrap}
  .callout .btn{width:100%}

  .table{border:0;display:grid;gap:10px}
  .table-head{display:flex;border:1.5px solid var(--line);border-radius:14px;padding:8px 12px}
  .table-head>span{display:none}
  .table-head .m-only{display:inline;color:var(--ink-2);margin-left:8px}
  .table-quick{border:0;border-radius:12px;padding:6px 10px}
  .trow,.table-sites .trow{grid-template-columns:30px minmax(0,1fr) auto;gap:6px 10px;border:1.5px solid var(--line);border-radius:16px!important;padding:12px;min-height:0}
  .trow:last-child{border-bottom:1.5px solid var(--line)}
  .trow::before{top:14px;bottom:14px}
  .trow .tcell-check{grid-row:1/span 4;align-self:start;padding-top:6px}
  .trow .tcell-who{grid-column:2}
  .trow .tcell-actions{grid-column:3;grid-row:1}
  .trow>.tcell[data-label]{grid-column:2/4;display:flex!important;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
  .trow>.tcell[data-label]::before{content:attr(data-label);color:var(--mist);font-size:12.5px}
  .mini-quota{grid-template-columns:auto 80px;align-items:center}
  .tcell-actions .btn-sm span{display:none}
  .tcell-actions .btn-sm{width:36px;padding:0}

  .bulkbar{left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateY(160%);flex-wrap:wrap;gap:8px;padding:10px;max-width:none}
  .bulkbar.is-visible{transform:none}
  .bulk-count{flex:1;padding-left:6px}
  .bulk-actions{order:3;width:100%}
  .bulk-actions .btn{flex:1;padding:0 8px}

  dialog.sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:26px 26px 0 0;max-height:92dvh}
  dialog.sheet[open]{animation:sheet-up .45s var(--spring)}
  dialog.sheet.is-closing{animation:sheet-down .25s var(--ease) forwards}
  .sheet-body{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}
  .sheet-body::before{content:"";justify-self:center;width:42px;height:5px;border-radius:999px;background:var(--line-2);margin:-8px 0 -4px}
  .sheet-actions .btn{flex:1}

  .toast-stack{top:auto;bottom:calc(88px + env(safe-area-inset-bottom));right:12px;left:12px;width:auto}
  .page-auth .toast-stack{bottom:16px}
  .grid-2,.grid-2-wide{grid-template-columns:1fr}
  .profile-hero{flex-direction:row;align-items:center}
  .avatar-xl{width:72px;height:72px;font-size:30px}
  .profile-grid{margin-top:-80px}
  .card{padding:20px}
  .pager-step span{display:none}
}

@media (max-width:420px){
  .sky-copy h1{font-size:30px}
  .page-dashboard .sky-copy{padding-right:104px}
  .quota-cloud{width:118px}
  .dz-limits>span{font-size:12px}
}

/* ---------- Motion ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes row-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes row-out{to{opacity:0;transform:translateX(30px);background:var(--mint-50)}}
@keyframes row-flash{0%{background:var(--mint-50)}100%{background:transparent}}
@keyframes flash-ring{0%{box-shadow:0 0 0 0 rgba(14,159,106,.5),var(--shadow-1)}100%{box-shadow:0 0 0 14px rgba(14,159,106,0),var(--shadow-1)}}
@keyframes drift{from{translate:0 0}to{translate:120vw 0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50px)}}
@keyframes fill-up{from{transform:translateY(110px)}}
@keyframes stripes{from{background-position:200% 0}to{background-position:0 0}}
@keyframes indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@keyframes q-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes q-out{to{opacity:0;transform:translateX(24px)}}
@keyframes q-done{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes check-pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:none}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(14,159,106,.45)}50%{box-shadow:0 0 0 5px rgba(14,159,106,0)}}
@keyframes live-sun{0%,100%{box-shadow:0 0 0 0 rgba(255,138,61,.5)}50%{box-shadow:0 0 0 5px rgba(255,138,61,0)}}
@keyframes badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,61,.6)}50%{box-shadow:0 0 0 6px rgba(255,138,61,0)}}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 rgba(255,138,61,.45)}100%{box-shadow:0 0 0 12px rgba(255,138,61,0)}}
@keyframes hourglass{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes toast-in{from{opacity:0;transform:translateX(40px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(40px) scale(.95)}}
@keyframes toast-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes sheet-in{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheet-out{to{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes wobble{0%{transform:rotate(0) scale(.6);opacity:0}50%{transform:rotate(-8deg) scale(1.05);opacity:1}75%{transform:rotate(5deg)}100%{transform:none}}
@keyframes pulse-thumb{to{transform:translateX(9px) scale(.85)}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes burst{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
@keyframes glow{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:.9;transform:scale(1.1)}}
@keyframes ascend{
  0%{opacity:0;transform:translate(0,10px) scale(1)}
  8%{opacity:1;transform:translate(0,0) scale(1)}
  55%{opacity:1;transform:translate(calc(var(--dx) * .7),-150px) scale(.8)}
  66%{opacity:0;transform:translate(var(--dx),-205px) scale(.35)}
  100%{opacity:0;transform:translate(var(--dx),-205px) scale(.35)}
}
@keyframes emit{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  8%{opacity:1;transform:translate(-50%,0) scale(1)}
  55%{opacity:1;transform:translate(calc(-50% + var(--lx)),var(--ly)) scale(1)}
  68%,100%{opacity:0;transform:translate(calc(-50% + var(--lx)),calc(var(--ly) + 14px)) scale(.95)}
}

@media (prefers-reduced-motion:reduce){
  .closed-art,.closed-cloud,.closed-sign,.closed h1,.closed-text,.closed-actions{animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .launch-file,.launch-link{animation:none!important;opacity:1}
  .launch-file{transform:none}
  .launch-link{transform:translate(calc(-50% + var(--lx)),var(--ly))}
  .sky-clouds i{animation:none!important}
}