:root{--accent:#fff93e;--accent-dim:rgba(255,249,62,.08);--accent-mid:rgba(255,249,62,.18);--bg:#13161d;--rail:#0f1119;--sidebar:#181a1f;--sidebar-ctx:#15171d;--channel:#15171e;--panel:#1b1e25;--panel2:#1f232b;--panel3:#23272f;--border:#252b3a;--muted:#4e5a6f;--muted-light:#7d8a9e;--text:#dde3ed;--green:#3ecf6e;--red:#f87171;--yellow:#f59e0b;--blue:#60a5fa;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-xs:4px;--space-sm:8px;--space-md:14px;--space-lg:20px;--space-xl:28px;--space-2xl:40px;--space-3xl:56px;--font-ui:'DM Sans',sans-serif;--font-display:'Syne',sans-serif;--font-xs:10.5px;--font-sm:12px;--font-md:13.5px;--font-lg:16px;--font-xl:20px;--font-2xl:28px;--font-hdr:10px;--surface-1:rgba(255,255,255,.03);--surface-2:rgba(255,255,255,.05);--surface-3:rgba(255,255,255,.08);--surface-4:rgba(255,255,255,.12);--surface-border:rgba(255,255,255,.05);--surface-border-hover:rgba(255,255,255,.1);--state-success:var(--green);--state-danger:var(--red);--state-warning:var(--yellow);--state-info:var(--blue);--state-success-dim:rgba(62,207,110,.08);--state-danger-dim:rgba(248,113,113,.08);--state-warning-dim:rgba(245,158,11,.08);--state-info-dim:rgba(96,165,250,.08);--purple:#a78bfa;--gold:#fbbf24;--spotify-green:#1DB954;--spotify-green-dim:rgba(29,185,84,.08);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-pill:100px;--elev-1:0 1px 4px rgba(0,0,0,.2);--elev-2:0 4px 16px rgba(0,0,0,.25);--elev-3:0 8px 32px rgba(0,0,0,.4);--ease-out:cubic-bezier(.22,1,.36,1);--shadow-sm:0 1px 4px rgba(0,0,0,.15);--shadow-md:0 4px 16px rgba(0,0,0,.2);--shadow-lg:0 8px 32px rgba(0,0,0,.35);--z-dropdown:2000;--z-modal:5000;--z-tooltip:6000;--z-overlay:8000;--z-max:9999;
/* ── Layered Depth Architecture tokens ── */
--canvas-color:#13161d;--glass-heavy:rgba(19,22,29,.96);--glass-mid:rgba(19,22,29,.82);--glass-light:rgba(19,22,29,.68);--glass-ultra-light:rgba(19,22,29,.50);--glass-border:rgba(255,255,255,.06);--glass-border-hover:rgba(255,255,255,.12);--blur-heavy:blur(32px) saturate(160%);--blur-mid:blur(24px) saturate(150%);--blur-light:blur(18px) saturate(140%);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}*:focus-visible{outline:none !important;}img{-webkit-user-drag:none;user-select:none;pointer-events:auto;draggable:false;}html,body{height:100%;overflow:hidden;}
body{background:var(--canvas-color);color:var(--text);font-family:var(--font-ui);display:flex;flex-direction:row;position:relative;}
/* ── Global Canvas — the 'floor' of the entire app ── */
.global-canvas{position:fixed;inset:0;z-index:0;background:var(--canvas-color);transition:background .5s ease,filter .5s ease;pointer-events:none;}
::selection{background:rgba(255,249,62,.2);}
*{scrollbar-width:thin;scrollbar-color:rgba(255,249,62,.12) transparent;}
::-webkit-scrollbar{width:5px;height:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:rgba(255,249,62,.12);border-radius:var(--radius-pill);border:1px solid rgba(255,249,62,.06);}::-webkit-scrollbar-thumb:hover{background:rgba(255,249,62,.22);}
/* Performance: lazy-render off-screen elements.
   The `auto` keyword in contain-intrinsic-size tells the browser to REMEMBER
   the last rendered size of each element and reuse it as the intrinsic size
   when the element goes off-screen again. The <estimate> value is only used
   until the element has been rendered once — after that, the browser
   self-tunes. We vary the estimate per content class so first paint is
   already close to the real height, which eliminates scrollbar jitter. */
.msg-row{content-visibility:auto;contain-intrinsic-size:auto 52px;animation:msgFadeIn .18s ease;}
.msg-row.msg-first{contain-intrinsic-size:auto 72px;}
.msg-row.msg-has-reactions{contain-intrinsic-size:auto 80px;}
.msg-row.msg-has-reactions.msg-first{contain-intrinsic-size:auto 100px;}
.msg-row.msg-has-code{contain-intrinsic-size:auto 140px;}
.msg-row.msg-has-code.msg-first{contain-intrinsic-size:auto 160px;}
.msg-row.msg-has-embed{contain-intrinsic-size:auto 180px;}
.msg-row.msg-has-embed.msg-first{contain-intrinsic-size:auto 200px;}
.msg-row.msg-has-media{contain-intrinsic-size:auto 260px;}
.msg-row.msg-has-media.msg-first{contain-intrinsic-size:auto 300px;}
/* System join/leave rows are always tiny. */
.msg-row.msg-system{contain-intrinsic-size:auto 32px;}
@keyframes msgFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.embed-link-card,.embed-x-card,.embed-invite-card,.embed-spotify-card{content-visibility:auto;contain-intrinsic-size:auto 120px;}
/* Member list rows — same trick, uniform ~40px height. */
.ml-entry{content-visibility:auto;contain-intrinsic-size:auto 40px;}
/* ── Sidebar (vertical, left) ─────────────────────── */
.sidebar{width:72px;min-width:72px;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);display:flex;flex-direction:column;overflow:hidden;z-index:10;flex-shrink:0;padding-bottom:0;align-items:center;border-right:none;position:relative;}
.sidebar-logo{display:none;}
.sidebar-logo-icon{display:none;}
.sidebar-logo-icon img{display:none;}
.sidebar-logo-text{display:none;}
.sidebar-logo.active .sidebar-logo-icon{}
.sidebar-nav{padding:6px 0;display:flex;flex-direction:column;gap:2px;flex-shrink:0;align-items:center;width:100%;padding-top:12px;}
.rail-sep{height:2px;width:32px;background:rgba(255,255,255,.06);margin:6px auto;flex-shrink:0;border-radius:1px;}
.rail-btn{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);position:relative;flex-shrink:0;font-size:0;font-weight:600;color:rgba(255,255,255,.45);}
.rail-btn span{display:none;}
.rail-btn svg{width:26px;height:26px;flex-shrink:0;transition:transform .16s cubic-bezier(.22,1,.36,1);}
.rail-home-logo{width:26px;height:26px;-webkit-mask:url('/Fortized logo.png') center/contain no-repeat;mask:url('/Fortized logo.png') center/contain no-repeat;background-color:rgba(255,255,255,.45);transition:transform .16s cubic-bezier(.22,1,.36,1),background-color .2s;}
.rail-home-btn:hover .rail-home-logo{background-color:rgba(255,255,255,.9);transform:scale(1.06);}
.rail-home-btn.active .rail-home-logo{background-color:var(--bg);}
/* ── Radiance Dwelling Icon (using image mask like home button) ── */
.radiance-icon{width:18px;height:18px;-webkit-mask:url('/fortized badges/radiance.png') center/contain no-repeat;mask:url('/fortized badges/radiance.png') center/contain no-repeat;background-color:rgba(255,255,255,.5);transition:background-color .2s;}
.atel-top-nav-btn:hover .radiance-icon{background-color:rgba(255,255,255,.8);}
.atel-top-nav-btn.active .radiance-icon{background-color:var(--accent);}
.rail-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);border-radius:15px;}
.rail-btn:hover svg{transform:scale(1.06);}
.rail-btn.active{background:var(--accent);color:var(--bg);box-shadow:0 2px 12px rgba(255,249,62,.18);border-radius:var(--radius-lg);}
.rail-btn.active svg{color:var(--bg);}
.rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rail-btn.active::before,.rail-btn:hover::before{display:none;}
/* Selected indicator pill on left side */
.rail-btn::after{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:0;background:#fff;border-radius:0 4px 4px 0;transition:height .2s cubic-bezier(.22,1,.36,1);opacity:0;}
.rail-btn:hover::after{height:20px;opacity:.5;}
.rail-btn.active::after{height:36px;opacity:1;background:var(--accent);box-shadow:0 0 8px rgba(255,249,62,.3);}
.nav-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--sidebar);box-shadow:0 2px 8px rgba(239,68,68,.5);animation:notifBadgePulse 2s ease-in-out infinite;}
.rail-btn[data-tip]:hover::after{display:none;}
/* Bastion items - draggable */
.rail-bastion{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0;font-weight:600;color:rgba(255,255,255,.5);transition:all .2s cubic-bezier(.22,1,.36,1);position:relative;overflow:visible;flex-shrink:0;user-select:none;}
.rail-bastion:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9);border-radius:15px;}
.rail-bastion.active{background:rgba(255,249,62,.1);color:var(--accent);border-radius:17px;}
/* Freeze GIF emblems until hover */
.rail-bastion .bastion-icon canvas.gif-still{display:block;border-radius:inherit;}
.rail-bastion .bastion-icon img.gif-emblem{display:none;}
.rail-bastion:hover .bastion-icon canvas.gif-still{display:none;}
.rail-bastion:hover .bastion-icon img.gif-emblem{display:block;}
/* Selected indicator pill on left side (Discord-style) */
.rail-bastion::after{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:0;background:#fff;border-radius:0 4px 4px 0;transition:height .2s cubic-bezier(.22,1,.36,1);opacity:0;}
.rail-bastion:hover::after{height:20px;opacity:.5;}
.rail-bastion.active::after{height:36px;opacity:1;background:var(--accent);box-shadow:0 0 8px rgba(255,249,62,.3);}
.rail-bastion.active::before{display:none;}
.rail-bastion:hover::before{display:none;}
.rail-bastion.active:hover::before{display:none;}
.rail-bastion[data-tip]:hover::after{height:20px;opacity:.5;}
.rail-bastion.active[data-tip]:hover::after{height:36px;opacity:1;}
.rail-bastion .bastion-icon{width:48px;height:48px;border-radius:inherit;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:20px;background:transparent;transition:transform .16s cubic-bezier(.22,1,.36,1);}
.rail-bastion:hover .bastion-icon{transform:scale(1.05);}
.rail-bastion .bastion-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.rail-notif-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--sidebar);padding:0 3px;z-index:2;box-shadow:0 2px 8px rgba(239,68,68,.5);animation:notifBadgePulse 2s ease-in-out infinite;}
/* Bastion drag-drop */
.rail-bastion.dragging{opacity:.5;transform:scale(.95);}
.rail-bastion.drag-over{border-top:2px solid var(--accent);margin-top:-2px;}
/* Custom tooltip for rail bastions */
.rail-tooltip{position:fixed;left:0;top:0;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:10px;padding:6px 12px 6px 8px;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:0;transition:opacity .15s cubic-bezier(.22,1,.36,1),transform .15s cubic-bezier(.22,1,.36,1);z-index:9999;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:13px;font-weight:600;color:rgba(255,255,255,.9);}
.rail-tooltip.visible{opacity:1;}
.rail-tooltip-icon{width:22px;height:22px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;background:rgba(255,255,255,.06);}
.rail-tooltip-icon img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
/* Bastion group */
.bastion-group{background:transparent;border:none;border-radius:0;margin:2px 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;}
.bastion-group-header{display:none;}
.bastion-group .rail-bastion{margin:0;}
/* Bastion dropdown popup */
.bastion-dropdown{position:fixed;left:80px;top:auto;width:240px;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:12px;z-index:var(--z-dropdown);box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 1px rgba(255,255,255,.05);overflow:hidden;animation:bastionDropIn .15s cubic-bezier(.22,1,.36,1) both;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);}
@keyframes bastionDropIn{from{opacity:0;transform:translateX(-6px) scale(.97);}to{opacity:1;transform:none;}}
.bastion-dropdown .bd-header{padding:14px 16px 10px;border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,rgba(255,249,62,.02),transparent);}
.bastion-dropdown .bd-name{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;}
.bastion-dropdown .bd-info{display:flex;flex-wrap:wrap;gap:5px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05);}
.bastion-dropdown .bd-chip{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);padding:3px 9px;background:rgba(255,255,255,.035);border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.04);}
.bastion-dropdown .bd-actions{padding:4px 6px;}
.bastion-dropdown .bd-action{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);transition:all .12s;}
.bastion-dropdown .bd-action:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);}
.bastion-dropdown .bd-action.danger{color:rgba(248,113,113,.65);}
.bastion-dropdown .bd-action.danger:hover{background:rgba(248,113,113,.07);color:rgba(248,113,113,.9);}
.bastion-dropdown .bd-action .bd-icon{width:18px;text-align:center;font-size:13px;flex-shrink:0;}
.sidebar-header{min-height:36px;display:flex;align-items:center;padding:0 12px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-shrink:0;gap:6px;border-top:1px solid rgba(255,255,255,.03);}
.sidebar-header .hdr-actions{margin-left:auto;display:flex;gap:2px;}
.sidebar-header .hdr-actions button{width:28px;height:28px;border-radius:9px;background:transparent;border:none;color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s;}
.sidebar-header .hdr-actions button:hover{background:rgba(255,255,255,.07);color:#fff;}
/* ── Bastion Sidebar 2027 ────────────────────────── */
.bastion-banner-hero{position:relative;width:100%;height:140px;overflow:visible;flex-shrink:0;margin-bottom:0;}
.bastion-banner-hero img{width:100%;height:140px;object-fit:cover;display:block;}
/* banner shade removed — banner now displays cleanly without gradient overlay */
.bastion-banner-hero .bb-emblem{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);z-index:3;}
.bastion-banner-hero .bb-emblem .bastion-emblem{width:80px;height:80px;border-radius:22px;background:var(--channel);border:4px solid var(--channel);display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s;}
.bastion-banner-hero .bb-emblem .bastion-emblem:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(0,0,0,.7);}
.bastion-banner-hero .bb-emblem .bastion-emblem img{width:100%;height:100%;object-fit:cover;border-radius:18px;}
.bastion-identity{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:44px 12px 0;gap:2px;}
.bastion-identity.no-banner{padding-top:12px;}
.bastion-emblem{width:80px;height:80px;border-radius:22px;background:var(--channel);border:4px solid var(--channel);display:flex;align-items:center;justify-content:center;font-size:36px;flex-shrink:0;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s;}
.bastion-emblem:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(0,0,0,.6);}
.bastion-emblem img{width:100%;height:100%;object-fit:cover;border-radius:18px;}
.bastion-meta{text-align:center;min-width:0;width:100%;padding:0 8px;}
.bastion-meta .bm-name{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;word-break:break-word;overflow-wrap:break-word;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.4);line-height:1.3;}
.bastion-meta .bm-tagline{font-size:11px;color:rgba(255,255,255,.45);word-break:break-word;overflow-wrap:break-word;margin-top:3px;line-height:1.35;}
.bastion-stats-row{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;flex-shrink:0;flex-wrap:wrap;}
.bastion-stats-row .bs-chip{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:rgba(255,255,255,.35);padding:4px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-pill);transition:all .15s;cursor:default;}
.bastion-stats-row .bs-chip:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);}
.bastion-stats-row .bs-chip.boost{background:linear-gradient(135deg,rgba(255,249,62,.05),rgba(251,191,36,.03));border-color:rgba(255,249,62,.1);color:rgba(255,249,62,.6);cursor:pointer;}
.bastion-stats-row .bs-chip.boost:hover{background:linear-gradient(135deg,rgba(255,249,62,.1),rgba(251,191,36,.07));border-color:rgba(255,249,62,.2);}
.bastion-quick-actions{display:flex;justify-content:center;gap:5px;padding:0 10px 8px;flex-shrink:0;}
.bastion-quick-actions button{flex:1;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:rgba(255,255,255,.4);font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .14s;}
.bastion-quick-actions button:hover{background:rgba(255,249,62,.06);color:var(--accent);border-color:rgba(255,249,62,.15);}
/* ── Bastion Name Dropdown (Discord-style) ──── */
.bastion-name-dropdown{position:absolute;top:100%;left:8px;right:8px;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:10px;z-index:var(--z-dropdown);box-shadow:0 12px 40px rgba(0,0,0,.6);overflow:hidden;animation:bndDropIn .15s cubic-bezier(.22,1,.36,1) both;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);margin-top:4px;}
@keyframes bndDropIn{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
.bastion-name-dropdown .bnd-info{display:flex;flex-wrap:wrap;gap:5px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);}
.bastion-name-dropdown .bnd-chip{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:rgba(255,255,255,.4);padding:3px 9px;background:rgba(255,255,255,.035);border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.04);}
.bastion-name-dropdown .bnd-actions{padding:4px 6px;}
.bastion-name-dropdown .bnd-action{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);transition:all .12s;}
.bastion-name-dropdown .bnd-action:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);}
.bastion-name-dropdown .bnd-action.danger{color:rgba(248,113,113,.6);}
.bastion-name-dropdown .bnd-action.danger:hover{background:rgba(248,113,113,.07);color:rgba(248,113,113,.9);}
.bastion-name-dropdown .bnd-action .bnd-icon{width:18px;text-align:center;font-size:13px;flex-shrink:0;}
.bm-name-clickable{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:color .15s;flex-wrap:wrap;}
.bm-name-clickable:hover{color:var(--accent);}
.bm-name-clickable .bm-chevron{font-size:10px;opacity:.4;transition:transform .2s,opacity .2s;}
.bm-name-clickable:hover .bm-chevron{opacity:.7;}
.bm-name-clickable.open .bm-chevron{transform:rotate(180deg);opacity:.7;}
/* ── Room Top Bar (above chat) ──── */
.room-topbar{height:46px;min-height:46px;background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0;border-bottom:1px solid var(--glass-border);}
.room-topbar .rt-hash{font-size:15px;font-weight:700;color:rgba(255,255,255,.12);}
.room-topbar .rt-name{font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;}
.room-topbar .rt-desc{font-size:12px;color:var(--muted);margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.room-topbar .rt-sep{width:1px;height:20px;background:rgba(255,255,255,.06);}
/* ── Topbar Action Icons ──── */
.rt-actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;}
.rt-action-btn{width:34px;height:34px;border-radius:8px;background:transparent;border:none;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;}
.rt-action-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);}
.rt-action-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rt-action-btn svg{width:18px;height:18px;}
/* ── Bot badge ──── */
.bot-badge{display:inline-flex;align-items:center;gap:2px;font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:4px;background:rgba(96,165,250,.15);color:var(--blue);border:1px solid rgba(96,165,250,.25);letter-spacing:.04em;flex-shrink:0;line-height:1.3;vertical-align:middle;}
.ml-entry.bot-entry .ml-name{color:rgba(96,165,250,.7);}
/* ── System messages (join/leave/bot) ──── */
.msg-row.msg-system{padding:4px 20px;margin:2px 0;background:transparent;}
.msg-row.msg-system:hover{background:rgba(255,255,255,.01);}
.msg-row.msg-system .msg-system-content{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.35);font-weight:500;}
.msg-row.msg-system .msg-system-icon{font-size:14px;flex-shrink:0;opacity:.6;}
.msg-row.msg-system .msg-system-text{flex:1;}
.msg-row.msg-system .msg-system-text strong{color:rgba(255,255,255,.55);font-weight:600;}
.msg-row.msg-system .msg-system-time{font-size:10px;color:rgba(255,255,255,.15);flex-shrink:0;}
.msg-row.msg-system:hover .msg-system-content button{opacity:1;}
/* ── Enhanced Mentions ──── */
.mention{display:inline;padding:0 4px;border-radius:6px;cursor:pointer;font-weight:600;font-size:inherit;transition:background .12s,color .12s;position:relative;}
.mention:hover{filter:brightness(1.2);}
.mention-user{background:var(--state-info-dim);color:var(--blue);border:none;}
.mention-user:hover{background:rgba(96,165,250,.22);}
.mention-everyone{background:var(--accent-dim);color:var(--accent);border:none;}
.mention-everyone:hover{background:var(--accent-mid);}
.mention-here{background:var(--state-success-dim);color:var(--green);border:none;}
.mention-here:hover{background:rgba(62,207,110,.2);}
.mention-role{border:none;background:rgba(167,139,250,.1);color:var(--purple);}
.mention-role:hover{background:rgba(167,139,250,.2);}
.mention-room{background:rgba(167,139,250,.1);color:var(--purple);cursor:pointer;border:none;}
.mention-room:hover{background:rgba(167,139,250,.2);}
.mention-badge{position:absolute;top:-20px;left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;background:var(--panel2);border:1px solid var(--border);color:rgba(255,255,255,.5);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;}
.mention:hover .mention-badge{opacity:1;}
/* ── Mention Hover Preview ──── */
.mention-preview{position:fixed;z-index:var(--z-tooltip);background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 12px 44px rgba(0,0,0,.7);width:260px;overflow:hidden;animation:ctxIn .14s cubic-bezier(.22,1,.36,1);}
.mention-preview .mp-header{padding:14px 16px 10px;display:flex;align-items:center;gap:10px;}
.mention-preview .mp-body{padding:0 16px 14px;}
.mention-preview .mp-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);transition:all .12s;}
.mention-preview .mp-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
/* ── Block Code ──── */
.msg-code-block{position:relative;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;padding-top:28px;margin:6px 0;font-family:'Courier New',monospace;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.75);white-space:pre-wrap;word-break:break-all;overflow-x:auto;}
.msg-code-block .code-lang{position:absolute;top:6px;left:12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.2);}
.msg-code-block .code-copy{position:absolute;top:6px;right:8px;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.35);cursor:pointer;transition:all .12s;}
.msg-code-block .code-copy:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.6);}
/* ── Quote Blocks ──── */
.msg-quote{border-left:3px solid rgba(255,249,62,.3);background:rgba(255,255,255,.02);padding:6px 14px;margin:4px 0;border-radius:0 8px 8px 0;font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;}
.msg-quote-collapsible{max-height:80px;overflow:hidden;position:relative;cursor:pointer;transition:max-height .3s ease;}
.msg-quote-collapsible:focus-visible{outline:2px solid rgba(255,249,62,.3);outline-offset:2px;border-radius:4px;}
.msg-quote-collapsible.expanded{max-height:none;}
.msg-quote-collapsible:not(.expanded)::after{content:'Click to expand…';position:absolute;bottom:0;left:0;right:0;padding:8px 14px 4px;background:linear-gradient(to bottom,transparent,var(--channel));font-size:10.5px;color:rgba(255,249,62,.5);font-weight:600;text-align:center;}
/* ── Divider ──── */
.msg-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:10px 0;}
/* ── Small Text ──── */
.msg-small{font-size:11px;color:rgba(255,255,255,.4);line-height:1.5;}
/* ── Highlight ──── */
.msg-highlight{background:rgba(255,249,62,.12);padding:0 3px;border-radius:4px;color:rgba(255,249,62,.85);}
/* ── Structured Titles ──── */
.msg-title1{font-family:var(--font-display);font-size:20px;font-weight:800;margin:12px 0 6px;line-height:1.3;color:#fff;}
.msg-title2{font-family:var(--font-display);font-size:16px;font-weight:700;margin:10px 0 4px;line-height:1.35;color:rgba(255,255,255,.9);}
.msg-subtitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin:8px 0 4px;color:rgba(255,255,255,.4);}
/* ── Improved Spoilers ──── */
.msg-spoiler{display:inline;padding:0 4px;border-radius:5px;background:rgba(255,255,255,.1);color:transparent;cursor:pointer;transition:color .3s,background .3s;user-select:none;filter:blur(4px);-webkit-filter:blur(4px);}
.msg-spoiler.revealed{color:rgba(255,255,255,.8);background:rgba(255,255,255,.05);filter:none;-webkit-filter:none;user-select:auto;}
/* ── Smart Suggestion Panel ──── */
.suggest-panel{position:fixed;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:12px;padding:6px;z-index:9500;box-shadow:0 12px 40px rgba(0,0,0,.7);min-width:240px;max-width:360px;max-height:300px;overflow-y:auto;animation:ctxIn .12s cubic-bezier(.22,1,.36,1);}
.suggest-panel .sp-header{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:2px 8px 5px;}
.suggest-panel .sp-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .1s;}
.suggest-panel .sp-item:hover,.suggest-panel .sp-item.selected{background:rgba(255,249,62,.1);}
.suggest-panel .sp-item .sp-icon{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.suggest-panel .sp-item .sp-label{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7);}
.suggest-panel .sp-item .sp-sub{font-size:10px;color:rgba(255,255,255,.3);}
.suggest-panel .sp-item .sp-badge{font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:4px;margin-left:auto;flex-shrink:0;}
/* ── Message Outline Mode ──── */
.msg-outline{background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px 20px;margin:4px 0;}
.msg-outline .msg-text{font-size:13.5px;line-height:1.7;}
.sidebar-divider{height:1px;background:rgba(255,255,255,.04);margin:4px 10px 2px;flex-shrink:0;}
/* Channel categories - 2027 collapsible */
.ch-cat-wrap{transition:opacity .2s ease;}
.ch-category{display:flex;align-items:center;gap:4px;padding:16px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.2);cursor:pointer;transition:color .15s;user-select:none;}
.ch-category:hover{color:rgba(255,255,255,.4);}
.ch-category .cat-icon{font-size:11px;opacity:.5;margin-right:1px;}
.ch-category .cat-chevron{font-size:7px;transition:transform .2s cubic-bezier(.22,1,.36,1);margin-right:1px;display:inline-block;color:rgba(255,255,255,.15);}
.ch-category:hover .cat-chevron{color:rgba(255,255,255,.35);}
.ch-cat-wrap.collapsed .cat-chevron{transform:rotate(-90deg);}
.ch-category .cat-add{margin-left:auto;width:16px;height:16px;font-size:13px;opacity:0;transition:opacity .15s;background:none;border:none;color:rgba(255,255,255,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ch-category:hover .cat-add{opacity:1;}
.ch-cat-items{overflow:hidden;transition:max-height .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;max-height:1000px;opacity:1;}
.ch-cat-wrap.collapsed .ch-cat-items{max-height:0;opacity:0;pointer-events:none;}
/* Channel items - 2027 */
.ch-item-2027{display:flex;align-items:center;gap:7px;padding:5px 8px;margin:1px 4px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.3);transition:all .1s ease;position:relative;font-weight:500;min-height:32px;}
.ch-item-2027:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);}
.ch-item-2027.active{background:rgba(255,255,255,.06);color:#fff;font-weight:600;}
.ch-item-2027:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px;}
.ch-item-2027.active::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3px;height:40%;background:#fff;border-radius:0 2px 2px 0;}
.ch-item-2027 .ch-hash{font-size:15px;font-weight:600;color:rgba(255,255,255,.15);transition:color .1s;width:18px;text-align:center;flex-shrink:0;}
.ch-item-2027:hover .ch-hash{color:rgba(255,255,255,.3);}
.ch-item-2027.active .ch-hash{color:rgba(255,255,255,.5);}
.ch-item-2027 .ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Unread channel state */
.ch-item-2027.unread{color:rgba(255,255,255,.85);font-weight:700;}
.ch-item-2027.unread .ch-hash{color:rgba(255,255,255,.35);}
.ch-item-2027.unread::after{content:'';position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.3);}
.ch-item-2027 .ch-unread-badge{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--accent);color:#000;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ch-item-2027 .ch-mention-badge{margin-left:auto;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:rgba(248,113,113,.9);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Muted channel */
.ch-item-2027.muted{opacity:.3;transition:opacity .12s;}
.ch-item-2027.muted:hover{opacity:.5;}
.ch-item-2027.muted .ch-muted-icon{font-size:11px;opacity:.5;margin-left:auto;flex-shrink:0;}
/* Voice channel items - 2027 */
.vc-item-2027{display:flex;align-items:center;gap:7px;padding:5px 8px;margin:1px 4px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.3);transition:all .1s ease;font-weight:500;min-height:32px;}
.vc-item-2027:hover{background:rgba(62,207,110,.04);color:rgba(255,255,255,.7);}
.vc-item-2027.active-vc{background:rgba(62,207,110,.06);color:var(--green);font-weight:600;}
.vc-item-2027 .vc-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;opacity:.5;}
.vc-item-2027.active-vc .vc-icon{opacity:1;}
.vc-item-2027 .vc-live{font-size:9px;font-weight:800;color:var(--green);margin-left:auto;display:flex;align-items:center;gap:3px;text-transform:uppercase;letter-spacing:.05em;}
.vc-item-2027 .vc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);animation:vcPulse 1.5s ease-in-out infinite;}
@keyframes vcPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
@keyframes voicePanelBg{0%{background-position:0 0;}100%{background-position:28px 28px;}}
/* ── Secondary Sidebar (context panel) ────────────── */
.sidebar-ctx{width:380px;min-width:380px;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;border-right:1px solid var(--glass-border);padding-bottom:0;}
/* ── Main Wrapper (right side: topbar + content) ──── */
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;}
.topbar{height:44px;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);display:flex;align-items:center;padding:0 191px 0 12px;gap:10px;flex-shrink:0;border-bottom:none;-webkit-app-region:drag;position:relative;z-index:5;}
.topbar button,.topbar input,.topbar .tb-actions,.topbar .tb-onyx-pill,.topbar .tb-search,.topbar .tb-notif-btn,.topbar .tb-win-controls,.topbar .tb-nav-controls{-webkit-app-region:no-drag;}
/* Navigation controls (back / forward / refresh) — sits above sidebar rail */
.tb-nav-controls{display:flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;padding:10px 0 4px;width:100%;}
.tb-nav-btn{width:22px;height:22px;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;transition:background .12s,color .12s;padding:0;}
.tb-nav-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);}
.tb-nav-btn:active{background:rgba(255,255,255,.1);color:#fff;}
.tb-nav-btn.spinning svg{animation:navRefreshSpin .5s ease;}
@keyframes navRefreshSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* Electron window controls */
.tb-win-controls{display:none;align-items:center;gap:0;margin-left:auto;flex-shrink:0;}
body.is-desktop-app .tb-win-controls{display:flex;}
.tb-win-btn{width:46px;height:32px;background:transparent;border:none;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;-webkit-app-region:no-drag;border-radius:0;}
.tb-win-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);}
.tb-win-btn.tb-win-close:hover{background:rgba(232,17,35,.85);color:#fff;}
body.is-desktop-app .topbar{padding-right:0;}
.topbar-title{font-family:var(--font-display);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#fff;letter-spacing:-.01em;}
.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;scroll-behavior:smooth;scrollbar-width:thin;}
.sec-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px 5px;display:flex;align-items:center;justify-content:space-between;}
.sec-label button{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;transition:color .15s;}
.sec-label button:hover{color:var(--accent);}
.ch-item{display:flex;align-items:center;gap:9px;padding:7px 10px;margin:1px 8px;border-radius:12px;cursor:pointer;font-size:12.5px;color:var(--muted);transition:all .14s cubic-bezier(.22,1,.36,1);}
.ch-item:hover{background:rgba(255,255,255,.04);color:var(--text);}
.ch-item.active{background:rgba(255,249,62,.07);color:var(--accent);}
.cat-row{display:flex;align-items:center;gap:5px;padding:10px 8px 4px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;}
.cat-row button{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:14px;opacity:0;transition:opacity .15s,color .15s;}
.cat-row:hover button{opacity:1;}
.cat-row button:hover{color:var(--accent);}
.friend-item{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:1px 5px;border-radius:8px;cursor:pointer;transition:all .12s;}
.friend-item:hover{background:rgba(255,255,255,.04);}
.friend-item.active{background:rgba(255,249,62,.06);}
.friend-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px;}
.gc-icon{border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.fa{position:relative;flex-shrink:0;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:visible;}
.fa .fs{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--sidebar);}
.fs.online{background:var(--green);}.fs.away{background:var(--yellow);}.fs.dnd{background:var(--red);}.fs.offline,.fs.invisible{background:#374151;}
.fi-info{flex:1;min-width:0;}
.fi-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fi-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-btn{border-radius:var(--radius-sm);padding:6px 10px;transition:all .15s;border:1px solid rgba(255,255,255,.1);cursor:pointer;font-family:var(--font-ui);font-weight:600;font-size:12px;}
.ui-btn:hover{transform:translateY(-1px);}
.ui-btn-ghost{background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);}
.ui-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;}
.ui-btn-icon{background:none;border:none;color:rgba(255,255,255,.35);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;}
.ui-btn-icon:hover{background:rgba(255,255,255,.06);color:#fff;}
.ui-btn-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ui-panel{background:linear-gradient(165deg,var(--sidebar),rgba(8,10,18,.98));border:1.5px solid rgba(255,255,255,.08);box-shadow:var(--elev-3);}
.ui-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;}
.ui-badge-warning{background:rgba(245,158,11,.12);color:var(--state-warning);border:1px solid rgba(245,158,11,.24);}
.ui-popover{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);box-shadow:var(--elev-2);backdrop-filter:blur(16px);}
.notif-panel-header{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;}
.notif-mark-read-btn{font-size:11px;padding:4px 10px;}
/* ── Userbar (bottom of sidebar-ctx, parallel with chatbar) ── */
.userbar{display:flex;flex-direction:column;flex-shrink:0;padding:0 12px 8px;gap:0;box-sizing:border-box;z-index:15;width:100%;}
.ub-activity-row{display:none;align-items:center;gap:7px;padding:6px 10px;background:rgba(62,207,110,.04);border:1px solid rgba(62,207,110,.08);border-radius:10px 10px 0 0;margin:0 2px;}
.ub-activity-row.active{display:flex;}
.ub-activity-icon{width:26px;height:26px;border-radius:7px;background:rgba(62,207,110,.1);border:1px solid rgba(62,207,110,.18);flex-shrink:0;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--green);}
.ub-activity-icon img{width:100%;height:100%;border-radius:7px;object-fit:cover;}
.ub-activity-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;}
.ub-activity-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green);line-height:1;}
.ub-activity-name{font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);letter-spacing:-.01em;line-height:1.3;}
.ub-activity-time{font-size:9px;color:var(--muted);font-weight:500;line-height:1;}
.ub-activity-action{display:none;}
/* User row container — rounded to match chatbar */
.ub-user-container{display:flex;align-items:center;background:var(--glass-mid);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border:1.5px solid var(--glass-border);border-radius:12px;height:54px;overflow:hidden;}
.ub-user-row{display:flex;align-items:center;padding:4px 4px 4px 8px;gap:4px;flex:1;min-width:0;height:100%;}
.ua-clickable{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:3px 4px;border-radius:8px;background:transparent;border:none;cursor:pointer;transition:background .12s;justify-content:flex-start;}
.ua-clickable:hover{background:rgba(255,255,255,.05);}
.ua{width:34px;height:34px;border-radius:50%;background:var(--panel);font-size:12px;display:flex;align-items:center;justify-content:center;overflow:visible;flex-shrink:0;position:relative;}
.ua img,.ua>div{width:100%;height:100%;object-fit:cover;border-radius:50%;background:transparent;}
.ua-status-dot{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.12);border-radius:50%;background:transparent;z-index:2;}
.ua-status-dot svg,.profile-status-dot svg,.an-status-dot svg,.rf-status svg,.ml-status svg,.sdot svg{transition:all .2s ease;}
.ua-info{display:block;min-width:0;flex:1;}
.ua-name{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;font-family:var(--font-display);line-height:1.2;}
.ua-status-text{font-size:9.5px;color:rgba(255,255,255,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;line-height:1.2;}
.ua-btns{display:flex;gap:1px;flex-shrink:0;padding-right:4px;}
.ua-btns button{width:26px;height:26px;border-radius:6px;background:transparent;border:none;color:rgba(255,255,255,.3);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.ua-btns button:hover{background:rgba(255,255,255,.06);color:#fff;}
.ua-btns button.active{color:var(--red);background:rgba(248,113,113,.08);}
.ua-btns button.active:hover{background:rgba(248,113,113,.12);}
/* ── Rail Userbar (full userbar in fortized sidebar, matches secondary sidebar) ── */
.rail-userbar{display:flex;flex-direction:column;flex-shrink:0;padding:0 6px 8px;gap:0;box-sizing:border-box;z-index:15;width:100%;}
.rail-ub-activity-row{display:none;align-items:center;gap:6px;padding:5px 8px;background:rgba(62,207,110,.04);border:1px solid rgba(62,207,110,.08);border-radius:9px 9px 0 0;margin:0 2px;}
.rail-ub-activity-row.active{display:flex;}
.rail-ub-container{display:flex;align-items:center;background:var(--glass-mid);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border:1.5px solid var(--glass-border);border-radius:12px;height:54px;overflow:hidden;}
.rail-ub-user-row{display:flex;align-items:center;padding:4px 4px 4px 8px;gap:4px;flex:1;min-width:0;height:100%;}
.rail-ub-clickable{display:flex;align-items:center;gap:7px;flex:1;min-width:0;padding:3px 4px;border-radius:8px;background:transparent;border:none;cursor:pointer;transition:background .12s;justify-content:flex-start;}
.rail-ub-clickable:hover{background:rgba(255,255,255,.05);}
.rail-ub-avatar{width:34px;height:34px;border-radius:50%;background:var(--panel);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:visible;position:relative;flex-shrink:0;}
.rail-ub-avatar img,.rail-ub-avatar>div{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.rail-ub-avatar .ua-status-dot{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border:1.5px solid rgba(255,255,255,.12);border-radius:50%;background:transparent;z-index:2;}
.rail-ub-info{display:block;min-width:0;flex:1;}
.rail-ub-name{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;font-family:var(--font-display);line-height:1.2;}
.rail-ub-status{font-size:9px;color:rgba(255,255,255,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;line-height:1.2;}
.rail-ub-btns{display:flex;gap:1px;flex-shrink:0;padding-right:3px;}
.rail-ub-btns button{width:24px;height:24px;border-radius:6px;background:transparent;border:none;color:rgba(255,255,255,.3);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.rail-ub-btns button:hover{background:rgba(255,255,255,.06);color:#fff;}
.rail-ub-btns button.active{color:var(--red);background:rgba(248,113,113,.08);}
/* Own profile mini panel — redesigned */
.own-profile-panel{position:fixed;bottom:70px;left:80px;width:320px;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:14px;z-index:3000;box-shadow:0 24px 80px rgba(0,0,0,.9),0 0 1px rgba(255,255,255,.06);overflow:hidden;animation:ownPanelIn .2s cubic-bezier(.22,1,.36,1);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);}
@keyframes ownPanelIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.main{flex:1;min-width:0;display:flex;flex-direction:row;background:var(--glass-ultra-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);border-top-left-radius:16px;border-left:1px solid var(--glass-border);border-top:1px solid var(--glass-border);overflow:hidden;}
.tb-sep{width:1px;height:18px;background:var(--border);margin:0 2px;}
.tb-desc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:6px;}
.tb-actions button{background:transparent;border:none;color:#b3b2b4;font-size:16px;cursor:pointer;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .1s;}
.tb-actions button:hover{background:rgba(255,255,255,.07);color:#fff;}
.tb-act-btn{background:transparent;border:none;color:#b3b2b4;cursor:pointer;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.tb-act-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.onyx-pill{display:flex;align-items:center;gap:5px;background:var(--accent-dim);border:1px solid var(--accent-mid);border-radius:var(--radius-pill);padding:5px 12px;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;}
.onyx-pill img{width:14px;height:14px;object-fit:contain;}
.tb-onyx-pill{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(254,248,61,.06),rgba(254,248,61,.02));border:1px solid rgba(254,248,61,.15);border-radius:12px;padding:5px 14px 5px 10px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);white-space:nowrap;}
.tb-onyx-pill:hover{background:linear-gradient(135deg,rgba(254,248,61,.1),rgba(254,248,61,.04));border-color:rgba(254,248,61,.3);transform:translateY(-1px);box-shadow:0 4px 16px rgba(254,248,61,.08);}
.tb-search{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:5px 10px;width:170px;transition:all .2s;}
.tb-search:focus-within{border-color:rgba(255,249,62,.2);width:200px;}
.tb-search input{background:transparent;border:none;outline:none;color:#fff;font-family:var(--font-ui);font-size:12.5px;flex:1;}
.tb-search input::placeholder{color:var(--muted);}
.content{flex:1;overflow:hidden;position:relative;display:flex;min-width:0;min-height:0;}
.view{display:none;flex:1;min-width:0;min-height:0;overflow:hidden;animation:viewFadeIn .2s ease;}.view.active{display:flex;}
@keyframes viewFadeIn{from{opacity:0;}to{opacity:1;}}
.app-loading{position:fixed;inset:0;background:linear-gradient(135deg,var(--rail),var(--bg));display:flex;align-items:center;justify-content:center;z-index:var(--z-max);flex-direction:column;gap:24px;animation:forceHideLoading .4s ease 12s forwards;backdrop-filter:blur(2px);}
.app-loading::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,249,62,.02),transparent);pointer-events:none;}
@keyframes forceHideLoading{to{opacity:0;pointer-events:none;visibility:hidden;z-index:-1;backdrop-filter:blur(0);}}
.app-loading .app-loading-anim{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(255,249,62,.1));animation:pulse 2s ease-in-out infinite;will-change:opacity,transform;}
.app-loading .lbl{font-family:var(--font-display);font-size:14px;font-weight:700;color:rgba(255,255,255,.6);position:relative;z-index:1;text-align:center;}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.02);}}
@keyframes spin{to{transform:rotate(360deg);}}
.load-spinner{width:40px;height:40px;border:3px solid rgba(255,249,62,.12);border-top:3px solid var(--accent);border-right:3px solid var(--accent);border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 20px rgba(255,249,62,.15),inset 0 0 10px rgba(255,249,62,.08);will-change:transform;}
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:var(--z-max,9999);background:var(--yellow);color:var(--bg);font-family:var(--font-display);font-size:13px;font-weight:700;text-align:center;padding:6px 12px;display:none;align-items:center;justify-content:center;gap:8px;animation:offlineBannerIn .25s ease;}
.offline-banner.visible{display:flex;}
.offline-banner svg{width:16px;height:16px;flex-shrink:0;}
.offline-banner .reconnecting{font-weight:400;font-size:12px;opacity:.85;}
@keyframes offlineBannerIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.home-wrap{flex:1;display:flex;overflow:hidden;min-width:0;min-height:0;}
.home-feed{flex:1;overflow-y:auto;min-width:0;display:flex;flex-direction:column;scroll-behavior:smooth;}
.home-right{display:none;}
/* ── UNIFIED VIEW HEADER (Atelier, Discover, DMs) ──── */
.uv-header{position:relative;border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-xl);border:1.5px solid rgba(254,248,61,.1);background:rgba(15,18,29,.96);min-height:240px;}
.uv-header-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;filter:brightness(.5) saturate(1.1);}
.uv-header-grad{position:absolute;inset:0;background:rgba(7,9,14,.55);}
.uv-header-glow{position:absolute;inset:0;background:rgba(254,248,61,.025);pointer-events:none;}
.uv-header-content{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;padding:28px 36px 28px;height:100%;min-height:240px;}
/* ── Active Now Right Sidebar ──── */
.active-now-sidebar{width:260px;min-width:260px;background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.active-now-header{padding:18px 16px 14px;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);flex-shrink:0;display:flex;align-items:center;gap:8px;}
.active-now-header::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(62,207,110,.6),0 0 20px rgba(62,207,110,.2);flex-shrink:0;animation:activePulse 2.5s ease-in-out infinite;}
@keyframes activePulse{0%,100%{box-shadow:0 0 10px rgba(62,207,110,.6),0 0 20px rgba(62,207,110,.2);}50%{box-shadow:0 0 14px rgba(62,207,110,.8),0 0 28px rgba(62,207,110,.3);}}
.active-now-list{flex:1;overflow-y:auto;padding:0 10px 16px;display:flex;flex-direction:column;gap:6px;}
.active-now-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:all .18s cubic-bezier(.22,1,.36,1);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(12px);}
.active-now-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.25),0 0 8px rgba(255,249,62,.03);}
.active-now-item .an-avatar{position:relative;flex-shrink:0;}
.active-now-item .an-avatar .fa{width:36px;height:36px;border-radius:50%;overflow:hidden;font-size:13px;border:1.5px solid rgba(255,255,255,.1);}
.active-now-item .an-status-dot{position:absolute;bottom:-6px;right:-6px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.1);border-radius:50%;background:transparent;z-index:2;}
.active-now-item .an-info{flex:1;min-width:0;}
.active-now-item .an-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);}
.active-now-item .an-activity{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;margin-top:2px;}
.active-now-empty{padding:28px 16px;text-align:center;}
.active-now-empty .an-empty-icon{margin-bottom:10px;opacity:.3;}
.active-now-empty .an-empty-text{font-size:12px;color:rgba(255,255,255,.25);line-height:1.6;}
.active-now-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Home banner ad placeholder (main column, below DYK) — padded card with rounded image inside */
.home-banner-ad{margin:0 28px;display:flex;justify-content:center;}
.home-banner-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:100%;max-width:760px;min-height:140px;margin:0 auto;padding:12px 14px;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:center;cursor:pointer;transition:border-color .18s;overflow:hidden;}
.home-banner-card:hover{border-color:rgba(255,249,62,.12);}
.home-banner-ad .ad-banner-inner{display:flex;flex-direction:column;gap:8px;width:100%;}
.home-banner-ad img,.home-banner-ad picture,.home-banner-ad .ad-banner-img{width:100%;display:block;object-fit:cover;border-radius:10px;}
.home-banner-ad .ad-empty-banner,.home-banner-ad .ad-empty{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.55;border-radius:10px;background:rgba(255,255,255,.02);border:1px dashed var(--border);}
/* Generic ad-empty placeholder (sidebar, discover, anywhere an ad slot is rendered empty) */
.ad-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.55;border-radius:10px;background:rgba(255,255,255,.02);border:1px dashed var(--border);min-height:100px;}
.ad-empty-banner{min-height:100px;}

/* Home friends-today horizontal strip (main column) */
.home-friends-today{padding:4px 28px 2px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;}
.home-friends-today::-webkit-scrollbar{height:6px;}
.home-friends-today::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}
.hft-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:80px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.hft-card:hover{background:rgba(255,249,62,.04);border-color:rgba(255,249,62,.18);transform:translateY(-1px);}
.hft-av-wrap{position:relative;width:46px;height:46px;}
.hft-av{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--panel2);}
.hft-dot{position:absolute;bottom:-2px;right:-2px;width:14px;height:14px;border-radius:50%;border:2px solid var(--channel);}
.hft-name{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}

/* Home trending items horizontal strip (main column) */
.home-trending-items-row{padding:4px 28px 2px;display:flex;gap:12px;overflow-x:auto;scrollbar-width:thin;}
.home-trending-items-row::-webkit-scrollbar{height:6px;}
.home-trending-items-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px;}
.hti-card{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:128px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.hti-card:hover{background:rgba(255,249,62,.04);border-color:rgba(255,249,62,.18);transform:translateY(-1px);}
.hti-img{aspect-ratio:1/1;background:var(--panel2);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hti-img img{width:100%;height:100%;object-fit:cover;}
.hti-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hti-price{font-size:11.5px;font-weight:800;color:var(--accent);display:flex;align-items:center;gap:4px;}
.hti-onyx{color:var(--accent);}

/* Home empty strip shared */
.home-empty-strip{margin:0 28px;padding:14px 16px;background:var(--panel);border:1px dashed var(--border);border-radius:12px;display:flex;align-items:center;gap:12px;}

/* Home trending forum posts */
#home-trending-forum{padding:6px 28px 0;display:flex;flex-direction:column;gap:8px;}
.trending-post{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;}
.trending-post:hover{background:rgba(255,249,62,.04);border-color:rgba(255,249,62,.18);transform:translateY(-1px);}
.trending-post-rank{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.04);}
.trending-post-info{flex:1;min-width:0;}
.trending-post-title{font-size:13px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trending-post-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tpm-sep{width:1px;height:10px;background:rgba(255,255,255,.08);}
.trending-post-cat{font-weight:700;}
.trending-post-arrow{flex-shrink:0;color:var(--muted);font-size:18px;font-weight:700;}
.trending-empty{padding:20px;background:var(--panel);border:1px dashed var(--border);border-radius:12px;text-align:center;}

/* Home trending items (right sidebar) */
.home-trending-items{padding:0 10px 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.trending-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:7px;cursor:pointer;transition:all .15s;}
.trending-item:hover{background:rgba(255,249,62,.05);border-color:rgba(255,249,62,.22);transform:translateY(-1px);}
.trending-item-img{aspect-ratio:1/1;background:var(--panel2);border-radius:6px;overflow:hidden;margin-bottom:5px;display:flex;align-items:center;justify-content:center;}
.trending-item-img img{width:100%;height:100%;object-fit:cover;}
.trending-item-name{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trending-item-price{font-size:10px;font-weight:700;color:var(--accent);}
.trending-items-empty{padding:14px 12px;text-align:center;}
.uv-header-left{display:flex;align-items:center;gap:14px;}
.uv-header-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid;}
.uv-header-title{font-family:var(--font-display);font-size:28px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.uv-header-sub{font-size:13px;color:rgba(255,255,255,.4);margin-top:5px;}
.uv-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* ── REALM FEED (replaces stats + quick nav) ──── */
.realm-section{padding:0 28px;margin-bottom:28px;}
.realm-section-title{font-family:var(--font-display);font-size:13px;font-weight:700;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:10px;margin-bottom:14px;letter-spacing:.06em;text-transform:uppercase;}
.realm-section-title::before{content:"";width:3px;height:14px;background:var(--accent);border-radius:2px;flex-shrink:0;box-shadow:0 0 6px rgba(255,249,62,.2);}
.realm-section-title .rst-sub{font-family:var(--font-ui);font-size:10px;font-weight:600;color:rgba(255,255,255,.25);margin-left:auto;text-transform:none;letter-spacing:.02em;}
.realm-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.realm-scroll::-webkit-scrollbar{display:none;}
.realm-card{min-width:180px;max-width:220px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;flex-shrink:0;}
.realm-card:hover{border-color:rgba(255,249,62,.2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 16px rgba(255,249,62,.04);background:rgba(255,255,255,.04);}
.realm-card .rc-emblem{width:40px;height:40px;border-radius:12px;background:var(--panel2);border:1px solid var(--border);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;margin-bottom:12px;}
.realm-card .rc-emblem img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.realm-card .rc-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:#fff;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.realm-card .rc-meta{font-size:11px;color:var(--muted);}
.realm-card .rc-glow{position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,var(--accent),rgba(255,249,62,.3),transparent);opacity:0;transition:opacity .25s;box-shadow:0 0 10px rgba(255,249,62,.15);}
.realm-card:hover .rc-glow{opacity:.8;}
/* Online friends horizontal scroll */
.realm-friend{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px;cursor:pointer;transition:transform .18s;flex-shrink:0;text-decoration:none;padding:6px 4px;border-radius:10px;}
.realm-friend:hover{transform:translateY(-3px);background:rgba(255,255,255,.03);}
.realm-friend .rf-av{position:relative;width:42px;height:42px;border-radius:50%;overflow:visible;margin-bottom:2px;}
.realm-friend .rf-av img,.realm-friend .rf-av .fa{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.1);transition:border-color .18s;}
.realm-friend:hover .rf-av img,.realm-friend:hover .rf-av .fa{border-color:rgba(255,249,62,.2);}
.realm-friend .rf-status{position:absolute;bottom:0;right:-2px;width:14px;height:14px;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;}
.realm-friend .rf-name{font-size:10px;color:rgba(255,255,255,.4);max-width:64px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s;}
.realm-friend:hover .rf-name{color:rgba(255,255,255,.7);}
/* Scrolled DYK — medieval parchment style */
.realm-lore{display:flex;align-items:center;gap:14px;padding:12px 18px;background:rgba(255,249,62,.03);border:1px solid rgba(255,249,62,.08);border-radius:12px;font-size:12px;margin-bottom:24px;position:relative;overflow:hidden;transition:opacity .3s;}
.realm-lore .rl-tag{font-family:var(--font-display);font-size:9px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;background:rgba(255,249,62,.08);padding:3px 8px;border-radius:6px;flex-shrink:0;}
.realm-lore .rl-text{color:rgba(255,255,255,.4);line-height:1.5;}

/* ── HERO 2.0 ──────────────────────────────────── */
.home-hero{width:100%;min-height:240px;background:linear-gradient(180deg,rgba(15,17,25,.3) 0%,rgba(15,17,25,.85) 100%);position:relative;overflow:hidden;flex-shrink:0;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 40px;border-bottom:1px solid rgba(255,249,62,.08);}
.home-hero::before{content:"";position:absolute;inset:0;background:url("/Fortized%20Grand%20Castle%20v2.png") center/cover no-repeat;opacity:.4;pointer-events:none;}
.home-hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(transparent,var(--channel,#12141b));pointer-events:none;z-index:1;}
/* Sparkle particles container */
.hero-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.hero-sparkle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,249,62,.7);box-shadow:0 0 6px rgba(255,249,62,.4);animation:sparkleDrift 6s ease-in-out infinite;opacity:0;}
@keyframes sparkleDrift{0%{opacity:0;transform:translateY(20px) scale(.5);}20%{opacity:.8;}50%{opacity:.4;transform:translateY(-60px) scale(1);}80%{opacity:.6;}100%{opacity:0;transform:translateY(-120px) scale(.3);}}
/* Floating items (dice, hashtag, etc.) */
.hero-float-items{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.hero-float-item{position:absolute;font-size:20px;opacity:.12;animation:floatItem 12s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,249,62,.15));}
@keyframes floatItem{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(15deg);}}
@keyframes revealUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
.hero-left-content{position:relative;z-index:2;animation:revealUp .5s cubic-bezier(.22,1,.36,1) both;padding:32px 0 28px;}
.hero-greeting{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px;display:flex;align-items:center;gap:6px;letter-spacing:.03em;text-transform:uppercase;font-weight:600;}
.home-hero h1{font-family:var(--font-display);font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1.0;margin-bottom:18px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5);}
.home-hero h1 em{font-style:normal;color:var(--accent);text-shadow:0 0 30px rgba(255,249,62,.35),0 2px 20px rgba(0,0,0,.5);}
.home-hero-actions{display:flex;gap:8px;flex-wrap:wrap;}
.home-hero-actions .hero-btn{padding:9px 20px;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .18s cubic-bezier(.22,1,.36,1);border:none;display:flex;align-items:center;gap:6px;letter-spacing:.02em;}
.home-hero-actions .hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.hero-btn-primary{background:var(--accent);color:#13161d;box-shadow:0 2px 12px rgba(255,249,62,.2),inset 0 1px 0 rgba(255,255,255,.15);}
.hero-btn-primary:hover{background:#fffb5e;box-shadow:0 6px 24px rgba(255,249,62,.35),inset 0 1px 0 rgba(255,255,255,.2);}
.hero-btn-secondary{background:rgba(255,249,62,.04);color:var(--accent);border:1.5px solid rgba(255,249,62,.35);box-shadow:0 0 12px rgba(255,249,62,.06);}
.hero-btn-secondary:hover{background:rgba(255,249,62,.1);border-color:rgba(255,249,62,.55);box-shadow:0 4px 20px rgba(255,249,62,.12);}
.hero-btn-create{background:rgba(167,139,250,.12);color:var(--purple);border:1.5px solid rgba(167,139,250,.25);box-shadow:0 0 12px rgba(167,139,250,.08);animation:createPulse 3s ease-in-out infinite;}
.hero-btn-create:hover{background:rgba(167,139,250,.22);border-color:rgba(167,139,250,.45);box-shadow:0 4px 20px rgba(167,139,250,.15);animation:none;}
@keyframes createPulse{0%,100%{box-shadow:0 0 12px rgba(167,139,250,.08);}50%{box-shadow:0 0 20px rgba(167,139,250,.15);}}
/* Joyster character */
.hero-joyster-wrap{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;height:200px;width:180px;animation:revealUp .6s cubic-bezier(.22,1,.36,1) .1s both;}
.hero-joyster-img{height:175px;object-fit:contain;filter:drop-shadow(0 8px 28px rgba(255,249,62,.15)) drop-shadow(0 4px 12px rgba(0,0,0,.4));animation:joysterIdle 4s ease-in-out infinite;cursor:pointer;transition:transform .2s;}
.hero-joyster-img:hover{transform:scale(1.05);}
@keyframes joysterIdle{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* Joyster speech bubble — sits inside .home-hero, positioned absolute */
.joyster-bubble{position:absolute;top:10px;right:110px;transform:scale(.85) translateY(10px);background:linear-gradient(135deg,rgba(18,22,34,.97),rgba(12,15,24,.98));border:1.5px solid rgba(255,249,62,.25);border-radius:16px;padding:10px 18px;font-size:13px;font-style:italic;color:rgba(255,255,255,.88);width:max-content;max-width:260px;white-space:normal;word-wrap:break-word;opacity:0;transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;pointer-events:none;z-index:10;box-shadow:0 8px 32px rgba(0,0,0,.45),0 0 20px rgba(255,249,62,.06);text-align:center;backdrop-filter:blur(12px);letter-spacing:.01em;line-height:1.5;}
.joyster-bubble::before{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(ellipse at 50% 0%,rgba(255,249,62,.06),transparent 60%);pointer-events:none;}
.joyster-bubble::after{content:'';position:absolute;bottom:-7px;right:30px;border:7px solid transparent;border-top-color:rgba(18,22,34,.97);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}
.joyster-bubble.show{opacity:1;transform:scale(1) translateY(0);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(255,249,62,.08);}
@keyframes joysterBubblePulse{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 30px rgba(255,249,62,.08);}50%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 40px rgba(255,249,62,.12);}}
.joyster-bubble.show{animation:joysterBubblePulse 3s ease-in-out infinite;}
/* Knight background ghost */
.hero-knight-bg{position:absolute;right:-30px;bottom:-20px;height:280px;max-height:280px;max-width:300px;opacity:.06;filter:blur(1.5px) grayscale(.4);pointer-events:none;z-index:0;object-fit:contain;overflow:hidden;}
body.is-desktop-app .hero-knight-bg{height:240px;max-height:240px;right:-20px;bottom:-10px;}
/* ── Ambient glow — makes the platform feel alive ── */
@keyframes ambientPulse{0%,100%{opacity:.6;}50%{opacity:1;}}
@keyframes subtleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.rail-btn.active .rb-icon{animation:subtleFloat 3s ease-in-out infinite;}
.btn-a::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:none;}
.btn-a:hover::after{animation:btnShimmer .6s ease forwards;}
@keyframes btnShimmer{to{transform:translateX(100%);}}
.empty-state .ei{animation:subtleFloat 4s ease-in-out infinite;}
/* Warm greeting wave animation */
@keyframes wave{0%,100%{transform:rotate(0);}25%{transform:rotate(20deg);}75%{transform:rotate(-10deg);}}
.hero-greeting .wave-emoji{display:inline-block;animation:wave 2s ease-in-out 1;}

/* ── Hero micro-status strip ── */
.hero-status-strip{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:11.5px;color:rgba(255,255,255,.35);animation:revealUp .7s cubic-bezier(.22,1,.36,1) .2s both;}
.hero-status-strip .hss-item{display:flex;align-items:center;gap:5px;}
.hero-status-strip .hss-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.hero-status-strip .hss-sep{width:1px;height:12px;background:rgba(255,255,255,.08);}
/* ── Quick action strip ── */
.home-quick-strip{display:flex;gap:10px;flex-wrap:wrap;}
.home-quick-strip .hqs-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0;}
.home-quick-strip .hqs-btn:hover{background:rgba(255,249,62,.05);border-color:rgba(255,249,62,.15);color:rgba(255,255,255,.8);transform:translateY(-1px);}
.home-quick-strip .hqs-btn svg{opacity:.5;flex-shrink:0;}
.home-quick-strip .hqs-label{font-size:10px;color:rgba(255,255,255,.25);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
/* ── STAT STRIP 2.0 ──────────────────────────────── */
.home-stat-strip{display:none;}
.hss-item{display:none;}
.hss-val{display:none;}
.hss-label{display:none;}
.hss-icon{display:none;}

/* ── MAIN SCROLL ──────────────────────────────────── */
.home-main-scroll{padding:24px 28px 48px;}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-hdr h3{font-family:var(--font-display);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.section-hdr h3::before{content:"";width:14px;height:3.5px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px rgba(255,249,62,.2);}

/* ── QUICK ACCESS TILES (legacy, hidden) ──── */
.quick-nav{display:none;}
.qn-tile{display:none;}

/* ── ACTIVITY FEED 2.0 ───────────────────────────── */
.activity-item{display:flex;align-items:center;gap:12px;padding:13px 16px;background:linear-gradient(135deg,var(--panel),rgba(22,26,35,.85));border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);margin-bottom:7px;}
.activity-item:hover{border-color:rgba(255,249,62,.18);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2),0 0 12px rgba(255,249,62,.04);}
.act-icon{width:38px;height:38px;border-radius:50%;background:var(--panel2);border:1px solid var(--border);font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative;}
.act-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.act-text{flex:1;min-width:0;}
.act-text p{font-size:13.5px;color:var(--text);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-time{font-size:11px;color:var(--muted);margin-top:1px;}
.act-dm-btn{padding:6px 14px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted-light);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .16s cubic-bezier(.22,1,.36,1);flex-shrink:0;display:flex;align-items:center;gap:4px;}
.act-dm-btn:hover{background:rgba(255,249,62,.1);border-color:rgba(255,249,62,.25);color:var(--accent);box-shadow:0 2px 10px rgba(255,249,62,.1);}

/* ── RIGHT PANEL (legacy, hidden) ──── */
.rp-section{display:none;}
/* News panel */
.rp-news-item{padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .14s;margin-bottom:3px;position:relative;}
.rp-news-item:hover{background:rgba(255,255,255,.04);}
.rp-news-badge{position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.rp-news-tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:3px;}
.rp-news-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.35;}
.rp-news-date{font-size:10.5px;color:var(--muted);}

/* ── DYK ─────────────────────────────────────────── */
.did-you-know{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,249,62,.03);border:1px solid rgba(255,249,62,.08);border-radius:12px;font-size:12.5px;margin-bottom:20px;}
.dyk-tag{font-family:var(--font-display);font-size:10px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;}
/* ── Chat 2.0 — Premium Communication ─────────── */
.chat-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.chat-msgs{flex:1;overflow-y:auto;padding:20px 0 8px;display:flex;flex-direction:column;will-change:scroll-position;-webkit-overflow-scrolling:touch;transform:translateZ(0);}
.chat-welcome{padding:28px 24px 22px;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:12px;}
.chat-welcome .w-av{width:60px;height:60px;border-radius:50%;background:var(--panel);border:2px solid rgba(255,255,255,.06);font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.2);}
.chat-welcome .w-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.chat-welcome h3{font-family:var(--font-display);font-size:20px;font-weight:800;margin-bottom:4px;}
.chat-welcome p{font-size:13px;color:var(--muted);line-height:1.5;}
/* Day separators — elegant centered pill */
.date-div{display:flex;align-items:center;gap:14px;padding:14px 24px;font-size:10px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;}
.date-div::before,.date-div::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.04);}
.date-div span{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-pill);padding:4px 14px;white-space:nowrap;font-size:10px;}
/* Message rows — more breathing room */
.msg-row{display:flex;padding:2px 20px 2px 20px;position:relative;min-width:0;transition:background .12s;}
.msg-row:hover{background:rgba(255,255,255,.018);}
.msg-row iframe{loading:lazy;}
.msg-row.msg-first{padding-top:14px;margin-top:4px;}
.msg-row.msg-editing{background:rgba(255,249,62,.03);transition:background .2s;}
/* PFP column with subtle separator */
.msg-av-wrap{width:58px;min-width:58px;display:flex;justify-content:center;padding-top:2px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.025);margin-right:4px;}
.msg-av-inner{width:38px;height:38px;border-radius:50%;background:var(--panel);font-size:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .15s;}
.msg-av-inner:hover{transform:scale(1.05);}
.msg-av-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:transparent;}
.msg-time-small{font-size:9.5px;color:rgba(255,255,255,.2);white-space:nowrap;padding-top:5px;min-width:44px;visibility:hidden;text-align:right;}
.msg-row.msg-cont:hover .msg-time-small{visibility:visible;}
/* Content column */
.msg-content-col{flex:1;min-width:0;padding-left:4px;}
.msg-header{display:flex;align-items:center;gap:4px;margin-bottom:3px;flex-wrap:wrap;}
.msg-author{font-size:14px;font-weight:600;color:#fff;cursor:pointer;line-height:1.3;}
.msg-author:hover{text-decoration:underline;}
.msg-timestamp{font-size:10px;color:rgba(255,255,255,.3);margin-left:4px;font-weight:500;}
.msg-text{font-size:14.5px;color:rgba(221,227,237,.88);line-height:1.65;word-break:break-word;letter-spacing:.01em;}
.msg-text code{background:rgba(255,255,255,.06);padding:1px 6px;border-radius:5px;font-size:12px;font-family:monospace;}
.msg-edited{font-size:9.5px;color:rgba(255,255,255,.25);margin-left:4px;cursor:default;transition:color .15s;font-weight:500;letter-spacing:.01em;}
.msg-edited:hover{color:rgba(255,255,255,.45);text-decoration:underline;text-decoration-style:dotted;}
/* Reactions */
.msg-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.r-pill{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-pill);padding:3px 10px;font-size:12px;cursor:pointer;transition:all .15s;position:relative;}
.r-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);}
.r-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.r-pill:active{transform:scale(.95);}
.r-pill.mine{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);}
.r-pill.super-react{animation:sr-pulse .5s ease;transform-origin:center;}
.r-super-btn{display:none;width:16px;height:16px;padding:2px;background:rgba(255,215,62,.12);border:1px solid rgba(255,215,62,.24);border-radius:50%;cursor:pointer;transition:all .12s;color:var(--accent);flex-shrink:0;align-items:center;justify-content:center;}
.r-pill:hover .r-super-btn{display:flex;}
.r-super-btn:hover{background:rgba(255,215,62,.22);border-color:rgba(255,215,62,.4);transform:scale(1.1);}
@keyframes sr-pulse{0%{transform:scale(1);}30%{transform:scale(1.3);}60%{transform:scale(0.95);}100%{transform:scale(1);}}
.sr-particle{position:fixed;font-size:18px;pointer-events:none;z-index:var(--z-max,9999);animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.2,.6,.3,1);}
@keyframes sr-float{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-80px) scale(.6);}}
@keyframes sr-spin{0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1);}100%{opacity:0;transform:translateY(-70px) rotate(360deg) scale(.5);}}
@keyframes sr-bounce{0%{opacity:1;transform:translate(0,0) scale(1);}50%{transform:translate(15px,-50px) scale(1.2);}100%{opacity:0;transform:translate(30px,-90px) scale(.4);}}
@keyframes sr-zigzag{0%{opacity:1;transform:translate(0,0) scale(1);}33%{transform:translate(-20px,-30px) scale(1.1);}66%{transform:translate(20px,-60px) scale(.8);}100%{opacity:0;transform:translate(-10px,-90px) scale(.3);}}
/* Hover quick actions — fade in, not pop */
.msg-acts{display:flex;gap:1px;position:absolute;right:16px;top:-12px;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:8px;padding:2px;z-index:10;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;transform:translateY(3px);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);}
.msg-row:hover .msg-acts{opacity:1;pointer-events:auto;transform:translateY(0);}
.msg-acts button{background:none;border:none;color:rgba(255,255,255,.4);font-size:13px;cursor:pointer;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.msg-acts button:hover{background:rgba(255,255,255,.08);color:#fff;}
.msg-acts button:active{transform:scale(.9);}
.msg-acts .msg-act-qr{font-size:15px;padding:0;line-height:1;}
.msg-acts .msg-act-qr:hover{background:rgba(255,255,255,.1);transform:scale(1.15);}
/* Blocked / Ignored message blur */
.msg-row.msg-blurred .msg-content-col{filter:blur(6px);user-select:none;pointer-events:none;transition:filter .2s;}
.msg-row.msg-blurred .msg-acts{display:none!important;}
.msg-blur-reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;}
.msg-blur-reveal span{font-size:12px;font-weight:600;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:4px 14px;border-radius:8px;transition:all .15s;}
.msg-blur-reveal:hover span{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);}
.msg-row.msg-blurred.msg-revealed .msg-content-col{filter:none;user-select:auto;pointer-events:auto;}
.msg-row.msg-blurred.msg-revealed .msg-blur-reveal{display:none;}
/* Blocked profile blur overlay */
.profile-blocked-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(7,9,14,.85),rgba(7,9,14,.88));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;gap:10px;animation:overlayFadeIn .3s cubic-bezier(.22,1,.36,1);}
@keyframes overlayFadeIn{from{opacity:0;backdrop-filter:blur(0);}to{opacity:1;backdrop-filter:blur(14px);}}
.profile-blocked-overlay .pbo-icon{font-size:36px;opacity:.5;}
.profile-blocked-overlay .pbo-text{font-size:14px;font-weight:700;color:rgba(255,255,255,.5);}
.profile-blocked-overlay .pbo-sub{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:6px;}
.profile-blocked-overlay .pbo-reveal{padding:7px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.profile-blocked-overlay .pbo-reveal:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);}
/* Ignore duration picker modal */
.ignore-picker{display:flex;flex-direction:column;gap:4px;}
.ignore-picker .ig-opt{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:all .12s;font-size:13px;color:rgba(255,255,255,.7);}
.ignore-picker .ig-opt:hover{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.04);}
.ignore-picker .ig-opt .ig-dur{margin-left:auto;font-size:11px;color:rgba(255,255,255,.3);}
/* Own messages */
.msg-row.own .msg-text{color:rgba(255,255,255,.85);}
/* Reply / quote — soft left border, lighter bg, clickable */
.msg-reply-ref{display:flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(255,255,255,.025);border-left:2px solid rgba(255,249,62,.25);border-radius:0 6px 6px 0;margin-bottom:6px;font-size:11.5px;color:rgba(255,255,255,.4);cursor:pointer;transition:background .12s;}
.msg-reply-ref:hover{background:rgba(255,255,255,.05);}

/* Forwarded-message card (Discord-style) */
.msg-fwd-card{
  margin:0 0 6px 0;
  padding:6px 10px 7px 10px;
  border-left:3px solid rgba(124,92,191,.55);
  background:linear-gradient(90deg,rgba(124,92,191,.08),rgba(124,92,191,.02) 60%,transparent);
  border-radius:0 8px 8px 0;
  max-width:460px;
  width:fit-content;
}
.msg-fwd-badge{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  font-weight:700;
  color:rgba(186,156,255,.85);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.msg-fwd-badge svg{flex-shrink:0;}
.msg-fwd-label{margin-right:2px;}
.msg-fwd-ctx{font-weight:600;color:rgba(255,255,255,.35);text-transform:none;letter-spacing:0;}
.msg-fwd-by{font-weight:500;color:rgba(255,255,255,.28);text-transform:none;letter-spacing:0;}
.msg-fwd-origin{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  font-size:11.5px;
  color:rgba(255,255,255,.55);
}
.msg-fwd-pfp{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:rgba(255,255,255,.06);
}
.msg-fwd-pfp-fb{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.55);
  background:rgba(124,92,191,.18);
}
.msg-fwd-name{font-weight:600;color:rgba(255,255,255,.82);}
.msg-fwd-time{opacity:.5;margin-left:4px;font-size:10.5px;}
.msg-fwd-min{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:rgba(124,92,191,.06);
  border-left:2px solid rgba(124,92,191,.35);
  border-radius:0 6px 6px 0;
  margin-bottom:5px;
  font-size:11.5px;
  color:rgba(186,156,255,.7);
}
.msg-fwd-min span{font-weight:600;}
.msg-forward-tag{font-size:10px;color:rgba(255,255,255,.25);margin-bottom:3px;}
.reply-bar{display:none;align-items:center;gap:10px;padding:8px 16px;background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.04);font-size:12.5px;}
.reply-bar.show{display:flex;}
.reply-bar-text{flex:1;color:var(--muted-light);}
.reply-bar-text strong{color:var(--accent);}
.reply-bar button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;}
/* Chat input */
.chat-input-wrap{padding:0 12px 10px;flex-shrink:0;box-sizing:border-box;}
/* Typing indicator — minimal redesign */
.typing-indicator{display:flex;align-items:center;gap:8px;padding:4px 20px 6px;min-height:20px;font-size:11px;color:rgba(255,255,255,.3);transition:opacity .25s;letter-spacing:.01em;}
.typing-dots{display:flex;gap:3px;align-items:center;}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25);animation:typingBounce 1.4s infinite ease-in-out;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes typingBounce{0%,70%,100%{transform:translateY(0);opacity:.4;}35%{transform:translateY(-4px);opacity:1;}}
/* Chat input redesign — inline layout */
.chat-input-outer{background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border:1.5px solid var(--glass-border);border-radius:12px;overflow:visible;transition:border-color .18s, box-shadow .18s;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.2);position:relative;}
.chat-input-outer:focus-within{border-color:rgba(255,255,255,.12);box-shadow:0 6px 24px rgba(0,0,0,.28);}
.chat-input-outer, .chat-input-row, .chat-input-row textarea, .ci-preview-wrap, .ci-preview-wrap textarea{outline:none!important;}
.chat-input-row textarea:focus, .chat-input-row textarea:focus-visible{outline:none!important;box-shadow:none!important;}
.chat-input-toolbar{display:none;}
.cit-btn{background:transparent;border:none;color:rgba(255,255,255,.32);cursor:pointer;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .18s cubic-bezier(.22,1,.36,1);flex-shrink:0;position:relative;}
.cit-btn:hover{background:rgba(255,249,62,.1);color:var(--accent);transform:scale(1.08);}
.cit-btn.active{color:var(--accent);background:rgba(255,249,62,.12);box-shadow:0 0 12px rgba(255,249,62,.15);}
.cit-btn::after,
.cit-gif::after {
  display: none !important;
}
.cit-sep{width:1px;height:18px;background:rgba(255,255,255,.06);margin:0 2px;flex-shrink:0;}
.cit-gif{background:transparent;border:none;color:rgba(255,255,255,.32);cursor:pointer;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .18s cubic-bezier(.22,1,.36,1);flex-shrink:0;position:relative;}
.cit-gif:hover{background:rgba(255,249,62,.1);color:var(--accent);transform:scale(1.08);}
.chat-input-row{display:flex;align-items:flex-end;padding:10px 12px 10px 10px;gap:5px;}
.chat-input-row textarea{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-ui);font-size:14.5px;resize:none;max-height:160px;min-height:28px;line-height:1.55;padding:6px 4px;position:relative;z-index:2;}
.ci-preview-wrap textarea{width:100%;}
.chat-input-row textarea::placeholder{color:rgba(255,255,255,.2);}
/* Rich contenteditable chat input — Discord-style inline emoji rendering */
.chat-input-row .chat-input-rich{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-ui);font-size:14.5px;max-height:160px;min-height:28px;line-height:1.55;padding:6px 4px;position:relative;z-index:2;overflow-y:auto;overflow-x:hidden;word-wrap:break-word;white-space:pre-wrap;cursor:text;}
.chat-input-row .chat-input-rich:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.2);pointer-events:none;}
.chat-input-row .chat-input-rich:focus{outline:none;}
.chat-input-row .chat-input-rich .rci-emoji{width:1.4em;height:1.4em;object-fit:contain;vertical-align:-.27em;display:inline-block;user-select:text;-webkit-user-select:text;margin:0 1px;}
.chat-input-row .chat-input-rich br{line-height:1.55;}
.chat-input-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:0 4px;}
.chat-send-btn{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#e6e034);border:none;color:#13161d;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 8px rgba(255,249,62,.15);}
.chat-send-btn.visible{display:flex;}
.chat-send-btn:hover{filter:brightness(1.08);transform:scale(1.05);box-shadow:0 4px 16px rgba(255,249,62,.25);}
.chat-send-btn:active{transform:scale(.9);transition:transform .08s ease-out;}
/* Attach button (left side of input) */
.cit-attach{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .16s cubic-bezier(.22,1,.36,1);font-size:18px;font-weight:300;}
.cit-attach:hover{background:rgba(255,249,62,.07);border-color:rgba(255,249,62,.12);color:var(--accent);}
/* Sticker picker button */
.cit-sticker{background:transparent;border:none;color:rgba(255,255,255,.32);cursor:pointer;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .18s cubic-bezier(.22,1,.36,1);flex-shrink:0;position:relative;}
.cit-sticker:hover{background:rgba(255,249,62,.1);color:var(--accent);transform:scale(1.08);}
.cit-sticker::after{content:'Stickers';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.9);background:var(--panel2);color:rgba(255,255,255,.7);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;border:1px solid var(--border);}
.cit-sticker:hover::after{opacity:1;transform:translateX(-50%) scale(1);}
/* Bot commands shortcut button */
.cit-botcmd{background:transparent;border:none;color:rgba(255,255,255,.32);cursor:pointer;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .18s cubic-bezier(.22,1,.36,1);flex-shrink:0;font-family:var(--font-display);font-size:14px;font-weight:700;position:relative;}
.cit-botcmd:hover{background:rgba(96,165,250,.1);color:var(--blue);transform:scale(1.08);}
.cit-botcmd::after{content:'Bot Commands';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) scale(.9);background:var(--panel2);color:rgba(255,255,255,.7);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;border:1px solid var(--border);}
.cit-botcmd:hover::after{opacity:1;transform:translateX(-50%) scale(1);}
/* ── Chat Picker Panel (shared base for stickers, bot cmds, GIF) ── */
.chat-picker-base{position:fixed;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:16px;z-index:8500;box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03),0 0 40px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);animation:pickerSlideIn .22s cubic-bezier(.22,1,.36,1);}
@keyframes pickerSlideIn{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.chat-picker-header{padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:10px;background:transparent;}
.chat-picker-header .cph-title{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.chat-picker-header .cph-badge{font-size:8px;color:rgba(255,249,62,.5);letter-spacing:.1em;font-weight:700;text-transform:uppercase;margin-left:auto;background:rgba(255,249,62,.04);padding:3px 8px;border-radius:var(--radius-pill);border:1px solid rgba(255,249,62,.08);}
.chat-picker-search{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);position:relative;}
.chat-picker-search input{width:100%;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.06);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:12.5px;padding:10px 14px 10px 38px;outline:none;box-sizing:border-box;transition:all .2s cubic-bezier(.22,1,.36,1);}
.chat-picker-search input:focus{border-color:rgba(255,249,62,.25);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(255,249,62,.06);}
.chat-picker-search input::placeholder{color:rgba(255,255,255,.2);}
.chat-picker-search svg{position:absolute;left:28px;top:50%;transform:translateY(-50%);pointer-events:none;color:rgba(255,255,255,.2);}
/* Unified picker top tabs (GIFs | Stickers | Emoji) */
.picker-top-tabs{display:flex;gap:0;padding:0;flex-shrink:0;background:var(--panel2,rgba(0,0,0,.18));border-bottom:1px solid var(--border,rgba(255,255,255,.05));}
.picker-top-tab{flex:1;padding:12px 0;font-family:var(--font-display);font-size:12.5px;font-weight:700;color:rgba(255,255,255,.3);cursor:pointer;text-align:center;border:none;background:transparent;transition:all .16s;border-bottom:2px solid transparent;}
.picker-top-tab:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.03);}
.picker-top-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(255,249,62,.04);}
/* GIF category chips row */
.gif-cat-row{display:flex;gap:5px;padding:8px 14px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.08);}
.gif-cat-row::-webkit-scrollbar{display:none;}
.gif-cat-chip{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);color:rgba(255,255,255,.45);font-family:var(--font-ui);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .18s cubic-bezier(.22,1,.36,1);}
.gif-cat-chip:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7);transform:translateY(-1px);}
.gif-cat-chip.active{background:rgba(255,249,62,.1);border-color:rgba(255,249,62,.2);color:var(--accent);box-shadow:0 2px 10px rgba(255,249,62,.08);}
.gif-cat-chip .gcc-emoji{font-size:13px;line-height:1;}
.gif-cat-chip .gcc-count{font-size:9px;padding:1px 5px;background:rgba(255,249,62,.15);border-radius:var(--radius-pill);color:var(--accent);font-weight:700;}
/* GIF collection grid (visual category cards) */
.gif-collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;overflow-y:auto;flex:1;scrollbar-width:thin;}
.gif-collection-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;height:100px;background:var(--panel2,rgba(255,255,255,.03));border:1.5px solid rgba(255,255,255,.06);transition:all .22s cubic-bezier(.22,1,.36,1);}
.gif-collection-card:hover{border-color:rgba(255,249,62,.2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.gif-collection-card img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .22s;}
.gif-collection-card:hover img{opacity:.75;}
.gif-collection-card .gcc-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-display);font-size:13px;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(0,0,0,.3);letter-spacing:.01em;z-index:1;}
.gif-collection-card .gcc-label svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));}
.gif-collection-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 100%);pointer-events:none;}
.gif-collection-card.gcc-fav{border-color:rgba(255,249,62,.12);}
.gif-collection-card.gcc-fav::after{background:linear-gradient(135deg,rgba(255,249,62,.08) 0%,rgba(0,0,0,.4) 100%);}
/* Sticker picker panel */
.sticker-picker-panel{width:460px;max-height:560px;}
.sticker-picker-panel .spp-header{padding:16px 20px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);}
.sticker-picker-panel .spp-title{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.sticker-picker-panel .spp-bastion-label{font-size:8px;color:rgba(255,249,62,.5);letter-spacing:.1em;font-weight:700;text-transform:uppercase;margin-left:auto;background:rgba(255,249,62,.06);padding:4px 10px;border-radius:var(--radius-pill);border:1px solid rgba(255,249,62,.1);}
.sticker-picker-panel .spp-search{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;}
.sticker-picker-panel .spp-search input{width:100%;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.07);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:13px;padding:10px 14px 10px 38px;outline:none;box-sizing:border-box;transition:all .2s cubic-bezier(.22,1,.36,1);}
.sticker-picker-panel .spp-search input:focus{border-color:rgba(255,249,62,.25);box-shadow:0 0 0 3px rgba(255,249,62,.06);}
.sticker-picker-panel .spp-search input::placeholder{color:rgba(255,255,255,.22);}
.spp-tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.05);overflow-x:auto;background:rgba(0,0,0,.1);}
.spp-tabs::-webkit-scrollbar{height:0;}
.spp-tab{padding:7px 16px;border-radius:8px;border:none;background:transparent;color:rgba(255,255,255,.3);font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .18s cubic-bezier(.22,1,.36,1);font-family:var(--font-ui);}
.spp-tab:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);}
.spp-tab.active{background:rgba(255,249,62,.1);color:var(--accent);font-weight:700;box-shadow:0 2px 10px rgba(255,249,62,.06);}
.spp-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.spp-grid{flex:1;overflow-y:auto;padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;scrollbar-width:thin;}
.spp-sticker{border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;padding:12px;aspect-ratio:1;}
.spp-sticker:hover{background:rgba(255,249,62,.06);border-color:rgba(255,249,62,.15);transform:scale(1.06) translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 1px rgba(255,249,62,.05);}
.spp-sticker img{width:100%;height:100%;object-fit:contain;border-radius:4px;}
.spp-empty{grid-column:1/-1;text-align:center;padding:48px 24px;color:rgba(255,255,255,.25);font-size:13px;line-height:1.7;}
/* Bot command shortcut panel */
.botcmd-panel{width:460px;max-height:520px;}
.botcmd-panel .bcp-header{padding:16px 20px 14px;border-bottom:1px solid rgba(255,255,255,.05);font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.015);}
.botcmd-panel .bcp-header svg{color:var(--blue);}
.botcmd-list{flex:1;overflow-y:auto;padding:8px;}
.botcmd-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;cursor:pointer;transition:all .14s;border:1px solid transparent;}
.botcmd-item:hover{background:rgba(96,165,250,.06);border-color:rgba(96,165,250,.08);}
.botcmd-item:active{transform:scale(.98);}
.botcmd-item .bci-prefix{color:var(--blue);font-family:var(--font-display);font-size:14px;font-weight:800;flex-shrink:0;min-width:18px;}
.botcmd-item .bci-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;}
.botcmd-item .bci-desc{font-size:11.5px;color:var(--muted-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.botcmd-item .bci-bot{font-size:8.5px;color:rgba(96,165,250,.45);font-weight:700;margin-left:auto;text-transform:uppercase;letter-spacing:.06em;background:rgba(96,165,250,.07);padding:3px 8px;border-radius:var(--radius-pill);border:1px solid rgba(96,165,250,.1);}
.botcmd-empty{padding:32px 20px;text-align:center;color:rgba(255,255,255,.3);font-size:13px;line-height:1.6;}
/* Role accent stripe */
.msg-role-stripe{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:1px;opacity:.35;transition:opacity .2s;}
/* Viewing older messages bar */
.chat-past-bar{position:sticky;top:0;z-index:20;display:none;align-items:center;justify-content:center;gap:12px;padding:10px 16px;background:linear-gradient(135deg,rgba(96,165,250,.08),rgba(96,165,250,.04));backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border-bottom:1px solid rgba(96,165,250,.15);font-size:13px;color:rgba(96,165,250,.85);pointer-events:none;font-weight:500;}
.chat-past-bar.show{display:flex;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,.3);}
.chat-past-bar button{background:rgba(96,165,250,.15);border:1.5px solid rgba(96,165,250,.3);color:rgba(96,165,250,.95);border-radius:8px;padding:6px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font-display);white-space:nowrap;}
.chat-past-bar button:hover{background:rgba(96,165,250,.25);border-color:rgba(96,165,250,.5);transform:translateY(-1px);}
.chat-past-bar button:active{transform:translateY(0);}
@keyframes pastBarPulse{0%,100%{box-shadow:0 0 0 0 rgba(96,165,250,.15);}50%{box-shadow:0 0 0 6px rgba(96,165,250,0);}}
.chat-past-bar button.has-new{animation:pastBarPulse 2s ease infinite;}

/* New messages notification bar */
.new-messages-bar{position:sticky;top:40px;z-index:19;display:none;align-items:center;justify-content:center;gap:12px;padding:8px 16px;background:linear-gradient(135deg,rgba(62,207,110,.12),rgba(62,207,110,.06));backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border-bottom:1px solid rgba(62,207,110,.18);font-size:12.5px;color:rgba(62,207,110,.8);pointer-events:none;font-weight:500;}
.new-messages-bar.show{display:flex;pointer-events:auto;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.new-messages-bar button{background:transparent;border:1px solid rgba(62,207,110,.3);color:rgba(62,207,110,.9);border-radius:6px;padding:5px 14px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font-ui);}
.new-messages-bar button:hover{background:rgba(62,207,110,.1);border-color:rgba(62,207,110,.5);}
/* New messages floating button */
.chat-new-msg-btn{position:absolute;bottom:80px;right:20px;z-index:15;display:none;align-items:center;gap:6px;background:var(--glass-heavy);border:1px solid rgba(255,249,62,.15);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border-radius:var(--radius-pill);padding:6px 16px;font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer;transition:all .15s;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.chat-new-msg-btn:hover{background:var(--panel2);border-color:rgba(255,249,62,.3);transform:translateY(-2px);}
.chat-new-msg-btn.show{display:flex;}
/* Silent send tooltip */
.silent-send-tip{position:absolute;bottom:100%;right:0;margin-bottom:6px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:20;}
.chat-send-btn:active .silent-send-tip{display:none;}
/* Media lightbox */
.media-lightbox{position:fixed;inset:0;z-index:var(--z-max,9999);background:rgba(0,0,0,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .16s;cursor:zoom-out;font-family:var(--font-ui);}
.media-lightbox.show{opacity:1;}
.mlb-stage{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:90vw;max-height:94vh;cursor:default;}
.mlb-header{display:flex;align-items:center;gap:10px;padding:6px 10px;background:rgba(20,20,22,.55);border:1px solid rgba(255,255,255,.05);border-radius:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:220px;max-width:min(560px,90vw);}
.mlb-pfp,.mlb-pfp-fallback{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;}
.mlb-meta{display:flex;flex-direction:column;min-width:0;}
.mlb-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mlb-time{font-size:11px;color:rgba(255,255,255,.5);line-height:1.2;margin-top:2px;}
.mlb-image-wrap{display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:70vh;overflow:hidden;border-radius:10px;}
.media-lightbox img.mlb-image{max-width:90vw;max-height:70vh;object-fit:contain;box-shadow:0 12px 60px rgba(0,0,0,.6);transition:transform .16s ease;user-select:none;-webkit-user-select:none;cursor:zoom-in;will-change:transform;}
.mlb-toolbar{display:flex;align-items:center;gap:4px;padding:5px 8px;background:rgba(20,20,22,.65);border:1px solid rgba(255,255,255,.06);border-radius:12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;}
.mlb-btn{background:transparent;border:none;color:rgba(255,255,255,.72);width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s;padding:0;}
.mlb-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.mlb-btn:active{background:rgba(255,255,255,.14);}
.mlb-sep{width:1px;height:18px;background:rgba(255,255,255,.08);margin:0 2px;flex-shrink:0;}
.mlb-more-wrap{position:relative;}
.mlb-menu{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--glass-heavy,rgba(20,20,22,.92));border:1px solid rgba(255,255,255,.08);border-radius:10px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 36px rgba(0,0,0,.55);min-width:170px;padding:4px;z-index:2;}
.mlb-menu[hidden]{display:none;}
.mlb-menu button{width:100%;background:transparent;border:none;color:rgba(255,255,255,.8);font-size:12.5px;font-family:var(--font-ui);padding:7px 10px;border-radius:7px;display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;}
.mlb-menu button:hover{background:rgba(255,255,255,.08);color:#fff;}
.mlb-details{position:absolute;bottom:96px;right:24px;background:var(--glass-heavy,rgba(20,20,22,.92));border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;font-size:12px;color:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-width:220px;max-width:320px;box-shadow:0 12px 36px rgba(0,0,0,.5);z-index:3;}
.mlb-details[hidden]{display:none;}
.mlb-details-row{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.mlb-details-row:last-child{border-bottom:none;}
.mlb-details-row span{color:rgba(255,255,255,.4);}
.mlb-details-row strong{color:#fff;font-weight:600;text-align:right;word-break:break-all;}
.mlb-details-row a{color:var(--accent,#fff93e);text-decoration:none;}
.mlb-details-row a:hover{text-decoration:underline;}
.media-lightbox-close{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:50%;width:36px;height:36px;color:rgba(255,255,255,.65);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;z-index:4;}
.media-lightbox-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.media-lightbox-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* GIF favourite button in chat messages */
.chat-gif-fav-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;width:28px;height:28px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s,transform .15s;z-index:2;line-height:1;}
.chat-gif-wrap:hover .chat-gif-fav-btn,.ftz-embed-gif:hover .chat-gif-fav-btn{opacity:1;}
.chat-gif-fav-btn:hover{transform:scale(1.15);background:rgba(0,0,0,.7);}
/* Drag-drop overlay — scoped to chatbar */
.drop-overlay{position:absolute;inset:0;background:rgba(255,249,62,.06);border:2px dashed var(--accent);border-radius:12px;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;pointer-events:none;}
.drop-overlay.active{display:flex;}
.drop-overlay .doi{font-size:28px;opacity:.6;}
.drop-overlay .dot{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--accent);}
/* Global drop overlay — hidden, drag only works on chatbar */
.drop-overlay.global-drop{display:none!important;}
/* Image crop modal */
.crop-modal-overlay{position:fixed;inset:0;background:rgba(4,6,10,.96);z-index:9900;display:flex;align-items:center;justify-content:center;padding:20px;}
.crop-box{background:var(--panel);border:1px solid var(--border);border-radius:22px;max-width:500px;width:100%;overflow:hidden;}
.crop-canvas-wrap{position:relative;overflow:hidden;background:#000;width:100%;aspect-ratio:1;cursor:move;}
.crop-canvas-wrap.banner-crop{aspect-ratio:16/5;}
/* Old aliases kept */
.chat-input-box{background:transparent;border:none;border-radius:0;display:flex;flex-direction:column;gap:0;padding:0;transition:none;}
.chat-input-box:focus-within{border-color:transparent;}
.chat-input-actions{display:flex;gap:2px;align-items:center;}
.chat-input-actions button{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.chat-send{display:none;}
.member-list{width:250px;min-width:250px;max-width:250px;background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border-left:1px solid var(--glass-border);overflow-y:auto;padding:0;flex-shrink:0;}
.ml-header{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.04);margin-bottom:0;}
.ml-header-title{font-family:var(--font-display);font-size:10.5px;font-weight:800;color:rgba(255,255,255,.3);letter-spacing:.06em;text-transform:uppercase;}
.ml-header-count{font-size:10px;color:rgba(255,255,255,.2);font-weight:600;}
.ml-search{margin:6px 10px 4px;position:relative;}
.ml-search input{width:100%;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:7px 10px 7px 30px;font-family:var(--font-ui);font-size:11.5px;color:#fff;outline:none;transition:border-color .2s;}
.ml-search input::placeholder{color:rgba(255,255,255,.15);}
.ml-search input:focus{border-color:rgba(255,249,62,.2);}
.ml-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.15);font-size:12px;pointer-events:none;}
.ml-role-header{padding:14px 14px 4px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.2);margin-top:2px;display:flex;align-items:center;gap:5px;}
.ml-role-header:first-child{margin-top:2px;}
.ml-role-header .ml-role-count{font-weight:600;color:rgba(255,255,255,.1);}
.ml-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.ml-entry{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 12px;margin:1px 6px;border-radius:6px;cursor:pointer;transition:background .12s;position:relative;}
.ml-entry:hover{background:rgba(255,255,255,.04);}
.ml-entry:active{transform:scale(.98);}
.ml-av{width:32px;height:32px;border-radius:50%;background:var(--panel);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible;position:relative;}
.ml-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:transparent;}
.ml-status{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;z-index:2;}
.ml-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s;}
.ml-entry:hover .ml-name{color:rgba(255,255,255,.9);}
.ml-badges{display:flex;align-items:center;gap:2px;}
.ml-badges img{width:14px;height:14px;object-fit:contain;}
.ml-custom-status{font-size:10px;color:rgba(255,255,255,.15);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.discover-scroll{flex:1;overflow-y:auto;scroll-behavior:smooth;}
.disc-hero{position:relative;width:100%;height:280px;overflow:hidden;display:flex;align-items:flex-end;flex-shrink:0;}
.disc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;}
.disc-hero-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(15,17,25,.6) 50%,var(--channel,#12141b) 100%);}
.disc-hero-content{position:relative;z-index:2;padding:0 32px 20px;}
.disc-search{max-width:440px;position:relative;}
.disc-search input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:13.5px;padding:11px 16px 11px 40px;outline:none;transition:all .2s cubic-bezier(.22,1,.36,1);}
.disc-search input:focus{border-color:rgba(255,249,62,.25);background:rgba(255,255,255,.06);box-shadow:0 0 16px rgba(255,249,62,.04);}
.disc-search input::placeholder{color:rgba(255,255,255,.2);}
.disc-search .si{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;color:rgba(255,255,255,.2);transition:color .2s;}
.disc-search input:focus~.si,.disc-search input:focus+.si{color:var(--accent);}
.disc-tabs{display:flex;gap:5px;margin-bottom:20px;margin-top:16px;position:relative;flex-wrap:wrap;}
.disc-tab{padding:7px 16px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid transparent;color:rgba(255,255,255,.4);transition:all .16s cubic-bezier(.22,1,.36,1);letter-spacing:.01em;background:transparent;}
.disc-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8);}
.disc-tab.active{background:rgba(255,249,62,.08);border-color:rgba(255,249,62,.15);color:var(--accent);font-weight:700;}
.disc-stats{display:flex;gap:20px;margin-top:14px;position:relative;}
.disc-stat{font-size:12px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px;}
.disc-stat strong{color:var(--accent);font-size:14px;font-weight:800;}
.bastion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.bc{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .2s ease;position:relative;}
.bc:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2);border-color:rgba(255,255,255,.12);}
.bc-banner{height:120px;overflow:hidden;position:relative;}
.bc-banner img{width:100%;height:100%;object-fit:cover;}
.bc-body{padding:0 16px 16px;position:relative;}
.bc-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bc-icon{width:56px;height:56px;border-radius:16px;background:var(--panel);border:4px solid var(--panel);font-size:20px;display:flex;align-items:center;justify-content:center;margin-top:-30px;position:relative;z-index:2;flex-shrink:0;overflow:hidden;}
.bc-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.bc-name{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:4px;}
.bc-desc{font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font-ui);}
.bc-footer{display:flex;align-items:center;gap:14px;}
.bc-footer .bc-category{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.25);}
.bc-footer .bc-tag{display:inline-flex;padding:2px 8px;border-radius:var(--radius-pill);font-size:8.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.35);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);}
/* ── Bastion Mood 2027 ──────────────────────────── */
.bastion-mood-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:2px 10px 4px;border-radius:14px;cursor:default;transition:all .3s cubic-bezier(.22,1,.36,1);font-size:11.5px;font-weight:600;position:relative;overflow:hidden;backdrop-filter:blur(8px);}
.bastion-mood-bar:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.bastion-mood-bar::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;transition:background .5s;}
.bastion-mood-bar .mood-emoji{font-size:15px;flex-shrink:0;animation:moodPulse 3s ease-in-out infinite;}
.bastion-mood-bar .mood-label{color:rgba(255,255,255,.6);flex:1;letter-spacing:.02em;}
.bastion-mood-bar .mood-lock{font-size:10px;color:rgba(255,255,255,.2);margin-left:auto;}
@keyframes moodPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
/* Mood ambient particles */
.mood-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.mood-particle{position:absolute;width:2px;height:2px;border-radius:50%;opacity:0;animation:moodFloat 8s ease-in-out infinite;}
@keyframes moodFloat{0%{opacity:0;transform:translateY(10px) scale(.5);}30%{opacity:.5;}60%{opacity:.3;transform:translateY(-40px) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(.3);}}
/* ── Bastion Reputation 2027 ──────────────────── */
.rep-shield{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);background:rgba(255,249,62,.05);border:1px solid rgba(255,249,62,.1);color:rgba(255,249,62,.6);cursor:default;flex-shrink:0;transition:all .2s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(4px);}
.rep-shield:hover{background:rgba(255,249,62,.1);border-color:rgba(255,249,62,.25);transform:scale(1.05);}
.rep-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:11px;color:rgba(255,255,255,.65);white-space:nowrap;z-index:50;pointer-events:none;opacity:0;transition:opacity .2s;box-shadow:0 8px 32px rgba(0,0,0,.6);backdrop-filter:blur(12px);}
.rep-shield:hover .rep-tooltip{opacity:1;}
/* ── Focus Mode 2027 ──────────────────────────── */
.focus-mode-chat .chat-msgs{background:rgba(255,255,255,.008);}
.focus-mode-chat .msg-text{font-size:14.5px;color:rgba(221,227,237,.7);letter-spacing:.02em;line-height:1.75;}
.focus-mode-chat .msg-reactions,.focus-mode-chat .cit-gif,.focus-mode-chat .msg-acts button[title="React"]{display:none!important;}
.focus-mode-chat .typing-dots span{background:rgba(255,255,255,.08);}
.focus-mode-chat .chat-input-outer{border-color:rgba(255,255,255,.03);}
.focus-mode-chat .msg-row{border-bottom:1px solid rgba(255,255,255,.015);padding-bottom:6px;margin-bottom:2px;}
.focus-mode-badge{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);background:rgba(96,165,250,.06);color:rgba(96,165,250,.6);border:1px solid rgba(96,165,250,.1);margin-left:auto;letter-spacing:.05em;flex-shrink:0;}
/* ── Text Selection Formatting Panel ─────────────── */
.fmt-sel-panel{position:fixed;display:none;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:10px;padding:3px;z-index:var(--z-max);box-shadow:0 6px 24px rgba(0,0,0,.5);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);flex-direction:row;gap:1px;animation:fmtPanelIn .12s ease-out;}
.fmt-sel-panel.show{display:flex;}
@keyframes fmtPanelIn{from{opacity:0;transform:translateY(4px) scale(.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.fmt-sel-btn{background:transparent;border:none;color:rgba(255,255,255,.55);cursor:pointer;width:32px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all .12s;font-size:13px;font-weight:700;font-family:var(--font-ui);}
.fmt-sel-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.fmt-sel-btn svg{width:15px;height:15px;}
.fmt-sel-sep{width:1px;background:rgba(255,255,255,.08);margin:4px 1px;}
/* ── Live Formatting Preview Overlay ─────────────── */
.chat-input-row .ci-preview-wrap{position:relative;flex:1;min-width:0;}
/* Chatbar file preview */
.chatbar-file-preview{padding:12px 12px 0;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.06);}
.chatbar-file-card{position:relative;width:180px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .15s;}
.chatbar-file-card:hover{border-color:rgba(255,249,62,.15);}
.chatbar-file-card img,.chatbar-file-card video{width:100%;max-height:160px;object-fit:cover;display:block;}
.chatbar-file-card .cfp-name{padding:6px 8px;font-size:10px;color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chatbar-file-card .cfp-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.chatbar-file-card:hover .cfp-actions{opacity:1;}
.chatbar-file-card .cfp-btn{width:26px;height:26px;border-radius:6px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border:none;color:rgba(255,255,255,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.chatbar-file-card .cfp-btn:hover{background:rgba(0,0,0,.8);color:#fff;}
.chatbar-file-card .cfp-btn.cfp-remove{color:rgba(248,113,113,.8);}
.chatbar-file-card .cfp-btn.cfp-remove:hover{background:rgba(248,113,113,.2);color:#f87171;}
.chatbar-file-card .cfp-spoiler-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1;}
.chatbar-file-card .cfp-spoiler-tag{padding:6px 14px;border-radius:20px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.7);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.ci-preview{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;font-family:var(--font-ui);font-size:13.5px;line-height:1.55;padding:2px 0;color:var(--text);white-space:pre-wrap;word-wrap:break-word;overflow:hidden;z-index:1;}
.ci-preview .ci-bold{font-weight:700;}
.ci-preview .ci-italic{font-style:italic;}
.ci-preview .ci-strike{text-decoration:line-through;opacity:.6;}
.ci-preview .ci-code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:12px;background:rgba(255,255,255,.06);border-radius:4px;padding:0 4px;}
.ci-preview .ci-spoiler{background:rgba(255,255,255,.12);border-radius:4px;padding:0 3px;color:transparent;text-shadow:none;}
.ci-preview .ci-highlight{background:rgba(255,249,62,.12);color:rgba(255,249,62,.85);border-radius:3px;padding:0 2px;}
.ci-preview .ci-smalltext{font-size:10.5px;opacity:.6;}
.ci-preview .ci-mention{color:var(--blue);font-weight:600;}
.ci-preview .ci-room-ref{color:var(--purple);font-weight:600;}
.ci-preview .ci-marker{opacity:.28;font-weight:400;font-style:normal;color:rgba(255,255,255,.35);}
.ci-preview .ci-emoji{display:inline-block;width:1.25em;height:1.25em;vertical-align:-0.25em;margin:0 1px;}
/* ── Atelier ─────────────────────────────────────── */
.atelier-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;background:transparent;}
.atelier-scroll{flex:1;overflow-y:auto;padding:0;scroll-behavior:smooth;}
/* Atelier sidebar nav (Discord/Guilded-style) */
.atel-sb-balance{display:flex;align-items:center;gap:10px;padding:14px;margin:8px 8px 0;background:linear-gradient(135deg,rgba(255,249,62,.05),rgba(255,249,62,.02));border:1px solid rgba(255,249,62,.1);border-radius:14px;position:relative;overflow:hidden;}
.atel-sb-balance::before{content:'';position:absolute;top:-50%;right:-30%;width:80px;height:80px;background:radial-gradient(circle,rgba(255,249,62,.06),transparent 70%);pointer-events:none;}
.atel-sb-coin{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(255,249,62,.2));}
.atel-sb-bal-info{display:flex;flex-direction:column;gap:2px;}
.atel-sb-bal-val{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--accent);line-height:1;text-shadow:0 1px 8px rgba(255,249,62,.15);}
.atel-sb-bal-label{font-size:10px;color:rgba(255,255,255,.3);font-weight:600;letter-spacing:.03em;}
.atel-sb-sep{height:1px;background:linear-gradient(to right,rgba(255,255,255,.05),rgba(255,255,255,.02),transparent);margin:10px 16px;}
.atel-sb-section{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.18);padding:12px 16px 6px;}
.atel-sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 8px;border-radius:10px;cursor:pointer;color:rgba(255,255,255,.4);font-size:13px;font-weight:500;transition:all .18s cubic-bezier(.22,1,.36,1);user-select:none;position:relative;}
.atel-sb-item:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);}
.atel-sb-item.active{background:rgba(255,249,62,.07);color:var(--accent);font-weight:600;box-shadow:0 2px 12px rgba(255,249,62,.06);}
.atel-sb-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--accent);border-radius:0 3px 3px 0;}
.atel-sb-item.active svg{stroke:var(--accent);}
.atel-sb-item.active .atel-sb-radiance-icon{filter:brightness(1.2);}
.atel-sb-item svg{opacity:.7;transition:opacity .15s;}
.atel-sb-item:hover svg{opacity:1;}
.atel-sb-item.active svg{opacity:1;}
.atel-sb-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill);transition:all .15s;}
.atel-sb-badge.atel-active{background:rgba(62,207,110,.1);color:var(--green);border:1px solid rgba(62,207,110,.15);}
.atel-sb-badge.atel-quest-count{background:rgba(255,249,62,.08);color:var(--accent);border:1px solid rgba(255,249,62,.12);}
/* Atelier content area */
.atelier-content-inner{padding:28px 32px 48px;animation:atel-fadeIn .3s cubic-bezier(.22,1,.36,1);}
@keyframes atel-fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.atel-page-header{margin-bottom:24px;}
.atel-page-title{font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:4px;}
.atel-page-desc{font-size:12.5px;color:rgba(255,255,255,.3);line-height:1.5;}
/* Quest tab chips — extends ftz-chip pattern */
.quest-tab-chip{padding:8px 20px;border-radius:var(--radius-pill);font-size:var(--font-md);font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .2s var(--ease-out);background:var(--surface-1);letter-spacing:.01em;}
.quest-tab-chip.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(255,249,62,.25);box-shadow:0 2px 12px rgba(255,249,62,.1);font-weight:700;}
.quest-tab-chip:not(.active){color:rgba(255,255,255,.4);}
.quest-tab-chip:not(.active):hover{background:var(--surface-2);color:rgba(255,255,255,.8);transform:translateY(-1px);}
/* Daily Quest Popup — "Hearken" overlay */
.quest-popup-overlay{position:fixed;inset:0;z-index:var(--z-max,9999);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(0,0,0,.85),rgba(0,0,0,.88));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.quest-popup-overlay.visible{opacity:1;pointer-events:all;}
.quest-popup-card{width:440px;max-width:92vw;background:var(--glass-heavy,rgba(20,22,30,.92));backdrop-filter:var(--blur-heavy,blur(20px));-webkit-backdrop-filter:var(--blur-heavy,blur(20px));border:1.5px solid var(--glass-border,rgba(255,255,255,.06));border-radius:var(--radius-xl);overflow:hidden;transform:scale(.94) translateY(16px);transition:transform .45s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08),0 0 60px rgba(255,249,62,.04);}
.quest-popup-overlay.visible .quest-popup-card{transform:scale(1) translateY(0);}
.quest-popup-bar{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);position:relative;z-index:1;}
.quest-popup-hero{width:100%;padding:20px 40px 4px;background:radial-gradient(ellipse at center top,rgba(255,249,62,.07),transparent 70%);display:flex;align-items:center;justify-content:center;}
.quest-popup-img{width:100%;max-width:220px;height:180px;object-fit:contain;}
.quest-popup-body{padding:6px 30px 24px;text-align:center;}
.quest-popup-label{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,249,62,.55);margin-bottom:10px;}
.quest-popup-title{font-family:var(--font-display);font-size:22px;font-weight:900;color:#fff;margin-bottom:10px;line-height:1.25;letter-spacing:-.01em;}
.quest-popup-desc{font-size:12.5px;color:rgba(255,255,255,.42);line-height:1.6;margin-bottom:18px;}
.quest-popup-reward{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:rgba(255,249,62,.06);border:1px solid rgba(255,249,62,.14);border-radius:var(--radius-pill);font-size:12px;font-weight:700;color:var(--accent);margin-bottom:22px;}
.quest-popup-btns{display:flex;gap:8px;}
.quest-popup-btns .qp-btn{flex:1;padding:11px 14px;border-radius:10px;font-family:var(--font-display);font-size:12.5px;font-weight:800;cursor:pointer;border:1px solid transparent;transition:all .18s cubic-bezier(.22,1,.36,1);display:inline-flex;align-items:center;justify-content:center;}
.quest-popup-btns .qp-claim{background:var(--accent);color:#13161d;box-shadow:0 4px 20px rgba(255,249,62,.18);}
.quest-popup-btns .qp-claim:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 28px rgba(255,249,62,.28);}
.quest-popup-btns .qp-close{background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.07);}
.quest-popup-btns .qp-close:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12);}
@keyframes quest-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.quest-popup-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,249,62,.03) 50%,transparent 100%);background-size:200% 100%;animation:quest-shimmer 3s ease infinite;pointer-events:none;border-radius:var(--radius-xl);}
/* Onboarding (newcomer experience) */
.ftz-onboarding-overlay{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,rgba(0,0,0,.85),rgba(0,0,0,.88));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .35s cubic-bezier(.22,1,.36,1);pointer-events:none;}
.ftz-onboarding-overlay.visible{opacity:1;pointer-events:all;}
.ftz-onboarding-card{width:100%;max-width:480px;background:var(--glass-heavy,rgba(20,22,30,.92));backdrop-filter:var(--blur-heavy,blur(20px));-webkit-backdrop-filter:var(--blur-heavy,blur(20px));border:1.5px solid var(--glass-border,rgba(255,255,255,.06));border-radius:var(--radius-xl);overflow:hidden;transform:scale(.96) translateY(12px);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08);}
.ftz-onboarding-overlay.visible .ftz-onboarding-card{transform:scale(1) translateY(0);}
.ftz-onboarding-bar{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);}
.ftz-onboarding-hero{padding:20px 40px 0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center top,rgba(255,249,62,.06),transparent 70%);}
.ftz-onboarding-hero img{height:56px;width:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(92%) sepia(56%) saturate(2300%) hue-rotate(4deg) brightness(104%) contrast(102%) drop-shadow(0 4px 18px rgba(255,249,62,.35));}
.ftz-onboarding-body{padding:24px 26px 22px;text-align:center;}
.ftz-onboarding-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,249,62,.55);margin-bottom:10px;}
.ftz-onboarding-title{font-family:var(--font-display);font-size:26px;font-weight:900;color:#fff;margin-bottom:10px;line-height:1.18;letter-spacing:-.018em;}
.ftz-onboarding-sub{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:22px;max-width:380px;margin-left:auto;margin-right:auto;}
.ftz-onboarding-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:20px;}
.ftz-interest-btn{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 4px 8px;cursor:pointer;transition:all .18s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;align-items:center;gap:5px;color:rgba(255,255,255,.55);}
.ftz-interest-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}
.ftz-interest-btn.interest-selected{background:rgba(255,249,62,.08);border-color:rgba(255,249,62,.35);color:var(--accent);box-shadow:0 2px 12px rgba(255,249,62,.1);}
.ftz-interest-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:currentColor;}
.ftz-interest-icon svg{width:100%;height:100%;}
.ftz-interest-label{font-size:10.5px;font-weight:700;color:inherit;text-align:center;line-height:1.2;}
.ftz-onboarding-tips{position:relative;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px 14px 20px;margin-bottom:22px;text-align:left;}
.ftz-onboarding-tips::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(255,249,62,.8),rgba(255,249,62,.3));}
.ftz-tips-head{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:rgba(255,249,62,.8);margin-bottom:10px;}
.ftz-onboarding-tips ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;}
.ftz-onboarding-tips li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.45;}
.ftz-tip-dot{flex-shrink:0;margin-top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,249,62,.09);}
.ftz-onboarding-btns{display:flex;gap:8px;}
.ftz-onboarding-btns.single{justify-content:center;}
.ftz-onboarding-btns.single .ftz-ob-next{min-width:160px;flex:none;}
.ftz-ob-btn{flex:1;padding:11px 16px;border-radius:10px;font-family:var(--font-display);font-size:12.5px;font-weight:800;cursor:pointer;border:1px solid transparent;transition:all .18s cubic-bezier(.22,1,.36,1);display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.ftz-ob-next{background:var(--accent);color:#13161d;border:1px solid rgba(255,249,62,.55);box-shadow:0 6px 22px rgba(255,249,62,.16),inset 0 1px 0 rgba(255,255,255,.35);}
.ftz-ob-next:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,249,62,.28),inset 0 1px 0 rgba(255,255,255,.4);}
.ftz-ob-skip{background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.07);}
.ftz-ob-skip:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12);}
@media (max-width:520px){.ftz-onboarding-grid{grid-template-columns:repeat(3,1fr);}}
/* Shop filter chips — extends ftz-chip pattern */
.shop-filter-chip{padding:6px 16px;border-radius:var(--radius-pill);font-size:var(--font-sm);font-weight:600;cursor:pointer;border:1px solid var(--surface-border);color:rgba(255,255,255,.4);transition:all .2s var(--ease-out);background:var(--surface-1);}
.shop-filter-chip:hover{border-color:var(--surface-border-hover);color:rgba(255,255,255,.8);background:var(--surface-2);}
.shop-filter-chip.active{background:var(--accent-dim);border-color:rgba(255,249,62,.3);color:var(--accent);box-shadow:0 2px 12px rgba(255,249,62,.08);}
/* Price toggle */
.price-toggle{display:inline-flex;background:var(--surface-1);border:1px solid var(--surface-border);border-radius:var(--radius-pill);padding:3px;gap:2px;}
.price-toggle button{padding:6px 16px;border-radius:var(--radius-pill);border:none;font-size:var(--font-sm);font-weight:700;cursor:pointer;transition:all .18s;background:transparent;color:rgba(255,255,255,.4);}
.price-toggle button.sel{background:var(--accent);color:#13161d;}
/* Radiance pulse badge */
@keyframes atelierPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,160,62,.5);}50%{box-shadow:0 0 0 6px rgba(255,160,62,0);}}
.best-ribbon{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--accent),#ffb93e);color:#13161d;font-size:9.5px;font-weight:900;padding:5px 14px 5px 8px;letter-spacing:.06em;clip-path:polygon(0 0,100% 0,100% 100%);border-radius:0 20px 0 0;animation:atelierPulse 2.4s ease-in-out infinite;}
/* Perk chips */
.perk-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--font-xs);font-weight:600;margin:3px;white-space:nowrap;transition:transform .15s;}
.perk-chip:hover{transform:translateY(-1px);}
/* ── Collection bar (Featured shop) ───────────────── */
.collection-bar{position:relative;border-radius:22px;overflow:hidden;margin-bottom:16px;padding:32px 28px;cursor:pointer;transition:all .28s cubic-bezier(.22,1,.36,1);border:1.5px solid transparent;backdrop-filter:blur(6px);}
.collection-bar:hover{transform:translateY(-3px);box-shadow:0 16px 56px rgba(0,0,0,.35);}
.collection-bar::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.05),transparent 60%);pointer-events:none;}
.collection-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(0,0,0,.15));pointer-events:none;}
.collection-bar-title{font-family:var(--font-display);font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.1;position:relative;z-index:1;}
.collection-bar-desc{font-size:12.5px;color:rgba(255,255,255,.45);margin-top:8px;line-height:1.5;position:relative;z-index:1;}
.collection-bar-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:10px 22px;border-radius:12px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .18s cubic-bezier(.22,1,.36,1);border:1px solid;position:relative;z-index:1;}
.collection-bar-btn:hover{filter:brightness(1.15);transform:translateY(-1px);}
.collection-bar-btn svg{width:14px;height:14px;}
/* ── Shop item card (Featured) ────────────────────── */
.shop-item-card{border-radius:18px;overflow:hidden;transition:all .22s cubic-bezier(.22,1,.36,1);border:1.5px solid;position:relative;backdrop-filter:blur(4px);}
.shop-item-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 48px rgba(0,0,0,.4);}
.shop-item-card .sic-preview{height:100px;display:flex;gap:3px;padding:12px;position:relative;overflow:hidden;}
.shop-item-card .sic-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.25));pointer-events:none;}
.shop-item-card .sic-sidebar{width:18px;background:rgba(0,0,0,.3);border-radius:5px;}
.shop-item-card .sic-content{flex:1;background:rgba(255,255,255,.02);border-radius:5px;padding:10px;}
.shop-item-card .sic-body{padding:14px 16px 16px;}
.shop-item-card .sic-name{font-family:var(--font-display);font-size:13.5px;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:-.01em;}
.shop-item-card .sic-type{font-size:10.5px;color:rgba(255,255,255,.3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.shop-item-card .sic-price{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent);padding:6px 12px;background:rgba(255,249,62,.04);border-radius:8px;width:fit-content;}
.shop-item-card .sic-price img{width:14px;height:14px;object-fit:contain;}
.shop-item-card .sic-owned{font-size:11px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:5px;padding:6px 12px;background:rgba(62,207,110,.04);border-radius:8px;width:fit-content;}
.shop-item-card .sic-discount{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:8px;font-size:8.5px;font-weight:800;letter-spacing:.04em;z-index:1;backdrop-filter:blur(8px);}
/* ── Horizontal scroll row for featured items ─────── */
.featured-scroll-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.featured-scroll-row::-webkit-scrollbar{height:4px;}
.featured-scroll-row::-webkit-scrollbar-thumb{background:rgba(255,249,62,.1);border-radius:var(--radius-pill);}
.featured-scroll-row>.shop-item-card{min-width:220px;max-width:260px;flex-shrink:0;scroll-snap-align:start;}
/* Atelier shared */
.atel-section-hdr{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:16px;display:flex;align-items:center;gap:10px;padding-bottom:0;}
.atel-section-hdr::after{content:'';flex:1;height:1px;background:linear-gradient(to right,rgba(255,255,255,.08),transparent);margin-left:8px;}
.atel-section-hdr.no-line::after{display:none;}

/* Redesigned Atelier Section Headers */
.atel-header-redesigned{background:linear-gradient(135deg,rgba(255,249,62,.03),rgba(255,249,62,.005));border:1px solid rgba(255,249,62,.08);border-radius:20px;padding:24px;margin-bottom:32px;position:relative;overflow:hidden;}

/* Quest Ring Progress */
.quest-progress-ring{position:relative;display:flex;align-items:center;justify-content:center;}
.quest-progress-ring svg{transform:rotate(-90deg);}

/* Shop Category Cards */
.shop-category-card{background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;text-align:center;cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;backdrop-filter:blur(2px);}
.shop-category-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.15);}

/* Perk Grid (5 columns) */
.perk-grid-5col{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
@media (max-width:1400px){.perk-grid-5col{grid-template-columns:repeat(4,1fr);gap:12px;}}
@media (max-width:900px){.perk-grid-5col{grid-template-columns:repeat(3,1fr);gap:12px;}}

/* Quick Actions Row */
.quick-actions-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px;}
@media (max-width:900px){.quick-actions-row{grid-template-columns:1fr;}}

/* Redesigned Card with Hover Effect */
.atelier-card-redesign{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;backdrop-filter:blur(2px);}
.atelier-card-redesign:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12);border-color:rgba(255,255,255,.12);}

/* Visual Hierarchy Enhancement */
.surface-1-atel{background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.04);}
.surface-2-atel{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
.surface-3-atel{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);}
.atel-section-hdr.no-line::after{display:none;}
.atelier-page-title{font-family:var(--font-display);font-size:var(--font-xl);font-weight:800;margin-bottom:var(--space-xs);}
.atelier-page-sub{font-size:var(--font-md);color:var(--muted-light);margin-bottom:var(--space-xl);}
.atelier-hero{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl) 32px;margin-bottom:var(--space-xl);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(255,249,62,.04),rgba(255,249,62,.01));}
.atelier-bal{display:flex;align-items:center;gap:16px;}
.atelier-bal .coin{width:48px;height:48px;border-radius:50%;background:rgba(255,249,62,.1);border:1px solid rgba(255,249,62,.2);display:flex;align-items:center;justify-content:center;font-size:24px;}
.atelier-bal h3{font-size:12px;font-weight:600;color:var(--muted-light);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em;}
.atelier-bal .amt{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--accent);line-height:1;}
.daily-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,249,62,.06);border:1px solid rgba(255,249,62,.15);border-radius:20px;padding:18px 28px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);}
.daily-btn:hover{background:rgba(255,249,62,.1);transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,249,62,.1);}
.daily-btn span{font-size:11px;color:var(--muted-light);}
.daily-btn strong{font-family:var(--font-display);font-size:14px;color:var(--accent);}
.daily-btn.claimed{opacity:.45;cursor:not-allowed;pointer-events:none;}
.atelier-section-title{font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:#fff;}
.atelier-section-title::before{content:"";width:14px;height:3px;background:var(--accent);border-radius:2px;}
.radiance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;}
.rad-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;}
.rad-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,249,62,.03),transparent);opacity:0;transition:opacity .2s;}
.rad-card:hover{border-color:rgba(255,249,62,.2);transform:translateY(-3px);box-shadow:0 10px 36px rgba(255,249,62,.06);}
.rad-card:hover::before{opacity:1;}
.rad-card.bv{border-color:rgba(255,249,62,.15);background:linear-gradient(135deg,rgba(255,249,62,.04),rgba(255,255,255,.02));}
.best-badge{position:absolute;top:12px;right:12px;background:var(--accent);color:#13161d;font-size:9px;font-weight:800;padding:3px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.05em;}
.rad-icon{font-size:34px;}.rad-dur{font-family:var(--font-display);font-size:16px;font-weight:700;}
.rad-price{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--accent);}
.rad-price span{font-size:12px;color:var(--muted-light);font-family:var(--font-ui);font-weight:400;}
.rad-feats{font-size:12px;color:var(--muted-light);line-height:1.5;}
.atelier-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:22px;margin-bottom:12px;transition:all .14s;}
.atelier-card:hover{border-color:rgba(255,255,255,.1);}
.admin-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;background:transparent;}
.admin-header-bar{height:52px;min-height:52px;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;position:relative;overflow:hidden;}
.admin-header-bar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-mid),var(--accent-dim),transparent);}
.admin-body{display:flex;flex:1;overflow:hidden;}
.admin-nav{width:220px;min-width:220px;background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border-right:1px solid var(--glass-border);overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;}
.admin-nav::-webkit-scrollbar{width:3px;}.admin-nav::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:4px;}
.admin-main{flex:1;overflow-y:auto;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);}
.admin-main::-webkit-scrollbar{width:5px;}.admin-main::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:4px;}
.adm-tab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.45);transition:all .14s ease;position:relative;border:1px solid transparent;}
.adm-tab svg{width:18px;height:18px;flex-shrink:0;opacity:.5;transition:opacity .14s;}
.adm-tab:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);}.adm-tab:hover svg{opacity:.7;}
.adm-tab.active{background:rgba(255,249,62,.06);color:var(--accent);font-weight:700;border-color:rgba(255,249,62,.15);}.adm-tab.active svg{opacity:1;stroke:var(--accent);}
.adm-tab.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 8px var(--accent-dim);}
.adm-tab svg{width:17px;height:17px;flex-shrink:0;opacity:.5;}
.adm-tab.active svg{opacity:1;filter:drop-shadow(0 0 3px var(--accent-dim));}
.adm-tab .adm-badge{margin-left:auto;background:linear-gradient(135deg,var(--red),#ef4444);color:#fff;font-size:8.5px;font-weight:800;padding:2px 7px;border-radius:var(--radius-pill);min-width:18px;text-align:center;box-shadow:0 2px 8px rgba(248,113,113,.3);animation:adm-badge-pulse 2s infinite;}
@keyframes adm-badge-pulse{0%,100%{box-shadow:0 2px 8px rgba(248,113,113,.3);}50%{box-shadow:0 2px 12px rgba(248,113,113,.5);}}
.adm-sec-label{font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-mid);padding:18px 14px 6px;}
/* Admin sub-nav (polished pill row with SVG icons + section dividers) */
.adm-sub-nav{display:flex;align-items:center;gap:4px;padding:6px 8px;margin:0 var(--space-xl) var(--space-lg);flex-wrap:wrap;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
@media(max-width:900px){.adm-sub-nav{margin:0 var(--space-md) var(--space-md);}.adm-sub-tab{padding:6px 10px;font-size:12px;}.adm-sub-tab svg{width:13px;height:13px;}}
.adm-sub-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s cubic-bezier(.22,1,.36,1);border:1px solid transparent;background:transparent;color:rgba(255,255,255,.48);line-height:1;white-space:nowrap;}
.adm-sub-tab svg{width:14px;height:14px;opacity:.7;transition:opacity .14s;flex-shrink:0;}
.adm-sub-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);}
.adm-sub-tab:hover svg{opacity:1;}
.adm-sub-tab.active{background:rgba(255,249,62,.1);color:var(--accent);border-color:rgba(255,249,62,.22);box-shadow:0 0 0 1px rgba(255,249,62,.08) inset,0 2px 10px rgba(255,249,62,.08);}
.adm-sub-tab.active svg{opacity:1;filter:drop-shadow(0 0 2px var(--accent-dim));}
.adm-sub-tab .adm-sub-badge{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:var(--radius-pill);min-width:16px;text-align:center;box-shadow:0 2px 6px rgba(248,113,113,.3);line-height:1.3;}
.adm-sub-divider{width:1px;height:18px;background:rgba(255,255,255,.07);margin:0 4px;flex-shrink:0;}
.hq-stat{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:var(--space-lg);cursor:pointer;transition:all .2s var(--ease-out);position:relative;overflow:hidden;}
.hq-stat:hover{border-color:var(--accent-mid);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.hq-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--stat-accent,var(--accent));opacity:.4;transition:opacity .2s;}
.hq-stat:hover::before{opacity:.8;}
.hq-stat-val{font-family:var(--font-display);font-size:var(--font-2xl);font-weight:800;line-height:1;}
.hq-stat-label{font-size:var(--font-xs);color:rgba(255,255,255,.3);margin-top:var(--space-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.hq-panel{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden;}
.hq-panel-head{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;gap:var(--space-sm);}
.hq-panel-head h3{font-family:var(--font-display);font-size:var(--font-md);font-weight:800;margin:0;color:rgba(255,255,255,.7);}
.hq-threat{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:11px;font-weight:700;}
.hq-threat.low{background:var(--state-success-dim);border:1px solid rgba(62,207,110,.12);color:var(--state-success);}
.hq-threat.medium{background:var(--state-warning-dim);border:1px solid rgba(245,158,11,.12);color:var(--state-warning);}
.hq-threat.high{background:var(--state-danger-dim);border:1px solid rgba(248,113,113,.12);color:var(--state-danger);}
.hq-threat.critical{background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.25);color:#ff4444;animation:adm-badge-pulse 1.5s infinite;}
.hq-user-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid rgba(255,255,255,.03);transition:all .12s;cursor:pointer;}
.hq-user-row:hover{background:var(--accent-dim);}
.hq-user-row:last-child{border-bottom:none;}
.hq-col-header{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--surface-border);background:rgba(255,255,255,.01);font-size:var(--font-hdr);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-mid);cursor:pointer;user-select:none;}
.hq-col-header>div:hover{color:var(--accent);}
.hq-col-header .sort-active{color:var(--accent);}
.hq-feed-item{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid rgba(255,255,255,.03);animation:hq-feed-in .3s var(--ease-out);}
@keyframes hq-feed-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.hq-quick-btn{padding:7px var(--space-md);border-radius:var(--radius-sm);border:1px solid var(--surface-border);background:var(--surface-1);color:rgba(255,255,255,.5);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.hq-quick-btn:hover{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);}
@media(max-width:768px){.admin-nav{width:56px;min-width:56px;}.adm-tab span:last-child,.adm-sec-label{display:none;}.adm-tab{justify-content:center;padding:10px;}}
/* ── Settings modal (large modal for settings/bsettings) ──── */
.settings-modal{width:min(calc(90vh * 16 / 9),calc(100vw - 40px)) !important;height:min(90vh,calc((100vw - 40px) * 9 / 16)) !important;max-width:none !important;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;}
@media(max-width:768px){.settings-modal{width:calc(100vw - 12px);height:calc(100vh - 12px);border-radius:14px;}}
/* ── Overview modal (Guilded-style) ──── */
.overview-modal{max-width:calc(100vw - 40px);width:calc(100vh * 1.5);height:calc(100vh / 1.5);max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden;border-radius:18px;}
.overview-modal .modal-body{overflow-y:auto;flex:1;padding:0;}
.overview-modal .overview-room{overflow-y:auto;height:100%;display:flex;flex-direction:column;}
/* Banner area */
.overview-modal .ov-banner{height:140px;flex-shrink:0;position:relative;}
.overview-modal .ov-banner img{height:140px;}
.overview-modal .ov-banner + .ov-emblem{position:relative;bottom:auto;left:auto;transform:none;display:flex;justify-content:center;margin-top:-42px;z-index:3;}
.overview-modal .ov-icon{width:68px;height:68px;border-radius:16px;border-width:4px;}
.overview-modal .ov-icon img{border-radius:12px;}
/* Identity */
.overview-modal .ov-identity{padding-top:24px;padding-bottom:2px;text-align:center;}
.overview-modal .ov-emblem + .ov-identity{padding-top:8px;}
.overview-modal .ov-name{font-size:18px;}
.overview-modal .ov-tagline{font-size:11.5px;margin-top:2px;}
/* Badges */
.overview-modal .ov-badges{padding:4px 28px 8px;gap:4px;flex-wrap:wrap;justify-content:center;}
.overview-modal .ov-badges .ov-badge{font-size:10px;padding:3px 8px;}
/* Content */
.overview-modal .ov-content{padding:0 24px 16px;gap:14px;flex:1;}
/* Section headers */
.overview-modal .ov-section-header{margin-bottom:6px;}
.overview-modal .ov-section-title{font-size:12.5px;font-weight:800;}
.overview-modal .ov-section-link{font-size:10.5px;}
/* Cards row */
.overview-modal .ov-card-row{gap:8px;}
.overview-modal .ov-ann-card{min-width:160px;max-width:200px;padding:12px 14px;border-radius:10px;}
.overview-modal .ov-ann-card .ov-ac-title{font-size:12px;margin-bottom:4px;}
.overview-modal .ov-ann-card .ov-ac-meta{font-size:10px;}
/* Event mini cards in overview */
.ov-ev-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;}
.ov-ev-row::-webkit-scrollbar{height:3px;}
.ov-ev-mini{min-width:155px;max-width:180px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .14s;flex-shrink:0;scroll-snap-align:start;}
.ov-ev-mini:hover{border-color:rgba(255,249,62,.2);background:var(--panel2);}
.ov-ev-mini .ov-evm-title{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ov-ev-mini .ov-evm-going{font-size:10px;color:var(--muted);margin-bottom:4px;}
.ov-ev-mini .ov-evm-date{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px;}
.ov-ev-mini .ov-evm-date svg{opacity:.4;}
.ov-ev-mini .ov-evm-actions{display:flex;gap:4px;margin-top:8px;}
.ov-ev-mini .ov-evm-btn{flex:1;padding:4px 0;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted-light);font-size:10px;font-weight:600;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;}
.ov-ev-mini .ov-evm-btn:hover{background:rgba(255,255,255,.04);color:#fff;}
.ov-ev-mini .ov-evm-btn.active{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);}
/* Quick actions compact */
.overview-modal .ov-quick-action{padding:6px 12px;font-size:11px;}
/* Stats grid compact */
.overview-modal .ov-stats-grid{gap:4px;}
.overview-modal .ov-stat-card{padding:8px 10px;}
.overview-modal .ov-stat-card .ov-sc-val{font-size:16px;}
.overview-modal .ov-stat-card .ov-sc-label{font-size:9px;}
/* Welcome / about */
.overview-modal .ov-welcome-card{padding:10px 14px;}
.overview-modal .ov-welcome-card .ov-wc-text{font-size:12px;line-height:1.4;}
/* Rooms */
.overview-modal .ov-room-chip{padding:4px 10px;font-size:11px;}
/* Edit bar */
.overview-modal .ov-edit-bar{padding:4px 16px;font-size:10px;}
/* Post announcement bar */
.ov-post-bar{display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--panel);border-top:1px solid var(--border);flex-shrink:0;}
.ov-post-bar input{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px 14px;color:var(--text);font-size:12.5px;font-family:inherit;}
.ov-post-bar input::placeholder{color:var(--muted);}
.ov-post-bar input:focus{outline:none;border-color:rgba(255,249,62,.2);}
@media(max-width:768px){.overview-modal{width:calc(100vw - 12px)!important;height:calc(100vh - 12px)!important;border-radius:14px;}}
.profile-wrap{flex:1;display:flex;overflow:hidden;background:transparent;}
/* Settings sidebar — Discord-style clean nav */
.profile-nav{width:270px;min-width:270px;background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);display:flex;flex-direction:column;padding:12px 8px 12px;overflow-y:auto;border-right:1px solid var(--glass-border);}
.profile-nav-section{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:16px 14px 5px;}
.profile-nav-item{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.45);transition:all .12s;position:relative;margin:1px 0;border-radius:6px;font-weight:500;}
.profile-nav-item:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);}
.profile-nav-item.active{color:#fff;background:rgba(255,255,255,.06);font-weight:600;}
.profile-nav-item.active::before{display:none;}
.profile-nav-item .pni-icon{opacity:.5;flex-shrink:0;transition:opacity .12s;display:flex;align-items:center;justify-content:center;width:18px;height:18px;}
.profile-nav-item.active .pni-icon{opacity:1;}
.profile-nav-item:hover .pni-icon{opacity:.75;}
.profile-nav-sep{height:1px;background:rgba(255,255,255,.04);margin:8px 14px;}
/* Main settings area */
.profile-main{flex:1;overflow-y:auto;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);scroll-behavior:smooth;}
.settings-panel{max-width:100%;padding:0 20px 60px;margin:0;}
.settings-section-title{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.04);}
.settings-row{display:flex;align-items:flex-start;gap:16px;padding:14px;border:1px solid transparent;border-radius:12px;margin-bottom:2px;transition:all .12s;}
.settings-row:hover{background:rgba(255,255,255,.02);}
.settings-row-label{width:160px;flex-shrink:0;}
.settings-row-label .srl-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:2px;}
.settings-row-label .srl-desc{font-size:11px;color:rgba(255,255,255,.3);line-height:1.4;}
.settings-row-content{flex:1;min-width:0;}
/* Refined input */
.settings-input{width:100%;padding:10px 14px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#fff;font-family:var(--font-ui);font-size:13px;outline:none;transition:border-color .15s;box-sizing:border-box;}
.settings-input:focus{border-color:rgba(254,248,61,.25);}
.settings-input::placeholder{color:rgba(255,255,255,.15);}
.settings-input:disabled{opacity:.35;cursor:not-allowed;}
/* Save button */
.settings-save-btn{display:inline-flex;align-items:center;gap:5px;background:var(--accent);color:#13161d;border:none;border-radius:8px;padding:8px 18px;font-family:var(--font-display);font-size:12px;font-weight:800;cursor:pointer;transition:all .15s;}
.settings-save-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.settings-save-btn:active{transform:translateY(0);}
.settings-save-btn-ghost{display:inline-flex;align-items:center;gap:5px;background:transparent;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-pill);padding:5px 14px;font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.settings-save-btn-ghost:hover{border-color:rgba(255,255,255,.25);color:#fff;}
/* Profile preview card */
.profile-preview-card{background:var(--panel);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
/* Font picker tiles */
.font-tile{padding:var(--space-sm) var(--space-md);border:1.5px solid var(--surface-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;text-align:center;}
.font-tile:hover{border-color:var(--surface-border-hover);background:var(--surface-1);}
.font-tile.sel{border-color:var(--accent);background:rgba(255,249,62,.06);box-shadow:0 0 0 1px rgba(255,249,62,.2);}
.font-tile-preview{font-size:15px;font-weight:600;color:#fff;margin-bottom:3px;}
.font-tile-name{font-size:10px;color:rgba(255,255,255,.35);}
/* Connected account rows */
.connected-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.connected-row:last-child{border-bottom:none;}
.connected-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.connected-label{width:80px;font-size:13px;font-weight:600;color:rgba(255,255,255,.6);flex-shrink:0;}
/* Danger zone */
.danger-section-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,113,113,.45);margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid rgba(248,113,113,.08);}
.danger-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(248,113,113,.03);color:rgba(248,113,113,.7);border:1.5px solid rgba(248,113,113,.12);border-radius:14px;padding:11px 22px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);}
.danger-btn:hover{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35);color:var(--red);transform:translateY(-1px);box-shadow:0 4px 14px rgba(248,113,113,.08);}
/* ── FULL PROFILE VIEW — redesigned ───────────────── */
.profile-banner-area{width:100%;height:220px;background:linear-gradient(135deg,#0f1830,#1a0f30,#0f2030);position:relative;overflow:hidden;}
.profile-banner-area img{width:100%;height:100%;object-fit:cover;}
.profile-banner-area::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--panel) 0%,rgba(14,16,28,.5) 40%,transparent 100%);}
.profile-av-row{display:flex;align-items:flex-end;gap:16px;padding:0 28px;margin-top:-48px;margin-bottom:6px;position:relative;z-index:2;}
.profile-av-big{width:96px;height:96px;border-radius:50%;background:var(--panel2);border:5px solid var(--panel);font-size:28px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.6);transition:transform .2s cubic-bezier(.22,1,.36,1);}
.profile-av-big:hover{transform:scale(1.04);}
.profile-av-big img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* Profile Decorations */
.profile-decoration-wrap{position:relative;display:inline-block;}
.profile-decoration-overlay,.profile-decoration-overlay-sm,.profile-decoration-overlay-lg,.profile-decoration-overlay-ml{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;object-fit:contain;}
.profile-decoration-overlay{width:110.87%;height:110.87%;}
.profile-decoration-overlay-lg{width:110.87%;height:110.87%;}
.profile-decoration-overlay-sm,.profile-decoration-overlay-ml{width:100%;height:100%;}
.profile-display-name{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:2px;display:flex;align-items:center;gap:6px;}
.profile-username{font-size:13px;color:rgba(255,255,255,.3);}
.profile-content{padding:0 28px 36px;}
.profile-stats-row{display:flex;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:14px;overflow:hidden;margin-bottom:20px;}
.ps-stat{flex:1;padding:14px 12px;text-align:center;border-right:1px solid rgba(255,255,255,.04);}
.ps-stat:last-child{border-right:none;}
.ps-val{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--accent);}
.ps-key{font-size:10.5px;color:rgba(255,255,255,.3);margin-top:2px;font-weight:600;letter-spacing:.02em;}
.settings-section{margin-bottom:24px;}
.settings-title{font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.s-row{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:7px;cursor:pointer;}
.s-row .sl{font-size:13.5px;font-weight:600;}
.s-row .ss{font-size:12px;color:var(--muted-light);margin-top:1px;}
.field-input{width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:11px;color:#fff;font-family:var(--font-ui);font-size:13.5px;outline:none;transition:border-color .12s;}
.field-input:focus{border-color:rgba(255,249,62,.3);}
.field-input::placeholder{color:#252c3d;}
.toggle{width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.08);position:relative;cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);flex-shrink:0;border:1px solid rgba(255,255,255,.06);}
.toggle.on{background:var(--accent);border-color:rgba(255,249,62,.3);box-shadow:0 0 8px rgba(255,249,62,.15);}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;}
.toggle.on::after{transform:translateX(18px);}
.radiance-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(90deg,rgba(255,160,62,.12),rgba(255,180,62,.12));border:1px solid rgba(255,160,62,.25);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-weight:700;color:#ff9d3e;margin-top:5px;}
.bsettings-wrap{flex:1;display:flex;overflow:hidden;background:transparent;}
.bsettings-nav{width:210px;min-width:210px;border-right:1px solid var(--glass-border);background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);overflow-y:auto;padding:0;display:flex;flex-direction:column;}
.bsettings-nav-header{padding:16px 14px 12px;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid rgba(255,255,255,.04);flex-shrink:0;}
.bsettings-nav-scroll{flex:1;overflow-y:auto;padding:8px 0 16px;}
.bsettings-main{flex:1;overflow-y:auto;padding:40px 20px 40px 20px;}
.bsettings-main-wrap{flex:1;display:flex;overflow-y:auto;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);}
.bsettings-preview{width:240px;min-width:240px;padding:40px 24px;overflow-y:auto;border-left:1px solid var(--glass-border);}
.bsettings-nav-item{display:flex;align-items:center;gap:9px;padding:7px 12px;margin:1px 8px;border-radius:6px;cursor:pointer;font-size:14px;color:rgba(255,255,255,.45);transition:all .12s;font-weight:500;}
.bsettings-nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);}
.bsettings-nav-item.active{background:rgba(255,249,62,.08);color:var(--accent);font-weight:600;}
.bsettings-nav-item svg,.bsettings-nav-item img{opacity:.6;flex-shrink:0;}
.bsettings-nav-item.active svg,.bsettings-nav-item.active img{opacity:1;}
.bsettings-nav-item.danger{color:rgba(248,113,113,.6);}
.bsettings-nav-item.danger:hover{background:rgba(248,113,113,.08);color:var(--red);}
.bsettings-nav-section{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.2);padding:18px 12px 4px 20px;}
.bsettings-nav-sep{height:1px;background:rgba(255,255,255,.04);margin:8px 16px;}
.bsettings-nav-back{display:flex;align-items:center;gap:8px;padding:8px 12px;margin:4px 8px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.3);transition:all .12s;}
.bsettings-nav-back:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);}
.bs-section-title{font-size:18px;font-weight:800;font-family:var(--font-display);color:#fff;margin-bottom:6px;}
.bs-section-desc{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:20px;line-height:1.5;}
.bs-divider{height:1px;background:rgba(255,255,255,.06);margin:28px 0;}
.bs-field-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.bs-preview-card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;}
.bs-preview-banner{height:100px;background:linear-gradient(135deg,#1a0f30,#0f1830);overflow:hidden;}
.bs-preview-banner img{width:100%;height:100%;object-fit:cover;}
.bs-preview-body{padding:16px;position:relative;}
.bs-preview-icon{width:56px;height:56px;border-radius:16px;background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:-36px;border:3px solid var(--panel);position:relative;z-index:1;}
.bs-preview-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.bs-preview-name{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;margin-top:8px;}
.bs-preview-stats{font-size:11px;color:rgba(255,255,255,.3);margin-top:4px;display:flex;gap:8px;align-items:center;}
.bs-preview-desc{font-size:12px;color:rgba(255,255,255,.4);margin-top:10px;line-height:1.5;}
.role-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:all .12s;}
.role-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
.role-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.role-name{flex:1;font-size:13.5px;font-weight:600;}
/* ── Role Templates ──────────────────────── */
.role-tmpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:20px;}
.role-tmpl-card{padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all .15s;background:var(--panel);position:relative;overflow:hidden;}
.role-tmpl-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.03);}
.role-tmpl-card .rtc-emoji{font-size:22px;margin-bottom:6px;}
.role-tmpl-card .rtc-name{font-family:var(--font-display);font-size:13px;font-weight:800;margin-bottom:3px;color:#fff;}
.role-tmpl-card .rtc-desc{font-size:10.5px;color:var(--muted-light);line-height:1.4;margin-bottom:8px;}
.role-tmpl-card .rtc-roles{display:flex;flex-wrap:wrap;gap:4px;}
.role-tmpl-card .rtc-role-pill{font-size:9px;padding:2px 7px;border-radius:var(--radius-pill);font-weight:600;}
/* ── NEW Message Indicator Bar ──────────── */
.new-msg-bar{display:flex;align-items:center;gap:0;margin:6px 0;position:relative;z-index:2;pointer-events:none;user-select:none;}
.new-msg-bar::before,.new-msg-bar::after{content:'';flex:1;height:1px;background:var(--red);}
.new-msg-bar .new-msg-label{padding:0 10px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);white-space:nowrap;}
.load-more-bar{display:flex;justify-content:center;padding:8px 0;margin:4px 0;}
.load-more-btn{padding:6px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s;}
.load-more-btn:hover{background:rgba(255,249,62,.06);border-color:rgba(255,249,62,.15);color:var(--accent);}
.load-more-btn:disabled{opacity:.4;cursor:default;}
/* ── Overview Room ──────────────────────── */
.overview-room{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.ov-banner{position:relative;width:100%;height:220px;overflow:visible;flex-shrink:0;border-bottom:1.5px solid var(--border);}
.ov-banner img{width:100%;height:100%;object-fit:cover;}
.ov-banner .ov-gradient{display:none;}
.ov-emblem{position:absolute;bottom:-56px;left:50%;transform:translateX(-50%);z-index:3;}
.ov-emblem .ov-icon{width:128px;height:128px;border-radius:28px;background:var(--panel);border:5px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:56px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);transition:transform .2s cubic-bezier(.22,1,.36,1);}
.ov-emblem .ov-icon:hover{transform:scale(1.04);}
.ov-emblem .ov-icon img{width:100%;height:100%;object-fit:cover;border-radius:23px;}
.ov-identity{text-align:center;padding:66px 24px 12px;position:relative;z-index:2;}
.ov-identity .ov-name{font-family:var(--font-display);font-size:26px;font-weight:800;color:#fff;letter-spacing:-.03em;}
.ov-identity .ov-tagline{font-size:13px;color:var(--muted-light);margin-top:4px;line-height:1.45;max-width:480px;margin-left:auto;margin-right:auto;}
.ov-badges{display:flex;justify-content:center;gap:6px;padding:8px 0 4px;}
.ov-badges .ov-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted-light);padding:4px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-pill);}
.ov-content{padding:12px 28px 16px;max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:8px;}
.ov-section{flex-shrink:1;min-height:0;}
.ov-section-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.ov-section-title{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;}
.ov-section-link{font-size:11px;color:var(--muted);cursor:pointer;transition:color .12s;}
.ov-section-link:hover{color:var(--accent);}
.ov-card-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;}
.ov-card-row::-webkit-scrollbar{height:3px;}
.ov-ann-card{min-width:200px;max-width:240px;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .14s;flex-shrink:0;scroll-snap-align:start;}
.ov-ann-card:hover{border-color:rgba(255,249,62,.2);background:var(--panel2);}
.ov-ann-card .ov-ac-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ov-ann-card .ov-ac-meta{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.ov-welcome-card{padding:20px 24px;background:var(--panel);border:1px solid var(--border);border-radius:14px;}
.ov-welcome-card .ov-wc-text{font-size:13px;color:rgba(255,255,255,.6);line-height:1.65;}
.ov-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;}
.ov-stat-card{padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;text-align:center;}
.ov-stat-card .ov-sc-val{font-family:var(--font-display);font-size:20px;font-weight:800;color:#fff;}
.ov-stat-card .ov-sc-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}
.ov-edit-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:10px 24px;background:var(--glass-mid);border-bottom:1px solid var(--glass-border);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);}
.ov-edit-bar .ov-eb-label{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--accent);flex:1;}
.ov-quick-action{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--border);color:rgba(255,255,255,.7);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s;font-family:var(--font-ui);}
.ov-quick-action:hover{border-color:rgba(255,249,62,.15);background:var(--panel2);color:#fff;}
.ov-quick-action svg{opacity:.5;}
.ov-room-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--border);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;cursor:pointer;transition:all .14s;font-family:var(--font-ui);}
.ov-room-chip:hover{border-color:rgba(255,249,62,.15);background:var(--panel2);color:#fff;}
/* Sidebar overview item */
.ch-overview-item{display:flex;align-items:center;gap:7px;padding:5px 8px;margin:2px 4px 4px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.4);transition:all .1s ease;position:relative;font-weight:600;border:1px solid transparent;min-height:32px;}
.ch-overview-item:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);border-color:transparent;}
.ch-overview-item.active{background:rgba(255,255,255,.06);color:#fff;border-color:transparent;}
.ch-overview-item .ov-sidebar-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ch-sidebar-action{display:flex;align-items:center;gap:7px;padding:5px 8px;margin:1px 4px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.4);transition:all .1s ease;position:relative;font-weight:600;border:1px solid transparent;min-height:32px;}
.ch-sidebar-action:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.8);border-color:transparent;}
.ch-sidebar-action.active{background:rgba(255,255,255,.06);color:#fff;border-color:transparent;}
.ch-sidebar-action .sa-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.5;}
.ch-sidebar-action:hover .sa-icon,.ch-sidebar-action.active .sa-icon{opacity:.8;}
/* Legacy Bastion Hub kept for compat */
.bastion-hub-wrap{flex:1;display:flex;overflow:hidden;}
.bastion-hub-main{flex:1;overflow-y:auto;padding:32px;background:rgba(10,12,20,.5);}
.bhub-card{padding:20px 22px;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;transition:all .14s;}
.bhub-card:hover{border-color:rgba(255,255,255,.1);background:var(--panel2);}
.bhub-card .bhub-title{font-family:var(--font-display);font-size:15px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:8px;color:#fff;}
.bhub-card .bhub-desc{font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.55;margin-bottom:12px;}
.bhub-action-row{display:flex;gap:8px;flex-wrap:wrap;}
.bhub-stat{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;font-size:12px;color:var(--muted-light);font-weight:500;}
.bhub-stat .bhub-stat-val{font-family:var(--font-display);font-weight:800;color:#fff;font-size:14px;}
.perm-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.perm-info{flex:1;}
.perm-label{font-size:13.5px;font-weight:600;}
.emoji-upload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-bottom:16px;}
.emoji-slot{min-height:70px;border-radius:12px;border:1.5px dashed var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .12s;position:relative;overflow:hidden;font-size:22px;flex-direction:column;gap:3px;padding:6px;}
.emoji-slot:hover{border-color:var(--accent);background:var(--accent-dim);}
.emoji-slot.filled{border-style:solid;border-color:var(--border);}
.emoji-slot img{width:38px;height:38px;object-fit:contain;border-radius:6px;}
.emoji-slot .es-name{font-size:9px;color:var(--muted);text-overflow:ellipsis;overflow:hidden;width:100%;text-align:center;}
.emoji-slot .es-del{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:9px;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.emoji-slot:hover .es-del{display:flex;}
.automod-rule{padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;}
.amr-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.amr-title{font-size:14px;font-weight:700;flex:1;}
.amr-desc{font-size:12.5px;color:var(--muted-light);line-height:1.55;margin-bottom:10px;}
.amr-keywords{display:flex;flex-wrap:wrap;gap:5px;}
.amr-kw{display:flex;align-items:center;gap:4px;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:var(--red);font-size:11.5px;padding:3px 8px;border-radius:var(--radius-pill);}
.voice-ch-item{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:1px 6px;border-radius:10px;cursor:pointer;font-size:12.5px;color:var(--muted);transition:all .1s;}
.voice-ch-item:hover{background:rgba(255,255,255,.05);color:var(--text);}
.voice-ch-item.active-vc{background:rgba(62,207,110,.06);color:var(--green);}
.voice-connected-bar{background:rgba(62,207,110,.04);border:1px solid rgba(62,207,110,.1);border-radius:14px;padding:10px 14px;margin:6px 10px 6px;display:none;backdrop-filter:blur(8px);transition:all .2s;}
.voice-connected-bar.show{display:block;}
.vcb-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.vcb-name{font-size:12px;font-weight:600;color:var(--green);flex:1;}
.vcb-disc{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.15);color:var(--red);font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;cursor:pointer;transition:all .15s;}
.vcb-disc:hover{background:rgba(248,113,113,.2);}
.vcb-part{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted-light);}
.voice-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);gap:20px;padding:40px;}
.voice-panel-title{font-family:var(--font-display);font-size:22px;font-weight:800;}
.voice-panel-sub{font-size:14px;color:var(--muted);}
.voice-avatars{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:600px;}
.voice-avatar-card{display:flex;flex-direction:column;align-items:center;gap:8px;}
.voice-avatar-ring{width:72px;height:72px;border-radius:50%;border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;background:var(--panel);}
.voice-avatar-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.voice-avatar-ring.speaking{border-color:var(--green);}
.voice-avatar-name{font-size:12px;color:var(--text);}
/* ── Bot / Automation System ── */
.bot-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;gap:14px;transition:all .12s;cursor:pointer;}
.bot-card:hover{border-color:rgba(167,139,250,.25);background:rgba(167,139,250,.03);}
.bot-av{width:48px;height:48px;border-radius:14px;background:rgba(167,139,250,.1);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;}
.bot-av img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.bot-meta{flex:1;min-width:0;}
.bot-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;}
.bot-name .ftz-badge{width:22px;height:22px;}
.bot-desc{font-size:12px;color:var(--muted-light);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bot-stats{display:flex;gap:10px;margin-top:6px;font-size:10.5px;color:var(--muted);}
.bot-perm-tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5);}
.bot-perm-tag.granted{background:rgba(62,207,110,.08);border-color:rgba(62,207,110,.2);color:var(--green);}
.block-editor{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;min-height:300px;}
.block-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:10px;margin-bottom:6px;font-size:12.5px;transition:all .12s;}
.block-row:hover{border-color:rgba(167,139,250,.2);background:rgba(167,139,250,.03);}
.block-row .block-type{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;flex-shrink:0;}
.block-row .block-type.when{background:rgba(96,165,250,.12);color:var(--blue);}
.block-row .block-type.then{background:rgba(62,207,110,.12);color:var(--green);}
.block-row .block-type.if{background:rgba(251,191,36,.12);color:var(--gold);}
.block-row .block-val{flex:1;min-width:0;}
.block-row .block-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;opacity:0;transition:.12s;}
.block-row:hover .block-del{opacity:1;}
.arsenal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.voice-controls{display:flex;gap:12px;align-items:center;margin-top:8px;}
.vc-btn{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;}
.vc-btn.muted-btn{background:rgba(255,255,255,.08);color:var(--text);}
.vc-btn.muted-btn.active{background:rgba(248,113,113,.15);border:1px solid rgba(248,113,113,.3);}
.vc-btn.disc-btn{background:var(--red);color:#fff;}
/* ── Emoji Picker 4.0 — professional, icon-only sidebar ─────────── */
.emoji-picker-panel{position:fixed;width:448px;max-width:calc(100vw - 16px);max-height:520px;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:14px;padding:0;z-index:9000;box-shadow:0 24px 72px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.035);display:none;flex-direction:row;overflow:hidden;font-family:var(--font-ui);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);animation:pickerSlideIn .22s cubic-bezier(.22,1,.36,1);}
.emoji-picker-panel.show{display:flex;}
/* Icon-only right sidebar — Discord-style, 48px wide. No text labels; the
   button's title attribute provides an on-hover native tooltip. */
.epp-sidebar{width:48px;background:rgba(0,0,0,.22);border-left:1px solid rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;padding:6px 4px;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;flex-shrink:0;}
.epp-sidebar::-webkit-scrollbar{width:0;height:0;}
.epp-sidebar-btn{position:relative;width:36px;height:36px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:rgba(255,255,255,.48);transition:background .14s ease,color .14s ease,transform .14s ease;flex-shrink:0;padding:0;}
.epp-sidebar-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);}
.epp-sidebar-btn.active{background:rgba(255,249,62,.12);color:var(--accent);}
.epp-sidebar-btn.active::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:var(--accent);border-radius:0 3px 3px 0;}
.epp-sidebar-emblem{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit;}
.epp-sidebar-emblem svg{color:inherit;}
.epp-sidebar-emblem img{width:22px;height:22px;object-fit:contain;}
/* Fortized logo: never round. The PNG already has its own silhouette. */
.epp-sidebar-btn .epp-ftz-icon,
.epp-sidebar-btn.is-ftz .epp-sidebar-emblem,
.epp-sidebar-btn.is-ftz .epp-sidebar-emblem img{border-radius:0!important;}
/* Legacy label class kept hidden — the icon-only sidebar never renders it
   but old nodes still in the DOM shouldn't leak text. */
.epp-sidebar-label{display:none!important;}
/* Fortized logo rendered as a mask so it inherits currentColor — matches the
   other stroke-SVG category icons exactly. */
.epp-ftz-icon{
  display:inline-block;
  width:22px;
  height:22px;
  background-color:currentColor;
  -webkit-mask:url('/Fortized logo.png') center/contain no-repeat;
          mask:url('/Fortized logo.png') center/contain no-repeat;
}
.epp-sidebar-sep{width:24px;height:1px;background:rgba(255,255,255,.08);margin:6px auto;flex-shrink:0;}
.epp-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
@keyframes emojiPanelIn{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
/* Emoji autocomplete dropdown */
.emoji-autocomplete{position:fixed;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:12px;padding:6px;z-index:9500;box-shadow:0 12px 36px rgba(0,0,0,.5);max-width:380px;display:none;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);}
.emoji-autocomplete.show{display:flex;flex-wrap:wrap;gap:3px;}
.ema-item{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);min-width:140px;flex:1;transition:background .12s;}
.ema-item:hover,.ema-item.selected{background:rgba(255,249,62,.08);color:var(--accent);}
.ema-item img{width:22px;height:22px;object-fit:contain;}
.ema-item .ema-preview{font-size:20px;line-height:1;}
.ema-item .ema-name{font-size:11px;color:rgba(255,255,255,.25);font-family:monospace;}
.epp-search{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);}
.epp-search input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:12.5px;padding:9px 13px;outline:none;transition:all .18s;box-sizing:border-box;}
.epp-search input:focus{border-color:rgba(255,249,62,.2);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(255,249,62,.04);}
.epp-search input::placeholder{color:rgba(255,255,255,.18);}
.epp-cats{display:flex;gap:1px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04);overflow-x:auto;background:transparent;}
.epp-cats::-webkit-scrollbar{height:0;}
.epp-cat{width:32px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;transition:all .15s cubic-bezier(.22,1,.36,1);border:none;background:transparent;}
.epp-cat:hover{background:rgba(255,255,255,.06);transform:scale(1.08);}.epp-cat.active{background:rgba(255,249,62,.1);}
.epp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:8px 10px;max-height:300px;overflow-y:auto;scrollbar-width:thin;}
.epp-emoji{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;transition:all .15s cubic-bezier(.22,1,.36,1);border:none;background:transparent;}
.epp-emoji:hover{background:rgba(255,249,62,.08);transform:scale(1.2);border-radius:8px;}
.epp-custom-section{padding:8px 10px;border-top:1px solid rgba(255,255,255,.04);}
.epp-custom-title{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,249,62,.3);margin-bottom:6px;padding:0 2px;}
.epp-custom-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.epp-custom-emoji{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;transition:all .18s cubic-bezier(.22,1,.36,1);border:none;}
.epp-custom-emoji:hover{background:rgba(255,249,62,.1);transform:scale(1.25);border-radius:8px;}
.epp-custom-emoji img{width:30px;height:30px;object-fit:contain;}
/* Emoji info popover */
.emoji-info-popover{position:fixed;background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:14px;padding:16px;z-index:9100;box-shadow:0 16px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04);width:220px;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);animation:ctxIn .14s cubic-bezier(.22,1,.36,1);}
.emoji-info-popover .eip-preview{font-size:42px;text-align:center;margin-bottom:10px;}
.emoji-info-popover .eip-preview img{width:48px;height:48px;object-fit:contain;}
.emoji-info-popover .eip-name{font-family:monospace;font-size:12px;color:rgba(255,255,255,.5);text-align:center;margin-bottom:8px;}
.emoji-info-popover .eip-type{font-size:11px;color:rgba(255,255,255,.3);text-align:center;padding:4px 10px;background:rgba(255,255,255,.04);border-radius:6px;}
.modal-overlay{display:none;position:fixed;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.85),rgba(0,0,0,.88));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;align-items:center;justify-content:center;animation:overlayFadeIn .2s ease-out;}
.modal-overlay.open,.modal-overlay.show{display:flex;}
@keyframes overlayFadeIn{from{opacity:0;backdrop-filter:blur(0);}to{opacity:1;backdrop-filter:blur(12px);}}
@keyframes mIn{from{opacity:0;transform:scale(.93) translateY(14px);}to{opacity:1;transform:none;}}
@keyframes mOut{from{opacity:1;transform:none;}to{opacity:0;transform:scale(.95) translateY(8px);}}
@keyframes skeletonPulse{0%,100%{opacity:.4;}50%{opacity:.8;}}
.modal{background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1.5px solid var(--glass-border);border-radius:var(--radius-xl);width:100%;max-width:680px;overflow:hidden;animation:mIn .25s var(--ease-out) both;box-shadow:0 16px 48px rgba(0,0,0,.65),0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08);}
.modal.wide{max-width:580px;}
.modal.tall{max-height:80vh;display:flex;flex-direction:column;}
.modal.tall .modal-body{overflow-y:auto;flex:1;}
.modal::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,249,62,.02),rgba(167,139,250,.01));pointer-events:none;border-radius:var(--radius-xl);}
.modal-bar{height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);position:relative;z-index:1;}
.modal-body{padding:26px;}
.modal-title{font-family:var(--font-display);font-size:18px;font-weight:800;margin-bottom:5px;}
.modal-sub{font-size:13px;color:var(--muted-light);margin-bottom:22px;}
.modal-error{font-size:12px;color:var(--red);margin-bottom:8px;min-height:16px;display:flex;align-items:center;gap:6px;}
.modal-error:not(:empty)::before{content:'⚠';flex-shrink:0;}
.modal-success{font-size:12px;color:var(--green);margin-bottom:8px;}
.modal-actions{display:flex;gap:9px;margin-top:6px;}
.modal-actions .btn-a,.modal-actions .btn-g{flex:1;justify-content:center;}
.modal-input{width:100%;padding:10px 14px;background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:11px;color:#fff;font-family:var(--font-ui);font-size:13.5px;outline:none;margin-bottom:12px;transition:all .15s cubic-bezier(.22,1,.36,1);box-shadow:inset 0 1px 3px rgba(0,0,0,.2);}
.modal-input:focus{border-color:rgba(255,249,62,.32);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(255,249,62,.06),inset 0 1px 3px rgba(0,0,0,.2);}
.modal-input:disabled{opacity:.6;cursor:not-allowed;background:rgba(255,255,255,.01);}
.modal-input::placeholder{color:var(--muted-light);}
.btn-a{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#13161d;padding:10px 20px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--font-md);font-weight:700;border:none;cursor:pointer;transition:all .1s;position:relative;overflow:hidden;}
.btn-a:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-a:active{transform:scale(.97);filter:brightness(.95);}
.btn-a:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-g{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--muted-light);padding:9px 18px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--font-md);font-weight:700;border:1px solid var(--border);cursor:pointer;transition:all .1s;}
.btn-g:hover{border-color:#2e3a52;background:var(--surface-1);}
.btn-g:active{transform:scale(.97);}
.btn-d{display:inline-flex;align-items:center;gap:7px;background:var(--state-danger-dim);color:var(--red);padding:9px 18px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--font-md);font-weight:700;border:1px solid rgba(248,113,113,.2);cursor:pointer;transition:all .1s;}
.btn-d:hover{background:rgba(248,113,113,.18);}
.btn-d:active{transform:scale(.97);}
/* ── Normalized Design Token Components ─────────── */
.ftz-panel{background:var(--surface-1);border:1px solid var(--surface-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .18s var(--ease-out);}
.ftz-panel:hover{border-color:var(--surface-border-hover);}
.ftz-panel-head{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--surface-border);display:flex;align-items:center;gap:var(--space-sm);}
.ftz-panel-head h3{font-family:var(--font-display);font-size:var(--font-md);font-weight:800;margin:0;color:rgba(255,255,255,.75);}
.ftz-panel-body{padding:var(--space-lg);}
.ftz-section-hdr{font-size:var(--font-hdr);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-lg);color:rgba(255,255,255,.3);}
/* Utility tag badges (not used with profile badge system) */
.ftz-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--font-xs);font-weight:700;line-height:1.3;}
.ftz-tag.success{background:var(--state-success-dim);color:var(--state-success);border:1px solid rgba(62,207,110,.18);}
.ftz-tag.danger{background:var(--state-danger-dim);color:var(--state-danger);border:1px solid rgba(248,113,113,.18);}
.ftz-tag.warning{background:var(--state-warning-dim);color:var(--state-warning);border:1px solid rgba(245,158,11,.18);}
.ftz-tag.info{background:var(--state-info-dim);color:var(--state-info);border:1px solid rgba(96,165,250,.18);}
.ftz-tag.neutral{background:var(--surface-1);color:var(--muted-light);border:1px solid var(--surface-border);}
.ftz-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 16px;border-radius:var(--radius-pill);font-size:var(--font-sm);font-weight:600;cursor:pointer;border:1.5px solid transparent;color:rgba(255,255,255,.4);transition:all .2s var(--ease-out);background:var(--surface-1);}
.ftz-chip:hover{background:var(--surface-2);color:rgba(255,255,255,.8);border-color:var(--surface-border-hover);}
.ftz-chip.active{background:var(--accent-dim);border-color:rgba(255,249,62,.25);color:var(--accent);box-shadow:0 2px 12px rgba(255,249,62,.08);}
.ftz-popover{background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-lg);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);}
.ftz-divider{height:1px;background:var(--surface-border);margin:var(--space-md) 0;}
.ftz-input{width:100%;padding:11px 16px;background:var(--surface-1);border:1.5px solid var(--surface-border);border-radius:var(--radius-md);color:#fff;font-family:var(--font-ui);font-size:var(--font-md);outline:none;transition:all .2s var(--ease-out);box-sizing:border-box;}
.ftz-input:focus{border-color:rgba(254,248,61,.3);box-shadow:0 0 0 3px rgba(254,248,61,.05);background:rgba(255,255,255,.04);}
.ftz-input::placeholder{color:rgba(255,255,255,.18);}
.ftz-stat{background:var(--surface-1);border:1px solid var(--surface-border);border-radius:var(--radius-lg);padding:var(--space-lg);position:relative;overflow:hidden;transition:all .2s var(--ease-out);}
.ftz-stat:hover{border-color:var(--surface-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.ftz-stat-val{font-family:var(--font-display);font-size:var(--font-2xl);font-weight:800;line-height:1;}
.ftz-stat-label{font-size:var(--font-xs);color:rgba(255,255,255,.3);margin-top:var(--space-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.ftz-grid{display:grid;gap:var(--space-md);}
.ftz-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.ftz-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.ftz-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.ftz-grid.cols-5{grid-template-columns:repeat(5,1fr);}
.ftz-list-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid rgba(255,255,255,.03);transition:background .12s;cursor:pointer;}
.ftz-list-row:hover{background:var(--surface-1);}
.ftz-list-row:last-child{border-bottom:none;}
.toast{position:fixed;bottom:22px;right:22px;z-index:var(--z-max);background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:11px 18px;font-size:var(--font-md);font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;transition:transform .25s var(--ease-out),opacity .25s;max-width:280px;pointer-events:none;}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-left:3px solid var(--green);color:#a3e8b8;}
.toast.error{border-left:3px solid var(--red);color:#fca5a5;}
.toast.info{border-left:3px solid var(--accent);color:var(--accent);}
.ctx-menu{position:fixed;z-index:var(--z-max);background:var(--glass-heavy);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:6px 0;min-width:220px;max-width:280px;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);animation:ctxIn .14s var(--ease-out);display:none;overflow:hidden;}
.ctx-menu.ctx-visible{display:block;}
/* ── System Announcement Banner ─────────────────── */
.sys-announce-bar{position:fixed;top:0;left:72px;right:0;z-index:var(--z-overlay);background:rgba(var(--accent-rgb,254,248,61),.08);border-bottom:1px solid rgba(var(--accent-rgb,254,248,61),.12);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);display:flex;align-items:center;gap:0;padding:0;height:36px;animation:announceDrop .4s cubic-bezier(.22,1,.36,1);transform-origin:top;}
body.is-desktop-app .sys-announce-bar{padding-right:140px;}
@keyframes announceDrop{from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:none;}}
.sys-announce-bar .sa-close{width:36px;height:36px;background:rgba(255,255,255,.04);border:none;border-right:1px solid rgba(var(--accent-rgb,254,248,61),.1);color:rgba(255,255,255,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
.sys-announce-bar .sa-close:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);}
.sys-announce-bar .sa-body{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;min-width:0;overflow:hidden;}
.sys-announce-bar .sa-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sys-announce-bar .sa-icon svg{width:14px;height:14px;color:var(--accent);}
.sys-announce-bar .sa-label{font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap;flex-shrink:0;}
.sys-announce-bar .sa-divider{width:1px;height:14px;background:rgba(var(--accent-rgb,254,248,61),.18);flex-shrink:0;}
.sys-announce-bar .sa-text{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* ── Announcement Room UI ───────────────────────── */
.ann-room{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.ann-room .room-topbar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--channel);}
.ann-room .room-topbar .rt-icon{width:28px;height:28px;border-radius:8px;background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ann-room .room-topbar .rt-icon svg{width:16px;height:16px;color:var(--accent);}
.ann-room .room-topbar .rt-name{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;}
.ann-room .room-topbar .rt-desc{font-size:11.5px;color:var(--muted);margin-left:4px;}
.ann-room .room-topbar .rt-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:var(--radius-pill);background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.12);color:var(--accent);}
.ann-sub-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--muted);cursor:pointer;transition:all .15s;}
.ann-sub-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(255,249,62,.06);}
.ann-sub-btn svg{width:12px;height:12px;}
.ann-sub-btn.on{background:linear-gradient(180deg,rgba(255,249,62,.12),rgba(255,249,62,.04));border-color:rgba(255,249,62,.3);color:var(--accent);}
.ann-sub-btn.on:hover{background:rgba(255,249,62,.16);}
.ann-feed{flex:1;overflow-y:auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:12px;}
.ann-feed .ann-empty{text-align:center;padding:60px 20px;color:var(--muted);}
.ann-feed .ann-empty svg{width:48px;height:48px;color:rgba(255,249,62,.2);margin-bottom:12px;}
.ann-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 20px;transition:all .14s;position:relative;}
.ann-card:hover{border-color:rgba(255,249,62,.12);background:var(--panel2);}
.ann-card .ann-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ann-card .ann-av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.ann-card .ann-author{font-size:13px;font-weight:700;color:#fff;}
.ann-card .ann-time{font-size:10.5px;color:var(--muted);}
.ann-card .ann-body{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.65;word-break:break-word;}
.ann-card .ann-body img{max-width:100%;border-radius:10px;margin-top:8px;}
.ann-card .ann-reactions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.ann-card .ann-accent-bar{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:.3;transition:opacity .2s;}
.ann-card:hover .ann-accent-bar{opacity:.6;}
.ann-compose{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--glass-border);background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);}
.ann-compose textarea{width:100%;padding:12px 14px;background:var(--panel);border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-size:13px;resize:vertical;min-height:48px;max-height:160px;outline:none;transition:border-color .12s;font-family:inherit;}
.ann-compose textarea:focus{border-color:rgba(255,249,62,.25);}
.ann-compose .ann-compose-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;}
.ann-readonly-bar{padding:14px 20px;border-top:1px solid var(--border);background:rgba(255,249,62,.02);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ann-readonly-bar svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
.ann-readonly-bar span{font-size:12px;color:var(--muted);}
/* ── Feedback Toast UI ─────────────────────────── */
.ftz-feedback-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:7500;background:var(--glass-heavy);border:1.5px solid rgba(255,249,62,.12);border-radius:18px;padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-lg);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);opacity:0;transition:all .3s var(--ease-out);pointer-events:none;max-width:380px;width:90%;}
.ftz-feedback-toast.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.ftz-feedback-toast .fb-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ftz-feedback-toast .fb-title{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;}
.ftz-feedback-toast .fb-sub{font-size:11.5px;color:rgba(255,255,255,.45);margin-bottom:12px;line-height:1.4;}
.ftz-feedback-toast .fb-actions{display:flex;gap:8px;}
.ftz-feedback-toast .fb-btn{flex:1;padding:9px 14px;border-radius:12px;border:1.5px solid var(--border);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;}
.ftz-feedback-toast .fb-btn:hover{border-color:rgba(255,249,62,.2);background:rgba(255,249,62,.06);color:var(--accent);}
.ftz-feedback-toast .fb-btn.fb-positive{background:rgba(62,207,110,.08);border-color:rgba(62,207,110,.2);color:var(--green);}
.ftz-feedback-toast .fb-btn.fb-positive:hover{background:rgba(62,207,110,.15);}
.ftz-feedback-toast .fb-btn.fb-negative{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.15);color:rgba(248,113,113,.7);}
.ftz-feedback-toast .fb-btn.fb-negative:hover{background:rgba(248,113,113,.12);}
.ftz-feedback-toast .fb-dismiss{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:6px;border:none;background:transparent;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .1s;}
.ftz-feedback-toast .fb-dismiss:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);}
.ftz-feedback-toast .fb-comment-wrap{margin-top:8px;animation:fadeIn .2s ease;}
.ftz-feedback-toast .fb-comment-input{transition:border-color .15s;}.ftz-feedback-toast .fb-comment-input:focus{border-color:rgba(255,249,62,.25);}
@keyframes callPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.4);opacity:0}}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes ctxIn{from{opacity:0;transform:scale(.96) translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes ctxRipple{0%{transform:scale(0);opacity:.18;}100%{transform:scale(2.5);opacity:0;}}
@keyframes ctxCheck{0%{stroke-dashoffset:20;}100%{stroke-dashoffset:0;}}
.ctx-group{padding:4px 6px;}
.ctx-group+.ctx-group{border-top:1px solid rgba(255,255,255,.04);margin:2px 10px 0;padding-top:4px;}
.ctx-item{display:flex;align-items:center;gap:var(--space-sm);padding:7px 12px;border-radius:var(--radius-sm);font-size:var(--font-md);font-weight:500;color:rgba(220,228,240,.75);cursor:pointer;transition:background .1s,color .1s,transform .06s;position:relative;overflow:hidden;min-height:32px;}
.ctx-item:hover{background:rgba(255,249,62,.06);color:rgba(255,255,255,.95);}
.ctx-item:active{transform:scale(.97);background:rgba(255,249,62,.1);}
.ctx-item .ctx-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.5;transition:opacity .1s;}
.ctx-item:hover .ctx-icon{opacity:.85;}
.ctx-item .ctx-icon svg{width:15px;height:15px;}
.ctx-item .ctx-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctx-item .ctx-hint{font-size:10px;font-weight:600;color:rgba(255,255,255,.14);margin-left:auto;padding-left:12px;flex-shrink:0;font-family:'SF Mono','Cascadia Code',monospace;background:rgba(255,255,255,.04);padding:2px 6px;border-radius:4px;}
.ctx-item.danger{color:rgba(248,113,113,.8);}
.ctx-item.danger:hover{background:rgba(248,113,113,.08);color:rgba(248,113,113,.95);}
.ctx-item.danger .ctx-icon{opacity:.5;}
.ctx-item.danger:hover .ctx-icon{opacity:.85;}
.ctx-item.disabled{opacity:.25;pointer-events:none;}
.ctx-section-label{padding:8px 12px 3px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.15);}
.ctx-sep{height:1px;background:rgba(255,255,255,.04);margin:3px 10px;}
/* ── Emoji Tooltip (Discord-style) ─────────────── */
.emoji-tooltip{position:fixed;z-index:9000;background:var(--glass-heavy);border:1.5px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-md);box-shadow:var(--shadow-lg);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);pointer-events:auto;animation:emojiTipIn .15s var(--ease-out);min-width:200px;max-width:260px;}
@keyframes emojiTipIn{from{opacity:0;transform:translateY(4px) scale(.97);}to{opacity:1;transform:none;}}
.emoji-tooltip .et-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.emoji-tooltip .et-big{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.emoji-tooltip .et-big img{width:36px;height:36px;object-fit:contain;}
.emoji-tooltip .et-name{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;word-break:break-word;overflow-wrap:anywhere;max-width:200px;line-height:1.25;}
.emoji-tooltip .et-header > div:last-child{min-width:0;flex:1;}
.emoji-tooltip .et-code{font-size:11px;color:rgba(255,255,255,.3);font-family:'SF Mono','Cascadia Code',monospace;margin-top:2px;}
.emoji-tooltip .et-cat{font-size:10.5px;color:rgba(255,249,62,.45);font-weight:600;margin-top:6px;word-break:break-word;overflow-wrap:anywhere;}
.msg-text .msg-emoji,.msg-text .msg-emoji-native,.msg-reply-ref .msg-emoji,.up-left-section-body .msg-emoji,.ann-body .msg-emoji,.forum-detail-content .msg-emoji,.frc-body .msg-emoji{cursor:pointer;transition:transform .1s;border-radius:3px;}
/* Protect internal Fortized images from right-click save/copy */
.msg-emoji[data-emoji-type],.ftz-embed img,.ftz-embed video,.ftz-embed-gif img,.epp-emoji-grid img,.epp-custom-emoji img,.invite-avatar img,.invite-right-logo img,.rail-avatar img,.bastion-banner-img,.bastion-icon-img{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;pointer-events:auto;}
.msg-text .msg-emoji:hover,.msg-text .msg-emoji-native:hover,.msg-reply-ref .msg-emoji:hover,.up-left-section-body .msg-emoji:hover,.ann-body .msg-emoji:hover,.forum-detail-content .msg-emoji:hover,.frc-body .msg-emoji:hover{transform:scale(1.2);background:rgba(255,255,255,.06);}
.cloud-status-bubble{position:relative;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-pill);font-size:11px;color:rgba(255,255,255,.5);max-width:260px;transition:background .15s,border-color .15s;}
/* Userbar custom status speech bubble — looks like the PFP is talking */
.ua-custom-status-bubble{display:none;align-items:center;gap:5px;padding:4px 10px;margin:6px 8px 2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-pill);font-size:10.5px;color:rgba(255,255,255,.5);position:relative;max-width:calc(100% - 16px);box-sizing:border-box;overflow:hidden;}
.ua-custom-status-bubble.active{display:inline-flex;animation:csb-pop .25s cubic-bezier(.22,1,.36,1);}
.ua-custom-status-bubble::after{display:none;}
.ua-custom-status-bubble .csb-emoji{flex-shrink:0;}
.ua-custom-status-bubble .csb-emoji img{width:13px;height:13px;object-fit:contain;}
.ua-custom-status-bubble .csb-text{font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@keyframes csb-pop{0%{opacity:0;transform:scale(.9) translateY(4px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.cloud-status-bubble:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);}
.cloud-status-bubble::after{display:none;}
.cloud-status-bubble .csb-emoji{font-size:13px;flex-shrink:0;}
.cloud-status-bubble .csb-emoji img{width:14px;height:14px;object-fit:contain;}
.cloud-status-bubble .csb-text{font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Mobile bottom-sheet context menu */
@media(max-width:768px){
.ctx-menu{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;max-width:100%!important;width:100%!important;border-radius:16px 16px 0 0!important;max-height:65vh;overflow-y:auto;animation:ctxSlideUp .22s cubic-bezier(.22,1,.36,1)!important;padding-bottom:env(safe-area-inset-bottom,8px);border-bottom:none!important;}
.ctx-item{min-height:44px;padding:10px 16px;font-size:14.5px;border-radius:10px;}
.ctx-group{padding:4px 10px;}
.ctx-section-label{padding:10px 16px 5px;font-size:10px;}
.ctx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;animation:fadeIn .15s;backdrop-filter:blur(3px);}
}
@keyframes ctxSlideUp{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}
.notif-panel{position:fixed;top:0;right:0;width:400px;height:100vh;max-height:100vh;background:var(--glass-heavy);border-left:1px solid var(--glass-border);border-radius:0;box-shadow:-20px 0 80px rgba(0,0,0,.8);z-index:500;transform:translateX(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);}
.notif-panel.open{transform:translateX(0);}
.np-header{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(239,68,68,.04),transparent);}
body.is-desktop-app .np-header{padding-top:46px;}
body.is-desktop-app .notif-panel{top:0;}
.np-header h3{font-family:var(--font-display);font-size:17px;font-weight:800;flex:1;letter-spacing:-.02em;color:#fff;}
.np-list{flex:1;overflow-y:auto;padding:8px 10px;}
.np-item{display:flex;gap:14px;padding:14px 16px;border-radius:14px;cursor:pointer;margin-bottom:4px;position:relative;transition:all .15s;border:1px solid transparent;}
.np-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.05);}
.np-item.unread{background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.1);}
.np-item.unread::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(239,68,68,.5),0 0 16px rgba(239,68,68,.2);}
.np-icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.04);border:2.5px solid rgba(239,68,68,.35);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;transition:all .15s;}
.np-item.unread .np-icon{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 3px rgba(239,68,68,.12),0 0 12px rgba(239,68,68,.15);}
@keyframes notifRingPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.3);}70%{box-shadow:0 0 0 6px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
@keyframes notifBadgePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.np-item.unread .np-icon{animation:notifRingPulse 2s ease-out infinite;}
.np-text{flex:1;min-width:0;}
.np-text p{font-size:13px;color:var(--text);line-height:1.55;}
.np-text p strong{color:#fff;}
.np-time{font-size:10.5px;color:rgba(255,255,255,.2);margin-top:4px;font-weight:500;}
.np-actions{display:flex;gap:8px;margin-top:10px;}
.np-accept{background:rgba(62,207,110,.12);border:1px solid rgba(62,207,110,.25);color:var(--green);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:10px;cursor:pointer;transition:all .15s;}
.np-accept:hover{background:rgba(62,207,110,.22);transform:translateY(-1px);}
.np-decline{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--muted-light);font-size:11.5px;font-weight:700;padding:6px 14px;border-radius:10px;cursor:pointer;transition:all .15s;}
.np-decline:hover{background:rgba(255,255,255,.05);}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.25);text-align:center;padding:40px;}
.empty-state .ei{font-size:44px;opacity:.25;}
.empty-state h3{font-family:var(--font-display);font-size:16px;font-weight:700;color:rgba(255,255,255,.4);}
.empty-state p{font-size:13px;max-width:280px;line-height:1.6;color:rgba(255,255,255,.25);}
.color-swatches{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.color-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.color-swatch:hover,.color-swatch.sel{border-color:#fff;transform:scale(1.15);}
.notif-setting-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.notif-setting-row:last-child{border-bottom:none;}
.nsr-info{flex:1;}
.nsr-label{font-size:13.5px;font-weight:600;}
.nsr-desc{font-size:12px;color:var(--muted-light);margin-top:1px;}
.input-dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);z-index:9500;display:flex;align-items:center;justify-content:center;}
.input-dialog{background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:18px;padding:24px;max-width:380px;width:90%;}
.input-dialog h3{font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:6px;}
.input-dialog p{font-size:13px;color:var(--muted-light);margin-bottom:16px;}
.input-dialog input{width:100%;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:13.5px;outline:none;margin-bottom:14px;}
.input-dialog input:focus{border-color:rgba(255,249,62,.3);}
.input-dialog-actions{display:flex;gap:8px;}
.verify-overlay{position:fixed;inset:0;background:rgba(4,6,10,.97);backdrop-filter:blur(20px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;}
.verify-card{background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);border:1px solid var(--glass-border);border-radius:24px;padding:40px;max-width:480px;width:90%;text-align:center;}
.verify-logo{width:80px;height:80px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:rgba(255,249,62,.06);border:1px solid rgba(255,249,62,.2);border-radius:22px;overflow:hidden;}
.verify-logo img{width:60px;height:60px;object-fit:contain;}
.verify-card h2{font-family:var(--font-display);font-size:22px;font-weight:800;margin-bottom:8px;}
.verify-card p.verify-sub{font-size:14px;color:var(--muted-light);margin-bottom:28px;line-height:1.6;}
.quiz-question{background:var(--panel2);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;text-align:left;}
.quiz-question p{font-size:15px;font-weight:600;margin-bottom:14px;color:#fff;}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{padding:10px 16px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;font-size:13.5px;color:var(--muted-light);text-align:left;}
.quiz-opt:hover{border-color:rgba(255,249,62,.3);background:rgba(255,249,62,.04);color:#fff;}
.quiz-opt.correct{border-color:var(--green);background:rgba(62,207,110,.08);color:var(--green);}
.quiz-opt.wrong{border-color:var(--red);background:rgba(248,113,113,.08);color:var(--red);}
.quiz-progress{display:flex;gap:6px;justify-content:center;margin-bottom:20px;}
.quiz-dot{width:8px;height:8px;border-radius:50%;background:var(--border);}
.quiz-dot.done{background:var(--green);}.quiz-dot.current{background:var(--accent);}
.boost-bar{display:none;}
.boost-bar .bl{display:none;}
  /* Radiance display name font - updated dynamically */
  .radiance-name { font-family: var(--radiance-font, inherit); }
.tmpl-card{padding:14px 8px;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;}
.tmpl-card:hover,.tmpl-card.sel{border-color:var(--accent-mid);background:var(--accent-dim);}
.tmpl-emoji{font-size:26px;margin-bottom:5px;}
.tmpl-name{font-size:12px;font-weight:700;margin-bottom:2px;}
.tmpl-desc{font-size:10.5px;color:var(--muted);}
/* ── Template Import Cards ──── */
.tmpl-import-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;transition:all .15s;background:var(--panel);}
.tmpl-import-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.03);}
.tmpl-import-card .tic-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tmpl-import-card .tic-icon.discord{background:rgba(88,101,242,.12);}
.tmpl-import-card .tic-icon.fortized{background:rgba(255,249,62,.08);}
.tmpl-import-card .tic-meta{flex:1;min-width:0;}
.tmpl-import-card .tic-title{font-size:13.5px;font-weight:700;color:#fff;}
.tmpl-import-card .tic-desc{font-size:11.5px;color:var(--muted-light);margin-top:2px;}
.tmpl-import-card .tic-btn{padding:7px 16px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;flex-shrink:0;}
.tmpl-import-card .tic-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
/* ── Create Bastion Rows (Discord-style) ──── */
.cb-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .12s;}
.cb-row:hover{background:rgba(255,255,255,.04);}
.cb-row-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* ── Template Link Input ──── */
.tmpl-link-input-wrap{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;padding:0 14px;margin-bottom:12px;transition:border-color .15s;}
.tmpl-link-input-wrap:focus-within{border-color:rgba(255,249,62,.3);}
.tmpl-link-input-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px;padding:10px 0;font-family:inherit;}
.tmpl-link-input-wrap input::placeholder{color:rgba(255,255,255,.2);}
.tmpl-link-input-wrap .tli-icon{font-size:16px;flex-shrink:0;opacity:.4;}
/* ── Template Preview Card ──── */
.tmpl-preview{padding:16px;background:var(--panel);border:1.5px solid var(--border);border-radius:14px;margin-bottom:14px;animation:embedIn .18s cubic-bezier(.22,1,.36,1) both;}
.tmpl-preview .tp-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.tmpl-preview .tp-icon{width:48px;height:48px;border-radius:14px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;}
.tmpl-preview .tp-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.tmpl-preview .tp-name{font-family:var(--font-display);font-size:16px;font-weight:800;color:#fff;}
.tmpl-preview .tp-desc{font-size:12px;color:var(--muted-light);margin-top:2px;}
.tmpl-preview .tp-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.tmpl-preview .tp-stat{font-size:11px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px;padding:3px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-pill);}
.tmpl-preview .tp-channels,.tmpl-preview .tp-roles{margin-bottom:8px;}
.tmpl-preview .tp-section-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;}
.tmpl-preview .tp-ch{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.55);padding:3px 0;}
.tmpl-preview .tp-ch-icon{font-size:11px;opacity:.6;width:16px;text-align:center;}
.tmpl-preview .tp-role-pills{display:flex;flex-wrap:wrap;gap:4px;}
.tmpl-preview .tp-role-pill{font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill);}
/* ── Bastion Template Link Badge ──── */
.bastion-tmpl-link{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,249,62,.04);border:1px solid rgba(255,249,62,.1);border-radius:12px;margin-top:8px;}
.bastion-tmpl-link code{flex:1;font-size:11.5px;color:rgba(255,249,62,.7);font-family:'SF Mono','Cascadia Code',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bastion-tmpl-link .btl-copy{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(255,249,62,.1);border:1px solid rgba(255,249,62,.15);color:var(--accent);cursor:pointer;transition:all .12s;flex-shrink:0;}
.bastion-tmpl-link .btl-copy:hover{background:rgba(255,249,62,.18);}

/* ── BADGE SYSTEM ─────────────────────────────────── */
.ftz-badge { display:inline-flex;align-items:center;justify-content:center;position:relative;width:28px;height:28px;flex-shrink:0;cursor:pointer;vertical-align:middle;margin:0 1px;transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s; }
.ftz-badge:hover { transform:scale(1.18);filter:drop-shadow(0 0 8px currentColor);z-index:var(--z-max,9999); }
.ftz-badge img { width:100%;height:100%;object-fit:contain;pointer-events:none; }
.ftz-badge .badge-tooltip { display:none; }
.ftz-badge-tip{position:fixed;left:0;top:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 14px;pointer-events:none;opacity:0;transition:opacity .14s,transform .14s;z-index:var(--z-max,9999);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.6);font-size:12.5px;font-weight:600;color:#c8d0dc;transform:translateY(4px);}
.ftz-badge-tip.visible{opacity:1;transform:translateY(0);}
/* Badge glow accents per type */
.ftz-badge.badge-superadmin { color:var(--accent); }
.ftz-badge.badge-admin { color:var(--red); }
.ftz-badge.badge-moderator { color:var(--blue); }
.ftz-badge.badge-bot { color:var(--blue); }
.ftz-badge.badge-radiance { color:#ff9c3c; }
.ftz-badge.badge-radiance-plus { color:var(--accent); }
.ftz-badge.badge-beta { color:var(--red); }
.ftz-badge.badge-quest { color:#9ca3af; }
.ftz-badge.badge-onyx { color:var(--accent); }
/* Badge row container */
.ftz-badge-row { display:inline-flex;align-items:center;gap:2px;vertical-align:middle;margin-left:4px;overflow:visible; }

/* ── LOADING SKELETON ─────────────────────────────── */
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
.skeleton { background:linear-gradient(90deg,var(--panel2) 0%,var(--panel3) 25%,var(--panel2) 50%,var(--panel3) 75%,var(--panel2) 100%);background-size:600px 100%;animation:shimmer 1.6s infinite linear;border-radius:10px;display:block;min-height:16px;opacity:.8;will-change:background-position; }
.skeleton-sm { height:8px;margin-bottom:8px; }
.skeleton-md { height:16px;margin-bottom:12px; }
.skeleton-lg { height:24px;margin-bottom:16px; }
.skeleton-text { width:100%;height:14px;margin-bottom:6px; }
.skeleton-text:last-child { width:80%;margin-bottom:0; }

/* ── FRIEND ADD ANIMATION ─────────────────────────── */
@keyframes friendPop { 0%{transform:scale(.5) rotate(-10deg);opacity:0} 60%{transform:scale(1.2) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0deg);opacity:1} }
.friend-pop { animation:friendPop .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes heartFloat { 0%{transform:translateY(0) scale(1);opacity:1} 100%{transform:translateY(-60px) scale(.4);opacity:0} }
.heart-float { position:fixed;font-size:24px;pointer-events:none;animation:heartFloat 1.2s ease-out forwards;z-index:var(--z-max); }

/* ── UNIFIED EMBED SYSTEM ─────────────────────────── */
/* Base embed card — all embeds share this */
.ftz-embed{border-radius:14px;overflow:hidden;max-width:440px;margin:8px 0;animation:embedIn .22s cubic-bezier(.22,1,.36,1) both;position:relative;transition:all .2s cubic-bezier(.22,1,.36,1);}
.ftz-embed:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.3);}
/* Embed inner wrapper — contains left accent stripe + content */
.ftz-embed-inner{display:flex;background:rgba(255,255,255,.02);border:1.5px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;min-height:0;}
.ftz-embed:hover .ftz-embed-inner{border-color:rgba(255,255,255,.12);}
/* Left accent stripe */
.ftz-embed-stripe{width:4px;flex-shrink:0;background:var(--embed-color,rgba(255,255,255,.15));}
/* Embed content area */
.ftz-embed-content{flex:1;min-width:0;display:flex;flex-direction:column;}
/* Embed header — icon + site name */
.ftz-embed-head{display:flex;align-items:center;gap:6px;padding:10px 14px 0;font-size:11px;font-weight:700;color:var(--embed-color,var(--muted));}
.ftz-embed-head svg,.ftz-embed-head img{width:14px;height:14px;flex-shrink:0;}
.ftz-embed-head img{border-radius:3px;object-fit:contain;}
/* Embed body — title, desc, etc */
.ftz-embed-body{padding:6px 14px 12px;display:flex;flex-direction:column;gap:4px;}
.ftz-embed-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftz-embed-desc{font-size:12px;color:rgba(255,255,255,.45);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ftz-embed-url{font-size:9.5px;color:rgba(255,255,255,.2);font-family:monospace;letter-spacing:.02em;}
/* Embed image (optional — for link previews, etc) */
.ftz-embed-img{width:100%;max-height:200px;object-fit:cover;display:block;}
/* Embed media area — for iframes/videos */
.ftz-embed-media{position:relative;overflow:hidden;}
.ftz-embed-media iframe,.ftz-embed-media video{width:100%;display:block;border:none;}
/* Embed footer — small meta text */
.ftz-embed-foot{padding:6px 14px 10px;display:flex;align-items:center;gap:8px;font-size:10px;color:rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.04);}
/* Embed action button */
.ftz-embed-btn{margin:0 14px 12px;padding:8px 16px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-family:var(--font-display);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;text-align:center;}
.ftz-embed-btn:hover{background:rgba(255,255,255,.08);color:#fff;}
.ftz-embed-btn.primary{background:var(--embed-color,var(--accent));color:#13161d;border:none;}
.ftz-embed-btn.primary:hover{filter:brightness(1.1);}
/* ── Custom Video Player ── */
.ftz-vp{position:relative;background:#000;width:100%;overflow:hidden;border-radius:12px 12px 0 0;}
.ftz-vp video{width:100%;max-height:360px;display:block;cursor:pointer;}
.ftz-vp-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);transition:opacity .25s;cursor:pointer;z-index:2;}
.ftz-vp-overlay.hidden{opacity:0;pointer-events:none;}
.ftz-vp-overlay-btn{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.5);border:2px solid rgba(255,249,62,.3);transition:transform .15s;}
.ftz-vp-overlay:hover .ftz-vp-overlay-btn{transform:scale(1.08);border-color:rgba(255,249,62,.5);}
/* Media download button (hover reveal) */
.ftz-media-dl{position:absolute;top:8px;right:8px;z-index:4;width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);opacity:0;transition:opacity .15s;text-decoration:none;border:1px solid rgba(255,255,255,.1);}
.ftz-vp:hover .ftz-media-dl,.ftz-embed-gif:hover .ftz-media-dl{opacity:1;}
.ftz-media-dl:hover{background:rgba(0,0,0,.8);color:#fff;border-color:rgba(255,249,62,.3);}
.ftz-vp-buffer{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.12);z-index:1;transition:width .3s;}
.ftz-vp-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.8);color:rgba(255,255,255,.5);font-size:13px;gap:6px;z-index:5;}
.ftz-vp-controls{padding:8px 12px 10px;background:rgba(0,0,0,.3);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:6px;}
.ftz-vp-progress{position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer;overflow:visible;}
.ftz-vp-progress:hover{height:8px;}
.ftz-vp-prog-buffer{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.12);border-radius:3px;pointer-events:none;}
.ftz-vp-prog-fill{position:absolute;top:0;left:0;height:100%;background:#fff;border-radius:3px;pointer-events:none;transition:width .05s linear;}
.ftz-vp-prog-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);opacity:0;transition:opacity .15s;pointer-events:none;z-index:2;}
.ftz-vp-progress:hover .ftz-vp-prog-thumb{opacity:1;}
.ftz-vp-row{display:flex;align-items:center;gap:8px;}
.ftz-vp-btn{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:3px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:4px;transition:all .12s;}
.ftz-vp-btn:hover{color:#fff;background:rgba(255,255,255,.08);}
.ftz-vp-time{font-size:11px;color:rgba(255,255,255,.5);white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;}
.ftz-vp-vol-wrap{display:flex;align-items:center;gap:4px;position:relative;}
.ftz-vp-vol-slider{width:0;overflow:hidden;transition:width .2s;display:flex;align-items:center;}
.ftz-vp-vol-wrap:hover .ftz-vp-vol-slider{width:70px;}
.ftz-vp-vol-track{width:70px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative;}
.ftz-vp-vol-fill{height:100%;background:#fff;border-radius:2px;pointer-events:none;}
.ftz-vp-speed{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);cursor:pointer;padding:2px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:all .12s;flex-shrink:0;user-select:none;}
.ftz-vp-speed:hover{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);}
.ftz-vp-fname{font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px 8px;}
/* ── Custom Audio Player ── */
.ftz-ap{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.ftz-ap-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.ftz-ap-btn:hover{background:rgba(255,255,255,.18);}
.ftz-ap-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.ftz-ap-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftz-ap-progress{height:6px;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer;position:relative;overflow:visible;}
.ftz-ap-progress:hover{height:8px;}
.ftz-ap-prog-fill{height:100%;background:var(--accent);border-radius:3px;pointer-events:none;transition:width .05s linear;}
.ftz-ap-prog-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);opacity:0;transition:opacity .15s;pointer-events:none;z-index:2;}
.ftz-ap-progress:hover .ftz-ap-prog-thumb{opacity:1;}
.ftz-ap-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ftz-ap-time{font-size:10px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;}
.ftz-ap-vol-wrap{display:flex;align-items:center;gap:4px;}
.ftz-ap-vol-track{width:50px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;position:relative;}
.ftz-ap-vol-fill{height:100%;background:rgba(255,255,255,.5);border-radius:2px;pointer-events:none;}
.ftz-ap-speed{font-size:9px;font-weight:700;color:rgba(255,255,255,.4);cursor:pointer;padding:1px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.06);transition:all .12s;user-select:none;}
.ftz-ap-speed:hover{color:#fff;border-color:rgba(255,255,255,.15);}
/* Channel / Profile variant — horizontal with avatar */
.ftz-embed-profile{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.ftz-embed-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:#fff;overflow:hidden;}
.ftz-embed-avatar img{width:100%;height:100%;object-fit:cover;}
/* GIF variant */
.ftz-embed-gif{margin:8px 0;max-width:400px;border-radius:12px;overflow:hidden;display:inline-block;position:relative;cursor:pointer;background:transparent;}
.ftz-embed-gif img{width:100%;max-height:360px;object-fit:cover;display:block;image-rendering:auto;-webkit-image-smoothing:high;background:transparent;}
.ftz-embed-gif .chat-gif-fav-btn{position:absolute;top:6px;right:6px;}
/* Clickable embed cursor */
.ftz-embed[onclick],.ftz-embed a{cursor:pointer;}
/* Legacy class aliases for compatibility */
.embed-link-card{border-radius:14px;overflow:hidden;max-width:440px;margin:8px 0;animation:embedIn .22s cubic-bezier(.22,1,.36,1) both;position:relative;transition:all .2s;cursor:pointer;}
.embed-link-card .elc-body{display:none;}
.embed-link-card .elc-site{display:none;}
.embed-link-card .elc-title{display:none;}
.embed-link-card .elc-desc{display:none;}
.embed-link-card .elc-url{display:none;}
.embed-link-card .elc-thumb{display:none;}
.embed-invite-card{border-radius:14px;overflow:hidden;max-width:440px;margin:8px 0;animation:embedIn .22s cubic-bezier(.22,1,.36,1) both;cursor:pointer;transition:all .2s;position:relative;}
/* ── Enhanced Bastion Invite Embed (inline chat) ── */
.bastion-invite-embed{max-width:420px;margin:8px 0;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,rgba(15,18,30,.95),rgba(10,12,22,.98));border:1.5px solid rgba(255,249,62,.08);animation:embedIn .22s cubic-bezier(.22,1,.36,1) both;cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);position:relative;}
.bastion-invite-embed:hover{border-color:rgba(255,249,62,.18);transform:translateY(-1px);box-shadow:0 8px 32px rgba(0,0,0,.4);}
.bastion-invite-embed .bie-banner{position:relative;height:80px;overflow:hidden;background:linear-gradient(135deg,rgba(255,249,62,.03),rgba(167,139,250,.03));}
.bastion-invite-embed .bie-banner img{width:100%;height:100%;object-fit:cover;}
.bastion-invite-embed .bie-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(10,12,22,.95) 100%);}
.bastion-invite-embed .bie-body{position:relative;padding:0 16px 14px;margin-top:-20px;z-index:1;}
.bastion-invite-embed .bie-header{display:flex;align-items:flex-end;gap:12px;margin-bottom:10px;}
.bastion-invite-embed .bie-icon{width:44px;height:44px;border-radius:14px;background:var(--panel);border:2.5px solid rgba(10,12,22,.9);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.4);}
.bastion-invite-embed .bie-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.bastion-invite-embed .bie-icon .bie-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(255,249,62,.06);font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--accent);}
.bastion-invite-embed .bie-name{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;display:flex;align-items:center;gap:6px;line-height:1.2;padding-bottom:2px;}
.bastion-invite-embed .bie-name .bie-verified{width:14px;height:14px;color:var(--accent);flex-shrink:0;}
.bastion-invite-embed .bie-desc{font-size:11.5px;color:rgba(255,255,255,.35);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bastion-invite-embed .bie-stats{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.bastion-invite-embed .bie-stat{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:rgba(255,255,255,.35);}
.bastion-invite-embed .bie-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.bastion-invite-embed .bie-dot.online{background:#23a55a;box-shadow:0 0 6px rgba(35,165,90,.5);}
.bastion-invite-embed .bie-dot.total{background:#80848e;}
.bastion-invite-embed .bie-join{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:10px;font-family:var(--font-display);font-size:12px;font-weight:700;transition:all .15s;border:none;cursor:pointer;}
.bastion-invite-embed .bie-join.primary{background:#248046;color:#fff;box-shadow:0 2px 8px rgba(36,128,70,.3);}
.bastion-invite-embed .bie-join.primary:hover{background:#1a6334;transform:translateY(-1px);}
.bastion-invite-embed .bie-join.joined{background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);cursor:default;border:1px solid rgba(255,255,255,.06);}
.bastion-invite-embed .bie-label{position:absolute;top:10px;left:14px;z-index:2;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;}
.bastion-invite-embed .bie-label svg{opacity:.5;}
/* ── Bastion Invite Dialog (Guilded-style) ─── */
.invite-overlay{position:fixed;inset:0;background:rgba(4,6,10,.96);backdrop-filter:blur(24px);z-index:9900;display:flex;align-items:center;justify-content:center;padding:20px;animation:inviteOverlayIn .3s ease both;}
@keyframes inviteOverlayIn{from{opacity:0}to{opacity:1}}
.invite-panel{display:flex;border-radius:16px;overflow:hidden;max-width:820px;width:100%;box-shadow:0 40px 100px rgba(0,0,0,.7);animation:invitePanelIn .35s cubic-bezier(.22,1,.36,1) both;background:var(--panel);}
@keyframes invitePanelIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:none}}
.invite-left{flex:1;display:flex;flex-direction:column;align-items:center;padding:48px 40px 36px;text-align:center;background:var(--panel);min-width:0;}
.invite-right{width:380px;flex-shrink:0;background:#1a1e28;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.invite-right-pattern{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 8a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm30 0a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm-30 30a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm30 0a3 3 0 1 1 0 6 3 3 0 0 1 0-6z' fill='%23fff' fill-opacity='1'/%3E%3C/svg%3E");background-size:60px 60px;}
.invite-right-icons{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:8px;padding:16px;opacity:.05;}
.invite-right-icons svg{width:100%;height:100%;color:#fff;}
.invite-right-logo{position:relative;z-index:1;width:140px;height:140px;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid rgba(255,255,255,.08);box-shadow:0 16px 48px rgba(0,0,0,.5);}
.invite-right-logo img{width:100%;height:100%;object-fit:cover;}
.invite-right-logo .invite-emblem{font-size:56px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(255,249,62,.08);}
.invite-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;margin-bottom:20px;border:3px solid rgba(255,249,62,.15);box-shadow:0 4px 20px rgba(0,0,0,.4);}
.invite-avatar img{width:100%;height:100%;object-fit:cover;}
.invite-subtitle{font-size:14px;color:var(--muted-light);margin-bottom:4px;line-height:1.4;}
.invite-subtitle strong{color:var(--accent);font-weight:700;}
.invite-bastion-name{font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:8px;}
.invite-bastion-name .invite-verified{width:18px;height:18px;color:var(--accent);flex-shrink:0;}
.invite-meta{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:var(--muted);margin-bottom:24px;}
.invite-meta .invite-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.invite-meta .invite-dot.online{background:var(--green);}
.invite-desc{font-size:13px;color:var(--muted-light);margin-bottom:24px;max-width:320px;line-height:1.5;font-style:italic;}
.invite-actions{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px;}
.invite-accept-btn{width:100%;padding:13px 24px;border-radius:var(--radius-md);background:var(--accent);color:#13161d;font-family:var(--font-display);font-size:14px;font-weight:700;border:none;cursor:pointer;transition:all .15s;}
.invite-accept-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.invite-accept-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.invite-decline-btn{width:100%;padding:12px 24px;border-radius:var(--radius-md);background:transparent;color:var(--muted-light);font-family:var(--font-display);font-size:13px;font-weight:600;border:1px solid var(--border);cursor:pointer;transition:all .15s;}
.invite-decline-btn:hover{border-color:rgba(255,255,255,.15);background:var(--surface-1);}
.invite-input{width:100%;padding:12px 16px;border-radius:var(--radius-md);background:transparent;border:1.5px solid var(--border);color:var(--text);font-family:var(--font-ui);font-size:14px;outline:none;transition:border-color .15s;}
.invite-input::placeholder{color:var(--muted);}
.invite-input:focus{border-color:var(--accent);}
.invite-input-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;transition:color .15s;}
.invite-input-clear:hover{color:var(--text);}
.invite-login-link{font-size:13px;color:var(--muted-light);margin-top:8px;cursor:pointer;transition:color .15s;}
.invite-login-link:hover{color:var(--accent);}
@media(max-width:720px){.invite-panel{flex-direction:column;max-width:440px;}.invite-right{width:100%;height:180px;}.invite-left{padding:36px 28px 28px;}}
@keyframes embedIn { from{opacity:0;transform:translateY(6px) scale(.98)} to{opacity:1;transform:none} }
/* Legacy X/Spotify classes — now using ftz-embed */
.embed-x-card,.embed-spotify-card{border-radius:14px;overflow:hidden;max-width:440px;margin:8px 0;animation:embedIn .22s cubic-bezier(.22,1,.36,1) both;transition:all .2s;cursor:pointer;position:relative;}

/* ── (stat strip + hero styles now in main home CSS block above) ── */

/* ── RADIANCE / RADIANCE+ ─────────────────────────── */
.rad-basic { background:linear-gradient(135deg,rgba(255,140,62,.12),rgba(255,180,62,.08));border-color:rgba(255,160,62,.25);color:#ff9d3e; }
.rad-plus { background:linear-gradient(135deg,rgba(255,220,62,.12),rgba(255,249,62,.1));border-color:rgba(255,220,62,.35);color:#ffd93e; }
.radplus-badge { display:inline-flex;align-items:center;gap:5px;background:linear-gradient(90deg,rgba(255,220,62,.2),rgba(255,249,62,.15));border:1px solid rgba(255,220,62,.35);border-radius:var(--radius-pill);padding:3px 10px;font-size:11px;font-weight:700;color:#ffd93e; }

/* ── SWITCH ACCOUNTS ──────────────────────────────── */
.account-switcher { position:fixed;bottom:70px;left:76px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:10px;min-width:220px;z-index:var(--z-dropdown);box-shadow:0 20px 50px rgba(0,0,0,.7);animation:ctxIn .14s cubic-bezier(.22,1,.36,1); }
.acct-item { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .1s; }
.acct-item:hover { background:rgba(255,255,255,.06); }
.acct-item.active-acct { background:rgba(255,249,62,.07); }

/* ── FORUM IMAGE POST ─────────────────────────────── */
.forum-img-post { border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--panel);max-width:480px;margin:8px 0;cursor:pointer;transition:border-color .15s; }
.forum-img-post:hover { border-color:rgba(255,249,62,.2); }
.forum-img-post img { width:100%;max-height:320px;object-fit:cover;display:block; }
.forum-img-post .fip-footer { padding:10px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted); }

/* ── FORUM PAGE (Polytoria-inspired) ─────────────── */
.forum-scroll { flex:1;overflow-y:auto;overflow-x:hidden; }

/* Hero */
.forum-hero { position:relative;padding:40px 36px 36px;border-bottom:1px solid var(--border);overflow:hidden;background:linear-gradient(135deg,rgba(255,249,62,.06) 0%,transparent 50%,rgba(255,249,62,.03) 100%); }
.forum-hero::before { content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,249,62,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,249,62,.012) 1px,transparent 1px);background-size:56px 56px;pointer-events:none; }
.forum-hero-glow { position:absolute;top:-100px;right:-60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,249,62,.06) 0%,transparent 70%);animation:forumDrift 10s ease-in-out infinite alternate;pointer-events:none; }
@keyframes forumDrift { 0%{transform:translate(0,0)} 100%{transform:translate(-50px,30px)} }
.forum-hero-inner { position:relative;z-index:1;max-width:1200px;margin:0 auto; }
.forum-hero-top { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap; }
.forum-hero-info { display:flex;align-items:center;gap:16px; }
.forum-hero-icon { width:56px;height:56px;border-radius:16px;background:var(--accent-dim);border:1.5px solid var(--accent-mid);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0; }
.forum-hero h1 { font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:-.5px;color:#fff;margin:0 0 4px; }
.forum-hero-sub { font-size:13px;color:var(--muted-light); }
.forum-hero-stats { display:flex;gap:16px; }
.forum-hero-stat { text-align:center;padding:12px 20px;background:var(--panel);border:1px solid var(--border);border-radius:12px;min-width:90px; }
.forum-hero-stat-num { font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff; }
.forum-hero-stat-label { font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px; }

/* Search + New Thread bar */
.forum-toolbar { display:flex;gap:10px;margin-top:20px;align-items:center; }
.forum-search-wrap { position:relative;flex:1;max-width:400px; }
.forum-search-icon { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none; }
.forum-search-input { width:100%;padding:10px 14px 10px 36px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:13px;transition:border-color .18s,box-shadow .18s; }
.forum-search-input:focus { outline:none;border-color:rgba(255,249,62,.25);box-shadow:0 0 0 3px rgba(255,249,62,.06); }
.forum-search-input::placeholder { color:var(--muted); }
.forum-new-btn { padding:10px 20px;font-family:var(--font-display);font-size:12px;font-weight:700;background:var(--accent);color:var(--rail);border:none;border-radius:10px;cursor:pointer;transition:all .15s;white-space:nowrap; }
.forum-new-btn:hover { background:#ffe55c;box-shadow:0 0 16px rgba(255,249,62,.2); }

/* Main layout: sidebar + content */
.forum-body { max-width:1200px;margin:0 auto;padding:24px 36px 40px;display:grid;grid-template-columns:320px 1fr;gap:24px; }

/* Left sidebar */
.forum-sidebar { display:flex;flex-direction:column;gap:16px; }
.forum-section-title { display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 2px; }

/* Recent Activity list */
.forum-activity-card { background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;max-height:420px;overflow-y:auto; }
.forum-activity-item { display:flex;gap:10px;padding:12px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(255,255,255,.03); }
.forum-activity-item:last-child { border-bottom:none; }
.forum-activity-item:hover { background:rgba(255,249,62,.04); }
.forum-activity-avatar { width:32px;height:32px;border-radius:8px;flex-shrink:0;object-fit:cover;background:var(--panel2); }
.forum-activity-info { flex:1;min-width:0; }
.forum-activity-title { font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;line-height:1.3; }
.forum-activity-title .fa-cat-dot { display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;vertical-align:middle; }
.forum-activity-meta { font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Your Posts */
.forum-your-posts { background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;max-height:260px;overflow-y:auto; }
.forum-your-posts-empty { text-align:center;padding:16px 8px;color:var(--muted);font-size:12px; }
.forum-your-posts-empty svg { display:block;margin:0 auto 8px;opacity:.3; }

/* Forum ad emplacement */
.forum-ad-slot { background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;min-height:250px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s; }
.forum-ad-slot:hover { border-color:rgba(255,249,62,.12); }
.forum-ad-slot img { width:100%;height:100%;object-fit:cover;display:block; }
.forum-ad-slot .ad-empty { text-align:center;padding:20px;color:var(--muted);font-size:11px; }

/* Right: Category Groups */
.forum-main { display:flex;flex-direction:column;gap:20px; }
.forum-group-header { display:flex;align-items:center;gap:12px;padding:0 4px; }
.forum-group-label { font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap; }
.forum-group-line { flex:1;height:1px;background:var(--border); }
.forum-group-col-header { display:flex;gap:0;padding:0 4px; }
.forum-group-col-label { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;width:80px;text-align:center; }

/* Category entry row (Polytoria-style) */
.forum-cat-entry { display:flex;align-items:center;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--cat-color,var(--accent));border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .18s;margin-bottom:6px; }
.forum-cat-entry:hover { border-color:rgba(255,249,62,.15);border-left-color:var(--cat-color,var(--accent));background:rgba(255,249,62,.03);box-shadow:0 2px 12px rgba(0,0,0,.12); }
.forum-cat-icon { width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;margin-right:14px; }
.forum-cat-info { flex:1;min-width:0; }
.forum-cat-name { font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;margin-bottom:2px; }
.forum-cat-desc { font-size:11.5px;color:var(--muted-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.forum-cat-count { width:80px;text-align:center;font-size:13px;color:var(--muted-light);font-weight:600;flex-shrink:0; }

/* ── FORUM THREAD LIST VIEW ──────────────────────── */
.forum-threadlist-header { display:flex;align-items:center;gap:12px;padding:20px 36px;border-bottom:1px solid var(--border);background:var(--panel);flex-shrink:0; }
.forum-back-btn { background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.12);border-radius:8px;color:var(--accent);cursor:pointer;font-size:11px;font-weight:700;padding:7px 14px;transition:all .15s;font-family:var(--font-ui); }
.forum-back-btn:hover { background:rgba(255,249,62,.14);border-color:rgba(255,249,62,.22); }
.forum-threadlist-cat-icon { font-size:22px; }
.forum-threadlist-title { font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff; }
.forum-threadlist-desc { font-size:12px;color:var(--muted-light); }
.forum-threadlist-body { flex:1;overflow-y:auto;padding:20px 36px 40px; }
.forum-threadlist-inner { max-width:900px;margin:0 auto; }

/* Thread card (wrapping row + optional top-reply) — clean, subtle left accent */
.forum-thread-card { position:relative;background:var(--panel);border:1px solid var(--border);border-left:3px solid rgba(255,249,62,.55);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s, background .15s;overflow:hidden; }
.forum-thread-card:hover { border-color:var(--border);border-left-color:var(--accent);background:rgba(255,255,255,.015); }
.forum-thread-card--pinned { border-left-color:var(--accent);border-left-width:4px; }

/* Thread row (header inside card) */
.forum-thread-row { display:flex;align-items:center;gap:14px;padding:14px 16px; }
/* Fallback: a bare .forum-thread-row outside a card (search results) — same clean card look */
#forum-threads-container > .forum-thread-row,
#forum-main-content > .forum-thread-row { background:var(--panel);border:1px solid var(--border);border-left:3px solid rgba(255,249,62,.55);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .15s, background .15s; }
#forum-threads-container > .forum-thread-row:hover,
#forum-main-content > .forum-thread-row:hover { border-left-color:var(--accent);background:rgba(255,255,255,.015); }
.forum-thread-avatar { width:40px;height:40px;border-radius:10px;flex-shrink:0;object-fit:cover;background:var(--panel2); }
.forum-thread-info { flex:1;min-width:0; }
.forum-thread-title { font-size:14.5px;font-weight:700;color:rgba(255,255,255,.95);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em; }
.forum-thread-meta { font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:10px; }
.forum-thread-meta-sep { width:1px;height:12px;background:rgba(255,255,255,.08); }
.forum-thread-right { flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px; }
.forum-thread-time { font-size:10.5px;color:var(--muted); }
.forum-thread-cat-badge { display:inline-block;padding:4px 9px;border-radius:7px;font-size:10.5px;font-weight:700;letter-spacing:.01em; }
.forum-thread-pinned { border-left:3px solid var(--accent); } /* legacy */

/* Net vote score pillar on the left */
.forum-thread-score { flex-shrink:0;width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 0;margin-right:4px; }
.forum-thread-score-num { font-size:14.5px;font-weight:800;color:rgba(255,255,255,.55);line-height:1;font-variant-numeric:tabular-nums; }
.forum-thread-score-num.pos { color:var(--accent); }
.forum-thread-score-num.neg { color:#f87171; }
.forum-thread-score-lbl { font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;opacity:.7; }

/* Top reply — compact inline chip (YT Shorts style) */
.forum-thread-topreply { display:flex;align-items:center;gap:8px;margin:0 14px 12px 14px;padding:7px 10px 7px 8px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:background .12s, border-color .12s;font-size:12px;line-height:1.3;overflow:hidden; }
.forum-thread-topreply:hover { background:rgba(255,249,62,.05);border-color:rgba(255,249,62,.18); }
.ftr-label { flex-shrink:0;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:rgba(255,249,62,.1);border:1px solid rgba(255,249,62,.22); }
.ftr-avatar { width:20px;height:20px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--panel2); }
.ftr-handle { flex-shrink:0;color:rgba(255,255,255,.75);font-weight:600;font-size:11.5px; }
.ftr-snippet { flex:1;min-width:0;color:var(--muted-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ftr-score { flex-shrink:0;color:var(--accent);font-weight:700;font-size:10.5px;opacity:.85; }

/* Pin button + new-posts indicator + lock icon */
.forum-pin-btn { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:6px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;transition:all .15s;vertical-align:middle; }
.forum-pin-btn:hover { color:var(--accent);border-color:rgba(255,249,62,.35);background:rgba(255,249,62,.08); }
.forum-pin-btn--on { color:var(--accent);border-color:rgba(255,249,62,.45);background:rgba(255,249,62,.12); }
.forum-cat-new { display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:rgba(255,249,62,.14);color:var(--accent);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,249,62,.22);vertical-align:middle; }
.forum-cat-lock { color:var(--muted);vertical-align:middle;margin-left:4px; }
.fnp-img-remove { display:inline-block;margin-top:8px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(248,113,113,.08);color:#f87171;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s; }
.fnp-img-remove:hover { background:rgba(248,113,113,.16);border-color:rgba(248,113,113,.35); }
.forum-op-handle, .frc-handle { font-size:11px;color:var(--muted);font-weight:500;margin-left:4px; }

/* Forum formatting markdown passthrough styling */
.forum-op-text p, .frc-body p { margin:0 0 .5em; }
.forum-op-text code, .frc-body code { background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px; }
.forum-op-text strong, .frc-body strong { color:#fff; }

/* Formatting toolbar (reused in forum + chat) */
.fmt-toolbar { display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015);border-radius:10px 10px 0 0; }
.fmt-btn { display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;border:none;background:transparent;color:var(--muted-light);border-radius:5px;cursor:pointer;font-size:12px;font-weight:700;transition:all .12s; }
.fmt-btn:hover { background:rgba(255,255,255,.06);color:#fff; }
.fmt-btn--b { font-weight:900; }
.fmt-btn--i { font-style:italic; }
.fmt-btn--s { text-decoration:line-through; }
.fmt-btn--u { text-decoration:underline; }
.fmt-divider { width:1px;height:14px;background:rgba(255,255,255,.08);margin:0 2px; }

/* ── FORUM POST DETAIL ───────────────────────────── */
.forum-detail-header { padding:16px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--panel); }
.forum-detail-back { background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.12);border-radius:8px;color:var(--accent);cursor:pointer;font-size:11px;font-weight:700;padding:7px 14px;transition:all .15s;font-family:var(--font-ui); }
.forum-detail-back:hover { background:rgba(255,249,62,.14);border-color:rgba(255,249,62,.22); }
.forum-detail-title { font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff; }
.forum-detail-stats { font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:2px; }
.forum-detail-body { flex:1;overflow-y:auto;padding:24px 28px 40px; }
.forum-detail-inner { max-width:800px;margin:0 auto; }

/* Original post — matches category card (yellow left accent, clean) */
.forum-op-card { background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:18px 20px;margin-bottom:18px;display:flex;gap:16px;transition:border-color .15s; }
.forum-op-avatar { width:44px;height:44px;border-radius:11px;flex-shrink:0;object-fit:cover;background:var(--panel2); }
.forum-op-content { flex:1;min-width:0; }
.forum-op-author { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.forum-op-author strong { font-size:14px;color:#fff; }
.forum-op-author .verified-badge { font-size:9px;color:var(--green);font-weight:700; }
.forum-op-date { font-size:11px;color:var(--muted);margin-bottom:14px; }
.forum-op-text { font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.88);margin-bottom:12px; }
.forum-op-image { max-width:100%;max-height:400px;border-radius:12px;margin-bottom:12px; }

/* Reply cards — same clean look with a muted left accent */
.forum-reply-card { display:flex;gap:12px;margin-bottom:8px;padding:14px 16px;background:var(--panel);border:1px solid var(--border);border-left:3px solid rgba(255,255,255,.08);border-radius:12px;position:relative;transition:border-color .12s, background .12s; }
.forum-reply-card:hover { border-left-color:rgba(255,249,62,.35);background:rgba(255,255,255,.015); }
.forum-reply-avatar { width:38px;height:38px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--panel2); }
.forum-reply-content { flex:1;min-width:0; }
.forum-reply-card .frc-meta { display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:6px;font-size:12px;color:#fff;line-height:1.3; }
.forum-reply-card .frc-meta .frc-author { font-weight:800;font-size:13.5px;color:#fff;letter-spacing:-.01em; }
.forum-reply-card .frc-meta .frc-handle { font-size:11.5px;color:var(--muted);font-weight:500;margin-left:0; }
.forum-reply-card .frc-meta .frc-time { display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--muted);font-size:11px;margin-left:auto;opacity:.85; }
.forum-reply-card .frc-meta .frc-time svg { opacity:.75; }
.forum-reply-card .frc-meta .forum-edited { font-size:10.5px;color:var(--muted);font-style:italic;opacity:.75; }
.forum-reply-card .frc-body { font-size:13px;color:var(--muted-light);line-height:1.6; }
.forum-reply-delete { position:absolute;top:8px;right:8px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;opacity:0;transition:opacity .15s,color .12s; }
.forum-reply-card:hover .forum-reply-delete { opacity:.5; }
.forum-reply-delete:hover { opacity:1!important;color:var(--red)!important; }

/* Discord-style inline vote cluster (emoji buttons, horizontal) */
.forum-vote-group { display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);padding:3px 10px 3px 6px;border-radius:var(--radius-pill);margin-right:4px;height:30px; }
.forum-vote-btn { background:rgba(255,255,255,.08);border:none;color:rgba(255,255,255,.7);line-height:1;cursor:pointer;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .12s,background .12s;padding:0;flex-shrink:0;overflow:hidden; }
.forum-vote-btn .fvb-icon { font-size:13px;line-height:1;filter:saturate(1.2); }
.forum-vote-btn:hover { background:rgba(255,255,255,.14);transform:scale(1.08); }
.forum-vote-btn.up.active { background:rgba(255,186,50,.22);box-shadow:0 0 0 2px rgba(255,186,50,.25); }
.forum-vote-btn.down.active { background:rgba(255,186,50,.18);box-shadow:0 0 0 2px rgba(255,186,50,.2); }
.forum-vote-score { font-size:13px;font-weight:700;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums;min-width:28px;text-align:center;letter-spacing:.2px; }
.forum-vote-score.pos { color:#ffba32; }
.forum-vote-score.neg { color:#8aa1c6; }
/* Back-compat in case any old col layout is referenced */
.forum-vote-col { display:none!important; }

/* Post actions row */
.forum-post-actions { display:flex;gap:6px;margin-top:10px;flex-wrap:wrap; }
.forum-pa-btn { background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.55);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;font-family:var(--font-ui); }
.forum-pa-btn:hover { background:rgba(255,255,255,.07);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.12); }
.forum-pa-btn.danger:hover { background:rgba(248,113,113,.08);color:var(--red);border-color:rgba(248,113,113,.2); }

/* Edit-in-place area */
.fp-edit-area { width:100%;min-height:80px;padding:8px 10px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12.5px;font-family:var(--font-ui);resize:vertical; }
.fp-edit-area:focus { outline:none;border-color:rgba(255,249,62,.25); }
.fp-edit-actions { display:flex;gap:6px;margin-top:6px; }

/* Edited badge */
.forum-edited { color:rgba(255,255,255,.35);font-size:10.5px;font-style:italic;cursor:help; }

/* Quote block */
.forum-quote-block { border-left:3px solid rgba(255,249,62,.35);background:rgba(255,249,62,.04);padding:8px 10px;border-radius:0 8px 8px 0;margin-bottom:8px;position:relative;cursor:pointer;transition:background .12s; }
.forum-quote-block:hover { background:rgba(255,249,62,.07); }
.fqb-author { font-size:10.5px;font-weight:700;color:rgba(255,249,62,.75);margin-bottom:3px; }
.fqb-text { font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.45;overflow:hidden;max-height:60px; }
.fqb-clear { position:absolute;top:4px;right:4px;background:none;border:none;color:rgba(255,255,255,.4);font-size:14px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px; }
.fqb-clear:hover { color:#fff;background:rgba(255,255,255,.08); }

/* Mention in post body */
.forum-mention { color:var(--blue);font-weight:600;cursor:pointer;background:rgba(116,169,255,.08);padding:1px 4px;border-radius:4px;transition:background .12s; }
.forum-mention:hover { background:rgba(116,169,255,.18); }

/* Mention autocomplete popup */
.forum-mention-popup { position:absolute;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.4);padding:4px;max-width:260px;z-index:100;margin-top:4px; }
.fmn-item { display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .1s; }
.fmn-item:hover { background:rgba(255,255,255,.05); }
.fmn-item img { width:22px;height:22px;border-radius:50%;object-fit:cover; }
.fmn-item span { font-size:12px; }

/* Flash highlight on jump-to-post */
.frc-flash { animation:frcFlash 1.4s ease-out; }
@keyframes frcFlash { 0%,20%{box-shadow:0 0 0 2px rgba(255,249,62,.6);} 100%{box-shadow:0 0 0 0 rgba(255,249,62,0);} }

/* Reply compose */
.forum-reply-compose { margin-top:24px;padding:18px;background:var(--panel);border:1.5px solid var(--border);border-radius:14px; }
.forum-reply-compose-title { font-family:var(--font-display);font-size:12px;font-weight:700;margin-bottom:12px;color:var(--text); }
.forum-reply-compose textarea { width:100%;height:100px;padding:12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:12.5px;font-family:var(--font-ui);resize:vertical;transition:border-color .18s; }
.forum-reply-compose textarea:focus { outline:none;border-color:rgba(255,249,62,.25); }
.forum-reply-compose textarea::placeholder { color:var(--muted); }
.forum-reply-compose-actions { display:flex;gap:10px;margin-top:10px;align-items:center; }
.forum-img-btn { padding:8px 14px;background:rgba(255,249,62,.06);border:1px solid rgba(255,249,62,.12);border-radius:8px;color:var(--accent);cursor:pointer;font-size:11px;font-weight:700;font-family:var(--font-ui);transition:all .15s; }
.forum-img-btn:hover { background:rgba(255,249,62,.1);border-color:rgba(255,249,62,.2); }
.forum-file-label { flex:1;font-size:11px;color:var(--muted); }
.forum-submit-btn { padding:10px 20px;background:var(--accent);color:var(--rail);border:none;border-radius:10px;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;transition:all .15s; }
.forum-submit-btn:hover { background:#ffe55c;box-shadow:0 0 16px rgba(255,249,62,.2); }

/* Replies divider */
.forum-replies-divider { display:flex;align-items:center;gap:10px;margin:20px 0 16px; }
.forum-replies-divider span { font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap; }
.forum-replies-divider::after { content:'';flex:1;height:1px;background:var(--border); }

/* Empty state */
.forum-empty { text-align:center;padding:48px 20px;color:var(--muted); }
.forum-empty svg { display:block;margin:0 auto 12px;opacity:.2; }
.forum-empty p { font-size:13px; }

/* ── New Post Page ── */
.fnp-wrap { flex:1;overflow-y:auto;padding:28px 36px 48px;min-height:0; }
.fnp-inner { max-width:1180px;margin:0 auto; }
.fnp-breadcrumb { display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:22px;flex-wrap:wrap;color:var(--muted); }
.fnp-breadcrumb a { color:var(--blue);font-weight:600;text-decoration:none; }
.fnp-breadcrumb a:hover { text-decoration:underline; }
.fnp-breadcrumb svg { opacity:.5; }
.fnp-breadcrumb-current { color:var(--text);font-weight:700; }

.fnp-grid { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start; }

.fnp-main { display:flex;flex-direction:column;gap:14px;min-width:0; }
.fnp-header { display:flex;align-items:center;gap:14px;padding:18px 22px;background:linear-gradient(140deg,var(--panel),rgba(255,255,255,.015));border:1.5px solid var(--border);border-radius:16px; }
.fnp-header-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.fnp-header-text { flex:1;min-width:0; }
.fnp-kicker { font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px; }
.fnp-header-title { font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text); }

.fnp-card { background:var(--panel);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;transition:border-color .18s; }
.fnp-card:focus-within { border-color:rgba(255,249,62,.3); }
.fnp-label { display:block;font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px; }
.fnp-input, .fnp-textarea { width:100%;padding:10px 12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-ui);transition:border-color .15s;box-sizing:border-box; }
.fnp-input { font-size:15px;font-weight:600; }
.fnp-textarea { font-size:13.5px;height:220px;resize:vertical;line-height:1.55; }
.fnp-input:focus, .fnp-textarea:focus { outline:none;border-color:rgba(255,249,62,.4); }
.fnp-input::placeholder, .fnp-textarea::placeholder { color:var(--muted); }
.fnp-hint { text-align:right;font-size:11px;color:var(--muted);margin-top:6px; }

.fnp-upload { display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(0,0,0,.25);border:1.5px dashed var(--border);border-radius:12px;cursor:pointer;transition:all .18s;color:var(--muted-light); }
.fnp-upload:hover { border-color:rgba(255,249,62,.35);background:rgba(255,249,62,.04);color:var(--text); }
.fnp-upload svg { flex-shrink:0;opacity:.7; }
.fnp-upload-title { font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px; }
.fnp-upload-sub { font-size:11.5px;color:var(--muted); }

.fnp-footer { display:flex;gap:10px;justify-content:flex-end;padding-top:6px; }
.fnp-cancel { padding:11px 20px;background:transparent;color:var(--muted-light);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.04em;transition:all .15s; }
.fnp-cancel:hover { color:var(--text);border-color:rgba(255,255,255,.18); }
.fnp-submit { display:inline-flex;align-items:center;gap:8px;padding:11px 22px;background:var(--accent);color:var(--rail);border:none;border-radius:10px;cursor:pointer;font-family:var(--font-display);font-size:12.5px;font-weight:800;letter-spacing:.04em;transition:all .15s; }
.fnp-submit:hover { background:#ffe55c;box-shadow:0 0 22px rgba(255,249,62,.28);transform:translateY(-1px); }

.fnp-side { display:flex;flex-direction:column;gap:14px;position:sticky;top:12px; }
.fnp-side-card { background:var(--panel);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px; }
.fnp-side-card--tos { border-color:rgba(255,249,62,.25);background:linear-gradient(160deg,rgba(255,249,62,.04),var(--panel)); }
.fnp-side-card--note { border-color:rgba(100,140,255,.22);background:linear-gradient(160deg,rgba(100,140,255,.04),var(--panel)); }
.fnp-side-head { display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:10px; }
.fnp-side-head svg { color:var(--accent);flex-shrink:0; }
.fnp-side-card--note .fnp-side-head svg { color:var(--blue); }
.fnp-side-card p { font-size:12px;color:var(--muted-light);line-height:1.55;margin:0 0 8px; }
.fnp-side-card p:last-child { margin-bottom:0; }
.fnp-side-card a { color:var(--blue);text-decoration:none;font-weight:600; }
.fnp-side-card a:hover { text-decoration:underline; }
.fnp-side-note { padding:10px 12px;background:rgba(255,249,62,.06);border-left:2px solid var(--accent);border-radius:6px;margin-top:10px !important; }
.fnp-rule { padding:10px 0;border-bottom:1px solid var(--border); }
.fnp-rule:last-child { border-bottom:none;padding-bottom:0; }
.fnp-rule:first-of-type { padding-top:0; }
.fnp-rule strong { display:block;color:var(--text);font-size:12.5px;font-weight:700;margin-bottom:3px; }
.fnp-rule p { font-size:11.5px;color:var(--muted-light);line-height:1.5;margin:0; }

@media(max-width:1024px) {
  .fnp-grid { grid-template-columns:1fr; }
  .fnp-side { position:static; }
  .fnp-wrap { padding:22px 20px 36px; }
}

/* ── Memberlist activity cards ── */
.ml-entry--activity { flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:10px;cursor:pointer;transition:background .12s,border-color .12s,transform .12s; }
.ml-entry--activity:hover { background:rgba(255,249,62,.06);border-color:rgba(255,249,62,.25);transform:translateY(-1px); }
.ml-entry--activity-compact { padding:6px 8px; }
.ml-act-head { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-width:0; }
.ml-act-head-text { min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25; }
.ml-act-name { font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ml-act-game { font-size:11px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ml-act-sub { display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--muted-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ml-act-sub svg { flex-shrink:0;color:var(--accent);opacity:.85; }
.ml-act-cover { width:36px;height:48px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#111;border:1px solid rgba(255,255,255,.06); }
.ml-act-cover-fallback { display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);background:rgba(255,255,255,.04); }

/* ── Game detail modal (registered game card) ── */
.gdm-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:28px;animation:gdmIn .18s ease-out; }
@keyframes gdmIn { from { opacity:0; } to { opacity:1; } }
.gdm-card { background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55);width:min(960px,100%);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:gdmCardIn .22s cubic-bezier(.22,1,.36,1); }
@keyframes gdmCardIn { from { opacity:0;transform:translateY(14px) scale(.98); } to { opacity:1;transform:none; } }
.gdm-loading { padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:14px; }
.gdm-spinner { width:26px;height:26px;border:3px solid rgba(255,255,255,.08);border-top-color:var(--accent);border-radius:50%;animation:gdmSpin 1s linear infinite; }
@keyframes gdmSpin { to { transform:rotate(360deg); } }
.gdm-hero { position:relative;min-height:220px;background:#141212;background-size:cover;background-position:center;padding:16px 22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between; }
.gdm-hero-actions { display:flex;justify-content:flex-end;gap:8px; }
.gdm-add-btn { background:rgba(0,0,0,.58);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:7px 14px;font-family:var(--font-display);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s; }
.gdm-add-btn:hover { background:var(--accent);color:var(--rail);border-color:var(--accent); }
.gdm-close { background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.gdm-close:hover { background:rgba(255,255,255,.12); }
.gdm-hero-bottom { display:flex;align-items:flex-end;gap:16px;margin-top:auto; }
.gdm-cover { width:92px;height:124px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.55);flex-shrink:0; }
.gdm-hero-text { min-width:0;display:flex;flex-direction:column;gap:4px;padding-bottom:4px; }
.gdm-kicker { font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);text-transform:uppercase; }
.gdm-title { font-family:var(--font-display);font-size:28px;font-weight:800;color:#fff;line-height:1.1;word-break:break-word;text-shadow:0 2px 12px rgba(0,0,0,.6); }
.gdm-genres { font-size:12px;color:rgba(255,255,255,.78);font-weight:500; }
.gdm-body { display:grid;grid-template-columns:1fr 320px;gap:18px;padding:18px 22px 22px;overflow-y:auto; }
.gdm-main { min-width:0;display:flex;flex-direction:column;gap:14px; }
.gdm-shots { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px; }
.gdm-shots img { width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:opacity .15s,transform .15s; }
.gdm-shots img:hover { opacity:.85;transform:translateY(-1px); }
.gdm-summary { font-size:13px;color:var(--muted-light);line-height:1.55;margin:0; }
.gdm-side { display:flex;flex-direction:column;gap:12px;min-width:0; }
.gdm-side-card { background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;padding:12px 14px; }
.gdm-side-head { font-family:var(--font-display);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:8px; }
.gdm-rating-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px; }
.gdm-rating-row:last-child { border-bottom:none; }
.gdm-rating-src { color:var(--muted-light); }
.gdm-rating-val { color:var(--text);font-weight:700; }
.gdm-rating-empty { font-size:12px;color:var(--muted);font-style:italic; }
.gdm-row { display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px;align-items:flex-start; }
.gdm-row:last-child { border-bottom:none; }
.gdm-row-k { color:var(--muted-light);flex-shrink:0; }
.gdm-row-v { color:var(--text);font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere; }
.gdm-row-v--platforms { display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end; }
.gdm-platform { background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.2);color:var(--accent);border-radius:6px;padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.02em; }
.gdm-row-v--links { display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end; }
.gdm-link { color:var(--blue);text-decoration:none;font-weight:600;font-size:12px; }
.gdm-link:hover { text-decoration:underline; }
.gdm-link-chip { display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted-light);transition:all .15s; }
.gdm-link-chip:hover { background:rgba(255,249,62,.08);border-color:rgba(255,249,62,.3);color:var(--accent);transform:translateY(-1px); }
.gdm-rating-band { color:var(--text);font-weight:700; }
.gdm-rating-count { opacity:.5;font-weight:500; }

.gdm-menu-wrap { position:relative; }
.gdm-menu-btn svg { transform:rotate(90deg); }
.gdm-menu { position:absolute;top:44px;right:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;min-width:180px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:4px;z-index:10;animation:gdmMenuIn .14s cubic-bezier(.22,1,.36,1); }
@keyframes gdmMenuIn { from { opacity:0;transform:translateY(-4px); } to { opacity:1;transform:none; } }
.gdm-menu-item { display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:transparent;border:none;border-radius:8px;color:var(--text);font-family:var(--font-ui);font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;transition:background .12s; }
.gdm-menu-item:hover { background:rgba(255,255,255,.05); }
.gdm-menu-item svg { color:var(--muted-light);flex-shrink:0; }

.gdm-shot { position:relative;background:#000;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;padding:0;transition:opacity .15s,transform .15s; }
.gdm-shot img { width:100%;aspect-ratio:16/9;object-fit:cover;display:block; }
.gdm-shot:hover { opacity:.9;transform:translateY(-1px); }
.gdm-shot-play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);color:#fff; }
.gdm-shot-play svg { background:rgba(0,0,0,.65);border-radius:999px;padding:10px;width:44px;height:44px; }
.gdm-shot--video { border-color:rgba(255,249,62,.25); }

.gdm-lightbox { position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:10000;display:flex;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;animation:gdmIn .15s ease-out; }
.gdm-lightbox img { max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 24px 80px rgba(0,0,0,.8);cursor:default; }
.gdm-lightbox-close { position:fixed;top:20px;right:20px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;width:40px;height:40px;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:1; }
.gdm-lightbox-close:hover { background:rgba(255,255,255,.15); }
.gdm-lightbox--video .gdm-video-frame { width:min(1100px,100%);aspect-ratio:16/9;cursor:default; }
.gdm-lightbox--video iframe { width:100%;height:100%;border:none;border-radius:8px;background:#000; }

.gdm-report-overlay { position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:10001;display:flex;align-items:center;justify-content:center;padding:28px;animation:gdmIn .18s ease-out; }
.gdm-report-card { position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;width:min(420px,100%);padding:22px 24px 18px;animation:gdmCardIn .22s cubic-bezier(.22,1,.36,1); }
.gdm-report-close { position:absolute;top:10px;right:10px;background:transparent;border:none;color:var(--muted-light);font-size:22px;width:30px;height:30px;cursor:pointer;border-radius:6px;line-height:1; }
.gdm-report-close:hover { background:rgba(255,255,255,.06);color:var(--text); }
.gdm-report-title { font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text);margin-bottom:4px; }
.gdm-report-sub { font-size:12.5px;color:var(--muted-light);margin-bottom:14px; }
.gdm-report-opt { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .12s;font-size:13px;color:var(--text); }
.gdm-report-opt:hover { background:rgba(255,255,255,.04); }
.gdm-report-opt input { accent-color:var(--accent);flex-shrink:0; }
.gdm-report-text { width:100%;min-height:80px;margin-top:10px;padding:10px 12px;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-ui);font-size:12.5px;resize:vertical;outline:none;transition:border-color .15s;box-sizing:border-box; }
.gdm-report-text:focus { border-color:rgba(255,249,62,.3); }
.gdm-report-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:14px; }
.gdm-report-cancel,.gdm-report-submit { padding:8px 16px;border-radius:8px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:all .15s;border:1px solid var(--border); }
.gdm-report-cancel { background:transparent;color:var(--muted-light); }
.gdm-report-cancel:hover { color:var(--text);border-color:rgba(255,255,255,.2); }
.gdm-report-submit { background:var(--accent);color:var(--rail);border-color:var(--accent); }
.gdm-report-submit:hover { background:#ffe55c;box-shadow:0 0 18px rgba(255,249,62,.25); }

.gdm-community-slot { min-height:96px; }
.gdm-community-loading { font-size:12px;color:var(--muted);font-style:italic;padding:6px 0; }
.gdm-community { border-radius:10px;overflow:hidden;background:rgba(0,0,0,.28);border:1px solid var(--border);margin-top:2px; }
.gdm-community-banner { height:58px;background:linear-gradient(135deg,rgba(255,249,62,.12),rgba(167,139,250,.1));background-size:cover;background-position:center; }
.gdm-community-body { padding:10px 12px 12px; }
.gdm-community-head { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.gdm-bastion-emblem-wrap { margin-top:-26px;flex-shrink:0; }
.gdm-bastion-emblem, .gdm-bastion-emblem-wrap img { width:42px;height:42px;border-radius:12px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--panel);border:2.5px solid var(--panel);box-shadow:0 6px 14px rgba(0,0,0,.4);font-size:18px; }
.gdm-emblem-fallback { background:rgba(255,249,62,.1);color:var(--accent); }
.gdm-community-text { flex:1;min-width:0; }
.gdm-community-title { display:flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:800;font-size:13.5px;color:var(--text);line-height:1.2;margin-bottom:2px; }
.gdm-community-title svg { flex-shrink:0; }
.gdm-community-title span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.gdm-community-sub { font-size:11px;color:var(--muted-light);line-height:1.3;margin-bottom:4px; }
.gdm-community-meta { font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px; }
.gdm-community-meta::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--green); }
.gdm-community-join { width:100%;padding:8px 12px;background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border);border-radius:8px;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:all .15s; }
.gdm-community-join:hover { background:var(--accent);color:var(--rail);border-color:var(--accent); }
.gdm-community--empty { display:flex;align-items:center;gap:10px;padding:14px 12px;background:rgba(0,0,0,.18);border:1px dashed var(--border); }
.gdm-community-empty-icon { width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:var(--muted-light);flex-shrink:0; }
.gdm-community-empty-title { font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px; }
.gdm-community-empty-sub { font-size:11px;color:var(--muted-light);line-height:1.45; }

/* ── Game modal: chrome-less platform + link icons ── */
.gdm-platform-icon { display:inline-flex;align-items:center;justify-content:center;padding:3px;color:var(--muted-light);cursor:default;transition:color .12s,transform .12s;border:none;background:transparent;border-radius:6px; }
.gdm-platform-icon:hover { color:var(--accent);transform:translateY(-1px); }
.gdm-link-chip { display:inline-flex;align-items:center;justify-content:center;padding:3px;color:var(--muted-light);transition:color .12s,transform .12s;border:none;background:transparent; }
.gdm-link-chip:hover { color:var(--accent);transform:translateY(-1px); }
.gdm-row-v--platforms { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center; }
.gdm-row-v--links { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center; }

/* ── Media hero + strip ── */
.gdm-media-stage { position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;margin-bottom:8px; }
#gdm-media-hero-slot { width:100%;height:100%; }
.gdm-media-hero { position:relative;width:100%;height:100%;border:none;padding:0;background:#000;cursor:zoom-in;display:block; }
.gdm-media-hero img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease; }
.gdm-media-hero:hover img { transform:scale(1.02); }
.gdm-media-iframe { width:100%;height:100%;border:none;display:block; }
.gdm-media-nav { position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;z-index:2; }
.gdm-media-nav:hover { background:rgba(0,0,0,.8);transform:translateY(-50%) scale(1.05); }
.gdm-media-nav--prev { left:10px; }
.gdm-media-nav--next { right:10px; }
.gdm-media-counter { position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.03em;z-index:2; }
.gdm-media-strip { display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;margin-bottom:14px; }
.gdm-media-thumb { position:relative;aspect-ratio:16/9;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#000;cursor:pointer;padding:0;transition:border-color .12s,transform .12s; }
.gdm-media-thumb:hover { border-color:rgba(255,249,62,.4);transform:translateY(-1px); }
.gdm-media-thumb--active { border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,249,62,.2); }
.gdm-media-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
.gdm-thumb-play { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.3); }

/* ── Reviews block (below media) + user submit — banner-style ── */
.gdm-reviews-card { position:relative;margin-top:20px;padding:20px 22px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(255,249,62,.06),rgba(167,139,250,.06) 50%,rgba(62,207,110,.06));border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.25); }
.gdm-reviews-card::before { content:"";position:absolute;inset:0;background:radial-gradient(900px 220px at 15% -20%,rgba(255,249,62,.1),transparent 60%),radial-gradient(900px 220px at 85% -20%,rgba(167,139,250,.12),transparent 60%);pointer-events:none; }
.gdm-reviews-card > * { position:relative; }
.gdm-reviews-card .gdm-side-head { font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:12px; }
.gdm-user-review { margin-top:14px;padding-top:14px;border-top:1px solid var(--border); }
.gdm-user-review-head { font-size:12px;font-weight:700;color:var(--muted-light);margin-bottom:10px;letter-spacing:.02em; }
.gdm-thumbs { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
.gdm-thumb { flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--muted-light);cursor:pointer;font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;transition:all .15s; }
.gdm-thumb-emoji, .gdm-thumb-emoji img.emoji, .gdm-thumb-emoji img { font-size:26px;width:26px;height:26px;display:inline-block;vertical-align:middle; }
.gdm-rc-emoji, .gdm-rc-emoji img.emoji, .gdm-rc-emoji img { font-size:14px;width:14px;height:14px;display:inline-block;vertical-align:-2px; }
.gdm-thumb:hover { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--text); }
.gdm-thumb--up.gdm-thumb--active { background:rgba(62,207,110,.14);border-color:rgba(62,207,110,.4);color:var(--green); }
.gdm-thumb--mid.gdm-thumb--active { background:rgba(255,249,62,.14);border-color:rgba(255,249,62,.4);color:var(--accent); }
.gdm-thumb--down.gdm-thumb--active { background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.4);color:var(--red); }
.gdm-review-text { width:100%;box-sizing:border-box;padding:10px 12px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:var(--font-ui);font-size:12.5px;resize:vertical;min-height:54px;outline:none;transition:border-color .15s;margin-bottom:10px; }
.gdm-review-text:focus { border-color:rgba(255,249,62,.3); }
.gdm-review-submit { background:var(--accent);color:var(--rail);border:none;border-radius:10px;padding:9px 18px;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;transition:all .15s; }
.gdm-review-submit:hover { background:#ffe55c;box-shadow:0 0 16px rgba(255,249,62,.24); }

.gdm-review-carousel { margin-top:14px;min-height:96px;position:relative; }
.gdm-review-empty { font-size:12px;color:var(--muted);font-style:italic;text-align:center;padding:18px; }
.gdm-review-chip { background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:opacity .35s ease,transform .35s ease,border-color .15s; }
.gdm-review-chip--in { opacity:1;transform:translateY(0); }
.gdm-review-chip--out { opacity:0;transform:translateY(-6px); }
.gdm-review-chip.gdm-vote-up { border-left:3px solid var(--green); }
.gdm-review-chip.gdm-vote-mid { border-left:3px solid var(--accent); }
.gdm-review-chip.gdm-vote-down { border-left:3px solid var(--red); }
.gdm-rc-head { display:flex;align-items:center;gap:10px;margin-bottom:6px; }
.gdm-rc-pfp { width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel);border:1px solid var(--border); }
.gdm-rc-pfp img { width:100%;height:100%;object-fit:cover;display:block; }
.gdm-rc-pfp-fallback { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:var(--accent);background:rgba(255,249,62,.1);font-size:13px; }
.gdm-rc-meta { flex:1;min-width:0; }
.gdm-rc-name { font-size:13px;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.gdm-rc-handle { font-size:11px;color:var(--muted); }
.gdm-rc-vote { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--muted-light);padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.04);flex-shrink:0; }
.gdm-rc-body { font-size:12.5px;color:var(--muted-light);line-height:1.5;padding-left:42px; }

/* ── Profile widgets (Discord-style flatten) ── */
.pw-widget { background:rgba(255,255,255,.025) !important; border:1px solid var(--border) !important; border-left:1px solid var(--border) !important; border-radius:10px !important; padding:14px 16px !important; margin-bottom:10px; transition:background .12s; }
.pw-widget:hover { background:rgba(255,255,255,.035) !important; }
.pw-widget-title { font-family:var(--font-display) !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--muted-light) !important; margin-bottom:10px !important; display:flex;align-items:center;gap:6px;background:transparent !important; padding:0 !important; }
.pw-widget-title svg { color:var(--muted-light) !important;flex-shrink:0; }
.gdm-row--meta .gdm-row-k,.gdm-row--meta .gdm-row-v { font-size:11px;color:var(--muted);font-weight:500; }
.gdm-empty { padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center; }
.gdm-empty-title { font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--text); }
.gdm-empty-sub { font-size:12.5px;color:var(--muted-light);line-height:1.5;max-width:360px; }
@media(max-width:860px) { .gdm-body { grid-template-columns:1fr; } .gdm-title { font-size:22px; } .gdm-cover { width:72px;height:96px; } }

/* ── Registered Games settings tab ── */
.rg-panel { padding:28px 32px; max-width:780px; }
.rg-section-head { font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text);margin:0 0 12px;letter-spacing:.01em; }
.rg-section-note { font-size:12px;color:var(--muted-light);margin:-6px 0 14px;line-height:1.5; }
.rg-section-note a { color:var(--blue);text-decoration:none;font-weight:600; }
.rg-section-note a:hover { text-decoration:underline; }
.rg-divider { height:1px;background:var(--border);margin:28px 0 22px; }

.rg-current { display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.2);border:1px solid var(--border);margin-bottom:14px; }
.rg-current--empty { flex-direction:column;align-items:flex-start;gap:2px;background:transparent;border:none;padding:2px 0 14px;margin-bottom:2px; }
.rg-current-empty-title { font-size:14px;font-weight:700;color:var(--text); }
.rg-current-empty-sub { font-size:12.5px;color:var(--muted-light); }
.rg-current-body { flex:1;min-width:0; }
.rg-current-name { font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.rg-current-sub { font-size:11.5px;color:var(--muted-light); }
.rg-cover-sm { width:40px;height:54px;border-radius:6px;object-fit:cover;flex-shrink:0;background:#0c0a0a;border:1px solid rgba(255,255,255,.06); }
.rg-cover-sm.rg-cover-fallback { display:flex;align-items:center;justify-content:center;font-size:20px; }

.rg-addline { display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted-light);margin:2px 0 14px; }
.rg-link { background:none;border:none;color:var(--blue);font-weight:600;cursor:pointer;font-size:13px;padding:0;text-decoration:underline;text-underline-offset:2px; }
.rg-link:hover { color:var(--text); }

.rg-inline-picker { background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:18px; }
.rg-inline-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.rg-inline-title { font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:.02em; }
.rg-chip-btn { background:transparent;border:1px solid var(--border);color:var(--muted-light);font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;transition:all .15s; }
.rg-chip-btn:hover { color:var(--text);border-color:rgba(255,255,255,.18); }
.rg-chip-muted { font-size:11px;color:var(--muted);background:rgba(255,255,255,.04);padding:5px 11px;border-radius:7px;font-weight:600; }
.rg-detected-list { display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;margin-bottom:12px; }
.rg-detected-loading { text-align:center;padding:14px;color:var(--muted);font-size:12px;font-style:italic; }
.rg-detected-empty { display:flex;flex-direction:column;gap:3px;padding:14px;text-align:center;font-size:12px;color:var(--muted-light); }
.rg-detected-empty strong { color:var(--text);font-weight:700;font-size:12.5px; }
.rg-detected-row { display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .12s; }
.rg-detected-row:hover { background:rgba(255,255,255,.04); }
.rg-detected-cover { width:30px;height:40px;border-radius:5px;object-fit:cover;flex-shrink:0;background:#0c0a0a; }
.rg-detected-cover.rg-cover-fallback { display:flex;align-items:center;justify-content:center;font-size:16px; }
.rg-detected-body { flex:1;min-width:0; }
.rg-detected-name { font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.rg-detected-genre { font-size:10.5px;color:var(--muted-light); }
.rg-detected-add { font-size:11.5px;font-weight:700;color:var(--green);letter-spacing:.02em;flex-shrink:0; }
.rg-inline-sep { font-size:11px;color:var(--muted);margin:8px 0 6px;padding-top:10px;border-top:1px solid var(--border); }
.rg-inline-search { display:flex;gap:8px; }
.rg-inline-search .settings-input { flex:1;font-size:12.5px;padding:9px 12px; }
.rg-inline-add-btn { font-size:12px;padding:9px 18px;white-space:nowrap; }
.rg-inline-results { margin-top:8px;max-height:180px;overflow-y:auto;background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:8px;padding:4px; }

.rg-list { display:flex;flex-direction:column;gap:4px; }
.rg-row { display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.025);cursor:pointer;transition:background .12s,transform .12s; }
.rg-row:hover { background:rgba(255,255,255,.05); }
.rg-row--playing { background:rgba(62,207,110,.06);border:1px solid rgba(62,207,110,.2); }
.rg-row--setting { cursor:default;background:transparent; }
.rg-row--setting:hover { background:transparent; }
.rg-row-cover { width:34px;height:34px;border-radius:7px;object-fit:cover;flex-shrink:0;background:#0c0a0a; }
.rg-row-cover.rg-cover-fallback { display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(255,255,255,.04); }
.rg-row-body { flex:1;min-width:0; }
.rg-row-name { font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.rg-row-sub { font-size:11.5px;color:var(--muted-light); }
.rg-row-sub--playing { color:var(--green);font-weight:600; }
.rg-row-sub strong { color:var(--text);font-weight:700; }
.rg-row-actions { display:flex;gap:4px;flex-shrink:0;align-items:center; }
.rg-verified { color:var(--blue);flex-shrink:0; }
.rg-row-hidden-tag { font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:4px;flex-shrink:0; }
.rg-icon-btn { background:transparent;border:none;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted-light);cursor:pointer;transition:all .12s; }
.rg-icon-btn:hover { background:rgba(255,255,255,.08);color:var(--text); }
.rg-icon-btn--danger:hover { background:rgba(248,113,113,.12);color:var(--red); }
.rg-icon-btn--ghost { color:var(--muted); }

.rg-empty { padding:34px 16px;text-align:center;background:rgba(0,0,0,.15);border:1px dashed var(--border);border-radius:10px; }
.rg-empty-title { font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:4px; }
.rg-empty-sub { font-size:12px;color:var(--muted-light); }
.rg-bottom-actions { display:flex;justify-content:flex-start;margin:18px 0 2px; }

/* ── Add-a-game picker modal ── */
.gcp-overlay { position:fixed;inset:0;background:rgba(12,14,20,.78);backdrop-filter:blur(10px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:28px;animation:gdmIn .18s ease-out; }
.gcp-card { background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.55);animation:gdmCardIn .22s cubic-bezier(.22,1,.36,1); }
.gcp-head { padding:18px 22px 12px;border-bottom:1px solid var(--border); }
.gcp-title { font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text);margin-bottom:3px; }
.gcp-sub { font-size:11.5px;color:var(--muted); }
.gcp-sub a { color:var(--blue);text-decoration:none;font-weight:600; }
.gcp-sub a:hover { text-decoration:underline; }
.gcp-search-wrap { position:relative;padding:12px 22px;border-bottom:1px solid var(--border); }
.gcp-search-icon { position:absolute;left:36px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none; }
.gcp-search { width:100%;background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 14px 10px 36px;font-family:var(--font-ui);font-size:13px;outline:none;transition:border-color .15s;box-sizing:border-box; }
.gcp-search:focus { border-color:rgba(255,249,62,.25); }
.gcp-search::placeholder { color:rgba(255,255,255,.25); }
.gcp-list { flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:2px; }
.gcp-row { display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .12s; }
.gcp-row:hover { background:rgba(255,255,255,.05); }
.gcp-row--added { background:rgba(62,207,110,.06); }
.gcp-row--added:hover { background:rgba(62,207,110,.1); }
.gcp-row-cover { width:38px;height:38px;border-radius:7px;object-fit:cover;background:#0c0a0a;flex-shrink:0; }
.gcp-row-cover.gcp-row-cover-fallback { display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.04); }
.gcp-row-body { flex:1;min-width:0; }
.gcp-row-name { font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.gcp-row-genre { font-size:11px;color:var(--muted-light); }
.gcp-row-action { font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.02em;flex-shrink:0; }
.gcp-row-action--added { color:var(--green); }
.gcp-hint { text-align:center;padding:20px;color:var(--muted);font-size:12px;font-style:italic; }
.gcp-empty { text-align:center;padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:12px; }
.gcp-empty-title { font-size:13px;color:var(--muted-light); }
.gcp-foot { padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0; }
.gcp-foot button { flex:1; }

/* ── Forum attachment UI ── */
.forum-att-edit-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px; }
.forum-att-chip { position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000;aspect-ratio:4/3; }
.forum-att-chip img,.forum-att-chip video { width:100%;height:100%;object-fit:cover;display:block; }
.forum-att-chip-type { position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.72);color:var(--accent);font-family:var(--font-display);font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:6px;border:1px solid rgba(255,249,62,.25); }
.forum-att-chip-x { position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;border:1px solid rgba(255,255,255,.14);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,border-color .15s; }
.forum-att-chip-x:hover { background:var(--red);border-color:var(--red); }
.forum-att-grid { display:flex;flex-direction:column;gap:10px;margin-top:10px; }
.forum-att-media { max-width:100%;border-radius:12px;border:1px solid var(--border);display:block;background:#000; }
.forum-att-video { width:100%; }

.fnp-preview-card { background:linear-gradient(160deg,rgba(255,249,62,.04),var(--panel));border-color:rgba(255,249,62,.25); }
.forum-live-preview-host { margin-top:10px;border-radius:12px;border:1px dashed var(--border);padding:14px;background:rgba(0,0,0,.18);min-height:110px; }
.forum-live-preview-host .forum-op-card { margin:0;border-left-width:3px; }
.forum-live-title { font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--text);margin:0 0 12px;letter-spacing:.01em; }
.forum-live-empty { color:var(--muted);font-size:12.5px;font-style:italic;display:flex;align-items:center;justify-content:center;min-height:80px; }

.forum-media-badge { display:inline-flex;align-items:center;gap:4px;background:rgba(255,249,62,.1);color:var(--accent);border:1px solid rgba(255,249,62,.22);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.02em;line-height:1.5; }
.forum-media-badge svg { flex-shrink:0; }
.forum-thread-badges { display:inline-flex;gap:5px;flex-wrap:wrap; }

/* ── Admin Ads Panel ── */
.adm-ads-wrap { display:flex;flex-direction:column;gap:18px;padding:8px 2px 24px; }
.adm-ads-header { display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap; }
.adm-ads-title { font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text);margin:0 0 4px; }
.adm-ads-sub { font-size:12.5px;color:var(--muted-light);margin:0;max-width:560px;line-height:1.5; }
.adm-ads-stats { display:flex;gap:10px;flex-wrap:wrap; }
.adm-ads-stat { background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 16px;min-width:78px;text-align:center; }
.adm-ads-stat-num { font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--accent);line-height:1; }
.adm-ads-stat-label { font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.06em;text-transform:uppercase; }
.adm-ads-legend { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;font-size:11.5px;color:var(--muted-light); }
.adm-ads-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle; }

.adm-ads-table { display:flex;flex-direction:column;gap:8px; }
.adm-ads-row { display:grid;grid-template-columns:92px minmax(0,1fr) 180px 96px 190px;gap:14px;align-items:center;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;transition:border-color .18s; }
.adm-ads-row:hover { border-color:rgba(255,249,62,.15); }
.adm-ads-preview { width:86px;height:54px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.4);flex-shrink:0; }
.adm-ads-preview img { width:100%;height:100%;object-fit:cover;display:block; }
.adm-ads-info { min-width:0; }
.adm-ads-row-title { font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.adm-ads-row-meta { display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:4px;flex-wrap:wrap; }
.adm-ads-ratio { padding:2px 7px;border-radius:5px;font-weight:700;font-size:10px;letter-spacing:.04em;text-transform:uppercase; }
.adm-ads-ratio--banner { background:rgba(96,165,250,.12);color:#60a5fa; }
.adm-ads-ratio--rectangle { background:rgba(167,139,250,.12);color:#a78bfa; }
.adm-ads-owner { font-weight:600; }
.adm-ads-row-target { font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.adm-ads-weight { display:flex;flex-direction:column;gap:3px;min-width:0; }
.adm-ads-weight-num { font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--text);line-height:1; }
.adm-ads-weight-label { font-size:10px;color:var(--muted); }
.adm-ads-share-bar { height:4px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:2px; }
.adm-ads-share-fill { height:100%;transition:width .3s; }
.adm-ads-share-label { font-size:10px;color:var(--muted-light);font-weight:600; }

.adm-ads-expires { text-align:center; }
.adm-ads-expires-label { font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase; }
.adm-ads-expires-date { font-size:12.5px;font-weight:600;color:var(--text);margin-top:2px; }

.adm-ads-actions { display:flex;flex-direction:column;gap:6px; }
.adm-ads-btn { display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted-light);font-family:var(--font-display);font-size:11.5px;font-weight:700;cursor:pointer;transition:all .15s; }
.adm-ads-btn:hover { background:rgba(0,0,0,.5);color:var(--text); }
.adm-ads-btn--boost:hover { border-color:rgba(255,249,62,.35);color:var(--accent);background:rgba(255,249,62,.06); }
.adm-ads-btn--down:hover { border-color:rgba(248,113,113,.4);color:#f87171;background:rgba(248,113,113,.08); }

.adm-ads-empty { padding:60px 20px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--border);border-radius:12px;font-size:13px; }

@media(max-width:960px) {
  .adm-ads-row { grid-template-columns:70px 1fr;grid-template-areas:'prev info' 'weight weight' 'exp actions';gap:10px; }
  .adm-ads-preview { grid-area:prev;width:70px;height:44px; }
  .adm-ads-info { grid-area:info; }
  .adm-ads-weight { grid-area:weight;padding-top:8px;border-top:1px solid var(--border); }
  .adm-ads-expires { grid-area:exp;text-align:left; }
  .adm-ads-actions { grid-area:actions;flex-direction:row;justify-content:flex-end; }
}

/* Responsive */
@media(max-width:900px) {
  .forum-body { grid-template-columns:1fr;padding:20px 16px; }
  .forum-sidebar { order:2; }
  .forum-main { order:1; }
  .forum-hero { padding:28px 16px 24px; }
  .forum-hero-top { flex-direction:column;align-items:flex-start; }
  .forum-hero-stats { width:100%; }
  .forum-hero-stat { flex:1; }
  .forum-toolbar { flex-wrap:wrap; }
  .forum-search-wrap { max-width:none; }
  .forum-threadlist-header { padding:16px; }
  .forum-threadlist-body { padding:16px; }
  .forum-detail-header { padding:12px 16px; }
  .forum-detail-body { padding:16px; }
}

/* ── POLL ROOM SYSTEM ────────────────────────────── */
.poll-card{background:var(--panel);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;margin-bottom:12px;transition:border-color .2s,box-shadow .2s;}
.poll-card:hover{border-color:rgba(255,249,62,.12);box-shadow:0 4px 20px rgba(0,0,0,.15);}
.poll-card-header{padding:18px 22px 14px;display:flex;align-items:flex-start;gap:14px;}
.poll-card-icon{width:42px;height:42px;border-radius:12px;background:var(--accent-dim);border:1px solid var(--accent-mid);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.poll-card-title{font-family:var(--font-display);font-size:16px;font-weight:800;color:#fff;line-height:1.3;margin-bottom:3px;}
.poll-card-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.poll-card-body{padding:0 22px 18px;}
.poll-option{position:relative;border-radius:12px;overflow:hidden;margin-bottom:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;border:1.5px solid var(--border);background:var(--panel2);}
.poll-option:hover{transform:translateX(3px);box-shadow:0 2px 12px rgba(0,0,0,.15);border-color:rgba(255,255,255,.1);}
.poll-option.voted{border-color:var(--accent-mid);}
.poll-option.voted .poll-opt-bar{background:linear-gradient(90deg,rgba(255,249,62,.2),rgba(255,200,62,.08));}
.poll-opt-bar{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:10px;transition:width .6s cubic-bezier(.22,1,.36,1);z-index:0;}
.poll-opt-content{position:relative;z-index:1;padding:12px 16px;display:flex;align-items:center;gap:10px;}
.poll-opt-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:12px;}
.poll-option.voted .poll-opt-check{background:var(--accent);border-color:var(--accent);color:#13161d;}
.poll-opt-label{flex:1;font-size:14px;font-weight:600;color:rgba(255,255,255,.85);}
.poll-opt-pct{font-family:var(--font-display);font-size:15px;font-weight:800;color:rgba(255,255,255,.5);min-width:42px;text-align:right;}
.poll-option.voted .poll-opt-pct{color:var(--accent);}
.poll-opt-voters{display:flex;align-items:center;margin-left:6px;}
.poll-opt-voters img,.poll-opt-voters .pov-av{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel);margin-left:-6px;object-fit:cover;}
.poll-opt-voters .pov-av:first-child{margin-left:0;}
.poll-card-footer{padding:12px 22px 16px;border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:10px;}
.poll-card-footer .pcf-responses{font-size:12.5px;color:var(--muted);font-weight:600;}
.poll-card-footer .pcf-time{font-size:11.5px;color:var(--muted);margin-left:auto;}
.poll-card.ended .poll-option{cursor:default;opacity:.85;}
.poll-card.ended .poll-option:hover{transform:none;box-shadow:none;}
@keyframes pollBarGrow{from{width:0}to{width:var(--pct)}}

/* ── THREAD SYSTEM ───────────────────────────────── */
.thread-panel{position:fixed;top:0;right:0;bottom:0;width:380px;background:var(--panel);border-left:1px solid var(--border);z-index:7000;display:flex;flex-direction:column;animation:slideInRight .2s cubic-bezier(.22,1,.36,1);}
@keyframes slideInRight{from{opacity:0;transform:translateX(100%);}to{opacity:1;transform:none;}}
.thread-panel-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.thread-panel-header .tph-title{flex:1;font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;}
.thread-panel-header .tph-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px;border-radius:8px;line-height:1;transition:background .12s;}
.thread-panel-header .tph-close:hover{background:rgba(255,255,255,.06);}
.thread-origin{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);background:var(--panel2);}
.thread-origin .to-author{font-size:12px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:3px;}
.thread-origin .to-text{font-size:12.5px;color:var(--muted-light);line-height:1.5;}
.thread-replies{flex:1;overflow-y:auto;padding:8px 12px;}
.thread-reply{display:flex;gap:8px;padding:8px 10px;border-radius:10px;transition:background .1s;}
.thread-reply:hover{background:rgba(255,255,255,.03);}
.thread-reply .tr-av{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.thread-reply .tr-av img{width:100%;height:100%;object-fit:cover;}
.thread-reply .tr-body{flex:1;min-width:0;}
.thread-reply .tr-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;}
.thread-reply .tr-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.8);}
.thread-reply .tr-time{font-size:10px;color:var(--muted);}
.thread-reply .tr-text{font-size:12.5px;color:var(--muted-light);line-height:1.5;word-break:break-word;}
.thread-compose{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;flex-shrink:0;}
.thread-compose textarea{flex:1;background:var(--surface-1);border:1px solid var(--surface-border);border-radius:10px;color:#fff;padding:8px 12px;font-family:inherit;font-size:12.5px;resize:none;min-height:36px;max-height:100px;transition:border-color .15s;}
.thread-compose textarea:focus{outline:none;border-color:rgba(255,249,62,.3);}
.thread-compose button{padding:8px 14px;background:var(--accent-dim);border:1px solid var(--accent-mid);border-radius:10px;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;transition:all .12s;}
.thread-compose button:hover{background:var(--accent);color:#13161d;}
.msg-thread-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;margin-top:4px;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.12);border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--blue);cursor:pointer;transition:all .12s;}
.msg-thread-badge:hover{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.25);}
.msg-thread-badge svg{width:12px;height:12px;}

/* ── ADVANCED SEARCH ─────────────────────────────── */
.adv-search-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:580px;max-width:90vw;max-height:70vh;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;z-index:7000;display:flex;flex-direction:column;animation:mppSlideIn .2s cubic-bezier(.22,1,.36,1);box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);}
.adv-search-overlay{position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(6px);z-index:6999;animation:fadeIn .15s;}
.adv-search-header{padding:20px 22px 14px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.adv-search-header .ash-title{font-family:var(--font-display);font-size:11px;font-weight:700;color:rgba(255,255,255,.25);margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em;}
.adv-search-header input{width:100%;background:transparent;border:none;border-radius:0;color:#fff;padding:4px 0;font-family:var(--font-display);font-size:20px;font-weight:700;transition:border-color .15s;letter-spacing:-.02em;}
.adv-search-header input:focus{outline:none;}
.adv-search-header input::placeholder{color:rgba(255,255,255,.15);font-weight:700;}
.adv-search-filters{padding:10px 22px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;}
.asf-chip{padding:5px 12px;border-radius:var(--radius-pill);background:var(--surface-1);border:1px solid var(--surface-border);font-size:11px;font-weight:600;color:var(--muted-light);cursor:pointer;transition:all .12s;}
.asf-chip:hover,.asf-chip.active{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);}
.adv-search-results{flex:1;overflow-y:auto;padding:8px 14px;}
.asr-item{padding:12px 14px;border-radius:12px;cursor:pointer;transition:all .12s;margin-bottom:2px;display:flex;align-items:flex-start;gap:10px;}
.asr-item:hover{background:rgba(255,255,255,.04);}
.asr-item .asr-av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel2);}
.asr-item .asr-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.asr-item .asr-body{flex:1;min-width:0;}
.asr-item .asr-meta{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.asr-item .asr-from{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.75);}
.asr-item .asr-channel{font-size:10.5px;color:rgba(255,255,255,.2);display:flex;align-items:center;gap:3px;}
.asr-item .asr-channel::before{content:'in';font-size:9px;color:rgba(255,255,255,.15);}
.asr-item .asr-time{font-size:10px;color:var(--muted);margin-left:auto;}
.asr-item .asr-text{font-size:12.5px;color:var(--muted-light);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.asr-item .asr-text mark{background:rgba(255,249,62,.25);color:#fff;border-radius:2px;padding:0 2px;font-weight:600;}

/* ── KEYBOARD SHORTCUTS OVERLAY ──────────────────── */
.kbd-overlay{position:fixed;inset:0;background:rgba(4,6,10,.88);backdrop-filter:blur(16px);z-index:9000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;}
.kbd-card{background:var(--panel);border:1px solid var(--border);border-radius:22px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto;padding:28px 32px;box-shadow:var(--elev-3);}
.kbd-card h2{font-family:var(--font-display);font-size:18px;font-weight:800;color:#fff;margin-bottom:4px;}
.kbd-card .kbd-sub{font-size:12px;color:var(--muted);margin-bottom:20px;}
.kbd-section{margin-bottom:18px;}
.kbd-section h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;}
.kbd-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.kbd-row:last-child{border-bottom:none;}
.kbd-row .kr-label{font-size:13px;color:rgba(255,255,255,.7);}
.kbd-row .kr-keys{display:flex;gap:4px;}
.kbd-row .kr-key{padding:3px 8px;background:var(--surface-2);border:1px solid var(--surface-border);border-radius:6px;font-size:11px;font-weight:700;font-family:monospace;color:rgba(255,255,255,.6);}

/* ── CUSTOM SOUNDBOARD ───────────────────────────── */
.soundboard-panel{position:fixed;bottom:80px;right:20px;width:320px;background:var(--panel);border:1px solid var(--border);border-radius:18px;z-index:var(--z-tooltip);box-shadow:var(--elev-3);animation:ctxIn .14s cubic-bezier(.22,1,.36,1);overflow:hidden;}
.soundboard-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.soundboard-header .sbh-title{flex:1;font-family:var(--font-display);font-size:13px;font-weight:800;}
.soundboard-grid{padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:260px;overflow-y:auto;}
.sb-clip{padding:10px 8px;background:var(--surface-1);border:1px solid var(--surface-border);border-radius:10px;cursor:pointer;text-align:center;transition:all .12s;font-size:11px;font-weight:600;color:var(--muted-light);}
.sb-clip:hover{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);transform:scale(1.02);}
.sb-clip.playing{background:var(--accent);color:#13161d;border-color:var(--accent);}
.sb-upload{padding:12px 16px;border-top:1px solid var(--border);text-align:center;}

/* ── EVENTS / CALENDAR ───────────────────────────── */
.events-panel{padding:16px;}
.event-card{background:var(--panel2);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:10px;transition:border-color .15s,box-shadow .15s;}
.event-card:hover{border-color:rgba(255,249,62,.15);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.event-card .ec-banner{height:80px;background:linear-gradient(135deg,rgba(255,249,62,.08),rgba(96,165,250,.06));display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;}
.event-card .ec-date-badge{position:absolute;top:10px;right:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:4px 10px;text-align:center;}
.event-card .ec-date-badge .edb-month{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);}
.event-card .ec-date-badge .edb-day{font-size:16px;font-weight:800;color:#fff;line-height:1.1;}
.event-card .ec-body{padding:14px 16px;}
.event-card .ec-title{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;margin-bottom:4px;}
.event-card .ec-desc{font-size:12px;color:var(--muted-light);line-height:1.45;margin-bottom:8px;}
.event-card .ec-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);}
.event-card .ec-rsvp{margin-left:auto;}
.event-card .ec-rsvp button{padding:5px 12px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;cursor:pointer;transition:all .12s;}
.event-card .ec-rsvp .rsvp-yes{background:var(--accent-dim);border:1px solid var(--accent-mid);color:var(--accent);}
.event-card .ec-rsvp .rsvp-yes:hover{background:var(--accent);color:#13161d;}
.event-card .ec-rsvp .rsvp-yes.active{background:var(--accent);color:#13161d;}
.event-countdown{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:4px;}
/* ── Events modal header / tabs ──── */
.ev-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0;gap:12px;}
.ev-tabs{display:flex;gap:4px;}
.ev-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font-ui);}
.ev-tab:hover{background:rgba(255,255,255,.04);color:#fff;}
.ev-tab.active{background:var(--accent-dim);border-color:var(--accent-mid);color:var(--accent);}
.ev-create-btn{padding:7px 16px;font-size:11px;border-radius:10px;}
.ev-list{padding:12px 20px 20px;}
.ev-empty{text-align:center;padding:50px 20px;color:var(--muted);font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:10px;}
.ev-section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border);}
/* ── Event card enhancements ──── */
.event-card .ec-banner{position:relative;}
.event-card .ec-live-badge{position:absolute;top:10px;left:10px;background:rgba(239,68,68,.9);color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.04em;animation:evLivePulse 2s ease infinite;}
@keyframes evLivePulse{0%,100%{opacity:1;}50%{opacity:.6;}}
.event-card .ec-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.ec-menu-btn{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 8px;border-radius:8px;transition:all .12s;flex-shrink:0;}
.ec-menu-btn:hover{background:rgba(255,255,255,.06);color:#fff;}
.ev-card-live{border-color:rgba(239,68,68,.3)!important;box-shadow:0 0 20px rgba(239,68,68,.08)!important;}
.ev-card-cancelled{opacity:.5!important;}
.ev-card-cancelled .ec-title::after{content:' (Cancelled)';color:var(--red);font-weight:600;font-size:11px;}
.ev-card-past{opacity:.55;}
/* ── Event context menu ──── */
.ev-ctx-menu{position:fixed;z-index:var(--z-max);background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:180px;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:evMenuIn .12s ease;}
@keyframes evMenuIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.ev-ctx-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;transition:background .1s;gap:8px;}
.ev-ctx-item:hover{background:rgba(255,255,255,.06);}
.ev-ctx-highlight{color:var(--accent)!important;}
.ev-ctx-highlight:hover{background:rgba(99,102,241,.15)!important;}
.ev-ctx-danger{color:var(--red)!important;}
.ev-ctx-danger:hover{background:rgba(239,68,68,.1)!important;}
.ev-ctx-report{color:var(--muted)!important;}
.ev-ctx-report:hover{background:rgba(239,68,68,.06)!important;}
/* ── Event form ──── */
.ev-form-card{background:var(--panel);border:1.5px solid rgba(255,249,62,.08);border-radius:18px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.ev-form-title{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff;padding:16px 22px 0;}
.ev-form-body{padding:12px 22px 0;display:flex;flex-direction:column;gap:10px;}
.ev-form-label{font-size:11px;font-weight:700;color:var(--muted-light);margin-bottom:2px;display:block;}
.ev-form-input{width:100%;box-sizing:border-box;}
.ev-form-row{display:flex;gap:10px;}
.ev-form-actions{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px 18px;}
/* ── Banner upload ──── */
.ev-banner-upload{display:flex;flex-direction:column;gap:8px;}
.ev-banner-preview{width:100%;height:80px;border-radius:10px;overflow:hidden;background:var(--surface-1);border:1.5px dashed var(--border);display:flex;align-items:center;justify-content:center;}
.ev-banner-preview.has-img{border-style:solid;border-color:rgba(255,249,62,.12);}
.ev-banner-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.ev-banner-actions{display:flex;gap:6px;}
.ev-banner-btn{padding:5px 14px;font-size:11px;border-radius:8px;}
.ev-banner-remove{color:var(--red);border-color:rgba(239,68,68,.2);}
.ev-banner-remove:hover{background:rgba(239,68,68,.08);}
/* ── Event location / frequency in card ──── */
.ec-location{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted-light);margin-bottom:6px;}
.ec-frequency{font-size:10px;color:var(--accent);font-weight:700;margin-bottom:6px;}
/* ── Event preview card ──── */
.ev-preview-card{animation:evFormIn .15s ease;}
@keyframes evFormIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
/* ── Published success ──── */
.ev-published-card{text-align:center;}
.ev-share-link-box{display:flex;gap:6px;align-items:center;}
.ev-share-input{flex:1;font-size:11px;background:var(--surface-1);cursor:text;}
.ev-copy-link-btn{padding:8px 18px;font-size:12px;border-radius:10px;white-space:nowrap;}
/* ── Notification badge on sidebar events button ──── */
.ev-notif-badge{background:var(--red);color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:var(--radius-pill);margin-left:auto;min-width:14px;text-align:center;line-height:1.4;}
.ev-live-highlight{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.2)!important;}
.ev-live-highlight .sa-icon svg{stroke:var(--red)!important;}
.ev-live-highlight span:last-child{color:var(--red)!important;font-weight:800!important;}
/* ── Calendar view ──── */
.ev-cal{padding:12px 20px 20px;}
.ev-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ev-cal-month{font-family:var(--font-display);font-size:16px;font-weight:800;color:#fff;}
.ev-cal-arrow{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted-light);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.ev-cal-arrow:hover{background:rgba(255,255,255,.08);color:#fff;}
.ev-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.ev-cal-dayname{text-align:center;font-size:10px;font-weight:700;color:var(--muted);padding:6px 0;text-transform:uppercase;letter-spacing:.05em;}
.ev-cal-cell{text-align:center;padding:8px 4px;border-radius:10px;cursor:pointer;transition:all .12s;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.ev-cal-cell:hover{background:rgba(255,255,255,.04);}
.ev-cal-cell.selected{background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.2);}
.ev-cal-empty{cursor:default;}
.ev-cal-empty:hover{background:transparent;}
.ev-cal-day{font-size:13px;font-weight:600;color:var(--muted-light);}
.ev-cal-today .ev-cal-day{color:var(--accent);font-weight:800;}
.ev-cal-today{background:rgba(255,249,62,.04);border:1px solid rgba(255,249,62,.1);border-radius:10px;}
.ev-cal-has-event .ev-cal-day{color:#fff;font-weight:800;}
.ev-cal-dots{display:flex;gap:3px;justify-content:center;}
.ev-cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}
.ev-cal-dot.live{background:var(--red);animation:evLivePulse 2s ease infinite;}
.ev-cal-has-live{background:rgba(239,68,68,.06)!important;}
.ev-cal-day-list{padding:8px 0;}

/* ── USER NOTES ──────────────────────────────────── */
.user-note-section{margin-top:12px;padding:10px 12px;background:var(--surface-1);border:1px solid var(--surface-border);border-radius:10px;}
.user-note-section .uns-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:4px;}
.user-note-section textarea{width:100%;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:12px;resize:none;min-height:40px;line-height:1.5;}
.user-note-section textarea:focus{outline:none;}
.user-note-section textarea::placeholder{color:var(--muted);}

/* ── SLOW MODE INDICATOR ─────────────────────────── */
.slowmode-bar{padding:6px 14px;background:rgba(245,158,11,.06);border-top:1px solid rgba(245,158,11,.1);display:flex;align-items:center;gap:8px;font-size:11.5px;color:#f59e0b;font-weight:600;flex-shrink:0;}
.slowmode-bar .sm-timer{font-family:var(--font-display);font-weight:800;font-size:13px;}

/* ── FAVOURITES / QUICK ACCESS ───────────────────── */
.fav-section{padding:4px 10px 0;}
.fav-section .fav-header{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 4px 4px;display:flex;align-items:center;gap:4px;}
.fav-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;cursor:pointer;transition:all .12s;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.55);}
.fav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);}
.fav-item .fav-star{color:var(--accent);font-size:10px;}

/* ── NOTIFICATION SETTINGS PER CHANNEL ───────────── */
.notif-settings-modal{position:fixed;inset:0;background:rgba(4,6,10,.85);backdrop-filter:blur(12px);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;}
.ns-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:24px;max-width:340px;width:100%;}
.ns-card h3{font-family:var(--font-display);font-size:15px;font-weight:800;margin-bottom:14px;}
.ns-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:all .12s;margin-bottom:4px;}
.ns-opt:hover{background:rgba(255,255,255,.04);}
.ns-opt.active{background:var(--accent-dim);border:1px solid var(--accent-mid);}
.ns-opt .nso-icon{width:32px;height:32px;border-radius:10px;background:var(--surface-1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.ns-opt .nso-label{font-size:13px;font-weight:600;}
.ns-opt .nso-desc{font-size:11px;color:var(--muted);}

/* ── UNDO DELETE TOAST ───────────────────────────── */
.undo-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:10px 18px;display:flex;align-items:center;gap:12px;z-index:9500;box-shadow:var(--elev-2);animation:undoSlideUp .2s cubic-bezier(.22,1,.36,1);}
@keyframes undoSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.undo-toast .ut-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.8);}
.undo-toast .ut-btn{padding:5px 14px;background:var(--accent);color:#13161d;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .1s;}
.undo-toast .ut-btn:hover{filter:brightness(1.1);}
.undo-toast .ut-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);border-radius:0 0 14px 14px;animation:undoProgress 5s linear forwards;}
@keyframes undoProgress{from{width:100%}to{width:0}}

/* ── COPY MSG LINK TOOLTIP ────────────────────────── */
.msg-link-copied { position:fixed;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:11px;color:var(--accent);z-index:var(--z-max);pointer-events:none;animation:fadeIn .15s,fadeOut .3s 1.2s forwards; }
@keyframes fadeOut { to{opacity:0;transform:translateY(-4px)} }

/* ── SAFETY BANNER ────────────────────────────────── */
.safety-banner { padding:10px 14px;border-radius:12px;margin:8px 0;display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5; }
.safety-banner.warn { background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:var(--gold); }
.safety-banner.danger { background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:var(--red); }
.safety-banner.info { background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.18);color:#93c5fd; }

/* ── LOADING STATES ───────────────────────────────── */
.page-loader { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px;flex:1; }
.page-loader .pl-spinner { width:36px;height:36px;border:3px solid rgba(255,249,62,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite; }
.page-loader .pl-text { font-size:13px;color:var(--muted);font-weight:600; }

/* ── STATUS MODE FIX ──────────────────────────────── */
.status-picker-modal { position:fixed;inset:0;background:rgba(4,6,10,.85);backdrop-filter:blur(12px);z-index:4000;display:flex;align-items:center;justify-content:center; }
.sp-card { background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:24px;max-width:380px;width:100%; }
.sp-mode-row { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px; }
.sp-mode-opt { flex:1;min-width:80px;padding:10px 8px;border:1.5px solid var(--border);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:600;transition:all .15s; }
.sp-mode-opt:hover,.sp-mode-opt.sel { border-color:var(--accent-mid);background:var(--accent-dim);color:var(--accent); }
.sp-mode-dot { width:12px;height:12px;border-radius:50%; }

/* ── GAME DETECTION ENHANCED ──────────────────────── */
.detected-app-item { display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;transition:all .15s; }
.detected-app-item:hover { border-color:rgba(62,207,110,.2);background:rgba(62,207,110,.02); }
.dai-icon { width:48px;height:64px;border-radius:10px;overflow:hidden;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.dai-icon img { width:100%;height:100%;object-fit:cover;border-radius:10px; }
.dai-info { flex:1;min-width:0; }
.dai-name { font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff; }
.dai-sub { font-size:11.5px;color:var(--muted);margin-top:2px; }
.dai-genre { font-size:10.5px;color:rgba(255,255,255,.2);margin-top:1px; }
/* Desktop app indicator */
.desktop-app-badge { display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;color:rgba(62,207,110,.6);background:rgba(62,207,110,.06);border:1px solid rgba(62,207,110,.12);border-radius:var(--radius-pill);padding:2px 8px;margin-top:4px; }

/* ── BASTION TEMPLATE CARD ────────────────────────── */
.bastion-template-card { border:1.5px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .15s; }
.bastion-template-card:hover,.bastion-template-card.sel { border-color:var(--accent-mid);box-shadow:0 4px 20px rgba(255,249,62,.08); }
.btc-preview { height:80px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative; }
.btc-body { padding:12px 14px;background:var(--panel); }
.btc-name { font-family:var(--font-display);font-size:13.5px;font-weight:800;margin-bottom:3px; }
.btc-channels { font-size:11px;color:var(--muted); }

/* ── CONNECT SOCIAL / ACCOUNTS ────────────────────── */
.connected-account-row { display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:8px; }
.car-icon { width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.car-info { flex:1;min-width:0; }
.car-name { font-size:13px;font-weight:600; }
.car-sub { font-size:11px;color:var(--muted); }


/* ── Visibility Toggle (Create Bastion) ──────────── */
.vis-toggle{display:flex;gap:10px;flex-wrap:wrap;}
.vis-opt{flex:1;min-width:120px;padding:14px 12px;border:1.5px solid var(--border);border-radius:14px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted-light);transition:all .15s;}
.vis-opt:hover{border-color:var(--accent-mid);background:rgba(255,249,62,.04);}
.vis-opt.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}

/* ── Discord-like Calling Animation ────────────────── */
@keyframes callingRing {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.03); }
  75% { transform: scale(0.97); }
}
@keyframes callingPulse1 {
  0% { transform: scale(0.95); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes callingPulse2 {
  0% { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes callingDots {
  0%, 20% { content: 'Calling'; }
  40% { content: 'Calling.'; }
  60% { content: 'Calling..'; }
  80%, 100% { content: 'Calling...'; }
}
.calling-dots::after {
  content: '';
  animation: none;
}

/* Role tags - Discord style */
.role-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.02em;cursor:default;vertical-align:middle;line-height:1.4;}
.role-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}

/* Unsaved changes bar */
.unsaved-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--panel);border:1px solid rgba(255,249,62,.3);border-radius:14px;padding:12px 20px;display:flex;align-items:center;gap:14px;z-index:var(--z-overlay);box-shadow:0 8px 32px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.22,1,.36,1);pointer-events:none;min-width:380px;}
.unsaved-bar.show{transform:translateX(-50%) translateY(0);pointer-events:auto;}
.unsaved-bar-msg{flex:1;font-size:13px;color:rgba(255,255,255,.8);}
.unsaved-bar-msg strong{color:var(--accent);}
.unsaved-bar-reset{background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:rgba(255,255,255,.6);font-size:12.5px;padding:7px 14px;cursor:pointer;transition:.14s;}
.unsaved-bar-reset:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.unsaved-bar-save{background:var(--accent);color:#13161d;border:none;border-radius:8px;font-family:var(--font-display);font-size:12.5px;font-weight:800;padding:7px 18px;cursor:pointer;transition:.14s;}
.unsaved-bar-save:hover{filter:brightness(1.08);}

/* Discord-style notification toasts */
.ftz-notif-toast{position:fixed;bottom:24px;right:24px;background:rgba(14,17,24,.97);border:1px solid rgba(239,68,68,.12);border-radius:16px;padding:14px 18px;display:flex;align-items:flex-start;gap:14px;max-width:360px;z-index:9800;box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 0 1px rgba(239,68,68,.06);animation:notifSlideIn .3s cubic-bezier(.22,1,.36,1);cursor:pointer;backdrop-filter:blur(20px);}
.ftz-notif-toast:hover{background:rgba(20,23,30,.98);border-color:rgba(239,68,68,.2);}
@keyframes notifSlideIn{from{opacity:0;transform:translateX(100%) scale(.95)}to{opacity:1;transform:none}}
@keyframes notifSlideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(100%) scale(.95)}}
.ftz-notif-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:17px;position:relative;border:2.5px solid rgba(239,68,68,.3);box-shadow:0 0 0 3px rgba(239,68,68,.08);}
.ftz-notif-body{flex:1;min-width:0;}
.ftz-notif-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftz-notif-text{font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ftz-notif-close{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:16px;padding:2px;line-height:1;flex-shrink:0;margin-top:-2px;border-radius:6px;transition:all .12s;}
.ftz-notif-close:hover{color:#fff;background:rgba(255,255,255,.06);}

/* ── Mini Profile Preview — Guilded-inspired popup card ── */
.mini-profile-preview{position:fixed;background:var(--panel);border:1px solid rgba(255,255,255,.05);border-radius:16px;z-index:4000;box-shadow:0 24px 80px rgba(0,0,0,.7),0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02);overflow:hidden;overflow-y:auto;max-height:calc(100vh - 32px);animation:mppSlideIn .22s cubic-bezier(.16,1,.3,1);width:310px;}
@keyframes mppSlideIn{from{opacity:0;transform:scale(.95) translateY(8px)}to{opacity:1;transform:none}}
.mpp-banner{height:90px;position:relative;overflow:hidden;background:#142744;}
.mpp-banner img{width:100%;height:100%;object-fit:cover;}
.mpp-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50px;background:linear-gradient(to top,var(--panel),transparent);pointer-events:none;}
.mpp-av-area{padding:0 16px;margin-top:-32px;position:relative;z-index:2;display:flex;align-items:flex-end;gap:10px;}
.mpp-av{width:64px;height:64px;border-radius:50%;overflow:hidden;border:3.5px solid var(--panel);cursor:pointer;background:var(--panel2);flex-shrink:0;box-shadow:0 6px 20px rgba(0,0,0,.55);transition:transform .18s cubic-bezier(.22,1,.36,1);}
.mpp-av:hover{transform:scale(1.05);}
.mpp-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.mpp-identity{padding:10px 18px 0;}
.mpp-displayname{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff;cursor:pointer;transition:color .12s;line-height:1.2;display:flex;align-items:center;gap:6px;}
.mpp-displayname:hover{color:var(--accent);}
.mpp-username{font-size:11.5px;color:rgba(255,255,255,.22);font-weight:500;margin-top:3px;}
.mpp-status-row{display:flex;align-items:center;gap:6px;padding:10px 18px 0;flex-wrap:wrap;}
.mpp-status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-pill);font-size:10.5px;font-weight:600;color:rgba(255,255,255,.5);}
.mpp-status-pill .sdot{width:10px;height:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.mpp-badges-row{display:flex;flex-wrap:wrap;gap:3px;padding:8px 18px 0;}
.mpp-divider{height:1px;background:rgba(255,255,255,.05);margin:12px 18px;}
.mpp-section{padding:3px 18px 5px;}
.mpp-section-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.2);margin-bottom:5px;}
.mpp-section-body{font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.55;}
.mpp-roles-row{display:flex;flex-wrap:wrap;gap:5px;padding:3px 18px 5px;}
.mpp-role-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.5);transition:all .12s;}
.mpp-role-chip:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);}
.mpp-role-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.mpp-actions{padding:10px 18px 14px;display:flex;gap:6px;}
.mpp-btn-primary{flex:1;padding:10px;background:var(--accent);color:#13161d;border:none;border-radius:10px;font-family:var(--font-display);font-size:11.5px;font-weight:800;cursor:pointer;transition:all .16s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;gap:6px;}
.mpp-btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,249,62,.18);}
.mpp-btn-secondary{padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;color:rgba(255,255,255,.55);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .14s;display:flex;align-items:center;justify-content:center;gap:5px;}
.mpp-btn-secondary:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.8);}
.mpp-mutual-av{width:26px;height:26px;border-radius:50%;overflow:hidden;border:2px solid var(--panel);margin-left:-6px;transition:transform .15s;cursor:pointer;}
.mpp-mutual-av:first-child{margin-left:0;}
.mpp-mutual-av:hover{transform:scale(1.15);z-index:2;}
.mpp-game-row{display:flex;gap:5px;flex-wrap:wrap;}
.mpp-game-chip{padding:5px 10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:8px;font-size:10.5px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:5px;}
/* ── Full Profile Modal — Guilded-inspired two-column ── */
.up-card{display:flex;min-height:500px;max-height:85vh;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03);}
.up-left{width:320px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden;background:rgba(0,0,0,.1);}
.up-left::-webkit-scrollbar{width:4px;}.up-left::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;}
.up-left-banner{height:150px;position:relative;overflow:hidden;flex-shrink:0;}
.up-left-banner img{width:100%;height:100%;object-fit:cover;}
.up-left-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(transparent,rgba(10,12,20,.9));}
.up-left-av-area{padding:0 22px;margin-top:-44px;position:relative;z-index:2;display:flex;align-items:flex-end;gap:14px;flex-shrink:0;}
.up-left-av{width:88px;height:88px;border-radius:50%;overflow:hidden;border:4px solid var(--panel);background:var(--panel2);box-shadow:0 8px 28px rgba(0,0,0,.65);flex-shrink:0;transition:transform .2s cubic-bezier(.22,1,.36,1);cursor:pointer;}
.up-left-av:hover{transform:scale(1.04);}
.up-left-info{padding:12px 22px 0;flex-shrink:0;}
.up-left-name{font-family:var(--font-display);font-size:21px;font-weight:800;color:#fff;line-height:1.15;word-break:break-word;letter-spacing:-.02em;}
.up-left-uname{font-size:12px;color:rgba(255,255,255,.22);font-weight:500;margin-top:4px;}
.up-left-badges{display:flex;flex-wrap:wrap;gap:3px;padding:10px 22px 0;flex-shrink:0;}
.up-left-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 22px 0;flex-shrink:0;}
.up-left-section{padding:12px 22px 0;flex-shrink:0;}
.up-left-section-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.18);margin-bottom:6px;}
.up-left-section-body{font-size:13px;color:rgba(255,255,255,.55);line-height:1.65;}
.up-left-divider{height:1px;background:rgba(255,255,255,.05);margin:14px 22px;}
.up-left-actions{padding:16px 22px;margin-top:auto;flex-shrink:0;}
.up-right{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(255,255,255,.012);}
.up-right-tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.05);padding:0 22px;flex-shrink:0;background:rgba(0,0,0,.04);}
.up-right-tab{padding:15px 18px;font-size:13px;font-weight:600;color:rgba(255,255,255,.28);cursor:pointer;border-bottom:2px solid transparent;transition:all .14s;white-space:nowrap;}
.up-right-tab:hover{color:rgba(255,255,255,.6);background:rgba(255,255,255,.02);}
.up-right-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(255,249,62,.02);}
.up-right-content{flex:1;overflow-y:auto;padding:18px 22px;}
.up-right-content::-webkit-scrollbar{width:4px;}.up-right-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px;}
.up-right-section{margin-bottom:16px;padding:14px 16px;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.04);border-radius:14px;}
.up-right-section-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.18);margin-bottom:10px;}
/* Profile action buttons */
.up-action-msg{flex:1;padding:11px;background:var(--accent);color:#13161d;border:none;border-radius:12px;font-family:var(--font-display);font-size:12.5px;font-weight:800;cursor:pointer;min-width:80px;transition:all .16s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 2px 10px rgba(255,249,62,.12);}
.up-action-msg:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,249,62,.2);}
.up-action-msg:active{transform:translateY(0);}
.up-action-edit{width:100%;padding:11px;background:var(--accent);color:#13161d;border:none;border-radius:12px;font-family:var(--font-display);font-size:13px;font-weight:800;cursor:pointer;transition:all .16s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 2px 10px rgba(255,249,62,.12);}
.up-action-edit:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,249,62,.2);}
.up-action-edit:active{transform:translateY(0);}
.up-action-add{padding:10px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .16s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;gap:6px;}
.up-action-add:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);border-color:rgba(255,255,255,.15);}
.up-action-unfriend{padding:10px 16px;background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.15);border-radius:12px;color:var(--red);font-size:12px;font-weight:600;cursor:pointer;transition:all .16s;}
.up-action-unfriend:hover{background:rgba(248,113,113,.12);}
.up-action-util{flex:1;padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);color:rgba(255,255,255,.4);font-size:11.5px;cursor:pointer;transition:all .14s;font-weight:500;}
.up-action-util:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);}
.up-action-util.blocked{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.06);color:var(--red);}
.up-action-util.blocked:hover{background:rgba(248,113,113,.12);}
.up-action-util.ignored{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06);color:#f59e0b;}
.up-mutual-av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2.5px solid var(--panel);margin-left:-6px;cursor:pointer;transition:transform .16s,box-shadow .16s;}
.up-mutual-av:first-child{margin-left:0;}
.up-mutual-av:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.5);z-index:2;}
.up-social-link{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:600;text-decoration:none;transition:all .16s;border:1px solid transparent;}
.up-social-link:hover{transform:translateY(-1px);filter:brightness(1.15);}
.up-mutual-row{border-radius:8px;transition:background .12s;}
.up-mutual-row:hover{background:rgba(255,255,255,.04);}
/* Focus-visible states */
.up-action-msg:focus-visible,.up-action-edit:focus-visible,.up-action-add:focus-visible,.up-action-unfriend:focus-visible,.up-action-util:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.up-right-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px;}
.mpp-btn-primary:focus-visible,.mpp-btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.up-mutual-av:focus-visible,.up-mutual-row:focus-visible,.up-social-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px;}
/* ── Profile Widgets ── */
.pw-widget{background:rgba(255,255,255,.016);border:1.5px solid rgba(255,255,255,.04);border-radius:16px;padding:16px 18px;transition:all .2s cubic-bezier(.22,1,.36,1);position:relative;margin-bottom:12px;backdrop-filter:blur(4px);}
.pw-widget:last-child{margin-bottom:0;}
.pw-widget:hover{background:rgba(255,255,255,.026);border-color:rgba(255,255,255,.08);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.2);}
.pw-widget-title{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.pw-widget-title svg{opacity:.5;transition:opacity .2s;}
.pw-game-card{display:flex;align-items:center;gap:12px;}
.pw-game-cover{width:56px;height:74px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--panel2);border:1px solid rgba(255,255,255,.06);}
.pw-game-cover img{width:100%;height:100%;object-fit:cover;}
.pw-game-info{flex:1;min-width:0;}
.pw-game-name{font-size:14px;font-weight:700;color:#fff;font-family:var(--font-display);margin-bottom:2px;}
.pw-game-genre{font-size:11px;color:rgba(255,255,255,.35);font-weight:500;}
.pw-bastion-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px;cursor:pointer;transition:all .16s;}
.pw-bastion-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.25);}
.pw-bastion-emblem{width:40px;height:40px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid rgba(255,255,255,.06);}
.pw-bastion-emblem img{width:100%;height:100%;object-fit:cover;}
.pw-bastion-info{flex:1;min-width:0;}
.pw-bastion-name{font-size:13px;font-weight:700;color:#fff;font-family:var(--font-display);}
.pw-bastion-meta{font-size:10.5px;color:rgba(255,255,255,.3);margin-top:1px;}
.pw-join-btn{padding:6px 14px;border-radius:8px;background:var(--accent);color:#000;font-size:11px;font-weight:700;border:none;cursor:pointer;transition:all .14s;font-family:var(--font-display);flex-shrink:0;}
.pw-join-btn:hover{filter:brightness(1.1);transform:scale(1.04);}
.pw-gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;}
.pw-gc-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border-radius:10px;background:transparent;border:none;transition:all .18s cubic-bezier(.22,1,.36,1);cursor:default;position:relative;overflow:hidden;}
.pw-gc-item:hover{transform:translateY(-2px);}
.pw-gc-icon{width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);position:relative;}
.pw-gc-icon img{width:100%;height:100%;border-radius:10px;object-fit:cover;transition:transform .2s;}
.pw-gc-item:hover .pw-gc-icon img{transform:scale(1.05);}
.pw-gc-name{font-size:9px;color:rgba(255,255,255,.45);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:600;padding:0 2px;}
/* Widget config in settings */
.pw-config-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:12px;transition:all .14s;cursor:grab;}
.pw-config-item:hover{background:rgba(255,255,255,.04);}
.pw-config-item .pw-drag{color:rgba(255,255,255,.15);flex-shrink:0;cursor:grab;}
.pw-config-item .pw-cfg-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.pw-config-item .pw-cfg-info{flex:1;min-width:0;}
.pw-config-item .pw-cfg-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.8);}
.pw-config-item .pw-cfg-desc{font-size:11px;color:rgba(255,255,255,.3);margin-top:1px;}
.pw-toggle{position:relative;width:36px;height:20px;border-radius:var(--radius-pill);background:rgba(255,255,255,.1);border:none;cursor:pointer;transition:all .2s;flex-shrink:0;}
.pw-toggle.on{background:var(--accent);}
.pw-toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.pw-toggle.on::after{transform:translateX(16px);}

/* ── Profile Widget Redesign (Discord-style) ── */
.pw-add-widget-modal-overlay{position:fixed;inset:0;background:rgba(4,6,10,.75);backdrop-filter:blur(8px);z-index:9500;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;}
.pw-add-widget-modal{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;width:520px;max-width:90vw;max-height:75vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.6);animation:mppSlideIn .2s cubic-bezier(.22,1,.36,1);}
.pw-add-widget-modal .pwm-header{padding:20px 22px 14px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.pw-add-widget-modal .pwm-header h3{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff;margin-bottom:4px;}
.pw-add-widget-modal .pwm-header p{font-size:12px;color:rgba(255,255,255,.3);}
.pw-add-widget-modal .pwm-search{width:100%;margin-top:10px;padding:8px 12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px;color:#fff;font-family:var(--font-ui);font-size:13px;outline:none;box-sizing:border-box;transition:border-color .15s;}
.pw-add-widget-modal .pwm-search:focus{border-color:rgba(255,249,62,.25);}
.pw-add-widget-modal .pwm-list{flex:1;overflow-y:auto;padding:10px 14px;}
.pw-widget-option{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;cursor:pointer;transition:all .15s;margin-bottom:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);}
.pw-widget-option:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2);}
.pw-widget-option .pwo-preview{width:64px;height:48px;border-radius:10px;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02));display:flex;align-items:center;justify-content:center;font-size:22px;border:1px solid rgba(255,255,255,.06);}
.pw-widget-option .pwo-preview img{width:100%;height:100%;object-fit:cover;}
.pw-widget-option .pwo-info{flex:1;min-width:0;}
.pw-widget-option .pwo-name{font-size:13.5px;font-weight:700;color:#fff;}
.pw-widget-option .pwo-desc{font-size:11px;color:rgba(255,255,255,.3);margin-top:2px;}
.pw-widget-option .pwo-add-btn{width:32px;height:32px;border-radius:50%;background:rgba(62,207,110,.1);border:1px solid rgba(62,207,110,.2);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.pw-widget-option .pwo-add-btn:hover{background:rgba(62,207,110,.2);transform:scale(1.1);}
.pw-widget-option .pwo-added{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);border:1px solid var(--accent-mid);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.pw-widget-option.active{border-color:var(--accent-mid);background:var(--accent-dim);}
/* Games I Like grid on profile card */
.pw-gc-masonry{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.pw-gc-masonry .pw-gc-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s cubic-bezier(.22,1,.36,1);}
.pw-gc-masonry .pw-gc-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35);border-color:rgba(255,255,255,.12);}
.pw-gc-masonry .pw-gc-card img{width:100%;height:100%;object-fit:cover;}
.pw-gc-masonry .pw-gc-card .gc-hover-name{position:absolute;bottom:0;left:0;right:0;padding:6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:9px;font-weight:700;color:#fff;opacity:0;transition:opacity .18s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pw-gc-masonry .pw-gc-card:hover .gc-hover-name{opacity:1;}
.pw-gc-masonry .pw-gc-card .gc-delete-btn{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(248,113,113,.9);border:none;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.pw-gc-masonry .pw-gc-card:hover .gc-delete-btn{opacity:1;}
.pw-gc-add-card{aspect-ratio:3/4;border-radius:10px;border:2px dashed rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all .15s;background:transparent;color:rgba(255,255,255,.25);font-size:10px;font-weight:600;}
.pw-gc-add-card:hover{border-color:rgba(255,249,62,.3);color:var(--accent);background:rgba(255,249,62,.03);}
.pw-gc-add-card svg{width:18px;height:18px;}
/* Favourite game large card */
.pw-fav-large-card{display:flex;gap:14px;padding:12px;background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(245,158,11,.02));border:1px solid rgba(245,158,11,.12);border-radius:14px;transition:all .18s;cursor:default;}
.pw-fav-large-card:hover{border-color:rgba(245,158,11,.25);box-shadow:0 4px 16px rgba(245,158,11,.08);}
.pw-fav-large-card .pfl-cover{width:72px;height:96px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--panel2);border:1px solid rgba(255,255,255,.06);}
.pw-fav-large-card .pfl-cover img{width:100%;height:100%;object-fit:cover;}
.pw-fav-large-card .pfl-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;}
.pw-fav-large-card .pfl-name{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;}
.pw-fav-large-card .pfl-genre{font-size:11px;color:rgba(255,255,255,.35);}
.pw-fav-large-card .pfl-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#f59e0b;background:rgba(245,158,11,.1);padding:3px 8px;border-radius:6px;margin-top:4px;width:fit-content;}
/* Games in rotation carousel */
.pw-rotation-carousel{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none;}
.pw-rotation-carousel::-webkit-scrollbar{display:none;}
.pw-rotation-card{min-width:100px;max-width:120px;flex-shrink:0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);transition:all .2s;cursor:pointer;}
.pw-rotation-card:hover{border-color:rgba(96,165,250,.2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25);}
.pw-rotation-card img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.pw-rotation-card .prc-name{padding:6px 8px;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}

/* ── Sidebar Tooltip Enhancement ── */
.rail-nav-tooltip{position:fixed;left:0;top:0;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:6px 12px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:var(--z-max);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:12px;font-weight:600;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:6px;}
.rail-nav-tooltip.visible{opacity:1;}
.rail-nav-tooltip .rnt-hint{font-size:9px;color:rgba(255,255,255,.25);font-weight:500;padding:1px 5px;background:rgba(255,255,255,.04);border-radius:4px;border:1px solid rgba(255,255,255,.06);margin-left:4px;}
/* Global custom tooltip (replaces browser title) */
.ftz-tooltip{position:fixed;left:0;top:0;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;z-index:var(--z-max);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.45);font-size:12px;font-weight:600;color:rgba(255,255,255,.9);transform:translateY(2px);}
.ftz-tooltip.visible{opacity:1;transform:translateY(0);}
/* Reaction tooltip (Discord-style) */
.ftz-reaction-tip{position:fixed;left:0;top:0;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:var(--z-max);box-shadow:0 8px 28px rgba(0,0,0,.5);max-width:260px;transform:translateY(4px);}
.ftz-reaction-tip.visible{opacity:1;transform:translateY(0);}
.ftz-reaction-tip .rt-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.ftz-reaction-tip .rt-emoji{font-size:22px;line-height:1;}
.ftz-reaction-tip .rt-label{font-size:11px;color:rgba(255,255,255,.35);font-weight:600;}
.ftz-reaction-tip .rt-names{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.5;}
.ftz-reaction-tip .rt-user{color:#fff;}
.ftz-reaction-tip .rt-more{color:var(--accent);font-weight:700;}

/* ── Redesigned Notification Panel ── */
.notif-panel-v2{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:580px;max-width:90vw;max-height:75vh;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;z-index:7000;display:flex;flex-direction:column;animation:mppSlideIn .2s cubic-bezier(.22,1,.36,1);box-shadow:0 24px 64px rgba(0,0,0,.6);}
.notif-panel-v2-overlay{position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(6px);z-index:6999;animation:fadeIn .15s;}
.notif-panel-v2 .npv-header{padding:20px 22px 14px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.notif-panel-v2 .npv-header h3{font-family:var(--font-display);font-size:17px;font-weight:800;flex:1;color:#fff;}
.notif-panel-v2 .npv-tabs{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.04);display:flex;gap:4px;flex-shrink:0;}
.notif-panel-v2 .npv-tab{padding:6px 14px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;color:rgba(255,255,255,.4);cursor:pointer;transition:all .12s;background:transparent;border:none;}
.notif-panel-v2 .npv-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);}
.notif-panel-v2 .npv-tab.active{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-mid);}
.notif-panel-v2 .npv-list{flex:1;overflow-y:auto;padding:8px 10px;}

/* ── Redesigned Pinned Messages Panel ── */
.pins-panel-v2{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:90vw;max-height:70vh;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;z-index:7000;display:flex;flex-direction:column;animation:mppSlideIn .2s cubic-bezier(.22,1,.36,1);box-shadow:0 24px 64px rgba(0,0,0,.6);}
.pins-panel-v2-overlay{position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(6px);z-index:6999;animation:fadeIn .15s;}

/* ── Redesigned Thread Panel ── */
.thread-panel-v2{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:560px;max-width:90vw;max-height:80vh;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:18px;z-index:7000;display:flex;flex-direction:column;animation:mppSlideIn .2s cubic-bezier(.22,1,.36,1);box-shadow:0 24px 64px rgba(0,0,0,.6);}
.thread-panel-v2-overlay{position:fixed;inset:0;background:rgba(4,6,10,.7);backdrop-filter:blur(6px);z-index:6999;animation:fadeIn .15s;}

/* ── Deep Search Media Previews ── */
.asr-media-preview{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.asr-media-preview img,.asr-media-preview video{max-width:120px;max-height:80px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .15s;}
.asr-media-preview img:hover,.asr-media-preview video:hover{border-color:rgba(255,249,62,.2);transform:scale(1.03);}
.asr-file-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;font-size:11px;color:rgba(255,255,255,.5);margin-top:6px;font-weight:600;}
.asr-file-badge svg{opacity:.4;}

/* ── Redesigned Reaction Panel ── */
.reaction-picker-v2{position:fixed;z-index:9500;width:420px;max-height:440px;background:rgba(14,17,24,.98);border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(40px) saturate(150%);animation:pickerSlideIn .2s cubic-bezier(.22,1,.36,1);}
.reaction-picker-v2 .rpv-quick{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap;gap:2px;}
.reaction-picker-v2 .rpv-quick-btn{width:36px;height:36px;border:none;background:transparent;border-radius:10px;font-size:20px;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;}
.reaction-picker-v2 .rpv-quick-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.15);}
.reaction-picker-v2 .rpv-search-wrap{padding:6px 14px;border-bottom:1px solid rgba(255,255,255,.04);}
.reaction-picker-v2 .rpv-search{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;color:#fff;font-family:var(--font-ui);font-size:12.5px;outline:none;box-sizing:border-box;transition:border-color .15s;}
.reaction-picker-v2 .rpv-search:focus{border-color:rgba(255,249,62,.2);}
.reaction-picker-v2 .rpv-categories{padding:6px 14px 4px;display:flex;gap:2px;border-bottom:1px solid rgba(255,255,255,.03);flex-shrink:0;}
.reaction-picker-v2 .rpv-cat-btn{width:30px;height:30px;border:none;background:transparent;border-radius:8px;font-size:14px;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);}
.reaction-picker-v2 .rpv-cat-btn:hover,.reaction-picker-v2 .rpv-cat-btn.active{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);}
.reaction-picker-v2 .rpv-grid{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start;}
.reaction-picker-v2 .rpv-emoji-btn{width:36px;height:36px;border:none;background:transparent;border-radius:10px;font-size:20px;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;}
.reaction-picker-v2 .rpv-emoji-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.15);}
.reaction-picker-v2 .rpv-preview{padding:8px 14px;border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:40px;}
.reaction-picker-v2 .rpv-preview-emoji{font-size:28px;}
.reaction-picker-v2 .rpv-preview-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);}
/* Reworked reaction pills */
.r-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:4px 10px 4px 7px;font-size:13px;cursor:pointer;transition:all .15s;user-select:none;}
.r-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.15);}
.r-pill .r-emoji{font-size:16px;line-height:1;}
.r-pill .r-count{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);min-width:8px;text-align:center;font-variant-numeric:tabular-nums;}
.r-pill.mine{background:var(--accent-dim);border-color:var(--accent-mid);}
.r-pill.mine .r-count{color:var(--accent);}
.r-pill.r-add-btn{background:transparent;border:1px dashed rgba(255,255,255,.1);border-radius:8px;padding:4px 8px;color:rgba(255,255,255,.3);cursor:pointer;transition:all .12s;font-size:14px;}
.r-pill.r-add-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6);transform:none;box-shadow:none;}

/* ── Keyboard Shortcuts Settings ── */
.kbd-settings-grid{display:flex;flex-direction:column;gap:4px;}
.kbd-setting-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:12px;transition:all .12s;}
.kbd-setting-row:hover{background:rgba(255,255,255,.04);}
.kbd-setting-row .ksr-action{flex:1;min-width:0;}
.kbd-setting-row .ksr-action-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);}
.kbd-setting-row .ksr-action-desc{font-size:10.5px;color:rgba(255,255,255,.25);margin-top:1px;}
.kbd-setting-row .ksr-keys{display:flex;gap:4px;align-items:center;}
.kbd-setting-row .ksr-key{padding:4px 10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;font-size:11px;font-weight:700;font-family:monospace;color:rgba(255,255,255,.55);min-width:28px;text-align:center;transition:all .12s;}
.kbd-setting-row .ksr-edit-btn{padding:5px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.4);font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;flex-shrink:0;}
.kbd-setting-row .ksr-edit-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);}
.kbd-capture-overlay{position:fixed;inset:0;background:rgba(4,6,10,.85);backdrop-filter:blur(12px);z-index:9600;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;}
.kbd-capture-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:32px;max-width:400px;width:90%;text-align:center;box-shadow:var(--elev-3);}
.kbd-capture-card h3{font-family:var(--font-display);font-size:16px;font-weight:800;margin-bottom:6px;color:#fff;}
.kbd-capture-card .kcc-desc{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:20px;}
.kbd-capture-card .kcc-keys{display:flex;gap:6px;justify-content:center;align-items:center;min-height:40px;padding:12px;background:rgba(255,255,255,.03);border:2px dashed rgba(255,249,62,.2);border-radius:12px;margin-bottom:16px;}
.kbd-capture-card .kcc-key{padding:6px 14px;background:var(--accent-dim);border:1px solid var(--accent-mid);border-radius:8px;font-size:14px;font-weight:700;font-family:monospace;color:var(--accent);}
.kbd-capture-card .kcc-hint{font-size:11px;color:rgba(255,255,255,.2);margin-bottom:16px;}
.kbd-capture-card .kcc-actions{display:flex;gap:8px;justify-content:center;}

@media(max-width:768px){
  .up-card{flex-direction:column;min-height:auto;}
  .up-left{width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);}
  .up-right{min-height:200px;}
}

/* Profile themes (Radiance+) */
.profile-theme-ring{position:absolute;inset:-3px;border-radius:50%;background:var(--pt-gradient,transparent);z-index:-1;}
.profile-theme-card-border{background:var(--pt-gradient,rgba(255,255,255,.08));padding:2.5px;border-radius:20px;}

/* Transparent PFP support — don't add opaque bg behind transparent avatars */
.ua img,.fa img,.ml-av img,.msg-av-inner img,.mpp-av img,.profile-av-big img,.chat-welcome .w-av img,.ftz-notif-av img,.voice-avatar-ring img{background:transparent!important;}
/* DM sidebar close button — appears on hover */
.friend-item{position:relative;}
.dm-close-btn{display:none;background:none;border:none;color:rgba(255,255,255,.2);cursor:pointer;font-size:14px;width:18px;height:18px;border-radius:4px;align-items:center;justify-content:center;transition:all .12s;line-height:1;padding:0;z-index:2;}
.dm-close-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
.friend-item:hover .dm-close-btn{display:flex;}
.dm-friends-link{transition:background .12s;}
.dm-friends-link:hover{background:rgba(255,255,255,.05)!important;}
/* Ensure avatar containers properly clip & display user images consistently */
.ml-av,.msg-av-inner,.mpp-av,.ftz-notif-av,.chat-welcome .w-av,.voice-avatar-ring{overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ml-av img,.msg-av-inner img,.mpp-av img,.ftz-notif-av img,.chat-welcome .w-av img,.voice-avatar-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

.msg-text.emoji-only img{width:1.4em!important;height:1.4em!important;}
.msg-text.emoji-only{font-size:20px;line-height:1.4;}
img.emoji { height: 1.15em; width: 1.15em; margin: 0 .05em; vertical-align: -0.15em; }

/* ── Mobile hamburger toggle ──── */
.mobile-menu-btn{display:none;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:18px;z-index:20;}
.mobile-menu-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.mobile-back-btn{display:none;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.6);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:16px;z-index:20;}
.mobile-back-btn:hover{background:rgba(255,255,255,.07);color:#fff;}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:8;backdrop-filter:blur(2px);animation:fadeIn .15s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes ftzFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes ftzSlideUp{from{opacity:0;transform:translateY(16px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ── TABLET (max-width: 1024px) ──── */
@media(max-width:1024px){
  .sidebar{width:64px;min-width:64px;}
  .rail-btn{width:40px;height:40px;}
  .rail-bastion{width:40px;height:40px;}
  .rail-bastion .bastion-icon{width:40px;height:40px;}
  .sidebar-nav{padding:4px 6px;gap:2px;}
  .sidebar-header{display:none;}
  .rail-sep{margin:6px auto;width:28px;}
  .sidebar{padding-bottom:60px;}
  .userbar{width:52px!important;padding:0;gap:0;justify-content:center;margin:4px 6px 6px;}
  .userbar .ub-activity-row{display:none!important;}
  .userbar .ua-custom-status-bubble{display:none!important;}
  .ua-clickable{padding:2px;gap:0;justify-content:center;}
  .rail-userbar{padding:0 4px 6px;}
  .rail-ub-activity-row{display:none!important;}
  .rail-ub-info{display:none;}
  .rail-ub-btns{display:none;}
  .rail-ub-container{height:38px;border:none;background:transparent;justify-content:center;}
  .rail-ub-user-row{justify-content:center;padding:0;}
  .rail-ub-clickable{justify-content:center;padding:0;}
  .rail-ub-avatar{width:34px;height:34px;}
  .own-profile-panel{left:60px;}
  .main{border-top-left-radius:14px;}
}

/* ── MOBILE (max-width: 768px) ──── */
/* ── Mobile Bottom Tab Bar ──── */
.mobile-tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--sidebar-ctx,#0e1017);border-top:1px solid rgba(255,255,255,.06);z-index:200;padding:0;padding-bottom:env(safe-area-inset-bottom,0);box-sizing:content-box;}
.mobile-tab-bar-inner{display:flex;align-items:center;justify-content:space-around;height:56px;padding:0 8px;}
.mobile-tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0;cursor:pointer;color:rgba(255,255,255,.35);transition:color .15s;position:relative;-webkit-tap-highlight-color:transparent;min-width:48px;}
.mobile-tab-item.active{color:#fff;}
.mobile-tab-item svg{width:22px;height:22px;transition:color .15s;}
.mobile-tab-item .mtb-label{font-size:9px;font-weight:600;font-family:var(--font-ui);letter-spacing:.02em;}
.mobile-tab-item .mtb-badge{position:absolute;top:2px;right:50%;transform:translateX(14px);min-width:16px;height:16px;border-radius:var(--radius-pill);background:var(--red);color:#fff;font-size:8px;font-weight:800;font-family:var(--font-display);padding:0 4px;line-height:16px;text-align:center;display:none;}
.mobile-tab-item .mtb-dot{position:absolute;top:6px;right:50%;transform:translateX(12px);width:8px;height:8px;border-radius:50%;background:var(--red);display:none;}
.mobile-tab-item .mtb-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;border:2px solid transparent;transition:border-color .15s;}
.mobile-tab-item.active .mtb-avatar{border-color:var(--accent);}
.mobile-tab-item .mtb-avatar img{width:100%;height:100%;object-fit:cover;}

/* ── Mobile Profile/Settings Drawer (from right) ──── */
.mobile-settings-drawer{display:none;position:fixed;right:0;top:0;bottom:0;width:300px;max-width:85vw;background:var(--panel,#161a23);z-index:300;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:-8px 0 40px rgba(0,0,0,.6);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0);}
.mobile-settings-drawer.open{transform:translateX(0);}
.mobile-settings-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:299;backdrop-filter:blur(2px);animation:fadeIn .15s;}
.mobile-settings-overlay.active{display:block;}
.msd-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;cursor:pointer;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;font-family:var(--font-ui);transition:background .12s;-webkit-tap-highlight-color:transparent;}
.msd-item:active{background:rgba(255,255,255,.06);}
.msd-item svg:first-child{flex-shrink:0;color:rgba(255,255,255,.4);}
.msd-sep{height:1px;background:rgba(255,255,255,.05);margin:6px 4px;}

@media(max-width:768px){
  body{flex-direction:column;}
  /* ══════ SIDEBAR RAIL: hidden off-screen, slides in as drawer ══════ */
  .sidebar{position:fixed!important;left:0;top:0;bottom:0;width:56px!important;min-width:56px!important;z-index:301;padding-bottom:0;transform:translateX(-56px);transition:transform .28s cubic-bezier(.22,1,.36,1);border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;overflow-x:hidden;}
  .sidebar.mobile-rail-open{transform:translateX(0);}
  .sidebar-logo-icon{width:40px;height:40px;}
  .sidebar-logo-icon img{width:40px;height:40px;}
  .sidebar-logo{padding:10px 0 6px;}
  .sidebar-nav{padding:4px 0;gap:2px;}
  .rail-btn{width:40px;height:40px;border-radius:14px;}
  .rail-btn svg{width:18px;height:18px;}
  .rail-btn span{display:none;}
  .rail-bastion{width:40px;height:40px;}
  .rail-bastion .bastion-icon{width:40px;height:40px;}
  .rail-sep{width:24px;margin:4px auto;}
  .rail-notif-badge{transform:scale(.85);top:-3px;right:-3px;}
  .rail-userbar{display:none!important;}
  .rail-ub-activity-row{display:none!important;}
  /* ══════ SIDEBAR-CTX: full-width drawer next to rail ══════ */
  .sidebar-ctx{position:fixed!important;left:56px;top:0;bottom:0;width:calc(100vw - 56px)!important;min-width:calc(100vw - 56px)!important;max-width:calc(100vw - 56px)!important;transform:translateX(calc(-100vw));transition:transform .28s cubic-bezier(.22,1,.36,1);z-index:300;box-shadow:8px 0 40px rgba(0,0,0,.6);border-right:none;}
  .sidebar-ctx.mobile-ctx-open{transform:translateX(0);}
  /* ══════ OVERLAY ══════ */
  .mobile-overlay.active{display:block;z-index:290;}
  /* ══════ HIDE DESKTOP ELEMENTS ══════ */
  .userbar{display:none!important;}
  .active-now-sidebar{display:none!important;}
  .tb-search{display:none;}
  .tb-win-controls{display:none!important;}
  /* ══════ SHOW MOBILE ELEMENTS ══════ */
  .mobile-tab-bar{display:block;left:0;}
  .mobile-settings-drawer{display:block;}
  .mobile-menu-btn{display:flex!important;}
  .mobile-back-btn{display:none!important;}
  .tb-nav-controls{display:none!important;}
  /* ══════ MAIN LAYOUT: full-width ══════ */
  .main-wrap{flex:1;min-width:0;min-height:0;width:100%;}
  .main{border-radius:0;border:none;flex-direction:column;}
  .content{border-radius:0;}
  /* ══════ TOPBAR ══════ */
  .topbar{padding:0 12px;gap:8px;height:48px;}
  .tb-onyx-pill{padding:4px 10px 4px 7px;}
  .tb-onyx-pill span:last-child{display:none;}
  /* ══════ HOME ══════ */
  .home-hero{min-height:180px!important;padding:20px!important;}
  .home-hero h1{font-size:22px!important;}
  .hero-knight-bg{opacity:.15!important;right:-40px!important;}
  .hero-joyster-wrap{display:none!important;}
  .joyster-bubble{display:none!important;}
  .home-hero-actions{flex-wrap:wrap;gap:8px!important;}
  .hero-btn{padding:8px 14px!important;font-size:12px!important;}
  .home-feed{padding-bottom:72px;}
  .home-wrap{flex-direction:column;}
  .realm-section{padding:0 16px!important;}
  .realm-section-title{font-size:13px!important;}
  .realm-scroll{gap:10px!important;}
  .realm-card{min-width:200px!important;}
  /* ══════ CHAT ══════ */
  .msg-row{padding:6px 14px;}
  .msg-row.msg-first{padding:10px 14px 6px;}
  .room-topbar{padding:0 12px;gap:8px;}
  .room-topbar .rt-desc{display:none;}
  .room-topbar .rt-sep{display:none;}
  .chat-input-outer{margin-bottom:56px;margin-bottom:calc(56px + env(safe-area-inset-bottom,0));}
  /* ══════ MEMBER LIST: full-screen slide from right ══════ */
  .member-list{position:fixed!important;right:0;top:0;bottom:0;width:100vw!important;min-width:100vw!important;max-width:100vw!important;z-index:300;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:-8px 0 40px rgba(0,0,0,.6);padding-top:48px;border-left:none;}
  .member-list.mobile-members-open{transform:translateX(0);}
  /* ══════ DM USER PANEL: full-screen slide from right ══════ */
  #dm-user-panel{position:fixed!important;right:0!important;top:0!important;bottom:0!important;width:100vw!important;min-width:100vw!important;max-width:100vw!important;z-index:300;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,1,.36,1);}
  #dm-user-panel[style*="display: flex"],#dm-user-panel[style*="display:flex"],#dm-user-panel[style*="display: block"],#dm-user-panel[style*="display:block"]{transform:translateX(0);}
  /* ══════ MINI PROFILE: bottom sheet ══════ */
  .mini-profile-preview{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;width:100%!important;max-width:100%!important;border-radius:18px 18px 0 0!important;max-height:75vh!important;animation:ctxSlideUp .22s cubic-bezier(.22,1,.36,1)!important;z-index:4000;}
  /* ══════ OWN PROFILE PANEL ══════ */
  .own-profile-panel{left:50%!important;transform:translateX(-50%);bottom:68px!important;width:calc(100vw - 24px)!important;max-width:340px;}
  /* ══════ NOTIFICATION PANEL: full width ══════ */
  .notif-panel{width:100vw!important;border-radius:0!important;top:0!important;max-height:100vh!important;right:0!important;left:0!important;}
  /* ══════ PROFILE/SETTINGS VIEW ══════ */
  .profile-wrap{flex-direction:column;}
  .profile-nav{width:100%!important;min-width:100%!important;max-height:44px;overflow:hidden;flex-direction:row;padding:0;border-right:none;border-bottom:1px solid rgba(254,248,61,.04);}
  .profile-nav.mobile-nav-open{max-height:none;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:var(--bg);overflow-y:auto;}
  .profile-nav-section{display:none;}
  .profile-nav-item{margin:0;border-radius:0;padding:11px 16px;white-space:nowrap;}
  .profile-nav:not(.mobile-nav-open){overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .profile-nav:not(.mobile-nav-open)::-webkit-scrollbar{display:none;}
  .profile-nav:not(.mobile-nav-open) .profile-nav-item.active::before{display:none;}
  .settings-panel{padding:0 16px 80px;}
  .settings-row{flex-direction:column;gap:8px;padding:14px;}
  .settings-row-label{width:100%;}
  /* ══════ DISCOVER ══════ */
  .disc-hero{padding:24px 20px;}
  .disc-hero h2{font-size:22px;}
  .uv-header-content{padding:20px;flex-direction:column;align-items:flex-start;gap:12px;}
  /* ══════ ATELIER ══════ */
  .atelier-scroll{padding:0;padding-bottom:72px;}
  .atelier-content-inner{padding:20px 16px 48px!important;}
  /* ══════ BASTION ══════ */
  .bastion-hub-main{padding:16px;}
  .bastion-banner-hero{height:120px;}
  .bastion-banner-hero img{height:120px;}
  .bastion-dropdown{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;border-radius:18px 18px 0 0!important;max-height:70vh;animation:ctxSlideUp .2s cubic-bezier(.22,1,.36,1)!important;}
  /* ══════ POPUPS AS BOTTOM SHEETS ══════ */
  .mention-preview{width:calc(100vw - 24px)!important;max-width:300px;}
  .suggest-panel{left:12px!important;right:12px!important;max-width:none!important;width:auto!important;}
  .chat-picker-base,.emoji-picker-panel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;max-width:100%!important;width:100%!important;border-radius:18px 18px 0 0!important;max-height:70vh!important;animation:ctxSlideUp .22s cubic-bezier(.22,1,.36,1)!important;}
  .ftz-ctx-menu{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;max-width:100%!important;width:100%!important;border-radius:16px 16px 0 0!important;max-height:65vh!important;animation:ctxSlideUp .2s cubic-bezier(.22,1,.36,1)!important;}
  /* ══════ DM LIST ══════ */
  .dm-item{padding:10px 16px!important;gap:12px!important;border-radius:0!important;border-bottom:1px solid rgba(255,255,255,.03);}
  .dm-item .dm-name{font-size:15px!important;}
  .dm-item .dm-preview{font-size:13px!important;}
  /* ══════ BOTTOM PADDING FOR TAB BAR ══════ */
  .profile-main{padding-bottom:72px;}
  .sidebar-ctx .sidebar-scroll{padding-bottom:72px;}
  .discover-scroll{padding-bottom:72px;}
  .view{padding-bottom:0!important;}
  .home-feed,.atelier-scroll,.discover-scroll{padding-bottom:72px;}
  /* ══════ UNSAVED BAR ══════ */
  .unsaved-bar{bottom:calc(env(safe-area-inset-bottom,0) + 12px)!important;min-width:0!important;width:calc(100% - 24px)!important;max-width:420px;left:50%;padding:10px 14px!important;gap:10px!important;border-radius:12px!important;}
  /* ══════ TOAST / VOICE / BANNERS ══════ */
  #toast-container{bottom:80px!important;right:12px!important;left:12px!important;align-items:stretch;}
  #vc-call-bar{padding:0!important;}
  #vc-call-bar>div:nth-child(2){gap:30px!important;padding:20px!important;}
  .page-banner{height:140px;}
}

/* ═══════════════════════════════════════════════════════
   THE FORTIZED GRAND CHRONICLE — Glass + Medieval Desk
   ═══════════════════════════════════════════════════════ */

/* ── Hero button ── */
.hero-btn-chronicle{background:linear-gradient(135deg,#b8860b 0%,#daa520 40%,#ffd700 100%)!important;color:#1a1207!important;box-shadow:0 2px 16px rgba(218,165,32,.35),inset 0 1px 0 rgba(255,255,255,.25)!important;position:relative;overflow:hidden;}
.hero-btn-chronicle::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);animation:chronicle-shimmer 3s infinite;}
.hero-btn-chronicle:hover{background:linear-gradient(135deg,#daa520 0%,#ffd700 40%,#ffe44d 100%)!important;box-shadow:0 6px 28px rgba(218,165,32,.5),inset 0 1px 0 rgba(255,255,255,.3)!important;}
@keyframes chronicle-shimmer{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.chronicle-badge-live{font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:20px;background:rgba(26,18,7,.3);color:#ffe44d;border:1px solid rgba(255,215,0,.3);margin-left:2px;line-height:1;}

/* ── Full-screen overlay (uses canvas color as base) ── */
.chronicle-overlay{position:fixed;inset:0;z-index:var(--z-max);background:var(--canvas-color);display:none;opacity:0;transition:opacity .35s var(--ease-out);}
.chronicle-overlay.open{display:flex;opacity:1;}
.chronicle-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;}

/* ── Top bar — glass + draggable for Electron ── */
.chronicle-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 20px;height:44px;min-height:44px;border-bottom:1px solid var(--glass-border);flex-shrink:0;background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);-webkit-app-region:drag;position:relative;z-index:5;}
.chronicle-topbar-left{display:flex;align-items:center;gap:10px;color:#c4a35a;-webkit-app-region:no-drag;}
.chronicle-topbar-title{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.03em;color:#daa520;}
.chronicle-topbar-chapter{font-size:var(--font-hdr);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-pill);background:rgba(218,165,32,.08);color:#c4a35a;border:1px solid rgba(218,165,32,.12);}
.chronicle-topbar-right{display:flex;align-items:center;gap:12px;-webkit-app-region:no-drag;}
.chronicle-timer{display:flex;align-items:center;gap:6px;font-size:var(--font-sm);font-weight:600;color:#c4a35a;opacity:.7;}
.chronicle-close-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--surface-1);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .15s;}
.chronicle-close-btn:hover{background:var(--state-danger-dim);border-color:rgba(248,113,113,.2);color:var(--red);}
/* Desktop window controls inside Chronicle */
.chronicle-win-controls{display:none;align-items:center;gap:0;margin-left:4px;}
body.is-desktop-app .chronicle-win-controls{display:flex;}

/* ── Intro video ── */
.chronicle-intro{position:absolute;inset:0;z-index:10;background:var(--canvas-color);display:flex;align-items:center;justify-content:center;}
.chronicle-intro.hidden{display:none;}
.chronicle-intro video{width:100%;height:100%;object-fit:cover;background:var(--canvas-color);}
.chronicle-skip-btn{position:absolute;bottom:40px;right:40px;padding:10px 24px;border-radius:var(--radius-sm);background:var(--glass-mid);backdrop-filter:var(--blur-mid);-webkit-backdrop-filter:var(--blur-mid);border:1px solid var(--glass-border);color:#fff;font-family:var(--font-display);font-size:var(--font-md);font-weight:700;cursor:pointer;transition:all .15s;opacity:.7;}
.chronicle-skip-btn:hover{opacity:1;background:var(--glass-light);}

/* ── Body ── */
.chronicle-body{flex:1;overflow:hidden;position:relative;}
.chronicle-body.hidden{display:none;}

/* ── The Desk — dark wood surface over the canvas ── */
.chronicle-desk{display:flex;height:100%;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);position:relative;overflow:hidden;}
/* Subtle warm desk tint */
.chronicle-desk::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 80%, rgba(80,55,25,.06) 0%, transparent 60%),
  repeating-linear-gradient(92deg,transparent,transparent 120px,rgba(100,70,30,.015) 120px,rgba(100,70,30,.015) 121px);
  pointer-events:none;}
/* Candlelight glow */
.chronicle-desk::after{content:"";position:absolute;top:-40px;left:60px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,180,60,.03) 0%,transparent 70%);pointer-events:none;}

/* ── Left: Map area ── */
.chronicle-desk-map{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 24px;overflow-y:auto;min-width:0;}

/* Map — parchment on desk (larger) */
.chronicle-map-wrap{position:relative;max-width:880px;width:100%;border-radius:4px;box-shadow:var(--elev-3),inset 0 0 40px rgba(120,90,40,.04);border:2px solid rgba(120,90,40,.15);overflow:visible;flex-shrink:0;}
.chronicle-map-img{width:100%;display:block;filter:brightness(.92) saturate(.9);}

/* ── Interactive Map Pins ── */
.chronicle-map-pins{position:absolute;inset:0;z-index:2;pointer-events:none;}
.map-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:none;cursor:pointer;padding:0;z-index:3;outline:none;display:flex;align-items:center;justify-content:center;}
.map-pin .map-pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(12,15,22,.6);transition:all .2s var(--ease-out);box-shadow:0 1px 6px rgba(0,0,0,.5);}
.map-pin .map-pin-label{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-family:var(--font-display);font-size:8.5px;font-weight:700;color:#e8d5a8;background:rgba(12,15,22,.8);padding:2px 7px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:.85;transition:opacity .15s,color .15s;backdrop-filter:blur(6px);border:1px solid rgba(120,90,40,.12);letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.map-pin:hover .map-pin-label{opacity:1;color:#ffd700;}
.map-pin .map-pin-pulse{position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid rgba(218,165,32,.4);animation:mapPinPulse 2s ease-out infinite;pointer-events:none;}
@keyframes mapPinPulse{0%{transform:scale(.7);opacity:.8;}100%{transform:scale(1.8);opacity:0;}}
/* Pin states */
.map-pin.pin-active .map-pin-dot{background:#ffd700;border-color:rgba(255,215,0,.6);box-shadow:0 0 10px rgba(218,165,32,.5),0 1px 6px rgba(0,0,0,.5);}
.map-pin.pin-active:hover .map-pin-dot{transform:scale(1.15);box-shadow:0 0 16px rgba(218,165,32,.6);}
.map-pin.pin-unlocked .map-pin-dot{background:#c4a35a;border-color:rgba(196,163,90,.5);}
.map-pin.pin-unlocked:hover .map-pin-dot{transform:scale(1.1);background:#daa520;}
.map-pin.pin-done .map-pin-dot{background:var(--green);border-color:rgba(62,207,110,.4);box-shadow:0 0 6px rgba(62,207,110,.3),0 1px 4px rgba(0,0,0,.4);}
.map-pin.pin-done:hover .map-pin-dot{transform:scale(1.1);}
.map-pin.pin-locked{cursor:not-allowed;}
.map-pin.pin-locked .map-pin-dot{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.08);box-shadow:none;}
.map-pin.pin-main .map-pin-dot{width:18px;height:18px;}
.map-pin.pin-main.pin-active .map-pin-dot{box-shadow:0 0 14px rgba(218,165,32,.6),0 0 28px rgba(218,165,32,.2),0 1px 6px rgba(0,0,0,.5);}
.map-corner{position:absolute;width:24px;height:24px;pointer-events:none;}
.map-corner-tl{top:0;left:0;background:linear-gradient(135deg,rgba(12,15,22,.7) 40%,transparent 41%);}
.map-corner-tr{top:0;right:0;background:linear-gradient(225deg,rgba(12,15,22,.7) 40%,transparent 41%);}
.map-corner-bl{bottom:0;left:0;background:linear-gradient(45deg,rgba(12,15,22,.7) 40%,transparent 41%);}
.map-corner-br{bottom:0;right:0;background:linear-gradient(315deg,rgba(12,15,22,.7) 40%,transparent 41%);}

/* Chapter parchment strip — glass panel */
.chronicle-chapter-parchment{max-width:880px;width:100%;margin-top:16px;padding:16px 20px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--glass-border);}
.chronicle-chapter-label{font-size:var(--font-hdr);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#c4a35a;margin-bottom:4px;}
.chronicle-chapter-title{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em;color:#e8d5a8;margin:0 0 6px;line-height:1.15;}
.chronicle-chapter-desc{font-size:var(--font-sm);line-height:1.55;color:rgba(200,180,140,.5);margin-bottom:14px;}
.chronicle-progress-bar{height:5px;border-radius:4px;background:rgba(120,90,40,.1);overflow:hidden;margin-bottom:5px;}
.chronicle-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#8b6914,#c4a35a);transition:width .6s var(--ease-out);}
.chronicle-progress-label{font-size:var(--font-hdr);color:rgba(200,180,140,.4);font-weight:600;}

/* ── Right: Scroll panel — glass sidebar ── */
.chronicle-scroll-panel{width:380px;flex-shrink:0;display:flex;flex-direction:column;border-left:1px solid var(--glass-border);background:var(--glass-heavy);backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);overflow:hidden;}
.chronicle-scroll-header{padding:14px 20px 12px;font-family:var(--font-display);font-size:14px;font-weight:700;color:#c4a35a;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--glass-border);flex-shrink:0;}
.chronicle-scroll-list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.chronicle-scroll-list::-webkit-scrollbar{width:4px;}
.chronicle-scroll-list::-webkit-scrollbar-thumb{background:rgba(120,90,40,.18);border-radius:4px;}

/* ── Event card ── */
.chron-event{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;transition:all .18s var(--ease-out);position:relative;}
.chron-event:hover{background:var(--surface-2);border-color:var(--glass-border);}
.chron-event.main-event{border-color:rgba(218,165,32,.12);background:rgba(218,165,32,.03);}
.chron-event.main-event::before{content:"MAIN EVENT";position:absolute;top:6px;right:8px;font-size:8px;font-weight:800;letter-spacing:.1em;color:#daa520;background:rgba(218,165,32,.1);padding:2px 7px;border-radius:var(--radius-pill);}
/* Locked event */
.chron-event.locked{opacity:.35;cursor:not-allowed;}
.chron-event.locked:hover{background:transparent;border-color:transparent;}
.chron-event.locked .chron-event-num{background:var(--surface-1);color:rgba(255,255,255,.18);border-color:var(--surface-border);}

.chron-event-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:12px;font-weight:800;flex-shrink:0;background:rgba(120,90,40,.08);color:#c4a35a;border:1px solid rgba(120,90,40,.12);}
.chron-event.completed .chron-event-num{background:var(--state-success-dim);color:var(--green);border-color:rgba(62,207,110,.18);}
.chron-event.active-event .chron-event-num{background:rgba(218,165,32,.12);color:#ffd700;border-color:rgba(218,165,32,.25);box-shadow:0 0 8px rgba(218,165,32,.15);}
.chron-event-body{flex:1;min-width:0;}
.chron-event-title{font-family:var(--font-display);font-size:var(--font-md);font-weight:700;color:#e8d5a8;margin-bottom:2px;line-height:1.2;}
.chron-event.locked .chron-event-title{color:rgba(255,255,255,.22);}
.chron-event-loc{font-size:var(--font-hdr);color:rgba(200,180,140,.4);display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.chron-event-tags{display:flex;flex-wrap:wrap;gap:3px;}
.chron-event-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:var(--radius-pill);background:var(--surface-1);color:rgba(255,255,255,.35);border:1px solid var(--surface-border);}
.chron-event-tag.tag-stealth{background:rgba(139,92,246,.05);color:rgba(167,139,250,.65);border-color:rgba(139,92,246,.08);}
.chron-event-tag.tag-siege{background:rgba(248,113,113,.05);color:rgba(248,113,113,.65);border-color:rgba(248,113,113,.08);}
.chron-event-tag.tag-naval{background:rgba(96,165,250,.05);color:rgba(96,165,250,.65);border-color:rgba(96,165,250,.08);}
.chron-event-tag.tag-economy{background:rgba(250,204,21,.05);color:rgba(250,204,21,.65);border-color:rgba(250,204,21,.08);}
.chron-event-tag.tag-combat{background:rgba(251,146,60,.05);color:rgba(251,146,60,.65);border-color:rgba(251,146,60,.08);}
.chron-event-tag.tag-defense{background:rgba(45,212,191,.05);color:rgba(45,212,191,.65);border-color:rgba(45,212,191,.08);}
.chron-event-tag.tag-cinematic{background:rgba(218,165,32,.05);color:rgba(218,165,32,.65);border-color:rgba(218,165,32,.08);}
.chron-event-lock{font-size:var(--font-hdr);color:rgba(255,255,255,.18);display:flex;align-items:center;gap:4px;margin-top:2px;}

/* ── Event detail — glass over desk ── */
.chronicle-detail{position:absolute;inset:0;top:44px;z-index:5;display:none;flex-direction:column;overflow-y:auto;background:var(--glass-light);backdrop-filter:var(--blur-light);-webkit-backdrop-filter:var(--blur-light);}
.chronicle-detail.open{display:flex;}
.chronicle-detail-back{display:flex;align-items:center;gap:6px;padding:14px 24px;color:#c4a35a;font-family:var(--font-display);font-size:var(--font-md);font-weight:700;background:none;border:none;cursor:pointer;border-bottom:1px solid var(--glass-border);transition:color .15s;}
.chronicle-detail-back:hover{color:#daa520;}
.chronicle-detail-inner{padding:32px;max-width:720px;margin:0 auto;width:100%;}
.chron-detail-header{margin-bottom:28px;}
.chron-detail-num{font-size:11px;font-weight:800;letter-spacing:.12em;color:#c4a35a;margin-bottom:6px;}
.chron-detail-title{font-family:var(--font-display);font-size:30px;font-weight:800;color:#e8d5a8;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px;}
.chron-detail-loc{font-size:var(--font-md);color:rgba(200,180,140,.45);display:flex;align-items:center;gap:6px;margin-bottom:16px;}
.chron-detail-quote{font-family:'Lora',serif;font-size:15px;font-style:italic;color:rgba(196,163,90,.5);line-height:1.5;padding:16px 20px;border-left:3px solid rgba(120,90,40,.2);margin-bottom:24px;background:var(--surface-1);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.chron-detail-section{margin-bottom:24px;}
.chron-detail-section h3{font-family:var(--font-display);font-size:var(--font-md);font-weight:700;color:#c4a35a;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase;}
.chron-detail-section p{font-size:var(--font-md);color:rgba(200,180,140,.5);line-height:1.65;}
.chron-detail-section ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.chron-detail-section ul li{font-size:var(--font-md);color:rgba(200,180,140,.45);padding-left:18px;position:relative;line-height:1.5;}
.chron-detail-section ul li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#c4a35a;}
.chron-detail-phases{display:flex;flex-direction:column;gap:10px;}
.chron-detail-phase{padding:14px 18px;border-radius:var(--radius-sm);background:var(--surface-1);border:1px solid var(--glass-border);}
.chron-detail-phase h4{font-family:var(--font-display);font-size:var(--font-md);font-weight:700;color:#daa520;margin:0 0 6px;}
.chron-detail-phase p{font-size:var(--font-sm);color:rgba(200,180,140,.45);margin:0;line-height:1.5;}
/* ── Event assets (documents, paintings) ── */
.chron-detail-assets{display:flex;gap:12px;flex-wrap:wrap;}
.chron-asset{margin:0;flex:1;min-width:180px;max-width:320px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(120,90,40,.12);background:rgba(0,0,0,.2);box-shadow:var(--elev-1);}
.chron-asset img{width:100%;display:block;filter:brightness(.9);transition:filter .2s,transform .3s;cursor:pointer;}
.chron-asset img:hover{filter:brightness(1);transform:scale(1.02);}
.chron-asset figcaption{padding:8px 12px;font-size:var(--font-xs);color:rgba(200,180,140,.5);font-style:italic;text-align:center;border-top:1px solid rgba(120,90,40,.08);}

.chron-play-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#8b6914,#c4a35a);color:#1a1207;font-family:var(--font-display);font-size:14px;font-weight:800;border:none;cursor:pointer;margin-top:24px;transition:all .18s;letter-spacing:.01em;box-shadow:var(--elev-2);}
.chron-play-btn:hover{background:linear-gradient(135deg,#c4a35a,#daa520);box-shadow:var(--elev-3);}
.chron-play-btn.locked{background:var(--surface-1);color:var(--muted);cursor:not-allowed;border:1px solid var(--surface-border);box-shadow:none;}

/* ── Shop banner — glass ── */
.chronicle-shop-banner{margin:8px 14px 14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-1);border:1px solid var(--glass-border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.chronicle-shop-banner svg{color:#c4a35a;flex-shrink:0;}
.chronicle-shop-banner-text{font-size:11px;color:var(--muted);line-height:1.4;}
.chronicle-shop-banner-text strong{color:#c4a35a;}

/* ── Responsive ── */
@media(max-width:900px){
  .chronicle-desk{flex-direction:column;}
  .chronicle-scroll-panel{width:100%;max-height:45vh;border-left:none;border-top:1px solid var(--glass-border);}
  .chronicle-desk-map{padding:16px;}
}
@media(max-width:600px){
  .chronicle-topbar{padding:0 12px 0 16px;}
  .chronicle-topbar-title{font-size:13px;}
  .chronicle-detail-inner{padding:20px;}
  .chron-detail-title{font-size:22px;}
  .chronicle-skip-btn{bottom:20px;right:20px;}
  .chronicle-scroll-panel{width:100%;}
}

/* ── SMALL PHONE (max-width: 480px) ──── */
@media(max-width:480px){
  .topbar-title{font-size:13px;}
  .disc-hero h2{font-size:18px;}
  .disc-hero p{font-size:13px;}
  .disc-tabs{gap:4px;}
  .disc-tab{padding:6px 12px;font-size:12px;}
  .atel-sb-item{font-size:12px;padding:7px 10px;}
  .msg-code-block{font-size:11.5px;padding:10px 12px;padding-top:26px;}
  .bastion-hub-main{padding:12px;}
  .uv-header{min-height:180px;}
  .uv-header-content{min-height:180px;}
  .mobile-settings-drawer{width:100%;max-width:100vw;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHRONICLE WHITE/BLACK AESTHETIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

.chronicle-topbar{
  background: white;
  border-bottom: 3px solid #000;
  padding: 12px 16px;
}

.chronicle-topbar-left, .chronicle-topbar-title, .chronicle-topbar-chapter,
.chronicle-timer, .chronicle-topbar-right {
  color: #000;
}

.chronicle-topbar-chapter {
  background: transparent;
  border: 2px solid #000;
  color: #000;
}

.chronicle-desk {
  background: white;
  border: none;
}

.chronicle-desk::before, .chronicle-desk::after {
  display: none;
}

.chronicle-desk-map {
  background: white;
  padding: 20px;
}

.chronicle-map-wrap {
  border: 4px solid #000;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
  border-radius: 0;
}

.chronicle-map-img {
  filter: contrast(1.1) brightness(1);
}

.chronicle-chapter-parchment {
  background: white;
  border: 4px solid #000;
  border-radius: 0;
  padding: 20px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
}

.chronicle-chapter-label, .chronicle-chapter-title, .chronicle-chapter-desc {
  color: #000;
  font-family: 'MedievalSharp', cursive;
  font-weight: 700;
}

.chronicle-chapter-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.chronicle-chapter-desc {
  color: #333;
}

.chronicle-progress-bar {
  background: #ddd;
  border: 2px solid #000;
  height: 20px;
  border-radius: 0;
  margin: 12px 0;
}

.chronicle-progress-fill {
  background: #000;
  border-radius: 0;
}

.chronicle-progress-label {
  color: #000;
  font-weight: 700;
  font-size: 13px;
}

.chronicle-scroll-panel {
  background: white;
  border-left: 3px solid #000;
}

.chronicle-scroll-header {
  background: white;
  color: #000;
  border-bottom: 2px solid #000;
  font-family: 'MedievalSharp', cursive;
  font-weight: 700;
}

.chronicle-scroll-list {
  background: white;
  padding: 12px;
}

.chron-event {
  background: white;
  border: 2px solid #000;
  border-radius: 0;
  padding: 12px;
  margin-bottom: 6px;
}

.chron-event:hover {
  background: #f5f5f5;
  border-color: #000;
}

.chron-event-num {
  background: white;
  color: #000;
  border: 2px solid #000;
  font-weight: 700;
}

.chron-event.completed .chron-event-num {
  background: #000;
  color: white;
  border: 2px solid #000;
}

.chron-event-title {
  color: #000;
  font-family: 'MedievalSharp', cursive;
  font-weight: 700;
}

.chron-event-loc {
  color: #666;
  font-size: 12px;
}

.chron-event.locked {
  opacity: 0.5;
}

.chronicle-shop-banner {
  background: white;
  border: 2px solid #000;
  border-radius: 0;
}

.chronicle-shop-banner svg {
  color: #000;
}

.chronicle-shop-banner-text {
  color: #000;
}

.chronicle-skip-btn {
  background: white;
  border: 3px solid #000;
  color: #000;
  font-weight: 700;
  font-family: 'MedievalSharp', cursive;
}

.chron-play-btn {
  background: #000;
  color: white;
  border: 3px solid #000;
  border-radius: 0;
  font-weight: 700;
  font-family: 'MedievalSharp', cursive;
}

.chron-play-btn:hover {
  background: #333;
  border-color: #000;
}

.chron-detail-title {
  color: #000;
  font-family: 'MedievalSharp', cursive;
}

.chron-detail-inner {
  background: white;
  color: #000;
}

.chron-detail-phase {
  background: white;
  border: 2px solid #000;
  border-radius: 0;
}

.chron-detail-phase h4 {
  color: #000;
}

.chron-detail-phase p {
  color: #333;
}

.chronicle-intro {
  background: white;
}

/* Joy Bar Styling */
#chronicle-joy-bar {
  background: #000 !important;
  border: 2px solid #000 !important;
  border-radius: 0 !important;
}

/* Progress text */
#chronicle-progress-text {
  color: #000 !important;
}

/* ════════════════════════════════════════════════════════════════
   ACTIVITY SYSTEM v2 — Multi-Activity UI
   ════════════════════════════════════════════════════════════════ */

/* Activity Card Component - Discord-like polished design */
.activity-card {
  background: linear-gradient(135deg, rgba(62,207,110,.06), rgba(62,207,110,.02));
  border-left: 3px solid var(--green);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  animation: slideIn 0.3s cubic-bezier(.22,1,.36,1);
  transition: all 0.2s cubic-bezier(.22,1,.36,1);
  margin-bottom: 9px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.activity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(62,207,110,.08), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.activity-card:hover {
  transform: translateX(3px);
  background: linear-gradient(135deg, rgba(62,207,110,.1), rgba(62,207,110,.03));
  border-color: rgba(62,207,110,.2);
  box-shadow: 0 4px 12px rgba(62,207,110,.1);
}

.activity-card:hover::before {
  opacity: 1;
}

.activity-card.spotify {
  background: linear-gradient(135deg, rgba(29,185,84,.06), rgba(29,185,84,.02));
  border-left-color: #1DB954;
}

.activity-card.spotify:hover {
  background: linear-gradient(135deg, rgba(29,185,84,.1), rgba(29,185,84,.03));
  border-color: rgba(29,185,84,.2);
  box-shadow: 0 4px 12px rgba(29,185,84,.1);
}

.ac-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(62,207,110,.12), rgba(62,207,110,.04));
  border: 1.5px solid rgba(62,207,110,.2);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.05);
}

.activity-card.spotify .ac-icon {
  background: linear-gradient(135deg, rgba(29,185,84,.12), rgba(29,185,84,.04));
  border-color: rgba(29,185,84,.2);
}

.ac-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.ac-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.ac-detail {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-state {
  font-size: 10px;
  color: rgba(255,255,255,.3);
  margin-top: 1px;
}

.ac-elapsed {
  font-size: 9px;
  color: rgba(62,207,110,.65);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.activity-card.spotify .ac-elapsed {
  color: rgba(29,185,84,.65);
}

/* Activity items for friend lists */
.activity-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.activity-item.secondary {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  margin-top: 2px;
}

/* Activity display sections */
.activities-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activities-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mini profile activities */
.mpp-activities {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mpp-activity-primary {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mpp-activity-secondary {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Joy percent display */
#chronicle-joy-percent {
  color: #000 !important;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL IMPROVEMENTS — Accessibility, Consistency, Polish
   ══════════════════════════════════════════════════════════════ */

/* ── Reduced Motion Support ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Z-Index Layer System ──
   Canonical values defined in :root at top of file:
   --z-dropdown:2000; --z-modal:5000; --z-tooltip:6000;
   --z-overlay:8000; --z-max:9999;
*/

/* ── Focus-Visible for ALL interactive elements ── */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* ── Active states for buttons ── */
.btn-a:active, .btn-g:active, .btn-d:active,
.ui-btn:active, .mpp-btn-primary:active, .mpp-btn-secondary:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}

.rail-btn:active { transform: scale(0.93); }
.rail-bastion:active { transform: scale(0.93); }
.rt-action-btn:active { transform: scale(0.9); }
.tb-actions button:active { transform: scale(0.9); }
.ua-btns button:active { transform: scale(0.9); }
.rail-ub-btns button:active { transform: scale(0.9); }

/* ── Missing Hover Effects ── */
.onyx-pill:hover {
  background: var(--accent-mid);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,249,62,.12);
}

.rp-news-item:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.bastion-quick-actions button:active {
  transform: scale(0.96);
}

/* ── Scrollbar polish ── */
.sidebar-scroll::-webkit-scrollbar,
.active-now-list::-webkit-scrollbar,
.home-feed::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb,
.active-now-list::-webkit-scrollbar-thumb,
.home-feed::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.06);
  border-radius: 100px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.active-now-list::-webkit-scrollbar-thumb:hover,
.home-feed::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.12);
}

/* ── Skeleton loader for async content ── */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  height: 80px;
  border-radius: var(--radius-md);
}

/* ── Improved toast styling ── */
.ftz-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: toastIn 0.3s var(--ease-out), toastOut 0.3s var(--ease-out) forwards;
  animation-delay: 0s, var(--toast-duration, 3s);
  pointer-events: auto;
  max-width: 380px;
  line-height: 1.4;
}

.ftz-toast.success {
  background: linear-gradient(135deg, rgba(62,207,110,.15), rgba(62,207,110,.05));
  color: var(--green);
  border-color: rgba(62,207,110,.2);
}

.ftz-toast.error {
  background: linear-gradient(135deg, rgba(248,113,113,.15), rgba(248,113,113,.05));
  color: var(--red);
  border-color: rgba(248,113,113,.2);
}

.ftz-toast.info {
  background: linear-gradient(135deg, rgba(96,165,250,.15), rgba(96,165,250,.05));
  color: var(--blue);
  border-color: rgba(96,165,250,.2);
}

.ftz-toast.warning {
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.05));
  color: var(--yellow);
  border-color: rgba(245,158,11,.2);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(20px) scale(0.95); }
}

/* ── Improved Modal Overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  animation: modalOverlayIn 0.2s ease;
}

@keyframes modalOverlayIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; }
}

.modal-card {
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  animation: modalCardIn 0.25s var(--ease-out);
  max-width: 92vw;
  max-height: 85vh;
  overflow: hidden;
}

@keyframes modalCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Smooth image loading ── */
img {
  transition: opacity 0.2s ease;
}

/* ── Better selection across dark theme ── */
::selection {
  background: rgba(255,249,62,.25);
  color: #fff;
}

/* ── Improved channel item consistency ── */
.ch-item-2027:active,
.vc-item-2027:active,
.friend-item:active,
.ch-item:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── Message row improvements ── */
.msg-row {
  transition: background 0.12s ease;
}

.msg-row:hover .msg-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.msg-actions {
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.15s var(--ease-out);
  pointer-events: none;
}

/* ── Embed card improvements ── */
.embed-link-card,
.embed-x-card,
.embed-invite-card,
.embed-spotify-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.embed-link-card:hover,
.embed-x-card:hover {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* ── Reaction pill improvements ── */
.r-pill:active {
  transform: scale(0.92);
  transition-duration: 0.06s;
}

/* ── Context menu improvements ── */
.ctx-menu {
  animation: ctxIn 0.12s var(--ease-out);
}

@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: none; }
}

/* ── Notification badge pulse ── */
@keyframes notifBadgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(239,68,68,.5); }
  50% { box-shadow: 0 2px 12px rgba(239,68,68,.7), 0 0 4px rgba(239,68,68,.3); }
}

/* ── Input field improvements ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: rgba(255,249,62,.25) !important;
  box-shadow: 0 0 0 3px rgba(255,249,62,.06);
}

/* ── Mention color consistency using CSS vars ── */
.mention-user { background: var(--state-info-dim); color: var(--blue); }
.mention-user:hover { background: rgba(96,165,250,.22); }
.mention-here { background: var(--state-success-dim); color: var(--green); }
.mention-here:hover { background: rgba(62,207,110,.2); }
.mention-role { background: rgba(167,139,250,.1); color: var(--purple); }
.mention-role:hover { background: rgba(167,139,250,.2); }
.mention-room { background: rgba(167,139,250,.1); color: var(--purple); }
.mention-room:hover { background: rgba(167,139,250,.2); }

/* ── Bot badge using CSS vars ── */
.bot-badge {
  background: var(--state-info-dim);
  color: var(--blue);
  border-color: rgba(96,165,250,.25);
}

/* ── Improved code block ── */
.msg-code-block {
  transition: border-color 0.15s ease;
}

.msg-code-block:hover {
  border-color: rgba(255,255,255,.1);
}

.msg-code-block .code-copy:active {
  transform: scale(0.92);
}

/* ── Loading spinner standardized ── */
.pl-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,249,62,.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Improved spoiler ── */
.msg-spoiler {
  overflow: hidden;
  transition: color 0.3s ease, background 0.3s ease, filter 0.3s ease;
}

/* ── Room topbar depth ── */
.room-topbar {
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* ── Bastion dropdown action active state ── */
.bastion-dropdown .bd-action:active,
.bastion-name-dropdown .bnd-action:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── Member list entry improvements ── */
.ml-entry {
  transition: background 0.12s ease, opacity 0.2s ease;
}

.ml-entry:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── Suggest panel improvements ── */
.suggest-panel .sp-item:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── Consistent link styling ── */
.msg-text a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.12s ease;
}

.msg-text a:hover {
  text-decoration: underline;
  color: #93bbfd;
}

/* ── Profile card section transitions ── */
.up-right-section {
  animation: fadeIn 0.25s ease;
}

/* ── Improved DM friend row ── */
.dm-friend-row:active {
  transform: scale(0.995);
  transition-duration: 0.06s;
}

/* ── Better placeholder styling ── */
::placeholder {
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.4;
}

/* ── Realm card active press state ── */
.realm-card:active {
  transform: translateY(-2px) scale(0.98);
  transition-duration: 0.1s;
}

/* ── Realm friend active press ── */
.realm-friend:active {
  transform: translateY(-1px) scale(0.95);
  transition-duration: 0.1s;
}

/* ── Active now item press ── */
.active-now-item:active {
  transform: scale(0.98);
  transition-duration: 0.06s;
}

/* ── Mini profile preview improvements ── */
.mini-profile-preview {
  animation: mppIn 0.2s var(--ease-out);
}

@keyframes mppIn {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ── Smooth settings transitions ── */
.settings-nav-item {
  transition: background 0.12s ease, color 0.12s ease;
}

.settings-nav-item:active {
  transform: scale(0.97);
  transition-duration: 0.06s;
}

/* ── Chat bar improvements ── */
.chatbar-wrap {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chatbar-wrap:focus-within {
  border-color: rgba(255,249,62,.15);
  box-shadow: 0 0 0 3px rgba(255,249,62,.04);
}

/* ── Emoji/GIF/Sticker picker smooth entry ── */
.chat-picker-base {
  animation: pickerIn 0.2s var(--ease-out);
}

@keyframes pickerIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ── Image hover zoom in messages ── */
.msg-text img:not(.emoji-inline):hover {
  filter: brightness(1.05);
  transition: filter 0.15s ease;
}

/* ── Loading state for async buttons ── */
.btn-loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-left: 6px;
}

/* ── Border radius consistency overrides ── */
.rail-btn:hover { border-radius: var(--radius-lg); }
.rail-btn.active { border-radius: var(--radius-lg); }
.rail-bastion:hover { border-radius: var(--radius-lg); }
.rail-bastion.active { border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES - Reusable patterns for inline style reduction
   ═══════════════════════════════════════════════════════════ */

/* ── Color utility classes ── */
.accent-bg { background: var(--accent-dim); }
.accent-bg-mid { background: var(--accent-mid); }
.accent-border { border: 1px solid rgba(255,249,62,.12); }
.accent-border-strong { border: 1px solid rgba(255,249,62,.25); }
.accent-text { color: var(--accent); }
.accent-text-dim { color: rgba(255,249,62,.7); }

.danger-bg { background: var(--state-danger-dim); }
.danger-border { border: 1px solid rgba(248,113,113,.15); }
.danger-text { color: var(--red); }
.danger-text-dim { color: rgba(248,113,113,.65); }

.info-bg { background: var(--state-info-dim); }
.info-border { border: 1px solid rgba(96,165,250,.2); }
.info-text { color: var(--blue); }

.success-bg { background: var(--state-success-dim); }
.success-border { border: 1px solid rgba(62,207,110,.2); }
.success-text { color: var(--green); }

.warning-bg { background: var(--state-warning-dim); }
.warning-border { border: 1px solid rgba(245,158,11,.2); }
.warning-text { color: var(--yellow); }

/* ── Layout utility classes ── */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-gap-sm { gap: var(--space-xs); }
.flex-gap-md { gap: var(--space-sm); }
.flex-gap-lg { gap: var(--space-md); }

/* ── Badge/Chip utility classes ── */
.ftz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.4;
}
.ftz-badge-accent { background: rgba(255,249,62,.08); color: rgba(255,249,62,.7); border: 1px solid rgba(255,249,62,.12); }
.ftz-badge-danger { background: rgba(248,113,113,.08); color: rgba(248,113,113,.7); border: 1px solid rgba(248,113,113,.15); }
.ftz-badge-info { background: rgba(96,165,250,.08); color: rgba(96,165,250,.7); border: 1px solid rgba(96,165,250,.15); }
.ftz-badge-success { background: rgba(62,207,110,.08); color: rgba(62,207,110,.7); border: 1px solid rgba(62,207,110,.15); }
.ftz-badge-muted { background: rgba(255,255,255,.04); color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.06); }

/* ── Card utility classes ── */
.ftz-card {
  background: var(--surface-1);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ftz-card:hover {
  border-color: var(--surface-border-hover);
  box-shadow: var(--shadow-sm);
}
.ftz-card-accent {
  background: rgba(255,249,62,.03);
  border: 1px solid rgba(255,249,62,.1);
}
.ftz-card-danger {
  background: rgba(248,113,113,.04);
  border: 1px solid rgba(248,113,113,.12);
}
.ftz-card-info {
  background: rgba(96,165,250,.06);
  border: 1px solid rgba(96,165,250,.12);
}

/* ── Alert/Notice utility classes ── */
.ftz-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  line-height: 1.5;
}
.ftz-notice-accent { background: rgba(255,249,62,.04); border: 1px solid rgba(255,249,62,.1); color: rgba(255,249,62,.8); }
.ftz-notice-danger { background: rgba(248,113,113,.04); border: 1px solid rgba(248,113,113,.12); color: rgba(248,113,113,.8); }
.ftz-notice-info { background: rgba(96,165,250,.04); border: 1px solid rgba(96,165,250,.12); color: rgba(96,165,250,.8); }
.ftz-notice-warning { background: rgba(245,158,11,.04); border: 1px solid rgba(245,158,11,.12); color: rgba(245,158,11,.8); }
.ftz-notice-muted { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.5); }

/* ── Button utility classes ── */
.ftz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ftz-btn:active { transform: scale(0.97); }
.ftz-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ftz-btn-accent {
  background: rgba(255,249,62,.08);
  color: rgba(255,249,62,.8);
  border: 1px solid rgba(255,249,62,.15);
}
.ftz-btn-accent:hover { background: rgba(255,249,62,.14); border-color: rgba(255,249,62,.25); }

.ftz-btn-danger {
  background: rgba(248,113,113,.06);
  color: rgba(248,113,113,.7);
  border: 1px solid rgba(248,113,113,.15);
}
.ftz-btn-danger:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.25); }

.ftz-btn-primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.ftz-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,249,62,.2); }

.ftz-btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.06);
}
.ftz-btn-ghost:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.1); }

.ftz-btn-sm { padding: 5px 10px; font-size: var(--font-sm); border-radius: 6px; }
.ftz-btn-xs { padding: 3px 8px; font-size: var(--font-xs); border-radius: 5px; }

/* ── Input utility classes ── */
.ftz-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-md);
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ftz-input:focus {
  border-color: rgba(255,249,62,.2);
  box-shadow: 0 0 0 3px rgba(255,249,62,.05);
}
.ftz-input::placeholder { color: var(--muted); }

.ftz-textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-md);
  font-family: var(--font-ui);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ftz-textarea:focus {
  border-color: rgba(255,249,62,.2);
  box-shadow: 0 0 0 3px rgba(255,249,62,.05);
}

/* ── Status indicators ── */
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-dot-online { background: var(--green); box-shadow: 0 0 6px rgba(62,207,110,.4); }
.status-dot-idle { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.4); }
.status-dot-dnd { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.4); }
.status-dot-offline { background: #6b7280; }

/* ── Missing hover/focus/active states for interactive elements ── */
.mention-room { transition: color 0.12s ease, background 0.12s ease; }
.mention-room:hover { color: rgba(255,249,62,.9); background: rgba(255,249,62,.08); }

.cat-row { transition: background 0.12s ease, color 0.12s ease; }
.cat-row:hover { background: rgba(255,255,255,.03); }

.rail-ub-avatar { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rail-ub-avatar:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.onyx-pill { transition: all 0.12s ease; }
.onyx-pill:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }

.msg-author { transition: color 0.12s ease; }
.msg-author:hover { color: rgba(255,255,255,.95); text-decoration: underline; text-decoration-style: dotted; }

.msg-blur-reveal { transition: background 0.15s ease, border-color 0.15s ease; }
.msg-blur-reveal:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

.s-row { transition: background 0.12s ease; }
.s-row:hover { background: rgba(255,255,255,.04); }
.s-row:active { transform: scale(0.99); }

.emoji-slot .es-del { transition: opacity 0.12s ease, background 0.12s ease; }
.emoji-slot .es-del:hover { opacity: 1; background: rgba(248,113,113,.15); }

.vc-btn { transition: all 0.15s ease; }
.vc-btn:hover { background: rgba(255,255,255,.08); transform: scale(1.05); }
.vc-btn:active { transform: scale(0.95); }

.color-swatch { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.color-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.quiz-opt { transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.quiz-opt:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.quiz-opt:active { transform: scale(0.98); }

.ftz-vp-progress { transition: background 0.12s ease; }
.ftz-vp-progress:hover { background: rgba(255,255,255,.12); }

.ftz-ap-progress { transition: background 0.12s ease; }
.ftz-ap-progress:hover { background: rgba(255,255,255,.12); }

.ftz-embed-gif { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ftz-embed-gif:hover { transform: scale(1.01); box-shadow: var(--shadow-md); }

.ftz-embed[onclick]:hover, .ftz-embed a:hover { opacity: 0.92; }

.ftz-notif-toast { transition: transform 0.15s ease, opacity 0.15s ease; }
.ftz-notif-toast:hover { transform: translateY(-2px); }

.hq-col-header { transition: background 0.12s ease; }
.hq-col-header:hover { background: rgba(255,255,255,.03); }

/* ── Reply bar button improvements ── */
.reply-bar button { transition: all 0.12s ease; }
.reply-bar button:hover { background: rgba(255,255,255,.08); color: var(--text); }
.reply-bar button:active { transform: scale(0.95); }

/* ── Chat input actions ── */
.chat-input-actions button { transition: all 0.12s ease; }
.chat-input-actions button:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* ── Media player hover improvements ── */
.ftz-vp video:hover { cursor: pointer; }
.ftz-vp-vol-track:hover { background: rgba(255,255,255,.12); }
.ftz-ap-vol-track:hover { background: rgba(255,255,255,.12); }

/* ── Sidebar header button ── */
.sidebar-hdr-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.sidebar-hdr-btn:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-hdr-btn:active { transform: scale(0.9); }

/* ── GC action buttons ── */
.gc-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.15s ease;
  border: 1px solid;
}
.gc-btn-default {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
  color: var(--muted-light);
}
.gc-btn-default:hover { background: rgba(255,255,255,.07); }

.gc-btn-accent {
  background: rgba(255,249,62,.06);
  border-color: rgba(255,249,62,.12);
  color: var(--accent);
}
.gc-btn-accent:hover { background: rgba(255,249,62,.1); }

.gc-btn-danger {
  background: rgba(248,113,113,.06);
  border-color: rgba(248,113,113,.15);
  color: var(--red);
}
.gc-btn-danger:hover { background: rgba(248,113,113,.1); }

.gc-kick-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: 6px;
  transition: all 0.15s ease;
  opacity: 0;
}
.ml-entry:hover .gc-kick-btn { opacity: 0.6; }
.gc-kick-btn:hover { color: var(--red) !important; opacity: 1 !important; background: rgba(248,113,113,.08); }

/* ── Search input with icon ── */
.ftz-search-wrap {
  position: relative;
}
.ftz-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.ftz-search-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 7px 12px 7px 30px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease;
}
.ftz-search-input:focus { border-color: rgba(255,249,62,.25); }
.ftz-search-input::placeholder { color: var(--muted); }

/* ── General input focus behavior (replaces inline onfocus/onblur) ── */
input[style*="background:rgba(255,255,255,.04)"]:focus,
input[style*="background: rgba(255,255,255,.04)"]:focus,
textarea[style*="background:rgba(255,255,255,.04)"]:focus,
textarea[style*="background: rgba(255,255,255,.04)"]:focus {
  border-color: rgba(255,249,62,.25) !important;
}
input[style*="background:rgba(255,255,255,.03)"]:focus,
textarea[style*="background:rgba(255,255,255,.03)"]:focus {
  border-color: rgba(255,249,62,.2) !important;
}
input[style*="background:rgba(248,113,113"]:focus {
  border-color: rgba(248,113,113,.25) !important;
}
input.settings-input:focus {
  border-color: rgba(255,249,62,.25) !important;
}

/* ── General button hover for common inline-styled buttons ── */
button[style*="transition:all .15s"]:hover,
button[style*="transition: all .15s"]:hover,
button[style*="transition:all .18s"]:hover,
button[style*="transition: all .18s"]:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
button[style*="transition:all .15s"]:active,
button[style*="transition: all .15s"]:active,
button[style*="transition:all .18s"]:active,
button[style*="transition: all .18s"]:active {
  transform: scale(0.97);
}

/* ── Common inline-styled button hover states (replaces onmouseenter/onmouseleave) ── */
/* White bg buttons */
button[style*="background:rgba(255,255,255,.04)"]:hover { background: rgba(255,255,255,.07) !important; }
button[style*="background:rgba(255,255,255,.05)"]:hover { background: rgba(255,255,255,.08) !important; }
button[style*="background:rgba(255,255,255,.03)"]:hover { background: rgba(255,255,255,.06) !important; }

/* Accent bg buttons */
button[style*="background:rgba(255,249,62,.06)"]:hover { background: rgba(255,249,62,.1) !important; }
button[style*="background:rgba(255,249,62,.08)"]:hover { background: rgba(255,249,62,.12) !important; }

/* Danger bg buttons */
button[style*="background:rgba(248,113,113,.06)"]:hover { background: rgba(248,113,113,.1) !important; }
button[style*="background:rgba(248,113,113,.08)"]:hover { background: rgba(248,113,113,.12) !important; }

/* Info bg buttons */
button[style*="background:rgba(96,165,250,.06)"]:hover { background: rgba(96,165,250,.1) !important; }
button[style*="background:rgba(96,165,250,.1)"]:hover { background: rgba(96,165,250,.15) !important; }

/* Div-based clickable cards/items */
div[style*="cursor:pointer"][style*="transition"]:hover { opacity: 0.9; }

/* Cards/items with border-color transition */
div[style*="transition"][style*="border"]:hover,
label[style*="transition"][style*="border"]:hover {
  border-color: rgba(255,255,255,.12) !important;
}

/* Items with scale transform on hover */
[style*="cursor:pointer"][style*="transition"]:active {
  transform: scale(0.98) !important;
}

/* ── Hover-lift effect for buttons/cards ── */
.hover-lift { transition: all 0.15s ease; }
.hover-lift:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hover-lift:active { transform: translateY(0) scale(0.98); }

/* Primary accent buttons with box-shadow automatically get hover-lift */
button[style*="background:var(--accent)"]:hover,
button[style*="background: var(--accent)"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button[style*="background:var(--accent)"]:active,
button[style*="background: var(--accent)"]:active {
  transform: scale(0.98);
}

/* ── Hover-bg for transparent interactive items ── */
.hover-bg { transition: background 0.15s ease; }
.hover-bg:hover { background: rgba(255,255,255,.07); }

.hover-bg-accent { transition: background 0.15s ease; }
.hover-bg-accent:hover { background: rgba(255,249,62,.1); }

.hover-bg-danger { transition: background 0.15s ease; }
.hover-bg-danger:hover { background: rgba(248,113,113,.1); }

/* ── Icon button (transparent bg, muted color, hover to white) ── */
.icon-btn-muted {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.icon-btn-muted:hover { color: #fff; }

/* ── Game card hover ── */
.game-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.15) !important; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.game-card-active:hover { border-color: var(--accent) !important; }

/* ── Delete X button ── */
.ftz-delete-x {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  opacity: 0.4;
  transition: opacity 0.15s ease, color 0.15s ease;
  line-height: 1;
}
.ftz-delete-x:hover { opacity: 1; color: var(--red); }

/* ── Divider utility ── */
.ftz-divider { height: 1px; background: var(--surface-border); margin: var(--space-md) 0; }
.ftz-divider-sm { height: 1px; background: var(--surface-border); margin: var(--space-sm) 0; }

/* ── Text utilities ── */
.text-muted { color: var(--muted); }
.text-muted-light { color: var(--muted-light); }
.text-sm { font-size: var(--font-sm); }
.text-xs { font-size: var(--font-xs); }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Empty state utility ── */
.ftz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 8px;
}
.ftz-empty-icon { font-size: 36px; opacity: 0.4; margin-bottom: 4px; }
.ftz-empty-title { font-size: var(--font-lg); font-weight: 700; color: rgba(255,255,255,.6); }
.ftz-empty-text { font-size: var(--font-md); color: var(--muted); max-width: 300px; line-height: 1.5; }

/* ── Pulse animation for live indicators ── */
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.live-pulse { animation: livePulse 2s ease-in-out infinite; }

/* ── Slide-in animations for panels ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.anim-slide-right { animation: slideInRight 0.2s var(--ease-out); }
.anim-slide-left { animation: slideInLeft 0.2s var(--ease-out); }
.anim-slide-up { animation: slideInUp 0.2s var(--ease-out); }

/* ── Context menu improvements ── */
.ctx-menu {
  animation: ctxMenuIn 0.12s var(--ease-out);
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ── Skeleton shimmer improvements ── */
.skeleton-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}
.skeleton-card .skeleton-banner { height: 120px; border-radius: 0; }
.skeleton-card .skeleton-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 8px; }

/* ── Profile loading skeleton ── */
.profile-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
}
.profile-skeleton .skeleton-avatar-lg { width: 80px; height: 80px; border-radius: 50%; }
.profile-skeleton .skeleton-name { width: 120px; height: 18px; border-radius: 6px; }
.profile-skeleton .skeleton-bio { width: 200px; height: 12px; border-radius: 4px; }
.profile-skeleton .skeleton-detail { width: 160px; height: 12px; border-radius: 4px; }

/* ── Settings panel improvements ── */
.settings-section-title {
  font-family: var(--font-display);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* ── Notification dot ── */
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(248,113,113,.4);
}

/* ── Typing indicator animation ── */
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
.typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-light);
  display: inline-block;
}
.typing-dot:nth-child(1) { animation: typingBounce 1.4s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation: typingBounce 1.4s ease-in-out 0.15s infinite; }
.typing-dot:nth-child(3) { animation: typingBounce 1.4s ease-in-out 0.3s infinite; }

/* ── Improved member list items ── */
.member-item { transition: background 0.12s ease; }
.member-item:hover { background: rgba(255,255,255,.03); }

/* ── DM friend row improvements ── */
.dm-friend-row { transition: all 0.18s cubic-bezier(.22,1,.36,1); }
.dm-friend-row:hover { background: rgba(255,255,255,.025) !important; border-color: rgba(255,255,255,.05) !important; }
.dm-friend-row:active { transform: scale(0.99); }

/* ── Channel list improvements ── */
.ch-item { transition: background 0.12s ease, color 0.12s ease; }
.ch-item:active { transform: scale(0.99); }

/* ── Improved code blocks ── */
.msg-text pre {
  border: 1px solid var(--surface-border);
  transition: border-color 0.15s ease;
}
.msg-text pre:hover {
  border-color: var(--surface-border-hover);
}

/* ── Improved link appearance in messages ── */
.msg-text a:not(.mention) {
  transition: color 0.12s ease;
}
.msg-text a:not(.mention):hover {
  text-decoration: underline;
}

/* ── Tab bar improvements ── */
.tab-bar-item { transition: all 0.12s ease; }
.tab-bar-item:active { transform: scale(0.96); }

/* ── Image attachment improvements ── */
.msg-attachment-img {
  transition: filter 0.15s ease, transform 0.15s ease;
  border-radius: var(--radius-sm);
}
.msg-attachment-img:hover {
  filter: brightness(1.05);
  cursor: zoom-in;
}

/* ── Scroll to bottom button ── */
.scroll-bottom-btn {
  transition: all 0.15s ease;
}
.scroll-bottom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.scroll-bottom-btn:active {
  transform: scale(0.95);
}

/* ── Progress bar utility ── */
.ftz-progress {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ftz-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* ── Confirmation modal ── */
.ftz-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay, 5000);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.ftz-confirm-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalCardIn 0.2s var(--ease-out);
}
.ftz-confirm-title {
  font-family: var(--font-display);
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.ftz-confirm-text {
  font-size: var(--font-md);
  color: var(--muted-light);
  line-height: 1.5;
  margin-bottom: 20px;
}
.ftz-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Close button (modal X buttons) ── */
.ftz-close-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  cursor: pointer;
  font-size: 20px;
  padding: 4px;
  line-height: 1;
  transition: color .15s;
}
.ftz-close-btn:hover { color: rgba(255,255,255,.6); }
.ftz-close-btn:active { color: rgba(255,255,255,.8); }

/* ── Emoji cells (picker grid items) — corporate-clean ──────── */
.emoji-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 3px;
  border-radius: 8px;
  overflow: hidden;
  transition: background .12s ease;
}
.emoji-cell:hover { background: rgba(255,255,255,.06); }
.emoji-cell:active { background: rgba(255,255,255,.1); }
.emoji-cell img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  pointer-events: none;
  transition: transform .12s ease;
}
.emoji-cell:hover img { transform: scale(1.12); }
/* Rich contenteditable edit input — renders emojis inline, Discord-style. */
.edit-rich-input:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.3);pointer-events:none;}
.edit-rich-input .rci-emoji{width:1.3em;height:1.3em;object-fit:contain;vertical-align:-0.25em;display:inline-block;}
/* Native-text unicode cell — no <img>, no network request. Dramatically
   faster to render than thousands of Twemoji SVGs. */
.emoji-cell-unicode { aspect-ratio: 1; }
.emoji-cell-glyph {
  font-size: 24px;
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
  pointer-events: none;
  transition: transform .12s ease;
  user-select: none;
}
.emoji-cell-unicode:hover .emoji-cell-glyph { transform: scale(1.18); }
.emoji-fav-star {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 10px;
  line-height: 1;
  color: var(--accent, #fff93e);
  text-shadow: 0 0 4px rgba(255,249,62,.6);
  pointer-events: none;
}

/* ── Section headers + grid layout ── */
.epp-section {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(20,20,22,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.48);
  padding: 10px 8px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,.02);
}
.epp-section-grid {
  display: grid;
  gap: 2px;
  padding: 4px 4px 10px;
  /* Discord-style: skip painting sections that aren't in view, letting the
     browser lay out slots without actually rendering 1000+ cells at once.
     Massively reduces first-paint cost for the emoji picker. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 240px;
}
.epp-section-grid-tight {
  gap: 0;
  padding: 2px 4px 8px;
}
.epp-section-grid-tight .emoji-cell-custom { padding: 2px; border-radius: 6px; }
.epp-section-grid-tight .emoji-cell-custom img { width: 100%; height: 100%; }
.epp-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 14px 10px;
  color: rgba(255,255,255,.35);
  font-size: 11.5px;
}
.epp-lock {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,249,62,.9);
  background: rgba(255,249,62,.08);
  border: 1px solid rgba(255,249,62,.18);
  border-radius: 4px;
}
.emoji-cell-custom {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  transition: background .12s ease;
}
.emoji-cell-custom:hover { background: rgba(255,255,255,.06); }
.emoji-cell-custom:active { background: rgba(255,255,255,.1); }
#emoji-picker.epp-searching .epp-sidebar { display: none !important; }

/* ── Emoji upload add button ── */
.emoji-add-btn {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(255,255,255,.3);
  border: 1.5px dashed rgba(255,255,255,.1);
  transition: all .12s;
  background: none;
}
.emoji-add-btn:hover { border-color: rgba(255,249,62,.3); color: var(--accent); }

/* ── Report reason label ── */
.report-reason-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1.5px solid rgba(255,255,255,.06);
  border-radius: 11px;
  cursor: pointer;
  transition: all .12s;
}
.report-reason-label:hover { border-color: rgba(248,113,113,.15); background: rgba(248,113,113,.03); }
.report-reason-label:has(input:checked) { border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.06); }

/* ── Report submit button ── */
.report-submit-btn {
  flex: 1;
  background: rgba(248,113,113,.12);
  color: var(--red);
  border: 1.5px solid rgba(248,113,113,.2);
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
}
.report-submit-btn:hover { background: rgba(248,113,113,.2); }
.report-submit-btn:active { transform: scale(0.97); }

/* ── Game picker item ── */
.game-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s;
}
.game-picker-item:hover { border-color: var(--accent); }
.game-picker-item:active { transform: scale(0.98); }

/* ── Ignore duration option ── */
.ig-opt-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(255,255,255,.03);
  border: 1.5px solid rgba(255,255,255,.07);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  font-size: 13.5px;
  color: rgba(255,255,255,.75);
}
.ig-opt-item:hover { border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.05); }
.ig-opt-item:active { transform: scale(0.98); }

/* ── Appearance theme card hover ── */
.appearance-card {
  overflow: hidden;
  cursor: pointer;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.appearance-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }

/* ── Bot permission label hover ── */
.bot-perm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .12s;
}
.bot-perm-label:hover { border-color: rgba(167,139,250,.2); }
.bot-perm-label:has(input:checked) { border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.04); }

/* ── Apply style button (display name modal) ── */
.ftz-btn-apply {
  background: var(--accent);
  color: var(--rail);
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  cursor: pointer;
  transition: all .12s;
}
.ftz-btn-apply:hover { filter: brightness(1.1); }
.ftz-btn-apply:active { transform: scale(0.97); }

/* ── Invite modal buttons ── */
.invite-accept-btn {
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s;
}
.invite-accept-btn:hover { filter: brightness(1.05); }
.invite-accept-btn:active { transform: scale(0.97); }

.invite-decline-btn {
  background: transparent;
  color: var(--muted-light);
  border: 1px solid rgba(255,255,255,.1);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
}
.invite-decline-btn:hover { border-color: rgba(255,249,62,.2); color: #fff; }
.invite-decline-btn:active { transform: scale(0.97); }

/* ── Cancel button (generic) ── */
.ftz-cancel-btn {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: rgba(255,255,255,.45);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.ftz-cancel-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }

/* ── Friend message button ── */
.friend-msg-btn {
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  display: flex;
  align-items: center;
  gap: 5px;
}
.friend-msg-btn:hover {
  border-color: rgba(255,249,62,.35);
  color: var(--accent);
  background: rgba(255,249,62,.04);
  box-shadow: 0 0 12px rgba(255,249,62,.08);
}

/* ── System message delete button ── */
.msg-sys-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(248,113,113,.4);
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s, color .15s;
  margin-left: 4px;
  display: flex;
  align-items: center;
}
.msg-row:hover .msg-sys-delete { opacity: 1; }
.msg-sys-delete:hover { color: rgba(248,113,113,.8); }

/* ── Warning acknowledge button ── */
.warning-ack-btn {
  padding: 12px 48px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: var(--rail);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  box-shadow: 0 0 20px rgba(255,249,62,.2);
}
.warning-ack-btn:hover {
  opacity: .85;
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(255,249,62,.35);
}

/* ── Reset theme button ── */
.reset-theme-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.4);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
}
.reset-theme-btn:hover { border-color: rgba(248,113,113,.2); color: rgba(248,113,113,.6); }

/* ── Emoji insert button (small accent) ── */
.emoji-insert-btn {
  background: rgba(255,249,62,.1);
  border: 1px solid rgba(255,249,62,.2);
  color: rgba(255,249,62,.7);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .12s;
}
.emoji-insert-btn:hover { background: rgba(255,249,62,.15); border-color: rgba(255,249,62,.3); color: rgba(255,249,62,.9); }

/* ── Quick action card (settings about page) ── */
.quick-action-card {
  text-decoration: none;
  padding: 20px;
  border-radius: 18px;
  transition: all .2s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}
.quick-action-card:hover { transform: translateY(-2px); }

/* ── Legal/link row ── */
.legal-link-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  text-decoration: none;
  transition: all .18s cubic-bezier(.22,1,.36,1);
  cursor: pointer;
}
.legal-link-row:hover { transform: translateY(-1px); }

/* ── Game collection item (profile) ── */
.game-col-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 11px;
  cursor: default;
  transition: all .14s;
}
.game-col-item:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }

/* ── Add widget button ── */
.add-widget-btn {
  padding: 8px 20px;
  background: rgba(255,249,62,.06);
  border: 1.5px solid rgba(255,249,62,.12);
  border-radius: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.add-widget-btn:hover { background: rgba(255,249,62,.1); border-color: rgba(255,249,62,.2); }
.add-widget-btn:active { transform: scale(0.97); }

/* ── Preset theme swatch ── */
.preset-theme-swatch {
  cursor: pointer;
  padding: 14px;
  border-radius: 12px;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.preset-theme-swatch:hover { border-color: rgba(255,255,255,.15) !important; }

/* ── Admin exit button ── */
.admin-exit-btn {
  background: var(--accent-dim);
  border: 1px solid var(--accent-mid);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  letter-spacing: .02em;
  opacity: .6;
}
.admin-exit-btn:hover { opacity: 1; }

/* ── Admin sync button ── */
.admin-sync-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.6);
  font-size: 12.5px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: all .15s;
}
.admin-sync-btn:hover { background: rgba(255,255,255,.1); }

/* ── Quiz option button ── */
.quiz-opt-btn {
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,.015);
  color: var(--muted-light);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.quiz-opt-btn:hover { border-color: rgba(255,249,62,.25); background: rgba(255,249,62,.03); }

/* ── Begin verification button ── */
.verify-begin-btn {
  padding: 14px 36px;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  color: var(--rail);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 0 24px rgba(255,249,62,.2);
}
.verify-begin-btn:hover { box-shadow: 0 0 36px rgba(255,249,62,.35); transform: translateY(-1px); }

/* ── AI feedback buttons ── */
.ai-fb-correct {
  padding: 6px 14px;
  background: rgba(62,207,110,.08);
  border: 1px solid rgba(62,207,110,.2);
  border-radius: 8px;
  color: var(--green);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ai-fb-correct:hover { background: rgba(62,207,110,.15); }

/* ── Game stop button ── */
.game-stop-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.game-stop-btn:hover { border-color: rgba(248,113,113,.3); color: var(--red); }

/* ── Game list item ── */
.game-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all .15s;
}
.game-list-item:hover { filter: brightness(1.05); }

/* ── Small icon button (game visibility/remove) ── */
.icon-btn-sm {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  border: 1px solid;
}
.icon-btn-sm:hover { filter: brightness(1.3); }

/* ── Detected game item ── */
.detected-game-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  transition: all .15s;
  background: rgba(255,255,255,.02);
}
.detected-game-item:hover { border-color: rgba(62,207,110,.25); background: rgba(62,207,110,.04); }

/* ── Game search result item ── */
.game-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.game-search-item:hover { background: rgba(255,255,255,.04); }

/* ── Widget remove button ── */
.widget-remove-btn {
  background: none;
  border: none;
  color: rgba(248,113,113,.5);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all .12s;
  display: flex;
  align-items: center;
}
.widget-remove-btn:hover { color: var(--red); background: rgba(248,113,113,.1); }

/* ── Widget add button (settings variant) ── */
.widget-add-btn {
  padding: 8px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.7);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 7px;
}
.widget-add-btn:hover { border-color: rgba(255,249,62,.25); color: var(--accent); background: rgba(255,249,62,.04); }

/* ── GIF back button ── */
.gif-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all .15s;
}
.gif-back-btn:hover { color: #fff; background: rgba(255,255,255,.06); }

/* ── Sticker upload button ── */
.sticker-upload-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  font-size: 10px;
  padding: 3px 8px;
  transition: all .12s;
}
.sticker-upload-btn:hover { border-color: rgba(255,249,62,.3); color: var(--accent); }

/* ── Status preset chip ── */
.cloud-preset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.cloud-preset:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.06); }

/* ── Status picker close button ── */
.sp-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.sp-close-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

/* ── Widget panel card ── */
.pw-widget-card {
  transition: all .2s;
  cursor: pointer;
}
.pw-widget-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; }

/* ── Poll change vote button ── */
.poll-unvote-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
}
.poll-unvote-btn:hover { border-color: rgba(255,255,255,.15); }

/* ── Add poll option button ── */
.poll-add-opt-btn {
  background: none;
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 8px;
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 16px;
}
.poll-add-opt-btn:hover { border-color: var(--accent-mid); color: var(--accent); }

/* ── Shop item card hover ── */
.shop-item-card { transition: all .2s cubic-bezier(.22,1,.36,1); }
.shop-item-card:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ── Status mode option ── */
.sp-mode-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}
.sp-mode-opt:not(.sel):hover { border-color: rgba(254,248,61,.15) !important; background: rgba(254,248,61,.03) !important; }
.sp-mode-opt.sel { border-color: rgba(254,248,61,.2); background: rgba(254,248,61,.04); }

/* ── Status emoji button ── */
.sp-emoji-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.sp-emoji-btn:hover { border-color: rgba(254,248,61,.2); background: rgba(254,248,61,.04); }

/* ── Section label (small uppercase) ── */
.ftz-section-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.ftz-section-label-accent { color: rgba(254,248,61,.4); }
.ftz-section-label-muted { color: rgba(255,255,255,.2); }
.ftz-section-label-danger { color: rgba(248,113,113,.45); }

/* ── Heading display (large bold) ── */
.ftz-heading {
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
}
.ftz-heading-sm { font-size: 13.5px; }
.ftz-heading-md { font-size: 17px; }
.ftz-heading-lg { font-size: 19px; }
.ftz-heading-xl { font-size: 24px; }

/* ── Skeleton shimmer for loading placeholders ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 12px; border-radius: 4px; }
.skeleton-avatar { border-radius: 50%; }
.skeleton-block { border-radius: var(--radius-md); }

/* ── Focus-visible ring for keyboard navigation ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(255,249,62,.4);
  outline-offset: 2px;
}

/* ── Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Utility Classes for Common Patterns ── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.text-nowrap { white-space: nowrap; }
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.hidden-visually { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* ── Simple modal (gift/wishlist/trade) ── */
.simple-modal-wrap { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:sm-fade .15s ease-out; }
@keyframes sm-fade { from{opacity:0;} to{opacity:1;} }
.simple-modal-card { background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;max-width:440px;width:92%;max-height:86vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5); }
.simple-modal-close { position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:4px 8px;border-radius:6px; }
.simple-modal-close:hover { color:#fff;background:rgba(255,255,255,.08); }
.gift-modal h3, .wl-modal h3, .trade-modal h3 { font-family:var(--font-display);font-size:18px;font-weight:900;margin:0 0 14px;color:#fff; }
.gift-modal .gift-price, .gift-label { font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; }
.gift-input { width:100%;padding:9px 12px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:var(--font-ui);margin-bottom:12px; }
.gift-input:focus { outline:none;border-color:rgba(255,249,62,.25); }
.gift-actions { display:flex;gap:8px;justify-content:flex-end;margin-top:12px; }
.wl-hdr { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.wl-privacy label { font-size:11px;color:var(--muted);cursor:pointer; }
.wl-items { display:flex;flex-direction:column;gap:8px; }
.wl-card { display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:8px; }
.wl-name { flex:1;font-size:13px;font-weight:600;color:#fff; }
.wl-price { font-size:12px;color:var(--accent);font-weight:700;margin-right:8px; }
.wl-gift-btn, .wl-rm-btn { padding:5px 10px;background:rgba(255,249,62,.08);border:1px solid rgba(255,249,62,.18);border-radius:6px;color:var(--accent);font-size:10.5px;font-weight:700;cursor:pointer; }
.wl-rm-btn { background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.18);color:var(--red); }
.trade-note { font-size:11px;color:var(--muted);padding:8px 10px;background:rgba(255,249,62,.04);border-left:2px solid var(--accent);margin:8px 0;border-radius:4px; }
/* Shop item quick actions (wishlist/gift/list) */
.sic-quick{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s;z-index:2;}
.shop-item-card:hover .sic-quick{opacity:1;}
.sic-qb{width:24px;height:24px;border-radius:7px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:all .12s;padding:0;}
.sic-qb:hover{background:rgba(255,249,62,.12);border-color:rgba(255,249,62,.3);color:var(--accent);}
.sic-qb.on{background:rgba(255,249,62,.18);border-color:rgba(255,249,62,.35);color:var(--accent);}

/* ── Homepage 2.0 layout ─────────────────────────────────────────── */

/* Who's Online Today — clean chips, no cards */
.home-friends-online{padding:4px 28px 2px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.home-online-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:var(--radius-pill);transition:background .15s;max-width:220px;}
.home-online-chip:hover{background:rgba(255,255,255,.04);}
.hoc-av-wrap{position:relative;width:34px;height:34px;flex-shrink:0;}
.hoc-av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--panel2);display:block;}
.hoc-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--bg);}
.hoc-name{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* What are People Buying — rectangular card containing 6 item sub-cards */
.home-buying-card{margin:0 28px;}
.home-buying-inner{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
@media (max-width:1200px){.home-buying-inner{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:720px){.home-buying-inner{grid-template-columns:repeat(2,minmax(0,1fr));}}
.home-buy-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:10px 10px 12px;cursor:pointer;transition:all .15s;min-width:0;}
.home-buy-card:hover{background:rgba(255,249,62,.04);border-color:rgba(255,249,62,.16);transform:translateY(-1px);}
.hbc-img{aspect-ratio:1/1;background:linear-gradient(180deg,#2a2f3e 0%,#1b1e2b 100%);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.hbc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.hbc-name{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;}
.hbc-price{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--accent);}
.hbc-owned{position:absolute;top:6px;right:6px;z-index:3;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(62,207,110,.14);color:#3ecf6e;border:1px solid rgba(62,207,110,.28);pointer-events:none;}
.home-buy-card.is-owned .hbc-deco{filter:saturate(.85);}
.hbc-onyx{width:12px;height:12px;object-fit:contain;flex-shrink:0;}
.hbc-pfps{display:flex;align-items:center;gap:-4px;margin-top:8px;}
.hbc-pfp{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--panel);object-fit:cover;margin-left:-6px;background:#23283a;}
.hbc-pfp:first-child{margin-left:0;}
.hbc-pfp-more{margin-left:4px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.02em;}

/* Decoration hover preview — user's PFP appears inside the existing card image area */
.home-buy-card .hbc-img{position:relative;}

/* ── Periodic shine on item images (same shape as .home-fb-shine) ── */
@keyframes ftz-img-shine{
  0%   {left:-60%;}
  12%  {left:120%;}
  100% {left:120%;}
}
.shop-item-card .sic-preview,
.shop-item-card .sic-deco-wrap,
.home-buy-card .hbc-img{position:relative;}
.shop-item-card .sic-preview::before,
.shop-item-card .sic-deco-wrap::before,
.home-buy-card .hbc-img::before{
  content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 90%);
  transform:skewX(-18deg);
  pointer-events:none;
  z-index:3;
  animation:ftz-img-shine 4.5s ease-in-out infinite;
}
.shop-item-card:nth-child(even) .sic-preview::before,
.shop-item-card:nth-child(even) .sic-deco-wrap::before{animation-delay:1.4s;}
.shop-item-card:nth-child(3n) .sic-preview::before,
.shop-item-card:nth-child(3n) .sic-deco-wrap::before{animation-delay:2.8s;animation-duration:5.5s;}
.home-buy-card:nth-child(even) .hbc-img::before{animation-delay:1.6s;}
.home-buy-card:nth-child(3n) .hbc-img::before{animation-delay:3s;animation-duration:5.5s;}
@media (prefers-reduced-motion: reduce){
  .shop-item-card .sic-preview::before,
  .shop-item-card .sic-deco-wrap::before,
  .home-buy-card .hbc-img::before{animation:none;display:none;}
}

.home-buy-card.has-deco-preview .hbc-pfp-preview{position:absolute;top:50%;left:50%;width:78%;height:78%;transform:translate(-50%,-50%) scale(.85);border-radius:50%;object-fit:cover;opacity:0;transition:opacity .16s ease,transform .16s ease;pointer-events:none;z-index:1;background:#23283a;}
.home-buy-card.has-deco-preview:hover .hbc-pfp-preview{opacity:1;transform:translate(-50%,-50%) scale(1);}
.home-buy-card.has-deco-preview .hbc-deco{position:relative;z-index:2;transition:transform .16s ease;}
.home-buy-card.has-deco-preview:hover .hbc-deco{transform:scale(1.02);}

/* What's Happening — container card with 4 rows */
.home-whats-card{margin:0 28px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px;}
.home-whats-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s;}
.home-whats-row:hover{background:rgba(255,255,255,.03);}
.hwr-cat{flex-shrink:0;font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;}
.hwr-body{flex:1;min-width:0;}
.hwr-title{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hwr-meta{font-size:11px;color:var(--muted);}
.hwr-stats{display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:12px;font-weight:700;color:rgba(255,255,255,.75);}
.hwr-stat{display:inline-flex;align-items:center;gap:4px;}
.hwr-stat-ico{font-size:12px;}
.home-whats-empty{padding:18px;text-align:center;}

/* Feedback section (A place where... + regular feedback) */
.home-feedback-row{margin:0 28px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:900px){.home-feedback-row{grid-template-columns:1fr;}}
.home-feedback-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.home-fb-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.home-fb-title{font-size:13px;font-weight:800;color:rgba(255,255,255,.95);letter-spacing:.01em;}
.home-fb-hint{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700;}
.home-fb-user{display:flex;align-items:center;gap:8px;}
.home-fb-pfp{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--panel2);}
.home-fb-name{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85);}
.home-fb-handle{font-weight:500;color:var(--muted);margin-left:4px;}
.home-fb-compose{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;padding:8px 12px;}
.home-fb-prefix{font-size:13.5px;font-weight:700;color:var(--accent);white-space:nowrap;font-style:italic;letter-spacing:.01em;}
.home-fb-input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:13.5px;font-family:var(--font-ui);padding:2px 0;}
.home-fb-input::placeholder{color:rgba(255,255,255,.35);font-style:italic;}
.home-fb-textarea{width:100%;min-height:72px;resize:vertical;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;color:#fff;padding:10px 12px;font-family:var(--font-ui);font-size:13px;line-height:1.45;outline:none;}
.home-fb-textarea:focus{border-color:rgba(255,249,62,.25);}
.home-fb-select{background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:8px;color:#fff;padding:6px 10px;font-size:12px;font-family:var(--font-ui);outline:none;cursor:pointer;}
.home-fb-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.home-fb-anon{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);cursor:pointer;user-select:none;}
.home-fb-anon input{accent-color:var(--accent);cursor:pointer;}
.home-fb-send{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fff93e 0%,#ffd93e 100%);color:#1a1a1a;border:none;border-radius:10px;padding:8px 16px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:var(--font-ui);box-shadow:0 2px 8px rgba(255,249,62,.15);transition:transform .12s,box-shadow .18s;}
.home-fb-send:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,249,62,.35);}
.home-fb-send:active{transform:translateY(0);}
.home-fb-shine{position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 90%);transform:skewX(-18deg);pointer-events:none;transition:left .55s ease;}
.home-fb-send:hover .home-fb-shine{left:120%;}

/* Reworked trade modal */
.ftz-trade-v2{max-width:700px;width:calc(100vw - 48px);padding:22px;}
.ftz-trade-hdr{margin-bottom:18px;}
.ftz-trade-title{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:20px;font-weight:900;color:#fff;margin-bottom:6px;}
.ftz-trade-sub{font-size:12px;color:var(--muted-light);line-height:1.5;max-width:520px;}
.ftz-trade-parties{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:14px;}
.ftz-trade-col{background:var(--panel);border:1.5px solid var(--border);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;}
.ftz-trade-party{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.ftz-trade-pfp{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border);}
.ftz-trade-pfp-ph{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);border:2px dashed var(--border);flex-shrink:0;overflow:hidden;}
.ftz-trade-pfp-ph img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.ftz-trade-who{flex:1;min-width:0;}
.ftz-trade-name{font-size:13.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ftz-trade-handle{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;}
.ftz-trade-partner-input{width:100%;font-size:13.5px;font-weight:700;color:#fff;background:transparent;border:none;border-bottom:1px solid var(--border);outline:none;padding:4px 0;}
.ftz-trade-partner-input:focus{border-bottom-color:var(--accent);}
.ftz-trade-label{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.ftz-trade-onyx-row{display:flex;align-items:center;gap:8px;background:rgba(255,249,62,.04);border:1px solid rgba(255,249,62,.12);border-radius:10px;padding:8px 12px;}
.ftz-trade-onyx-row input{flex:1;background:transparent;border:none;color:#fff;font-family:var(--font-display);font-size:15px;font-weight:800;outline:none;min-width:0;}
.ftz-trade-onyx-row input::-webkit-outer-spin-button,.ftz-trade-onyx-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ftz-trade-bal{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.ftz-trade-items{width:100%;padding:8px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;font-size:12px;color:#fff;outline:none;min-height:80px;max-height:140px;}
.ftz-trade-items option{padding:4px 8px;}
.ftz-trade-items option:checked{background:var(--accent);color:var(--rail);font-weight:700;}
.ftz-trade-textarea{width:100%;padding:10px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;font-size:12.5px;color:#fff;outline:none;resize:vertical;font-family:inherit;}
.ftz-trade-textarea:focus{border-color:var(--accent);}
.ftz-trade-hint{font-size:10.5px;color:var(--muted);opacity:.7;}
.ftz-trade-swap-indicator{display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.6;}
.ftz-trade-summary{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;}
.ftz-trade-net{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);}
.ftz-trade-net strong{font-family:var(--font-display);font-size:13.5px;font-weight:800;color:var(--muted);}
@media(max-width:720px){
  .ftz-trade-parties{grid-template-columns:1fr;}
  .ftz-trade-swap-indicator{transform:rotate(90deg);padding:4px 0;}
}

/* User-profile wishlist card */
.up-wl-card{transition:border-color .15s;}

/* ── Admin report cards (message / ad) ───────────────────────── */
.rep-card{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.rep-card:hover{border-color:rgba(255,255,255,.09);}
.rep-card--pending{border-color:rgba(248,113,113,.18);box-shadow:0 0 0 1px rgba(248,113,113,.05),0 4px 22px rgba(248,113,113,.04);}
.rep-card--pending:hover{border-color:rgba(248,113,113,.28);}

.rep-card__head{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.rep-card--pending .rep-card__head{background:rgba(248,113,113,.05);}
.rep-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  text-transform:uppercase;letter-spacing:.06em;
  line-height:1;
}
.rep-pill--pend{background:rgba(248,113,113,.12);color:#f87171;}
.rep-pill--resolved{background:rgba(62,207,110,.1);color:#3ecf6e;}
.rep-pill--warned{background:rgba(245,158,11,.12);color:#f59e0b;}
.rep-pill--dismissed{background:rgba(255,255,255,.06);color:rgba(255,255,255,.45);}
.rep-pill--msg{background:rgba(96,165,250,.1);color:#60a5fa;}
.rep-pill--ad{background:rgba(168,85,247,.12);color:#c084fc;}
.rep-pill--user{background:rgba(245,158,11,.1);color:#f59e0b;}
.rep-card__time{
  flex:1;text-align:right;
  font-size:10.5px;color:rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums;
}
.rep-card__id{
  font-size:9.5px;color:rgba(255,255,255,.2);
  font-family:var(--font-mono, ui-monospace, monospace);
  letter-spacing:-.02em;
}

.rep-card__body{padding:18px 20px;}
.rep-card__reason{
  font-family:var(--font-display);
  font-size:19px;font-weight:800;line-height:1.2;
  color:#fff;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.rep-card__actors{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.55);
  margin-bottom:14px;
}
.rep-card__actor{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:rgba(255,255,255,.85);
}
.rep-card__actor--target{color:#f87171;}
.rep-card__actor img,.rep-card__actor .rc-ava{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.05);
  object-fit:cover;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:rgba(255,255,255,.4);
}
.rep-card__arrow{color:rgba(255,255,255,.25);font-size:12px;}
.rep-card__loc{
  padding:2px 8px;
  background:rgba(255,255,255,.04);
  border-radius:6px;
  font-size:11px;font-weight:500;color:rgba(255,255,255,.5);
}

.rep-content{
  background:rgba(248,113,113,.04);
  border:1px solid rgba(248,113,113,.1);
  border-left:3px solid #f87171;
  border-radius:10px;
  padding:12px 14px;
  font-size:13.5px;color:rgba(255,255,255,.82);
  line-height:1.5;white-space:pre-wrap;word-break:break-word;
  margin-bottom:12px;
}
.rep-content--ad{background:rgba(168,85,247,.04);border-color:rgba(168,85,247,.15);border-left-color:#a855f7;}
.rep-content__label{
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.3);
  margin-bottom:8px;display:block;
}

.rep-media{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;
}
.rep-media img, .rep-media video{
  max-width:260px;max-height:200px;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.3);
  object-fit:contain;display:block;
}
.rep-media img{cursor:pointer;transition:transform .15s;}
.rep-media img:hover{transform:scale(1.02);}

.rep-ad-preview{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px;
  background:rgba(168,85,247,.04);
  border:1px solid rgba(168,85,247,.12);
  border-radius:12px;
  margin-bottom:12px;
}
.rep-ad-preview__img{
  width:140px;height:auto;max-height:100px;
  object-fit:cover;border-radius:8px;
  background:rgba(0,0,0,.3);flex-shrink:0;
  border:1px solid rgba(255,255,255,.06);
}
.rep-ad-preview__body{min-width:0;flex:1;}
.rep-ad-preview__title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;word-break:break-word;}
.rep-ad-preview__target{font-size:12px;color:rgba(168,85,247,.8);margin-bottom:4px;word-break:break-word;}
.rep-ad-preview__meta{font-size:11px;color:rgba(255,255,255,.4);}

.rep-context{
  padding:10px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-left:2px solid rgba(255,255,255,.15);
  border-radius:8px;
  font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5;
  white-space:pre-wrap;
  margin-bottom:12px;
}
.rep-context::before{content:'"';opacity:.3;margin-right:2px;}
.rep-context::after{content:'"';opacity:.3;margin-left:2px;}

.rep-meta-row{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:11px;color:rgba(255,255,255,.3);
  margin-bottom:12px;padding-top:2px;
}
.rep-meta-row span{display:inline-flex;align-items:center;gap:5px;}
.rep-meta-row strong{color:rgba(255,255,255,.55);font-weight:600;}

.rep-resolution{
  padding:10px 14px;
  background:rgba(62,207,110,.04);
  border:1px solid rgba(62,207,110,.1);
  border-radius:10px;
  font-size:12px;margin-bottom:12px;
}
.rep-resolution--warned{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.12);}
.rep-resolution--dismissed{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);}

.rep-actions{
  display:flex;gap:8px;flex-wrap:wrap;padding-top:4px;
}
.rep-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  color:rgba(255,255,255,.65);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:all .12s;
}
.rep-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;}
.rep-btn--warn{color:#f59e0b;background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.18);}
.rep-btn--warn:hover{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);}
.rep-btn--suspend{color:#a855f7;background:rgba(168,85,247,.06);border-color:rgba(168,85,247,.18);}
.rep-btn--suspend:hover{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.3);}
.rep-btn--ban,.rep-btn--takedown{color:var(--red);background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.18);}
.rep-btn--ban:hover,.rep-btn--takedown:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);}
.rep-btn--inspect{color:var(--blue);background:rgba(96,165,250,.06);border-color:rgba(96,165,250,.18);margin-left:auto;}
.rep-btn--inspect:hover{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.3);}
.rep-btn--delete{color:var(--red);background:transparent;border-color:rgba(248,113,113,.15);}
.rep-btn--delete:hover{background:rgba(248,113,113,.08);}

.rep-protected{
  padding:10px 14px;
  border-radius:10px;
  font-size:12px;font-weight:600;
  margin-bottom:10px;
}
.rep-protected--super{background:rgba(255,249,62,.06);border:1px solid rgba(255,249,62,.14);color:rgba(255,249,62,.75);}
.rep-protected--admin{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.14);color:rgba(248,113,113,.75);}
.rep-protected--mod{background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.14);color:rgba(96,165,250,.75);}
.up-wl-card:hover{border-color:rgba(255,249,62,.2) !important;}

/* ── Failed-message state + retry ─────────────────────── */
.msg-row--failed{opacity:.72;}
.msg-row--failed .msg-bubble{
  border:1px dashed rgba(248,113,113,.32) !important;
  background:rgba(248,113,113,.04) !important;
}
.msg-row--failed .msg-bubble::after{
  content:'Failed to send';
  display:block;
  font-size:10.5px;color:#f87171;
  margin-top:4px;font-weight:600;letter-spacing:.02em;
}
.msg-retry-btn{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;
  padding:4px 10px;
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.22);
  border-radius:8px;
  color:#f87171;
  font-family:inherit;font-size:11px;font-weight:700;
  cursor:pointer;
  transition:all .12s;
}
.msg-retry-btn:hover{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.35);}
.msg-retry-btn svg{flex-shrink:0;}
</style>