/* ---------- FULL CSS FROM V5 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#05080e;--card:#0a1019;--card2:#0e1624;--b1:#182238;--b2:#1f2d4a;--b3:#283b5e;
  --tx:#edf1ff;--tx2:#b6c8e4;--tx3:#90aece;--dim:#6080a0;
  /* Accent system — each semantic role has a hue, a light variant, and
     pre-baked alpha helpers. RGB-channel tokens let downstream rules build
     rgba() at any opacity without hard-coding numbers. */
  --acc:#83ddd4;--acl:#a5ece5;--acb:rgba(131,221,212,.11);--acbb:rgba(131,221,212,.26);--acc-rgb:131,221,212;
  --gold:#cfa96e;--goldbb:rgba(207,169,110,.25);--gold-rgb:207,169,110;
  --red:#de8a84;--rdb:rgba(222,138,132,.1);--rdbb:rgba(222,138,132,.28);--red-rgb:222,138,132;
  --grn:#76c490;--grb:rgba(118,196,144,.11);--grnb:rgba(118,196,144,.28);--grn-rgb:118,196,144;
  --violet:#b59be8;--vlb:rgba(181,155,232,.1);--vlbb:rgba(181,155,232,.28);--violet-rgb:181,155,232;
  --sapph:#83b8dd;--sab:rgba(131,184,221,.1);--sabb:rgba(131,184,221,.26);--sapph-rgb:131,184,221;
  --amb:#cfa96e;--ambb:rgba(207,169,110,.14);--amb-rgb:207,169,110;
  --s2:#0b1320;--sc:#0e1624;--bd:var(--b1);
  --font:'Outfit',system-ui,sans-serif;--display:'Cormorant Garamond',Georgia,serif;--mono:'Space Mono',monospace;
  --glow-sm:0 0 14px rgba(131,221,212,.13);
  /* Surface + depth — the whole app reaches into these for consistent vertical
     stacking. Higher number = floats higher off the page. */
  --surface-grad:linear-gradient(160deg,rgba(14,20,34,.97) 0%,rgba(9,13,21,.99) 100%);
  --surface-hi:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.32);
  --shadow-1:0 4px 16px rgba(0,0,0,.32);
  --shadow-2:0 12px 40px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-3:0 24px 64px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
  /* Accent top hairline — used on cards/panels for a subtle "edge of light". */
  --top-accent:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.32) 28%,rgba(var(--acc-rgb),.32) 72%,transparent)
}
html,body{min-height:100%;color:var(--tx);font-family:var(--font);line-height:1.6;font-size:16px}
/* Body ambient backdrop — two soft far-corner color washes give the whole
   app a sense of depth and atmosphere, kept low-opacity so they never
   compete with content. The cyan/violet diagonal mirrors the accent system. */
body{background:
  radial-gradient(ellipse 38% 28% at 8% 6%,rgba(var(--acc-rgb),.045),transparent 65%),
  radial-gradient(ellipse 36% 26% at 92% 94%,rgba(var(--violet-rgb),.035),transparent 65%),
  radial-gradient(ellipse 60% 40% at 50% 100%,rgba(var(--sapph-rgb),.025),transparent 70%),
  var(--bg);
  background-attachment:fixed}
/* Primary CTA — diagonal accent gradient + inset highlight + cyan ring/glow.
   Hover lifts by 1.5px and brightens the glow; active settles back. */
.btn{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,var(--acl),var(--acc));color:#03100e;font-weight:700;font-size:.875rem;padding:.55rem 1.25rem;border:1px solid rgba(var(--acc-rgb),.4);border-radius:9px;cursor:pointer;transition:transform .15s,box-shadow .2s,filter .15s,background .2s;white-space:nowrap;letter-spacing:.04em;font-family:var(--font);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.4),0 6px 18px rgba(var(--acc-rgb),.18)}
.btn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.4),0 10px 26px rgba(var(--acc-rgb),.32),0 0 0 1px rgba(var(--acc-rgb),.35)}
.btn:active:not(:disabled){transform:translateY(0);filter:brightness(.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.4),0 3px 10px rgba(var(--acc-rgb),.18)}
.btn:disabled{cursor:not-allowed;transform:none;box-shadow:none;background:rgba(var(--acc-rgb),.12);color:rgba(var(--acc-rgb),.28);border-color:rgba(var(--acc-rgb),.12)}
/* Ghost button — outline + soft hover. Inherits depth subtly so it doesn't
   look flat next to the filled CTA. */
.btn.ghost{background:rgba(255,255,255,.012);border:1px solid var(--b2);color:var(--tx3);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);transition:transform .12s,background .18s,border-color .18s,color .18s,box-shadow .2s}
.btn.ghost:hover:not(:disabled){border-color:var(--acc);color:var(--acc);background:var(--acb);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(var(--acc-rgb),.12)}
/* Mobile-friendly :active state — tap feedback that works without hover.
   Lights up with section accent + slight scale-down for tactile confirmation. */
.btn.ghost:active:not(:disabled),.btn.ghost:focus-visible:not(:disabled){border-color:var(--acc);color:var(--acc);background:var(--acb);transform:scale(.97);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(var(--acc-rgb),.13)}
/* When a ghost button sits inside a section-tagged card, it inherits that
   section's color for hover/active/focus — no hover dependency for identity. */
.acard .acard-head .btn.ghost:hover:not(:disabled),
.acard .acard-head .btn.ghost:active:not(:disabled),
.acard .acard-head .btn.ghost:focus-visible:not(:disabled){border-color:var(--sec,var(--acc));color:var(--sec,var(--acc));background:rgba(var(--sec-rgb),.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(var(--sec-rgb),.14)}
.btn.sm{padding:.35rem .75rem;font-size:.8rem;min-height:36px}
@media (pointer:coarse){.btn.sm{min-height:44px}}
.btn.danger{background:transparent;border:1px solid var(--rdbb);color:var(--red)}
.btn.danger:hover:not(:disabled){background:var(--rdb);border-color:var(--red)}
.btn.danger-solid{background:var(--rdb);border:1px solid var(--rdbb);color:var(--red);font-weight:600}
.btn.danger-solid:hover:not(:disabled){background:rgba(222,138,132,.18);border-color:var(--red)}
.btn.saved{background:var(--grb);border:1px solid var(--grnb);color:var(--grn);cursor:default;transform:none;box-shadow:none}
#toast{position:fixed;bottom:24px;right:24px;background:var(--card2);border:1px solid var(--b3);border-radius:10px;padding:.7rem 1.2rem;font-size:.875rem;color:var(--tx);transform:translateY(60px);opacity:0;transition:all .22s;z-index:9999;pointer-events:none;box-shadow:0 8px 48px rgba(0,0,0,.7);font-weight:500;letter-spacing:.01em}
#toast.show{transform:translateY(0);opacity:1}
/* ── ADMIN SHELL ── */
#admin-wrap{display:none;min-height:100vh;padding-bottom:80px}
body.mode-booker #admin-wrap{display:none !important}
#login-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;
  background:radial-gradient(ellipse 22% 42% at 50% 32%,rgba(131,221,212,.11) 0%,rgba(50,145,132,.05) 50%,transparent 70%),radial-gradient(ellipse 55% 32% at 50% 32%,rgba(18,62,56,.08) 0%,transparent 62%),radial-gradient(ellipse 90% 55% at 50% 32%,rgba(6,24,22,.05) 0%,transparent 68%),var(--bg)}
.login-brand{text-align:center;margin-bottom:2.4rem;position:relative;filter:drop-shadow(0 4px 16px rgba(0,0,0,.95)) drop-shadow(0 0 80px rgba(131,221,212,.18))}
.login-brand::before{content:'';position:absolute;left:-65%;right:-65%;top:-0.35em;height:1.85em;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 38% 100% at 50% 54%,rgba(200,255,248,.18) 0%,rgba(131,221,212,.32) 18%,rgba(50,155,142,.14) 44%,transparent 68%),radial-gradient(ellipse 70% 100% at 50% 54%,rgba(40,120,110,.12) 0%,rgba(12,50,46,.06) 55%,transparent 75%),radial-gradient(ellipse 95% 100% at 50% 54%,rgba(6,28,26,.07) 0%,transparent 72%);filter:blur(22px)}
.login-brand::after{content:'';position:absolute;left:-12%;right:-12%;top:0.18em;height:0.68em;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 45% 100% at 50% 50%,rgba(210,255,250,.72) 0%,rgba(131,221,212,.58) 22%,rgba(60,175,160,.28) 52%,transparent 72%);filter:blur(9px)}
.login-brand .lbname{font-family:var(--display);font-size:3.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;margin-bottom:.55rem;line-height:1;background:linear-gradient(174deg,#ffffff 0%,#ddf0ee 5%,#8ecfca 11%,#2e8880 17%,#74bfb9 23%,#e2f7f5 30%,#ffffff 38%,#eafaf9 46%,#a5ece5 55%,#52b8b0 64%,#3fa39c 71%,#78cac4 80%,#d0f0ee 90%,#f6fffe 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 1px 0 rgba(0,0,0,1),0 2px 14px rgba(0,0,0,.9),0 -1px 8px rgba(131,221,212,.10)}
.login-brand .lbsub{font-family:var(--font);font-size:.68rem;font-weight:500;letter-spacing:.54em;text-transform:uppercase;background:linear-gradient(90deg,rgba(131,221,212,.45) 0%,#c2f0ec 50%,rgba(131,221,212,.45) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 22px rgba(131,221,212,.7),0 0 60px rgba(131,221,212,.3)}
.lcard{position:relative;width:100%;max-width:360px;background:linear-gradient(160deg,rgba(14,22,36,.9),rgba(10,16,25,.95));border:1px solid var(--b2);border-radius:18px;padding:2rem 1.8rem;margin:0 1rem;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(var(--acc-rgb),.04),inset 0 1px 0 rgba(255,255,255,.06)}
/* Faint accent hairline along the top edge — gives the login card a subtle
   "edge of light" that anchors the eye to the title. */
.lcard::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:var(--top-accent);pointer-events:none;border-radius:1px}
.lcard h2{font-size:1.15rem;font-weight:700;margin-bottom:.25rem;color:var(--tx);letter-spacing:.02em}
.lcard p{color:var(--tx2);font-size:.9rem;margin-bottom:1.4rem}
/* ── Approve-card (IdP consent popup) ──────────────────────────
   Shares .lcard geometry but overrides inner layout for the consent flow:
   sigil → eyebrow → heading → label → name → origin → err → buttons → disclaimer.
   The name is the focal point — teal-accented with a soft glow so the steward
   instantly sees *which* identity they're about to share. */
#approve-card{text-align:center}
#approve-card h2{margin-bottom:.15rem}
.ac-sigil{display:flex;justify-content:center;margin-bottom:.65rem;color:var(--acc);opacity:.85}
.ac-sigil svg{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.35))}
.ac-eyebrow{font-family:var(--font);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--tx3);margin:0 0 .4rem}
.ac-label{font-size:.8rem;color:var(--tx3);margin:0 0 .15rem}
#ac-name{font-family:var(--display);font-size:1.25rem;font-weight:600;font-style:italic;color:var(--acl);text-align:center;letter-spacing:.01em;margin:0 0 .85rem;min-height:1.6rem;text-shadow:0 0 18px rgba(var(--acc-rgb),.22)}
.ac-origin-line{font-size:.76rem;color:var(--tx3);margin:0 0 1.1rem}
.ac-origin-line strong{display:inline-block;background:var(--acb);border:1px solid var(--acbb);border-radius:6px;padding:.15rem .55rem;font-weight:600;color:var(--acc);letter-spacing:.02em;font-size:.78rem;margin-left:.2rem;vertical-align:middle;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ac-err{color:var(--red);font-size:.8rem;margin-bottom:.65rem;min-height:1.1rem;font-weight:500}
.ac-buttons{display:flex;gap:.55rem}
.ac-buttons .btn{flex:1}
.ac-buttons .btn:last-child{flex:1.6}
.ac-disclaimer{font-size:.68rem;color:var(--tx3);text-align:center;margin-top:.85rem;line-height:1.5}
/* ── Approve-context banner (shown on login/setup cards in approve mode) ── */
.approve-ctx-banner{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--acb);border-left:3px solid var(--acc);border-radius:7px;padding:.55rem .7rem;margin-bottom:1rem;font-size:.76rem;color:var(--acl)}
.approve-ctx-text{flex:1;line-height:1.4}
.approve-ctx-cancel{flex-shrink:0;background:none;border:1px solid var(--b1);border-radius:5px;color:var(--tx3);font-size:.7rem;padding:.25rem .55rem;cursor:pointer;font-family:var(--font);transition:color .15s,border-color .15s,background .15s}
.approve-ctx-cancel:hover{color:var(--red);border-color:var(--rdbb);background:var(--rdb)}
#lerr{color:var(--red);font-size:.82rem;margin-top:.5rem;min-height:1.1rem;font-weight:500}
/* ── Password policy checklist ───────────────────────────────
   Replaces the old strength meter. Five per-rule rows, each in one of:
     pending  (idle / empty input)         — dim dot
     checking (HIBP in-flight)             — pulsing cyan dot
     pass     (rule satisfied)             — cyan check
     fail     (rule not satisfied)         — red X
     unknown  (HIBP network error)         — gold ring (fail-open)
   Icons are mask-image SVGs so they inherit color from `background-color`,
   making state transitions cheap. */
.pw-label-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.48rem}
.pw-inline-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx2)}
/* Password input wrapper — relative anchor for the absolute-positioned eye toggle.
   Pads the input on the right so text never collides with the eye glyph. */
.pw-input-wrap{position:relative;display:block}
.pw-input-wrap input{width:100%;padding-right:2.4rem!important}
.pw-eye-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:none;padding:.35rem;cursor:pointer;color:var(--tx3);display:inline-flex;align-items:center;justify-content:center;border-radius:6px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.pw-eye-btn:hover{color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.pw-eye-btn:active{transform:translateY(-50%) scale(.92)}
.pw-eye-btn:focus-visible{outline:2px solid rgba(var(--acc-rgb),.45);outline-offset:1px}
.pw-eye-btn .pw-eye-off{display:none}
.pw-eye-btn[aria-pressed="true"]{color:var(--acc)}
.pw-eye-btn[aria-pressed="true"] .pw-eye-on{display:none}
.pw-eye-btn[aria-pressed="true"] .pw-eye-off{display:inline-block}

/* Info popover trigger — small circular "i" button beside the password label. */
.pw-info-anchor{position:relative;display:inline-block;line-height:0}
.pw-info-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.025);border:1px solid var(--b2);color:var(--tx3);font-family:var(--font);font-size:.68rem;font-weight:700;font-style:italic;cursor:pointer;padding:0;line-height:1;transition:color .15s,border-color .15s,background .15s,transform .12s;-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01"}
.pw-info-btn:hover{color:var(--acc);border-color:var(--acbb);background:var(--acb)}
.pw-info-btn:focus-visible{outline:2px solid rgba(var(--acc-rgb),.45);outline-offset:2px}
.pw-info-btn[aria-expanded="true"]{color:var(--acc);border-color:var(--acbb);background:var(--acb)}
.pw-info-btn:active{transform:scale(.94)}

/* Popover content — desktop: anchored card; mobile: bottom sheet (see media query). */
.pw-info-pop{position:absolute;top:calc(100% + .55rem);right:0;width:min(320px,calc(100vw - 2rem));max-height:360px;overflow-y:auto;background:linear-gradient(160deg,rgba(14,22,36,.985),rgba(9,13,21,.992));border:1px solid var(--b2);border-radius:13px;padding:.95rem 1.05rem 1rem;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(var(--acc-rgb),.05),inset 0 1px 0 rgba(255,255,255,.045);z-index:60;font-size:.78rem;color:var(--tx2);line-height:1.55;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.pw-info-pop[data-open]{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.pw-info-pop h5{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tx3);margin:0 0 .55rem 0;display:flex;align-items:center;gap:.4rem}
.pw-info-pop h5::before{content:'';width:.3rem;height:.3rem;border-radius:50%;background:var(--acc);box-shadow:0 0 6px rgba(var(--acc-rgb),.7);flex-shrink:0}
.pw-info-pop p{margin:0 0 .55rem;color:var(--tx2);font-size:.76rem;line-height:1.55}
.pw-info-pop .pw-info-eg-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);margin-top:.5rem;margin-bottom:.3rem}
.pw-info-pop .pw-example{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-size:.74rem;color:var(--acl);background:rgba(var(--acc-rgb),.06);border:1px solid rgba(var(--acc-rgb),.13);border-radius:7px;padding:.4rem .55rem;margin:.22rem 0 .35rem;word-break:break-all;letter-spacing:.005em;user-select:all}
.pw-info-pop .pw-info-foot{font-size:.7rem;color:var(--tx3);font-style:italic;margin-top:.5rem;margin-bottom:0;line-height:1.5}

/* Checklist container — sits below the input field, holds five rows. */
.pw-checklist{display:flex;flex-direction:column;gap:.38rem;margin:.55rem 0 .35rem;padding:.7rem .8rem;background:rgba(14,22,38,.42);border:1px solid var(--b1);border-radius:10px;transition:background .25s,border-color .25s}
.pw-checklist[data-empty="true"]{background:rgba(14,22,38,.28);border-color:rgba(31,45,74,.55)}
.pw-rule{display:flex;align-items:center;gap:.58rem;font-size:.755rem;line-height:1.35;color:var(--dim);transition:color .2s ease;letter-spacing:.005em;font-weight:500}
.pw-rule-text{flex:1;min-width:0}
/* Icon — mask-image SVG colored by background-color, swaps per state. */
.pw-rule-icon{width:14px;height:14px;flex-shrink:0;display:inline-block;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:14px 14px;mask-size:14px 14px;transition:background-color .25s ease,transform .2s ease;will-change:transform,background-color}

