/* ══════════════════════════════════════════════════════════════════
   PERSONAL RECORDS · "Holo" theme
   Layered over app.css + components.css. Deep-space ground, neon cyan
   + violet HUD panels, mobile-first fixes.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#03050B; --bg-2:#060A14; --surface:#0A1020; --surface-2:#0F1830;
  --text:#E6F4FF; --muted:#8EA3C0; --muted-2:#61769A;
  --line:rgba(120,220,255,.12); --line-2:rgba(120,220,255,.24);
  --accent:#22E6FF; --accent-hi:#9DF6FF; --accent-dp:#00A8C8;
  --violet:#9B6BFF; --magenta:#FF3DCB;
  --green:#3BFFA8; --green-hi:#8DFFCC; --red:#FF4D6D; --amber:#FFC24D; --blue:#6F8BFF;
  --primary:var(--accent);

  --panel:linear-gradient(160deg,rgba(18,32,64,.72) 0%,rgba(8,14,30,.82) 60%,rgba(14,20,44,.78) 100%);
  --glass-fill:var(--panel);
  --glass-stroke:rgba(120,220,255,.16);
  --glow:0 0 0 1px rgba(34,230,255,.10),0 0 28px -8px rgba(34,230,255,.35);
  --shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 40px -20px rgba(34,230,255,.25);
  --shadow-sm:0 14px 40px -22px rgba(0,0,0,.95);

  --font-display:"Chakra Petch","Space Grotesk",system-ui,sans-serif;
  --r:12px; --r-sm:8px; --r-lg:16px;
  --side-w:264px;
}
:root[data-theme="light"]{
  --bg:#E9F0FA; --bg-2:#DFE8F6; --surface:#F7FAFF; --surface-2:#EDF3FC;
  --text:#0A1630; --muted:#4A5E80; --muted-2:#6D80A2;
  --line:rgba(20,80,140,.14); --line-2:rgba(20,80,140,.26);
  --accent:#0090B8; --accent-hi:#00B4E0; --accent-dp:#006F8E;
  --violet:#6A3FE0; --magenta:#C2189A;
  --green:#0E9F63; --green-hi:#13B873; --red:#D62845; --amber:#B07800; --blue:#3D5BC4;
  --panel:linear-gradient(160deg,rgba(255,255,255,.92),rgba(240,247,255,.86));
  --glass-stroke:rgba(0,144,184,.22);
  --glow:0 0 0 1px rgba(0,144,184,.10),0 10px 30px -18px rgba(0,100,160,.45);
  --shadow:0 30px 70px -36px rgba(10,40,90,.45);
  --shadow-sm:0 12px 30px -20px rgba(10,40,90,.4);
}

body{
  background:
    radial-gradient(1200px 700px at 85% -10%,rgba(155,107,255,.16),transparent 60%),
    radial-gradient(1000px 650px at -10% 10%,rgba(34,230,255,.14),transparent 60%),
    radial-gradient(900px 600px at 50% 120%,rgba(255,61,203,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1100px 600px at 90% -10%,rgba(106,63,224,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 0%,rgba(0,180,224,.12),transparent 60%),
    var(--bg);
}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.005em}
::selection{background:rgba(34,230,255,.3)}

/* ── ambient: stars, perspective grid floor, scanlines ─────────── */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,#bdf 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 48%,#cff 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 82%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%,#dbf 50%,transparent 51%),
    radial-gradient(1px 1px at 94% 86%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 52%,#bff 50%,transparent 51%);
  background-size:620px 620px;
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:.8}}
:root[data-theme="light"] .stars{display:none}

.aurora .a1{background:radial-gradient(50% 50% at 50% 50%,rgba(34,230,255,.30),rgba(0,140,220,.10) 55%,transparent 76%)}
.aurora .a2{background:radial-gradient(50% 50% at 50% 50%,rgba(155,107,255,.26),transparent 72%)}
.aurora .a3{background:radial-gradient(50% 50% at 50% 50%,rgba(255,61,203,.14),transparent 72%)}

