/* ==========================================================================
   Atharva's Family Tree Tool — Apple-style interface.
   Glass is used the way Apple uses it: on chrome that floats over content
   (bars, toolbars, sheets, popovers), never on the hundreds of tree cards,
   which stay opaque so a 208-node canvas still scrolls at 60fps.
   ========================================================================== */

/* ---------- light (default) ---------- */
:root{
  --bg:#F2F2F7;
  --wash-1:rgba(10,132,255,.20); --wash-2:rgba(191,90,242,.16); --wash-3:rgba(48,209,88,.12);
  --surface:#FFFFFF;
  --surface-2:#F7F7FA;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.80);
  --glass-edge:rgba(255,255,255,.75);
  --glass-shine:rgba(255,255,255,.9);
  --ink:#1D1D1F;
  --muted:#6E6E73;
  --faint:#8E8E93;
  --line:rgba(60,60,67,.16);
  --line-strong:rgba(60,60,67,.28);
  --fill:rgba(120,120,128,.12);
  --fill-2:rgba(120,120,128,.20);
  --brand:#007AFF;
  --brand-ink:#0060DF;
  --on-brand:#FFFFFF;
  --gold:#C93400;          /* kinship accent — Apple orange, readable on white */
  --gold-soft:rgba(255,159,10,.16);
  --danger:#D70015;
  --ok:#248A3D;
  --shadow-1:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
  --shadow-2:0 8px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-glass:inset 0 1px 0 var(--glass-shine), 0 10px 34px rgba(0,0,0,.10);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --spring:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}
/* ---------- dark, when the viewer's system asks for it ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --wash-1:rgba(10,132,255,.26); --wash-2:rgba(191,90,242,.20); --wash-3:rgba(48,209,88,.14);
    --surface:#1C1C1E;
    --surface-2:#2C2C2E;
    --glass:rgba(30,30,32,.62);
    --glass-strong:rgba(30,30,32,.82);
    --glass-edge:rgba(255,255,255,.14);
    --glass-shine:rgba(255,255,255,.16);
    --ink:#F5F5F7;
    --muted:#A1A1A6;
    --faint:#8E8E93;
    --line:rgba(84,84,88,.48);
    --line-strong:rgba(120,120,128,.60);
    --fill:rgba(120,120,128,.24);
    --fill-2:rgba(120,120,128,.36);
    --brand:#0A84FF;
    --brand-ink:#409CFF;
    --on-brand:#FFFFFF;
    --gold:#FF9F0A;
    --gold-soft:rgba(255,159,10,.18);
    --danger:#FF453A;
    --ok:#30D158;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
    --shadow-2:0 10px 34px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    --shadow-glass:inset 0 1px 0 var(--glass-shine), 0 12px 40px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
/* ---------- dark, when the host stamps it ---------- */
:root[data-theme="dark"]{
  --bg:#000000;
  --wash-1:rgba(10,132,255,.26); --wash-2:rgba(191,90,242,.20); --wash-3:rgba(48,209,88,.14);
  --surface:#1C1C1E; --surface-2:#2C2C2E;
  --glass:rgba(30,30,32,.62); --glass-strong:rgba(30,30,32,.82);
  --glass-edge:rgba(255,255,255,.14); --glass-shine:rgba(255,255,255,.16);
  --ink:#F5F5F7; --muted:#A1A1A6; --faint:#8E8E93;
  --line:rgba(84,84,88,.48); --line-strong:rgba(120,120,128,.60);
  --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.36);
  --brand:#0A84FF; --brand-ink:#409CFF; --on-brand:#FFFFFF;
  --gold:#FF9F0A; --gold-soft:rgba(255,159,10,.18);
  --danger:#FF453A; --ok:#30D158;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --shadow-2:0 10px 34px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-glass:inset 0 1px 0 var(--glass-shine), 0 12px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}
