/* ============================================================
   Ferro — base.css
   Design tokens, reset, app window shell, shared primitives
   ============================================================ */

:root{
  /* light theme (paper / rust) */
  --paper:#f6f1e9;
  --paper-2:#efe8dc;
  --card:#fbf8f2;
  --ink:#23201c;
  --ink-soft:#5c554b;
  --ink-faint:#8c8377;
  --line:#e2d9c9;
  --line-soft:#ebe3d5;

  --rust:#c0531f;
  --rust-deep:#9c3d12;
  --rust-tint:#f6e3d4;
  --teal:#1f6b5f;
  --gold:#b8862a;
  --blue:#2f5d9e;
  --green:#3f7a3f;
  --purple:#6b4a8a;

  /* accent is remapped by data-accent */
  --accent:var(--rust);
  --accent-deep:var(--rust-deep);
  --accent-tint:var(--rust-tint);

  --shadow:0 1px 2px rgba(35,32,28,.04),0 8px 28px rgba(35,32,28,.07);
  --shadow-lg:0 24px 60px rgba(35,32,28,.16);
  --shadow-pop:0 16px 44px rgba(35,32,28,.22);

  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --grain-opacity:.4;
  --grain-blend:multiply;
}

/* accent variants */
[data-accent="teal"]{--accent:var(--teal);--accent-deep:#13453d;--accent-tint:#d6e8e4}
[data-accent="blue"]{--accent:var(--blue);--accent-deep:#1f3f6e;--accent-tint:#dde6f3}
[data-accent="gold"]{--accent:var(--gold);--accent-deep:#8a6310;--accent-tint:#f3e8cf}
[data-accent="purple"]{--accent:var(--purple);--accent-deep:#473063;--accent-tint:#e7dff0}

/* dark theme */
[data-theme="dark"]{
  --paper:#1c1a17;
  --paper-2:#211e1a;
  --card:#262320;
  --ink:#f1ebe0;
  --ink-soft:#c3bbac;
  --ink-faint:#8a8275;
  --line:#34302a;
  --line-soft:#2c2925;
  --rust-tint:#3a2417;
  --accent-tint:#3a2417;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 28px 64px rgba(0,0,0,.6);
  --shadow-pop:0 18px 50px rgba(0,0,0,.6);
  --grain-opacity:.25;
  --grain-blend:overlay;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
button{font:inherit;color:inherit}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--accent-tint);color:var(--accent-deep)}

body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb,var(--paper) 70%, #fff) 0%, transparent 60%),
    linear-gradient(160deg,var(--paper-2) 0%, color-mix(in srgb,var(--paper-2) 80%, #000 6%) 100%);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:28px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  transition:background .35s ease,color .25s ease;
}

/* ---------- desktop window ---------- */
.window{
  width:min(1380px,100%);height:min(880px,94vh);
  background:var(--paper);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  border:1px solid color-mix(in srgb,var(--line) 60%, transparent);
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
  transition:background .35s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}

/* grain overlay */
.window::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:60;
  opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* titlebar */
.titlebar{
  height:42px;flex:0 0 42px;display:flex;align-items:center;
  padding:0 16px;gap:14px;z-index:10;
  background:linear-gradient(180deg,var(--paper-2),color-mix(in srgb,var(--paper-2) 88%, #000 4%));
  border-bottom:1px solid var(--line);
  -webkit-app-region:drag;
}
.traffic{display:flex;gap:8px}
.traffic i{width:12px;height:12px;border-radius:50%;display:block;cursor:pointer;transition:filter .15s}
.traffic i:hover{filter:brightness(1.08)}
.traffic .r{background:#e0654d}.traffic .y{background:#e3b341}.traffic .g{background:#54a35b}
.titlebar .tbtitle{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);
  margin:0 auto;display:flex;align-items:center;gap:8px;
}
.titlebar .tbtitle b{color:var(--ink-soft);font-weight:500}
.tbright{font-family:var(--mono);font-size:11px;color:var(--ink-faint);display:flex;gap:14px;align-items:center}
.tbright .tb-act{-webkit-app-region:no-drag;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s}
.tbright .tb-act:hover{color:var(--accent)}
.tbright .tb-act svg{width:14px;height:14px}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(63,122,63,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,122,63,.45)}70%{box-shadow:0 0 0 6px rgba(63,122,63,0)}100%{box-shadow:0 0 0 0 rgba(63,122,63,0)}}
.sync-dot.syncing{background:var(--gold);animation:spinpulse 1s infinite}
@keyframes spinpulse{0%,100%{opacity:.4}50%{opacity:1}}

/* the routed app body */
.stage{flex:1;display:flex;min-height:0;position:relative}

/* ---------- left module rail ---------- */
.rail{
  width:60px;flex:0 0 60px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 0 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--paper-2) 92%, #000 4%),var(--paper-2));
  border-right:1px solid var(--line);
}
.rail-logo{
  width:36px;height:36px;border-radius:10px;margin-bottom:8px;flex:0 0 36px;
  background:linear-gradient(145deg,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
}
.rail-logo svg{width:20px;height:20px}
.rail-btn{
  position:relative;width:42px;height:42px;border-radius:11px;border:none;background:none;cursor:pointer;
  color:var(--ink-faint);display:flex;align-items:center;justify-content:center;transition:.14s;
}
.rail-btn:hover{background:color-mix(in srgb,var(--accent) 9%, transparent);color:var(--ink)}
.rail-btn.active{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.rail-btn.active::before{content:"";position:absolute;left:-12px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.rail-btn svg{width:21px;height:21px}
.rail-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;font-family:var(--mono);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--paper-2)}
.rail-spacer{flex:1}
.rail-av{width:34px;height:34px;border:none;padding:0;border-radius:9px;background:linear-gradient(135deg,#4a6b8a,#2f4a63);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;margin-top:4px;cursor:pointer;font-family:var(--sans);transition:transform .12s ease,box-shadow .12s ease}
.rail-av:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.22)}

/* ---------- shared icon button ---------- */
.iconbtn{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-soft);transition:.12s;border:1px solid transparent;background:none;
}
.iconbtn:hover{background:var(--card);border-color:var(--line);color:var(--accent)}
.iconbtn svg{width:17px;height:17px}
.iconbtn.active{background:var(--accent-tint);color:var(--accent-deep);border-color:transparent}

/* ---------- buttons ---------- */
.btn{
  padding:9px 16px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  border-radius:var(--r-md);font-weight:600;font-size:13px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:8px;transition:.14s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn svg{width:15px;height:15px}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fdf3ea;border:none;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent-deep) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover{transform:translateY(-1px);color:#fff}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--card);border-color:var(--line)}
.btn.danger:hover{border-color:#c0392b;color:#c0392b}

/* avatars */
.av{
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;flex:0 0 auto;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.av .pv{position:absolute;bottom:-3px;right:-3px;width:14px;height:14px;border-radius:5px;border:2px solid var(--paper);background:var(--card);display:flex;align-items:center;justify-content:center}
.av .pv i{width:7px;height:7px;border-radius:2px;display:block}

/* protocol badges */
.proto{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:2px 6px;border-radius:5px;font-weight:500;flex:0 0 auto;text-transform:uppercase}
.proto.graph{background:rgba(47,93,158,.14);color:var(--blue)}
.proto.gmail{background:rgba(192,83,31,.14);color:var(--rust)}
.proto.ews{background:rgba(31,107,95,.14);color:var(--teal)}
.proto.imap{background:rgba(184,134,42,.16);color:var(--gold)}
[data-theme="dark"] .proto.graph{background:rgba(47,93,158,.25);color:#7ea3d8}
[data-theme="dark"] .proto.gmail{background:rgba(192,83,31,.25);color:#e08a5c}
[data-theme="dark"] .proto.ews{background:rgba(31,107,95,.25);color:#5fb3a6}
[data-theme="dark"] .proto.imap{background:rgba(184,134,42,.25);color:#d4ad5a}

/* tags */
.tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:5px}
.tag.work{background:rgba(47,93,158,.12);color:var(--blue)}
.tag.fin{background:rgba(63,122,63,.13);color:var(--green)}
.tag.team{background:rgba(184,134,42,.15);color:var(--gold)}
.tag.personal{background:rgba(107,74,138,.14);color:var(--purple)}
.tag.read-later{background:var(--accent-tint);color:var(--accent-deep)}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line) 80%, #000 6%);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* toasts */
.toasts{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:500;min-width:300px;
  animation:toastin .3s cubic-bezier(.2,.8,.2,1) both;
}
.toast.out{animation:toastout .25s ease forwards}
.toast .ic{width:18px;height:18px;color:var(--accent)}
.toast .ic svg{width:18px;height:18px}
.toast .undo{margin-left:auto;background:none;border:none;color:var(--accent);font-weight:700;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px}
.toast .undo:hover{text-decoration:underline}
.toast .bar{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);border-radius:0 0 0 var(--r-lg);animation:drain linear forwards}
.toast{position:relative;overflow:hidden}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(8px)}}
@keyframes drain{from{width:100%}to{width:0}}

/* modal backdrop (shared) */
.backdrop{position:absolute;inset:0;background:rgba(20,16,12,.34);backdrop-filter:blur(2px);z-index:100;animation:fadein .2s ease both}
[data-theme="dark"] .backdrop{background:rgba(0,0,0,.55)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* context menu */
.ctxmenu{position:absolute;z-index:300;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:6px;min-width:190px;animation:fade .12s ease both}
.ctxmenu .ci{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink-soft);font-weight:500}
.ctxmenu .ci:hover{background:var(--accent-tint);color:var(--accent-deep)}
.ctxmenu .ci svg{width:15px;height:15px}
.ctxmenu .ci.danger:hover{background:rgba(192,57,43,.12);color:#c0392b}
.ctxmenu .sep{height:1px;background:var(--line-soft);margin:5px 4px}
.ctxmenu .ci .kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-faint)}

/* account switcher popup (rail avatar) */
.acct-menu{position:absolute;z-index:300;width:288px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg,14px);box-shadow:var(--shadow-pop);padding:8px;animation:fade .12s ease both}
.acct-menu .am-head{display:flex;align-items:center;gap:11px;padding:8px 9px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.acct-menu .am-uav{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#4a6b8a,#2f4a63);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:0 0 38px}
.acct-menu .am-me{line-height:1.3;min-width:0}
.acct-menu .am-me b{font-size:13.5px;display:block}
.acct-menu .am-me span{font-size:11px;color:var(--ink-faint)}
.acct-menu .am-all{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-soft)}
.acct-menu .am-all svg{width:16px;height:16px;color:var(--ink-faint)}
.acct-menu .am-all:hover{background:var(--accent-tint);color:var(--accent-deep)}
.acct-menu .am-all.active{background:var(--accent-tint);color:var(--accent-deep);font-weight:600}
.acct-menu .am-all .am-ct{margin-left:auto}
.acct-menu .am-list{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.acct-menu .am-acct{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer;position:relative}
.acct-menu .am-acct:hover{background:color-mix(in srgb,var(--accent) 8%, transparent)}
.acct-menu .am-acct.active{background:var(--accent-tint)}
.acct-menu .am-acct .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;position:relative}
.acct-menu .am-acct .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:.25}
.acct-menu .am-acct .meta{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.acct-menu .am-acct .meta b{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu .am-acct .meta span{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-menu .am-ct{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:var(--accent);padding:1px 7px;border-radius:20px;flex:0 0 auto}
.acct-menu .am-sep{height:1px;background:var(--line-soft);margin:7px 4px}
.acct-menu .am-act{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.acct-menu .am-act svg{width:15px;height:15px;color:var(--ink-faint)}
.acct-menu .am-act:hover{background:var(--accent-tint);color:var(--accent-deep)}

kbd{font-family:var(--mono);font-size:10px;color:var(--ink-faint);border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--paper-2)}

.hidden{display:none !important}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;color:var(--ink-faint);text-align:center;padding:40px;animation:fade .4s ease both}
.empty svg{width:46px;height:46px;opacity:.6}
.empty h3{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink-soft)}
.empty p{font-size:13px;max-width:280px;line-height:1.55}
.empty .btn{margin-top:4px}

/* generic file-type swatches (used by lightbox) */
.fi.pdf{background:#c0392b}.fi.xls{background:#3f7a3f}.fi.png{background:#2f5d9e}
.fi.doc{background:#2b579a}.fi.zip{background:#8a6310}.fi.image{background:#2f5d9e}

/* lightbox (attachment preview) */
.lightbox-wrap{position:absolute;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:48px;background:rgba(20,16,12,.55);backdrop-filter:blur(3px);animation:fadein .15s ease both}
[data-theme="dark"] .lightbox-wrap{background:rgba(0,0,0,.66)}
.lightbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);max-width:560px;width:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;animation:palettein .25s cubic-bezier(.2,.8,.2,1) both}
.lightbox .lb-head{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line-soft)}
.lightbox .lb-head .fi{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;font-weight:600;color:#fff;flex:0 0 36px}
.lightbox .lb-meta{flex:1;min-width:0}
.lightbox .lb-meta b{font-size:13.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lightbox .lb-meta span{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono)}
.lightbox .lb-body{padding:20px;overflow:auto;display:flex;align-items:center;justify-content:center;min-height:220px;background:var(--paper)}
.lightbox .lb-img{width:100%;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft);display:flex}
.lightbox .lb-doc{text-align:center;color:var(--ink-faint)}
.lightbox .lb-doc .fi{width:74px;height:74px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;font-weight:700;color:#fff;margin-bottom:16px}
.lightbox .lb-doc p{font-size:13px}

/* responsive rules live in responsive.css */
.m-only{display:none !important}

/* ---------- a11y: keyboard focus ring ---------- */
:focus{outline:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:8px}
.rail-btn:focus-visible,.iconbtn:focus-visible,.msg:focus-visible,.chip:focus-visible{outline-offset:-2px}
.cm-editor:focus-visible{outline:none}

/* ---------- route transition ---------- */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view-anim{animation:viewIn .28s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------- centered modal (forms) ---------- */
.modal-wrap{position:absolute;inset:0;z-index:230;display:flex;align-items:center;justify-content:center;padding:32px;background:rgba(20,16,12,.5);backdrop-filter:blur(3px);animation:fadein .15s ease both}
[data-theme="dark"] .modal-wrap{background:rgba(0,0,0,.62)}
.modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-pop);width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;animation:palettein .25s cubic-bezier(.2,.8,.2,1) both}
.modal .m-head{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.modal .mh-ic{width:34px;height:34px;border-radius:9px;background:var(--accent-tint);color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.modal .mh-ic svg{width:18px;height:18px}
.modal .m-head h3{font-family:var(--serif);font-weight:600;font-size:18px;flex:1}
.modal .m-x{cursor:pointer;color:var(--ink-faint);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.modal .m-x:hover{background:var(--paper-2);color:var(--accent)}
.modal .m-x svg{width:15px;height:15px}
.modal .m-body{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal .m-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line-soft)}
.modal .m-foot .grow{flex:1}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:12px;font-weight:600;color:var(--ink-soft)}
.fld .sinput,.fld .sselect{width:100%}
.fld-row{display:flex;gap:12px}
.fld-row .fld{flex:1}
.fld-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--ink-soft);font-weight:500}

/* ---------- notifications ---------- */
.notif-bell{position:relative}
.notif-bell .nb-dot{position:absolute;top:-2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--rust);border:1.5px solid var(--paper-2)}
.notif-panel{width:320px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.notif-panel .np-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.notif-panel .np-head b{font-size:14px}
.notif-panel .np-head span{font-size:12px;color:var(--accent);cursor:pointer;font-weight:600}
.notif-panel .np-head span:hover{text-decoration:underline}
.np-list{max-height:360px;overflow-y:auto;padding:6px}
.np-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;cursor:pointer}
.np-item:hover{background:var(--accent-tint)}
.np-ic{width:32px;height:32px;border-radius:9px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 32px}
.np-ic svg{width:16px;height:16px}
.np-m{flex:1;min-width:0}
.np-m b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-m span{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.np-t{font-family:var(--mono);font-size:10px;color:var(--ink-faint);flex:0 0 auto}
.np-empty{padding:32px;text-align:center;color:var(--ink-faint);font-size:13px}

/* lightbox gallery navigation */
.lightbox .lb-body{position:relative}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:2}
.lb-nav:hover{color:var(--accent);border-color:var(--accent)}
.lb-nav svg{width:18px;height:18px}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}
.lb-count{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--ink-faint);background:var(--card);border:1px solid var(--line);padding:2px 10px;border-radius:20px}