.grid-bg{top:auto;height:55vh;
  background-image:
    linear-gradient(to right,rgba(34,230,255,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(34,230,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);
          mask-image:linear-gradient(to top,#000 0%,transparent 85%);
  animation:floor 9s linear infinite;opacity:.55}
@keyframes floor{to{background-position:0 64px,0 64px}}
:root[data-theme="light"] .grid-bg{opacity:.35;background-image:
    linear-gradient(to right,rgba(0,120,170,.18) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(0,120,170,.18) 1px,transparent 1px)}

.grain{opacity:.025}
body::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
:root[data-theme="light"] body::after{display:none}

/* ── HUD panel: cards, stats, tiles, login, nw-head ─────────────── */
.card,.stat,.tile,.login-card,.nw-head,.person-card,.modal{
  position:relative;background:var(--panel);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--glow),var(--shadow-sm);
}
:root[data-theme="light"] .card,:root[data-theme="light"] .stat,:root[data-theme="light"] .tile,
:root[data-theme="light"] .login-card,:root[data-theme="light"] .person-card,
:root[data-theme="light"] .nw-head{background:var(--panel)}

/* corner brackets */
.card::before,.login-card::before,.nw-head::before,.modal::before{
  content:"";position:absolute;inset:5px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--accent),var(--accent)) left top/14px 2px,
    linear-gradient(var(--accent),var(--accent)) left top/2px 14px,
    linear-gradient(var(--accent),var(--accent)) right top/14px 2px,
    linear-gradient(var(--accent),var(--accent)) right top/2px 14px,
    linear-gradient(var(--violet),var(--violet)) left bottom/14px 2px,
    linear-gradient(var(--violet),var(--violet)) left bottom/2px 14px,
    linear-gradient(var(--violet),var(--violet)) right bottom/14px 2px,
    linear-gradient(var(--violet),var(--violet)) right bottom/2px 14px;
  background-repeat:no-repeat;opacity:.85}

.card-head{border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(34,230,255,.07),transparent 60%)}
.card-head h2,.card-head h3{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px}
.card-head h2::before{content:"";width:7px;height:7px;border-radius:2px;flex:none;
  background:var(--accent);box-shadow:0 0 10px var(--accent);transform:rotate(45deg)}
.card-head .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted-2)}