/* ---------- the in-page switch wins over both of the above ---------- */
:root[data-ui-theme="light"]{
  --bg:#F2F2F7;
  --wash-1:rgba(10,132,255,.20); --wash-2:rgba(191,90,242,.16); --wash-3:rgba(48,209,88,.12);
  --surface:#FFFFFF; --surface-2:#F7F7FA;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.80);
  --glass-edge:rgba(255,255,255,.75); --glass-shine:rgba(255,255,255,.9);
  --ink:#1D1D1F; --muted:#6E6E73; --faint:#8E8E93;
  --line:rgba(60,60,67,.16); --line-strong:rgba(60,60,67,.28);
  --fill:rgba(120,120,128,.12); --fill-2:rgba(120,120,128,.20);
  --brand:#007AFF; --brand-ink:#0060DF; --on-brand:#FFFFFF;
  --gold:#C93400; --gold-soft:rgba(255,159,10,.16);
  --danger:#D70015; --ok:#248A3D;
  --shadow-1:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
  --shadow-2:0 8px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-glass:inset 0 1px 0 var(--glass-shine), 0 10px 34px rgba(0,0,0,.10);
  color-scheme:light;
}
:root[data-ui-theme="dark"]{
  --bg:#000000;
  --wash-1:rgba(10,132,255,.26); --wash-2:rgba(191,90,242,.20); --wash-3:rgba(48,209,88,.14);
  --surface:#1C1C1E; --surface-2:#2C2C2E;
  --glass:rgba(30,30,32,.62); --glass-strong:rgba(30,30,32,.82);
  --glass-edge:rgba(255,255,255,.14); --glass-shine:rgba(255,255,255,.16);
  --ink:#F5F5F7; --muted:#A1A1A6; --faint:#8E8E93;
  --line:rgba(84,84,88,.48); --line-strong:rgba(120,120,128,.60);
  --fill:rgba(120,120,128,.24); --fill-2:rgba(120,120,128,.36);
  --brand:#0A84FF; --brand-ink:#409CFF; --on-brand:#FFFFFF;
  --gold:#FF9F0A; --gold-soft:rgba(255,159,10,.18);
  --danger:#FF453A; --ok:#30D158;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --shadow-2:0 10px 34px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-glass:inset 0 1px 0 var(--glass-shine), 0 12px 40px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
    'Inter','Segoe UI Variable Text','Segoe UI','Roboto','Helvetica Neue',system-ui,sans-serif;
  font-feature-settings:'cv11','ss01';
  font-size:15px; line-height:1.47; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; position:relative;
}
/* the colour wash the glass refracts */
body::before{
  content:''; position:fixed; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 12% 18%, var(--wash-1), transparent 62%),
    radial-gradient(34% 38% at 88% 8%,  var(--wash-2), transparent 62%),
    radial-gradient(44% 46% at 74% 88%, var(--wash-3), transparent 62%);
  filter:blur(46px); opacity:.9;
}
#app{position:relative; z-index:1}

h1,h2,h3,.disp{
  margin:0; font-weight:700; letter-spacing:-.022em; text-wrap:balance; line-height:1.14;
}
button{font:inherit; cursor:pointer; color:inherit}
input,select,textarea{
  font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 13px; width:100%;
  transition:border-color .18s var(--spring), box-shadow .18s var(--spring);
  -webkit-appearance:none; appearance:none;
}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
a{color:var(--brand); text-underline-offset:2px}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.fine{font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:0}