/* State: pending — small filled dot, dim text. */
.pw-rule[data-state="pending"]{color:var(--dim)}
.pw-rule[data-state="pending"] .pw-rule-icon{background-color:var(--dim);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='2' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='2' fill='black'/></svg>")}

/* State: checking (HIBP in flight) — pulsing dot. */
.pw-rule[data-state="checking"]{color:var(--tx3)}
.pw-rule[data-state="checking"] .pw-rule-icon{background-color:var(--tx3);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='3' fill='black'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='3' fill='black'/></svg>");animation:pwPulse 1.2s ease-in-out infinite}

/* State: pass — cyan check. */
.pw-rule[data-state="pass"]{color:var(--tx2)}
.pw-rule[data-state="pass"] .pw-rule-icon{background-color:var(--acc);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.6 L5.7 10.1 L11 4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.6 L5.7 10.1 L11 4.6' stroke='black' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");transform:scale(1.05)}

/* State: fail — red X. */
.pw-rule[data-state="fail"]{color:var(--tx2)}
.pw-rule[data-state="fail"] .pw-rule-icon{background-color:var(--red);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.8 3.8 L10.2 10.2 M10.2 3.8 L3.8 10.2' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3.8 3.8 L10.2 10.2 M10.2 3.8 L3.8 10.2' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>")}

/* State: unknown — gold open ring (HIBP unreachable; fail-open). */
.pw-rule[data-state="unknown"]{color:var(--tx3)}
.pw-rule[data-state="unknown"] .pw-rule-icon{background-color:var(--gold);-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='4.3' stroke='black' stroke-width='1.6' fill='none'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='4.3' stroke='black' stroke-width='1.6' fill='none'/></svg>")}

@keyframes pwPulse{0%,100%{opacity:.45;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}

/* Mobile — tighter checklist, bottom-sheet popover. */
@media (max-width:480px){
  .pw-checklist{padding:.6rem .65rem;gap:.32rem}
  .pw-rule{font-size:.735rem;gap:.5rem}
  .pw-info-pop{position:fixed;top:auto;right:0;left:0;bottom:0;width:100%;max-width:100%;max-height:80vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:1.1rem 1.15rem max(1.3rem,env(safe-area-inset-bottom));transform:translateY(100%) scale(1);transform-origin:bottom center;box-shadow:0 -8px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .18s}
  .pw-info-pop[data-open]{transform:translateY(0) scale(1)}
  .pw-info-pop::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--b3);margin:-.25rem auto .7rem}
}

/* Inside the slide-out config panel, the popover would overflow its 340px
   container — reroute to bottom-sheet behavior regardless of viewport. */
#cfg-panel .pw-info-pop{position:fixed;top:auto;right:0;left:0;bottom:0;width:100%;max-width:100%;max-height:80vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:1.1rem 1.2rem max(1.3rem,env(safe-area-inset-bottom));transform:translateY(100%) scale(1);transform-origin:bottom center;box-shadow:0 -8px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);z-index:9999}
#cfg-panel .pw-info-pop[data-open]{transform:translateY(0) scale(1)}
#cfg-panel .pw-info-pop::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--b3);margin:-.25rem auto .7rem}

@media (prefers-reduced-motion: reduce){
  .pw-rule-icon,.pw-info-pop,.pw-info-btn{transition:none}
  .pw-rule[data-state="checking"] .pw-rule-icon{animation:none;opacity:.7}
  .pw-rule[data-state="pass"] .pw-rule-icon{transform:none}
  .pw-info-pop{transform:none!important}
}
.topbar{border-bottom:1px solid rgba(24,34,56,.8);position:sticky;top:0;z-index:100;background:rgba(5,8,14,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Soft cyan glow under the topbar's bottom edge — frames the sticky header
   and ties it to the rest of the accent system. */
.topbar::after{content:'';position:absolute;left:8%;right:8%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.28) 30%,rgba(var(--acc-rgb),.28) 70%,transparent);pointer-events:none}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem;max-width:940px;margin:0 auto}
.topbar-logo{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:.24em;color:var(--tx);text-transform:uppercase;background:linear-gradient(120deg,var(--tx) 40%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.topbar-logo span{font-family:var(--font);font-size:.72rem;font-weight:400;letter-spacing:.14em;opacity:.6;-webkit-text-fill-color:var(--tx3);color:var(--tx3)}
.awrap{max-width:940px;margin:0 auto;padding:2.2rem max(1.4rem,env(safe-area-inset-right)) 0 max(1.4rem,env(safe-area-inset-left))}
/* Admin cards — each card declares a section identity color via --sec-rgb so
   the chrome (top hairline, header divider, ambient corner glow, slabel dot)
   stays consistent within a section. Default is cyan; per-section overrides
   below pick the actual behavioral color. */
.acard{position:relative;background:var(--surface-grad);border:1px solid var(--b1);border-radius:20px;padding:1.8rem 2rem;margin-bottom:1.6rem;box-shadow:var(--shadow-2),0 -1px 0 rgba(0,0,0,.3) inset;--sec-rgb:var(--acc-rgb);--sec:var(--acc);overflow:visible}
/* Top hairline accent — section-colored. Always visible (no hover gate) so
   mobile users see the identity too. */
.acard::before{content:'';position:absolute;top:-1px;left:24%;right:24%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--sec-rgb),.42) 28%,rgba(var(--sec-rgb),.42) 72%,transparent);pointer-events:none;border-radius:1px;z-index:1}
/* Ambient corner glow — section-colored radial in the top-right that signals
   what the card is "about" before you even read the label. Stays low-opacity
   so it doesn't compete with content. */
.acard::after{content:'';position:absolute;top:0;right:0;width:55%;height:100%;border-radius:20px;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(var(--sec-rgb),.07),transparent 70%);pointer-events:none;z-index:0}
.acard > *{position:relative;z-index:1}
/* Section identities — Generate = cyan (forward action / create / share);
   Activity = sapphire (observe / status / timeline). */
.acard[data-section="generate"]{--sec-rgb:var(--acc-rgb);--sec:var(--acc)}
.acard[data-section="activity"]{--sec-rgb:var(--sapph-rgb);--sec:var(--sapph)}
/* Focus-within — when a user taps an input or button inside the card, the
   whole card gains a subtle section-colored ring + ambient glow. Works on
   mobile (focus fires on tap) and is the touch-friendly counterpart to
   "hover the card". */
.acard:focus-within{box-shadow:var(--shadow-2),0 -1px 0 rgba(0,0,0,.3) inset,0 0 0 1px rgba(var(--sec-rgb),.22),0 12px 44px rgba(var(--sec-rgb),.08)}
.acard:focus-within::before{background:linear-gradient(90deg,transparent,rgba(var(--sec-rgb),.7) 25%,rgba(var(--sec-rgb),.7) 75%,transparent)}
.acard:focus-within::after{background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(var(--sec-rgb),.12),transparent 70%)}
.acard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem;padding-bottom:1.1rem;border-bottom:1px solid var(--b1);position:relative}
/* The acard-head's bottom border picks up a faint section tint at its center
   so the divider isn't a flat neutral line. */
.acard-head::after{content:'';position:absolute;left:30%;right:30%;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--sec-rgb),.36),transparent);pointer-events:none}
.slabel{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx);background:linear-gradient(120deg,var(--tx) 20%,var(--sec,var(--acc)));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Leading section dot — always visible glanceable identifier. Sits outside
   the gradient text so its color stays solid. */
.slabel::before{content:'';-webkit-text-fill-color:initial;width:.42rem;height:.42rem;border-radius:50%;background:var(--sec,var(--acc));box-shadow:0 0 6px rgba(var(--sec-rgb),.65),0 0 1px rgba(var(--sec-rgb),.9);flex-shrink:0;align-self:center;position:relative;top:-1px}
label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx2);display:block;margin-bottom:.48rem}
/* Inputs / selects — inset shadow gives the field depth; focus state lifts
   with a 3px ring + accent border + slightly darker fill so the eye locks on.
   Selects use a custom SVG chevron so the arrow has consistent positioning
   and breathing room from the right edge across browsers (default native
   arrows sit too close to the border on Chromium/Firefox/Safari alike). */
input[type=text],input[type=password],select{width:100%;background:rgba(14,22,38,.78);border:1px solid var(--b2);border-radius:10px;color:var(--tx);padding:.72rem 1rem;font-size:.975rem;font-family:var(--font);outline:none;transition:border-color .18s,box-shadow .18s,background .18s;box-shadow:inset 0 1px 0 rgba(0,0,0,.32)}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2390aece' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 1.5 6 6 10.5 1.5'/></svg>");background-repeat:no-repeat;background-position:right 1rem center;background-size:11px 8px}
select::-ms-expand{display:none}
input[type=text]:hover,input[type=password]:hover,select:hover{border-color:var(--b3)}
input:focus,select:focus{border-color:var(--acc);background-color:rgba(14,22,38,.92);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.13),inset 0 1px 0 rgba(0,0,0,.28)}
select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2383ddd4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 1.5 6 6 10.5 1.5'/></svg>")}
input::placeholder{color:var(--dim);font-style:italic}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px rgba(14,22,38,.95) inset !important;-webkit-text-fill-color:var(--tx) !important;caret-color:var(--tx)}
select option{background:var(--card2)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{margin-bottom:1rem}
.remember-row{display:flex;align-items:center;gap:.55rem;margin:.1rem 0 .6rem}
.remember-lbl{font-size:.72rem;color:var(--tx3);user-select:none;transition:color .2s;cursor:pointer}
.chip-row{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{background:var(--card2);border:1px solid var(--b1);border-radius:9px;padding:.5rem .65rem;cursor:pointer;text-align:center;transition:all .16s;color:var(--dim);font-size:.72rem;font-weight:600;letter-spacing:.05em;min-width:46px;user-select:none}
.chip:hover{border-color:var(--b3);color:var(--tx2);transform:translateY(-1px)}
.chip[data-on]{border-color:var(--acc);background:linear-gradient(135deg,rgba(131,221,212,.14),rgba(131,221,212,.06));color:var(--acc);box-shadow:0 0 0 1px var(--acbb),var(--glow-sm)}
.chip .cl{font-size:.96rem;font-weight:700;display:block;margin-bottom:.09rem}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem}
.seg-btn{background:var(--card2);border:1px solid var(--b1);border-radius:12px;padding:1rem .5rem;cursor:pointer;text-align:center;transition:all .18s;color:var(--tx3);user-select:none}
.seg-btn:hover{border-color:var(--b3);color:var(--tx2);transform:translateY(-1px)}
.seg-btn[data-on]{border-color:var(--acc);background:linear-gradient(160deg,rgba(131,221,212,.14),rgba(131,221,212,.05));color:var(--acc);box-shadow:0 0 0 1px var(--acbb) inset,var(--glow-sm)}
.seg-btn .sv{font-size:1.05rem;font-weight:700;display:block;margin-bottom:.14rem;color:inherit}
.seg-btn .sl{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;opacity:.5;color:inherit}
.tb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(72px,100%),1fr));gap:.38rem}
.tb{background:var(--card2);border:1px solid var(--b1);border-radius:9px;padding:.65rem .18rem;cursor:pointer;text-align:center;font-size:clamp(1rem,2vw,1.25rem);font-weight:700;transition:all .14s;color:var(--tx3);line-height:1.2;user-select:none;min-width:0;word-break:break-word}
.tb:hover{border-color:var(--b3);color:var(--tx2)}
.tb[data-on]{border-color:var(--acc);background:var(--acb);color:var(--acc);box-shadow:var(--glow-sm)}
.tb .ts{font-size:clamp(.6rem,1.1vw,.72rem);opacity:.65;font-weight:500;display:block;margin-top:.1rem}
.tb .ts-half{font-size:.8rem;opacity:.65;font-weight:500;vertical-align:super;line-height:0;margin-left:.04em}
.radio-row{display:flex;gap:.45rem}
.rbtn{flex:1;background:var(--card2);border:1px solid var(--b1);border-radius:9px;padding:.58rem;cursor:pointer;text-align:center;font-size:.875rem;color:var(--tx3);transition:all .15s;user-select:none;font-family:var(--font)}
.rbtn:hover{border-color:var(--b3);color:var(--tx2)}
.rbtn[data-on]{border-color:var(--acc);background:var(--acb);color:var(--acc);font-weight:600}
.dp-wrap{position:relative;display:none}
.dp-trigger{background:var(--card2);border:1px solid var(--b1);border-radius:10px;padding:.7rem .95rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:.92rem;color:var(--tx3);transition:border-color .15s;user-select:none}
.dp-trigger:hover,.dp-trigger[data-open]{border-color:var(--acc);color:var(--tx)}
/* Datepicker popup — portal-rendered (moved to <body> via JS) with fixed
   positioning so it's never clipped by card overflow. Frosted-glass surface
   matches the app's elevated-element language. */
.dp-popup{position:fixed;z-index:9999;background:rgba(8,12,20,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.2rem;width:286px;max-width:calc(100vw - 16px);box-shadow:0 20px 56px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.45),0 0 40px rgba(var(--acc-rgb),.06),inset 0 1px 0 rgba(255,255,255,.05)}
/* Transparent backdrop behind the datepicker — catches outside clicks and
   blocks interaction with elements behind the popup. */
.dp-backdrop{position:fixed;inset:0;z-index:9998;background:transparent;display:none}
.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.dp-month-lbl{font-size:.92rem;font-weight:700;color:var(--tx);letter-spacing:.03em}
.dp-arrow{background:none;border:1px solid var(--b2);color:var(--tx3);border-radius:8px;width:30px;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-size:.92rem;font-family:var(--font)}
.dp-arrow:hover{border-color:var(--acc);color:var(--acc);background:var(--acb)}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.35rem}
.dp-dow span{text-align:center;font-size:.62rem;font-weight:700;color:var(--dim);text-transform:uppercase;padding:.22rem 0;letter-spacing:.05em}
.dp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dp-day{background:none;border:none;border-radius:8px;padding:.4rem .2rem;cursor:pointer;font-size:.84rem;color:var(--tx2);text-align:center;transition:all .12s;font-family:var(--font);font-weight:400}
.dp-day:hover:not(:disabled){background:var(--acb);color:var(--acc)}
.dp-day.today{color:var(--acc);font-weight:700}
.dp-day.sel{background:var(--acc);color:#03100e;font-weight:700}
.dp-day:disabled{opacity:.2;cursor:not-allowed}
.dp-day.om{opacity:.2}
.badge{display:inline-block;padding:.18rem .58rem;border-radius:20px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.badge.expired{background:rgba(40,50,70,.3);color:var(--dim);border:1px solid var(--b1)}
.badge.revoked{background:var(--rdb);color:var(--red);border:1px solid var(--rdbb)}
.badge.cancelled{background:var(--ambb);color:var(--amb);border:1px solid var(--goldbb)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}
.tbl th{text-align:left;padding:.48rem .75rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);border-bottom:1px solid var(--b1);font-weight:700}
.tbl td{padding:.72rem .8rem;border-bottom:1px solid rgba(24,34,56,.5);vertical-align:middle;transition:background .15s}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
/* Row identity — colored left-rail accents tied to status. The rail sits on
   the first cell only so it lines up with the leading edge of the table. */
.tbl tr[data-kind]{position:relative}
.tbl tr[data-kind] td:first-child{position:relative;padding-left:1rem}
.tbl tr[data-kind] td:first-child::before{content:'';position:absolute;left:.25rem;top:.85rem;bottom:.85rem;width:2px;border-radius:2px;background:var(--row-rail,var(--b2));opacity:.6;transition:opacity .15s,width .15s}
.tbl tr[data-kind]:hover td:first-child::before{opacity:1;width:3px}
.tbl tr[data-kind="meeting"]{--row-rail:linear-gradient(180deg,rgba(var(--grn-rgb),.7),rgba(var(--grn-rgb),.2))}
.tbl tr[data-kind="self"]{--row-rail:linear-gradient(180deg,rgba(var(--sapph-rgb),.7),rgba(var(--sapph-rgb),.2))}
.tbl tr[data-kind="group"]{--row-rail:linear-gradient(180deg,rgba(var(--violet-rgb),.7),rgba(var(--violet-rgb),.2))}
.tbl tr[data-kind="pending"]{--row-rail:linear-gradient(180deg,rgba(var(--gold-rgb),.7),rgba(var(--gold-rgb),.2))}
.tbl tr[data-kind="blocked"]{--row-rail:linear-gradient(180deg,rgba(var(--red-rgb),.7),rgba(var(--red-rgb),.2))}
.tbl tr[data-kind="meeting"]:hover td{background:rgba(var(--grn-rgb),.03)}
.tbl tr[data-kind="self"]:hover td{background:rgba(var(--sapph-rgb),.03)}
.tbl tr[data-kind="group"]:hover td{background:rgba(var(--violet-rgb),.04)}
.tbl tr[data-kind="pending"]:hover td{background:rgba(var(--gold-rgb),.03)}
.tbl tr[data-kind="blocked"]:hover td{background:rgba(var(--red-rgb),.03)}
.tbl tr[data-kind="pending-group"]{--row-rail:linear-gradient(180deg,rgba(var(--gold-rgb),.7),rgba(var(--gold-rgb),.2))}
.tbl tr[data-kind="pending-group"]:hover td{background:rgba(var(--gold-rgb),.03)}
/* Sub-rows — nested under a group header. Rail extends through sub-rows, indented, tighter. */
.tbl tr.sub-row td{border-bottom:none;padding-top:.22rem;padding-bottom:.22rem}
.tbl tr.sub-row .td-name{padding-left:2.1rem;position:relative}
.tbl tr.sub-row .td-name::before{content:'';position:absolute;left:.25rem;top:0;bottom:0;width:2px;border-radius:2px;background:var(--row-rail,var(--b2));opacity:.6}
.tbl tr.sub-row-last td{padding-bottom:.5rem;border-bottom:1px solid rgba(24,34,56,.5)}
.tbl tr.sub-row-last .td-name::before{bottom:.5rem}
.tbl .td-detail{font-size:.8rem;color:var(--tx2)}
.tbl .td-actions{text-align:right;white-space:nowrap;vertical-align:middle}
.tbl .td-actions>*{vertical-align:middle}
.tbl .td-actions>*+*{margin-left:.3rem}
/* ── Meeting-link chip ──────────────────────────────────────
   Compact pill that packs status, action, link selection, and
   power toggle into one tight row. Used in the activity table's
   actions column. */
.ml-chip{display:inline-flex;align-items:stretch;position:relative;vertical-align:middle;border-radius:6px;background:var(--sc);border:1px solid var(--bd);transition:border-color .15s,box-shadow .15s}
.ml-chip:hover{border-color:var(--acbb);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.08)}
.ml-chip.on{border-color:rgba(var(--grn-rgb),.22)}
.ml-chip.on:hover{border-color:rgba(var(--grn-rgb),.45);box-shadow:0 0 0 2px rgba(var(--grn-rgb),.1)}
.ml-chip.off{border-color:var(--bd)}
.ml-chip-inner{display:inline-flex;align-items:center;gap:0}
/* ↗ Open-link button — first icon gets left padding */
.ml-chip-act{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:100%;padding:.35rem 0 .35rem .45rem;color:var(--acc);text-decoration:none;font-size:.85rem;font-weight:600;transition:opacity .15s;flex-shrink:0;cursor:pointer;line-height:1}
.ml-chip-act.dim{color:var(--tx3);opacity:.4;cursor:not-allowed}
.ml-chip-act:not(.dim):hover{opacity:.75}
/* Edit icon — opens dropdown */
.ml-chip-edit{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;padding:.2rem 0;color:var(--tx3);font-size:.75rem;cursor:pointer;line-height:1;transition:color .12s;flex-shrink:0}
.ml-chip-edit:hover{color:var(--acc)}
/* ⏻ Power toggle button — SVG icon inside for consistent cross-device rendering */
.ml-chip-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:1.7rem;height:100%;padding:.3rem .35rem;margin:0;background:none;border:none;border-left:1px solid var(--bd);color:var(--tx3);cursor:pointer;line-height:1;transition:color .15s,background .15s;flex-shrink:0;border-radius:0;border-top-right-radius:5px;border-bottom-right-radius:5px}
.ml-chip-toggle:hover{color:var(--acc);background:var(--acb)}
.ml-chip.on .ml-chip-toggle{color:var(--grn)}
.ml-chip.on .ml-chip-toggle:hover{color:#fff;background:rgba(var(--grn-rgb),.15)}
.ml-chip-toggle svg{display:block;flex-shrink:0}
/* Empty chip (no link set) */
.ml-chip-empty{cursor:pointer;background:transparent;border:1px dashed rgba(var(--amb-rgb),.3)}
.ml-chip-empty:hover{border-color:rgba(var(--amb-rgb),.55);box-shadow:0 0 0 2px rgba(var(--amb-rgb),.08)}
.ml-chip-empty .ml-chip-edit{color:var(--amb)}
.ml-chip-empty .ml-chip-edit:hover{color:var(--gold)}
/* ── Dropdown menu (saved-links quick-select) ────────────── */
.ml-drop-menu{display:none;position:absolute;top:100%;right:0;z-index:200;margin-top:6px;background:var(--s2);border:1px solid var(--b2);border-radius:10px;min-width:200px;max-width:260px;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2);padding:.5rem 0;overflow:visible}
.ml-drop-menu.flip{right:auto;left:0}
.ml-drop-menu.center{right:auto;left:50%;transform:translateX(-50%)}

.ml-drop-item{display:flex;flex-direction:column;gap:.08rem;width:100%;padding:.5rem .9rem;font-size:.75rem;line-height:1.35;background:transparent;border:none;color:var(--tx);cursor:pointer;font-family:var(--mono);transition:background .12s,color .12s;text-align:left}
.ml-drop-item span{font-size:.64rem;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-drop-item:hover{background:var(--acb);color:var(--acc)}
.ml-drop-item.current{background:var(--acb);color:var(--acc)}

.ml-drop-empty{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;font-size:.73rem;color:var(--dim);font-style:normal}
.ml-drop-divider{display:block;height:1px;background:linear-gradient(90deg,transparent,var(--b1) 8%,var(--b1) 92%,transparent);margin:.35rem .9rem}
.ml-drop-toggle-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;padding:.5rem .9rem;font-size:.74rem;background:transparent;border:none;color:var(--tx2);cursor:pointer;transition:background .12s,color .12s}
.ml-drop-toggle-item:hover{background:var(--acb);color:var(--acc)}
.ml-drop-toggle-icon{font-size:.9rem;flex-shrink:0}

