/* ============================================================================
   ORBITAL — Directory Index   ·   command-console / holographic HUD theme
   ========================================================================== */

:root{
  /* core palette (void / dark) */
  --void:#04070d;
  --deep:#070c16;
  --panel-bg:rgba(11,18,31,.55);
  --panel-line:rgba(64,224,255,.16);
  --panel-line-soft:rgba(64,224,255,.07);
  --hair:rgba(120,170,210,.10);

  --cyan:#2fe6ff;
  --cyan-soft:rgba(47,230,255,.14);
  --violet:#9b6bff;
  --pink:#ff4fa3;
  --amber:#ffb347;
  --green:#41ffb0;
  --red:#ff6a5e;

  --ink:#d7e7f4;
  --ink-dim:#7d93a8;
  --ink-faint:#4a5f73;

  --glow:0 0 22px;
  --r:14px;
  --r-sm:9px;

  --grid:rgba(70,160,210,.045);
  --scan-op:.05;
  --noise-op:.035;

  --font-ui:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
}

/* light "lux" theme ------------------------------------------------------- */
[data-theme="lux"]{
  --void:#e7edf3;
  --deep:#dde6ee;
  --panel-bg:rgba(255,255,255,.62);
  --panel-line:rgba(20,120,160,.22);
  --panel-line-soft:rgba(20,120,160,.10);
  --hair:rgba(20,60,90,.12);

  --cyan:#0091b3;
  --cyan-soft:rgba(0,145,179,.12);
  --violet:#6b3ff0;
  --pink:#d61f73;
  --amber:#c97a13;
  --green:#0f9d63;
  --red:#d6453a;

  --ink:#16242f;
  --ink-dim:#4d6373;
  --ink-faint:#90a3b1;

  --grid:rgba(20,110,150,.05);
  --scan-op:.02;
  --noise-op:.02;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--void);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{font-family:var(--font-mono);font-variant-ligatures:none}
button,input,select{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:var(--void)}

/* ---------- atmospheric background layers -------------------------------- */
.bg-aurora,.bg-grid,.bg-scan,.bg-noise{position:fixed;inset:0;pointer-events:none;z-index:0}

.bg-aurora{
  background:
    radial-gradient(45% 55% at 18% 12%, rgba(47,230,255,.22), transparent 60%),
    radial-gradient(40% 50% at 85% 18%, rgba(155,107,255,.20), transparent 60%),
    radial-gradient(55% 60% at 70% 92%, rgba(255,79,163,.14), transparent 62%),
    radial-gradient(50% 60% at 12% 88%, rgba(65,255,176,.10), transparent 60%);
  filter:blur(20px) saturate(135%);
  animation:drift 26s ease-in-out infinite alternate;
}
[data-theme="lux"] .bg-aurora{opacity:.55;filter:blur(40px) saturate(120%)}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,2%,0) scale(1.08)}
  100%{transform:translate3d(2.5%,-1.5%,0) scale(1.04)}
}

.bg-grid{
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 55%,transparent 100%);
  animation:gridslide 18s linear infinite;
}
@keyframes gridslide{to{background-position:46px 46px}}

