/* ===========================================================
   NOTIFICATIONS V2 — Frenzy96 player (2026-05-30)
   Card-feed design. Mounts into #modal-notifications. Vanilla, English-only, $.
   Data: GET /api/notifications -> {items, unread_count}
   =========================================================== */
.nfw {
  --nf-bg:#0b0c10; --nf-surface:#141620; --nf-border:#1e2028; --nf-border2:#1a1c24;
  --nf-gold:#e8a124; --nf-gold-bg:#1f1a0d;
  --nf-green:#2dc98a; --nf-green-bg:#0d1a10;
  --nf-red:#e84040; --nf-red-bg:#200f0f;
  --nf-blue:#4a8ee8; --nf-blue-bg:#0d1520;
  --nf-purple:#9070e8; --nf-purple-bg:#130e22;
  --nf-text:#eee; --nf-text2:#aaa; --nf-text3:#555; --nf-text4:#3a3e4d;
  background:var(--nf-bg); color:var(--nf-text); margin:0; min-height:100%;
  width:100%; align-self:stretch; max-width:100%;
  display:flex; flex-direction:column; box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
.nfw, .nfw *, .nfw *::before, .nfw *::after { box-sizing:border-box; }

/* ---- header ---- */
.nf-hd { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--nf-border2); flex:0 0 auto; }
.nf-back { width:28px; height:28px; flex:0 0 28px; border-radius:8px; border:1px solid var(--nf-border); background:#151720; color:var(--nf-text2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.nf-back svg { width:17px; height:17px; }
.nf-title { flex:1; font-size:14px; font-weight:600; color:var(--nf-text); }
.nf-title .ct { color:var(--nf-red); font-weight:700; margin-left:3px; }
.nf-markall { font-size:10px; color:var(--nf-gold); background:none; border:0; cursor:pointer; padding:4px 2px; }
.nf-markall:disabled { color:var(--nf-text4); cursor:default; }

/* ---- tabs ---- */
.nf-tabs { display:flex; gap:7px; overflow-x:auto; padding:10px 14px; border-bottom:1px solid var(--nf-border2); flex:0 0 auto; scrollbar-width:none; }
.nf-tabs::-webkit-scrollbar { display:none; }
.nf-tab { flex:0 0 auto; height:32px; display:flex; align-items:center; padding:0 16px; border-radius:20px; font-size:12px; font-weight:400; border:0.5px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.45); cursor:pointer; white-space:nowrap; transition:.15s; }
.nf-tab.on { background:rgba(255,215,0,0.12); border-color:rgba(255,215,0,0.3); color:#ffd700; font-weight:500; }

/* ---- list ---- */
.nf-list { flex:1 1 auto; overflow-y:auto; padding:0 14px 16px; }
.nf-dategrp { font-size:9px; font-weight:600; color:var(--nf-text4); text-transform:uppercase; letter-spacing:.8px; padding:8px 0 5px; }

/* ---- row ---- */
.nf-row { position:relative; display:flex; gap:10px; padding:10px 0; border-bottom:0.5px solid rgba(255,255,255,0.05); cursor:pointer; }
.nf-row:last-child { border-bottom:0; }
.nf-row.unread::before { content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:var(--nf-gold); }
.nf-ic { width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.nf-ic svg { width:18px; height:18px; }
.nf-ic.t-deposit    { background:var(--nf-green-bg);  color:var(--nf-green); }
.nf-ic.t-withdrawal { background:var(--nf-red-bg);    color:var(--nf-red); }
.nf-ic.t-bonus      { background:var(--nf-gold-bg);   color:var(--nf-gold); }
.nf-ic.t-system     { background:var(--nf-blue-bg);   color:var(--nf-blue); }
.nf-ic.t-promotion  { background:var(--nf-purple-bg); color:var(--nf-purple); }
.nf-mid { flex:1; min-width:0; }
.nf-rtitle { font-size:11px; font-weight:600; color:var(--nf-text); }
.nf-row.unread .nf-rtitle { color:#fff; }
.nf-rbody { font-size:10px; color:var(--nf-text3); line-height:1.5; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-rtime { font-size:9px; color:var(--nf-text4); margin-top:3px; }
.nf-amt { flex:0 0 auto; margin-top:2px; font-size:13px; font-weight:500; font-family:"JetBrains Mono",ui-monospace,monospace; white-space:nowrap; }
.nf-amt.pos { color:#4ade80; }
.nf-amt.neg { color:#f87171; }

/* ---- load more / caught up ---- */
.nf-more { width:100%; margin-top:12px; padding:11px; border-radius:10px; border:1px solid var(--nf-border); background:var(--nf-surface); color:var(--nf-text2); font-size:12px; font-weight:600; cursor:pointer; }
.nf-caught { text-align:center; font-size:10px; color:var(--nf-text4); padding:14px 0 4px; }

/* ---- skeleton ---- */
.nf-skrow { display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--nf-border2); }
.nf-skic { width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:#171a24; }
.nf-skln { height:10px; border-radius:5px; background:#171a24; background-image:linear-gradient(90deg,#171a24 25%,#1e2230 50%,#171a24 75%); background-size:200% 100%; animation:nf-sh 1.4s linear infinite; }
.nf-skln.a { width:55%; height:11px; } .nf-skln.b { width:85%; margin-top:7px; } .nf-skln.c { width:30%; margin-top:7px; }
.nf-skic { background-image:linear-gradient(90deg,#171a24 25%,#1e2230 50%,#171a24 75%); background-size:200% 100%; animation:nf-sh 1.4s linear infinite; }
@keyframes nf-sh { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ---- empty ---- */
.nf-empty { text-align:center; padding:54px 20px; }
.nf-empty svg { width:32px; height:32px; color:var(--nf-text4); margin-bottom:10px; }
.nf-empty__t { font-size:12px; color:var(--nf-text3); }
.nf-empty__s { font-size:10px; color:var(--nf-text4); margin-top:4px; }

/* ---- retry ---- */
.nf-retry { text-align:center; padding:50px 20px; }
.nf-retry__t { font-size:13px; color:var(--nf-text2); }
.nf-retry button { margin-top:12px; padding:9px 22px; border-radius:9px; border:1px solid var(--nf-gold); background:var(--nf-gold-bg); color:var(--nf-gold); font-size:12px; font-weight:600; cursor:pointer; }

/* ---- system detail sheet ---- */
.nf-sov { position:fixed; inset:0; z-index:100001; background:rgba(0,0,0,.62); opacity:0; transition:opacity .2s; display:flex; align-items:flex-end; }
.nf-sov.on { opacity:1; }
.nf-sheet { width:100%; max-width:560px; margin:0 auto; background:#111318; border-top:1px solid var(--nf-border); border-radius:18px 18px 0 0; transform:translateY(100%); transition:transform .3s ease-out; max-height:80vh; display:flex; flex-direction:column; box-sizing:border-box; }
.nf-sov.on .nf-sheet { transform:translateY(0); }
.nf-grab { width:34px; height:3px; border-radius:3px; background:#2a2d38; margin:9px auto 8px; flex:0 0 auto; }
.nf-sh-hd { display:flex; align-items:center; gap:10px; padding:0 18px 12px; flex:0 0 auto; }
.nf-sh-ic { width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:var(--nf-blue-bg); color:var(--nf-blue); display:flex; align-items:center; justify-content:center; }
.nf-sh-ic svg { width:18px; height:18px; }
.nf-sh-title { flex:1; font-size:14px; font-weight:700; }
.nf-sh-x { width:28px; height:28px; border-radius:8px; border:0; background:#1a1d28; color:var(--nf-text2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nf-sh-x svg { width:16px; height:16px; }
.nf-sh-body { flex:1 1 auto; overflow-y:auto; padding:0 18px; font-size:13px; color:var(--nf-text2); line-height:1.6; white-space:pre-wrap; }
.nf-sh-time { font-size:10px; color:var(--nf-text4); margin-top:12px; }
.nf-sh-foot { flex:0 0 auto; padding:12px 18px calc(16px + env(safe-area-inset-bottom)); }
.nf-sh-close { width:100%; padding:13px; border-radius:11px; border:1px solid var(--nf-border); background:var(--nf-surface); color:var(--nf-text); font-size:13px; font-weight:600; cursor:pointer; }

.nf-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:100003; color:#fff; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 8px 28px rgba(0,0,0,.45); }