.ml-drop-custom{padding:.55rem .9rem}
.ml-drop-custom-label{font-size:.65rem;color:var(--tx3);font-weight:600;letter-spacing:.04em;padding:0 0 .35rem 0;display:block;text-transform:none}
.ml-drop-custom-row{display:flex;gap:.45rem;min-width:0}
.ml-drop-custom-url{flex:1;min-width:0;padding:.45rem .6rem;font-size:.72rem;border:1px solid var(--b1);border-radius:6px;background:var(--sc);color:var(--tx);font-family:var(--mono);box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.ml-drop-custom-url:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.ml-drop-custom-set{font-size:.7rem;font-weight:700;padding:.4rem .8rem;background:linear-gradient(135deg,var(--acl),var(--acc));color:#03100e;border:1px solid rgba(var(--acc-rgb),.3);border-radius:6px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:filter .15s,box-shadow .15s;letter-spacing:.02em;box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 8px rgba(var(--acc-rgb),.15)}
.ml-drop-custom-set:hover{filter:brightness(1.12);box-shadow:0 1px 0 rgba(0,0,0,.3),0 4px 14px rgba(var(--acc-rgb),.25)}
.ml-drop-custom-set:active{filter:brightness(.95);transform:scale(.97)}

/* ── Inline edit mode ────────────────────────────────────── */
.ml-chip.editing .ml-chip-inner{display:none}
.ml-chip.editing .ml-chip-edit-mode{display:inline-flex!important;align-items:center;gap:.35rem;flex:1;min-width:0}
.ml-chip.editing .ml-drop-menu{/* shown as suggestion list via JS */}

.ml-chip-edit-mode{display:none}
.ml-chip-edit-input{flex:1;min-width:0;padding:.35rem .5rem;font-size:.74rem;border:1px solid var(--acc);border-radius:5px;background:var(--sc);color:var(--tx);font-family:var(--mono);box-sizing:border-box;outline:none;box-shadow:0 0 0 2px rgba(var(--acc-rgb),.18)}
.ml-chip-edit-confirm,
.ml-chip-edit-cancel{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:5px;border:none;cursor:pointer;font-size:.85rem;flex-shrink:0;transition:filter .12s,background .12s}
.ml-chip-edit-confirm{background:var(--acc);color:#03100e;font-weight:700}
.ml-chip-edit-confirm:hover{filter:brightness(1.15)}
.ml-chip-edit-cancel{background:transparent;color:var(--tx3);border:1px solid var(--b1)}
.ml-chip-edit-cancel:hover{background:var(--acb);color:var(--tx)}

/* ── Mobile: edit-link modal (full-screen overlay) ───────── */
#ml-edit-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
#ml-edit-modal.open{display:flex}
.ml-edit-backdrop{position:absolute;inset:0;background:rgba(3,5,8,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ml-edit-card{position:relative;background:linear-gradient(160deg,rgba(14,22,36,.98),rgba(9,13,20,.99));border:1px solid var(--b2);border-radius:16px;padding:1.4rem;width:calc(100% - 2rem);max-width:380px;box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 0 1px rgba(var(--acc-rgb),.05),inset 0 1px 0 rgba(255,255,255,.05);animation:ml-modal-in .2s ease-out}
#ml-edit-title{font-size:.85rem;font-weight:700;color:var(--tx);margin:0 0 .85rem;letter-spacing:.02em}
.ml-edit-input{width:100%;box-sizing:border-box;padding:.55rem .65rem;font-size:.8rem;border:1px solid var(--acbb);border-radius:8px;background:var(--sc);color:var(--tx);font-family:var(--mono);outline:none;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.1);transition:border-color .15s,box-shadow .15s}
.ml-edit-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.2)}
.ml-edit-suggestions{margin:.6rem 0;max-height:180px;overflow-y:auto}
.ml-edit-suggestions:empty{display:none}
.ml-edit-sug-item{display:flex;flex-direction:column;gap:.06rem;width:100%;padding:.45rem .6rem;margin-bottom:.25rem;font-size:.76rem;line-height:1.3;background:var(--s2);border:1px solid var(--b1);border-radius:7px;color:var(--tx);cursor:pointer;font-family:var(--mono);transition:border-color .12s,background .12s;text-align:left}
.ml-edit-sug-item span{font-size:.64rem;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-edit-sug-item:hover{border-color:var(--acc);background:var(--acb)}
.ml-edit-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem}
@keyframes ml-modal-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:600px){
  .ml-chip.editing{flex:1;min-width:0}
  .ml-chip.editing .ml-chip-edit-mode{gap:.35rem}
  .ml-chip-edit-input{font-size:.76rem;padding:.32rem .4rem}
  .ml-chip-edit-confirm,
  .ml-chip-edit-cancel{width:1.55rem;height:1.55rem;font-size:.85rem;flex-shrink:0}
}
/* ── Meeting card on booker success page ──────────────────── */
.ml-meeting-card{position:relative;width:100%;max-width:500px;box-sizing:border-box;background:linear-gradient(165deg,rgba(14,22,36,.94),rgba(8,12,19,.98));border:1px solid var(--b1);border-radius:18px;padding:1.5rem 1.2rem;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.02) inset}
.ml-meeting-card::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.3) 30%,rgba(var(--acc-rgb),.3) 70%,transparent);pointer-events:none;border-radius:1px}
/* Status badge row */
.ml-meeting-status-row{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-bottom:1rem}
.ml-meeting-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ml-meeting-status-dot.on{background:var(--grn);box-shadow:0 0 8px rgba(var(--grn-rgb),.6)}
.ml-meeting-status-dot.off{background:var(--gold);box-shadow:0 0 8px rgba(var(--gold-rgb),.45)}
.ml-meeting-status-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.ml-meeting-status-label.on{color:var(--grn)}
.ml-meeting-status-label.off{color:var(--gold)}
/* Link ready: copyable URL block */
.ml-meeting-link{display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;background:var(--acb);border:1px solid var(--acbb);border-radius:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s;margin-bottom:.65rem}
.ml-meeting-link:hover{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.07)}
.ml-meeting-link-icon{font-size:1rem;flex-shrink:0;color:var(--acc);opacity:.8}
.ml-meeting-link-text{flex:1;min-width:0;font-family:var(--mono);font-size:.7rem;color:var(--acc);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-meeting-join{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:var(--tx2);text-decoration:none;letter-spacing:.02em;transition:color .12s}
.ml-meeting-join:hover{color:var(--acc)}
.ml-meeting-join-arrow{font-size:.85rem}
/* Waiting state */
.ml-meeting-card.waiting{border-color:rgba(var(--gold-rgb),.12)}
.ml-meeting-card.waiting::before{background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.16) 35%,rgba(var(--gold-rgb),.16) 65%,transparent)}
.ml-meeting-wait-msg{font-size:.92rem;font-weight:500;color:var(--tx2);line-height:1.65;margin-bottom:.6rem}
.ml-meeting-wait-msg span{color:var(--gold);font-weight:600}
.ml-meeting-wait-hint{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:.65rem;color:var(--tx3);margin:0;letter-spacing:.03em}
/* Animated dots for "Checking" */
.ml-waiting-dots{display:inline-flex;gap:0}
.ml-dot1,.ml-dot2,.ml-dot3{animation:ml-blink 1.4s infinite}
.ml-dot2{animation-delay:.2s}.ml-dot3{animation-delay:.4s}
@keyframes ml-blink{0%,20%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* Old live-toggle kept for backward compat, but unused by new code */
.copy-btz{cursor:pointer;border-radius:4px;padding:.05rem .25rem;margin:-.05rem -.25rem;transition:background .12s,opacity .15s;-webkit-tap-highlight-color:transparent}
.copy-btz:hover{background:rgba(255,255,255,.07)}
.copy-btz:active{background:rgba(255,255,255,.15);opacity:.75}
@media(max-width:600px){
  .tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr auto;padding:.55rem 0;border-bottom:1px solid rgba(24,34,56,.5);gap:0;align-items:center}
  .tbl tr:last-child{border-bottom:none}
  .tbl td{display:block;padding:.1rem .65rem;border-bottom:none}
  .tbl tr:hover td{background:rgba(255,255,255,.02)}
  .tbl tr[data-kind="meeting"]:hover td{background:rgba(var(--grn-rgb),.025)}
  .tbl tr[data-kind="self"]:hover td{background:rgba(var(--sapph-rgb),.025)}
  .tbl tr[data-kind="group"]:hover td{background:rgba(var(--violet-rgb),.03)}
  .tbl tr[data-kind="pending"]:hover td{background:rgba(var(--gold-rgb),.025)}
  .tbl tr[data-kind="blocked"]:hover td{background:rgba(var(--red-rgb),.025)}
  .tbl tr[data-kind="pending-group"]:hover td{background:rgba(var(--gold-rgb),.025)}
  /* Kill left rail on mobile — too tall for compact cells */
  .tbl tr[data-kind] td:first-child{padding-left:.65rem}
  .tbl tr[data-kind] td:first-child::before{display:none}
  .tbl .td-name{grid-column:1;grid-row:1;min-width:0}
  .tbl .td-detail{grid-column:1/-1;grid-row:2;padding-left:calc(.65rem + 8px + .4rem)}
  .tbl .td-actions{display:flex;align-items:center;gap:.3rem;grid-column:2;grid-row:1;padding:.2rem .65rem .1rem;white-space:nowrap;justify-self:end}
  /* Chip compactness on mobile — shrink padding slightly, keep touch targets */
  .ml-chip-inner{gap:0}
  .ml-chip-act{width:1.35rem;padding-left:.32rem;font-size:.8rem}
  .ml-chip-edit{width:1.25rem;font-size:.72rem}
  .ml-chip-toggle{min-width:1.55rem;padding:.25rem .3rem}
  .ml-chip-toggle svg{width:11px;height:11px}
  /* Config panel: stack inline edit inputs vertically */
  .ml-row-edit{flex-wrap:wrap}
  .ml-edit-label{flex:1 1 100%}
  .ml-edit-url{flex:1 1 100%}
  .ml-edit-save,.ml-edit-cancel{flex-shrink:0}
}
.mono{font-family:var(--mono);font-size:.74rem;color:var(--tx2)}
.empty{color:var(--tx3);font-size:.875rem;padding:.45rem 0}
/* Skeleton shimmer — animated placeholder bars while panels load.
   Rows of different widths suggest a table/structure before data lands. */
.shimmer-stack{display:flex;flex-direction:column;gap:.55rem;padding:.45rem 0}
.shimmer-line{display:block;height:.6rem;border-radius:4px;background:rgba(var(--sapph-rgb),.08);position:relative;overflow:hidden}
.shimmer-line::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(var(--sapph-rgb),.1) 40%,rgba(var(--acc-rgb),.08) 60%,transparent 100%);animation:shimmer-wave 2.2s ease-in-out infinite}
.shimmer-line.w80{width:80%}.shimmer-line.w55{width:55%}.shimmer-line.w35{width:35%}
@keyframes shimmer-wave{0%{left:-100%}100%{left:100%}}
/* Panel loader — minimal spinning ring shown inside the notes panel
   when encrypted tab content hasn't loaded yet. Fades in just after
   the panel slide completes so it never competes with the entrance. */