/* ---------- glass primitives ---------- */
.glass, .card, .sheet, header.top, .treebar, nav.tabs, .modes, .toast{
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
}
.card{
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow-glass);
}
/* ---------- controls ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; background:var(--fill); color:var(--ink);
  border-radius:999px; padding:9px 17px; font-weight:590; font-size:14.5px; letter-spacing:-.01em;
  transition:transform .2s var(--spring), background-color .18s var(--spring), box-shadow .18s var(--spring), opacity .18s;
}
.btn:hover{background:var(--fill-2)}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn.primary{
  background:var(--brand); color:var(--on-brand);
  box-shadow:0 1px 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover{background:var(--brand-ink)}
.btn.quiet{background:transparent; color:var(--brand); padding:7px 10px}
.btn.quiet:hover{background:var(--fill)}
.btn.danger{background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.btn.sm{padding:6px 13px; font-size:13.5px}
a.btn{text-decoration:none}
.chip{
  display:inline-block; font-size:12.5px; font-weight:600; border-radius:999px;
  padding:3px 11px; background:var(--gold-soft); color:var(--gold); letter-spacing:-.005em;
}
.chip.green{background:color-mix(in srgb,var(--brand) 15%,transparent); color:var(--brand)}
.chip.red{background:color-mix(in srgb,var(--danger) 14%,transparent); color:var(--danger)}
.rowline{display:flex; gap:10px; align-items:center}
.field{margin-top:14px}
.field label{display:block; margin-bottom:6px}
.divider{display:flex; align-items:center; gap:12px; color:var(--faint); font-size:11px; margin:26px 0 4px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.divider::before,.divider::after{content:""; flex:1; border-top:1px solid var(--line)}

/* ---------- avatars & photos ---------- */
.av{
  flex:none; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--fill); color:var(--brand); font-weight:600; letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px var(--line);
}
.av img{width:100%; height:100%; object-fit:cover; display:block}
.av.s34{width:34px; height:34px; font-size:12.5px}
.av.s44{width:44px; height:44px; font-size:15px}
.av.s64{width:64px; height:64px; font-size:21px}
.photostrip{display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:4px; scrollbar-width:thin}
.photostrip button{border:0; border-radius:var(--r-md); padding:0; background:none; overflow:hidden; flex:none; box-shadow:var(--shadow-1)}
.photostrip img{width:78px; height:78px; object-fit:cover; display:block}
.lightbox img{width:100%; border-radius:var(--r-md); display:block}
.lightbox .cap{margin-top:10px; font-size:13.5px; color:var(--muted)}

/* ---------- header ---------- */
header.top{
  position:sticky; top:0; z-index:20;
  background:var(--glass-strong); border-bottom:1px solid var(--line);
}
.topbar{display:flex; align-items:center; gap:12px; padding:11px 0; flex-wrap:wrap}
.brand{display:flex; align-items:baseline; gap:9px; min-width:0}
.brand .mark{font-size:17px; font-weight:700; letter-spacing:-.024em; white-space:nowrap}
.brand .mark b{color:var(--brand); font-weight:700}
.brand .sub{font-size:11px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
nav.tabs{
  display:flex; gap:2px; margin-left:auto; overflow-x:auto; max-width:100%;
  background:var(--fill); border-radius:999px; padding:3px; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  border:0; background:transparent; color:var(--muted); font-weight:590; font-size:13.5px;
  padding:7px 15px; border-radius:999px; white-space:nowrap;
  transition:background-color .2s var(--spring), color .2s var(--spring), box-shadow .2s var(--spring);
}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
nav.tabs button .ct{
  display:inline-block; min-width:18px; text-align:center; background:var(--brand);
  color:#fff; border-radius:999px; font-size:11px; padding:1px 6px; margin-left:6px; font-weight:600;
}
.whoami{display:flex; align-items:center; gap:8px; font-size:13.5px}
.iconbtn{
  width:34px; height:34px; padding:0; border:0; border-radius:999px; background:var(--fill);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink);
  transition:transform .2s var(--spring), background-color .18s;
}
.iconbtn:hover{background:var(--fill-2)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:17px; height:17px; display:block}