.bg-scan{
  background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(120,200,255,var(--scan-op)) 2px 3px);
  mix-blend-mode:overlay;
}
.bg-noise{
  opacity:var(--noise-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- boot overlay -------------------------------------------------- */
.boot{
  position:fixed;inset:0;z-index:50;display:grid;place-content:center;gap:18px;justify-items:center;
  background:radial-gradient(circle at 50% 50%,var(--deep),var(--void));
  transition:opacity .5s ease,visibility .5s;
}
.boot.is-done{opacity:0;visibility:hidden}
.boot__ring{
  width:58px;height:58px;border-radius:50%;
  border:2px solid var(--panel-line-soft);border-top-color:var(--cyan);
  box-shadow:var(--glow) var(--cyan-soft);
  animation:spin .9s linear infinite;
}
.boot__label{font-size:11px;letter-spacing:.4em;color:var(--ink-dim)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- shell layout -------------------------------------------------- */
.shell{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;padding:clamp(14px,2.4vw,30px);
  display:flex;flex-direction:column;gap:14px;
}

/* glass panel + HUD corner brackets --------------------------------------- */
.panel{
  position:relative;
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 50px rgba(0,0,0,.45);
}
.bracket{position:absolute;width:14px;height:14px;border:1.5px solid var(--cyan);opacity:.7;pointer-events:none}
.bracket--tl{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r)}
.bracket--tr{top:-1px;right:-1px;border-left:0;border-bottom:0;border-top-right-radius:var(--r)}
.bracket--bl{bottom:-1px;left:-1px;border-right:0;border-top:0;border-bottom-left-radius:var(--r)}
.bracket--br{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r)}

/* ---------- header -------------------------------------------------------- */
.hdr{display:flex;align-items:center;gap:18px;padding:14px 20px;flex-wrap:wrap}
.hdr__brand{display:flex;align-items:center;gap:13px}
.logo{color:var(--cyan);filter:drop-shadow(0 0 6px var(--cyan-soft));display:grid;place-items:center;animation:logospin 14s linear infinite}
@keyframes logospin{to{transform:rotate(360deg)}}
.hdr__titles{display:flex;flex-direction:column;line-height:1}
.hdr__name{font-size:clamp(18px,2vw,23px);font-weight:700;letter-spacing:.22em}
.hdr__tag{font-size:9.5px;letter-spacing:.42em;color:var(--ink-dim);margin-top:5px}

.hdr__readout{
  display:flex;align-items:center;gap:11px;margin-left:auto;
  font-size:11px;color:var(--ink-dim);
  padding:7px 14px;border:1px solid var(--hair);border-radius:99px;background:rgba(0,0,0,.18);
}
.hdr__readout .sep{opacity:.4}
#clock,#stat-count,#stat-size{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);display:inline-block}
.dot--live{background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

.hdr__tools{display:flex;gap:8px}
.tool{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--panel-line);background:rgba(0,0,0,.2);color:var(--ink-dim);
  cursor:pointer;transition:.18s;
}
.tool svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft);transform:translateY(-1px)}
.tool--text{width:auto;padding:0 13px;font-size:11px;letter-spacing:.18em;font-family:var(--font-mono)}
#btn-view .ico-list{display:none}
#btn-view[data-layout="list"] .ico-grid{display:none}
#btn-view[data-layout="list"] .ico-list{display:inline}

/* ---------- control bar --------------------------------------------------- */
.bar{display:flex;align-items:center;gap:16px;padding:12px 18px;flex-wrap:wrap}

.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px;min-height:30px}
.crumbs button{
  background:none;border:0;cursor:pointer;color:var(--ink-dim);
  padding:4px 9px;border-radius:7px;transition:.15s;letter-spacing:.04em;white-space:nowrap;
}
.crumbs button:hover{color:var(--cyan);background:var(--cyan-soft)}
.crumbs .crumb--current{color:var(--ink);font-weight:600}
.crumbs .crumb--current:hover{background:none}
.crumbs .car{color:var(--ink-faint);font-size:11px;user-select:none}
.crumbs .root svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}

.bar__right{display:flex;align-items:center;gap:11px;margin-left:auto;flex-wrap:wrap}

.search{position:relative;display:flex;align-items:center}
.search__ico{position:absolute;left:12px;color:var(--ink-faint);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.search input{
  width:clamp(180px,26vw,300px);height:40px;
  padding:0 64px 0 36px;
  background:rgba(0,0,0,.22);border:1px solid var(--panel-line);border-radius:var(--r-sm);
  font-size:13px;letter-spacing:.02em;transition:.18s;
}
.search input::placeholder{color:var(--ink-faint)}
.search input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.search__mode{
  position:absolute;right:9px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
  color:var(--cyan);border:1px solid var(--panel-line);border-radius:5px;padding:3px 6px;background:rgba(0,0,0,.25);
}

.select{display:flex;align-items:center;gap:6px}
.select select{
  height:40px;padding:0 30px 0 13px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237d93a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--panel-line);font-size:12.5px;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.select select:focus{outline:none;border-color:var(--cyan)}
.dir{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--panel-line);background:rgba(0,0,0,.22);color:var(--ink-dim);cursor:pointer;transition:.18s}
.dir svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.dir:hover{color:var(--cyan);border-color:var(--cyan)}
.dir.is-asc svg{transform:rotate(180deg)}

/* ---------- listing view -------------------------------------------------- */
.view{min-height:46vh}