.notes-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;padding:2.5rem 1rem;opacity:0;animation:loader-in .2s ease .22s forwards}
.notes-loader-ring{width:20px;height:20px;border:2px solid rgba(var(--sapph-rgb),.1);border-top-color:var(--acc);border-radius:50%;animation:loader-spin .7s linear infinite}
.notes-loader-label{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;color:var(--tx3);text-transform:uppercase}
@keyframes loader-in{from{opacity:0}to{opacity:1}}
@keyframes loader-spin{to{transform:rotate(360deg)}}
details.hist summary{list-style:none;cursor:pointer;font-size:.82rem;color:var(--tx2);padding:.55rem 0;display:flex;align-items:center;gap:.4rem;user-select:none;margin-top:.8rem}
details.hist summary::before{content:"\25B6";font-size:.56rem;transition:transform .2s;color:var(--dim)}
details.hist[open] summary::before{transform:rotate(90deg)}
details.hist summary::-webkit-details-marker{display:none}
.hist-tbl{opacity:.85;margin-top:.5rem}
.hist-sel-bar{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;margin:.55rem 0 .2rem;background:rgba(222,138,132,.04);border:1px solid rgba(222,138,132,.1);border-radius:8px;gap:.75rem}
.hist-sel-label{display:flex;align-items:center;gap:.45rem;font-size:.75rem;color:var(--tx3);cursor:pointer;user-select:none;letter-spacing:.01em}
#confirm-modal{position:fixed;inset:0;background:rgba(3,5,8,.88);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:9100}
#confirm-modal.show{display:flex}
.confirm-card{position:relative;background:linear-gradient(160deg,rgba(14,22,36,.98),rgba(9,13,20,.99));border:1px solid var(--b2);border-radius:18px;padding:2.2rem 2rem;max-width:380px;width:92%;box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 0 1px rgba(var(--acc-rgb),.04),inset 0 1px 0 rgba(255,255,255,.05)}
.confirm-card::before{content:'';position:absolute;top:-1px;left:22%;right:22%;height:1px;background:var(--top-accent);pointer-events:none;border-radius:1px}
.confirm-card h3{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.35rem;letter-spacing:.04em;color:var(--tx)}
.confirm-card p{color:var(--tx2);font-size:.9rem;margin-bottom:1.4rem;line-height:1.65}
.confirm-card .btn{white-space:normal;text-align:center;justify-content:center;word-break:break-word}
#cm-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1rem}
.cm-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.26rem .68rem;border-radius:20px;font-size:.71rem;font-weight:700;letter-spacing:.04em;background:rgba(222,138,132,.1);border:1px solid rgba(222,138,132,.28);color:var(--red)}
.cm-chip svg{flex-shrink:0;opacity:.95}
#cm-err{color:var(--red);font-size:.8rem;min-height:1.1rem;margin-bottom:.6rem;font-weight:500}
.nuke-zone{border:1px solid rgba(222,138,132,.16);border-radius:16px;padding:1.3rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:rgba(222,138,132,.03)}
.nuke-zone-text h4{font-size:.92rem;font-weight:700;color:var(--red);margin-bottom:.22rem;letter-spacing:.02em}
.nuke-zone-text p{font-size:.82rem;color:var(--tx2);line-height:1.55}
.nuke-scopes{display:flex;flex-direction:column;gap:.4rem;width:100%;margin-top:.6rem}
.nuke-scope-row{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;padding:.55rem .7rem;border-radius:9px;border:1px solid var(--b1);background:rgba(255,255,255,.02);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.nuke-scope-row:has(input:checked){border-color:rgba(222,138,132,.35);background:rgba(222,138,132,.04)}
.nuke-scope-row input[type=checkbox]{margin-top:.14rem;accent-color:var(--red);width:15px;height:15px;flex-shrink:0;cursor:pointer}
.nuke-scope-info{flex:1;min-width:0}
.nuke-scope-name{font-size:.81rem;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:.45rem;margin-bottom:.1rem}
.nuke-scope-svg{flex-shrink:0;color:var(--tx3);transition:color .15s}
.nuke-scope-row:has(input:checked) .nuke-scope-svg{color:var(--red)}
.nuke-scope-desc{font-size:.73rem;color:var(--tx3);line-height:1.45;display:block}
.nuke-scope-row:has(#nuke-notes:checked) .nuke-scope-desc{color:rgba(222,138,132,.85)}
/* ── BOOKER ── */
#booker-wrap{display:none;flex-direction:column;height:100vh;height:100dvh;background:var(--bg);overflow:hidden}
.b-nav{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.6rem 1.4rem 1.4rem;border-bottom:1px solid rgba(24,34,56,.8);background:rgba(5,8,14,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background-image:radial-gradient(ellipse 22% 90% at 50% 52%,rgba(131,221,212,.11) 0%,rgba(40,120,108,.05) 48%,transparent 68%),radial-gradient(ellipse 60% 100% at 50% 52%,rgba(8,32,28,.07) 0%,transparent 70%);overflow:visible;position:relative}
.b-nav::before{content:'';position:absolute;left:-40%;right:-40%;top:50%;transform:translateY(-58%);height:4.4rem;z-index:0;pointer-events:none;background:radial-gradient(ellipse 36% 100% at 50% 52%,rgba(200,255,248,.18) 0%,rgba(131,221,212,.30) 20%,rgba(48,148,136,.13) 46%,transparent 68%),radial-gradient(ellipse 68% 100% at 50% 52%,rgba(35,110,100,.11) 0%,rgba(10,44,40,.05) 56%,transparent 74%),radial-gradient(ellipse 92% 100% at 50% 52%,rgba(5,24,22,.06) 0%,transparent 72%);filter:blur(22px)}
.b-nav::after{content:'';position:absolute;left:5%;right:5%;top:50%;transform:translateY(-80%);height:1.9rem;z-index:0;pointer-events:none;background:radial-gradient(ellipse 42% 100% at 50% 50%,rgba(210,255,250,.70) 0%,rgba(131,221,212,.55) 24%,rgba(55,168,155,.26) 54%,transparent 72%);filter:blur(9px)}
.b-nav-brand{font-family:var(--display);font-size:3.2rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;line-height:1;position:relative;z-index:1;background:linear-gradient(174deg,#ffffff 0%,#ddf0ee 5%,#8ecfca 11%,#2e8880 17%,#74bfb9 23%,#e2f7f5 30%,#ffffff 38%,#eafaf9 46%,#a5ece5 55%,#52b8b0 64%,#3fa39c 71%,#78cac4 80%,#d0f0ee 90%,#f6fffe 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 1px 0 rgba(0,0,0,1),0 2px 14px rgba(0,0,0,.9),0 -1px 8px rgba(131,221,212,.10);filter:drop-shadow(0 4px 14px rgba(0,0,0,.95)) drop-shadow(0 0 60px rgba(131,221,212,.14))}
.b-nav-sub{font-family:var(--font);font-size:.68rem;font-weight:500;letter-spacing:.54em;text-transform:uppercase;margin-top:.4rem;background:linear-gradient(90deg,rgba(131,221,212,.45) 0%,#c2f0ec 50%,rgba(131,221,212,.45) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 22px rgba(131,221,212,.7),0 0 60px rgba(131,221,212,.3)}
.bstep{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.bstep.active{display:flex}
.bscr{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bstep:has(> .bfoot) .bscr{padding-bottom:5.5rem}
.binn{padding:2rem 1.6rem 1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%}
.binn.top{justify-content:flex-start;padding-top:2rem}
.bbox{width:100%;max-width:520px}
.bfoot{position:fixed;bottom:0;left:0;right:0;z-index:50;padding:1rem 1.4rem;border-top:1px solid rgba(24,34,56,.7);background:rgba(5,8,14,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;gap:.6rem}
.bfoot .bbtn{flex:1}
/* Booker primary CTA — mirrors the admin .btn depth system so the whole app
   shares one button vocabulary. Gradient + inset highlight + cyan glow. */
.bbtn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(135deg,var(--acl),var(--acc));color:#03100e;font-weight:700;font-size:.94rem;padding:.8rem 1.3rem;border:1px solid rgba(var(--acc-rgb),.4);border-radius:11px;cursor:pointer;transition:transform .15s,box-shadow .22s,filter .15s;width:100%;font-family:var(--font);letter-spacing:.03em;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 0 rgba(0,0,0,.45),0 8px 22px rgba(var(--acc-rgb),.22)}
.bbtn:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(0,0,0,.45),0 12px 30px rgba(var(--acc-rgb),.36),0 0 0 1px rgba(var(--acc-rgb),.4)}
.bbtn:active:not(:disabled){transform:translateY(0);filter:brightness(.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.45),0 4px 12px rgba(var(--acc-rgb),.2)}
.bbtn:disabled{cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none;background:rgba(var(--acc-rgb),.22);color:rgba(var(--acc-rgb),.7);border-color:rgba(var(--acc-rgb),.4)}
.bbtn.ghost{background:rgba(255,255,255,.012);border:1px solid var(--b2);color:var(--tx3);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.bbtn.ghost:hover{border-color:var(--acc);color:var(--acc);background:var(--acb);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 14px rgba(var(--acc-rgb),.12)}
.bbtn.lg{padding:.92rem;font-size:1rem}
.spin{width:36px;height:36px;border:2px solid var(--b2);border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite;margin:0 auto 1rem}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes spin-once{to{transform:rotate(360deg)}}
.btn-spinning{animation:spin-once .55s cubic-bezier(.4,0,.2,1) 1;display:inline-block}
.invite-card{position:relative;background:linear-gradient(160deg,rgba(14,20,34,.97),rgba(9,13,21,.99));border:1px solid var(--b2);border-radius:20px;padding:1.8rem;margin-bottom:1.3rem;width:100%;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(var(--acc-rgb),.05),inset 0 1px 0 rgba(255,255,255,.05)}
.invite-card::before{content:'';position:absolute;top:-1px;left:22%;right:22%;height:1px;background:var(--top-accent);pointer-events:none;border-radius:1px}
.invite-name{font-family:var(--display);font-size:2.4rem;font-weight:600;letter-spacing:.03em;line-height:1.1;margin-bottom:.35rem;background:linear-gradient(140deg,#fff 40%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dscr{overflow-x:auto;padding:.5rem .4rem 1rem;margin-bottom:1rem;width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dscr::-webkit-scrollbar{display:none}
.date-month-hdr{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:700;margin:.5rem 0 .25rem;padding-left:.1rem}
.date-month-hdr:first-child{margin-top:0}
.drow{display:flex;gap:.6rem;min-width:max-content;margin-bottom:.6rem;flex-wrap:wrap}
.dc{background:linear-gradient(160deg,rgba(14,20,34,.9),rgba(9,13,21,.95));border:1px solid var(--b2);border-radius:12px;padding:.65rem 1rem;cursor:pointer;text-align:center;transition:transform .18s,border-color .18s,box-shadow .2s,background .2s;min-width:74px;box-shadow:0 2px 12px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025)}
.dc:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
.dc[data-s]{border-color:rgba(var(--acc-rgb),.5);background:linear-gradient(160deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.06));color:var(--acc);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.28),0 8px 24px rgba(var(--acc-rgb),.18),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(-2px)}
.dcd{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:.25rem;font-weight:700}
.dc[data-s] .dcd{color:var(--acc);opacity:.7}
.dcv{font-size:.94rem;font-weight:700;white-space:nowrap;color:var(--tx)}
.dc[data-s] .dcv{color:var(--acc)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(80px,100%),1fr));gap:.45rem;margin-bottom:.9rem;width:100%}
@media(min-width:400px){.sgrid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}
@media(min-width:520px){.sgrid{grid-template-columns:repeat(4,1fr)}}
.bslot{background:linear-gradient(160deg,rgba(14,20,34,.9),rgba(9,13,21,.95));border:1px solid var(--b2);border-radius:11px;padding:.65rem .3rem;cursor:pointer;text-align:center;font-size:.9rem;font-weight:600;transition:transform .18s,border-color .18s,box-shadow .2s,background .2s;box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025)}
.bslot:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
.bslot[data-s]{border-color:rgba(var(--acc-rgb),.5);background:linear-gradient(160deg,rgba(var(--acc-rgb),.2),rgba(var(--acc-rgb),.06));color:var(--acc);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.28),0 8px 22px rgba(var(--acc-rgb),.2),inset 0 1px 0 rgba(255,255,255,.06);transform:translateY(-2px)}
.sap{font-size:.7rem;color:var(--tx2);font-weight:400;display:block;margin-top:.15rem}
.bslot[data-s] .sap{color:var(--acc);opacity:.65}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.9rem;width:100%}
@media(min-width:520px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.btopic{background:linear-gradient(160deg,rgba(14,20,34,.9),rgba(9,13,21,.95));border:1px solid var(--b2);border-radius:10px;padding:.6rem .8rem;cursor:pointer;font-size:.84rem;transition:transform .15s,border-color .18s,color .18s,box-shadow .2s,background .2s;color:var(--tx2);text-align:left;line-height:1.45;box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.025)}
.btopic:hover{border-color:var(--b3);color:var(--tx);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)}
.btopic[data-s]{border-color:rgba(var(--acc-rgb),.5);background:linear-gradient(160deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.05));color:var(--acc);font-weight:600;box-shadow:0 0 0 1px rgba(var(--acc-rgb),.28),0 6px 18px rgba(var(--acc-rgb),.16),inset 0 1px 0 rgba(255,255,255,.06)}
.rcard{position:relative;background:linear-gradient(160deg,rgba(14,20,34,.97),rgba(9,13,21,.99));border:1px solid var(--b2);border-radius:18px;overflow:hidden;margin-bottom:1rem;width:100%;max-width:500px;box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(var(--acc-rgb),.04),inset 0 1px 0 rgba(255,255,255,.05)}
#sc-meeting-wrap{width:100%;max-width:500px;box-sizing:border-box}
.rcard::before{content:'';position:absolute;top:0;left:24%;right:24%;height:1px;background:var(--top-accent);pointer-events:none;z-index:1}
.rrow{display:flex;justify-content:space-between;align-items:flex-start;padding:.75rem 1.1rem;border-bottom:1px solid rgba(24,34,56,.7)}
.rrow:last-child{border-bottom:none}
.rl{color:var(--tx2);font-size:.76rem;padding-top:.05rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0;margin-right:.6rem}
.rv{font-weight:600;font-size:.9rem;text-align:right;color:var(--tx)}
.rv-sub{font-size:.74rem;color:var(--tx3);font-weight:400;display:block;margin-top:.15rem}
.ics-btn{display:block;background:linear-gradient(135deg,var(--acl),var(--acc));color:#03100e;font-weight:800;font-size:1rem;padding:.95rem;border:1px solid rgba(var(--acc-rgb),.45);border-radius:13px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .22s,filter .15s;margin-bottom:.75rem;width:100%;max-width:500px;text-decoration:none;letter-spacing:.04em;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.45),0 10px 28px rgba(var(--acc-rgb),.26)}
.ics-btn:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 0 rgba(0,0,0,.45),0 14px 36px rgba(var(--acc-rgb),.4),0 0 0 1px rgba(var(--acc-rgb),.4);transform:translateY(-1.5px)}
.notice{background:linear-gradient(160deg,rgba(14,20,34,.95),rgba(9,13,21,.98));border:1px solid var(--acbb);border-radius:16px;padding:1.1rem 1.2rem;width:100%;max-width:500px;display:flex;gap:.8rem;align-items:flex-start;box-shadow:0 4px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04)}
.ni{font-size:1.15rem;flex-shrink:0;margin-top:.05rem}
.nb .nt{font-size:.88rem;font-weight:700;color:var(--acc);margin-bottom:.22rem;letter-spacing:.02em}
.nb .nm{font-size:.83rem;color:var(--tx2);line-height:1.6}
.ebox{background:var(--rdb);border:1px solid rgba(222,138,132,.2);border-radius:9px;padding:.65rem .95rem;color:var(--red);font-size:.88rem;margin-bottom:.8rem;width:100%;max-width:500px;font-weight:500}
#cfg-overlay{position:fixed;inset:0;background:rgba(3,5,8,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:500;opacity:0;pointer-events:none;transition:opacity .22s}
#cfg-overlay.open{opacity:1;pointer-events:all}
#cfg-panel{position:fixed;top:0;left:0;bottom:0;width:340px;max-width:92vw;z-index:501;background:linear-gradient(160deg,rgba(11,17,30,.99) 0%,rgba(7,11,20,.99) 100%);border-right:1px solid var(--b2);box-shadow:8px 0 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
#cfg-panel::before{content:'';position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:var(--top-accent);pointer-events:none;z-index:5}
#cfg-panel.open{transform:translateX(0)}
.cfg-panel-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--b1)}
.cfg-panel-title{font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(120deg,var(--tx) 20%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cfg-close{background:none;border:1px solid var(--b2);color:var(--tx3);border-radius:7px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.7rem;transition:all .15s;flex-shrink:0}
.cfg-close:hover{border-color:var(--b3);color:var(--tx2)}
.cfg-panel-body{flex:1;overflow-y:auto;padding:1.4rem;scrollbar-width:thin;scrollbar-color:var(--b3) transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cfg-panel-body::-webkit-scrollbar{width:4px}
.cfg-panel-body::-webkit-scrollbar-track{background:transparent}
.cfg-panel-body::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.cfg-section-div{position:relative;margin:1.6rem 0 1.2rem;border-top:1px solid var(--b1)}
.cfg-section-div[data-label]::before{content:attr(data-label);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(160deg,rgba(11,17,30,.99) 0%,rgba(7,11,20,.99) 100%);padding:0 .85rem;font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#cfg-panel .chip-row{flex-wrap:nowrap;gap:.3rem}
#cfg-panel .chip{flex:1;min-width:0;padding:.45rem .2rem;font-size:.65rem;letter-spacing:.02em}
#cfg-panel .chip .cl{font-size:.88rem}
.cfg-open-btn{background:none;border:1px solid var(--b2);color:var(--tx3);border-radius:8px;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .75rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;cursor:pointer;font-family:var(--font);transition:all .16s;text-transform:uppercase}
.cfg-open-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acb)}
#signout-btn:hover{border-color:var(--rdbb);color:var(--red);background:rgba(218,124,124,.08)}
.toggle-row{display:flex;align-items:center;gap:.55rem}
.toggle-wrap{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;vertical-align:middle}
.toggle-wrap input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--b2);border-radius:24px;cursor:pointer;transition:background .25s,box-shadow .25s;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--tx3);border-radius:50%;transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.toggle-wrap input:checked+.toggle-slider{background:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),.45),inset 0 1px 0 rgba(255,255,255,.08)}
.toggle-wrap input:checked+.toggle-slider::before{transform:translateX(20px);background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);white-space:nowrap;user-select:none}
.live-toggle{display:inline-flex;flex-direction:column;align-items:center;gap:2px;vertical-align:middle}
.toggle-room-lbl{font-size:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--dim);line-height:1;user-select:none}
.toggle-sub{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);line-height:1;user-select:none}
.tbl .td-actions .btn{margin:0 .2rem}
.tbl .td-actions .live-toggle{margin:0 .2rem}
#book-modal{position:fixed;inset:0;background:rgba(3,5,8,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:9100}
#book-modal.show{display:flex}
.book-card{background:linear-gradient(160deg,rgba(14,22,36,.98),rgba(9,13,20,.99));border:1px solid var(--b2);border-radius:18px;width:92%;max-width:480px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.book-card-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;border-bottom:1px solid var(--b1)}
.book-card-title{font-family:var(--display);font-size:1.1rem;font-weight:600;letter-spacing:.08em;background:linear-gradient(120deg,var(--tx) 20%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.book-card-body{flex:1;overflow-y:auto;padding:1.4rem 1.5rem;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.book-date-row{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem .1rem .8rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:.2rem}
.book-date-row::-webkit-scrollbar{display:none}
.book-dc{background:linear-gradient(160deg,rgba(14,20,34,.9),rgba(9,13,21,.95));border:1px solid var(--b2);border-radius:10px;padding:.55rem .85rem;cursor:pointer;text-align:center;transition:all .15s;min-width:62px;flex-shrink:0;user-select:none}
.book-dc:hover{border-color:var(--b3);transform:translateY(-1px)}
.book-dc[data-s]{border-color:var(--acc);background:linear-gradient(160deg,rgba(131,221,212,.16),rgba(131,221,212,.06));color:var(--acc);box-shadow:0 0 0 1px var(--acbb)}
.book-dc .dcd{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:.2rem;font-weight:700}
.book-dc[data-s] .dcd{color:var(--acc);opacity:.7}
.book-dc .dcv{font-size:.88rem;font-weight:700;color:var(--tx)}
.book-dc[data-s] .dcv{color:var(--acc)}
.book-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.35rem;margin-bottom:.9rem}
.book-slot{background:var(--card2);border:1px solid var(--b1);border-radius:9px;padding:.55rem .2rem;cursor:pointer;text-align:center;font-size:.88rem;font-weight:600;transition:all .14s;color:var(--tx3);user-select:none}
.book-slot:hover{border-color:var(--b3);color:var(--tx2)}
.book-slot[data-s]{border-color:var(--acc);background:var(--acb);color:var(--acc);box-shadow:var(--glow-sm)}
.book-slot .sap{font-size:.65rem;color:var(--tx2);font-weight:400;display:block;margin-top:.1rem}
.book-slot[data-s] .sap{color:var(--acc);opacity:.65}
.book-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:.38rem;margin-bottom:.9rem}
.book-topic{background:var(--card2);border:1px solid var(--b1);border-radius:9px;padding:.52rem .7rem;cursor:pointer;font-size:.8rem;transition:all .14s;color:var(--tx3);text-align:left;line-height:1.4;user-select:none}
.book-topic:hover{border-color:var(--b3);color:var(--tx2)}
.book-topic[data-s]{border-color:var(--acc);background:var(--acb);color:var(--acc);font-weight:600}
@media(max-width:640px){.g2{grid-template-columns:1fr}}
@media(max-width:420px){
  .b-nav-brand{font-size:2.2rem;letter-spacing:.22em}.b-nav-sub{font-size:.58rem;letter-spacing:.42em}.b-nav{padding:1.2rem 1rem 1rem}
  .login-brand .lbname{font-size:2.6rem;letter-spacing:.22em}.lcard{padding:1.6rem 1.2rem}#ac-name{font-size:1.1rem}
  .binn{padding:1.4rem 1rem 1rem}.bbox{padding:0 .2rem}.invite-card{padding:1.3rem 1.2rem}.invite-name{font-size:1.8rem}
}
@media(max-width:360px){.b-nav-brand{font-size:1.7rem;letter-spacing:.18em}.login-brand .lbname{font-size:2rem;letter-spacing:.18em}}
.bfoot{padding-bottom:calc(1rem + env(safe-area-inset-bottom));padding-left:calc(1.4rem + env(safe-area-inset-left));padding-right:calc(1.4rem + env(safe-area-inset-right))}
@supports not (backdrop-filter:blur(1px)){.topbar{background:rgba(5,8,14,.98)}.bfoot{background:rgba(5,8,14,.98)}.b-nav{background:rgba(5,8,14,.99)}.dp-popup{background:rgba(8,12,20,.99)}}
.b-nav-brand,.b-nav-sub,.login-brand .lbname,.login-brand .lbsub{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.notif-chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--acb);border:1px solid var(--acbb);border-radius:6px;padding:.25rem .55rem;font-size:.75rem;color:var(--acc)}
.notif-chip span{cursor:pointer;opacity:.6;margin-left:.1rem;line-height:1}
.notif-chip span:hover{opacity:1}
/* ── Config panel: saved meeting links ───────────────────── */
.ml-row{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-radius:8px;border:1px solid var(--b1);background:var(--s2);margin-bottom:.4rem;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.ml-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);border-radius:3px 0 0 3px;opacity:.35;transition:opacity .15s}
.ml-row:hover{border-color:var(--acbb);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.06)}
.ml-row:hover::before{opacity:.7}
.ml-info{flex:1;min-width:0}
.ml-label{font-size:.78rem;font-weight:600;color:var(--tx1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ml-url{font-size:.67rem;color:var(--dim);white-space:nowrap;overflow-x:auto;line-height:1.55;padding-bottom:5px;margin-top:.06rem;font-family:var(--mono);scrollbar-width:thin;scrollbar-color:var(--b3) transparent}
.ml-url::-webkit-scrollbar{height:3px}
.ml-url::-webkit-scrollbar-track{background:transparent}
.ml-url::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.ml-actions{display:flex;gap:.2rem;flex-shrink:0}
.ml-act-btn{background:none;border:1px solid transparent;cursor:pointer;opacity:.5;padding:.25rem .35rem;border-radius:5px;font-size:.8rem;line-height:1;color:var(--tx1);transition:opacity .15s,background .15s,border-color .15s}
.ml-act-btn:hover{opacity:1;background:var(--s3);border-color:var(--b1)}
.ml-act-btn.ml-del{color:var(--red);opacity:.35}
.ml-act-btn.ml-del:hover{opacity:1;background:rgba(var(--red-rgb),.08);border-color:rgba(var(--red-rgb),.15)}
.ml-empty{text-align:center;padding:.9rem;font-size:.76rem;color:var(--dim);border:1px dashed var(--bd);border-radius:7px;font-style:italic}

/* Inline row edit mode */
.ml-row.editing{border-color:var(--acc);box-shadow:0 0 0 2px rgba(var(--acc-rgb),.1)}
.ml-row.editing::before{opacity:1}
.ml-row-view{display:flex;align-items:center;gap:.55rem;width:100%}
.ml-row-edit{display:none;align-items:center;gap:.35rem;width:100%}
.ml-row.editing .ml-row-edit{display:flex}
.ml-edit-label{flex:1;min-width:0;padding:.35rem .5rem;font-size:.74rem;border:1px solid var(--acbb);border-radius:5px;background:var(--sc);color:var(--tx);font-family:var(--font);box-sizing:border-box;outline:none}
.ml-edit-label:focus{border-color:var(--acc)}
.ml-edit-url{flex:2;min-width:0;padding:.35rem .5rem;font-size:.72rem;border:1px solid var(--b1);border-radius:5px;background:var(--sc);color:var(--tx);font-family:var(--mono);box-sizing:border-box;outline:none}
.ml-edit-url:focus{border-color:var(--acc)}
.ml-edit-save{color:var(--grn)!important;opacity:.7}
.ml-edit-save:hover{opacity:1!important;background:rgba(var(--grn-rgb),.1)!important;border-color:rgba(var(--grn-rgb),.2)!important}
.ml-edit-cancel{color:var(--tx3)!important}
.ml-edit-cancel:hover{opacity:1!important;background:var(--acb)!important}
#notes-overlay{position:fixed;inset:0;background:rgba(3,5,8,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:500;opacity:0;pointer-events:none;transition:opacity .22s}
#notes-overlay.open{opacity:1;pointer-events:all}
#notes-panel{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:92vw;z-index:501;background:linear-gradient(160deg,rgba(11,17,30,.99) 0%,rgba(7,11,20,.99) 100%);border-left:1px solid var(--b2);box-shadow:-8px 0 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
#notes-panel::before{content:'';position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:var(--top-accent);pointer-events:none;z-index:5}
#notes-panel.open{transform:translateX(0)}
.notes-panel-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--b1)}
.notes-panel-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;scrollbar-width:thin;scrollbar-color:var(--b3) transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.notes-panel-body::-webkit-scrollbar{width:4px}
.notes-panel-body::-webkit-scrollbar-track{background:transparent}
.notes-panel-body::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.notes-panel-foot{flex-shrink:0;padding:.55rem 1.4rem;border-top:1px solid var(--b1);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;row-gap:.25rem}
.notes-foot-spacer{flex:1}
#notes-save-status{flex-basis:100%;text-align:right;order:99}

/* ── Tabs (Snippets | Tasks) ───────────────────────────── */
.notes-tabs{flex-shrink:0;display:flex;gap:0;padding:0 1.4rem;border-bottom:1px solid var(--b1);background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 100%)}
.notes-tab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:.7rem .4rem;background:transparent;border:none;color:var(--dim);font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;position:relative;transition:color .18s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.notes-tab:hover{color:var(--tx3)}
.notes-tab[data-active]{color:var(--acc)}
.notes-tab[data-active]::after{content:'';position:absolute;bottom:-1px;left:1rem;right:1rem;height:2px;background:var(--acc);border-radius:1px 1px 0 0}
.notes-tab-icon{font-size:.95rem;line-height:1;display:inline-flex}
.notes-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.1rem;height:1.1rem;padding:0 .3rem;font-size:.62rem;font-weight:700;background:var(--acb);color:var(--acc);border-radius:6px;letter-spacing:0;text-transform:none;flex-shrink:0}
.notes-tab:not([data-active]) .notes-tab-count{background:rgba(110,130,160,.14);color:var(--dim)}

/* Each tab body is its own scroll container — preserves position per-tab.
   A short top mask softens the entry into the scroll area so content fades
   under the tab strip instead of slamming into it. An ambient radial wash
   on the upper third adds depth without competing with the content. */
.notes-tab-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem 1.4rem;scrollbar-width:thin;scrollbar-color:var(--b3) transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;position:relative;background:radial-gradient(ellipse 110% 40% at 50% 0%,rgba(131,221,212,.025),transparent 65%)}
.notes-tab-body::-webkit-scrollbar{width:5px}
.notes-tab-body::-webkit-scrollbar-track{background:transparent;margin:.5rem 0}
.notes-tab-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--b3),var(--b2));border-radius:3px;transition:background .15s}
.notes-tab-body:hover::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acbb),var(--b3))}
.notes-tab-body{display:none}
.notes-tab-body[data-active]{display:block}
/* When the notes blob is locked, hide the tab bar and the Tasks body so the
   single unlock UI is always rendered into the Snippets body. Prevents the
   duplicate-id case (lock UI rendered into both tabs) and ensures the unlock
   form is always the one the user actually clicks. */
/* Locked notes — Scratch remains fully usable; Snippets/Tasks tabs render
   the unlock prompt into their own bodies (so the user can pick which one
   to land on after unlocking). Tabs themselves stay visible so the user
   always sees Scratch is available. The lock-button and add-group footer
   action are hidden because they don't apply while locked. */
#notes-panel.locked #notes-lock-btn{display:none}
#notes-panel.locked #add-group-btn{visibility:hidden !important}
/* Visually mark the encrypted tabs as locked while the blob is sealed,
   so the user understands tapping them shows the unlock prompt. */
#notes-panel.locked .notes-tab[data-tab="snippets"] .notes-tab-icon,
#notes-panel.locked .notes-tab[data-tab="tasks"] .notes-tab-icon{display:none}
#notes-panel.locked .notes-tab[data-tab="snippets"]::before,
#notes-panel.locked .notes-tab[data-tab="tasks"]::before{
  content:'';display:inline-block;width:11px;height:11px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='11' width='16' height='10' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 8 0v4' stroke='black' stroke-width='2.5' fill='none'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='11' width='16' height='10' rx='2' fill='black'/><path d='M8 11V7a4 4 0 0 1 8 0v4' stroke='black' stroke-width='2.5' fill='none'/></svg>") center/contain no-repeat;
  opacity:.7;flex-shrink:0;
}