/* ---------- sign-in ---------- */
.gate{max-width:620px; margin:0 auto; padding:56px 20px 80px}
.gate .crest{text-align:center; margin-bottom:32px}
.gate .crest .peepal{
  width:76px; height:76px; margin:0 auto 18px; border-radius:24px;
  background:linear-gradient(160deg, var(--brand), color-mix(in srgb,var(--brand) 55%, #5E5CE6));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px color-mix(in srgb,var(--brand) 35%,transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.gate h1{font-size:clamp(28px,5.4vw,40px); letter-spacing:-.03em}
.gate .tag{color:var(--muted); margin:12px 0 0; font-size:16px; letter-spacing:-.01em}
.gate .tag b{color:var(--ink); font-weight:600}
.gatecard{margin-top:20px}
.gatecard h3{font-size:20px; letter-spacing:-.02em; margin-bottom:2px}
.namelist{
  max-height:320px; overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--r-md); margin-top:10px; background:var(--surface);
}
.namelist button{
  display:flex; width:100%; text-align:left; border:0; background:transparent; color:var(--ink);
  padding:10px 14px; gap:11px; align-items:center; border-bottom:1px solid var(--line);
}
.namelist button:last-child{border-bottom:0}
.namelist button:hover{background:var(--fill)}
.namelist .nm{font-size:15px; font-weight:500}
.namelist .yr{margin-left:auto; font-size:12.5px; color:var(--faint)}

/* ---------- family explorer ---------- */
.explorer{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start; padding:24px 0 64px}
.genband{margin-bottom:20px}
.genband > .label{display:block; margin-bottom:9px}
.genrow{display:flex; flex-wrap:wrap; gap:10px}
.pcard{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r-md); padding:9px 13px;
  text-align:left; min-width:150px; flex:0 1 auto; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-1);
}
.pcard:hover{border-color:var(--brand)}
.pcard .nm{font-size:14.5px; font-weight:590; line-height:1.25; display:block; letter-spacing:-.015em}
.pcard .yr{font-size:11.5px; color:var(--faint); display:block}
.pcard.center{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow-1)}
.pcard.center .nm{color:var(--brand)}
.pcard.ghost{border-style:dashed; color:var(--faint); background:transparent; box-shadow:none}
.subgroups{display:flex; gap:24px; flex-wrap:wrap}
.subgroup .label{margin-bottom:9px; display:block}
.kinchip{font-size:10.5px; color:var(--gold); font-weight:600; letter-spacing:0; display:block; margin-top:2px}
.detailcard h2{font-size:23px; letter-spacing:-.025em}
.detailcard .rel{margin:7px 0 2px}
.dethead{display:flex; gap:14px; align-items:center}
.kv{margin-top:16px; display:grid; gap:10px}
.kv .row{display:grid; grid-template-columns:82px 1fr; gap:10px; font-size:14px}
.kv .row .k{color:var(--faint)}
.lifelist{margin:9px 0 0; padding-left:0; list-style:none; display:grid; gap:8px; font-size:13.5px}
.lifelist li{padding-left:15px; position:relative}
.lifelist li::before{content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--brand); opacity:.7}
.detailbtns{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}