/* grid layout */
.view[data-layout="grid"]{
  display:grid;gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
}
.view[data-layout="grid"] .item{
  position:relative;padding:18px 15px 14px;border-radius:var(--r);
  background:var(--panel-bg);border:1px solid var(--panel-line-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;gap:11px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s;
  animation:rise .5s both cubic-bezier(.2,.8,.3,1);
}
.view[data-layout="grid"] .item::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 70%);
}
.view[data-layout="grid"] .item:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--glow) var(--accent-soft),0 18px 40px rgba(0,0,0,.4)}
.view[data-layout="grid"] .item:hover::before{opacity:1}
.view[data-layout="grid"] .ico{width:44px;height:44px}
.view[data-layout="grid"] .item__name{font-size:13.5px;font-weight:500;line-height:1.35;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.view[data-layout="grid"] .item__meta{display:flex;gap:8px;align-items:center;margin-top:auto}
.view[data-layout="grid"] .item__path{display:none}
.view[data-layout="grid"] .item__date{display:none}

/* list layout */
.view[data-layout="list"]{display:flex;flex-direction:column;gap:5px}
.view[data-layout="list"] .item{
  position:relative;display:grid;grid-template-columns:30px 1fr auto auto;align-items:center;gap:14px;
  padding:11px 16px;border-radius:var(--r-sm);
  background:var(--panel-bg);border:1px solid transparent;cursor:pointer;
  transition:.16s;animation:rise .4s both;
}
.view[data-layout="list"] .item:hover{border-color:var(--accent);background:var(--cyan-soft);transform:translateX(3px)}
.view[data-layout="list"] .ico{width:24px;height:24px}
.view[data-layout="list"] .item__name{font-size:13.5px;font-weight:500}
.view[data-layout="list"] .item__meta{display:flex;gap:14px;align-items:center;justify-self:end}
.view[data-layout="list"] .item__path{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-top:2px;display:block}
.view[data-layout="list"] .chip{display:none}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* shared item bits */
.ico{flex:none;color:var(--accent);filter:drop-shadow(0 0 5px var(--accent-soft))}
.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.item__name{color:var(--ink)}
.chip{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:3px 6px;border-radius:5px;
}
.item__size,.item__date{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-dim);white-space:nowrap}
.item__date{color:var(--ink-faint)}

.item__dl{
  position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;color:var(--ink-dim);
  background:rgba(0,0,0,.4);border:1px solid var(--panel-line);
  opacity:0;transform:translateY(-4px);transition:.18s;
}
.item__dl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.view[data-layout="grid"] .item:hover .item__dl{opacity:1;transform:none}
.item__dl:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.view[data-layout="list"] .item__dl{position:static;opacity:1;transform:none;background:transparent;border-color:transparent}