/* ── Tasks: list switcher pill row ─────────────────────── */
.tl-switcher{display:flex;flex-wrap:wrap;gap:.4rem;padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid var(--b1)}
.tl-pill{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;background:transparent;border:1px solid var(--b2);border-radius:18px;color:var(--tx3);font-family:var(--font);font-size:.74rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;letter-spacing:.01em}
.tl-pill:hover{border-color:var(--b3);color:var(--tx)}
.tl-pill[data-active]{border-color:var(--acbb);background:var(--acb);color:var(--acc);font-weight:600}
.tl-pill[data-special="today"]{font-weight:700}
.tl-pill[data-special="today"][data-active]{border-color:rgba(207,169,110,.32);background:rgba(207,169,110,.12);color:var(--gold)}
.tl-pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.1rem;height:1.1rem;padding:0 .3rem;font-size:.6rem;font-weight:700;background:rgba(255,255,255,.06);border-radius:6px;color:inherit;opacity:.85}
.tl-pill[data-active] .tl-pill-count{background:rgba(255,255,255,.1)}
.tl-pill-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;margin-right:.05rem}
.tl-pill[data-special="today"] .tl-pill-icon{color:var(--gold)}
.tl-today-bookings-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:var(--gold)}
.tl-add-pill{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;background:transparent;border:1px dashed var(--b2);border-radius:50%;color:var(--dim);cursor:pointer;font-size:1rem;line-height:1;transition:all .15s}
.tl-add-pill:hover{border-color:var(--acbb);border-style:solid;color:var(--acc)}
.tl-name-input{flex-shrink:0;padding:.4rem .75rem;background:var(--bg);border:1px solid var(--acbb);border-radius:18px;color:var(--tx);font-family:var(--font);font-size:.74rem;font-weight:500;outline:none;min-width:8rem;max-width:14rem}

/* ── Tasks: list header (name + actions) ───────────────── */
.tl-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem;min-height:1.5rem}
.tl-header-name{font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--tx);letter-spacing:.005em;flex:1;cursor:text;padding:.15rem 0;border-radius:4px}
.tl-header-name:hover{color:var(--acc)}
.tl-header-name-input{flex:1;font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--tx);background:transparent;border:none;border-bottom:1px solid var(--acbb);outline:none;padding:.15rem 0;letter-spacing:.005em}
.tl-header-actions{display:flex;gap:.3rem;align-items:center;opacity:.55;transition:opacity .15s}
.tl-header:hover .tl-header-actions{opacity:1}
.tl-header-btn{background:transparent;border:none;color:var(--dim);cursor:pointer;padding:.25rem;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.tl-header-btn:hover{color:var(--tx);background:var(--b1)}
.tl-header-btn.danger:hover{color:var(--red);background:var(--rdb)}

/* ── Tasks: add-task input ─────────────────────────────── */
.tl-add-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;padding:.55rem .7rem;background:rgba(255,255,255,.03);border:1px solid var(--b1);border-radius:8px;transition:border-color .15s}
.tl-add-row:focus-within{border-color:var(--acbb);background:rgba(131,221,212,.04)}
.tl-add-input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-family:var(--font);font-size:.86rem;line-height:1.4;padding:.1rem 0}
.tl-add-input::placeholder{color:var(--dim)}
.tl-add-btn{flex-shrink:0;background:transparent;border:none;cursor:pointer;font-family:var(--font);font-size:1rem;color:var(--dim);padding:.35rem .55rem;margin:-.2rem -.4rem -.2rem 0;border-radius:5px;line-height:1;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.tl-add-row:focus-within .tl-add-btn{color:var(--acc)}
.tl-add-btn:hover{background:rgba(131,221,212,.08)}
.tl-add-btn:active{background:rgba(131,221,212,.16);transition:none}

/* ── Tasks: item row ───────────────────────────────────── */
.tl-items{display:flex;flex-direction:column;gap:.18rem}
.tl-item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem;padding:.45rem .55rem;border-radius:6px;transition:background .12s}
.tl-item:hover{background:rgba(255,255,255,.025)}
.tl-item-cb{flex-shrink:0;appearance:none;-webkit-appearance:none;width:1.05rem;height:1.05rem;margin-top:.18rem;border:1.5px solid var(--b3);border-radius:4px;background:transparent;cursor:pointer;position:relative;transition:all .15s;flex-basis:1.05rem}
.tl-item-cb:hover{border-color:var(--acc)}
.tl-item-cb:checked{background:var(--acc);border-color:var(--acc)}
.tl-item-cb:checked::after{content:'';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(45deg);width:.28rem;height:.55rem;border-right:2px solid var(--bg);border-bottom:2px solid var(--bg);transition:opacity .15s}
/* Default text — single-line tasks look unchanged. white-space:pre-wrap surfaces
   newlines that users paste from notes, so multi-line tasks read naturally. */
.tl-item-text{flex:1;min-width:0;font-family:var(--font);font-size:.875rem;line-height:1.55;color:var(--tx);word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;padding:.1rem 0;min-height:1.25rem;outline:none;letter-spacing:.005em;position:relative;transition:color .15s}
/* Clampable variant — applied only when the text would visually overflow ~3
   lines. Clicking the text toggles [data-expanded]. The fade-mask makes the
   truncation feel intentional rather than abrupt. */
.tl-item-text[data-clampable]{cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.05rem;mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.35) 92%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.35) 92%,transparent 100%)}
.tl-item-text[data-clampable]:hover{color:var(--acl)}
.tl-item-text[data-clampable][data-expanded]{-webkit-line-clamp:unset;display:block;mask-image:none;-webkit-mask-image:none;padding-left:.7rem;border-left:2px solid var(--acbb);margin-left:-.7rem}
/* Tiny show-more / show-less affordance pinned to the meta row */
.tl-item-text-toggle{display:inline-flex;align-items:center;gap:.18rem;font-size:.58rem;font-weight:700;color:var(--acc);background:rgba(131,221,212,.07);border:1px solid var(--acbb);border-radius:999px;padding:.1rem .42rem;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s,transform .12s;-webkit-tap-highlight-color:transparent;user-select:none}
.tl-item-text-toggle:hover{background:rgba(131,221,212,.14);color:var(--acl)}
.tl-item-text-toggle:active{transform:scale(.94)}
.tl-item.done .tl-item-text{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(96,128,160,.6);transition:color .35s ease,text-decoration-color .35s ease}

/* Inline edit form — textarea replaces .tl-item-text when editing */
.tl-item-edit-form{display:none;flex:1 1 100%;min-width:0;gap:.55rem;align-items:stretch;flex-wrap:wrap}
.tl-item-edit-form[data-active]{display:flex}
.tl-item-edit-input{flex:1 1 100%;min-width:0;background:rgba(14,22,38,.8);border:1px solid var(--b2);border-radius:8px;color:var(--tx);padding:.55rem .65rem;font-size:.88rem;font-family:var(--font);line-height:1.5;resize:none;outline:none;min-height:4rem}
.tl-item-edit-input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(131,221,212,.12)}
.tl-item-edit-actions{display:flex;gap:.5rem;align-items:center}
.tl-item-edit-save{flex-shrink:0;background:var(--grn);border:none;color:#0f1a1f;cursor:pointer;padding:.4rem .9rem;border-radius:6px;font-size:.82rem;font-weight:700;transition:background .15s,transform .1s;line-height:1.2}
.tl-item-edit-save:hover{background:#6bc9b8;transform:translateY(-1px)}
.tl-item-edit-save:active{transform:translateY(0)}
.tl-item-edit-cancel{flex-shrink:0;background:transparent;border:1px solid var(--b3);color:var(--dim);cursor:pointer;padding:.4rem .75rem;border-radius:6px;font-size:.82rem;transition:color .15s,background .15s,border-color .15s;line-height:1.2}
.tl-item-edit-cancel:hover{color:var(--red);border-color:var(--red);background:var(--rdb)}
/* Item row highlight when editing */
.tl-item[data-editing] .tl-item-edit,
.tl-item[data-editing] .tl-item-due-btn,
.tl-item[data-editing] .tl-item-del{opacity:.4;pointer-events:none}
.tl-item.done{opacity:.78;transition:opacity .35s ease}
/* Today-view sections — quiet headers that don't compete with the items themselves. */
.tl-section{margin-bottom:1.1rem}
.tl-section + .tl-section{margin-top:.2rem}
.tl-section-head{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem;padding:.1rem 0 .35rem;border-bottom:1px solid var(--b1)}
.tl-section-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.1rem;height:1.1rem;padding:0 .32rem;font-size:.6rem;font-weight:700;background:rgba(255,255,255,.05);border-radius:6px;color:var(--tx3);letter-spacing:0}
.tl-section[data-kind="overdue"] .tl-section-head{color:var(--red)}
.tl-section[data-kind="overdue"] .tl-section-count{background:rgba(222,138,132,.12);color:var(--red)}
.tl-section[data-kind="today"] .tl-section-head{color:var(--gold)}
.tl-section[data-kind="today"] .tl-section-count{background:rgba(207,169,110,.14);color:var(--gold)}
.tl-section[data-kind="upcoming"] .tl-section-head{color:var(--acc)}
.tl-section[data-kind="upcoming"] .tl-section-count{background:rgba(131,221,212,.1);color:var(--acc)}
/* List-view progress hairline — subtle, sits just above the header. */
.tl-progress{height:2px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;margin:0 0 .65rem}
.tl-progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),rgba(131,221,212,.55));transition:width .4s cubic-bezier(.4,0,.2,1);border-radius:2px}
.tl-progress[data-empty]{display:none}
/* Row action buttons are ALWAYS visible — no hover-reveal. Hover/active just brightens the color. */
.tl-item-del{flex-shrink:0;background:transparent;border:none;color:var(--tx3);cursor:pointer;padding:.38rem .48rem;border-radius:4px;font-size:1rem;line-height:1;transition:color .15s,background .15s;align-self:flex-start;margin:-.05rem -.05rem -.05rem 0;-webkit-tap-highlight-color:transparent}
.tl-item-del:hover,.tl-item-del:active{color:var(--red);background:var(--rdb)}

/* Edit button — toggles contenteditable on the task text */
.tl-item-edit{flex-shrink:0;background:transparent;border:none;color:var(--tx3);cursor:pointer;padding:.38rem .45rem;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;align-self:flex-start;margin:-.05rem -.05rem -.05rem 0;-webkit-tap-highlight-color:transparent}
.tl-item-edit:hover,.tl-item-edit:active,.tl-item-edit[data-active]{color:var(--acc);background:rgba(131,221,212,.06)}

/* "From [list name]" badge in Today view */
.tl-item-source{font-size:.62rem;font-weight:600;color:var(--dim);background:rgba(255,255,255,.04);padding:.08rem .42rem;border-radius:4px;letter-spacing:.04em;text-transform:uppercase;margin-left:.4rem;white-space:nowrap}

/* ── Tasks: completed section ──────────────────────────── */
.tl-done-divider{margin:1.1rem 0 .4rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;color:var(--dim);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .15s}
.tl-done-divider:hover{color:var(--tx3)}
.tl-done-divider::before{content:'';flex:1;height:1px;background:var(--b1)}
.tl-done-divider::after{content:'';flex:1;height:1px;background:var(--b1)}
.tl-done-chev{display:inline-block;transition:transform .15s}
.tl-done-divider[data-collapsed] .tl-done-chev{transform:rotate(-90deg)}
.tl-done-clear{margin-top:.6rem;background:transparent;border:none;color:var(--dim);cursor:pointer;font-family:var(--font);font-size:.7rem;font-weight:500;letter-spacing:.04em;padding:.3rem .5rem;border-radius:4px;transition:color .15s,background .15s}
.tl-done-clear:hover{color:var(--red);background:var(--rdb)}

/* ── Tasks: empty / all-clear states ───────────────────── */
.tl-empty{padding:2rem 1rem;text-align:center;color:var(--dim);font-size:.82rem;line-height:1.5;font-style:italic}
.tl-allclear{padding:1.2rem .5rem;text-align:center;color:var(--acc);font-size:.78rem;font-weight:500;letter-spacing:.02em;opacity:.85}
.tl-allclear::before{content:'✓';display:block;font-size:1.5rem;margin-bottom:.3rem;opacity:.5}

/* ── Today view: bookings section ──────────────────────── */
.tl-today-bookings{margin-bottom:1.2rem;padding:.8rem .85rem;background:rgba(207,169,110,.06);border:1px solid rgba(207,169,110,.18);border-radius:8px}
.tl-today-bookings-head{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem}
.tl-booking{display:flex;align-items:flex-start;gap:.65rem;padding:.35rem 0;font-size:.82rem;color:var(--tx)}
.tl-booking + .tl-booking{border-top:1px solid rgba(207,169,110,.1)}
.tl-booking-time{flex-shrink:0;color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums;min-width:5rem;font-size:.78rem;padding-top:.05rem}
.tl-booking-info{flex:1;line-height:1.4;min-width:0}
.tl-booking-info strong{font-weight:600;color:var(--tx)}
.tl-booking-info .muted{color:var(--tx3);font-size:.74rem;display:block;margin-top:.1rem}
.tl-booking-dismiss{flex-shrink:0;background:transparent;border:none;color:transparent;cursor:pointer;font-size:1.05rem;line-height:1;padding:.05rem .35rem;border-radius:4px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;align-self:center}
.tl-booking:hover .tl-booking-dismiss{color:var(--dim)}
.tl-booking-dismiss:hover{color:var(--gold);background:rgba(207,169,110,.1)}

/* ── Today view: stats footer ──────────────────────────── */
.tl-today-stats{margin-top:1.5rem;padding-top:.9rem;border-top:1px dashed var(--b1);font-size:.72rem;color:var(--dim);text-align:center;letter-spacing:.02em}
/* Snippet card — type-colored left accent rail makes the four snippet
   kinds (text/code/link/secret) instantly identifiable without reading the
   pill. Each card also lifts slightly on hover. */
.snip-card{background:rgba(14,22,36,.7);border:1px solid var(--b2);border-radius:12px;padding:.75rem .85rem .75rem 1rem;margin-bottom:.6rem;transition:border-color .18s,transform .15s,box-shadow .18s,background .18s;position:relative;overflow:hidden;--snip-accent-rgb:var(--acc-rgb);--snip-accent:var(--acc)}
.snip-card::before{content:'';position:absolute;left:0;top:.55rem;bottom:.55rem;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(var(--snip-accent-rgb),.65),rgba(var(--snip-accent-rgb),.18));opacity:.85;transition:opacity .18s,width .18s}
.snip-card:hover{border-color:rgba(var(--snip-accent-rgb),.28);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.32)}
.snip-card:hover::before{opacity:1;width:3px}
.snip-card[data-type="text"]{--snip-accent-rgb:var(--acc-rgb);--snip-accent:var(--acc)}
.snip-card[data-type="code"]{--snip-accent-rgb:var(--violet-rgb);--snip-accent:var(--violet)}
.snip-card[data-type="link"]{--snip-accent-rgb:var(--sapph-rgb);--snip-accent:var(--sapph)}
.snip-card[data-type="secret"]{--snip-accent-rgb:var(--gold-rgb);--snip-accent:var(--gold)}
#snippets-list{position:relative}
.snip-peek-pop{position:absolute;background:linear-gradient(160deg,rgba(11,18,32,.99),rgba(7,12,22,.99));border:1px solid var(--acbb);border-radius:10px;padding:.65rem .9rem;font-family:var(--mono);font-size:.78rem;color:var(--tx);letter-spacing:.06em;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.65),0 0 0 1px rgba(131,221,212,.08);word-break:break-word;overflow-wrap:break-word;animation:peekIn .14s ease;cursor:pointer;box-sizing:border-box}
@keyframes peekIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.snip-lock-screen{padding:.75rem 0 .25rem;text-align:center}
.snip-lock-icon{margin-bottom:.5rem;opacity:.45;line-height:0;color:var(--tx2);display:flex;justify-content:center}
.snip-lock-label{font-size:.8rem;color:var(--tx3);font-weight:600;letter-spacing:.05em;margin-bottom:1.1rem;text-transform:uppercase}
.snip-unlock-input{width:100%;background:rgba(9,13,21,.65);border:1px solid var(--b1);border-radius:8px;color:var(--tx);font-family:var(--font);font-size:.85rem;padding:.58rem .8rem;outline:none;transition:border-color .15s;margin-bottom:.6rem;display:block}
.snip-unlock-input:focus{border-color:var(--acbb)}
.snip-card[data-pinned="1"]{border-color:rgba(207,169,110,.38);box-shadow:0 0 0 1px rgba(207,169,110,.1)}
.snip-header{display:flex;align-items:center;gap:.38rem;cursor:pointer;user-select:none}
.snip-hdr-right{display:flex;align-items:center;gap:.15rem;flex-shrink:0}
.snip-chevron{background:none;border:none;color:var(--dim);font-size:.68rem;cursor:pointer;padding:.1rem;flex-shrink:0;line-height:1;transition:transform .18s;margin-right:.05rem}
.snip-card[data-collapsed="1"] .snip-chevron{transform:rotate(-90deg)}
.snip-pin{background:none;border:none;color:var(--dim);font-size:.88rem;cursor:pointer;padding:.05rem .12rem;flex-shrink:0;line-height:1;transition:color .15s}
.snip-pin:hover{color:var(--gold)}
.snip-card[data-pinned="1"] .snip-pin{color:var(--gold)}
.snip-labels-wrap{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:.38rem;min-width:0;padding:.06rem 0}
.snip-lchip{font-size:.74rem;font-weight:600;padding:.18rem .44rem;border-radius:5px;border:1px solid var(--b2);color:var(--tx2);background:rgba(255,255,255,.04);letter-spacing:.02em;max-width:130px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;transition:color .13s,border-color .13s,opacity .13s;line-height:1.35;display:inline-flex;align-items:center;gap:.2rem;-webkit-tap-highlight-color:transparent}
.snip-lchip::-webkit-scrollbar{display:none}
.snip-lchip.lbl-link{color:var(--acc);border-color:var(--acbb);background:var(--acb);cursor:pointer}
.snip-lchip.lbl-link:active{opacity:.6;transition:none}
.snip-lchip.lbl-copy{cursor:copy}
.snip-lchip.lbl-copy:active{opacity:.6;transition:none}
.snip-lchip-rm{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.62rem;padding:0 .05rem;line-height:1;transition:color .13s;flex-shrink:0}
.snip-lchip-rm:hover{color:var(--red)}
.snip-lchip-empty{font-size:.75rem;color:var(--dim);font-style:italic;font-weight:400;line-height:1.4}
.snip-lchip-edit-wrap{background:rgba(255,255,255,.06);border-color:var(--acbb);padding:.1rem .28rem .1rem .4rem;cursor:default;overflow:visible;max-width:none}
.snip-lchip-edit{background:transparent;border:none;color:var(--tx);font-family:var(--font);font-size:.74rem;font-weight:600;outline:none;padding:0;letter-spacing:.02em;min-width:28px;max-width:140px}
.snip-ladd-row{margin-bottom:.5rem}
.snip-ladd-inner{display:flex;gap:.4rem;align-items:center}
.snip-ladd-input{flex:1;min-width:0;box-sizing:border-box;background:rgba(9,13,21,.5);border:1px solid var(--b1);border-radius:7px;color:var(--tx);font-family:var(--font);font-size:.77rem;font-weight:500;padding:.42rem .7rem;outline:none;transition:border-color .15s;letter-spacing:.02em}
.snip-ladd-input:focus{border-color:var(--acbb)}
.snip-ladd-input::placeholder{color:var(--dim);font-weight:400;font-style:italic}
.snip-ladd-btn{flex-shrink:0;background:var(--acb);border:1px solid var(--acbb);color:var(--acc);border-radius:7px;font-size:1rem;font-weight:700;line-height:1;padding:.36rem .72rem;cursor:pointer;transition:opacity .13s;font-family:var(--font)}
.snip-ladd-btn:active{opacity:.6;transition:none}
.snip-del{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.78rem;padding:.1rem .2rem;line-height:1;transition:color .15s;flex-shrink:0}
.snip-del:hover{color:var(--red)}
.snip-body-wrap{overflow:hidden}
.snip-card[data-collapsed="1"] .snip-body-wrap{display:none}
.snip-body-inner{padding-top:.58rem}
.snip-type-row{display:flex;gap:.28rem;margin-bottom:.5rem}
.snip-type-btn{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:.18rem .48rem;border-radius:5px;cursor:pointer;border:1px solid var(--b2);color:var(--dim);background:transparent;transition:all .13s;font-family:var(--font)}
.snip-type-btn:hover{border-color:var(--b3);color:var(--tx3)}
.snip-type-btn[data-on]{border-color:var(--acbb);color:var(--acc);background:var(--acb)}
.snip-textarea{width:100%;background:rgba(9,13,21,.65);border:1px solid var(--b1);border-radius:8px;color:var(--tx2);font-family:var(--mono);font-size:.77rem;padding:.55rem .7rem;resize:vertical;outline:none;transition:border-color .15s;line-height:1.65;min-height:58px}
.snip-textarea:focus{border-color:var(--acbb)}
.snip-textarea::placeholder{color:var(--dim);font-family:var(--font);font-size:.77rem}
.snip-secret-wrap{display:flex;align-items:center;gap:.4rem}
.snip-secret-input{flex:1;min-width:0;box-sizing:border-box;background:rgba(9,13,21,.65);border:1px solid var(--b1);border-radius:8px;color:var(--tx2);font-family:var(--mono);font-size:.77rem;padding:.52rem .7rem;outline:none;transition:border-color .15s;letter-spacing:.1em}
.snip-secret-input:focus{border-color:var(--acbb)}
.snip-secret-input::placeholder{letter-spacing:0;font-family:var(--font);color:var(--dim)}
.snip-reveal{flex-shrink:0;background:none;border:none;color:var(--dim);cursor:pointer;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font);transition:color .15s;white-space:nowrap;padding:.2rem .1rem}
.snip-reveal:hover{color:var(--acc)}
.snip-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;gap:.3rem}
.snip-move{padding:.22rem .46rem;font-size:.8rem;min-width:0;line-height:1}
.snip-copy,.snip-open{font-size:.72rem;padding:.28rem .62rem;letter-spacing:.03em}
.snip-open{text-decoration:none}
.snip-type-badge{font-size:.58rem;font-weight:800;letter-spacing:.06em;padding:.1rem .32rem;border-radius:4px;text-transform:uppercase;flex-shrink:0;font-family:var(--font);cursor:pointer;transition:opacity .15s,box-shadow .18s}
.snip-type-badge:hover{opacity:.85;box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.45),0 0 0 2px rgba(var(--acc-rgb),.1)}
/* Floating type-picker — appears anchored under the badge. Frosted dark surface
   with the same accent edge language used elsewhere. */