/* ---------- tree canvas ---------- */
.treebar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 14px; margin:16px 0 12px;
  background:var(--glass); border:1px solid var(--glass-edge); border-radius:999px;
  box-shadow:var(--shadow-glass);
}
.treebar select{max-width:290px; width:auto; border-radius:999px; padding:7px 32px 7px 14px; background-color:var(--surface)}
.treebar .zbtns{display:flex; gap:6px; margin-left:auto}
.treebar .hint{flex-basis:100%; font-size:12px; color:var(--muted); padding:0 6px}
.modes{
  display:inline-flex; background:var(--fill); border-radius:999px; padding:3px; gap:2px;
}
.modes button{
  border:0; background:transparent; color:var(--muted); font-weight:590; font-size:13.5px;
  padding:7px 15px; border-radius:999px; white-space:nowrap;
  transition:background-color .2s var(--spring), color .2s var(--spring), box-shadow .2s var(--spring);
}
.modes button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
.modes button:not(.on):hover{color:var(--ink)}
.tviewport{
  position:relative; overflow:hidden; touch-action:none; cursor:grab;
  height:calc(100vh - 250px); min-height:400px;
  border:1px solid var(--glass-edge); border-radius:var(--r-xl);
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 1.6px) 0 0/28px 28px,
    var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--shadow-glass);
}
.tviewport.dragging{cursor:grabbing}
.tcanvas{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.tcanvas.smooth{transition:transform .42s var(--spring)}
.tlinks{position:absolute; top:0; left:0; overflow:visible; pointer-events:none}
.tlinks path{fill:none; stroke:var(--line-strong); stroke-width:1.5}
.tlinks path.wed{stroke:var(--gold); stroke-dasharray:3 3}
.tnodecard{
  position:absolute; width:158px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-md); padding:8px 10px; text-align:left; display:flex; gap:9px; align-items:center;
  box-shadow:var(--shadow-1);
}
.tnodecard:hover{border-color:var(--brand); z-index:2}
.tnodecard .nm{font-size:13.5px; font-weight:590; line-height:1.2; display:block; letter-spacing:-.015em}
.tnodecard .yr{font-size:11px; color:var(--faint); display:block}
.tnodecard.me{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow-1)}
.texp{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  min-width:28px; height:28px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--brand); font-size:12px; font-weight:600; padding:0 8px;
  box-shadow:var(--shadow-1);
}
.texp:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
/* whole-family cards carry a kin label, so they are taller */
.wcard{
  position:absolute; width:196px; min-height:86px; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-md); padding:10px 12px; text-align:left; display:flex; gap:10px; align-items:flex-start;
  box-shadow:var(--shadow-1);
}
.wcard:hover{border-color:var(--brand); z-index:2}
.wcard .wtxt{min-width:0; display:block}
.wcard .nm{font-size:14px; font-weight:600; line-height:1.2; display:block; letter-spacing:-.015em}
.wcard .yr{font-size:11px; color:var(--faint); display:block; margin-top:1px}
.wcard .kin{display:block; margin-top:6px; font-size:11px; font-weight:600; line-height:1.3; color:var(--gold); overflow-wrap:anywhere}
.wcard.me{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand), var(--shadow-2)}
.wcard.me .nm{color:var(--brand)}
.wcard .kin.meKin{color:var(--brand); text-transform:uppercase; letter-spacing:.05em}
/* fullscreen — real, and the CSS fallback for browsers that refuse it */
.tviewport:fullscreen{height:100vh; width:100vw; border-radius:0; border:0}
.tviewport:-webkit-full-screen{height:100vh; width:100vw; border-radius:0; border:0}
.tviewport.pseudo-fs{
  position:fixed; inset:0; z-index:90; width:100vw; height:100vh;
  border-radius:0; border:0; margin:0;
}
body.fs-lock{overflow:hidden}
.fsexit{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:4;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid var(--glass-edge); box-shadow:var(--shadow-glass);
}
.tviewport:not(:fullscreen):not(.pseudo-fs) .fsexit{display:none}

