/* ============================================================
   LABIMAN — dark, compact, RTL
   ============================================================ */
/* Samim — SIL OFL 1.1, self-hosted (73 KB total, no CDN). See assets/fonts/LICENSE-Samim.txt */
/* Yekan — SIL OFL 1.1, self-hosted, unmodified upstream woff2 (16 KB). See assets/fonts/LICENSE-Yekan.txt */
/* The whole UI renders in Yekan; Samim only fills the handful of glyphs Yekan lacks (ٔ … — → ٫). */
@font-face{
  font-family:"Yekan";
  src:url("./fonts/Yekan.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Samim";
  src:url("./fonts/Samim-Regular.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Samim";
  src:url("./fonts/Samim-Bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}
/* Reem Kufi (OFL 1.1, assets/fonts/LICENSE-ReemKufi.txt) stays bundled as an optional display
   face, but no rule references it: every surface of the UI resolves to Yekan. */
@font-face{
  font-family:"Reem Kufi";
  src:url("./fonts/ReemKufi-Regular.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Reem Kufi";
  src:url("./fonts/ReemKufi-Bold.woff2") format("woff2");
  font-weight:700 900; font-style:normal; font-display:swap;
}
:root{
  --bg:#08080a;
  --bg-2:#0b0b0d;
  --panel:#0e0e11;
  --panel-2:#131316;
  --panel-3:#1a1a1e;
  --line:rgba(255,255,255,.065);
  --line-strong:rgba(255,255,255,.11);
  --txt:#e8e9ec;
  --muted:#93969d;
  --dim:#63666d;
  --hi:#dfe2e6;
  --hi-dim:rgba(223,226,230,.12);
  --mid:#a9aeb6;
  --mid-dim:rgba(169,174,182,.12);
  --ink:#0a0a0c;
  --mist:rgba(190,196,206,.05);
  --trace:rgba(214,220,229,.2);
  --grid:rgba(255,255,255,.045);
  /* the survey line system: one hairline scale for the room, one for the popups */
  --hair:rgba(223,226,230,.042);
  --hair-2:rgba(223,226,230,.075);
  --rule:rgba(223,226,230,.3);
  --rule-soft:rgba(223,226,230,.16);
  --field:
    repeating-linear-gradient(90deg,transparent 0 7px,var(--hair) 7px 8px),
    repeating-linear-gradient(180deg,transparent 0 7px,var(--hair) 7px 8px),
    linear-gradient(var(--hair-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair-2) 1px,transparent 1px),
    repeating-linear-gradient(28deg,rgba(223,226,230,.055) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(-21deg,rgba(223,226,230,.04) 0 1px,transparent 1px 88px);
  --field-size:auto,auto,64px 64px,64px 64px,auto,auto;
  --field-mask:radial-gradient(120% 90% at 50% 42%,#000 0%,rgba(0,0,0,.62) 46%,transparent 82%);
  --r:16px;
  --r-sm:11px;
  --r-xs:8px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --font:"Yekan","Samim","Vazirmatn","IRANSansX","Segoe UI",Tahoma,system-ui,sans-serif;
  --mono:"Yekan","Samim","SFMono-Regular",Consolas,"Cascadia Mono",monospace;
  --rail:66px; --list:302px; --insp:300px;
  /* the notch and the home bar belong to the chrome, not to the content */
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:13.5px; line-height:1.6;
  color:var(--txt);
  background:
    radial-gradient(1100px 640px at 78% -12%, #131316 0%, transparent 58%),
    radial-gradient(900px 560px at 6% 108%, #17171b 0%, transparent 62%),
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea{font:inherit; color:inherit}
/* The room the app stands in: a blueprint plane that only surfaces at the edges of the
   viewport, a cold shaft falling from the top, and a vignette that keeps the corners dark.
   Both layers are static and stay far under the contrast of anything readable. */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.8;
  background-image:var(--field);
  background-size:var(--field-size);
  -webkit-mask-image:radial-gradient(128% 104% at 50% 50%, transparent 0 36%, rgba(0,0,0,.72) 74%, #000 100%);
  mask-image:radial-gradient(128% 104% at 50% 50%, transparent 0 36%, rgba(0,0,0,.72) 74%, #000 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(56% 38% at 50% -6%, rgba(223,226,230,.05), transparent 68%),
    radial-gradient(38% 28% at 84% 104%, rgba(178,178,178,.035), transparent 72%),
    radial-gradient(125% 125% at 50% 48%, transparent 50%, rgba(0,0,0,.6) 100%);
}
button{cursor:pointer; background:none; border:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
input,textarea{background:none; border:0; outline:none}
::selection{background:rgba(223,226,230,.22); color:#fff}
/* scrollbars */
*{scrollbar-width:thin; scrollbar-color:#2f2f2f transparent}
*::-webkit-scrollbar{width:7px;height:7px}
*::-webkit-scrollbar-thumb{background:#2c2c2c; border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:#3d3d3d}
*::-webkit-scrollbar-track{background:transparent}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:14px;height:14px}
.muted{color:var(--muted); margin:0}
.dot{width:5px;height:5px;border-radius:50%;background:var(--hi);display:inline-block;box-shadow:0 0 10px rgba(223,226,230,.45)}
.dot.hollow{background:transparent;border:1px solid var(--mid);box-shadow:none}
.mono{font-family:var(--mono); letter-spacing:.02em}

/* Identity surfaces keep their own tracking, never a second family. */
.auth-card h1,.modal-head h3,.insp-head h3,.chat-title h2{letter-spacing:.01em}
.hop-body b,.rail-brand,.auth-brand strong{letter-spacing:.06em}

/* ---------------- buttons / fields ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:37px; padding:0 15px; border-radius:10px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line-strong); color:var(--txt);
  background:rgba(255,255,255,.03); transition:.18s ease; white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(135deg,#dfe2e6,#a4a9b1); color:var(--ink); border-color:transparent;
  box-shadow:0 8px 26px rgba(223,226,230,.14), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{filter:brightness(1.06); box-shadow:0 10px 32px rgba(223,226,230,.22)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--muted)}
.btn.ghost:hover{color:var(--txt)}
.btn.danger{
  color:var(--hi); border-color:rgba(223,226,230,.3); border-style:dashed; font-weight:700;
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.09) 0 6px,transparent 6px 12px);
}
.btn.block{width:100%}
.btn:disabled{opacity:.5; pointer-events:none}
.icon-btn{
  width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px; color:var(--muted); border:1px solid transparent; transition:.16s;
}
.icon-btn:hover{color:var(--txt); background:rgba(255,255,255,.055); border-color:var(--line)}
.icon-btn.soft{background:rgba(255,255,255,.035); border-color:var(--line)}
.link-btn{color:var(--hi); font-size:11.5px; font-weight:600; padding:0 2px; border-bottom:1px solid rgba(223,226,230,.45)}
.field{display:block; margin-bottom:13px}
.field>span{display:block; font-size:11.5px; color:var(--muted); margin-bottom:6px; font-weight:500}
.field input,.field textarea,.field select{
  width:100%; height:39px; padding:0 12px; border-radius:10px;
  background:rgba(255,255,255,.032); border:1px solid var(--line);
  font-size:13px; transition:.16s;
}
.field textarea{height:auto; min-height:60px; padding:10px 12px; resize:vertical; line-height:1.6}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(0% + 15px) 50%,calc(0% + 20px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(178,178,178,.4); background:rgba(178,178,178,.04); box-shadow:0 0 0 3px rgba(178,178,178,.07)}
.field input::placeholder,.field textarea::placeholder{color:#5d5d5d}
.field-hint{font-size:10.5px; color:var(--dim); margin-top:6px; line-height:1.7}
.pill{
  display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px;
  border-radius:99px; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.025);
}
.pill .ic{width:12px;height:12px}
.pill.live{color:var(--hi); border-color:rgba(223,226,230,.28); border-style:solid; background:var(--hi-dim); font-weight:700}
.pill.warn{color:var(--mid); border-color:rgba(169,174,182,.3); border-style:dashed; background:rgba(169,174,182,.07)}
.pill.bad{color:var(--hi); border-color:rgba(223,226,230,.34); border-width:2px; border-style:double; background:var(--hi-dim); font-weight:700; letter-spacing:.05em}
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); font-size:10.5px; color:var(--muted);
}
.chip b{color:var(--txt); font-weight:600}
.chip.mint{color:var(--hi); border-color:rgba(178,178,178,.18); background:var(--hi-dim)}

/* ============================================================
   AUTH
   ============================================================ */
.auth{
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; overflow:auto;
  /* the whole page is shut: one popup in the middle, nothing else reachable */
  background:rgba(6,6,6,.82); backdrop-filter:blur(9px);
}
/* the gate stands on the same survey plane as the rest of the app, but thinned so the card wins */
.auth-grid{
  position:absolute; inset:0; opacity:.75; pointer-events:none;
  background-image:var(--field);
  background-size:var(--field-size);
  -webkit-mask-image:radial-gradient(118% 96% at 50% 46%,#000 0 20%,rgba(0,0,0,.5) 58%,transparent 88%);
  mask-image:radial-gradient(118% 96% at 50% 46%,#000 0 20%,rgba(0,0,0,.5) 58%,transparent 88%);
}
.auth-orb{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.32}
.orb-a{width:420px;height:420px;background:#2c2c2c; top:-120px; right:8%}
.orb-b{width:380px;height:380px;background:#353535; bottom:-140px; left:4%}
.auth-card{
  position:relative; z-index:2; width:min(340px,100%);
  padding:24px 24px 22px; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,rgba(24,24,24,.94),rgba(13,13,13,.96));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
/* survey marks: the card reads as a sealed document, not a login form */
.auth-card::before{
  content:""; position:absolute; width:210px; height:210px; border-radius:50%;
  inset-inline-end:-96px; top:-96px; pointer-events:none;
  border:1px dashed rgba(223,226,230,.09);
  box-shadow:0 0 0 26px rgba(223,226,230,.018) inset;
}
.auth-card::after{
  content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(223,226,230,.34),transparent);
}
.gate-ticks{
  position:absolute; inset:9px; pointer-events:none; opacity:.55;
  background:
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 0 0/11px 1px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 0 0/1px 11px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 100% 0/11px 1px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 100% 0/1px 11px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 0 100%/11px 1px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 0 100%/1px 11px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 100% 100%/11px 1px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 100% 100%/1px 11px no-repeat;
}
.auth-card>.gate-ticks{position:absolute}
.auth-card>*{position:relative; z-index:2}
.auth-card>.gate-ticks{position:absolute; z-index:1}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.logo-mark{
  width:37px;height:37px;border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(145deg,rgba(178,178,178,.18),rgba(178,178,178,.04));
  border:1px solid rgba(178,178,178,.28); color:var(--hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.3);
}
.auth-brand strong{display:block; font-size:15px; letter-spacing:.22em; font-weight:700}
.auth-brand small{display:block; color:var(--dim); font-size:10.5px; margin-top:-2px}
.auth h1{font-size:18px; line-height:1.5; margin:0 0 16px; font-weight:700; letter-spacing:-.2px}
.auth #authSubmit{margin-top:4px; justify-content:center}
/* the key field is the only object in the room: give it a bezel and a fill line */
.gate-field{margin-bottom:16px}
.gate-field>span{margin-bottom:7px}
/* the plate is a <span> inside a <label>, so it has to win against .field>span{display:block} */
.gate-field>.gate-input{display:flex; align-items:stretch; margin-bottom:0}
.gate-input{
  position:relative; display:flex; align-items:stretch; gap:9px; min-height:54px; padding:9px 13px 12px;
  border-radius:12px; background:rgba(0,0,0,.34); border:1px solid var(--line-strong); transition:.16s;
  cursor:text;
}
.gate-input:focus-within{
  border-color:rgba(223,226,230,.42); background:rgba(0,0,0,.44);
  box-shadow:0 0 0 3px rgba(223,226,230,.06), inset 0 1px 0 rgba(255,255,255,.04);
}
.gate-ic{width:15px;height:15px; color:var(--dim); flex:none; transition:.16s}
.gate-input:focus-within .gate-ic{color:var(--hi)}
.gate-input input,.gate-input textarea{
  flex:1; min-width:0; width:auto; padding:0; border:0; background:none; box-shadow:none; resize:none;
  font-family:var(--mono); font-size:13px; line-height:1.75; letter-spacing:.06em; color:var(--txt);
  overflow:hidden; caret-color:var(--hi);
}
.gate-input textarea{height:54px; min-height:54px; max-height:150px}
.gate-input input:focus,.gate-input textarea:focus{border:0; background:none; box-shadow:none; outline:none}
/* the plate is one touch target: a hatch under the glyphs says "the whole box takes the key" */
.gate-input::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.75;
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.032) 0 5px,transparent 5px 11px);
}
.code-meter{
  position:absolute; inset-inline:13px; bottom:7px; height:1px; border-radius:2px;
  background:linear-gradient(90deg,rgba(223,226,230,.15),var(--hi));
  transform:scaleX(0); transform-origin:left center; transition:transform .22s ease;
}
.gate-field>.gate-help{
  display:flex; align-items:center; gap:6px; margin:7px 0 0;
  font-size:10.5px; font-weight:400; line-height:1.85; color:var(--dim);
}
.auth-error{
  margin-top:12px; padding:8px 11px; border-radius:9px; font-size:11.5px; font-weight:600; color:#e2e4e8;
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.07) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(223,226,230,.3);
}

/* ============================================================
   SEAL — لندینگ قفل‌گذاری میان درگاه و برنامه
   ============================================================ */
.seal{
  position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow:hidden;
  background:rgba(6,6,6,.9); backdrop-filter:blur(11px);
  animation:sealIn .22s ease;
}
@keyframes sealIn{from{opacity:0}to{opacity:1}}
.seal-mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:var(--field);
  background-size:var(--field-size);
  -webkit-mask-image:radial-gradient(112% 88% at 50% 50%,#000 0 12%,rgba(0,0,0,.45) 52%,transparent 82%);
  mask-image:radial-gradient(112% 88% at 50% 50%,#000 0 12%,rgba(0,0,0,.45) 52%,transparent 82%);
}
/* one sweep only — it passes over the card while the layers close, then stops */
.seal-scan{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.seal-scan i{
  position:absolute; top:0; bottom:0; left:-42%; width:42%;
  background:linear-gradient(90deg,transparent,rgba(223,226,230,.05) 40%,rgba(223,226,230,.13) 50%,rgba(223,226,230,.05) 60%,transparent);
  animation:sealScan 3.4s cubic-bezier(.35,.65,.2,1) .1s 1 both;
}
@keyframes sealScan{from{transform:translateX(0)}to{transform:translateX(340%)}}
.seal-card{
  position:relative; z-index:2; width:min(426px,100%);
  padding:20px 20px 18px; border-radius:20px;
  background:linear-gradient(180deg,rgba(23,23,24,.96),rgba(12,12,13,.97));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.seal-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.seal-brand strong{display:block; font-size:14px; letter-spacing:.2em; font-weight:700}
.seal-brand small{display:block; color:var(--dim); font-size:9.5px; margin-top:2px; font-family:var(--mono); direction:ltr; letter-spacing:.06em}
.seal-algo{
  margin-inline-start:auto; flex:none; direction:ltr; font-family:var(--mono); font-size:8.5px; letter-spacing:.07em;
  color:var(--muted); padding:4px 8px; border-radius:99px; border:1px dashed var(--line-strong); background:rgba(255,255,255,.03);
}
/* the live plate: the cipher slice on the left, the stage counter on the right */
.seal-plate{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding:9px 12px;
  border-radius:13px; border:1px solid var(--line-strong);
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.04) 0 6px,transparent 6px 12px), rgba(0,0,0,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.seal-plate .mono{font-size:12.5px; letter-spacing:.16em; color:var(--hi); direction:ltr}
.seal-plate b{font-size:9.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; white-space:nowrap}
.seal-card h2{margin:0 0 6px; font-size:15px; font-weight:700}
.seal-sub{margin:0 0 13px; font-size:10.5px; line-height:1.85; color:var(--dim)}
.seal-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.seal-steps li{
  display:flex; align-items:center; gap:9px; min-height:38px; padding:6px 2px;
  font-size:11.5px; color:#4f5257; border-bottom:1px dashed rgba(255,255,255,.045);
  transition:color .2s ease;
}
.seal-steps li:last-child{border-bottom:0}
.s-ic{width:7px;height:7px;flex:none;border-radius:2px;border:1px solid rgba(223,226,230,.28);transform:rotate(45deg)}
.s-body{flex:1; min-width:0}
.s-txt{display:block; min-width:0}
.s-meta{display:block; margin-top:2px; direction:ltr; font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; color:#42464d; transition:color .2s ease}
.s-done{width:13px;height:13px;flex:none;color:var(--hi);opacity:0;transform:scale(.7);stroke-width:2.6;transition:opacity .2s ease,transform .2s ease}
.seal-steps li.now{color:var(--txt)}
.seal-steps li.now .s-ic{border-color:var(--hi); background:rgba(223,226,230,.16)}
.seal-steps li.now .s-meta{color:var(--muted)}
.seal-steps li.done{color:var(--muted)}
.seal-steps li.done .s-ic{border-color:rgba(223,226,230,.5); background:var(--hi)}
.seal-steps li.done .s-done{opacity:1; transform:none}
.seal-steps li.done .s-meta{color:#5a5f67}
.seal-rail{
  position:relative; margin-top:14px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.06); overflow:hidden;
}
.seal-rail::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(6,6,7,.75) 0 1px,transparent 1px 25px);
}
.seal-rail i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:right center;
  background:linear-gradient(90deg,rgba(223,226,230,.35),var(--hi));transition:transform .24s ease;
}
.seal-keys{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:13px;
  border:1px dashed var(--line-strong); border-radius:13px; overflow:hidden; background:rgba(223,226,230,.07);
}
.seal-keys>div{display:flex; flex-direction:column; gap:3px; min-width:0; padding:8px 10px; background:rgba(9,9,10,.82)}
.seal-keys small{font-size:8.5px; color:var(--dim)}
.seal-keys b{
  direction:ltr; text-align:start; font-size:10.5px; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.seal-note{margin:9px 0 0; font-size:10px; color:var(--dim); line-height:1.8}
/* the seal stops here: nothing opens until the user presses continue */
.seal-go{margin-top:14px; justify-content:center; height:42px}

/* ============================================================
   PASSCODE — قفل دستگاه، میان لندینگ و برنامه
   ============================================================ */
.pass{
  position:fixed; inset:0; z-index:32; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow:auto;
  background:rgba(6,6,6,.92); backdrop-filter:blur(11px);
}
.pass-card{
  position:relative; z-index:2; width:min(392px,100%); margin:auto;
  padding:22px 22px 20px; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,rgba(23,23,24,.96),rgba(12,12,13,.97));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.pass-card>*{position:relative; z-index:2}
.pass-card>.gate-ticks{position:absolute; z-index:1}
.pass-brand{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.pass-brand strong{display:block; font-size:14px; letter-spacing:.2em; font-weight:700}
.pass-brand small{display:block; color:var(--dim); font-size:9.5px; margin-top:2px; font-family:var(--mono); direction:ltr; letter-spacing:.06em}
.pass h1{font-size:17px; line-height:1.55; margin:0 0 8px; font-weight:700}
.pass-sub{margin:0 0 16px; font-size:11px; line-height:2; color:var(--muted)}
.pass-body{display:flex; flex-direction:column; gap:12px}
.pass-field{margin:0}
.pass-field>span{margin-bottom:6px}
.pass-field>.gate-input{display:flex; align-items:center; margin-bottom:0}
.pass-field input{
  flex:1; min-width:0; padding:0; border:0; background:none; box-shadow:none;
  font-family:var(--mono); font-size:14px; letter-spacing:.14em; color:var(--txt); caret-color:var(--hi);
}
.pass-field input::placeholder{color:#3f4349; letter-spacing:.22em}
.pass-eye{width:30px;height:30px; flex:none; opacity:.7}
.pass-eye.on{opacity:1}
/* the four rules read as a survey scale, not a password game */
.pass-rules{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px}
.pass-rules li{
  display:flex; align-items:center; gap:6px; font-size:10px; color:var(--dim);
  padding:5px 8px; border-radius:9px; border:1px dashed var(--line); background:rgba(0,0,0,.22);
  transition:.16s ease;
}
.pass-rules .ic{width:11px;height:11px; color:var(--mid); opacity:.45; flex:none}
.pass-rules li.ok{color:var(--txt); border-color:rgba(223,226,230,.34); background:rgba(223,226,230,.05)}
.pass-rules li.ok .ic{color:var(--hi); opacity:1}
.pass-shown{
  display:flex; flex-direction:column; gap:5px; padding:11px 13px; border-radius:12px;
  border:1px solid rgba(223,226,230,.2); background:rgba(0,0,0,.3);
}
.pass-shown b{direction:ltr; text-align:center; font-size:15px; letter-spacing:.16em; color:var(--txt); word-break:break-all}
.pass-shown small{font-size:9.5px; color:var(--dim); line-height:1.8; text-align:center}
.pass-acts{display:flex; gap:8px}
.pass-acts .btn{flex:1; justify-content:center; height:40px}
.pass-hint{display:flex; align-items:center; justify-content:center; gap:8px; margin:2px 0 0; font-size:10px; color:var(--dim)}
.link-btn{
  border:0; background:none; padding:0; font:inherit; color:var(--muted); cursor:pointer;
  text-decoration:1px dashed rgba(223,226,230,.34); text-underline-offset:3px;
}
.link-btn:hover{color:var(--txt)}

/* ============================================================
   SHELL
   ============================================================ */
.shell{
  height:100dvh; display:grid; overflow:hidden;
  grid-template-columns:var(--rail) var(--list) minmax(0,1fr) var(--insp);
  background:linear-gradient(180deg, var(--mist), transparent 24%);
}
/* rail */
.rail{
  display:flex; flex-direction:column; align-items:center; padding:14px 0 12px;
  border-inline-start:1px solid var(--line); background:rgba(11,11,11,.55);
}
.rail-brand{
  width:33px;height:33px; border-radius:10px; display:grid; place-items:center;
  font-weight:800; font-size:15px; letter-spacing:-1px; color:var(--hi);
  border:1px solid rgba(178,178,178,.26); background:var(--hi-dim); margin-bottom:22px;
}
.rail-brand span{color:var(--mid)}
.rail-nav{display:flex; flex-direction:column; gap:5px; align-items:center}
.rail-btn{
  position:relative; width:37px;height:37px; display:grid; place-items:center; border-radius:11px;
  color:#7d7d7d; transition:.16s;
}
.rail-btn:hover{color:var(--txt); background:rgba(255,255,255,.05)}
.rail-btn.is-active{color:var(--hi); background:var(--hi-dim)}
.rail-btn.is-active::before{
  content:""; position:absolute; inset-inline-start:-14.5px; top:10px; width:2px; height:17px;
  border-radius:3px; background:var(--hi); box-shadow:0 0 12px var(--hi);
}
.rail-btn .ic{width:19px;height:19px}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:8px}
.rail-avatar{
  width:34px;height:34px;border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  color:#0e0e0e; background:linear-gradient(145deg,#c9c9c9,#959595); border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.danger-hover:hover{color:var(--hi); background:var(--hi-dim)}

/* list panel */
.list-panel{
  display:flex; flex-direction:column; min-height:0;
  border-inline-start:1px solid var(--line); background:rgba(12,12,12,.62);
}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:18px 16px 12px}
.panel-head h2{margin:0; font-size:16px; font-weight:700; letter-spacing:-.2px}
.panel-head p{font-size:10.5px; color:var(--dim); margin-top:1px}
.search{
  display:flex; align-items:center; gap:7px; margin:0 12px 10px; padding:0 10px; height:34px;
  background:rgba(255,255,255,.033); border:1px solid var(--line); border-radius:9px; color:var(--dim);
}
.search .ic{width:14px;height:14px}
.search input{flex:1; font-size:11.5px; color:var(--txt); min-width:0}
.search input::placeholder{color:#595959}
.lobbies{flex:1; overflow-y:auto; padding:2px 8px 10px; display:flex; flex-direction:column; gap:3px}
.lobby-item{
  display:flex; gap:10px; align-items:center; width:100%; text-align:right;
  padding:9px; border-radius:11px; border:1px solid transparent; transition:.15s;
}
.lobby-item:hover{background:rgba(255,255,255,.038)}
.lobby-item.is-active{
  background:linear-gradient(90deg,rgba(178,178,178,.09),rgba(178,178,178,.025));
  border-color:rgba(178,178,178,.16);
}
.lobby-av{
  width:38px;height:38px;border-radius:12px; flex:none; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; color:#ebebeb; position:relative;
  border:1px solid rgba(255,255,255,.07);
}
.lobby-av::after{
  content:""; position:absolute; inset-inline-end:-1px; bottom:-1px; width:9px;height:9px;border-radius:50%;
  background:var(--hi); border:2px solid #0e0e11;
}
.lobby-item.seen .lobby-av::after{background:var(--hi); box-shadow:0 0 0 3px rgba(223,226,230,.13)}
.lobby-item.masked .lobby-av::after{background:transparent; border:1.5px dashed rgba(223,226,230,.5); box-shadow:none}
.lobby-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.lobby-top{display:flex; align-items:center; gap:6px}
.lobby-top b{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lobby-top time{margin-inline-start:auto; font-size:9.5px; color:var(--dim); flex:none}
.lobby-preview{font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lobby-bottom{display:flex; align-items:center; gap:6px; margin-top:1px}
.mini-tag{display:inline-flex; align-items:center; gap:3px; font-size:9px; color:var(--dim)}
.mini-tag .ic{width:10px;height:10px}
.unread{
  margin-inline-start:auto; min-width:17px; height:17px; padding:0 5px; border-radius:99px;
  background:var(--hi); color:#0a0a0c; font-size:9.5px; font-weight:800; display:grid; place-items:center;
  border-radius:4px; box-shadow:0 0 0 1px rgba(223,226,230,.22), 0 0 14px rgba(223,226,230,.16);
}
.list-empty{padding:26px 14px; text-align:center; color:var(--dim); font-size:11px; line-height:2}
.list-empty .ic{width:26px;height:26px; opacity:.4; margin-bottom:8px}
.list-foot{padding:10px 14px 13px; border-top:1px solid var(--line); background:rgba(0,0,0,.16)}
.net-line{display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--muted)}
.net-line .ic{width:11px;height:11px; color:var(--hi)}
.net-line .sep{flex:1}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--hi);box-shadow:0 0 8px rgba(223,226,230,.35)}
.key-line{font-family:var(--mono); font-size:8.5px; color:#4e4e4e; margin-top:3px; letter-spacing:.06em; direction:ltr; text-align:right}

/* ============================================================
   CHAT
   ============================================================ */
.chat{position:relative; min-width:0; display:flex; flex-direction:column; background:rgba(9,9,9,.35)}
.chat-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px; gap:4px;
}
.empty-orb{
  width:66px;height:66px; border-radius:50%; display:grid; place-items:center; color:var(--hi);
  background:radial-gradient(circle at 35% 30%,rgba(178,178,178,.16),rgba(178,178,178,.03));
  border:1px solid rgba(178,178,178,.18); margin-bottom:14px; box-shadow:0 0 60px rgba(178,178,178,.08);
}
.empty-orb .ic{width:26px;height:26px}
.chat-empty h2{font-size:16px; margin:0; font-weight:650}
.chat-empty p{max-width:330px; color:var(--dim); font-size:11.5px; line-height:2; margin:7px 0 18px}
.empty-actions{display:flex; gap:8px}

.chat-view{flex:1; display:flex; flex-direction:column; min-height:0}
.chat-head{
  min-height:60px; height:auto; flex:none; display:flex; align-items:center; gap:10px; padding:9px 16px;
  border-bottom:1px solid var(--line); background:rgba(12,12,12,.45); backdrop-filter:blur(10px);
}
.chat-avatar{
  width:35px;height:35px;border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:12px;
  border:1px solid rgba(255,255,255,.08); flex:none;
}
.chat-title{min-width:0; display:flex; flex-direction:column; gap:1px; overflow:hidden}
.chat-title h2{margin:0; font-size:13.5px; font-weight:650; display:flex; align-items:center; gap:6px; min-width:0}
.ct-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-title h2 .ic{width:11px;height:11px;color:var(--hi); opacity:.7}
.chat-sub{font-size:10px; color:var(--dim); display:flex; align-items:center; gap:6px; margin-top:0; min-width:0; overflow:hidden}
.chat-sub .dot{width:4px;height:4px}
.chat-actions{margin-inline-start:auto; display:flex; align-items:center; gap:5px}
.sec-chip{
  display:inline-flex; align-items:center; gap:4px; height:25px; padding:0 8px; border-radius:7px;
  font-size:9.5px; color:var(--hi); background:var(--hi-dim); border:1px dashed rgba(223,226,230,.26);
  letter-spacing:.05em;
}
.sec-chip .ic{width:11px;height:11px}
.presence{display:flex; align-items:center; padding-inline-start:5px; direction:ltr}
.presence .p-av{
  width:20px;height:20px;border-radius:50%; border:2px solid #0e0e11; margin-inline-start:-5px;
  display:grid; place-items:center; font-size:7.5px; font-weight:700; color:#0a0a0c;
}
.presence .p-av.masked{
  background:rgba(8,8,10,.85) !important; border:1.5px dashed rgba(223,226,230,.45); color:var(--muted);
  font-size:9px; margin-inline-start:-6px;
}
.presence .more{font-size:8.5px; color:var(--dim); margin-inline-start:4px}
.back-btn{display:none}

.chat-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 18px 6px}
.messages{display:flex; flex-direction:column; gap:9px; min-height:100%; justify-content:flex-end}
.day-divider{display:flex; align-items:center; gap:10px; margin:6px 0 8px; color:var(--dim); font-size:9.5px}
.day-divider::before,.day-divider::after{content:""; flex:1; height:1px; background:var(--line)}
.msg{display:flex; max-width:76%; align-self:flex-start}
.msg.me{align-self:flex-end}
.bubble{
  padding:7px 11px 6px; border-radius:13px; border-start-start-radius:4px;
  background:linear-gradient(180deg,rgba(36,36,36,.92),rgba(27,27,27,.92));
  border:1px solid var(--line); min-width:90px; position:relative;
}
.msg.me .bubble{
  background:linear-gradient(160deg,rgba(78,81,88,.5),rgba(28,29,33,.68));
  border-color:rgba(223,226,230,.18); border-start-start-radius:13px; border-start-end-radius:4px;
}
.bubble .who{display:none; align-items:center; gap:5px; font-size:9.5px; color:var(--hi); margin-bottom:1px; font-weight:600}
.bubble .who .mini-av{width:13px;height:13px;border-radius:4px; display:grid; place-items:center; font-size:6.5px; color:#0b0b0b; font-weight:800}
.msg.group-start .who{display:flex}
.msg .text{margin:0; font-size:12.5px; line-height:1.72; white-space:pre-wrap; word-break:break-word}
.msg .text a{color:var(--mid)}
.bubble-img{display:block; max-width:290px; width:100%; border-radius:8px; margin:2px 0 4px; border:1px solid rgba(255,255,255,.08); cursor:zoom-in}
.msg-meta{display:flex; align-items:center; gap:5px; justify-content:flex-end; margin-top:1px; height:11px}
.msg-meta time{font-size:8.5px; color:#727272}
.ticks{display:inline-flex; color:#5b5e64}
.ticks .ic{width:11px;height:11px; stroke-width:2}
.ticks.done{color:var(--mid)}
.ticks.done .ic{stroke-width:2.6}
.ticks.read{color:var(--hi)}
.ticks.read .ic{stroke-width:3}
.ticks.pending{color:#75787e; opacity:.7}
.rd{font-size:8.5px;color:var(--mid)}
.seal-tag{display:inline-flex; align-items:center; gap:3px; font-size:8px; color:#686868; margin-inline-end:auto; direction:ltr}
.seal-tag .ic{width:9px; height:9px}
.msg.me .seal-tag{color:rgba(178,178,178,.5)}
.bubble.pending{opacity:.65}
.msg-avatar{width:24px;height:24px;border-radius:8px; display:grid; place-items:center; font-size:9px; font-weight:800; color:#0c0c0c; flex:none; margin-top:2px; margin-inline-end:6px}
.msg-avatar.masked{
  background:rgba(8,8,10,.8) !important; border:1.5px dashed rgba(223,226,230,.42); border-radius:50%;
  color:var(--muted); font-size:11px;
}
.who.masked{color:var(--muted); letter-spacing:.05em}
.msg-received{display:flex; align-items:flex-start; max-width:76%; align-self:flex-start; gap:0}
.msg-received .bubble{max-width:100%}
.sys-note{align-self:center; font-size:9.5px; color:var(--dim); background:rgba(255,255,255,.035); border:1px solid var(--line); padding:3px 10px; border-radius:99px; margin:3px 0; display:flex; align-items:center; gap:5px}
.sys-note .ic{width:11px;height:11px;color:var(--hi)}

.composer-wrap{flex:none; padding:0 16px 14px; background:linear-gradient(180deg,transparent,rgba(9,9,9,.65) 40%)}
.composer-hint{display:flex; align-items:center; gap:5px; justify-content:center; font-size:9px; color:#5b5b5b; padding:5px 0 7px}
.composer-hint .ic{width:10px;height:10px; color:rgba(178,178,178,.5)}
.composer-hint b{color:#898989; font-weight:500}
.composer-hint .link-btn{font-size:9px; margin-inline-start:4px}
.composer{
  display:flex; align-items:flex-end; gap:6px; padding:5px 6px 5px 8px; border-radius:14px;
  background:rgba(27,27,27,.72); border:1px solid var(--line-strong);
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
  transition:.18s;
}
.composer:focus-within{border-color:rgba(178,178,178,.28); box-shadow:0 0 0 3px rgba(178,178,178,.05)}
.composer textarea{
  flex:1; resize:none; max-height:110px; padding:7px 4px 6px; font-size:12.5px; line-height:1.6;
  background:none; color:var(--txt); min-height:33px;
}
.composer textarea::placeholder{color:#5f5f5f}
.composer .icon-btn{width:32px;height:32px; color:#898989}
.send-btn{
  width:33px;height:33px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(140deg,#bfbfbf,#989898); color:#0b0b0b;
  box-shadow:0 6px 18px rgba(178,178,178,.2); transition:.16s;
}
.send-btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.send-btn .ic{width:16px;height:16px; transform:rotate(180deg) translateX(1px)}
.send-btn:disabled{opacity:.35; transform:none; box-shadow:none}
.attach-preview{
  display:flex; align-items:center; gap:8px; margin:0 2px 7px; padding:6px; border-radius:10px;
  background:rgba(27,27,27,.8); border:1px solid var(--line); font-size:10.5px; color:var(--muted);
}
.attach-preview img{width:38px;height:38px;object-fit:cover;border-radius:7px}
.attach-preview .icon-btn{margin-inline-start:auto; width:24px;height:24px}

/* ============================================================
   INSPECTOR
   ============================================================ */
.inspector{
  position:relative; isolation:isolate;
  border-inline-start:1px solid var(--line); background:rgba(11,11,11,.55);
  padding:16px 13px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
}
.insp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px}
.insp-head h3{margin:0; font-size:12.5px; font-weight:650; display:flex; align-items:center; gap:6px}
.insp-head h3 .ic{width:13px;height:13px;color:var(--hi)}
.insp-card{
  padding:11px; border-radius:12px; background:rgba(255,255,255,.022);
  border:1px solid var(--line);
}
.insp-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:10.5px; color:var(--muted)}
.insp-card-top .state{font-size:9.5px; color:var(--hi); font-family:var(--mono)}
.hops{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.hop{display:flex; gap:8px; position:relative; padding-bottom:9px}
.hop:last-child{padding-bottom:0}
.hop-rail{width:13px; display:flex; flex-direction:column; align-items:center; flex:none; padding-top:3px}
.hop-dot{
  width:8px;height:8px; border-radius:2px; transform:rotate(45deg);
  background:transparent; border:1px solid #4d5158; flex:none; transition:.2s;
}
.hop-line{width:1px; flex:1; margin:3px 0 -3px; background:repeating-linear-gradient(180deg,#3c4046 0 3px,transparent 3px 7px)}
.hop:last-child .hop-line{display:none}
.hop.active .hop-dot{background:var(--mid); border-color:var(--hi); box-shadow:0 0 10px rgba(223,226,230,.4)}
.hop.done .hop-dot{background:var(--hi); border-color:var(--hi)}
.hop.done .hop-line{background:repeating-linear-gradient(180deg,rgba(223,226,230,.42) 0 3px,transparent 3px 7px)}
.hop-body{min-width:0; flex:1}
.hop-body b{display:block; font-size:10.5px; font-weight:600; line-height:1.5}
.hop-body small{display:block; font-size:8.5px; color:var(--dim); font-family:var(--mono); direction:ltr; text-align:right; line-height:1.6; overflow:hidden; text-overflow:ellipsis}
.hop .hop-size{font-size:8px; color:#585858; font-family:var(--mono); direction:ltr; align-self:center}
.route-foot{display:flex; align-items:center; gap:5px; margin-top:9px; padding-top:8px; border-top:1px dashed var(--line); font-size:9px; color:var(--dim)}
.route-foot .ic{width:10px;height:10px;color:var(--hi)}
.route-foot b{color:var(--muted); font-weight:500}
.insp-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.stat{padding:8px 9px; border-radius:9px; background:rgba(255,255,255,.022); border:1px solid var(--line)}
.stat b{display:block; font-size:14px; font-weight:700; color:var(--txt); line-height:1.4; font-family:var(--mono)}
.stat small{display:block; font-size:8.5px; color:var(--dim); margin-top:-1px}
.insp-section{display:flex; flex-direction:column; gap:7px}
.insp-label{font-size:9px; color:var(--dim); letter-spacing:.08em; margin:2px 1px -2px}
.toggle-row{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:9px; background:rgba(255,255,255,.02); border:1px solid var(--line)}
.toggle-row .t-body{flex:1; min-width:0}
.toggle-row b{display:block; font-size:10.5px; font-weight:550}
.toggle-row small{display:block; font-size:8.5px; color:var(--dim)}
.switch{width:29px;height:17px;border-radius:99px;background:#2c2c2c; border:1px solid #3a3a3a; position:relative; flex:none; transition:.18s}
.switch::after{content:""; position:absolute; width:11px;height:11px;border-radius:50%;background:#777777; top:2px; inset-inline-start:2px; transition:.18s}
.switch.on{background:rgba(178,178,178,.24); border-color:rgba(178,178,178,.4)}
.switch.on::after{background:var(--hi); inset-inline-start:14px; box-shadow:0 0 8px rgba(178,178,178,.6)}
.seg{display:flex; padding:2px; border-radius:8px; background:rgba(0,0,0,.25); border:1px solid var(--line)}
.seg button{flex:1; height:21px; border-radius:6px; font-size:9.5px; color:var(--dim); font-family:var(--mono)}
.seg button.on{background:rgba(255,255,255,.08); color:var(--txt)}
.insp-note{
  font-size:8.5px; line-height:1.9; color:#595959; padding:7px 8px; border-radius:8px;
  border:1px dashed var(--line); display:flex; gap:5px;
}
.insp-note .ic{width:11px;height:11px; flex:none; margin-top:2px; color:var(--mid); opacity:.7}
.insp-empty{
  font-size:9.5px; line-height:2; color:#686868; padding:4px 2px 8px;
}
.relay-pool{display:flex; flex-wrap:wrap; gap:4px}
.relay-pool .chip{font-family:var(--mono); font-size:8.5px; padding:3px 7px}
.relay-pool .chip .dot{width:3px;height:3px; background:#6d6d6d; box-shadow:none}
.key-box{
  font-family:var(--mono); font-size:9px; color:var(--muted); direction:ltr; text-align:left;
  background:rgba(0,0,0,.28); padding:7px 8px; border-radius:7px; border:1px solid var(--line);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.05em;
}

/* ============================================================
   MODALS / SHEETS / TOASTS
   ============================================================ */
.modal-root{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:18px}
.backdrop{position:absolute; inset:0; background:rgba(4,4,4,.7); backdrop-filter:blur(7px); animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative; width:min(420px,100%); max-height:88dvh; overflow-y:auto;
  background:linear-gradient(180deg,#1a1a1a,#0f0f0f); border:1px solid var(--line-strong);
  border-radius:18px; box-shadow:var(--shadow); animation:pop .2s cubic-bezier(.2,.9,.3,1.15);
  padding:18px;
}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal.wide{width:min(470px,100%)}
.modal-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:15px}
.modal-head .m-ic{
  width:32px;height:32px;border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--hi-dim); color:var(--hi); border:1px solid rgba(178,178,178,.16);
}
.modal-head .m-ic .ic{width:16px;height:16px}
.modal-head h3{margin:0; font-size:14px; font-weight:650}
.modal-head p{margin:1px 0 0; font-size:10.5px; color:var(--dim); line-height:1.6}
.modal-close{margin-inline-start:auto; width:28px;height:28px; display:grid; place-items:center; border-radius:8px; color:var(--dim)}
.modal-close:hover{background:rgba(255,255,255,.05); color:var(--txt)}
.modal-foot{display:flex; gap:8px; margin-top:16px}
.modal-foot .btn{flex:1}
.code-box{
  display:flex; align-items:center; gap:8px; padding:8px 9px 8px 12px; border-radius:10px;
  background:rgba(0,0,0,.32); border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:10.5px; direction:ltr; letter-spacing:.04em; color:var(--hi);
  word-break:break-all; line-height:1.9;
}
.code-box span{flex:1}
.code-box .icon-btn{width:26px;height:26px; flex:none; color:var(--muted)}
.invite-warn{
  display:flex; gap:7px; font-size:10px; line-height:1.9; color:#c4c7cc; padding:9px 10px; border-radius:9px;
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.05) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(223,226,230,.22); margin-top:11px;
}
.invite-warn .ic{width:13px;height:13px; color:var(--mid); flex:none; margin-top:2px}
.kv{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:11px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.kv b{font-weight:550; font-family:var(--mono); font-size:10px; direction:ltr; color:var(--txt)}
.kv b.txt{font-family:var(--font); direction:rtl}
.identity-row{display:flex; align-items:center; gap:10px; padding:10px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid var(--line); margin-bottom:13px}
.identity-row .big-av{width:38px;height:38px;border-radius:50%; display:grid;place-items:center; font-weight:800; color:#0d0d0d; font-size:13px}
.identity-row b{display:block; font-size:12.5px}
.identity-row small{display:block; color:var(--dim); font-size:9.5px; font-family:var(--mono); direction:ltr; text-align:right}
.settings-block{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.settings-block h4{margin:0 0 2px; font-size:10.5px; color:var(--muted); font-weight:600}

/* ============================================================
   MEMBERS — one node code, never a roster for ordinary members
   ============================================================ */
.find-head{display:flex; align-items:center; gap:8px; margin:14px 3px 3px; font-size:9.5px; letter-spacing:.05em; color:var(--dim)}
.find-head .ic{width:12px;height:12px; color:var(--mid); flex:none}
.find-head i{flex:1; height:1px; background:linear-gradient(270deg,rgba(223,226,230,.24),transparent)}
.mem-item .lobby-av{font-family:var(--mono); font-size:13px}
.mem-id{display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line); margin-bottom:11px}
.mem-id>span:nth-child(2){flex:1; min-width:0}
.mem-id b{display:block; font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:var(--txt)}
.mem-id small{display:block; margin-top:2px; font-size:9.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mem-id .icon-btn{flex:none; color:var(--muted)}
.mem-av{
  width:34px;height:34px; border-radius:11px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:12.5px; color:#ebebeb; border:1px solid rgba(255,255,255,.07);
}
.mem-av.hollow{background:none; border:1px dashed rgba(223,226,230,.34); color:var(--mid)}
.mem-av.hollow .ic{width:14px;height:14px}
.mem-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start; padding:8px 9px;
  border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.2); transition:.15s;
}
.mem-row:hover{border-color:var(--line-strong); background:rgba(255,255,255,.045)}
.mem-row.still{
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.045) 0 6px,transparent 6px 12px);
  border-style:dashed;
}
.mem-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.mem-body b{font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mem-body b[dir="ltr"]{font-family:var(--mono); letter-spacing:.06em}
.mem-body small{font-size:9.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mem-act .ic{width:14px;height:14px; color:var(--mid)}
.mem-row:hover .mem-act .ic{color:var(--hi)}
.pick-list{display:flex; flex-direction:column; gap:5px; max-height:44dvh; overflow-y:auto; padding:1px}
.pick-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start; padding:8px 9px;
  border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.022); transition:.15s;
}
.pick-row:hover{border-color:var(--line-strong); background:rgba(255,255,255,.05)}
.pick-row .lobby-av{width:32px;height:32px; border-radius:10px; font-size:11px}
.pick-row>.ic{width:14px;height:14px; color:var(--mid); flex:none}
.pick-row:hover>.ic{color:var(--hi)}
.pick-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.pick-body b{font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick-body small{font-size:9.5px; color:var(--dim)}

/* ============================================================
   ROOM CHARTER — the subject card and the in-room invitation flow
   ============================================================ */
.room-cta{
  align-self:center; width:min(430px,100%); margin:6px auto 2px; padding:13px 14px;
  display:flex; flex-direction:column; gap:8px; text-align:start; border-radius:16px;
  border:1px dashed var(--line-strong);
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.05) 0 7px,transparent 7px 14px), rgba(16,16,18,.74);
}
.cta-head{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:650; color:var(--txt)}
.cta-head .ic{width:14px;height:14px; color:var(--hi); flex:none}
.room-cta p{margin:0; font-size:10.5px; line-height:1.9; color:var(--muted)}
.cta-acts{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.cta-acts .btn.sm{min-width:136px; justify-content:center}
.settings-block .cta-acts{margin-top:9px}
.brief-card{padding:10px 11px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.3)}
.brief-card b{display:block; font-size:12px; line-height:1.7; color:var(--hi)}
.brief-card p{margin:5px 0 0; font-size:10.5px; line-height:1.85; color:var(--muted); white-space:pre-line}

.danger-zone{
  border:1px dashed rgba(223,226,230,.26);
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.05) 0 7px,transparent 7px 14px);
}
.danger-zone h4{color:#e2e4e8; letter-spacing:.03em}
.toast-root{position:fixed; z-index:90; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:7px; pointer-events:none; align-items:center}
.toast{
  display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  background:rgba(22,22,22,.96); border:1px solid var(--line-strong); color:var(--txt);
  font-size:11px; box-shadow:0 14px 34px rgba(0,0,0,.5); animation:toastIn .22s ease;
  pointer-events:auto; max-width:90vw;
}
.toast .ic{width:14px;height:14px;color:var(--hi)}
.toast.bad .ic{color:var(--hi)}
@keyframes toastIn{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.86); display:grid; place-items:center; padding:24px;
  backdrop-filter:blur(8px); animation:fade .18s;
}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 30px 80px #000}
.lightbox .icon-btn{position:absolute; top:18px; inset-inline-end:18px; background:rgba(255,255,255,.08); color:#fff}

/* ============================================================
   NETWORK BOARD — public rooms, request + proposal
   ============================================================ */
.board-view{flex:1; display:flex; flex-direction:column; min-height:0}
.board-head{
  flex:none; display:flex; align-items:center; gap:12px; padding:13px 18px;
  border-bottom:1px solid var(--line); background:rgba(12,12,12,.45); backdrop-filter:blur(10px);
}
.board-head-txt{flex:1; min-width:0}
.board-head h2{margin:0; font-size:13.5px; font-weight:650; display:flex; align-items:center; gap:8px}
.board-net{
  font-family:var(--mono); font-size:8.5px; font-weight:400; color:var(--hi); letter-spacing:.04em;
  padding:2px 6px; border-radius:6px; background:var(--hi-dim); direction:ltr;
}
.board-head .muted{font-size:10px; margin-top:2px}
.board-scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 16px 20px; display:flex; flex-direction:column; gap:10px}

.board-card{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); padding:11px 13px;
  display:flex; flex-direction:column; gap:9px;
}
.board-card:hover{border-color:var(--line-strong)}
.board-card-top{display:flex; align-items:center; gap:9px}
.board-av{
  width:32px;height:32px;border-radius:10px; flex:none; display:grid; place-items:center;
  color:#ebebeb; border:1px solid rgba(255,255,255,.07);
}
.board-av .ic{width:15px;height:15px}
.board-ttl{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.board-ttl b{font-size:12.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board-ttl small{font-size:9.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board-state{
  flex:none; font-size:8.5px; padding:3px 7px; border-radius:99px; color:var(--dim);
  border:1px dashed var(--line-strong); background:rgba(255,255,255,.02);
}
.board-state.in{color:var(--hi); border:1px solid rgba(223,226,230,.3); background:var(--hi-dim); font-weight:700}
.board-offer{
  margin:0; font-size:11px; line-height:1.6; color:var(--muted); padding:8px 10px;
  border-radius:9px; background:rgba(255,255,255,.022); border:1px solid var(--line);
}
.board-offer span{
  display:block; font-size:8.5px; color:var(--mid); letter-spacing:.09em; margin-bottom:4px; opacity:.85;
  padding-inline-start:9px; position:relative;
}
.board-offer span::before{content:""; position:absolute; inset-inline-start:0; top:.42em; width:5px; height:1px; background:var(--mid)}
.board-card.is-pending{border-style:dashed; background:rgba(255,255,255,.012)}
.board-state .ic{width:10px;height:10px; vertical-align:-1px; margin-inline-end:3px}
.board-state.wait{color:var(--muted); border:1px solid var(--line-strong); background:rgba(255,255,255,.045)}
.board-key{
  display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:9px;
  border:1px solid var(--line-strong); background:rgba(0,0,0,.34);
  font-family:var(--mono); font-size:10px; color:var(--hi); letter-spacing:.02em; word-break:break-all;
}
.board-key span{flex:1; min-width:0}
.board-key .icon-btn{width:24px;height:24px; flex:none; color:var(--muted)}
.board-acts{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.board-meta{margin-inline-start:auto; font-size:8.5px; color:#585858}
.board-head-acts{display:flex; gap:7px; flex:none}

.btn.sm{height:28px; padding:0 11px; font-size:10.5px; border-radius:9px; gap:5px}
.btn.sm .ic{width:12px;height:12px}
.grant-list{display:flex; flex-direction:column; gap:6px}
.grant-row{
  display:grid; grid-template-columns:1fr auto; gap:3px 8px; text-align:start; padding:9px 10px;
  border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.022);
}
.grant-row:hover{border-color:var(--line-strong); background:rgba(255,255,255,.05)}
.grant-row b{font-size:11.5px; font-weight:650; color:var(--txt)}
.grant-row .mono{font-size:9.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grant-row em{grid-column:1/-1; font-style:normal; font-size:9px; color:#5d5d5d; letter-spacing:.05em}
.brief-note{
  align-self:stretch; margin:2px 0 12px; padding:11px 13px 12px; border-radius:12px;
  border:1px solid var(--line-strong); border-inline-start:2px solid var(--mid);
  background:linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.brief-top{display:flex; align-items:center; gap:7px; font-size:9px; letter-spacing:.1em; color:var(--mid); margin-bottom:7px}
.brief-top .ic{width:12px;height:12px}
.brief-top span{margin-inline-start:auto; color:#5d5d5d; font-family:var(--mono)}
.brief-note b{display:block; font-size:12.5px; line-height:1.7; color:var(--hi); font-weight:650}
.brief-note p{margin:6px 0 0; font-size:11px; line-height:1.8; color:var(--muted); white-space:pre-line}
.brief-note small{display:flex; align-items:center; gap:5px; margin-top:9px; font-size:9px; color:#5d5d5d; letter-spacing:.04em}
.brief-note small .ic{width:10px;height:10px}
.flow-steps{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.flow-step{display:flex; align-items:flex-start; gap:9px; font-size:11px; line-height:1.7; color:var(--muted)}
.flow-step i{
  flex:none; width:19px;height:19px; border-radius:6px; font-style:normal; display:grid; place-items:center;
  font-family:var(--mono); font-size:10px; color:var(--hi); border:1px solid var(--line-strong); background:rgba(255,255,255,.04);
}
.flow-step b{color:var(--txt); font-weight:650}
.panel-acts{display:flex; gap:6px; flex:none}
.board-entry .lobby-av{background:linear-gradient(150deg,rgba(178,178,178,.16),rgba(199,199,199,.1))}
.board-entry .lobby-av svg{width:16px;height:16px;color:var(--hi)}

/* ============================================================
   MOBILE CHROME — inert above phone width, the whole IA below it
   ============================================================ */
.m-top,.m-dock,.m-scrim,.sheet-grip,.sheet-close,.m-only{display:none}
.d-only{display:inline-flex}
.m-top{
  align-items:center; gap:9px; padding:calc(6px + var(--sat)) 12px 6px;
  border-bottom:1px solid var(--line); background:rgba(10,10,10,.72); backdrop-filter:blur(14px);
}
.m-brand{
  width:30px;height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-weight:800; font-size:14px; color:var(--hi); border:1px solid rgba(178,178,178,.26); background:var(--hi-dim);
}
.m-brand span{color:var(--mid)}
.m-net{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:99px;
  border:1px dashed var(--line-strong); background:rgba(255,255,255,.02); color:var(--muted);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; direction:ltr;
}
.m-net .ic{width:12px;height:12px; color:var(--hi); opacity:.8}
.m-net b{font-weight:600; color:var(--txt)}
.m-top .m-net{margin-inline-end:auto}
.m-avatar{
  width:34px;height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#0d0d0d; border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(223,226,230,.08);
}
.m-scrim{
  position:fixed; inset:0; z-index:45; background:rgba(4,4,4,.6);
  backdrop-filter:blur(4px); animation:fade .18s ease;
}
.m-dock{
  position:relative; align-items:flex-end; justify-content:space-between;
  padding:0 8px calc(4px + var(--sab));
  border-top:1px solid var(--line); background:rgba(9,9,10,.86); backdrop-filter:blur(16px);
}
/* survey hairline + registration ticks: the dock reads as an instrument rail, not a toolbar */
.m-dock::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(223,226,230,.2) 20%,rgba(223,226,230,.2) 80%,transparent);
}
.m-dock::after{
  content:""; position:absolute; inset-block-start:-8px; inset-inline:13px; height:7px; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 0 100%/1px 7px no-repeat,
    linear-gradient(rgba(223,226,230,.3),rgba(223,226,230,.3)) 100% 100%/1px 7px no-repeat;
}
.dock-btn{
  position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:52px; color:#7b7b7b; transition:color .16s;
}
.dock-btn .ic{width:19px;height:19px}
.dock-btn small{font-size:9px; letter-spacing:.02em; font-weight:500}
.dock-btn:active{transform:translateY(1px)}
.dock-btn.is-active{color:var(--hi)}
.dock-btn.is-active::before{
  content:""; position:absolute; top:2px; width:20px; height:2px; border-radius:2px;
  background:var(--hi); box-shadow:0 0 12px rgba(223,226,230,.65);
}
.dock-badge{
  position:absolute; top:8px; inset-inline-end:calc(50% - 17px); min-width:15px; height:15px; padding:0 4px;
  border-radius:99px; background:var(--hi); color:#0a0a0c; font-size:8.5px; font-weight:800; line-height:15px;
  box-shadow:0 0 0 2px rgba(9,9,10,.9);
}
.dock-fab{
  position:relative; flex:none; width:52px; height:52px; border-radius:50%; margin:0 4px;
  align-self:flex-end; transform:translateY(-14px);
  display:grid; place-items:center; color:#0b0b0c;
  background:linear-gradient(150deg,#e2e5e9,#9aa0a8);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.6), 0 0 0 6px rgba(223,226,230,.05), inset 0 1px 0 rgba(255,255,255,.5);
}
.dock-fab .ic{width:22px;height:22px; stroke-width:2.1}
.dock-fab:active{transform:translateY(-11px) scale(.96)}

/* ============================================================
   MOBILE DRAWER — the desktop rail, opened from the header
   ============================================================ */
.m-drawer,.m-drawer-scrim,.m-menu{display:none}
.m-menu{
  width:34px;height:34px; flex:none; border-radius:10px; place-items:center; color:var(--muted);
  border:1px solid var(--line); background:rgba(255,255,255,.022);
}
.m-menu .ic{width:17px;height:17px}
.m-menu.is-open{color:var(--hi); border-color:rgba(178,178,178,.34); background:var(--hi-dim)}
.m-drawer{
  position:fixed; z-index:56; inset-block:0; inset-inline-start:0; width:min(322px,86vw);
  flex-direction:column; gap:12px; padding:calc(12px + var(--sat)) 14px calc(14px + var(--sab));
  background:linear-gradient(180deg,#131315,#08080a 42%); border-inline-end:1px solid var(--line-strong);
  box-shadow:26px 0 64px rgba(0,0,0,.62); overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(103%); transition:transform .26s cubic-bezier(.2,.85,.25,1);
}
/* the registration ticks down the inner edge: the drawer opens like an instrument panel */
.m-drawer::before{
  content:""; position:absolute; inset-block:0; inset-inline-end:0; width:7px; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(180deg,rgba(223,226,230,.34) 0 1px,transparent 1px 23px);
}
.m-drawer.is-open{transform:none}
.m-drawer-scrim{
  position:fixed; inset:0; z-index:55; background:rgba(4,4,4,.62); backdrop-filter:blur(4px); animation:fade .18s ease;
}
.drawer-grip{display:none}
.drawer-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px dashed var(--line-strong)}
.drawer-head .logo-mark{width:32px;height:32px; border-radius:10px; display:grid; place-items:center; flex:none;
  color:var(--hi); background:var(--hi-dim); border:1px solid rgba(178,178,178,.24)}
.drawer-head .logo-mark .ic{width:16px;height:16px}
.drawer-head>div{flex:1; min-width:0}
.drawer-head strong{display:block; font-size:13px; letter-spacing:.14em; color:var(--txt)}
.drawer-head small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; direction:ltr; color:var(--dim); margin-top:2px}
.drawer-close{width:34px;height:34px; flex:none; border-radius:10px; color:var(--muted)}
.drawer-close:hover{background:rgba(255,255,255,.05); color:var(--txt)}
.drawer-node{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px;
  background:rgba(255,255,255,.026); border:1px solid var(--line);
}
.node-av{width:38px;height:38px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-size:13px; font-weight:800; color:#0d0d0d}
.drawer-node>span:nth-child(2){flex:1; min-width:0}
.drawer-node b{display:block; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawer-node small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; direction:ltr; color:var(--dim); margin-top:2px}
.drawer-nav{display:flex; flex-direction:column; gap:2px}
.drawer-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:start; min-height:50px; padding:8px 10px;
  border-radius:13px; border:1px solid transparent; color:var(--muted); transition:.15s;
}
.drawer-item:hover{background:rgba(255,255,255,.035)}
.drawer-item:active{transform:scale(.99)}
.drawer-item .ic{width:18px;height:18px; color:#8d8d92; flex:none}
.drawer-item>span{flex:1; min-width:0}
.drawer-item b{display:block; font-size:12.5px; font-weight:600; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawer-item small{display:block; font-size:9.5px; color:var(--dim); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawer-item .tail{flex:none; margin-inline-start:auto; font-family:var(--mono); font-size:9.5px; color:var(--dim)}
.drawer-item .tail.hot{
  min-width:17px; height:17px; padding:0 5px; border-radius:99px; text-align:center;
  background:var(--hi); color:#0a0a0c; font-weight:800; box-shadow:0 0 0 2px rgba(8,8,10,.9);
}
.drawer-item.is-active{
  background:linear-gradient(90deg,rgba(178,178,178,.12),rgba(178,178,178,.02));
  border-color:rgba(178,178,178,.2);
}
.drawer-item.is-active .ic{color:var(--hi)}
.drawer-state{display:flex; flex-direction:column; gap:1px; padding:10px 11px; border-radius:13px;
  border:1px dashed var(--line-strong); background:rgba(0,0,0,.28)}
.drawer-state .row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--muted)}
.drawer-state .row+.row{margin-top:5px; padding-top:5px; border-top:1px solid rgba(223,226,230,.06)}
.drawer-state .row b{font-family:var(--mono); font-size:10px; direction:ltr; color:var(--txt)}
.drawer-state .row .ic{width:11px;height:11px; color:var(--hi); margin-inline-end:5px}
.drawer-foot{margin-top:auto; display:flex; flex-direction:column; gap:9px}
.drawer-note{
  margin:0; font-size:9.5px; line-height:1.9; color:var(--dim); text-align:center;
  padding:9px 10px; border-radius:11px;
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.045) 0 6px,transparent 6px 12px);
  border:1px dashed rgba(223,226,230,.16);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  :root{--insp:0px}
  .inspector{
    position:fixed; z-index:40; top:0; bottom:0; left:0; right:auto; width:290px;
    transform:translateX(-100%); transition:transform .24s ease;
    background:#0d0d0d; box-shadow:20px 0 60px rgba(0,0,0,.5); display:flex;
  }
  .inspector.open{transform:none}
  .insp-toggle{display:inline-flex}
}
@media (min-width:1181px){.insp-toggle{display:none}}
@media (max-width:900px){
  :root{--list:262px}
  .msg{max-width:86%}
  .bubble-img{max-width:230px}
}
/* ---------- phone: a different instrument, not a squashed desktop ---------- */
@media (max-width:760px){
  .shell{
    height:100dvh; display:grid; grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"top" "body" "dock";
  }
  .rail{display:none}
  .m-top{display:flex; grid-area:top}
  .m-dock{display:flex; grid-area:dock}
  .m-scrim{display:block}
  .m-menu{display:grid}
  .m-drawer{display:flex}
  .m-drawer.is-open{box-shadow:26px 0 64px rgba(0,0,0,.62)}
  .m-drawer-scrim{display:block}
  .m-drawer-scrim[hidden]{display:none}
  .list-panel,.chat{grid-area:body; min-height:0}
  .list-panel{display:none; border-inline-start:0; background:rgba(10,10,10,.6)}
  .chat{display:flex}
  .shell[data-mview="rooms"] .list-panel{display:flex}
  .shell[data-mview="rooms"] .chat{display:none}
  /* a conversation owns the whole screen; the chrome steps out of the way */
  .shell[data-mview="chat"] .m-top,.shell[data-mview="chat"] .m-dock{display:none}
  .shell[data-mview="chat"] .chat-head{
    height:auto; min-height:58px; padding-top:calc(8px + var(--sat)); padding-bottom:8px;
  }

  /* home: the room list */
  .panel-head{padding:15px 16px 10px}
  .panel-head h2{font-size:18px}
  .panel-head p{font-size:11px}
  .panel-acts{display:none}
  .search{height:42px; margin:0 14px 12px; padding:0 13px; gap:9px; border-radius:12px}
  .search input{font-size:16px}
  .search .ic{width:16px;height:16px}
  .lobbies{padding:2px 10px 28px; gap:5px; overscroll-behavior:contain}
  .lobby-item{padding:11px 10px; gap:12px; border-radius:14px}
  .lobby-av{width:46px;height:46px; border-radius:15px; font-size:15px}
  .lobby-av::after{width:11px;height:11px; border-width:2.5px}
  .lobby-top b{font-size:14.5px}
  .lobby-top time{font-size:10px}
  .lobby-preview{font-size:11.5px; color:#8d9098}
  .lobby-bottom{margin-top:4px; gap:8px}
  .mini-tag{font-size:9.5px}
  .unread{min-width:19px; height:19px; font-size:10px}
  .list-empty{padding:34px 18px; font-size:12px}
  .list-foot{padding:10px 16px calc(10px + var(--sab))}
  .net-line{font-size:10.5px}
  .key-line{font-size:9px}

  /* the board */
  .board-head{padding:14px 16px; align-items:flex-start}
  .board-head h2{font-size:16px}
  .board-head .muted{font-size:11px; line-height:1.8}
  .board-head-acts{display:none}
  .board-scroll{padding:12px 13px calc(36px + var(--sab)); gap:12px}
  .board-card{padding:13px 14px; gap:11px; border-radius:14px; background:rgba(21,21,24,.72)}
  .board-av{width:40px;height:40px; border-radius:13px}
  .board-ttl b{font-size:14.5px; white-space:normal; line-height:1.5}
  .board-ttl small{font-size:10.5px}
  .board-state{font-size:9px; padding:4px 8px}
  .board-offer{font-size:11.5px; padding:10px 11px}
  .board-key{font-size:10.5px; padding:10px}
  .board-acts{gap:8px}
  .board-acts .btn.sm{flex:1; min-width:120px; height:38px; font-size:11.5px; justify-content:center}
  .board-meta{width:100%; margin:2px 0 0; text-align:center}

  /* conversation */
  .d-only{display:none}
  .m-only{display:inline-flex}
  .back-btn{display:inline-flex}
  .chat-head{gap:9px; padding:0 12px; min-height:56px}
  .chat-head>*{flex:none}
  .chat-head .sec-chip{display:none}
  .chat-title{flex:1 1 auto; min-width:0}
  .sheet-close{
    position:absolute; inset-block-start:12px; inset-inline-end:14px; z-index:2;
    width:34px;height:34px; place-items:center; border-radius:10px; color:var(--dim);
    background:rgba(255,255,255,.05); border:1px solid var(--line);
  }
  .chat-avatar{width:38px;height:38px; border-radius:12px; font-size:13px}
  .chat-title h2{font-size:14.5px}
  /* the header stays two clean lines; the route lives in the inspector sheet */
  .chat-head .trace{display:none}
  .chat-sub{font-size:10.5px; flex-wrap:nowrap; gap:5px; overflow:hidden}
  .chat-sub>:nth-child(n+3){display:none}
  .trace{font-size:7.5px}
  .trace-node{padding:2px 4px}
  .chat-actions{gap:2px}
  .chat-head .back-btn,.chat-head .chat-actions .icon-btn{width:42px;height:42px;flex:none}
  .presence .p-av{width:24px;height:24px; font-size:8.5px; margin-inline-start:-7px}
  .chat-scroll{padding:12px 12px 4px}
  .msg{max-width:90%}
  .bubble .text{font-size:13.5px; line-height:1.78}
  .bubble-img{max-width:min(74vw,320px)}
  .composer-wrap{padding:0 11px calc(11px + var(--sab))}
  .composer{padding:6px 6px 6px 9px; border-radius:16px}
  .composer textarea{font-size:16px; min-height:38px; padding:9px 5px 8px; max-height:120px}
  .composer .icon-btn{width:40px;height:40px}
  .send-btn{width:40px;height:40px; border-radius:12px}
  .send-btn .ic{width:19px;height:19px}

  /* sheets instead of centered dialogs */
  .modal-root{padding:0; place-items:end center}
  .backdrop{background:rgba(3,3,3,.74)}
  .modal{
    width:100%; max-width:none; max-height:88dvh; border-radius:24px 24px 0 0;
    border:0; border-top:1px solid var(--line-strong);
    padding:4px 16px calc(18px + var(--sab));
    box-shadow:0 -34px 80px rgba(0,0,0,.66);
    animation:sheetUp .26s cubic-bezier(.2,.9,.25,1);
  }
  @keyframes sheetUp{from{opacity:.4; transform:translateY(26px)}to{opacity:1; transform:none}}
  .sheet-grip{display:block; width:46px; height:4px; border-radius:99px; background:rgba(255,255,255,.17); margin:4px auto 12px}
  .modal-head{margin-bottom:14px}
  .modal-head h3{font-size:15.5px}
  .modal-close{width:40px;height:40px; border-radius:11px}
  .modal .settings-block .btn{height:44px; font-size:13px; border-radius:12px}
  .modal-foot{margin-top:18px}
  .modal-foot .btn{height:46px; font-size:13.5px; border-radius:13px}
  .field input,.field textarea,.field select{font-size:16px; height:44px; border-radius:12px}
  .field textarea{min-height:74px}
  .field>span{font-size:12px}
  .kv{font-size:12px; padding:10px 0}
  .kv b{font-size:11px}
  .code-box{font-size:11.5px; padding:11px 12px; border-radius:12px}
  .code-box .icon-btn{width:34px;height:34px; flex:none}
  .seg button{height:40px; font-size:11.5px}
  .switch{width:36px;height:21px}
  .switch::after{width:15px;height:15px}
  .switch.on::after{inset-inline-start:18px}
  .toggle-row{padding:10px}
  .toggle-row b{font-size:11.5px}
  .grant-row{padding:12px}
  .grant-row b{font-size:12.5px}
  .identity-row .big-av{width:44px;height:44px; font-size:15px}
  .mem-row,.pick-row{padding:11px 10px; border-radius:13px; min-height:56px}
  .mem-body b{font-size:12.5px}
  .mem-body small,.pick-body small{font-size:10.5px}
  .pick-body b{font-size:12.5px}
  .pick-row .lobby-av{width:38px;height:38px; border-radius:11px; font-size:12px}
  .mem-id{padding:11px; border-radius:13px}
  .mem-id b{font-size:12.5px}
  .mem-av{width:38px;height:38px; border-radius:12px}
  .find-head{margin:16px 4px 4px; font-size:10.5px}
  .room-cta{width:100%; padding:13px 12px; gap:9px}
  .cta-acts .btn.sm{min-width:0; flex:1; height:44px; font-size:12.5px; border-radius:12px}
  .brief-card b{font-size:13px}
  .brief-card p{font-size:11.5px}
  .pick-list{max-height:38dvh}

  /* the route inspector rises from the same edge */
  .inspector{
    position:fixed; z-index:50; inset-inline:0; inset-block-end:0; top:auto; left:0; right:0;
    width:auto; max-width:none; height:min(80dvh,660px); transform:translateY(105%);
    border-radius:24px 24px 0 0; border-top:1px solid var(--line-strong);
    background:#0c0c0d; box-shadow:0 -30px 80px rgba(0,0,0,.7);
    padding:4px 15px calc(18px + var(--sab));
  }
  .inspector::before{
    content:""; flex:none; width:46px; height:4px; border-radius:99px;
    background:rgba(255,255,255,.17); margin:4px auto 10px;
  }
  .inspector.open{transform:none}
  .sheet-close{display:grid}

  /* gate */
  /* the glow boxes stay inside the viewport, so the gate has nothing to pan and
     the card lands dead-centre instead of one scrollbar-width off it */
  .orb-a{width:300px;height:300px;top:0;right:0}
  .orb-b{width:260px;height:260px;bottom:0;left:0}
  .auth{padding:calc(22px + var(--sat)) 16px calc(22px + var(--sab))}
  .auth-card{width:min(360px,100%); padding:26px 21px 22px; border-radius:24px}
  .auth-brand{margin-bottom:22px; gap:12px}
  .logo-mark{width:42px;height:42px; border-radius:13px}
  .auth h1{font-size:21px; margin-bottom:18px}
  .gate-input{min-height:56px; padding:10px 15px 13px; border-radius:14px}
  .gate-input input,.gate-input textarea{font-size:16px; line-height:1.65}
  .gate-field>.gate-help{font-size:11px}
  .code-meter{inset-inline:15px}
  .auth #authSubmit{height:50px; font-size:14.5px; border-radius:14px}
  .auth-error{font-size:12.5px; line-height:1.8}

  .seal{padding:calc(18px + var(--sat)) 14px calc(18px + var(--sab)); overflow:auto}
  .seal-card{width:100%; padding:22px 18px 20px; border-radius:24px; margin:auto 0}
  .seal-brand{margin-bottom:13px}
  .seal-algo{font-size:8px; padding:3px 7px}
  .seal-plate{padding:8px 11px; margin-bottom:12px; border-radius:14px}
  .seal-plate .mono{font-size:11.5px; letter-spacing:.12em}
  .seal-card h2{font-size:16.5px; margin-bottom:5px}
  .seal-sub{font-size:10px; margin-bottom:11px; line-height:1.7}
  .seal-steps li{min-height:34px; font-size:12px; gap:11px; padding:4px 2px}
  .s-meta{font-size:8px}
  .seal-keys{margin-top:12px; border-radius:12px}
  .seal-keys>div{padding:6px 9px}
  .seal-keys small{font-size:8px}
  .seal-keys b{font-size:10px}
  .seal-note{font-size:10.5px}
  .seal-go{margin-top:16px; height:50px; font-size:14.5px; border-radius:14px}

  .pass{padding:calc(20px + var(--sat)) 14px calc(20px + var(--sab))}
  .pass-card{width:min(372px,100%); padding:24px 20px 20px; border-radius:24px}
  .pass h1{font-size:19px; margin-bottom:9px}
  .pass-sub{font-size:11px; margin-bottom:15px}
  .pass-body{gap:13px}
  .pass-field>.gate-input{min-height:56px; padding:10px 12px}
  .pass-field input{font-size:16px; letter-spacing:.1em}
  .pass-rules{gap:7px 9px}
  .pass-rules li{font-size:10.5px; padding:7px 9px}
  .pass-acts .btn{height:46px; font-size:13px; border-radius:13px}
  .pass-hint{font-size:10.5px}

  .toast-root{bottom:calc(76px + var(--sab))}
  .toast{font-size:12px; padding:10px 14px; max-width:88vw}
  .lightbox img{max-width:94vw}
}
/* a phone on its side, or a short window: the conversation gets the room back */
@media (max-width:760px) and (max-height:600px){
  .chat-head{padding-top:calc(6px + var(--sat)); padding-bottom:6px}
  /* landscape: the drawer keeps its rows but drops the sub-lines so the list fits upright */
  .m-drawer{width:min(296px,78vw); gap:9px; padding:calc(10px + var(--sat)) 11px calc(10px + var(--sab))}
  .drawer-item{min-height:44px; padding:6px 9px; border-radius:11px}
  .drawer-item small{display:none}
  .drawer-node{padding:8px}
  .drawer-state{padding:8px 9px}
  .drawer-note{display:none}
  /* short screens: the lock-down card tightens instead of scrolling away */
  .seal-brand{margin-bottom:10px}
  .seal-card{padding:16px 16px 14px}
  .seal-plate{margin-bottom:9px; padding:6px 10px}
  .seal-card h2{font-size:15px; margin-bottom:4px}
  .seal-sub{display:none}
  .seal-steps li{min-height:26px; padding:3px 2px; font-size:11.5px}
  .s-meta{display:none}
  .seal-rail{margin-top:9px}
  .seal-keys{margin-top:9px}
  .seal-keys>div{padding:5px 8px}
  .seal-note{display:none}
  .seal-go{margin-top:11px; height:44px}
  .pass-sub{display:none}
  .pass-card{padding:18px 18px 16px}
  .pass-rules{gap:5px 8px}
  .pass-rules li{padding:5px 8px; font-size:10px}
}
@media (max-width:400px){
  .m-net b{display:none}  .m-net{padding:0 9px}
  .dock-btn small{font-size:8.5px}
  .trace .trace-node:nth-child(2),.trace .trace-node:nth-last-child(2){display:none}
  .board-acts .btn.sm{min-width:104px}
  .chat-scroll{padding:10px 9px 4px}
}

/* utility */
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img{max-width:100%}
:focus-visible{outline:1px dashed rgba(223,226,230,.55); outline-offset:3px}

/* ============================================================
   VEIL — شبکهٔ مهندسی و خطوط ردیابی پس‌زمینه
   ============================================================ */
.veil{
  position:fixed; inset:0; width:100%; height:100%; z-index:-1;
  pointer-events:none; opacity:.85;
}
.veil-gridline{fill:none; stroke:var(--grid); stroke-width:1; vector-effect:non-scaling-stroke}
.veil-cross{fill:none; stroke:var(--hair-2); stroke-width:1; vector-effect:non-scaling-stroke}
.veil-mesh{opacity:.9}
.veil-datum path{fill:none; stroke:rgba(223,226,230,.075); stroke-width:1; vector-effect:non-scaling-stroke}
.veil-datum path:first-child,.veil-datum path:nth-child(2){stroke:rgba(223,226,230,.13)}
.veil-datum .veil-scale{stroke:rgba(223,226,230,.1)}
.veil-node-dot{fill:rgba(223,226,230,.18); stroke:none}
.veil-frame path{fill:none; stroke:rgba(223,226,230,.12); stroke-width:1; vector-effect:non-scaling-stroke}
.veil-lines polyline,.veil-lines path{
  fill:none; stroke:var(--trace); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:6 10; stroke-linecap:round;
}
.veil-lines .veil-circle{stroke-dasharray:2 13; opacity:.9}
.veil-lines .veil-diamond{stroke-dasharray:15 8; opacity:.5}
.veil-arrowhead{fill:rgba(223,226,230,.2); stroke:none}
.veil-lines{animation:veil-drift 52s linear infinite}
@keyframes veil-drift{from{transform:translateX(0)}to{transform:translateX(-34px)}}

/* ============================================================
   TRACE — مسیر عبور پیام در هدر اتاق
   ============================================================ */
.trace{
  display:flex; align-items:center; gap:0; margin-top:5px; width:100%;
  font-family:var(--mono); font-size:8px; color:#54575d; letter-spacing:.04em;
}
.trace-node{
  flex:none; padding:2px 5px; border-radius:3px; border:1px dashed #3a3d43;
  background:rgba(0,0,0,.25); white-space:nowrap;
}
.trace-node:first-child{border:1px solid rgba(223,226,230,.3); color:var(--muted)}
.trace-node:last-child{border:1px solid rgba(223,226,230,.22); color:var(--mid)}
.trace-leg{
  flex:1; min-width:10px; height:1px; margin:0 3px; position:relative;
  background:repeating-linear-gradient(90deg,#4a4d54 0 4px,transparent 4px 8px);
}
.trace-leg::after{
  content:""; position:absolute; inset-inline-end:-1px; top:-2px;
  border-inline-start:4px solid #5c6068; border-block:2.5px solid transparent;
}
.trace.busy .trace-leg{animation:trace-flow 1.4s linear infinite}
@keyframes trace-flow{from{background-position:0 0}to{background-position:8px 0}}
.trace.busy .trace-node{border-color:rgba(223,226,230,.34); color:var(--muted)}

/* ============================================================
   MASKED IDENTITY / HOLD
   ============================================================ */
.icon-btn.on{color:var(--txt); background:var(--hi-dim); border:1px solid rgba(223,226,230,.3)}
.hold{
  display:inline-flex; align-items:center; gap:4px; margin-top:3px;
  font-size:8.5px; color:var(--muted); font-family:var(--mono);
  padding:2px 7px; border-radius:3px; border:1px dashed rgba(223,226,230,.28);
  background:repeating-linear-gradient(135deg,rgba(223,226,230,.05) 0 5px,transparent 5px 10px);
}
.hold .ic{width:10px;height:10px; opacity:.8}
.roster{display:flex; flex-direction:column; gap:0; margin-top:2px}
.roster-row{
  display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line);
}
.roster-row:last-child{border-bottom:0}
.roster-row i{width:18px;height:18px;border-radius:5px; flex:none; display:grid; place-items:center;
  font-style:normal; font-size:7.5px; font-weight:800; color:#0a0a0c}
.roster-row b{flex:1; min-width:0; font-size:10px; font-weight:500; color:var(--muted);
  font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.roster .tag{font-size:9px; color:var(--hi); font-weight:650; flex:none}
.roster .tag.off{color:#54575d; font-weight:400; border:1px dashed #3a3d43; padding:1px 6px; border-radius:3px}

/* ============================================================
   MAILBOX — صندوق دست‌نگهداشتۀ رله
   ============================================================ */
.mailbox{display:flex; flex-direction:column; gap:6px}
.mailbox-row{display:flex; align-items:baseline; gap:7px; font-size:9.5px; color:var(--muted); line-height:1.8}
.mailbox-row b{font-family:var(--mono); font-size:15px; color:var(--hi); line-height:1}
.mailbox-bar{
  height:3px; border-radius:2px; background:rgba(0,0,0,.5);
  border:1px solid var(--line); overflow:hidden;
}
.mailbox-bar i{
  display:block; height:100%; background:repeating-linear-gradient(90deg,var(--mid) 0 3px,transparent 3px 6px);
  transition:width .3s linear;
}
.mailbox-free{
  display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px;
  color:var(--mid); letter-spacing:.05em;
}
.mailbox-free .ic{width:11px;height:11px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .veil-lines,.trace.busy .trace-leg{animation:none}
}

/* ============================================================
   APK SHELL — پوستهٔ اندروید سازِ پایین ندارد
   ============================================================ */
/* The WebView shell opens the site as ?apk=1 (and tags its user-agent with LABIMAN-SHELL).
   Inside it the dock is gone completely: the rows above take the whole freed strip, and the
   toasts rise from the safe area instead of sitting on top of a bar that no longer exists. */
html[data-shell="apk"] .m-dock{display:none !important}
@media (max-width:760px){
  html[data-shell="apk"] .shell{grid-template-rows:auto minmax(0,1fr) 0px; grid-template-areas:"top" "body" "body"}
  html[data-shell="apk"] .toast-root{bottom:calc(16px + var(--sab))}
}

/* ============================================================
   PLATE — صفحهٔ خطیِ مشترکِ همهٔ پاپاپ‌ها
   ============================================================ */
/* Every popup is one engraved plate: a cold seam across the top edge, a mist falling from that
   seam, and the survey field under it. They are background layers of the card itself, so no
   layer can ever paint over the text or eat a tap — and the card keeps its own gradient. */
.auth-card,.pass-card,.seal-card,.modal,.m-drawer,.inspector{
  --base:linear-gradient(180deg,rgba(23,23,24,.96),rgba(12,12,13,.97));
  isolation:isolate;
  background-image:
    linear-gradient(90deg,transparent,rgba(223,226,230,.3) 20%,rgba(223,226,230,.3) 80%,transparent),
    radial-gradient(150% 44% at 50% -6%,rgba(223,226,230,.055),transparent 64%),
    var(--field),
    var(--base);
  background-size:100% 1px,100% 100%,var(--field-size),auto;
  background-repeat:no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat,repeat,no-repeat;
  background-position:0 0;
}
.auth-card{--base:linear-gradient(180deg,rgba(24,24,24,.94),rgba(13,13,13,.96))}
.modal{--base:linear-gradient(180deg,#1a1a1a,#0f0f0f)}
.m-drawer{--base:linear-gradient(180deg,#131315,#08080a 42%)}
.inspector{--base:none}
/* registration brackets on the sealing plate: z-index -1 inside the isolated card engraves the
   surface without ever repainting over a line of text */
.seal-card>.gate-ticks{
  position:absolute; inset:10px; z-index:-1; pointer-events:none; opacity:.42;
}
/* the gate's own seam moved up to the plate, so its hairline now closes the document below */
.auth-card::after{inset-inline:14px; inset-block-start:auto; bottom:0; background:linear-gradient(90deg,transparent,rgba(223,226,230,.16),transparent)}

/* ============================================================
   FIELD — اتاقِ پشت هر پاپاپ
   ============================================================ */
/* The gate is not floating on a gradient: two datum lines and two measure lines cross the plan
   around the card, and the field itself is densest where the card is not. */
.auth::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(var(--rule-soft),var(--rule-soft)) 0 26%/100% 1px no-repeat,
    linear-gradient(var(--rule-soft),var(--rule-soft)) 0 76%/100% 1px no-repeat,
    linear-gradient(var(--rule-soft),var(--rule-soft)) 12% 0/1px 100% no-repeat,
    linear-gradient(var(--rule-soft),var(--rule-soft)) 88% 0/1px 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 26%,transparent 74%,#000);
  mask-image:linear-gradient(90deg,#000,transparent 26%,transparent 74%,#000);
}
.backdrop::after,.m-scrim::after,.m-drawer-scrim::after,.pass::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:var(--field);
  background-size:var(--field-size);
  -webkit-mask-image:radial-gradient(104% 84% at 50% 50%,transparent 0 28%,#000 76%);
  mask-image:radial-gradient(104% 84% at 50% 50%,transparent 0 28%,#000 76%);
}