.snip-type-pop{position:fixed;z-index:10000;display:flex;gap:.22rem;padding:.32rem;background:rgba(8,12,20,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(var(--acc-rgb),.22);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4),0 0 24px rgba(var(--acc-rgb),.1);animation:typePopIn .12s ease-out}
@keyframes typePopIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.snip-type-pop-btn{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.32rem .55rem;border-radius:5px;cursor:pointer;border:1px solid var(--b2);color:var(--tx3);background:transparent;transition:all .13s;font-family:var(--font);white-space:nowrap}
.snip-type-pop-btn:hover{border-color:var(--acbb);color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.snip-type-pop-btn[data-on]{border-color:var(--acbb);color:var(--acc);background:rgba(var(--acc-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.3)}
/* Snippet type pills — anchored to the same accent tokens as the card rail
   so the badge and rail always read as the same color. */
.snip-type-badge[data-t="text"]{background:rgba(var(--acc-rgb),.12);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.18)}
/* Plain-mode text snippets — neutral gray badge to visually distinguish from
   the MD-rendered ones in the same list. */
.snip-type-badge[data-t="text"][data-mode="plain"]{background:rgba(160,170,190,.1);color:var(--tx3);box-shadow:inset 0 0 0 1px rgba(160,170,190,.18)}
/* Mode segmented control + capability hint, shown alongside the textarea in
   edit mode for text-type snippets. */
.snip-mode-row{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;flex-wrap:wrap}
.snip-mode-seg{display:inline-flex;background:rgba(255,255,255,.025);border:1px solid var(--b2);border-radius:6px;padding:2px;gap:2px}
.snip-mode-btn{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;padding:.18rem .5rem;border-radius:4px;cursor:pointer;border:none;background:transparent;color:var(--dim);transition:all .15s;font-family:var(--font)}
.snip-mode-btn:hover{color:var(--tx3)}
.snip-mode-btn[data-on]{background:rgba(var(--acc-rgb),.18);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.25)}
.snip-mode-hint{font-size:.65rem;color:var(--dim);letter-spacing:.02em;font-style:italic}
.snip-plain-view{white-space:pre-wrap;word-break:break-word;line-height:1.55;color:var(--tx2);font-size:.86rem}
/* Inline MD preview inside collapsed cards. Mirrors the .sv-body[data-md="1"]
   rules in the expanded modal, scaled down for the cramped card surface and
   with explicit overrides for the .snip-view container's mono/pre-wrap so
   paragraphs flow normally instead of inheriting code-style formatting. */
.snip-md-view{font-family:var(--font);white-space:normal;line-height:1.6;color:var(--tx2);font-size:.82rem;word-break:normal;overflow-wrap:anywhere}
.snip-md-view>:first-child{margin-top:0}
.snip-md-view>:last-child{margin-bottom:0}
.snip-md-view p{margin:.45em 0}
.snip-md-view h1,.snip-md-view h2,.snip-md-view h3,.snip-md-view h4,.snip-md-view h5,.snip-md-view h6{color:var(--tx);font-weight:600;margin:.8em 0 .35em;line-height:1.3;font-family:var(--font)}
.snip-md-view h1{font-size:1.15em;border-bottom:1px solid var(--b2);padding-bottom:.18em}
.snip-md-view h2{font-size:1.06em;border-bottom:1px solid var(--b1);padding-bottom:.15em}
.snip-md-view h3{font-size:1em}
.snip-md-view h4{font-size:.96em}
.snip-md-view h5,.snip-md-view h6{font-size:.92em;color:var(--tx2)}
.snip-md-view ul,.snip-md-view ol{margin:.38em 0;padding-left:1.5em}
.snip-md-view ul{list-style-type:disc}
.snip-md-view ul ul{list-style-type:circle}
.snip-md-view ul ul ul{list-style-type:square}
.snip-md-view ol{list-style-type:decimal}
.snip-md-view ol ol{list-style-type:lower-alpha}
.snip-md-view ol ol ol{list-style-type:lower-roman}
.snip-md-view li{margin:.18em 0}
.snip-md-view li>ul,.snip-md-view li>ol{margin-top:.12em;margin-bottom:.12em}
.snip-md-view li>p{margin:.18em 0}
.snip-md-view blockquote{margin:.45em 0;padding:.3em .7em;border-left:3px solid var(--b3);color:var(--tx3);background:rgba(255,255,255,.02);border-radius:0 5px 5px 0}
.snip-md-view hr{border:none;border-top:1px solid var(--b2);margin:.85em 0}
.snip-md-view code{font-family:var(--mono);background:rgba(255,255,255,.06);color:var(--gold);padding:.08em .3em;border-radius:4px;font-size:.86em}
.snip-md-view pre{background:rgba(0,0,0,.32);border:1px solid var(--b1);border-radius:7px;padding:.55em .75em;margin:.5em 0;overflow-x:auto;font-size:.78em;line-height:1.5;scrollbar-width:thin;scrollbar-color:var(--b3) transparent;white-space:pre}
.snip-md-view pre::-webkit-scrollbar{height:4px}
.snip-md-view pre::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.snip-md-view pre code{background:none;color:var(--tx);padding:0;border-radius:0;font-size:1em;white-space:pre;word-break:normal;overflow-wrap:normal}
.snip-md-view a{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(132,201,193,.4)}
.snip-md-view a:hover{text-decoration-color:var(--acc)}
.snip-md-view strong{color:var(--tx);font-weight:700}
.snip-md-view em{font-style:italic}
.snip-md-view table{border-collapse:collapse;margin:.55em 0;width:100%;font-size:.82em;display:block;overflow-x:auto;scrollbar-width:thin}
.snip-md-view th,.snip-md-view td{border:1px solid var(--b1);padding:.3em .5em;text-align:left;vertical-align:top;word-break:normal;overflow-wrap:break-word}
.snip-md-view th{background:rgba(255,255,255,.04);font-weight:600;color:var(--tx)}
.snip-md-view tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.snip-md-view .task-list{margin:.4em 0}
.snip-md-view .task-item{font-size:1em;margin:.15em 0}
.snip-md-view .admonition{margin:.55em 0;padding:.45em .75em;font-size:.96em}
/* When the inline view contains rendered markdown, relax the tight 5.4rem cap
   and drop the mono/pre-wrap container styles so complex MDs (headings, code,
   tables) have room to breathe — still scrollable for very long content. */
.snip-view:has(.snip-md-view){font-family:var(--font);white-space:normal;line-height:1.6;max-height:16rem;padding:.55rem .75rem}
.snip-type-badge[data-t="link"]{background:rgba(var(--sapph-rgb),.14);color:var(--sapph);box-shadow:inset 0 0 0 1px rgba(var(--sapph-rgb),.2)}
.snip-type-badge[data-t="secret"]{background:rgba(var(--gold-rgb),.14);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.22)}
.snip-type-badge[data-t="code"]{background:rgba(var(--violet-rgb),.14);color:var(--violet);box-shadow:inset 0 0 0 1px rgba(var(--violet-rgb),.22)}
/* Code snippet inline preview (collapsed card view) */
.snip-code-view{
  font-family:'Space Mono',ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:.74rem;line-height:1.5;
  white-space:pre;overflow:auto;
  margin:0;padding:.5rem .65rem;
  background:rgba(0,0,0,.18);
  border:1px solid var(--b1);border-radius:6px;
  color:var(--tx);
  max-height:18rem;
  -webkit-overflow-scrolling:touch;
}
/* Code snippet in the full-screen viewer */
.sv-code{
  font-family:'Space Mono',ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:.85rem;line-height:1.55;
  white-space:pre;overflow:auto;
  margin:0;padding:.85rem 1rem;
  background:rgba(0,0,0,.22);
  border:1px solid var(--b1);border-radius:8px;
  color:var(--tx);
  -webkit-overflow-scrolling:touch;
}
/* When editing a code snippet, the textarea uses monospace + tab-friendly settings. */
.snip-textarea[data-t="code"]{
  font-family:'Space Mono',ui-monospace,Menlo,Monaco,Consolas,monospace;
  font-size:.78rem;line-height:1.5;
  white-space:pre;
  tab-size:2;-moz-tab-size:2;
}
.snip-hdr-copy{background:none;border:none;color:var(--dim);cursor:pointer;padding:.1rem .22rem;line-height:1;transition:color .15s;flex-shrink:0;display:flex;align-items:center}
.snip-hdr-copy:hover{color:var(--acc)}
.snip-hdr-action{background:none;border:none;color:var(--dim);cursor:pointer;padding:.1rem .22rem;line-height:1;transition:color .15s;flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.snip-hdr-action:hover{color:var(--acc)}
#snip-viewer{position:fixed;inset:0;background:rgba(3,5,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;z-index:9200;padding:1.2rem}
#snip-viewer.show{display:flex}
.sv-card{background:linear-gradient(160deg,rgba(11,17,30,.99),rgba(7,11,20,.99));border:1px solid var(--b2);border-radius:18px;width:100%;max-width:600px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04)}
.sv-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;border-bottom:1px solid var(--b1)}
.sv-label{font-size:.88rem;font-weight:700;color:var(--tx);letter-spacing:.03em}
.sv-type{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;padding:.1rem .32rem;border-radius:4px;margin-left:.5rem}
.sv-type[data-t="text"]{background:rgba(var(--acc-rgb),.12);color:var(--acc)}
.sv-type[data-t="link"]{background:rgba(var(--sapph-rgb),.14);color:var(--sapph)}
.sv-type[data-t="secret"]{background:rgba(var(--gold-rgb),.14);color:var(--gold)}
.sv-type[data-t="code"]{background:rgba(var(--violet-rgb),.14);color:var(--violet)}
.sv-body{flex:1;overflow-y:auto;padding:1.3rem 1.4rem;font-size:.88rem;line-height:1.85;color:var(--tx2);font-family:var(--mono);white-space:pre-wrap;word-break:break-word;scrollbar-width:thin;scrollbar-color:var(--b3) transparent}
.sv-body::-webkit-scrollbar{width:4px}
.sv-body::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.sv-body[data-md="1"]{font-family:var(--font);white-space:normal;line-height:1.7}
/*
  Hide rendered markdown until MathJax has finished typesetting (or until
  there's nothing to typeset, in which case the data-typeset attribute is
  set immediately). This kills the "raw $$...$$ flashes before render" FOUC.
*/
.sv-body[data-md="1"]:not([data-typeset]){visibility:hidden}
.sv-body[data-md="1"] p{margin:.6em 0}
.sv-body[data-md="1"] h1,.sv-body[data-md="1"] h2,.sv-body[data-md="1"] h3,.sv-body[data-md="1"] h4,.sv-body[data-md="1"] h5,.sv-body[data-md="1"] h6{color:var(--tx);font-weight:600;margin:1.1em 0 .5em;line-height:1.3}
.sv-body[data-md="1"] h1{font-size:1.45em;border-bottom:1px solid var(--b2);padding-bottom:.3em}
.sv-body[data-md="1"] h2{font-size:1.25em;border-bottom:1px solid var(--b1);padding-bottom:.25em}
.sv-body[data-md="1"] h3{font-size:1.1em}
.sv-body[data-md="1"] h4{font-size:1em}
.sv-body[data-md="1"] h5,.sv-body[data-md="1"] h6{font-size:.92em;color:var(--tx2)}
.sv-body[data-md="1"] ul,.sv-body[data-md="1"] ol{margin:.5em 0;padding-left:1.7em}
.sv-body[data-md="1"] ul{list-style-type:disc}
.sv-body[data-md="1"] ul ul{list-style-type:circle}
.sv-body[data-md="1"] ul ul ul{list-style-type:square}
.sv-body[data-md="1"] ol{list-style-type:decimal}
.sv-body[data-md="1"] ol ol{list-style-type:lower-alpha}
.sv-body[data-md="1"] ol ol ol{list-style-type:lower-roman}
.sv-body[data-md="1"] li{margin:.25em 0}
.sv-body[data-md="1"] li>ul,.sv-body[data-md="1"] li>ol{margin-top:.15em;margin-bottom:.15em}
.sv-body[data-md="1"] blockquote{margin:.6em 0;padding:.4em .9em;border-left:3px solid var(--b3);color:var(--tx3);background:rgba(255,255,255,.02);border-radius:0 6px 6px 0}
.sv-body[data-md="1"] hr{border:none;border-top:1px solid var(--b2);margin:1.2em 0}
.sv-body[data-md="1"] code{font-family:var(--mono);background:rgba(255,255,255,.06);color:var(--gold);padding:.12em .35em;border-radius:4px;font-size:.86em}
.sv-body[data-md="1"] pre{background:rgba(0,0,0,.35);border:1px solid var(--b1);border-radius:8px;padding:.7em .9em;margin:.7em 0;overflow-x:auto;font-size:.82em;line-height:1.55;scrollbar-width:thin;scrollbar-color:var(--b3) transparent}
.sv-body[data-md="1"] pre::-webkit-scrollbar{height:5px}
.sv-body[data-md="1"] pre::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.sv-body[data-md="1"] pre code{background:none;color:var(--tx);padding:0;border-radius:0;font-size:1em;white-space:pre;word-break:normal;overflow-wrap:normal}
.sv-body[data-md="1"] a{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(132,201,193,.4)}
.sv-body[data-md="1"] a:hover{text-decoration-color:var(--acc)}
.sv-body[data-md="1"] strong{color:var(--tx);font-weight:700}
.sv-body[data-md="1"] em{font-style:italic}
.sv-body[data-md="1"] table{border-collapse:collapse;margin:.7em 0;width:100%;font-size:.85em}
.sv-body[data-md="1"] th,.sv-body[data-md="1"] td{border:1px solid var(--b1);padding:.4em .6em;text-align:left;vertical-align:top;word-break:normal;overflow-wrap:break-word}
.sv-body[data-md="1"] th{background:rgba(255,255,255,.04);font-weight:600;color:var(--tx)}
.sv-body[data-md="1"] tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.sv-foot{flex-shrink:0;padding:.85rem 1.4rem;border-top:1px solid var(--b1);display:flex;justify-content:flex-end}
/* Age pill — small clock-iconed badge. Stale tasks (>7d) glow gold so the
   reader feels the weight of an old open item, without screaming about it. */