.section-title{color:var(--accent)}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{font-family:var(--font-display);letter-spacing:.04em;border-radius:8px}
.btn-primary{color:#021018;border-color:rgba(157,246,255,.6);
  background:linear-gradient(135deg,#9DF6FF 0%,#22E6FF 45%,#7A6BFF 100%);
  box-shadow:0 0 0 1px rgba(34,230,255,.35),0 0 24px -4px rgba(34,230,255,.65),inset 0 1px 0 rgba(255,255,255,.6);
  text-transform:uppercase;font-size:12.5px;position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-primary:not(:disabled):hover::after{left:120%}
.btn-primary:not(:disabled):hover{box-shadow:0 0 0 1px rgba(34,230,255,.55),0 0 36px -2px rgba(34,230,255,.85)}
:root[data-theme="light"] .btn-primary{color:#fff;
  background:linear-gradient(135deg,#00B4E0,#0090B8 50%,#6A3FE0);
  box-shadow:0 10px 24px -12px rgba(0,120,180,.7)}
.btn-ghost{color:var(--muted)}
.btn-ghost:not(:disabled):hover{color:var(--accent-hi);background:rgba(34,230,255,.08)}
:root[data-theme="light"] .btn-ghost:not(:disabled):hover{color:var(--accent-dp);background:rgba(0,144,184,.08)}
.btn-soft{background:rgba(34,230,255,.06);border-color:var(--line-2)}
.btn-soft:not(:disabled):hover{background:rgba(34,230,255,.12);border-color:var(--accent)}

/* ── inputs ─────────────────────────────────────────────────────── */
input,select,textarea{background:rgba(6,12,26,.75);border-color:var(--line-2);border-radius:8px}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea{background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(34,230,255,.16),0 0 18px -6px rgba(34,230,255,.7)}
.fld > span:first-of-type,.lbl{font-family:var(--font-display);color:var(--accent);opacity:.9;letter-spacing:.16em}
:root[data-theme="light"] .fld > span:first-of-type{color:var(--accent-dp)}

/* ── login / boot ───────────────────────────────────────────────── */
.login-card{overflow:hidden;border-radius:var(--r-lg)}
.login-card::after{content:"";position:absolute;left:0;right:0;height:80px;top:-80px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(34,230,255,.10),transparent);
  animation:scan 4.5s linear infinite}
@keyframes scan{to{top:110%}}
.login-title{font-size:30px;text-transform:uppercase;letter-spacing:.08em;
  background:linear-gradient(90deg,var(--accent-hi),var(--accent) 40%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.login-foot .rule{background:linear-gradient(90deg,var(--accent),var(--violet),var(--magenta));width:90px}
.wm .en{font-family:var(--font-display);color:var(--accent-hi);letter-spacing:.32em}
:root[data-theme="light"] .wm .en{color:var(--accent-dp)}

/* ── shell ──────────────────────────────────────────────────────── */
.side{background:linear-gradient(180deg,rgba(8,16,34,.86),rgba(4,8,18,.92));
  border-right:1px solid var(--line-2);
  box-shadow:inset -1px 0 0 rgba(34,230,255,.06),20px 0 60px -40px rgba(34,230,255,.25)}
:root[data-theme="light"] .side{background:rgba(247,250,255,.92)}
.side::after{content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--accent),transparent);opacity:.5}
.side-brand img{filter:drop-shadow(0 0 12px rgba(34,230,255,.6))}
.nav-item{border-radius:8px;position:relative;font-size:13.5px}
.nav-item:hover{background:rgba(34,230,255,.07);color:var(--text)}
.nav-item[aria-current="page"]{color:var(--text);
  background:linear-gradient(90deg,rgba(34,230,255,.18),rgba(155,107,255,.06) 70%,transparent);
  border-color:rgba(34,230,255,.3);box-shadow:0 0 22px -10px rgba(34,230,255,.7)}
.nav-item[aria-current="page"]::before{content:"";position:absolute;left:-1px;top:20%;bottom:20%;width:3px;
  border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.nav-item .cnt{color:var(--accent);opacity:.75}
.nav-sep{background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* initials avatar — there was no base style, so "JB" floated bare */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.04em;color:#021018;
  background:linear-gradient(140deg,var(--accent-hi),var(--accent) 50%,var(--violet));
  box-shadow:0 0 14px -4px rgba(34,230,255,.7)}
.av.xs{width:24px;height:24px;font-size:9px;border-radius:7px}
.av.xl{width:72px;height:72px;font-size:22px;border-radius:18px;
  box-shadow:0 0 0 2px rgba(34,230,255,.5),0 0 34px -6px rgba(34,230,255,.8)}
.av.has-photo{background:var(--surface-2)}

.topbar{background:linear-gradient(180deg,rgba(6,12,26,.86),rgba(6,12,26,.6));
  border-bottom:1px solid var(--line-2)}
:root[data-theme="light"] .topbar{background:rgba(247,250,255,.88)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--violet) 70%,transparent);opacity:.6}
.crumbs h1{font-size:21px;letter-spacing:.03em;
  background:linear-gradient(90deg,var(--text),var(--accent-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .crumbs h1{background:none;color:var(--text)}
.crumbs p{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em}

.view{animation:viewIn .5s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ── net worth hero ─────────────────────────────────────────────── */
.nw-head{overflow:hidden;padding:30px 32px}
.nw-head::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;
  pointer-events:none;border:1px solid rgba(34,230,255,.18);
  box-shadow:0 0 0 30px rgba(34,230,255,.03),0 0 0 60px rgba(155,107,255,.03),0 0 0 90px rgba(34,230,255,.02);
  animation:pulse 6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06);opacity:.7}}
.nw-figure .k{font-family:var(--font-display);color:var(--accent);letter-spacing:.24em}
.nw-figure b{font-size:clamp(32px,6vw,54px);color:var(--accent-hi);
  text-shadow:0 0 24px rgba(34,230,255,.55),0 0 2px rgba(255,255,255,.4)}
:root[data-theme="light"] .nw-figure b{color:var(--accent-dp);text-shadow:none}
.nw-bar .track{background:rgba(34,230,255,.08);border:1px solid var(--line)}
.nw-bar .track i.pos{background:linear-gradient(90deg,var(--accent),var(--violet));box-shadow:0 0 12px rgba(34,230,255,.6)}
.nw-bar .track i.neg{background:linear-gradient(90deg,var(--red),var(--magenta));box-shadow:0 0 12px rgba(255,77,109,.5)}

/* ── stat tiles ─────────────────────────────────────────────────── */
.stat::after{background:linear-gradient(to bottom,var(--accent),var(--violet));box-shadow:0 0 10px var(--accent)}
.stat .v{text-shadow:0 0 18px rgba(34,230,255,.35)}

/* ── section tiles ──────────────────────────────────────────────── */
.tiles{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile{overflow:hidden;border-radius:var(--r);padding:20px 18px 18px;min-height:128px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(34,230,255,.14) 48%,transparent 62%);
  transform:translateX(-100%);transition:transform .7s var(--ease)}
.tile:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(34,230,255,.4),0 0 40px -8px rgba(34,230,255,.55),var(--shadow-sm)}
.tile:hover::after{transform:translateX(100%)}
.tile-ico{width:44px;height:44px;border-radius:12px;color:var(--accent-hi);
  background:radial-gradient(circle at 30% 30%,rgba(34,230,255,.28),rgba(155,107,255,.14));
  border:1px solid rgba(34,230,255,.35);box-shadow:0 0 18px -6px rgba(34,230,255,.8)}
:root[data-theme="light"] .tile-ico{color:var(--accent-dp)}
.tile-name{font-size:15px;letter-spacing:.02em}
.tile-sub{font-family:var(--font-mono);font-size:11px;color:var(--accent);opacity:.8}

.person-head .av{margin:0}
.person-head h2{font-size:24px;letter-spacing:.03em}

/* ── person cards ───────────────────────────────────────────────── */
.person-card{border-radius:var(--r)}
.person-card::before{height:2px;background:linear-gradient(90deg,var(--accent),var(--violet),var(--magenta))}
.person-card:hover{box-shadow:0 0 0 1px rgba(34,230,255,.4),0 0 40px -10px rgba(34,230,255,.6)}
.pc-net,.pc-item{background:rgba(34,230,255,.05);border:1px solid var(--line)}

/* ── folder chips ───────────────────────────────────────────────── */
.fchip{background:rgba(10,18,36,.7);border-color:var(--line-2);font-family:var(--font-display);letter-spacing:.03em}
:root[data-theme="light"] .fchip{background:#fff}
.fchip.on{border-color:var(--accent);box-shadow:0 0 18px -6px rgba(34,230,255,.7);color:var(--text)}

/* ── tables ─────────────────────────────────────────────────────── */
.table-scroll{border-color:var(--line-2);border-radius:10px;background:rgba(4,10,22,.4)}
:root[data-theme="light"] .table-scroll{background:#fff}
.data-table th,table.tbl th,.tw table th{
  font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);background:rgba(34,230,255,.06);border-bottom:1px solid var(--line-2)}
:root[data-theme="light"] .data-table th,:root[data-theme="light"] .tw table th{color:var(--accent-dp);background:rgba(0,144,184,.06)}
.data-table td,.tw table td,table.tbl td{border-color:var(--line)!important}
.tw table td{border-right:1px solid var(--line)}
.tw table tfoot tr.total td{border-top:1px solid var(--accent)!important;color:var(--accent-hi)}
:root[data-theme="light"] .tw table tfoot tr.total td{color:var(--accent-dp)}
.data-table tbody tr,.tw table tbody tr,table.tbl tbody tr{transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.data-table tbody tr:hover,.tw table tbody tr:hover,table.tbl tbody tr:hover{
  background:linear-gradient(90deg,rgba(34,230,255,.10),rgba(155,107,255,.04));
  box-shadow:inset 3px 0 0 var(--accent)}
.data-table td:first-child{font-weight:600}
.data-table .link-cell a{color:var(--accent)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* this was display:flex on a <td>, which broke row borders */
.data-table .row-acts{display:table-cell;text-align:right;background:transparent}
.data-table tr:hover .row-acts{background:transparent}
.data-table .row-acts .btn{display:inline-flex;margin-left:2px}

/* ── modal ──────────────────────────────────────────────────────── */
.modal-scrim{background:rgba(1,3,10,.72);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.modal{background:linear-gradient(170deg,#0E1A36,#070C1C 70%);border-radius:var(--r-lg);
  box-shadow:0 0 0 1px rgba(34,230,255,.25),0 0 60px -10px rgba(34,230,255,.35),var(--shadow)}
:root[data-theme="light"] .modal{background:#fff}
.modal-head{background:linear-gradient(90deg,rgba(34,230,255,.10),transparent 70%)}
.modal-head h2{text-transform:uppercase;letter-spacing:.1em;font-size:15px}
.detail dt{font-family:var(--font-display);color:var(--accent);letter-spacing:.14em;font-size:10.5px}
.detail dd{font-family:var(--font-mono);font-size:13.5px}
.secret-val code{background:rgba(34,230,255,.08);border:1px solid var(--line-2);color:var(--accent-hi)}
:root[data-theme="light"] .secret-val code{color:var(--accent-dp)}

/* ── toasts, badges, drop zone ──────────────────────────────────── */
.toast{background:linear-gradient(160deg,#0E1A36,#070C1C);border-color:var(--line-2);
  box-shadow:0 0 30px -10px rgba(34,230,255,.5),var(--shadow)}
:root[data-theme="light"] .toast{background:#fff}
.badge{font-family:var(--font-mono);letter-spacing:.06em}
.drop{border-color:rgba(34,230,255,.35);background:rgba(34,230,255,.04)}
.drop:hover,.drop.over{box-shadow:0 0 30px -10px rgba(34,230,255,.7)}

/* ══ MOBILE ═════════════════════════════════════════════════════ */
@media(max-width:960px){
  .side{width:min(86vw,300px)}
  .grid-bg{height:40vh}
}

@media(max-width:760px){
  /* stop the hero's two fixed-min columns forcing a sideways scroll */
  .nw-head{grid-template-columns:1fr;gap:20px;padding:22px 18px}
  .nw-bar{grid-template-columns:84px 1fr auto;gap:8px;font-size:12px}
  .two-up{grid-template-columns:1fr}
}

@media(max-width:640px){
  body::after{display:none}
  .aurora i{filter:blur(60px)}
  input,select,textarea,.fld input,.fld select,.fld textarea{font-size:16px} /* no iOS zoom-on-focus */

  /* topbar: burger + title on row one, actions scroll on row two */
  .topbar{flex-wrap:wrap;padding:10px 12px calc(10px);gap:8px 10px;padding-top:max(10px,env(safe-area-inset-top))}
  .crumbs h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumbs p{display:block;font-size:10.5px}
  .topbar-actions{order:3;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-overflow-scrolling:touch}
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-actions .btn{flex:none;padding:8px 12px;font-size:12px}
  .topbar-actions .btn-primary{margin-left:auto}

  .view{padding:14px 12px calc(28px + env(safe-area-inset-bottom))}
  .card{border-radius:12px}
  .card-body{padding:12px}
  .card-head{padding:12px 14px}
  .card-head h2{font-size:12px}

  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:14px 12px;min-height:112px}
  .tile-ico{width:38px;height:38px}
  .tile-name{font-size:13.5px}
  .person-head{flex-direction:row;text-align:left;gap:14px}
  .person-head .av.xl{width:56px;height:56px;font-size:18px}
  .person-head h2{font-size:19px}

  .folder-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 14px;padding:2px 12px}
  .folder-bar::-webkit-scrollbar{display:none}
  .fchip{flex:none}
  .fchip-hint{white-space:nowrap}

  /* records table → stacked holo cards */
  .table-scroll{border:0;background:none;overflow:visible}
  .data-table,.data-table tbody{display:block}
  .data-table thead{display:none}
  .data-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;
    padding:12px 12px 12px 14px;margin-bottom:10px;border-radius:10px;position:relative;
    background:var(--panel);border:1px solid var(--glass-stroke);box-shadow:var(--glow)}
  .data-table tr::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
    background:linear-gradient(to bottom,var(--accent),var(--violet))}
  .data-table td{display:block;padding:0!important;border:0!important;font-size:12.5px;grid-column:1;min-width:0;
    overflow-wrap:anywhere}
  .data-table td:first-child{font-size:14.5px;font-family:var(--font-display);letter-spacing:.02em}
  .data-table td:not(:first-child):not(.row-acts){color:var(--muted);font-family:var(--font-mono)}
  .data-table td[data-label]:not(:first-child)::before{content:attr(data-label) " · ";
    font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.8}
  .data-table td.row-acts{grid-column:2;grid-row:1 / span 3;display:flex;gap:2px;position:static;align-self:center}
  .data-table .row-acts .btn{margin:0;padding:7px}
  .data-table tbody tr:hover{box-shadow:var(--glow)}

  .card-head{flex-wrap:wrap;row-gap:4px}
  .card-head .sub{flex:0 0 100%;padding-left:17px}
  .card-body:has(> .tw){padding:0}
  .tw table{font-size:11.5px}
  .tw table th{font-size:9px;letter-spacing:.1em}
  .tw table th,.tw table td{padding:9px 7px;border-right:0}
  .tw table td.mono,.tw table .num-col{white-space:nowrap}
  .tw table th:first-child,.tw table td:first-child{padding-left:12px}
  .tw table th:last-child,.tw table td:last-child{padding-right:12px}

  /* modals become bottom sheets */
  .modal-scrim{place-items:end stretch;padding:0}
  .modal{max-width:100%!important;width:100%;max-height:92svh;padding:0;
    border-radius:18px 18px 0 0;animation:sheetIn .35s var(--ease) both}
  .modal::after{content:"";position:absolute;top:7px;left:50%;width:42px;height:4px;margin-left:-21px;
    border-radius:4px;background:var(--line-2)}
  .modal-head{padding:20px 16px 12px}
  #modalBody,.modal-body{padding:14px 16px}
  #modalFoot,.modal-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1}
  .modal-foot .left{flex:0 0 100%;margin:0}

  .toasts{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none}

  .login-wrap{padding:20px 14px;align-items:center}
  .login-title{font-size:25px}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}

@media(max-width:380px){
  .tiles{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .stars,.grid-bg,.nw-head::after,.login-card::after{animation:none}
  .view{animation:none}
}