/* per-category accent (set via --accent on the element) */
.cat-folder {--accent:var(--amber);--accent-soft:rgba(255,179,71,.16);--accent-line:rgba(255,179,71,.3)}
.cat-image  {--accent:var(--violet);--accent-soft:rgba(155,107,255,.16);--accent-line:rgba(155,107,255,.3)}
.cat-video  {--accent:var(--pink);--accent-soft:rgba(255,79,163,.16);--accent-line:rgba(255,79,163,.3)}
.cat-audio  {--accent:var(--green);--accent-soft:rgba(65,255,176,.15);--accent-line:rgba(65,255,176,.3)}
.cat-code   {--accent:var(--cyan);--accent-soft:var(--cyan-soft);--accent-line:var(--panel-line)}
.cat-pdf    {--accent:var(--red);--accent-soft:rgba(255,106,94,.16);--accent-line:rgba(255,106,94,.3)}
.cat-archive{--accent:var(--amber);--accent-soft:rgba(255,179,71,.15);--accent-line:rgba(255,179,71,.3)}
.cat-sheet  {--accent:var(--green);--accent-soft:rgba(65,255,176,.13);--accent-line:rgba(65,255,176,.3)}
.cat-doc    {--accent:#5fa8ff;--accent-soft:rgba(95,168,255,.15);--accent-line:rgba(95,168,255,.3)}
.cat-font   {--accent:var(--violet);--accent-soft:rgba(155,107,255,.14);--accent-line:rgba(155,107,255,.3)}
.cat-file   {--accent:var(--ink-dim);--accent-soft:rgba(125,147,168,.12);--accent-line:var(--hair)}

/* empty / loading states */
.state{grid-column:1/-1;display:grid;place-items:center;gap:14px;padding:60px 20px;text-align:center;color:var(--ink-dim)}
.state svg{color:var(--ink-faint);opacity:.5;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.state__title{font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.state__sub{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint)}
.scanner{width:40px;height:40px;border-radius:50%;border:2px solid var(--panel-line-soft);border-top-color:var(--cyan);animation:spin .8s linear infinite}

/* ---------- status line --------------------------------------------------- */
.status{
  display:flex;align-items:center;gap:11px;padding:9px 18px;font-size:11px;color:var(--ink-dim);
  border-top:1px solid var(--panel-line-soft);
}
#status-path{color:var(--cyan)}
.status__hint{margin-left:auto;color:var(--ink-faint);letter-spacing:.08em}

/* ---------- modal --------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:5vh 4vw}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,5,11,.78);backdrop-filter:blur(7px);animation:fade .25s}
.modal__panel{
  position:relative;z-index:1;width:min(920px,100%);max-height:90vh;display:flex;flex-direction:column;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}}
.modal__head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--panel-line-soft)}
.modal__name{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal__actions{display:flex;gap:8px;margin-left:auto}
.modal__body{padding:18px;overflow:auto;display:grid;place-items:center}
.modal__body img{max-width:100%;max-height:74vh;border-radius:var(--r-sm);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal__body pre{
  width:100%;margin:0;padding:16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.4);border:1px solid var(--panel-line-soft);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.65;color:var(--ink);
  white-space:pre;overflow:auto;max-height:74vh;text-align:left;
}
.modal__body .pre-meta{align-self:flex-start;font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-bottom:10px;letter-spacing:.1em}
.modal__msg{font-family:var(--font-mono);font-size:12px;color:var(--ink-dim);padding:40px;text-align:center}

/* ---------- scrollbar ----------------------------------------------------- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--violet));border-radius:99px;border:2px solid var(--void)}
*{scrollbar-width:thin;scrollbar-color:var(--cyan) transparent}

/* ---------- file management ----------------------------------------------- */
.tool--accent{color:var(--cyan)}
.tool--accent:hover{color:#04070d;background:linear-gradient(120deg,var(--cyan),var(--violet));border-color:transparent;box-shadow:var(--glow) var(--cyan-soft)}
.tool__div{width:1px;height:24px;background:var(--panel-line);margin:0 3px;align-self:center}

/* per-item actions menu trigger */
.item__menu{
  position:absolute;top:10px;right:44px;width:28px;height:28px;border-radius:7px;
  display:grid;place-items:center;color:var(--ink-dim);
  background:rgba(0,0,0,.4);border:1px solid var(--panel-line);
  opacity:0;transform:translateY(-4px);transition:.18s;cursor:pointer;
}
.item__menu svg{width:15px;height:15px;fill:currentColor;stroke:none}
.view[data-layout="grid"] .item:hover .item__menu{opacity:1;transform:none}
.item__menu:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.view[data-layout="list"] .item__menu{position:static;opacity:1;transform:none;background:transparent;border-color:transparent}

/* floating popup menu */
.menu{
  position:fixed;z-index:80;min-width:152px;padding:6px;
  background:var(--deep);border:1px solid var(--panel-line);border-radius:var(--r-sm);
  box-shadow:0 18px 50px rgba(0,0,0,.6),var(--glow) var(--cyan-soft);
  display:flex;flex-direction:column;gap:2px;animation:pop .15s ease;
}
.menu button{
  text-align:left;background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--font-ui);font-size:13px;padding:9px 12px;border-radius:7px;transition:.13s;
}
.menu button:hover{background:var(--cyan-soft);color:var(--cyan)}
.menu .menu__danger{color:var(--red)}
.menu .menu__danger:hover{background:rgba(255,106,94,.14);color:var(--red)}

/* confirm / prompt dialog */
.dialog{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:6vh 5vw}
.dialog[hidden]{display:none}
.dialog__backdrop{position:absolute;inset:0;background:rgba(2,5,11,.8);backdrop-filter:blur(8px);animation:fade .2s}
.dialog__panel{position:relative;z-index:1;width:min(440px,100%);padding:24px;animation:pop .26s cubic-bezier(.2,.9,.3,1.1)}
.dialog__title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.dialog__msg{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 16px}
.dialog__input{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.4);border:1px solid var(--panel-line);color:var(--ink);
  font-family:var(--font-mono);font-size:13px;margin-bottom:18px;outline:none;transition:.15s;
}
.dialog__input:focus{border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.dialog__actions{display:flex;justify-content:flex-end;gap:10px}

/* buttons */
.btn{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;border-radius:var(--r-sm);cursor:pointer;transition:.16s;
  background:rgba(0,0,0,.25);border:1px solid var(--panel-line);color:var(--ink-dim);
}
.btn:hover{color:var(--ink);border-color:var(--ink-dim)}
.btn--primary{color:#04070d;background:linear-gradient(120deg,var(--cyan),var(--violet));border-color:transparent;font-weight:700}
.btn--primary:hover{box-shadow:var(--glow) var(--cyan-soft);filter:brightness(1.06)}
.btn--danger{color:#fff;background:linear-gradient(120deg,var(--red),var(--pink));border-color:transparent;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn--danger:hover{box-shadow:var(--glow) rgba(255,106,94,.3);filter:brightness(1.06)}

/* in-modal editor */
.editor{
  width:100%;min-height:52vh;max-height:74vh;margin:0;padding:16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.45);border:1px solid var(--cyan);color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.65;resize:vertical;outline:none;
  white-space:pre;overflow:auto;text-align:left;box-shadow:inset 0 0 30px rgba(0,0,0,.3);
}
.editor:focus{box-shadow:var(--glow) var(--cyan-soft),inset 0 0 30px rgba(0,0,0,.3)}

/* toasts */
.toasts{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(360px,90vw)}
.toast{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;line-height:1.5;
  padding:12px 15px;border-radius:var(--r-sm);color:var(--ink);
  background:var(--deep);border:1px solid var(--panel-line);border-left-width:3px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);opacity:0;transform:translateX(20px);transition:.26s;
}
.toast.is-in{opacity:1;transform:none}
.toast--ok{border-left-color:var(--green)}
.toast--err{border-left-color:var(--red)}
.toast--info{border-left-color:var(--cyan)}

/* drag-and-drop target */
.view.is-drop{outline:2px dashed var(--cyan);outline-offset:-10px;border-radius:var(--r);background:var(--cyan-soft)}

/* ---------- auth (login / setup) ------------------------------------------ */
.auth-body{min-height:100vh}
.auth{min-height:100vh;display:grid;place-items:center;padding:6vh 5vw;gap:18px;grid-auto-rows:min-content}
.auth__panel{position:relative;width:min(400px,100%);padding:34px 30px}
.auth__brand{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.auth__logo{color:var(--cyan);filter:drop-shadow(var(--glow) var(--cyan-soft))}
.auth__name{font-size:22px;letter-spacing:.16em;margin:0;color:var(--ink)}
.auth__tag{font-size:10px;letter-spacing:.3em;color:var(--cyan)}
.auth__sub{color:var(--ink-dim);font-size:13px;margin:6px 0 20px}
.auth__err{font-family:var(--font-mono);font-size:12px;color:var(--red);background:rgba(255,106,94,.1);border:1px solid rgba(255,106,94,.3);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:16px;line-height:1.5}
.auth__form{display:flex;flex-direction:column;gap:14px}
.auth__field{display:flex;flex-direction:column;gap:6px}
.auth__field span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.auth__field input{padding:11px 13px;border-radius:var(--r-sm);background:rgba(0,0,0,.4);border:1px solid var(--panel-line);color:var(--ink);font-size:14px;outline:none;transition:.15s;font-family:var(--font-ui)}
.auth__field input:focus{border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.auth__submit{display:flex;width:100%;justify-content:center;margin-top:8px;padding:13px}
.auth__foot{font-size:10px;letter-spacing:.3em;color:var(--ink-faint);text-transform:uppercase}

/* ---------- signed-in chip + small buttons -------------------------------- */
.userchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--panel-line);background:rgba(0,0,0,.2);font-size:11px;letter-spacing:.05em}
.userchip__name{color:var(--ink)}
.userchip__role{font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:5px;border:1px solid var(--panel-line)}
.userchip__role--admin{color:var(--pink);border-color:rgba(255,79,163,.4);background:rgba(255,79,163,.12)}
.userchip__role--editor{color:var(--cyan);border-color:var(--panel-line);background:var(--cyan-soft)}
.userchip__role--viewer{color:var(--ink-dim);background:rgba(125,147,168,.1)}
.btn--sm{padding:7px 11px;font-size:10px}

/* ---------- user management ----------------------------------------------- */
.users{display:flex;flex-direction:column;gap:10px;width:100%}
.urow{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,0.9fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--panel-line-soft);background:rgba(0,0,0,.22)}
.urow__usage{font-size:11px;color:var(--ink-dim);white-space:nowrap;text-align:right}
.urow__usage.is-full{color:var(--amber)}
.urow--banned{opacity:.6}
.urow__id{display:flex;align-items:center;gap:8px;min-width:0}
.urow__name{font-family:var(--font-mono);font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow__you{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--panel-line);border-radius:5px;padding:2px 5px}
.urow__flag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid rgba(255,106,94,.3);background:rgba(255,106,94,.1);border-radius:5px;padding:2px 5px}
.urow__role{padding:8px 10px;border-radius:7px;background:rgba(0,0,0,.4);border:1px solid var(--panel-line);color:var(--ink);font-family:var(--font-ui);font-size:12px;outline:none;cursor:pointer}
.urow__role:focus{border-color:var(--cyan)}
.urow__act{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.uform{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;margin:0 auto}
.uform__title{font-size:11px;letter-spacing:.2em;color:var(--cyan)}
.uform__input{padding:11px 13px;border-radius:var(--r-sm);background:rgba(0,0,0,.4);border:1px solid var(--panel-line);color:var(--ink);font-size:13px;outline:none;font-family:var(--font-ui)}
.uform__input:focus{border-color:var(--cyan);box-shadow:var(--glow) var(--cyan-soft)}
.uform__row{display:flex;gap:10px}
.uform__row .btn{flex:1;justify-content:center;display:flex}

/* ---------- console ------------------------------------------------------- */
.term{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:4vh 4vw}
.term[hidden]{display:none}
.term__backdrop{position:absolute;inset:0;background:rgba(2,5,11,.82);backdrop-filter:blur(7px);animation:fade .2s}
.term__panel{position:relative;z-index:1;width:min(960px,100%);height:min(70vh,720px);display:flex;flex-direction:column;overflow:hidden;animation:pop .26s cubic-bezier(.2,.9,.3,1.1)}
.term__head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--panel-line-soft)}
.term__title{font-size:11px;letter-spacing:.24em;color:var(--cyan)}
.term__cwd{font-size:11px;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.term__actions{display:flex;gap:8px}
.term__out{flex:1;overflow:auto;padding:14px 16px;font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.38)}
.term__line{white-space:pre-wrap}
.term__line.term__cmd{color:var(--cyan)}
.term__line.term__err{color:var(--red)}
.term__line.term__sys{color:var(--ink-faint);font-style:italic;margin-bottom:6px}
.term__inputline{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--panel-line-soft);background:rgba(0,0,0,.3)}
.term__prompt{color:var(--green);font-weight:700}
.term__inputline input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-family:var(--font-mono);font-size:13px}
.term__inputline input:disabled{opacity:.5}