/* ---------- directory ---------- */
.directory{padding:24px 0 64px; max-width:840px}
.dirlist{margin-top:14px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.dirlist button{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left; border:0;
  background:transparent; color:var(--ink); padding:10px 15px; border-bottom:1px solid var(--line);
}
.dirlist button:last-child{border-bottom:0}
.dirlist button:hover{background:var(--fill)}
.dirlist .nm{font-size:15px; font-weight:500; letter-spacing:-.015em}
.dirlist .meta{margin-left:auto; font-size:12px; color:var(--faint); text-align:right}

/* ---------- suggestions & admin ---------- */
.queue{padding:24px 0 64px; max-width:840px; display:grid; gap:14px}
.qitem{display:grid; gap:9px}
.qitem .qhead{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.qitem .qhead .who{font-weight:600}
.qitem .qhead time{margin-left:auto; font-size:12.5px; color:var(--faint)}
.diff{display:grid; gap:6px; font-size:13.5px; background:var(--fill); border-radius:var(--r-md); padding:12px 14px}
.diff .d{display:grid; grid-template-columns:108px 1fr; gap:8px}
.diff .d .old{text-decoration:line-through; color:var(--faint)}
.diff .d .new{color:var(--brand); font-weight:600}
.diff img.sug{max-width:150px; border-radius:var(--r-sm); display:block}
.qbtns{display:flex; gap:8px; flex-wrap:wrap}
.adminsec{display:grid; gap:16px; padding:24px 0 64px; max-width:840px}
.adminsec .card h3{font-size:18px; letter-spacing:-.02em; margin-bottom:10px}
.memrow{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.memrow:last-child{border-bottom:0}
.actlog{font-size:13px; display:grid; gap:7px; max-height:270px; overflow-y:auto}
.actlog .a{display:flex; gap:10px}
.actlog time{color:var(--faint); white-space:nowrap}
.meter{height:6px; border-radius:99px; background:var(--fill); overflow:hidden; margin-top:10px}
.meter i{display:block; height:100%; background:var(--brand); border-radius:99px}

/* ---------- overlays ---------- */
.sheetback{
  position:fixed; inset:0; background:rgba(0,0,0,.28); display:flex;
  align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto; z-index:40;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.sheet{
  width:100%; max-width:560px; background:var(--glass-strong);
  border:1px solid var(--glass-edge); border-radius:var(--r-xl); box-shadow:var(--shadow-2), var(--shadow-glass);
}
.sheet h3{font-size:20px; letter-spacing:-.022em}
.sheet .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--glass-strong); color:var(--ink); border:1px solid var(--glass-edge);
  border-radius:999px; padding:12px 20px; font-weight:590; font-size:14px;
  z-index:60; box-shadow:var(--shadow-2), var(--shadow-glass); max-width:88vw; text-align:center;
}
.savebar{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); color:#fff; font-weight:600; letter-spacing:-.01em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.banner{
  background:var(--gold-soft); color:var(--ink); border-bottom:1px solid var(--line);
  font-size:13px; padding:9px 0; text-align:center;
}

/* ---------- mobile ---------- */
@media (max-width:900px){ .explorer{grid-template-columns:1fr} }
@media (max-width:520px){ .sheet .grid2{grid-template-columns:1fr} }
@media (max-width:680px){
  body{font-size:16px}
  .btn{padding:11px 18px}
  .btn.sm{padding:8px 14px}
  .brand .sub{display:none}
  .treebar{border-radius:var(--r-lg); padding:12px}
  .treebar select{max-width:100%; flex:1}
  .modes{flex:1}
  .modes button{flex:1; padding:9px 8px; font-size:12.5px}
  .treebar .hint{font-size:11.5px}
  nav.tabs{
    position:fixed; bottom:0; left:0; right:0; margin:0; z-index:30; border-radius:0;
    background:var(--glass-strong); border-top:1px solid var(--line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    justify-content:space-around; gap:0;
  }
  nav.tabs button{flex:1; font-size:11.5px; padding:9px 2px; border-radius:var(--r-sm)}
  #app{padding-bottom:84px}
  .tviewport{height:calc(100vh - 320px)}
  .sheetback{padding:0; align-items:flex-end}
  .sheet{max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92vh; overflow-y:auto}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  .tviewport.pseudo-fs, .tviewport:fullscreen{height:100vh}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  body::before{animation:drift 34s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate3d(2%,-2%,0) scale(1.06)}}
  .viewin{animation:vfade .4s var(--spring) both}
  @keyframes vfade{from{opacity:0; transform:translateY(10px)}}
  .gate .crest{animation:vfade .55s var(--spring) both}
  .gatecard{animation:vfade .55s .07s var(--spring) both}
  .pcard,.tnodecard,.wcard{transition:transform .2s var(--spring), border-color .18s, box-shadow .22s}
  .pcard:hover,.dirlist button:hover{transform:translateY(-1px)}
  .pcard:active,.tnodecard:active,.wcard:active{transform:scale(.97)}
  .tnodecard,.wcard{animation:npop .38s var(--spring) both; animation-delay:var(--d,0s)}
  @keyframes npop{from{opacity:0; transform:translateY(8px) scale(.96)}}
  .texp{animation:fadein .45s both; animation-delay:var(--d,0s)}
  .tlinks path{animation:fadein .5s both; animation-delay:var(--d,0s)}
  @keyframes fadein{from{opacity:0}}
  .sheet{animation:rise .38s var(--spring)}
  @keyframes rise{from{transform:translateY(20px) scale(.98); opacity:0}}
  .toast{animation:rise .3s var(--spring)}
}