.tl-item-time{display:inline-flex;align-items:center;gap:.28rem;font-size:.58rem;color:var(--dim);font-family:var(--font);font-weight:600;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:.05em;padding:.12rem .48rem .12rem .38rem;border-radius:999px;background:rgba(255,255,255,.028);border:1px solid var(--b1);transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.tl-item-time svg{opacity:.65;flex-shrink:0}
.tl-item-time:hover{color:var(--tx3);border-color:var(--b2)}
.tl-item-time[data-stale]{color:var(--gold);font-weight:700;border-color:rgba(207,169,110,.32);background:linear-gradient(135deg,rgba(207,169,110,.14),rgba(207,169,110,.04));box-shadow:0 0 0 1px rgba(207,169,110,.06),0 2px 10px rgba(207,169,110,.08)}
.tl-item-time[data-stale] svg{opacity:.95}
/* Meta row — sits below the task text on its own wrapping line. */
.tl-item-meta{width:100%;display:flex;align-items:center;gap:.42rem;flex-wrap:wrap;margin-top:.22rem;padding-left:.05rem}
/* Due-date chip — every state carries a colored leading dot so the pill is
   glanceable even before the text registers. Overdue gets a quiet pulse. */
.tl-item-due{display:inline-flex;align-items:center;gap:.32rem;font-size:.6rem;font-family:var(--font);font-weight:600;letter-spacing:.025em;padding:.16rem .5rem .16rem .42rem;border-radius:999px;border:1px solid var(--b2);color:var(--tx3);background:rgba(255,255,255,.03);white-space:normal;word-break:break-word;line-height:1.32;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.tl-item-due::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.7;box-shadow:0 0 6px currentColor;flex-shrink:0}
.tl-item-due[data-state="today"]{color:var(--gold);border-color:rgba(207,169,110,.42);background:linear-gradient(135deg,rgba(207,169,110,.18),rgba(207,169,110,.05));box-shadow:0 0 0 1px rgba(207,169,110,.08),0 1px 10px rgba(207,169,110,.12)}
.tl-item-due[data-state="overdue"]{color:var(--red);border-color:rgba(222,138,132,.45);background:linear-gradient(135deg,rgba(222,138,132,.18),rgba(222,138,132,.05));box-shadow:0 0 0 1px rgba(222,138,132,.08),0 1px 12px rgba(222,138,132,.15)}
.tl-item-due[data-state="overdue"]::before{animation:tl-due-dot-pulse 1.9s ease-in-out infinite}
@keyframes tl-due-dot-pulse{0%,100%{opacity:.55;box-shadow:0 0 4px currentColor}50%{opacity:1;box-shadow:0 0 11px currentColor}}
.tl-item-due[data-state="soon"]{color:var(--acc);border-color:rgba(131,221,212,.32);background:linear-gradient(135deg,rgba(131,221,212,.13),rgba(131,221,212,.04));box-shadow:0 0 0 1px rgba(131,221,212,.06)}
.tl-item-due[data-state="later"]{color:#9bb8d7;border-color:rgba(155,184,215,.26);background:linear-gradient(135deg,rgba(155,184,215,.08),rgba(155,184,215,.025))}
.tl-due-repeat{opacity:.95;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.05rem;filter:drop-shadow(0 0 4px currentColor)}
/* Clock button to open due/recurrence editor — appears next to delete. */
/* Reminder button is ALWAYS visible — no hover-reveal. Hover/active/data-active just brightens it. */
.tl-item-due-btn{flex-shrink:0;background:transparent;border:none;color:var(--tx3);cursor:pointer;padding:.38rem .45rem;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s;align-self:flex-start;margin:-.05rem -.05rem -.05rem 0;-webkit-tap-highlight-color:transparent}
.tl-item-due-btn:hover,.tl-item-due-btn:active,.tl-item-due-btn[data-active]{color:var(--acc);background:rgba(131,221,212,.06)}
/* Due / recurrence editor — always rendered as a bottom-anchored sheet (desktop AND mobile),
   appended to <body> as a true modal so it can't be clipped by any panel overflow. The ONLY
   close paths are the × button (or Escape / Save / Cancel). No outside-click closure. */
#tasks-content{position:relative}
.tl-due-pop{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:9301;width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow-y:auto;background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(131,221,212,.05),transparent 70%),linear-gradient(160deg,rgba(11,18,32,.99),rgba(7,12,22,.99));border:1px solid var(--acbb);border-bottom:none;border-radius:20px 20px 0 0;box-shadow:0 -24px 64px rgba(0,0,0,.75),0 0 0 1px rgba(131,221,212,.05),inset 0 1px 0 rgba(255,255,255,.04);padding:.85rem 1.1rem;padding-bottom:max(1.2rem,env(safe-area-inset-bottom));animation:tl-due-sheet-up .24s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.65rem;scrollbar-width:thin;scrollbar-color:var(--b3) transparent;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.tl-due-pop::-webkit-scrollbar{width:4px}
.tl-due-pop::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
/* Thin accent line across the very top, fading at the edges. Pinned absolutely
   so it sits at the rounded top regardless of scroll. */
.tl-due-pop::before{content:'';position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:linear-gradient(90deg,transparent,rgba(131,221,212,.45) 30%,rgba(131,221,212,.45) 70%,transparent);pointer-events:none;z-index:4}
/* Head block — two-line title + help wand. */
.tl-due-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.65rem;padding:.1rem 0 .35rem;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:.15rem}
.tl-due-pop-head-text{display:flex;flex-direction:column;line-height:1;gap:.18rem;flex:1;min-width:0}
.tl-due-pop-title{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:.04em;color:var(--tx);background:linear-gradient(120deg,var(--tx) 35%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tl-due-pop-sub{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* Trigger button — sparkle glyph signals "smart natural-language parsing".
   On hover the wand glows; on open the button stays lit. */
.tl-due-help{background:linear-gradient(140deg,rgba(131,221,212,.08),rgba(131,221,212,.02));border:1px solid var(--acbb);border-radius:50%;width:22px;height:22px;color:var(--acc);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:color .18s,border-color .18s,background .18s,box-shadow .18s,transform .12s;line-height:1;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.tl-due-help svg{width:13px;height:13px;filter:drop-shadow(0 0 4px rgba(131,221,212,.6))}
.tl-due-help:hover{color:var(--acl);background:linear-gradient(140deg,rgba(131,221,212,.22),rgba(131,221,212,.05));box-shadow:0 0 0 3px rgba(131,221,212,.07),0 0 14px rgba(131,221,212,.22)}
.tl-due-help:active{transform:scale(.92)}
.tl-due-help[data-active]{color:var(--acl);background:rgba(131,221,212,.18);box-shadow:0 0 0 3px rgba(131,221,212,.1),0 0 18px rgba(131,221,212,.3)}
/* ── Help panel — categorized samples, copy-to-input, ambient gradient ── */
.tl-due-help-backdrop{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(131,221,212,.06),transparent 55%),rgba(3,5,9,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:99998;display:flex;align-items:center;justify-content:center;animation:tl-help-fade .18s ease}
@keyframes tl-help-fade{from{opacity:0}to{opacity:1}}
@keyframes tl-help-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.tl-due-help-panel{background:linear-gradient(160deg,rgba(15,22,38,.985),rgba(8,12,22,.99));border:1px solid var(--b2);border-radius:18px;padding:1.5rem 1.6rem 1.4rem;max-width:560px;width:calc(100% - 2rem);max-height:82vh;overflow-y:auto;box-shadow:0 32px 100px rgba(0,0,0,.78),0 0 0 1px rgba(131,221,212,.05),inset 0 1px 0 rgba(255,255,255,.04);position:relative;animation:tl-help-rise .22s cubic-bezier(.4,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--b3) transparent}
.tl-due-help-panel::-webkit-scrollbar{width:4px}
.tl-due-help-panel::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
/* Ambient glow framing the header */
.tl-due-help-panel::before{content:'';position:absolute;top:-2px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(131,221,212,.4),transparent);pointer-events:none}
.tl-due-help-header{margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--b1)}
.tl-due-help-title-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.4rem}
.tl-due-help-icon{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:8px;background:linear-gradient(140deg,rgba(131,221,212,.18),rgba(131,221,212,.05));border:1px solid var(--acbb);color:var(--acc);flex-shrink:0;box-shadow:inset 0 0 12px rgba(131,221,212,.1)}
.tl-due-help-icon svg{width:14px;height:14px;filter:drop-shadow(0 0 4px rgba(131,221,212,.55))}
.tl-due-help-header h4{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--tx);margin:0;letter-spacing:.04em;background:linear-gradient(120deg,var(--tx) 30%,var(--acc));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tl-due-help-header .sub{font-size:.74rem;color:var(--tx3);margin:0;line-height:1.55}
.tl-due-help-hint{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:.62rem;color:var(--acc);background:rgba(131,221,212,.07);border:1px solid var(--acbb);border-radius:999px;padding:.18rem .55rem;letter-spacing:.04em;font-weight:600}
.tl-due-help-hint svg{width:10px;height:10px}
.tl-due-help-section{margin-bottom:1.05rem;position:relative;padding-left:.6rem}
.tl-due-help-section:last-child{margin-bottom:0}
.tl-due-help-section::before{content:'';position:absolute;left:0;top:.55rem;bottom:0;width:2px;border-radius:2px;background:var(--cat,var(--b2));opacity:.65}
.tl-due-help-cat-label{display:flex;align-items:center;gap:.4rem;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--cat,var(--dim));margin-bottom:.45rem}
.tl-due-help-cat-dot{width:.4rem;height:.4rem;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;opacity:.85}
.tl-due-help-section[data-cat="dates"]{--cat:#83ddd4}
.tl-due-help-section[data-cat="time"]{--cat:#cfa96e}
.tl-due-help-section[data-cat="recurring"]{--cat:#b59be8}
.tl-due-help-section[data-cat="recurring-time"]{--cat:#9bb8d7}
.tl-due-help-section[data-cat="weekday"]{--cat:#76c490}
.tl-due-help-section[data-cat="monthly"]{--cat:#e3a584}
.tl-due-help-section[data-cat="duration"]{--cat:#83b8dd}
.tl-due-help-chip-row{display:flex;flex-wrap:wrap;gap:.32rem}
.tl-due-help-chip{font-family:var(--mono);font-size:.68rem;background:rgba(14,22,36,.65);border:1px solid var(--b1);border-radius:7px;padding:.32rem .58rem;color:var(--tx2);white-space:nowrap;user-select:none;cursor:pointer;transition:border-color .14s,background .14s,color .14s,transform .12s,box-shadow .15s;letter-spacing:.01em}
.tl-due-help-chip:hover{border-color:var(--cat,var(--acc));color:var(--cat,var(--acc));background:rgba(255,255,255,.045);box-shadow:0 1px 8px rgba(0,0,0,.3)}
.tl-due-help-chip:active{transform:scale(.95)}
.tl-due-help-chip[data-copied]{border-color:var(--grn);color:var(--grn);background:rgba(118,196,144,.14);box-shadow:0 0 0 1px rgba(118,196,144,.2),0 0 12px rgba(118,196,144,.2);transform:scale(.97)}
.tl-due-help-chip[data-copied]::after{content:'✓ inserted';font-family:var(--font);font-size:.58rem;font-weight:700;margin-left:.35rem;letter-spacing:.06em;text-transform:uppercase}
.tl-due-help-close{position:absolute;top:.7rem;right:.85rem;background:rgba(255,255,255,.04);border:1px solid var(--b2);color:var(--tx3);font-size:.92rem;cursor:pointer;padding:0;width:26px;height:26px;line-height:1;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s,transform .12s}
.tl-due-help-close:hover{color:var(--tx);border-color:var(--b3);background:rgba(255,255,255,.08)}
.tl-due-help-close:active{transform:scale(.92)}
/* Natural-language input + live preview chip. */
/* NL input — slightly inset, refined focus glow that matches the sparkle wand. */
.tl-due-input{box-sizing:border-box;width:100%;background:rgba(9,13,21,.78);border:1px solid var(--b1);border-radius:10px;color:var(--tx);font-family:var(--font);font-size:.86rem;padding:.62rem .85rem;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(0,0,0,.25)}
.tl-due-input::placeholder{color:var(--dim);font-weight:400;font-style:italic;opacity:.75}
.tl-due-input:hover{border-color:var(--b2)}
.tl-due-input:focus{border-color:var(--acbb);background:rgba(9,13,21,.92);box-shadow:0 0 0 3px rgba(131,221,212,.1),inset 0 1px 0 rgba(0,0,0,.25)}
/* Preview chip — a "result tile" that confirms what the parser understood. */
.tl-due-preview{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;color:var(--acc);min-height:1.6rem;letter-spacing:.01em;padding:.18rem .55rem .18rem .42rem;border-radius:8px;border:1px solid transparent;background:transparent;transition:color .18s,opacity .18s,background .18s,border-color .18s}
.tl-due-preview:not([data-empty]):not([data-typing]):not([data-error]):not([data-warn]){background:rgba(131,221,212,.06);border-color:rgba(131,221,212,.16)}
.tl-due-preview-icon{display:inline-flex;flex-shrink:0;color:var(--acc)}
.tl-due-preview[data-empty]{color:var(--dim);font-weight:400;font-style:italic;opacity:.5}
.tl-due-preview[data-typing]{color:var(--dim);font-weight:500;font-style:italic;opacity:.7}
.tl-due-preview[data-typing] .tl-due-preview-icon{color:var(--dim);animation:tl-due-pulse 1.1s ease-in-out infinite}
.tl-due-preview[data-error]{color:var(--tx3);opacity:.8}
.tl-due-preview[data-error] .tl-due-preview-icon{color:var(--tx3);opacity:.7}
.tl-due-preview[data-warn]{color:var(--gold);opacity:.95}
.tl-due-preview[data-warn] .tl-due-preview-icon{color:var(--gold)}
@keyframes tl-due-pulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
/* Quick-pick chips for date and recurrence — taps update state, do not auto-commit. */
.tl-due-presets{display:flex;gap:.3rem;flex-wrap:wrap}
.tl-due-preset{flex:1 0 calc(50% - .2rem);min-width:0;background:transparent;border:1px solid var(--b1);border-radius:7px;color:var(--tx3);font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.02em;padding:.45rem .35rem;cursor:pointer;transition:all .14s;text-align:center;-webkit-tap-highlight-color:transparent}
.tl-due-preset:hover{border-color:var(--acbb);color:var(--acc);background:var(--acb)}
.tl-due-preset:active{transform:scale(.97);transition:none}
.tl-due-preset[data-selected]{border-color:var(--acbb);background:var(--acb);color:var(--acc)}
/* Section label with a colored leading dot — shared visual vocabulary with
   the help panel categories. The dot inherits its color from the section. */
.tl-due-section-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:.15rem}
.tl-due-section-label::before{content:'';width:.34rem;height:.34rem;border-radius:50%;background:var(--acc);box-shadow:0 0 6px rgba(131,221,212,.6);opacity:.7}
.tl-due-freq{display:flex;gap:.25rem;flex-wrap:wrap}
.tl-due-freq-btn{flex:1 0 calc(33% - .2rem);background:transparent;border:1px solid var(--b1);border-radius:6px;color:var(--tx3);font-family:var(--font);font-size:.66rem;font-weight:600;letter-spacing:.02em;padding:.42rem .25rem;cursor:pointer;transition:all .14s;text-align:center;-webkit-tap-highlight-color:transparent}
.tl-due-freq-btn:hover{border-color:var(--b3);color:var(--tx2)}
.tl-due-freq-btn[data-active]{border-color:var(--acbb);background:var(--acb);color:var(--acc)}
/* Inline rule detail under freq chips — surfaces interval/byWeekday/until that chips can't show. */
.tl-due-rec-detail{font-size:.66rem;font-weight:600;color:var(--acc);letter-spacing:.02em;padding:.05rem .1rem;line-height:1.3;font-style:italic;opacity:.85}
.tl-due-rec-detail[data-hidden]{display:none}
/* Custom expand toggle — collapsed by default since most cases use NL or chips. */
.tl-due-expand-btn{background:transparent;border:none;color:var(--tx3);cursor:pointer;font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:.3rem .15rem;display:inline-flex;align-items:center;gap:.4rem;transition:color .15s;align-self:flex-start;-webkit-tap-highlight-color:transparent;margin-top:.05rem}
.tl-due-expand-btn:hover{color:var(--acc)}
.tl-due-expand-chev{display:inline-block;transition:transform .15s;font-size:.7rem;line-height:1;opacity:.6}
.tl-due-expand-btn[data-expanded] .tl-due-expand-chev{transform:rotate(180deg)}
.tl-due-expand-section{display:none;flex-direction:column;gap:.45rem;padding-top:.1rem}
.tl-due-expand-section[data-show]{display:flex}
/* Horizontal scrollable strips with snap. */
.tl-strip-wrap{position:relative;margin:0 -.15rem}
.tl-strip{display:flex;gap:.3rem;overflow-x:auto;padding:.2rem .15rem .35rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.tl-strip::-webkit-scrollbar{display:none}
/* Day strip cell — DOW above number, today is gold, selected is cyan. */
.tl-day-cell{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:50px;padding:.3rem 0;background:transparent;border:1px solid var(--b1);border-radius:9px;cursor:pointer;transition:all .14s;color:var(--tx2);font-family:var(--font);-webkit-tap-highlight-color:transparent}
.tl-day-cell:hover{border-color:var(--b3);color:var(--tx)}
.tl-day-cell-dow{font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1;margin-bottom:.22rem;transition:color .14s}
.tl-day-cell-num{font-size:.95rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.tl-day-cell[data-today]{color:var(--gold);border-color:rgba(207,169,110,.22)}
.tl-day-cell[data-today] .tl-day-cell-dow{color:var(--gold)}
.tl-day-cell[data-selected]{background:var(--acb);border-color:var(--acbb);color:var(--acc);box-shadow:0 0 0 1px rgba(131,221,212,.18)}
.tl-day-cell[data-selected] .tl-day-cell-dow{color:var(--acc)}
/* Future occurrences of a recurring rule — softer ring than the active selection. */
.tl-day-cell[data-recurring]{border-color:rgba(131,221,212,.35);color:var(--acc);opacity:.78}
.tl-day-cell[data-recurring] .tl-day-cell-dow{color:var(--acc);opacity:.85}
.tl-day-cell[data-selected][data-today]{background:rgba(207,169,110,.14);border-color:rgba(207,169,110,.42);color:var(--gold);box-shadow:0 0 0 1px rgba(207,169,110,.25)}
.tl-day-cell[data-selected][data-today] .tl-day-cell-dow{color:var(--gold)}
/* Time-row layout with quick chips and an inline "Clear time" link. */
.tl-due-section-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.15rem}
.tl-time-quick{display:flex;gap:.25rem;flex-wrap:wrap}
.tl-time-quick-btn{flex:1;min-width:0;background:transparent;border:1px solid var(--b1);border-radius:6px;color:var(--tx3);font-family:var(--font);font-size:.66rem;font-weight:600;letter-spacing:.02em;padding:.4rem .25rem;cursor:pointer;transition:all .14s;text-align:center;-webkit-tap-highlight-color:transparent}
.tl-time-quick-btn:hover{border-color:var(--acbb);color:var(--acc);background:var(--acb)}
.tl-time-quick-btn[data-selected]{border-color:var(--acbb);background:var(--acb);color:var(--acc)}
.tl-multi-times{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.4rem}
.tl-multi-times[data-hidden]{display:none}
.tl-multi-time-chip{display:inline-flex;align-items:center;gap:.28rem;font-family:var(--font);font-size:.65rem;font-weight:600;letter-spacing:.02em;color:var(--acc);background:rgba(131,221,212,.08);border:1px solid rgba(131,221,212,.22);border-radius:7px;padding:.22rem .38rem .22rem .52rem;font-variant-numeric:tabular-nums;cursor:default;transition:background .12s,border-color .12s}
.tl-multi-time-chip:hover{border-color:rgba(131,221,212,.35)}
.tl-multi-time-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin:0;background:transparent;border:none;color:var(--acc);cursor:pointer;border-radius:50%;font-size:.85rem;line-height:1;transition:background .12s;flex-shrink:0;opacity:.7}
.tl-multi-time-remove:hover{background:rgba(131,221,212,.18);opacity:1}
.tl-time-cell{flex:0 0 auto;scroll-snap-align:center;display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:32px;padding:0 .55rem;background:transparent;border:1px solid var(--b1);border-radius:7px;cursor:pointer;transition:all .14s;color:var(--tx2);font-family:var(--font);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.tl-time-cell:hover{border-color:var(--b3);color:var(--tx)}
.tl-time-cell[data-selected]{background:var(--acb);border-color:var(--acbb);color:var(--acc)}
.tl-time-clear{background:transparent;border:none;color:var(--dim);cursor:pointer;font-family:var(--font);font-size:.62rem;font-weight:600;letter-spacing:.05em;padding:.25rem .35rem;border-radius:4px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;flex-shrink:0;text-transform:uppercase}
.tl-time-clear:hover{color:var(--red);background:rgba(222,138,132,.06)}
.tl-time-clear[data-disabled]{opacity:.4;pointer-events:none}
/* Bottom action row — sticky at the bottom of the sheet so Save is always visible
   even when the custom date/time section is expanded and the rest of the sheet scrolls. */
/* Sticky action bar — extra space + stronger fade so the Save CTA pops. */
.tl-due-actions{position:sticky;bottom:-.4rem;margin:auto -1.1rem -1.2rem;padding:.85rem 1.1rem max(1rem,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(7,12,22,0) 0,rgba(7,12,22,.92) 30%,rgba(7,12,22,.99) 100%);display:flex;justify-content:space-between;align-items:center;gap:.6rem;border-top:1px solid rgba(131,221,212,.1);z-index:2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tl-due-clear{background:transparent;border:none;color:var(--tx3);cursor:pointer;font-family:var(--font);font-size:.74rem;font-weight:600;letter-spacing:.03em;padding:.5rem .55rem;border-radius:6px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.tl-due-clear:hover{color:var(--red);background:rgba(222,138,132,.06)}
/* Primary CTA — filled with the accent + subtle glow so it reads as the
   intended action even on a busy sheet. */
.tl-due-save{display:inline-flex;align-items:center;gap:.42rem;background:linear-gradient(135deg,var(--acl),var(--acc));border:1px solid rgba(131,221,212,.55);color:#03100e;border-radius:9px;padding:.55rem 1.35rem;font-family:var(--font);font-size:.78rem;font-weight:800;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:transform .13s,box-shadow .18s,filter .15s;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 20px rgba(131,221,212,.18),0 0 0 1px rgba(131,221,212,.18)}
.tl-due-save::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:#03100e;opacity:.35;box-shadow:0 0 4px rgba(0,0,0,.35) inset}
.tl-due-save:hover{filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 26px rgba(131,221,212,.28),0 0 0 1px rgba(131,221,212,.32)}
.tl-due-save:active{transform:scale(.97);transition:none}
/* Modal chrome — always visible (no per-viewport gating). Backdrop is purely visual; it
   does NOT close the sheet on tap. Only the × button (or Escape / Save / Cancel) closes. */
.tl-due-backdrop{position:fixed;inset:0;background:rgba(3,5,8,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9300;animation:tl-due-fade-in .15s ease}
.tl-due-handle{align-self:center;width:38px;height:4px;border-radius:2px;background:var(--b3);margin:0 0 .35rem;flex-shrink:0;opacity:.7}
.tl-due-close{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:.45rem;right:.55rem;background:transparent;border:none;color:var(--tx2);cursor:pointer;padding:.5rem .6rem;border-radius:6px;line-height:1;font-size:1.3rem;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;z-index:3}
.tl-due-close:hover,.tl-due-close:active{color:var(--tx);background:rgba(255,255,255,.06)}
.tl-due-pop-head{padding-right:2rem}
@keyframes tl-due-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tl-due-sheet-up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
/* Mobile-specific touch target tweaks — the sheet itself is already universal. */
@media (hover:none),(max-width:600px){
  .tl-day-cell{width:48px;height:54px}
  .tl-time-cell{min-width:68px;height:36px}
  .tl-due-preset{padding:.6rem .35rem;font-size:.74rem}
  .tl-due-freq-btn{padding:.55rem .25rem;font-size:.7rem}
  .tl-time-quick-btn{padding:.55rem .25rem;font-size:.7rem}
  .tl-due-save{padding:.6rem 1.3rem;font-size:.8rem}
  .tl-due-clear{padding:.55rem .4rem;font-size:.78rem}
}
@media (max-width:380px){
  .tl-day-cell{width:44px;height:50px}
}
.snip-view{font-size:.77rem;color:var(--tx2);font-family:var(--mono);line-height:1.7;padding:.52rem .7rem;background:rgba(9,13,21,.5);border:1px solid var(--b1);border-radius:8px;word-break:break-word;white-space:pre-wrap;max-height:5.4rem;overflow-y:auto;transition:border-color .15s;cursor:default}
.snip-view::-webkit-scrollbar{width:3px}
.snip-view::-webkit-scrollbar-thumb{background:var(--b3);border-radius:2px}
.snip-view:hover{border-color:var(--b2)}
.snip-view-ph{color:var(--dim);font-family:var(--font);font-style:italic;font-size:.77rem;font-weight:400}
.snip-link{color:var(--acc);text-decoration:none;word-break:break-all;transition:color .15s}
.snip-link:hover{text-decoration:underline;color:var(--acl)}
/* Links inside link-type cards take on the card's sapphire identity. */
.snip-card[data-type="link"] .snip-link{color:var(--sapph)}
.snip-card[data-type="link"] .snip-link:hover{color:#a8d2eb}
.notes-enc-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:600}
.notes-lock-btn{background:none;border:1px solid var(--b2);color:var(--dim);border-radius:7px;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .58rem;font-size:.62rem;font-weight:700;letter-spacing:.08em;cursor:pointer;font-family:var(--font);transition:all .16s;text-transform:uppercase}
.notes-lock-btn:hover{border-color:var(--rdbb);color:var(--red)}

/* ── Drill-in groups view ───────────────────────────────────────
   The Snippets tab renders one of two views into #snippets-list:
     • Group list (gv-list): vertical stack of group rows
     • Group detail (gv-detail): a single group with all its snippets

   Single scroll region in either view (the panel body owns scroll). A short
   slide+fade animation runs on every render so transitions feel intentional. */
.gv-list, .gv-detail { display: flex; flex-direction: column; gap: 0.4rem; }
@keyframes gv-in-right { from { transform: translateX(14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gv-in-left  { from { transform: translateX(-14px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.gv-anim-right { animation: gv-in-right .22s cubic-bezier(.4,0,.2,1); }
.gv-anim-left  { animation: gv-in-left .22s cubic-bezier(.4,0,.2,1); }

/* Group row — drill-in card. Stacks into two lines:
     top:    [★] [count] group name
     bottom: [↑][↓][×] ……… ›
   Actions are always rendered (no hover-to-reveal) so mobile and desktop
   behave identically. Icon buttons aim for ~36px touch targets. */
.gv-row { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem .55rem; border: 1px solid var(--b2); border-radius: 12px; background: var(--card2); cursor: pointer; transition: border-color .15s, transform .12s; user-select: none; }
.gv-row:hover { border-color: var(--b3); }
.gv-row:active { transform: scale(.992); }
.gv-row[data-pinned="1"] { border-color: rgba(207,169,110,.32); }
.gv-row-top { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.gv-row-bottom { display: flex; align-items: center; gap: .35rem; }
.gv-row-pin { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color .15s; flex-shrink: 0; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; }
.gv-row-pin:hover { color: var(--gold); }
.gv-row[data-pinned="1"] .gv-row-pin { color: var(--gold); }
.gv-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; }
.gv-row-name { color: var(--tx); font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-row-count { font-size: .72rem; font-weight: 600; color: var(--dim); background: rgba(255,255,255,.05); border-radius: 999px; padding: .2rem .6rem; flex-shrink: 0; min-width: 1.7rem; text-align: center; }
.gv-row-actions { display: flex; gap: .35rem; align-items: center; flex-shrink: 0; }
.gv-row-chev { color: var(--tx3); font-size: 1rem; flex-shrink: 0; transition: transform .15s, color .15s; min-width: 28px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.gv-row:hover .gv-row-chev { color: var(--acc); transform: translateX(2px); }

/* Detail header — back chevron, group name (rename inline), action cluster */
.gv-detail-head { display: flex; align-items: center; gap: .45rem; padding: .45rem .15rem .75rem; border-bottom: 1px solid var(--b1); margin-bottom: .55rem; }
.gv-back-btn { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1.2rem; line-height: 1; border-radius: 8px; transition: color .15s, background .15s; flex-shrink: 0; min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.gv-back-btn:hover { color: var(--acc); background: rgba(131,221,212,.06); }
.gv-detail-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; }
.gv-detail-pin { background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: color .15s; flex-shrink: 0; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; }
.gv-detail-pin:hover { color: var(--gold); }
.gv-detail-pin[data-on=""] { color: var(--gold); }
.gv-detail-count { font-size: .72rem; font-weight: 600; color: var(--dim); background: rgba(255,255,255,.05); border-radius: 999px; padding: .18rem .55rem; flex-shrink: 0; min-width: 1.7rem; text-align: center; }
.gv-detail-actions { display: flex; gap: .35rem; flex-shrink: 0; margin-left: .25rem; }

/* Inline rename input — used on both list rows and detail header */
.group-name-input { border: none; background: transparent; color: var(--tx); font-weight: 600; font-size: 0.92rem; outline: none; cursor: text; min-width: 40px; flex: 1; padding: .1rem 0; border-bottom: 1px solid transparent; transition: border-color .15s; }
.group-name-input:focus { border-bottom-color: var(--acc); }
.group-name-input::placeholder { color: var(--tx3); }

/* Compact action button reused across list rows + detail head. Sized for
   comfortable thumb taps; min target ~36px. */
.group-btn { background: none; border: 1px solid var(--b1); border-radius: 8px; color: var(--tx3); cursor: pointer; font-size: 0.85rem; line-height: 1; transition: border-color .15s, color .15s, background .15s; min-width: 36px; min-height: 36px; padding: 0 .35rem; display: inline-flex; align-items: center; justify-content: center; }
.group-btn:hover { border-color: var(--acc); color: var(--acc); }
.group-btn:disabled { cursor: not-allowed; color: var(--tx3); border-color: var(--b1); background: rgba(255,255,255,.02); }
.group-btn:disabled:hover { border-color: var(--b1); color: var(--tx3); background: rgba(255,255,255,.02); }
.group-btn.delete-group-btn:hover { border-color: var(--rdbb); color: var(--red); background: rgba(218,124,124,.06); }

/* When the user is drilled into a group, hide the "+ New Group" footer
   button — it doesn't apply at this level. */
#notes-panel.gv-detail #add-group-btn { visibility: hidden !important; }

/* Password generator — icon-only key button that replaces the "+ New Group"
   spot when drilled into a group. */
#gen-pw-btn { visibility: hidden; }
#notes-panel.locked #gen-pw-btn { visibility: hidden !important; }
.snip-foot-right { display: flex; align-items: center; gap: 0.4rem; }
.snip-foot-right .snip-move-group { font-size: .7rem; background: var(--card2); color: var(--tx3); border: 1px solid var(--b1); border-radius: 5px; padding: .15rem .3rem; max-width: 130px; }

/* Checkbox task lists */
.task-list { padding-left: 0; margin: 0.6em 0; }
.task-item { display: flex; align-items: flex-start; gap: 0.4em; cursor: default; margin-bottom: 0.25em; }
.task-item input[type="checkbox"] { margin-top: 0.3em; pointer-events: none; }

/* Admonition callout (for > [!NOTE|IMPORTANT|WARNING] etc.) */
.admonition {
  border-left: 4px solid var(--b3);
  background: rgba(255,255,255,.02);
  padding: 0.8em 1em;
  margin: 0.8em 0;
  border-radius: 0 6px 6px 0;
}
.admonition strong { color: var(--tx); }
.admonition.important { border-left-color: var(--gold); }
.admonition.warning   { border-left-color: var(--red); }
.admonition.note      { border-left-color: var(--acc); }
	/* ── Group booking — color system ──────────────────────────
	   cyan  = "you picked it"           (.gslot[data-s])
	   violet = "another member picked"   (.gslot[data-others])
	   gold   = "consensus locked / done" (.group-date-section[data-locked])
	   The flow reads at a glance: cyan & violet on the same slot = potential
	   match; gold halo = booking confirmed. */
	#group-bookers-wrap { margin-bottom: 1.4rem; }
	#gslots-summary { font-size:.76rem; color:var(--tx3); margin-bottom:.55rem; min-height:1.2rem; transition:color .3s; }
	#gslots-summary.changed { color:var(--acc); }
	.group-date-section { position:relative; margin-bottom: 1.1rem; background:linear-gradient(160deg,rgba(14,20,34,.55),rgba(9,13,21,.7)); border:1px solid var(--b1); border-radius:12px; padding:.7rem .8rem; transition:border-color .2s,background .2s,box-shadow .2s; }
	.group-date-section::before { content:''; position:absolute; left:0; top:.7rem; bottom:.7rem; width:2px; border-radius:2px; background:linear-gradient(180deg,rgba(var(--acc-rgb),.4),rgba(var(--acc-rgb),.1)); opacity:.65; transition:opacity .2s,background .2s; }
	.group-date-section[data-has-others]::before { background:linear-gradient(180deg,rgba(var(--violet-rgb),.55),rgba(var(--violet-rgb),.15)); opacity:.85; }
	.group-date-section[data-has-others] { border-color:rgba(var(--violet-rgb),.22); background:linear-gradient(160deg,rgba(var(--violet-rgb),.05),rgba(9,13,21,.7)); }
	.group-date-section[data-locked] { border-color:rgba(var(--gold-rgb),.4); background:linear-gradient(160deg,rgba(var(--gold-rgb),.1),rgba(9,13,21,.85)); box-shadow:0 0 0 1px rgba(var(--gold-rgb),.1),0 8px 28px rgba(var(--gold-rgb),.12); }
	.group-date-section[data-locked]::before { background:linear-gradient(180deg,rgba(var(--gold-rgb),.7),rgba(var(--gold-rgb),.25)); opacity:1; }
	.group-date-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tx2); margin-bottom:.55rem; font-weight:700; display:flex; align-items:center; gap:.5rem; }
	.group-date-section[data-locked] .group-date-label { color:var(--gold); }
	.group-date-others-badge { display:inline-flex; align-items:center; gap:.28rem; background:rgba(var(--violet-rgb),.13); border:1px solid rgba(var(--violet-rgb),.34); color:var(--violet); font-size:.58rem; font-weight:700; border-radius:999px; padding:.14rem .5rem; letter-spacing:.05em; cursor:help; text-transform:none; }
	.group-date-others-badge::before { content:''; width:.3rem; height:.3rem; border-radius:50%; background:currentColor; box-shadow:0 0 5px currentColor; }
	.group-slot-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; }
	.group-others-badge { display:block; font-size:.6rem; color:var(--violet); opacity:.95; margin-top:.18rem; font-weight:600; letter-spacing:.02em; }
	/* Individual slot — three states with three colors */
	.gslot { padding:.5rem .5rem; border:1px solid var(--b2); border-radius:9px; font-size:.78rem; text-align:center; cursor:pointer; user-select:none; transition:all .18s; background:rgba(14,20,34,.55); position:relative; min-height:2.6rem; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
	.gslot:active { transform:scale(.96); }
	.gslot:hover:not([data-s]):not([data-disabled]) { border-color:var(--b3); background:rgba(255,255,255,.04); color:var(--tx); transform:translateY(-1px); }
	/* You picked it — cyan filled */
	.gslot[data-s] { border-color:rgba(var(--acc-rgb),.55); background:linear-gradient(135deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.06)); color:var(--acc); font-weight:700; box-shadow:0 0 0 1px rgba(var(--acc-rgb),.18),0 4px 16px rgba(var(--acc-rgb),.18),inset 0 1px 0 rgba(255,255,255,.06); }
	.gslot[data-s]::after { content:"\2713"; font-size:.58rem; font-weight:800; position:absolute; top:.22rem; right:.32rem; opacity:.85; }
	/* Others picked it — violet, dashed */
	.gslot[data-others] { border-color:rgba(var(--violet-rgb),.4); background:rgba(var(--violet-rgb),.07); color:var(--violet); border-style:dashed; }
	.gslot[data-others]:not([data-s])::after { content:""; position:absolute; top:.28rem; right:.32rem; width:.4rem; height:.4rem; border-radius:50%; background:var(--violet); box-shadow:0 0 5px rgba(var(--violet-rgb),.6); opacity:.85; }
	/* You AND others picked it — gradient cyan→violet, the "match" state */
	.gslot[data-s][data-others] { border-style:solid; border-color:rgba(var(--acc-rgb),.55); background:linear-gradient(135deg,rgba(var(--acc-rgb),.2) 0%,rgba(var(--acc-rgb),.1) 50%,rgba(var(--violet-rgb),.16) 100%); color:var(--acc); box-shadow:0 0 0 1px rgba(var(--acc-rgb),.22),0 6px 22px rgba(var(--acc-rgb),.22),0 6px 22px rgba(var(--violet-rgb),.12); }
	.gslot[data-disabled] { opacity:.3; cursor:not-allowed; pointer-events:none; }
	@media(min-width:420px){.group-slot-grid{grid-template-columns:repeat(3,1fr);}}
	@media(min-width:600px){.group-slot-grid{grid-template-columns:repeat(4,1fr);}}
	@media(max-width:380px){.gslot{font-size:.72rem;padding:.42rem .35rem;min-height:2.3rem;}.group-date-section{padding:.5rem .5rem;}}
		.bfoot-group {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		}
		.autosave-status {
		  display: inline-flex;
		  align-items: center;
		  gap: 0.5rem;
		  padding: 0.35rem 0.9rem;
		  background: rgba(14, 22, 36, 0.8);
		  border: 1px solid var(--b2);
		  border-radius: 40px;
		  backdrop-filter: blur(4px);
		  transition: all 0.2s ease;
		  font-size: 0.75rem;
		  font-weight: 500;
		  letter-spacing: 0.02em;
		  color: var(--tx3);
		  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
		  min-height: 44px;
		}
		.autosave-status[data-state="saving"] .status-icon::before {
		  content: "◌";
		  display: inline-block;
		  animation: spin 0.8s linear infinite;
		  font-weight: 700;
		  margin-right: 0.2rem;
		}
		.autosave-status[data-state="saved"] .status-icon::before {
		  content: "✓";
		  color: var(--grn);
		  font-weight: bold;
		}
		.autosave-status[data-state="error"] .status-icon::before {
		  content: "⚠";
		  color: var(--red);
		}
		.autosave-status[data-state="cleared"] .status-icon::before {
		  content: "✕";
		  color: var(--dim);
		}
		.autosave-status[data-state="waiting"] .status-icon::before {
		  content: "⋯";
		  color: var(--acc);
		  animation: pulse 1.5s ease-in-out infinite;
		  font-weight: 700;
		}
		.autosave-status[data-state="waiting"] {
		  background: rgba(131, 221, 212, 0.06);
		  border-color: var(--acbb);
		}
		@keyframes spin {
		  from { transform: rotate(0deg); }
		  to { transform: rotate(360deg); }
		}
		@keyframes pulse {
		  0%, 100% { opacity: 0.3; }
		  50% { opacity: 1; }
		}
		.autosave-status[data-state="saving"] {
		  background: rgba(131, 221, 212, 0.08);
		  border-color: var(--acbb);
		  color: var(--acc);
		}

/* ── Scratch tab (inside notes panel) ──────────────────────────
   Scratch is the third tab alongside Snippets and Tasks. It's ephemeral
   (in-memory only — never sent to the server, never encrypted) and is
   intentionally unaffected by the notes lock so the user can always jot
   something quickly without unlocking the encrypted blob. The dashed
   textarea border and the "Local only" chip make the ephemeral nature
   visually obvious so it isn't confused with the real (synced) notes. */
#scratch-panel-body{padding:.85rem 1rem 1rem}
#scratch-panel-body[data-active]{display:flex;flex-direction:column}
.scratch-tab-chip{display:flex;align-items:center;gap:.45rem;padding:.4rem .7rem;margin-bottom:.55rem;font-size:.66rem;color:var(--tx3);background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.06);border-radius:7px;letter-spacing:.03em;font-style:italic}
.scratch-tab-chip svg{color:var(--gold);opacity:.85;flex-shrink:0}
.scratch-tab-chip span{flex:1;min-width:0}
.scratch-clear-inline{font-family:var(--font);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);background:transparent;border:1px solid var(--b2);border-radius:5px;padding:.18rem .5rem;cursor:pointer;transition:all .14s;font-style:normal;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.scratch-clear-inline:hover{color:var(--acc);border-color:var(--acbb);background:rgba(var(--acc-rgb),.07)}
#scratch-body{flex:1;width:100%;min-height:14rem;background:rgba(9,13,21,.45);color:var(--tx);font-family:var(--mono,Menlo,monospace);font-size:.86rem;line-height:1.6;border:1px dashed rgba(var(--acc-rgb),.22);border-radius:8px;outline:none;padding:.85rem 1rem;resize:none;transition:border-color .15s}
#scratch-body:focus{border-color:rgba(var(--acc-rgb),.45)}
#scratch-body::placeholder{color:var(--dim);font-style:italic;font-family:var(--font)}

/* ── Dictation button (inside scratch tab chip) ──────────────── */
.dictate-btn{display:none;font-family:var(--font);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);background:transparent;border:1px solid var(--b2);border-radius:5px;padding:.18rem .5rem;cursor:pointer;transition:all .14s;font-style:normal;-webkit-tap-highlight-color:transparent;flex-shrink:0;align-items:center;gap:.35rem}
.dictate-btn:hover{color:var(--acc);border-color:var(--acbb);background:rgba(var(--acc-rgb),.07)}
.dictate-btn:disabled{opacity:.4;cursor:not-allowed}
/* Recording state — red pulse */
.dictate-btn.recording{color:var(--red);border-color:var(--rdbb);background:var(--rdb);animation:dictate-pulse 1.4s ease-in-out infinite}
.dictate-btn.recording:hover{color:var(--red);border-color:var(--red);background:rgba(222,138,132,.2)}
/* Transcribing state — cyan pulse */
.dictate-btn.dictating{color:var(--acc);border-color:var(--acbb);background:var(--acb);animation:dictate-pulse 1.2s ease-in-out infinite}
@keyframes dictate-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--red-rgb),.4)}50%{opacity:.85;box-shadow:0 0 8px 2px rgba(var(--red-rgb),.25)}}
.dictate-btn.dictating{animation-name:dictate-pulse-acc}
@keyframes dictate-pulse-acc{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--acc-rgb),.4)}50%{opacity:.85;box-shadow:0 0 8px 2px rgba(var(--acc-rgb),.25)}}
.dictate-cancel-btn{display:none;font-family:var(--font);font-size:.6rem;color:var(--tx3);background:transparent;border:1px solid var(--b2);border-radius:5px;padding:.12rem .32rem;cursor:pointer;transition:all .14s;font-style:normal;-webkit-tap-highlight-color:transparent;flex-shrink:0;align-items:center;justify-content:center;line-height:1}
.dictate-cancel-btn:hover{color:var(--red);border-color:var(--rdbb);background:var(--rdb)}
.dictate-spinner{width:12px;height:12px;border:2px solid var(--b2);border-top-color:var(--acc);border-radius:50%;animation:dictate-spin .6s linear infinite;display:inline-block}
@keyframes dictate-spin{to{transform:rotate(360deg)}}

/* Flash the scratch textarea when dictation text lands */
#scratch-body.dictation-flash{background-color:rgba(var(--acc-rgb),.06);transition:background-color .35s ease}

/* Security disclosure panel */
#sec-panel{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;background:rgba(0,0,0,.75)}
#sec-panel.show{display:flex}
.sec-panel-card{background:var(--card2);border:1px solid var(--b3);border-radius:12px;width:min(520px,92vw);max-height:86vh;overflow-y:auto;box-shadow:0 12px 60px rgba(0,0,0,.7)}
.sec-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.15rem;border-bottom:1px solid var(--b1)}
.sec-panel-head h3{margin:0;font-size:.95rem;color:var(--tx);letter-spacing:.03em}
.sec-panel-body{padding:1rem 1.15rem 1.15rem;font-size:.8rem;color:var(--tx2);line-height:1.6}
/* Lede card: cyan-tinted block that anchors the eye at the top of the modal. */
.sec-panel-body .lede{margin:0 0 1rem;padding:.75rem .9rem;background:linear-gradient(135deg,rgba(var(--acc-rgb),.085),rgba(var(--acc-rgb),.025));border-left:3px solid var(--acc);border-radius:0 9px 9px 0;color:var(--tx2);box-shadow:inset 0 1px 0 rgba(var(--acc-rgb),.06)}
.sec-panel-body .lede strong{color:var(--acl)}
/* Section headers: uppercase eyebrow + glow dot in a per-section tone color.
   --tone / --tone-rgb default to the cyan accent; data-tone variants swap them
   so each section reads as a distinct, calm signal without losing the family. */
.sec-panel-body h4{display:flex;align-items:center;gap:.55rem;color:var(--tone,var(--acc));font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;margin:1.25rem 0 .5rem;font-weight:700;--tone:var(--acc);--tone-rgb:var(--acc-rgb)}
.sec-panel-body h4::before{content:'';width:.42rem;height:.42rem;border-radius:50%;background:var(--tone);box-shadow:0 0 6px rgba(var(--tone-rgb),.7),0 0 1px rgba(var(--tone-rgb),.95);flex-shrink:0}
.sec-panel-body h4[data-tone="info"]{--tone:var(--gold);--tone-rgb:var(--gold-rgb)}
.sec-panel-body h4[data-tone="protect"]{--tone:var(--grn);--tone-rgb:var(--grn-rgb)}
.sec-panel-body h4[data-tone="contact"]{--tone:var(--acl);--tone-rgb:var(--acc-rgb)}
.sec-panel-body h4[data-tone="muted"]{--tone:var(--dim);--tone-rgb:96,128,160}
.sec-panel-body p{margin:.25rem 0 .65rem}
.sec-panel-body ul{margin:.4rem 0 .7rem;padding-left:1.2rem}
.sec-panel-body li{margin-bottom:.32rem}
.sec-panel-body li::marker{color:rgba(var(--acc-rgb),.55)}
.sec-panel-body strong{color:var(--tx);font-weight:600}
/* Anchors: cyan, hairline underline, brighten on hover.
   Overrides the UA purple/blue defaults so external links match the palette. */
.sec-panel-body a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(var(--acc-rgb),.32);padding:0 .04em;transition:color .15s,border-color .15s,background .15s}
.sec-panel-body a:hover{color:var(--acl);border-bottom-color:var(--acl);background:rgba(var(--acc-rgb),.08)}
.sec-panel-body a:focus-visible{outline:2px solid rgba(var(--acc-rgb),.45);outline-offset:2px;border-radius:3px}