/* ---------- storage quota meter (header) ---------------------------------- */
.quota{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 11px;border-radius:var(--r-sm);border:1px solid var(--panel-line);background:rgba(0,0,0,.2)}
.quota__bar{width:72px;height:6px;border-radius:99px;background:rgba(125,147,168,.18);overflow:hidden}
.quota__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .35s ease}
.quota__txt{font-size:10px;color:var(--ink-dim);white-space:nowrap}
.quota.is-full .quota__fill{background:linear-gradient(90deg,var(--amber),var(--red))}
.quota.is-full .quota__txt{color:var(--amber)}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:720px){
  .hdr__readout{order:3;width:100%;margin-left:0;justify-content:center}
  .bar__right{width:100%;margin-left:0}
  .search input{flex:1;width:100%}
  .status__hint{display:none}
  .view[data-layout="grid"]{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .view[data-layout="list"] .item{grid-template-columns:24px 1fr auto;gap:11px}
  .view[data-layout="list"] .item__date{display:none}
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .item__menu{right:42px}
  .userchip__name{display:none}
  .quota__txt{display:none}
  .quota{padding:0 8px}
  .urow{grid-template-columns:1fr;gap:9px}
  .urow__usage{text-align:left}
  .urow__act{justify-content:flex-start}
  .term__panel{height:84vh;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
}