:root { --crimson: #E8192C; --crimson-2: #FF2D42; --crimson-dim: rgba(232,25,44,0.1); --crimson-glow: rgba(232,25,44,0.3); --crimson-border: rgba(232,25,44,0.25); --bg: #080A0E; --bg-2: #0D0F14; --surface: #10131A; --surface-2: #161920; --surface-3: #1C2028; --border: rgba(255,255,255,0.06); --border-2: rgba(255,255,255,0.03); --text: #EDEFF5; /* Secondary/tertiary text lightened for legibility on the dark surfaces — the old #9098A8 / #6B7280 read too faint (esp. small labels & captions). */ --text-muted: #AAB2C2; --text-dim: #8C95A6; --green: #10B981; --yellow: #F59E0B; --blue: #6366F1; --orange: #F97316; --sidebar-w: 248px; /* ── Redesign tokens (2026-06 dashboard reskin) ─────────────────────────── Added on top of the originals (names above untouched so older rules keep working). The reskin layer at the foot of this file consumes these. */ --gold: #FFD700; /* reserved for Ultimate / premium cues only */ --gold-2: #FFC02E; --gold-dim: rgba(255,215,0,0.10); --purple: #A855F7; --teal: #14B8A6; --pink: #FF2D42; /* Layered crimson identity — glows + gradient strokes */ --glow-crimson: rgba(232,25,44,0.45); --glow-soft: rgba(232,25,44,0.16); --grad-crimson: linear-gradient(135deg, #FF2D42 0%, #E8192C 45%, #A60F1E 100%); --grad-gold: linear-gradient(135deg, #FFE680 0%, #FFD700 45%, #E0A800 100%); --stroke-grad: linear-gradient(135deg, rgba(232,25,44,0.55), rgba(232,25,44,0) 55%); /* Glass surfaces */ --glass: rgba(20,23,31,0.72); --glass-2: rgba(26,30,40,0.62); --glass-brd: rgba(255,255,255,0.08); /* Shape + depth */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 12px 32px rgba(0,0,0,0.45); --shadow-glow: 0 16px 48px -12px var(--glow-crimson); /* Motion */ --ease: cubic-bezier(0.22,1,0.36,1); --ease-out: cubic-bezier(0.16,1,0.3,1); } /* ─── LIGHT MODE ──────────────────────────────────────────────────────── Activated by setting `data-theme="light"` on . We invert the neutrals (bg/surface/text) while keeping the crimson accents and semantic colors (green/yellow/blue) intact so the brand identity stays consistent. ──────────────────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg: #F4F5F8; --bg-2: #ECEDF1; --surface: #FFFFFF; --surface-2: #F7F8FA; --surface-3: #ECEDF1; --border: rgba(10,12,18,0.08); --border-2: rgba(10,12,18,0.04); --text: #1A1D24; --text-muted:#5A6170; --text-dim: #7C8492; /* Slightly desaturate the crimson glow so it doesn't burn against white */ --crimson-glow: rgba(232,25,44,0.18); } /* In light mode, inverted-color image-style overlays look better with reduced opacity. Discord-style bubbles in previews keep their tone. */ html[data-theme="light"] body::before { opacity: 0.5; } /* The dashboard topbar has its background baked in as a dark rgba() value (so it stays semi-transparent over the gradient). Override it explicitly for light mode so it doesn't remain a black bar. */ html[data-theme="light"] .dash-topbar { background: rgba(247, 248, 250, 0.9); border-bottom-color: var(--border); } html[data-theme="light"] .topbar-section { color: var(--text); } html[data-theme="light"] .topbar-guild { background: var(--surface); border-color: var(--border); color: var(--text-muted); } /* Sidebar surface — uses a couple of inline gradients/rgba colors */ html[data-theme="light"] .sidebar { background: var(--surface); border-right: 1px solid var(--border); } html[data-theme="light"] .sb-top, html[data-theme="light"] .sb-foot { border-color: var(--border); } html[data-theme="light"] .server-switcher { background: var(--surface-2); border-color: var(--border); } html[data-theme="light"] .nav-item.active { background: rgba(232,25,44,0.08); color: var(--text); } html[data-theme="light"] .nav-item:hover { background: var(--surface-2); color: var(--text); } /* The crimson voter / message bubbles, etc., need their borders re-tinted */ html[data-theme="light"] .config-panel, html[data-theme="light"] .info-card, html[data-theme="light"] .activity-panel, html[data-theme="light"] .broadcast-panel, html[data-theme="light"] .stat-card, html[data-theme="light"] .sys-card, html[data-theme="light"] .module-card, html[data-theme="light"] .feed-card, html[data-theme="light"] .poll-card, html[data-theme="light"] .botsugg-card, html[data-theme="light"] .autorole-row, html[data-theme="light"] .backup-row { background: var(--surface); } html[data-theme="light"] .ch-dropdown, html[data-theme="light"] .mention-dropdown, html[data-theme="light"] .sb-menu { background-color: #FFFFFF !important; background-image: none !important; border: 1px solid rgba(10, 12, 18, 0.22) !important; box-shadow: 0 18px 56px rgba(10, 12, 18, 0.22), 0 2px 6px rgba(10, 12, 18, 0.10) !important; backdrop-filter: none !important; } html[data-theme="light"] .sb-menu a, html[data-theme="light"] .sb-menu button { background: transparent; color: var(--text); } html[data-theme="light"] .sb-menu a:hover, html[data-theme="light"] .sb-menu button:hover { background: rgba(232, 25, 44, 0.08); } /* The picker-page user-pill dropdown floats in a stacking context above the noise overlay — bump its z-index so the panel surface always paints solid. */ .sb-menu, .sb-menu-down { z-index: 9999; } html[data-theme="light"] .field-input, html[data-theme="light"] .ch-picker-btn, html[data-theme="light"] .ch-search input { background: var(--surface-2); color: var(--text); border-color: var(--border); } html[data-theme="light"] .field-input::placeholder { color: var(--text-dim); } html[data-theme="light"] .ch-list::-webkit-scrollbar-thumb { background: rgba(220,20,60,0.3); } /* Server-picker top bar — has its own hardcoded dark rgba background. Override it for light mode so it blends with the rest of the page. */ html[data-theme="light"] .picker-nav { background: rgba(255, 255, 255, 0.85); border-bottom-color: var(--border); } html[data-theme="light"] .user-pill { background: var(--surface); border-color: var(--border); } html[data-theme="light"] .user-pill-name, html[data-theme="light"] .logo-text { color: var(--text); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5; overflow-x:hidden; min-height:100vh; } /* ══════════════════════════════════════ LOADING SCREEN ══════════════════════════════════════ */ #loading-screen { position:fixed;inset:0; background:var(--bg); display:flex;flex-direction:column; align-items:center;justify-content:center; z-index:9999; transition:opacity .5s ease, visibility .5s ease; } #loading-screen.hidden{opacity:0;visibility:hidden;} .loading-logo{ font-family:'Bebas Neue',sans-serif; font-size:36px;font-weight:900; color:var(--crimson); letter-spacing:6px; margin-bottom:8px; animation:pulse 1.5s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}} .loading-sub{font-size:12px;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:40px;} .loading-bar-track{width:200px;height:2px;background:var(--surface-3);border-radius:2px;overflow:hidden;} .loading-bar-fill{height:100%;background:var(--crimson);border-radius:2px;animation:load 1.5s ease-in-out forwards;} @keyframes load{from{width:0;}to{width:100%;}} /* ══════════════════════════════════════ VIEWS ══════════════════════════════════════ */ .view{display:none;} .view.active{display:flex;} #view-picker.active{flex-direction:column;min-height:100vh;} #view-dashboard.active{min-height:100vh;} /* ══════════════════════════════════════ BACKGROUND EFFECTS ══════════════════════════════════════ */ .bg-grid{ position:fixed;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(rgba(232,25,44,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232,25,44,0.03) 1px, transparent 1px); background-size:40px 40px; } .bg-glow{ position:fixed;top:-200px;right:-200px; width:600px;height:600px; background:radial-gradient(circle, rgba(232,25,44,0.06) 0%, transparent 70%); pointer-events:none;z-index:0; } .bg-glow-2{ position:fixed;bottom:-200px;left:-100px; width:500px;height:500px; background:radial-gradient(circle, rgba(99,102,241,0.04) 0%, transparent 70%); pointer-events:none;z-index:0; } /* Hide the crimson page-tint effects in light mode — they bleed pink behind dropdowns / panels and make backgrounds look semi-transparent. */ html[data-theme="light"] .bg-grid, html[data-theme="light"] .bg-glow, html[data-theme="light"] .bg-glow-2 { display: none; } /* ══════════════════════════════════════ SERVER PICKER ══════════════════════════════════════ */ .picker-nav{ display:flex;align-items:center;justify-content:space-between; padding:18px 48px; border-bottom:1px solid var(--border); background:rgba(8,10,14,0.9); backdrop-filter:blur(20px); position:sticky;top:0;z-index:50; position:relative;z-index:10; } .logo{display:flex;align-items:center;gap:12px;text-decoration:none;} .logo-mark{ width:40px;height:40px; background:url('/logo-256.png') center/contain no-repeat; flex-shrink:0; } .logo-text{ font-family:'Bebas Neue',sans-serif;font-size:26px;font-weight:400;letter-spacing:3px;line-height:1; background:var(--grad-crimson);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--crimson-2); text-shadow:0 0 18px var(--crimson-glow); } .user-pill{ position:relative; display:flex;align-items:center;gap:10px; padding:7px 16px 7px 8px; background:var(--surface); border:1px solid var(--border); border-radius:100px;cursor:pointer; transition:all .2s; user-select:none; } .user-pill:hover{border-color:var(--crimson-border);} .user-pill .sb-caret{ margin-left:4px;color:var(--text-dim);font-size:9px; transition:transform .2s;flex-shrink:0; } .user-pill.menu-open .sb-caret{transform:rotate(180deg);} /* The sidebar's .sb-menu drops UP. For the picker top-bar pill we need it to drop DOWN — flip the anchor with this modifier. */ .sb-menu-down{ top:calc(100% + 8px);bottom:auto; left:auto;right:0;min-width:200px; box-shadow:0 12px 40px rgba(0,0,0,0.4); } html[data-theme="light"] .sb-menu-down{ box-shadow:0 12px 40px rgba(0,0,0,0.15); } .user-av-sm{ width:28px;height:28px;border-radius:50%; background:linear-gradient(135deg,var(--crimson),#7B0000); display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:#fff;overflow:hidden; } .user-av-sm img{width:100%;height:100%;object-fit:cover;} .user-pill-name{font-size:13px;font-weight:600;color:var(--text);} .picker-body{ flex:1; padding:72px 48px; max-width:1200px; margin:0 auto; width:100%; position:relative;z-index:1; } .picker-hero{margin-bottom:56px;} .picker-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px;color:var(--crimson); letter-spacing:3px;text-transform:uppercase; margin-bottom:16px; display:flex;align-items:center;gap:10px; } .picker-eyebrow::before{content:'';width:24px;height:1px;background:var(--crimson);} .picker-hero h1{ font-family:'Bebas Neue';font-size:48px;font-weight:900; line-height:1;letter-spacing:2px; margin-bottom:16px; } .picker-hero h1 span{color:var(--crimson);} .picker-hero p{color:var(--text-muted);font-size:15px;max-width:480px;font-weight:400;} .section-label{ font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:600; letter-spacing:2px;text-transform:uppercase; color:var(--text-muted); margin-bottom:16px; display:flex;align-items:center;gap:12px; } .section-label::after{content:'';flex:1;height:1px;background:var(--border);} .servers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:56px; } .server-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; cursor:pointer; transition:all .25s; position:relative;overflow:hidden; animation:cardIn .4s ease both; } @keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}} .server-card:nth-child(1){animation-delay:.05s;} .server-card:nth-child(2){animation-delay:.1s;} .server-card:nth-child(3){animation-delay:.15s;} .server-card:nth-child(4){animation-delay:.2s;} .server-card:nth-child(5){animation-delay:.25s;} .server-card:hover{ border-color:var(--crimson-border); background:var(--surface-2); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.5),0 0 0 1px var(--crimson-border); } .server-card::after{ content:'';position:absolute; top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--crimson),transparent); opacity:0;transition:opacity .3s; } .server-card:hover::after{opacity:1;} .server-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;} .server-icon-wrap{position:relative;} .server-icon{ width:56px;height:56px;border-radius:16px; display:flex;align-items:center;justify-content:center; font-size:24px;overflow:hidden; background:var(--surface-3); border:1px solid var(--border); } .server-icon img{width:100%;height:100%;object-fit:cover;border-radius:14px;} .server-badge{ position:absolute;bottom:-4px;right:-4px; font-size:9px;font-weight:700; padding:2px 6px;border-radius:4px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px; border:1.5px solid var(--bg); } .badge-online{background:var(--green);color:#fff;} .badge-invite{background:var(--surface-3);color:var(--text-muted);} .server-status-label{ font-size:10px;font-weight:600; padding:4px 8px;border-radius:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px;text-transform:uppercase; } .status-ready{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);} .status-invite{background:var(--crimson-dim);color:var(--crimson);border:1px solid var(--crimson-border);} .server-name{font-family:'DM Sans';font-size:14px;font-weight:700;letter-spacing:.5px;margin-bottom:4px;} .server-meta{font-size:12px;color:var(--text-muted);font-weight:400;margin-bottom:18px;} .server-btn{ width:100%;padding:9px; background:var(--crimson-dim); border:1px solid var(--crimson-border); border-radius:10px; color:var(--crimson-2);font-size:12px;font-weight:700; font-family:'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase; cursor:pointer;transition:all .2s; } .server-btn:hover{background:var(--crimson);color:#fff;border-color:var(--crimson);box-shadow:0 4px 20px var(--crimson-glow);} .invite-card{ background:transparent;border:1px dashed var(--border); border-radius:16px;padding:24px;cursor:pointer; transition:all .25s; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;min-height:180px;gap:12px; } .invite-card:hover{border-color:var(--crimson-border);background:var(--crimson-dim);} .invite-plus{ width:44px;height:44px;border-radius:50%; border:1px solid var(--text-dim); display:flex;align-items:center;justify-content:center; font-size:20px;color:var(--text-dim);transition:all .2s; } .invite-card:hover .invite-plus{border-color:var(--crimson);color:var(--crimson);} .invite-label{font-size:13px;color:var(--text-muted);} /* ══════════════════════════════════════ MAIN DASHBOARD ══════════════════════════════════════ */ #view-dashboard{display:none;min-height:100vh;} #view-dashboard.active{display:flex;} /* SIDEBAR */ .sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; /* No outer overflow — the inner .sb-nav scrolls, and .sb-foot stays pinned. */ overflow:hidden; } .sb-top{ padding:20px 16px; border-bottom:1px solid var(--border); flex-shrink:0; } .sb-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 4px;} .sb-logo-mark{ width:38px;height:38px; background:url('/logo-256.png') center/contain no-repeat; filter:drop-shadow(0 0 6px var(--crimson-glow)); /* The Crimson slime mascot logo (matches the marketing site nav). The dashboard's nav has two .sb-logo-mark slots: the normal sidebar and the owner sidebar (which keeps its 👑 text). Hide non-image text on this base class so only the mark renders. */ font-size:0; flex-shrink:0; } /* Owner sidebar uses an emoji as the mark — restore a tiny text container for it instead of the round logo background. */ .sb-logo-mark.sb-logo-mark-text{ background:var(--crimson); border-radius:8px; display:flex;align-items:center;justify-content:center; font-family:'Bebas Neue';font-size:14px;font-weight:900;color:#fff; box-shadow:0 0 12px var(--crimson-glow); } .sb-logo-text{ font-family:'Bebas Neue',sans-serif;font-size:24px;font-weight:400;letter-spacing:3px;line-height:1; background:var(--grad-crimson);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--crimson-2); text-shadow:0 0 18px var(--crimson-glow); } .server-switcher{ display:flex;align-items:center;gap:10px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; cursor:pointer;transition:all .2s; } .server-switcher:hover{border-color:var(--crimson-border);} .sw-icon{ width:32px;height:32px;border-radius:9px; background:var(--crimson); display:flex;align-items:center;justify-content:center; font-size:15px;flex-shrink:0;overflow:hidden; } .sw-icon img{width:100%;height:100%;object-fit:cover;border-radius:7px;} .sw-info{flex:1;overflow:hidden;} .sw-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'DM Sans';letter-spacing:.5px;} .sw-role{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;} .sw-caret{color:var(--text-dim);font-size:10px;} .sb-nav{ flex:1 1 auto;min-height:0; padding:12px 10px; overflow-y:auto; scrollbar-width:thin; } .sb-nav::-webkit-scrollbar{width:6px;} .sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} .sb-nav::-webkit-scrollbar-thumb:hover{background:var(--text-dim);} .nav-group-title{ font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--text-muted);padding:0 10px;margin:18px 0 6px; } .nav-group-title:first-child{margin-top:4px;} /* ── Collapsible nav groups ─────────────────────────────────────────────── Modules sidebar got too long once we hit ~25 tabs. Each .nav-group wraps a header + its items so the user can fold the ones they don't currently need. State persists in localStorage so a refresh doesn't undo it. */ .nav-group{ margin-bottom:4px; } .nav-group-header{ display:flex;align-items:center;gap:6px; font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--text-muted);padding:8px 10px;margin:14px 0 4px; cursor:pointer;user-select:none; border-radius:6px; transition:color .15s, background .15s; } .nav-group:first-child .nav-group-header{ margin-top:4px; } .nav-group-header:hover{ color:var(--text); background:var(--surface-2); } .nav-group-caret{ display:inline-block; transition:transform .18s; font-size:10px; color:var(--text-muted); width:8px; } .nav-group.collapsed .nav-group-caret{ transform:rotate(-90deg); } .nav-group-label{ flex:1; } .nav-group-count{ font-size:8px; background:var(--surface-2); color:var(--text-dim); padding:2px 6px; border-radius:8px; font-weight:500; letter-spacing:0; } .nav-group-body{ display:flex;flex-direction:column; overflow:hidden; max-height:1200px; transition:max-height .25s ease-out; } .nav-group.collapsed .nav-group-body{ max-height:0; } /* ── PREMIUM UPGRADE MODAL ────────────────────────────────────────────────── Fires when a free guild tries to flip a locked Enable toggle. Renders as an overlay with a Subscribe button that posts to /api/billing/checkout — same code path as the Billing tab's Subscribe buttons, just inline so the user doesn't have to navigate away from the feature they wanted. */ #pg-upgrade-modal{ display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; } #pg-upgrade-modal.open{ display:flex; } .pg-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); animation:pgFade .2s ease; } @keyframes pgFade{ from{opacity:0} to{opacity:1} } .pg-modal-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px; max-width:480px; width:calc(100% - 40px); box-shadow:0 24px 80px rgba(0,0,0,0.5); animation:pgSlide .25s cubic-bezier(.2,.9,.3,1); } @keyframes pgSlide{ from{opacity:0;transform:translateY(20px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} } .pg-modal-close{ position:absolute; top:14px;right:14px; width:30px;height:30px; display:flex;align-items:center;justify-content:center; background:transparent;border:none; color:var(--text-muted); font-size:24px;line-height:1; cursor:pointer;border-radius:6px; transition:all .15s; } .pg-modal-close:hover{ color:var(--text); background:var(--surface-2); } .pg-modal-tier-pill{ display:inline-block; background:linear-gradient(135deg,#FFD700,#FFA500); color:#1a1d24; font-family:'JetBrains Mono',monospace; font-size:11px;font-weight:700; letter-spacing:1.5px; padding:5px 12px;border-radius:100px; margin-bottom:18px; } .pg-modal-title{ font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:1px; line-height:1.1; color:var(--text); margin-bottom:14px; } .pg-modal-desc{ font-size:14px; line-height:1.6; color:var(--text-muted); margin-bottom:18px; } .pg-modal-currenttier{ font-size:12px; color:var(--text-muted); padding:10px 14px; background:var(--surface-2); border-radius:8px; border:1px solid var(--border); margin-bottom:20px; } .pg-modal-actions{ display:flex; gap:10px; flex-wrap:wrap; } .pg-modal-btn-primary{ flex:1; min-width:200px; padding:12px 20px; background:linear-gradient(135deg,var(--crimson),#F02028); color:white; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; letter-spacing:0.3px; transition:all .2s; } .pg-modal-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(220,31,38,0.35); } .pg-modal-btn-primary:disabled{ opacity:0.6; cursor:wait; transform:none; box-shadow:none; } .pg-modal-btn-ghost{ padding:12px 20px; background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; transition:all .15s; } .pg-modal-btn-ghost:hover{ color:var(--text); border-color:var(--text-muted); background:var(--surface-2); } .pg-modal-fineprint{ margin-top:16px; font-size:11px; color:var(--text-dim); text-align:center; } .pg-modal-fineprint a{ color:var(--crimson); text-decoration:none; } .pg-modal-fineprint a:hover{ text-decoration:underline; } /* Lock visual on premium-gated toggles — subtle so it doesn't shout */ .toggle input[data-pg-locked="1"] + .toggle-track, input[data-pg-locked="1"] + .toggle-track{ opacity:0.55; } input[data-pg-locked="1"]{ cursor:not-allowed; } .nav-item{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:10px; color:var(--text-muted);font-size:13px;font-weight:600; cursor:pointer;transition:all .18s; margin-bottom:2px;border:1px solid transparent; letter-spacing:.3px; } .nav-item:hover{background:var(--surface-2);color:var(--text);} .nav-item.active{ background:var(--crimson-dim); color:var(--crimson-2); border-color:var(--crimson-border); } .nav-item.active .nav-ic{color:var(--crimson);} .nav-ic{font-size:14px;width:18px;text-align:center;flex-shrink:0;} .nav-badge{ margin-left:auto; background:var(--crimson);color:white; font-size:9px;font-weight:700; padding:2px 7px;border-radius:10px; font-family:'JetBrains Mono',monospace; } /* Status dot shown on each module nav-item. Green = enabled, gray = off. */ .nav-status{ margin-left:auto;flex-shrink:0; width:8px;height:8px;border-radius:50%; background:var(--text-dim); transition:background .2s, box-shadow .2s; } .nav-status[data-on="true"]{ background:var(--green); box-shadow:0 0 8px rgba(16,185,129,0.6); } .sb-foot{ padding:12px 10px; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface); } .sb-user{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .18s; } .sb-user:hover{background:var(--surface-2);} .sb-avatar{ width:30px;height:30px;border-radius:50%; background:linear-gradient(135deg,var(--crimson),#7B0000); display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden; } .sb-avatar img{width:100%;height:100%;object-fit:cover;} .sb-uname{font-size:12px;font-weight:700;font-family:'DM Sans';letter-spacing:.3px;} .sb-tag{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;} .sb-logout{ margin-left:auto;color:var(--text-dim);font-size:14px; cursor:pointer;background:none;border:none;transition:color .2s;padding:4px; } .sb-logout:hover{color:var(--crimson);} /* ─── Sidebar profile dropdown (Dashboard / Mode / Logout) ─── */ .sb-user{position:relative;} .sb-user .sb-caret{ margin-left:auto;color:var(--text-dim);font-size:9px; transition:transform .2s;flex-shrink:0; } .sb-user.menu-open .sb-caret{transform:rotate(180deg);} .sb-menu{ position:absolute; bottom:calc(100% + 6px);left:0;right:0; background:var(--surface-2); /* Stronger border in dark mode so the menu reads as a card, not as floating items — light mode overrides this further below. */ border:1px solid rgba(255,255,255,0.10); border-radius:12px; box-shadow:0 -12px 40px rgba(0,0,0,0.55); padding:6px; z-index:9999; display:none; flex-direction:column; gap:2px; } .sb-menu.open{display:flex;} .sb-menu a, .sb-menu button{ display:flex;align-items:center;gap:10px; padding:8px 12px;font-size:13px;color:var(--text); background:none;border:none;border-radius:7px; text-align:left;cursor:pointer;text-decoration:none; font-family:inherit; transition:background .12s; } .sb-menu a:hover, .sb-menu button:hover{ background:var(--crimson-dim); } .sb-menu .sb-menu-ic{ font-size:14px;width:16px;text-align:center;opacity:0.85;flex-shrink:0; } .sb-menu .sb-menu-logout{color:#FF6B73;} .sb-menu .sb-menu-sep{ height:1px;background:rgba(255,255,255,0.08);margin:4px 2px; } html[data-theme="light"] .sb-menu .sb-menu-sep{ background:rgba(10,12,18,0.10); } /* MAIN */ .dash-main{flex:1;overflow-y:auto;background:var(--bg-2);display:flex;flex-direction:column;} /* TOPBAR */ .dash-topbar{ display:flex;align-items:center;justify-content:space-between; padding:16px 32px; border-bottom:1px solid var(--border); background:rgba(13,15,20,0.9); backdrop-filter:blur(12px); position:sticky;top:0;z-index:40;flex-shrink:0; } .topbar-left{display:flex;align-items:center;gap:14px;} .topbar-crumb{display:flex;align-items:center;gap:8px;} .crumb-sep{color:var(--text-dim);font-size:12px;} .topbar-section{ font-family:'DM Sans';font-size:14px;font-weight:700; letter-spacing:2px;color:var(--text); } .topbar-right{display:flex;align-items:center;gap:8px;} .topbar-guild{ display:flex;align-items:center;gap:8px; padding:6px 14px; background:var(--surface);border:1px solid var(--border);border-radius:8px; font-size:12px;font-weight:600;color:var(--text-muted); } .online-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);} .icon-btn{ width:34px;height:34px;border-radius:9px; background:var(--surface);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:14px;transition:all .2s; } .icon-btn:hover{border-color:var(--crimson-border);background:var(--surface-2);} /* TAB PAGES */ .dash-content{flex:1;overflow-y:auto;} .tab-page{display:none;padding:28px 32px;animation:fadeUp .3s ease both;} .tab-page.active{display:block;} @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} /* ══════════════════════════════════════ OVERVIEW TAB ══════════════════════════════════════ */ .page-header{margin-bottom:28px;} .page-title{font-family:'Bebas Neue';font-size:22px;font-weight:800;letter-spacing:1px;margin-bottom:4px;} .page-sub{font-size:13px;color:var(--text-muted);font-weight:400;} .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;margin-bottom:24px; } .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 20px; position:relative;overflow:hidden; transition:border-color .2s; } .stat-card:hover{border-color:rgba(255,255,255,0.1);} .stat-card::before{ content:'';position:absolute; top:0;left:0;right:0;height:2px; } .stat-card.c-red::before{background:linear-gradient(90deg,var(--crimson),transparent);} .stat-card.c-green::before{background:linear-gradient(90deg,var(--green),transparent);} .stat-card.c-yellow::before{background:linear-gradient(90deg,var(--yellow),transparent);} .stat-card.c-blue::before{background:linear-gradient(90deg,var(--blue),transparent);} .stat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;} .stat-icon{ width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:16px; } .stat-card.c-red .stat-icon{background:rgba(232,25,44,0.1);} .stat-card.c-green .stat-icon{background:rgba(16,185,129,0.1);} .stat-card.c-yellow .stat-icon{background:rgba(245,158,11,0.1);} .stat-card.c-blue .stat-icon{background:rgba(99,102,241,0.1);} .stat-trend{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;} .stat-num{ font-family:'Bebas Neue';font-size:34px;font-weight:800; letter-spacing:1px;line-height:1;margin-bottom:6px; } .stat-card.c-red .stat-num{color:var(--crimson);} .stat-card.c-green .stat-num{color:var(--green);} .stat-card.c-yellow .stat-num{color:var(--yellow);} .stat-card.c-blue .stat-num{color:var(--blue);} .stat-label{font-size:11px;color:var(--text-muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;} /* Modules grid */ .modules-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px;margin-bottom:24px; } .module-card{ background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:22px; transition:all .2s;cursor:default; } .module-card:hover{border-color:rgba(255,255,255,0.1);} .module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .module-title-row{display:flex;align-items:center;gap:10px;} .module-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .dot-on{background:var(--green);box-shadow:0 0 8px var(--green);} .dot-off{background:var(--text-dim);} .module-name{font-family:'DM Sans';font-size:13px;font-weight:700;letter-spacing:.5px;} .module-status{ font-size:10px;font-weight:700; padding:3px 8px;border-radius:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px;text-transform:uppercase; } .ms-on{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);} .ms-off{background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);} .module-stats{display:flex;gap:20px;} .mstat{display:flex;flex-direction:column;gap:2px;} .mstat-val{font-family:'Bebas Neue';font-size:18px;font-weight:700;} .mstat-key{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;letter-spacing:.5px;} .mstat-link{ display:inline-flex;align-items:center;gap:5px; font-size:11px;color:var(--crimson);font-weight:600; cursor:pointer;text-decoration:none;letter-spacing:.3px; margin-top:12px;transition:opacity .2s; } .mstat-link:hover{opacity:.7;} /* Recent activity */ .activity-panel{ background:var(--surface);border:1px solid var(--border); border-radius:16px;margin-bottom:24px; } .panel-head{ display:flex;align-items:center;justify-content:space-between; padding:16px 22px;border-bottom:1px solid var(--border); } .panel-title{ font-family:'DM Sans';font-size:12px;font-weight:700; letter-spacing:1px;color:var(--text-muted); } .panel-link{font-size:11px;color:var(--crimson);cursor:pointer;font-weight:600;letter-spacing:.3px;} .panel-link:hover{opacity:.7;} .activity-list{} .activity-row{ display:flex;align-items:center;gap:14px; padding:14px 22px; border-bottom:1px solid var(--border-2); transition:background .15s; } .activity-row:last-child{border-bottom:none;} .activity-row:hover{background:rgba(255,255,255,0.015);} .act-tag{ font-size:9px;font-weight:700; padding:3px 8px;border-radius:5px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px;text-transform:uppercase; white-space:nowrap;flex-shrink:0; min-width:56px;text-align:center; } .tag-ban{background:rgba(232,25,44,0.12);color:#FF4D5E;border:1px solid rgba(232,25,44,0.2);} .tag-warn{background:rgba(245,158,11,0.12);color:#FBB740;border:1px solid rgba(245,158,11,0.2);} .tag-mute{background:rgba(99,102,241,0.12);color:#A5B4FC;border:1px solid rgba(99,102,241,0.2);} .tag-kick{background:rgba(249,115,22,0.12);color:#FB923C;border:1px solid rgba(249,115,22,0.2);} .tag-unban{background:rgba(16,185,129,0.12);color:#34D399;border:1px solid rgba(16,185,129,0.2);} .act-info{flex:1;display:flex;flex-direction:column;gap:2px;} .act-user{font-size:13px;font-weight:700;} .act-reason{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;} .act-meta{font-size:11px;color:var(--text-dim);text-align:right;flex-shrink:0;font-family:'JetBrains Mono',monospace;} /* ══════════════════════════════════════ MODLOG / LEVELS / BIRTHDAYS TAB ══════════════════════════════════════ */ .settings-layout{ display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start; } .settings-layout.full{grid-template-columns:1fr;} .config-panel{ background:var(--surface);border:1px solid var(--border); border-radius:16px; /* No overflow:hidden — would clip every channel/role picker dropdown that opens near the bottom of the panel. */ } .cp-head{ padding:20px 24px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; } .cp-title-row{display:flex;align-items:center;gap:10px;} .cp-title{font-family:'DM Sans';font-size:14px;font-weight:700;letter-spacing:.5px;} .cp-subtitle{font-size:12px;color:var(--text-muted);margin-top:3px;} .cp-badge{ font-size:9px;font-weight:700; padding:3px 8px;border-radius:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px;text-transform:uppercase; } .cp-badge.on{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);} .cp-badge.off{background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);} .cp-body{padding:24px;} .cp-section{margin-bottom:28px;} .cp-section:last-child{margin-bottom:0;} .cp-section-title{ font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--text-muted); margin-bottom:16px; display:flex;align-items:center;gap:10px; } .cp-section-title::after{content:'';flex:1;height:1px;background:var(--border);} .field-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .field-row:last-child{margin-bottom:0;} .field-label{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.3px;} .field-desc{font-size:11px;color:var(--text-muted);} .field-input{ background:var(--surface-2);border:1px solid var(--border); border-radius:10px;padding:10px 14px; color:var(--text);font-size:13px; font-family:'JetBrains Mono',monospace; outline:none;transition:border-color .2s;width:100%; } .field-input:focus{border-color:var(--crimson-border);} .field-input::placeholder{color:var(--text-dim);} textarea.field-input{resize:vertical;min-height:80px;} .field-row-inline{ display:flex;align-items:center;justify-content:space-between; padding:13px 0;border-bottom:1px solid var(--border-2); } .field-row-inline:last-child{border-bottom:none;} .fri-info{flex:1;padding-right:20px;} .fri-label{font-size:13px;font-weight:600;} .fri-desc{font-size:11px;color:var(--text-muted);margin-top:2px;} /* Toggle */ .toggle{position:relative;width:42px;height:24px;flex-shrink:0;} .toggle input{opacity:0;width:0;height:0;position:absolute;} .toggle-track{ position:absolute;inset:0;background:var(--surface-3); border-radius:12px;cursor:pointer;transition:.25s; border:1px solid var(--border); } .toggle-track::before{ content:'';position:absolute; left:3px;top:50%;transform:translateY(-50%); width:16px;height:16px;border-radius:50%; background:var(--text-dim);transition:.25s; } .toggle input:checked+.toggle-track{background:var(--crimson);border-color:var(--crimson);} .toggle input:checked+.toggle-track::before{left:21px;background:#fff;} .fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} /* Module toggles */ .module-toggle-list{} .mod-toggle-row{ display:flex;align-items:center;gap:14px; padding:14px 0;border-bottom:1px solid var(--border-2); } .mod-toggle-row:last-child{border-bottom:none;} .mod-toggle-icon{ width:34px;height:34px;border-radius:9px; background:var(--surface-2); display:flex;align-items:center;justify-content:center; font-size:14px;flex-shrink:0; } .mod-toggle-info{flex:1;} .mod-toggle-name{font-size:13px;font-weight:700;margin-bottom:2px;} .mod-toggle-ch{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;} /* Save button */ .save-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:12px 28px; background:var(--crimson); border:none;border-radius:12px; color:#fff;font-size:13px;font-weight:700; font-family:'DM Sans',sans-serif; letter-spacing:1px;text-transform:uppercase; cursor:pointer;transition:all .2s;width:100%;margin-top:20px; } .save-btn:hover{background:var(--crimson-2);box-shadow:0 6px 24px var(--crimson-glow);} .save-btn:active{transform:scale(0.99);} .save-btn.loading{opacity:.7;pointer-events:none;} /* Info card */ .info-card{ background:var(--surface);border:1px solid var(--border); border-radius:16px;overflow:hidden; position:sticky;top:20px; } .info-section{padding:20px 22px;border-bottom:1px solid var(--border);} .info-section:last-child{border-bottom:none;} .info-section-title{ font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--text-muted); margin-bottom:14px; } /* "How it works" + tips body text — many modules use an inline color:var(--text-dim) on the wrapper div, which is the LIGHTEST text color in the palette (intended for placeholders, not paragraphs). The !important defeats those inline wrapper styles so the body copy stays readable in both themes without touching every module's HTML. We only touch the WRAPPER color — paragraphs inside inherit by default, so warnings with their own explicit `color:#ffcc66` style still render yellow as intended. font-weight 500 + 13px adds enough stroke that 12-13px reads crisply. */ .info-section > div { color: var(--text-muted) !important; } .info-section > div p, .info-section > div > p { font-weight: 500; font-size: 13px; line-height: 1.7; } .info-section strong { color: var(--text); font-weight: 700; } .info-section a { font-weight: 600; } /* Field-row description (the small hint under labels) — bump from 11px / weight 400 to 12px / weight 500 for legibility. */ .field-desc { font-size: 12px; font-weight: 500; } /* When .field-row contains an inline 2/3-column grid (used in AI chat, tickets, etc.), each column's child block has its own .field-label + .field-desc + input. Because field-desc text lengths vary, inputs end up at different vertical positions across columns. align-items:end on the grid pushes inputs to the bottom of each cell so they line up. The labels and descs sit on top, free to be different heights. */ .field-row[style*="grid-template-columns"] { align-items: end; } /* But on phone where the grid collapses to 1 column, align-items:end is a no-op so we don't need a media-query override. */ /* Subtitle under cp-title (cards' second line) — same treatment. */ .cp-subtitle, .cp-sub { font-weight: 500; } .info-stat-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;} .info-stat-row+.info-stat-row{border-top:1px solid var(--border-2);} .isr-left{display:flex;align-items:center;gap:10px;} .isr-ic{font-size:14px;width:20px;text-align:center;} .isr-label{font-size:12px;font-weight:600;color:var(--text-muted);} .isr-val{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;} /* Toast */ .toast{ position:fixed;bottom:28px;right:28px;z-index:999; display:flex;align-items:center;gap:10px; padding:12px 20px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.5); transform:translateY(80px);opacity:0; transition:all .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; } .toast.show{transform:translateY(0);opacity:1;} .toast.success{border-color:rgba(16,185,129,0.3);} .toast.error{border-color:rgba(232,25,44,0.3);} .toast-ic{font-size:16px;} .toast-msg{font-size:13px;font-weight:600;} /* ══════════════════════════════════════ LEADERBOARD TAB ══════════════════════════════════════ */ .lb-grid{display:flex;flex-direction:column;gap:10px;} .lb-row{ display:flex;align-items:center;gap:16px; padding:14px 20px; background:var(--surface);border:1px solid var(--border); border-radius:14px;transition:all .2s; } .lb-row:hover{border-color:var(--crimson-border);} .lb-rank{ font-family:'Bebas Neue';font-size:18px;font-weight:800; width:36px;text-align:center;flex-shrink:0; } .lb-rank.gold{color:#F59E0B;} .lb-rank.silver{color:#94A3B8;} .lb-rank.bronze{color:#CA8A04;} .lb-rank.other{color:var(--text-dim);} .lb-av{ width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,var(--crimson),#7B0000); display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;flex-shrink:0;overflow:hidden; } .lb-info{flex:1;} .lb-name{font-size:14px;font-weight:700;margin-bottom:2px;} .lb-xp{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;} .lb-level{ font-family:'Bebas Neue';font-size:18px;font-weight:800; color:var(--crimson); } .lb-level-label{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-align:right;} /* ══════════════════════════════════════ WARNINGS TAB ══════════════════════════════════════ */ .warn-list{display:flex;flex-direction:column;gap:10px;} .warn-card{ background:var(--surface);border:1px solid var(--border); border-radius:14px;overflow:hidden; transition:border-color .2s; } .warn-card:hover{border-color:var(--crimson-border);} .warn-head{ display:flex;align-items:center;gap:12px; padding:14px 18px;border-bottom:1px solid var(--border-2); } .warn-id{ font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:600;letter-spacing:.5px; color:var(--text-dim);flex-shrink:0; } .warn-target{font-size:13px;font-weight:700;flex:1;} .warn-count{ font-family:'Bebas Neue';font-size:14px;font-weight:800;color:var(--yellow); } .warn-count-label{font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;text-align:right;} .warn-body{padding:12px 18px;} .warn-entry{ display:flex;align-items:flex-start;gap:12px; padding:8px 0;border-bottom:1px solid var(--border-2); } .warn-entry:last-child{border-bottom:none;} .warn-entry-num{ font-family:'JetBrains Mono',monospace;font-size:10px; font-weight:700;color:var(--crimson); width:20px;flex-shrink:0;padding-top:2px; } .warn-entry-reason{font-size:12px;color:var(--text);flex:1;} .warn-entry-meta{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;white-space:nowrap;} /* ══════════════════════════════════════ AUDIT LOG (dashboard changes feed) ══════════════════════════════════════ */ .audit-list{display:flex;flex-direction:column;} .audit-entry{ display:flex;align-items:flex-start;gap:14px; padding:14px 22px; border-bottom:1px solid var(--border-2); } .audit-entry:last-child{border-bottom:none;} .audit-entry:hover{background:var(--surface-2);} .audit-icon{ font-size:16px;width:32px;height:32px; display:flex;align-items:center;justify-content:center; background:var(--surface-2);border:1px solid var(--border); border-radius:8px;flex-shrink:0; } .audit-body{flex:1;min-width:0;} .audit-line{ font-size:13px;color:var(--text);line-height:1.45; } .audit-line strong{color:var(--text);font-weight:700;} .audit-line .audit-module{ font-family:'JetBrains Mono',monospace; font-size:11px;color:var(--crimson); background:var(--crimson-dim);padding:1px 6px;border-radius:4px; border:1px solid var(--crimson-border); } .audit-details{ font-size:11px;color:var(--text-muted);margin-top:4px; font-family:'JetBrains Mono',monospace; word-break:break-word; } .audit-time{ font-size:10px;color:var(--text-dim); margin-top:6px;font-family:'JetBrains Mono',monospace; } /* ══════════════════════════════════════ MODERATION SEARCH BAR ══════════════════════════════════════ */ .mod-search{ position:relative; margin-bottom:16px; } .mod-search-icon{ position:absolute; left:14px;top:50%;transform:translateY(-50%); font-size:14px;color:var(--text-dim); pointer-events:none; } .mod-search input{ width:100%; padding:10px 14px 10px 40px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:13px;font-family:inherit; outline:none; transition:border-color .15s, box-shadow .15s; } .mod-search input::placeholder{ color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:12px; } .mod-search input:focus{ border-color:var(--crimson-border); box-shadow:0 0 0 3px rgba(232,25,44,0.08); } /* ══════════════════════════════════════ UNIFIED MODERATION CARDS (warnings, bans, mutes) ══════════════════════════════════════ */ .mod-list{display:flex;flex-direction:column;gap:14px;} .mod-card{ background:var(--surface);border:1px solid var(--border); border-radius:14px;overflow:hidden; transition:border-color .2s; } .mod-card:hover{border-color:var(--crimson-border);} .mod-card-head{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 18px;border-bottom:1px solid var(--border-2); } .mod-card-user{flex:1;min-width:0;} .mod-card-name{ font-family:'DM Sans',sans-serif; font-size:14px;font-weight:700;color:var(--text); letter-spacing:.3px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .mod-card-id{ font-family:'JetBrains Mono',monospace; font-size:10px;color:var(--text-muted);margin-top:3px; cursor:pointer;user-select:all; transition:color .12s; } .mod-card-id:hover{color:var(--crimson);} .mod-card-counter{text-align:right;flex-shrink:0;} .mod-card-counter-num{ font-family:'Bebas Neue',sans-serif;font-size:20px;font-weight:800; color:var(--crimson);line-height:1; } .mod-card-counter-label{ font-size:10px;color:var(--text-muted); font-family:'JetBrains Mono',monospace; letter-spacing:.5px;margin-top:4px; } .mod-card-counter-sub{ font-size:9px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-top:2px; } .mod-card-entries{padding:6px 18px 14px;} .mod-entry{ display:flex;align-items:flex-start;gap:14px; padding:14px 0;border-bottom:1px solid var(--border-2); } .mod-entry:last-child{border-bottom:none;} .mod-entry.mod-entry-inactive{opacity:0.7;} .mod-entry-num{ font-family:'JetBrains Mono',monospace;font-size:11px; font-weight:700;color:var(--crimson); min-width:24px;flex-shrink:0;padding-top:2px; } .mod-entry-body{flex:1;min-width:0;} .mod-entry-reason{ font-size:13px;color:var(--text);line-height:1.5; word-break:break-word; display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .mod-entry-meta{ display:flex;flex-direction:column;gap:4px; margin-top:8px; font-size:11px;color:var(--text-muted); } .mod-entry-meta .mod-meta-row strong{ color:var(--text-dim);font-weight:500;margin-right:4px; } .mod-entry-meta .mod-meta-row{ font-family:'JetBrains Mono',monospace; } .mod-pill{ font-size:9px;font-weight:700;letter-spacing:.5px; padding:2px 7px;border-radius:4px; font-family:'JetBrains Mono',monospace; } .mod-pill-active{ background:rgba(220,20,60,0.15);color:#FF6B8A; border:1px solid rgba(220,20,60,0.25); } .mod-pill-inactive{ background:rgba(120,120,120,0.15);color:var(--text-muted); border:1px solid var(--border); } /* ══════════════════════════════════════ EMPTY STATES ══════════════════════════════════════ */ .empty-state{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:64px 32px;text-align:center; background:var(--surface);border:1px solid var(--border);border-radius:16px; } .empty-ic{font-size:48px;margin-bottom:16px;opacity:.4;} .empty-title{font-family:'DM Sans';font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:.5px;} .empty-sub{font-size:13px;color:var(--text-muted);max-width:300px;} /* ══════════════════════════════════════ FEEDS TAB ══════════════════════════════════════ */ .feed-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;} .feed-card{ background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:16px 20px; display:flex;align-items:center;gap:16px; transition:border-color .2s; } .feed-card:hover{border-color:rgba(255,255,255,0.1);} .feed-icon{ width:40px;height:40px;border-radius:10px; background:rgba(232,25,44,0.1); display:flex;align-items:center;justify-content:center; font-size:18px;flex-shrink:0; } .feed-info{flex:1;} .feed-source{font-size:13px;font-weight:700;margin-bottom:4px;font-family:'JetBrains Mono',monospace;} .feed-ch{font-size:11px;color:var(--text-muted);} .feed-status{ font-size:10px;font-weight:700; padding:3px 8px;border-radius:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px;text-transform:uppercase; } .feed-status.on{background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.2);} .feed-status.off{background:var(--surface-3);color:var(--text-dim);border:1px solid var(--border);} .feed-del{ width:30px;height:30px;border-radius:8px; background:rgba(232,25,44,0.08);border:1px solid rgba(232,25,44,0.15); display:flex;align-items:center;justify-content:center; font-size:12px;cursor:pointer;color:var(--crimson); transition:all .2s;flex-shrink:0; } .feed-del:hover{background:var(--crimson);color:#fff;} /* Add Feed form */ .add-feed-panel{ background:var(--surface);border:1px solid var(--border); border-radius:16px;overflow:hidden; } /* ══════════════════════════════════════ OWNER PANEL ══════════════════════════════════════ */ .owner-section{display:none;} .owner-section.visible{display:block;} .sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;} .sys-card{ background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:20px;position:relative;overflow:hidden; } .sys-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;} .sys-card.c-red::before{background:linear-gradient(90deg,var(--crimson),transparent);} .sys-card.c-green::before{background:linear-gradient(90deg,var(--green),transparent);} .sys-card.c-blue::before{background:linear-gradient(90deg,var(--blue),transparent);} .sys-card.c-yellow::before{background:linear-gradient(90deg,var(--yellow),transparent);} .sys-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;} .sys-val{font-family:'Bebas Neue';font-size:28px;font-weight:800;margin-bottom:4px;} .sys-card.c-red .sys-val{color:var(--crimson);} .sys-card.c-green .sys-val{color:var(--green);} .sys-card.c-blue .sys-val{color:var(--blue);} .sys-card.c-yellow .sys-val{color:var(--yellow);} .sys-sub{font-size:11px;color:var(--text-muted);} .sys-bar{height:4px;background:var(--surface-3);border-radius:2px;margin-top:12px;overflow:hidden;} .sys-bar-fill{height:100%;border-radius:2px;transition:width .5s ease;} .sys-card.c-red .sys-bar-fill{background:var(--crimson);} .sys-card.c-green .sys-bar-fill{background:var(--green);} .sys-card.c-blue .sys-bar-fill{background:var(--blue);} .sys-card.c-yellow .sys-bar-fill{background:var(--yellow);} .broadcast-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:24px;} .broadcast-textarea{ width:100%;background:var(--surface-2);border:1px solid var(--border); border-radius:10px;padding:14px;color:var(--text);font-size:14px; font-family:'DM Sans',sans-serif;outline:none;resize:vertical;min-height:100px; transition:border-color .2s; } .broadcast-textarea:focus{border-color:var(--crimson-border);} .broadcast-textarea::placeholder{color:var(--text-dim);} .broadcast-result{ display:none;padding:14px 16px;border-radius:10px;margin-top:12px; font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace; } .broadcast-result.success{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2);color:var(--green);} .broadcast-result.error{background:var(--crimson-dim);border:1px solid var(--crimson-border);color:var(--crimson);} .log-list{display:flex;flex-direction:column;gap:8px;} .log-entry{ background:var(--surface);border:1px solid var(--border); border-radius:12px;padding:14px 18px; } .log-entry-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;} .log-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;} .log-tag.error{background:var(--crimson-dim);color:var(--crimson);border:1px solid var(--crimson-border);} .log-tag.info{background:rgba(99,102,241,0.1);color:#A5B4FC;border:1px solid rgba(99,102,241,0.2);} .log-time{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-left:auto;} .log-msg{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;word-break:break-all;} .history-list{display:flex;flex-direction:column;gap:8px;} .history-entry{ background:var(--surface);border:1px solid var(--border); border-radius:12px;padding:14px 18px; } .history-msg{font-size:13px;color:var(--text);margin-bottom:8px;} .history-meta{display:flex;gap:16px;font-size:11px;font-family:'JetBrains Mono',monospace;} .history-sent{color:var(--green);} .history-failed{color:var(--crimson);} .history-time{color:var(--text-dim);margin-left:auto;} /* Scrollbar */ ::-webkit-scrollbar{width:5px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.1);} /* ══════════════════════════════════════ REACTION ROLES ══════════════════════════════════════ */ .rr-list{display:flex;flex-direction:column;gap:12px;} .rr-card{ background:var(--surface-2);border:1px solid var(--border); border-radius:12px;padding:14px 16px; } .rr-card-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px; margin-bottom:10px; } .rr-card-title{ font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px; } .rr-card-meta{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; } .rr-card-actions{display:flex;gap:4px;flex-shrink:0;} .rr-icon-btn{ width:32px;height:32px;border-radius:8px; background:var(--surface-3);border:1px solid var(--border); color:var(--text);font-size:14px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background .15s, border-color .15s; } .rr-icon-btn:hover:not(:disabled){background:var(--crimson-dim);border-color:var(--crimson-border);} .rr-icon-btn:disabled{opacity:0.4;cursor:not-allowed;} .rr-icon-danger:hover{background:rgba(232,25,44,0.18);border-color:rgba(232,25,44,0.5);} .rr-card-buttons{display:flex;flex-wrap:wrap;gap:6px;} .rr-btn-chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 10px;border-radius:6px; font-size:12px;font-family:'DM Sans',sans-serif; color:#fff;border:1px solid transparent; } .rr-btn-emoji{font-size:13px;} .rr-btn-arrow{opacity:0.55;} .rr-btn-roleref{ font-family:'JetBrains Mono',monospace;font-size:10px;opacity:0.85; background:rgba(255,255,255,0.10);padding:2px 6px;border-radius:4px; } .rr-btn-primary {background:#5865F2;} .rr-btn-secondary{background:#4F545C;} .rr-btn-success {background:#3BA55C;} .rr-btn-danger {background:#ED4245;} .rr-pill{ display:inline-flex;align-items:center; padding:2px 8px;border-radius:100px; font-size:9px;font-weight:700;letter-spacing:1.2px;font-family:'JetBrains Mono',monospace; } .rr-pill-on {background:rgba(59,165,92,0.18);color:#3BA55C;border:1px solid rgba(59,165,92,0.4);} .rr-pill-off {background:rgba(255,170,0,0.14);color:#FFA500;border:1px solid rgba(255,170,0,0.35);} .rr-pill-mode{background:rgba(232,25,44,0.14);color:#E8192C;border:1px solid rgba(232,25,44,0.35);} /* Editor modal */ .rr-modal-overlay{ position:fixed;inset:0;z-index:10000; background:rgba(0,0,0,0.55); display:flex;align-items:center;justify-content:center; padding:20px;backdrop-filter:blur(4px); } .rr-modal{ background:var(--surface);border:1px solid var(--border); border-radius:16px; width:100%;max-width:760px;max-height:90vh; display:flex;flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.5); } html[data-theme="light"] .rr-modal{ background:#FFFFFF;border-color:rgba(10,12,18,0.14); box-shadow:0 20px 60px rgba(10,12,18,0.20); } .rr-modal-head{ display:flex;align-items:center;justify-content:space-between; padding:16px 20px;border-bottom:1px solid var(--border); } .rr-modal-title{font-size:16px;font-weight:600;color:var(--text);} .rr-modal-close{ width:32px;height:32px;border-radius:8px; background:transparent;border:1px solid var(--border); color:var(--text);font-size:18px;cursor:pointer;line-height:1; } .rr-modal-close:hover{background:rgba(232,25,44,0.18);border-color:rgba(232,25,44,0.5);} .rr-modal-body{padding:18px 20px;overflow-y:auto;flex:1 1 auto;} .rr-modal-foot{ display:flex;justify-content:flex-end;gap:8px; padding:14px 20px;border-top:1px solid var(--border); } .rr-mode-row{display:flex;gap:10px;flex-wrap:wrap;} .rr-mode-opt{ flex:1 1 220px;display:flex;align-items:center;gap:10px; padding:10px 12px;border:1px solid var(--border);border-radius:10px; background:var(--surface-2);cursor:pointer;font-size:12px; } .rr-mode-opt input{flex-shrink:0;} .rr-mode-opt:has(input:checked){ border-color:var(--crimson);background:rgba(232,25,44,0.10); } .rr-buttons-list{display:flex;flex-direction:column;gap:8px;} .rr-btn-row{ display:flex;gap:10px;align-items:center; padding:10px;border:1px solid var(--border);border-radius:10px; background:var(--surface-2); } .rr-btn-row-num{ width:24px;height:24px;border-radius:50%; background:var(--crimson);color:#fff; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;flex-shrink:0; } .rr-btn-row-fields{ flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr 1fr 100px;gap:8px; } .rr-btn-row-fields .rr-btn-field label{ display:block;font-size:9px;letter-spacing:1.2px; color:var(--text-dim);text-transform:uppercase;margin-bottom:4px; } .rr-btn-row-controls{display:flex;gap:4px;flex-shrink:0;} @media (max-width: 720px){ .rr-btn-row-fields{grid-template-columns:1fr 1fr;} } .rr-preview{ border:1px solid var(--border);border-radius:10px; padding:14px;background:var(--surface-2); } .rr-preview-embed{ border-left:4px solid var(--crimson); padding:10px 14px;background:var(--surface);border-radius:6px; } html[data-theme="light"] .rr-preview-embed{background:#F4F5F8;} .rr-preview-title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text);} .rr-preview-desc{font-size:13px;color:var(--text);margin-bottom:10px;white-space:pre-wrap;} .rr-preview-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;} .rr-preview-btn{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:6px;color:#fff;font-size:12px;font-weight:500; } .rr-preview-foot{ margin-top:8px;font-size:10px;color:var(--text-dim);font-style:italic; } /* ══════════════════════════════════════ CHANNEL PICKER ══════════════════════════════════════ */ .ch-picker-wrap{position:relative;} /* Multi-channel picker — chips above the picker button */ .multi-ch-picker{position:relative;} .multi-ch-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;min-height:0; } .multi-ch-empty{ font-size:12px;color:var(--text-dim); padding:8px 0;font-style:italic; } .multi-ch-chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 6px 5px 10px;border-radius:100px; background:rgba(232,25,44,0.12); border:1px solid rgba(232,25,44,0.35); font-size:12px;font-family:'JetBrains Mono',monospace; color:var(--text); max-width:100%; } html[data-theme="light"] .multi-ch-chip{ background:rgba(232,25,44,0.10); border-color:rgba(232,25,44,0.30); color:#1a1d24; } .multi-ch-chip-ic{font-size:12px;flex-shrink:0;} .multi-ch-chip-name{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px; } .multi-ch-chip-x{ display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%; background:rgba(255,255,255,0.10);border:none;color:inherit; font-size:14px;line-height:1;cursor:pointer;padding:0; transition:background .15s; } .multi-ch-chip-x:hover{background:rgba(232,25,44,0.4);color:#fff;} html[data-theme="light"] .multi-ch-chip-x{ background:rgba(10,12,18,0.08); } html[data-theme="light"] .multi-ch-chip-x:hover{ background:rgba(232,25,44,0.6);color:#fff; } .ch-picker-btn{ display:flex;align-items:center;gap:8px; background:var(--surface-2);border:1px solid var(--border); border-radius:10px;padding:10px 14px; color:var(--text);font-size:13px; font-family:'JetBrains Mono',monospace; cursor:pointer;transition:border-color .2s;width:100%; text-align:left; } .ch-picker-btn:hover{border-color:var(--crimson-border);} .ch-picker-btn .ch-hash{color:var(--crimson);font-size:14px;flex-shrink:0;} .ch-picker-btn .ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ch-picker-btn .ch-caret{color:var(--text-dim);font-size:10px;flex-shrink:0;} .ch-dropdown{ position:absolute;top:calc(100% + 6px);left:0;right:0; background:var(--surface-2);border:1px solid var(--border); border-radius:12px; /* High z so it floats above sibling cards / sticky sidebars */ z-index:9999; box-shadow:0 16px 48px rgba(0,0,0,0.6); /* Constrain to viewport so very-tall server channel lists don't overflow */ max-height:min(360px,60vh); display:none; flex-direction:column; } .ch-dropdown.open{display:flex;} .ch-search{ padding:10px 12px;border-bottom:1px solid var(--border); flex-shrink:0; } .ch-search input{ width:100%;background:var(--surface-3);border:1px solid var(--border); border-radius:8px;padding:7px 12px;color:var(--text);font-size:12px; font-family:'JetBrains Mono',monospace;outline:none; } .ch-search input::placeholder{color:var(--text-dim);} .ch-list{ flex:1 1 auto;min-height:0; overflow-y:auto; /* Custom scrollbar so users see the scroll affordance */ scrollbar-width:thin; scrollbar-color:rgba(220,20,60,0.5) transparent; } .ch-list::-webkit-scrollbar{width:8px;} .ch-list::-webkit-scrollbar-track{background:transparent;} .ch-list::-webkit-scrollbar-thumb{ background:rgba(220,20,60,0.4);border-radius:4px; } .ch-list::-webkit-scrollbar-thumb:hover{background:rgba(220,20,60,0.6);} .ch-category{ font-family:'JetBrains Mono',monospace; font-size:10px;font-weight:600;letter-spacing:2px; text-transform:uppercase;color:var(--text-muted); padding:10px 14px 4px; } .ch-item{ display:flex;align-items:center;gap:8px; padding:8px 14px;cursor:pointer;transition:background .15s; font-size:13px;font-family:'JetBrains Mono',monospace; } .ch-item:hover{background:var(--surface-3);} .ch-item.selected{color:var(--crimson);} .ch-item-hash{color:var(--text-dim);font-size:13px;flex-shrink:0;} .ch-item-name{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ch-clear{ font-size:11px;color:var(--text-dim);padding:8px 14px; border-top:1px solid var(--border);cursor:pointer; transition:color .15s;text-align:center; } .ch-clear:hover{color:var(--crimson);} /* ══════════════════════════════════════ MENTION AUTOCOMPLETE ══════════════════════════════════════ */ .mention-wrap{position:relative;} .mention-dropdown{ position:absolute;bottom:calc(100% + 6px);left:0;right:0; background:var(--surface-2);border:1px solid var(--border); border-radius:12px;z-index:9999;overflow:hidden; box-shadow:0 -8px 32px rgba(0,0,0,0.5); display:none; } .mention-dropdown.open{display:block;} .mention-item{ display:flex;align-items:center;gap:10px; padding:9px 14px;cursor:pointer;transition:background .15s; } .mention-item:hover,.mention-item.active{background:var(--surface-3);} .mention-tag{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700; color:var(--crimson);background:var(--crimson-dim); padding:2px 7px;border-radius:5px;border:1px solid var(--crimson-border); flex-shrink:0; } .mention-desc{font-size:12px;color:var(--text-muted);} /* ═════ WELCOME PREVIEW ═════ */ .welcome-msg-wrap .mention-dropdown{ max-height:240px;overflow-y:auto; } .welcome-preview-card{position:sticky;top:20px;} .welcome-preview{ display:flex;background:var(--surface-3);border-radius:8px; overflow:hidden;border:1px solid var(--border); } .welcome-preview-bar{ width:4px;background:#DC143C;flex-shrink:0; } .welcome-preview-body{ flex:1;padding:14px 16px;font-size:13px;line-height:1.45; min-width:0; } .welcome-preview-author{ display:flex;align-items:center;gap:8px;margin-bottom:8px; } .welcome-preview-avatar{ width:24px;height:24px;border-radius:50%; background:linear-gradient(135deg,#DC143C,#8B0000);flex-shrink:0; } .welcome-preview-author-name{ font-size:12px;font-weight:600;color:var(--text-muted); } .welcome-preview-title{ font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px; word-break:break-word; } .welcome-preview-desc{ font-size:13px;color:var(--text);margin-bottom:10px; white-space:pre-wrap;word-break:break-word; } .welcome-preview-desc .mention{ background:rgba(220,20,60,0.15);color:#FF6B8A; padding:0 3px;border-radius:3px;font-weight:500; } .welcome-preview-desc .ch-mention{ background:rgba(88,101,242,0.15);color:#7289DA; padding:0 3px;border-radius:3px;font-weight:500; } .welcome-preview-fields{ display:flex;gap:18px;margin-bottom:10px;flex-wrap:wrap; } .welcome-preview-field-name{ font-size:11px;font-weight:700;color:var(--text);margin-bottom:2px; } .welcome-preview-field-val{ font-size:12px;color:var(--text-muted); } .welcome-preview-footer{ font-size:11px;color:var(--text-dim);padding-top:8px; border-top:1px solid rgba(255,255,255,0.05); } .welcome-ch-item-hash{color:var(--text-muted);margin-right:4px;} /* ═════ MESSAGE-BUBBLE PREVIEW (birthdays, feeds, anything text-only) ═════ */ .preview-side{position:sticky;top:20px;} .msg-bubble{ display:flex;gap:12px;padding:12px 14px; background:var(--surface-3);border:1px solid var(--border); border-radius:8px; } .msg-bubble-avatar{ width:36px;height:36px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#DC143C,#8B0000); } .msg-bubble-body{flex:1;min-width:0;} .msg-bubble-author{ display:flex;align-items:center;gap:6px;margin-bottom:3px; } .msg-bubble-name{ font-size:13px;font-weight:600;color:#FF6B8A; } .msg-bubble-badge{ font-size:9px;font-weight:700;color:#FFFFFF; background:#5865F2;padding:1px 5px;border-radius:3px; letter-spacing:0.5px; } .msg-bubble-time{ font-size:11px;color:var(--text-dim);margin-left:4px; } .msg-bubble-content{ font-size:13px;line-height:1.45;color:var(--text); word-break:break-word;white-space:pre-wrap; } .msg-bubble-content .mention{ background:rgba(220,20,60,0.15);color:#FF6B8A; padding:0 3px;border-radius:3px;font-weight:500; } .msg-bubble-content .ch-mention{ background:rgba(88,101,242,0.15);color:#7289DA; padding:0 3px;border-radius:3px;font-weight:500; } /* ═════ BOT SUGGESTIONS ═════ */ .botsugg-list{display:flex;flex-direction:column;gap:12px;} .botsugg-card{ background:var(--surface-2);border:1px solid var(--border); border-radius:10px;padding:16px 18px; } .botsugg-head{ display:flex;justify-content:space-between;align-items:flex-start; gap:12px;margin-bottom:8px; } .botsugg-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-dim);} .botsugg-meta strong{color:var(--text-muted);font-weight:500;} .botsugg-id{ font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--text-dim);background:var(--surface-3); padding:2px 6px;border-radius:4px; } .botsugg-status{ font-size:10px;font-weight:700;letter-spacing:0.6px; padding:3px 8px;border-radius:5px;flex-shrink:0; } .botsugg-status.pending{background:rgba(245,158,11,0.15);color:#F59E0B;} .botsugg-status.approved{background:rgba(16,185,129,0.15);color:#10B981;} .botsugg-status.rejected{background:rgba(239,68,68,0.15);color:#EF4444;} .botsugg-text{ font-size:14px;color:var(--text);line-height:1.5; white-space:pre-wrap;word-break:break-word; padding:8px 0;border-top:1px solid var(--border);margin-top:4px; } .botsugg-decision{ margin-top:8px;padding-top:10px;border-top:1px solid var(--border); font-size:12px;color:var(--text-muted); } .botsugg-decision-reason{ font-size:12px;color:var(--text-dim);font-style:italic;margin-top:4px; } .botsugg-actions{display:flex;gap:8px;margin-top:12px;} .botsugg-btn{ padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600; border:1px solid;cursor:pointer;font-family:inherit; } .botsugg-btn.approve{ background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);color:#10B981; } .botsugg-btn.approve:hover{background:rgba(16,185,129,0.2);} .botsugg-btn.reject{ background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:#EF4444; } .botsugg-btn.reject:hover{background:rgba(239,68,68,0.2);} /* ═════ POLLS LIST ═════ */ .poll-list{display:flex;flex-direction:column;gap:14px;} .poll-card{ background:var(--surface-2);border:1px solid var(--border); border-radius:12px;padding:18px 20px; } .poll-card-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:14px; margin-bottom:6px; } .poll-card-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0;} .poll-card-status{ font-size:10px;font-weight:700;letter-spacing:0.6px; padding:3px 8px;border-radius:5px;flex-shrink:0; } .poll-card-status.active{background:rgba(16,185,129,0.15);color:#10B981;} .poll-card-status.ended{background:rgba(120,120,120,0.15);color:var(--text-muted);} .poll-card-q{ font-size:15px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .poll-card-actions{display:flex;gap:6px;} .poll-del{ background:transparent;border:none;color:var(--text-muted); cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px; } .poll-del:hover{background:rgba(220,20,60,0.15);color:#FF6B8A;} .poll-card-meta{ display:flex;flex-wrap:wrap;gap:8px; font-size:11px;color:var(--text-dim); margin-bottom:14px; } .poll-options-list{display:flex;flex-direction:column;gap:8px;} .poll-option-head{ display:flex;justify-content:space-between; font-size:12px;margin-bottom:4px; } .poll-option-name{color:var(--text);font-weight:500;} .poll-option-count{color:var(--text-muted);} .poll-option-bar{ height:6px;background:var(--surface-3); border-radius:3px;overflow:hidden; } .poll-option-fill{ height:100%; background:linear-gradient(90deg,#DC143C,#FF6B8A); transition:width 0.3s ease; } .poll-option-voters{ font-size:10px;color:var(--text-dim); margin-top:6px;line-height:1.5; display:flex;flex-wrap:wrap;gap:4px; } .poll-voter-pill{ background:var(--surface-3); padding:2px 8px;border-radius:10px; font-family:'JetBrains Mono',monospace; } .poll-scheduled-row{ display:flex;align-items:center;gap:12px; padding:12px 14px;margin-bottom:8px; background:var(--surface-2);border:1px solid var(--border);border-radius:8px; } .poll-scheduled-row:last-child{margin-bottom:0;} .poll-scheduled-info{flex:1;min-width:0;} .poll-scheduled-q{ font-size:13px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px; } .poll-scheduled-meta{font-size:11px;color:var(--text-dim);} .poll-scheduled-actions{display:flex;gap:6px;} .poll-scheduled-btn{ background:var(--surface-3);color:var(--text); border:1px solid var(--border);border-radius:6px; padding:6px 12px;font-size:11px;cursor:pointer;font-family:inherit; } .poll-scheduled-btn.publish:hover{background:#10B981;border-color:#10B981;color:white;} .poll-scheduled-btn.cancel:hover{background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.5);color:#EF4444;} /* ═════ POLL MAKER PREVIEW ═════ */ .poll-preview-card{ display:flex;background:var(--surface-3);border-radius:8px; overflow:hidden;border:1px solid var(--border);min-height:120px; } .poll-preview-bar{ width:4px;background:#DC143C;flex-shrink:0; } .poll-preview-body{flex:1;padding:14px 18px;min-width:0;} .poll-preview-author{ display:flex;align-items:center;gap:8px;margin-bottom:10px; } .poll-preview-avatar{ width:24px;height:24px;border-radius:50%;flex-shrink:0; background:linear-gradient(135deg,#DC143C,#8B0000); } .poll-preview-name{ font-size:12px;font-weight:600;color:#FF6B8A; } .poll-preview-badge{ font-size:9px;font-weight:700;color:#fff; background:#5865F2;padding:1px 5px;border-radius:3px; } .poll-preview-title{ font-size:15px;font-weight:600;color:var(--text);margin-bottom:10px; word-break:break-word; } .poll-preview-options{ display:flex;flex-direction:column;gap:6px;margin-bottom:10px; } .poll-preview-opt{ display:flex;align-items:center;gap:8px; background:var(--surface-2);border:1px solid var(--border); padding:7px 12px;border-radius:6px;font-size:13px; } .poll-preview-opt-emoji{ font-size:14px;flex-shrink:0;width:18px;text-align:center; } .poll-preview-opt-text{flex:1;color:var(--text);word-break:break-word;} .poll-preview-footer{ font-size:11px;color:var(--text-dim); border-top:1px solid rgba(255,255,255,0.05);padding-top:8px; } .poll-preview-options .mention{ background:rgba(220,20,60,0.15);color:#FF6B8A; padding:0 3px;border-radius:3px;font-weight:500; } .poll-preview-options .ch-mention{ background:rgba(88,101,242,0.15);color:#7289DA; padding:0 3px;border-radius:3px;font-weight:500; } .poll-preview-options .everyone-mention{ background:rgba(245,158,11,0.15);color:#F59E0B; padding:0 3px;border-radius:3px;font-weight:500; } .poll-preview-title .mention, .poll-preview-title .ch-mention, .poll-preview-title .everyone-mention{ font-size:14px;padding:0 4px; } /* ═════ BACKUP MODULE ═════ */ .backup-grid{ display:grid;grid-template-columns:1fr 1fr;gap:20px; } @media (max-width:1100px){ .backup-grid{grid-template-columns:1fr;} } .backup-row{ display:flex;align-items:center;gap:12px; padding:10px 14px;margin-bottom:8px; background:var(--surface-2);border:1px solid var(--border);border-radius:8px; } .backup-row-info{flex:1;min-width:0;} .backup-row-name{ font-size:12px;font-weight:600;color:var(--text); font-family:'JetBrains Mono',monospace; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .backup-row-meta{ font-size:11px;color:var(--text-dim);margin-top:2px; } .backup-row-actions{display:flex;gap:6px;} .backup-btn-sm{ background:var(--surface-3);color:var(--text); border:1px solid var(--border);border-radius:6px; padding:5px 12px;font-size:11px;cursor:pointer; text-decoration:none;display:inline-block; } .backup-btn-sm:hover{background:var(--crimson);border-color:var(--crimson);} .backup-empty{ font-size:12px;color:var(--text-dim); text-align:center;padding:24px 14px; background:var(--surface-2);border:1px dashed var(--border);border-radius:8px; } /* ═════ AUTO ROLE LIST ═════ */ .autorole-list{display:flex;flex-direction:column;gap:8px;} .autorole-row{ display:flex;align-items:center;gap:12px; padding:12px 14px;border-radius:10px; background:var(--surface-2);border:1px solid var(--border); } .autorole-row .ar-dot{ width:12px;height:12px;border-radius:50%;flex-shrink:0; background:#7289DA; } .autorole-row .ar-name{ flex:1;font-size:13px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .autorole-row select.ar-target{ background:var(--surface-3);color:var(--text); border:1px solid var(--border);border-radius:6px; padding:5px 8px;font-size:12px;font-family:inherit; } .autorole-row .ar-remove{ background:transparent;border:none;color:var(--text-muted); cursor:pointer;font-size:18px;padding:4px 8px;border-radius:6px; } .autorole-row .ar-remove:hover{background:rgba(220,20,60,0.15);color:#FF6B8A;} .autorole-empty{ text-align:center;padding:24px 18px; font-size:13px;color:var(--text-dim); background:var(--surface-2);border:1px dashed var(--border); border-radius:10px; } /* ══════════════════════════════════════ RESPONSIVE — tablet and phone breakpoints for the new Tier 1 + Tier 2 modules ══════════════════════════════════════ */ /* Tablet — stack the 2-column settings layouts so info cards drop below the config panel instead of squeezing it. */ @media (max-width: 980px) { .settings-layout { grid-template-columns: 1fr; } .module-grid { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .sys-grid { grid-template-columns: 1fr 1fr; } .dash-topbar { padding: 14px 20px; } .page-header { padding: 18px 20px 0; } .config-panel, .info-card { border-radius: 12px; } } /* Tighter phone breakpoint — collapse every interior grid to one column, hide the desktop sidebar (users can still navigate by URL or once we add a hamburger), and shrink modal padding. The trade-off: no in-page tab switching on small phones — that needs a hamburger which is a JS change. */ @media (max-width: 680px) { .sidebar { display: none; } .dash-topbar { padding: 12px 16px; } .topbar-section { font-size: 11px; } .topbar-guild { display: none; } .page-header { padding: 16px 16px 0; } .page-title { font-size: 22px; } .cp-body, .cp-head { padding-left: 16px; padding-right: 16px; } .stat-grid { grid-template-columns: 1fr; } .sys-grid { grid-template-columns: 1fr; } .fields-grid { grid-template-columns: 1fr; } /* Reaction-role builder: stack the button-row fields and controls */ .rr-btn-row { flex-direction: column; align-items: stretch; } .rr-btn-row-num { align-self: flex-start; } .rr-btn-row-fields { grid-template-columns: 1fr; } .rr-btn-row-controls { justify-content: flex-end; } /* Reaction-role card list: action buttons drop below the title */ .rr-card-head { flex-direction: column; align-items: stretch; } .rr-card-actions { justify-content: flex-end; } /* Auto-mod: the per-rule grids (3-column inputs) collapse */ .field-row[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Modal: more breathing room on a small screen */ .rr-modal { max-height: 95vh; } .rr-modal-body { padding: 14px 16px; } .rr-modal-foot { padding: 12px 16px; flex-wrap: wrap; } .rr-modal-foot .save-btn { flex: 1 1 100%; } /* Multi-channel chips wrap more aggressively */ .multi-ch-chip-name { max-width: 140px; } /* Page header sub-title can wrap onto multiple lines */ .page-sub { font-size: 12px; line-height: 1.4; } } /* ████████████████████████████████████████████████████████████████████████████ CRIMSON RESKIN LAYER · 2026-06 · dark-only Appended after the original sheet so these rules win on equal specificity. Restyles chrome (sidebar/topbar/picker), the Overview centerpiece, the Statistics area, and the responsive drawer. Nothing here renames an element id — it only reshapes wrappers + repaints surfaces. ████████████████████████████████████████████████████████████████████████████ */ /* ─── Atmosphere ─────────────────────────────────────────────────────────── Layered crimson + gold radial wash with a very slow drift, plus a fine grain overlay for depth. Sits behind everything (z-index 0). */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 600px at 78% -8%, rgba(232,25,44,0.16), transparent 60%), radial-gradient(700px 520px at 8% 4%, rgba(232,25,44,0.08), transparent 58%), radial-gradient(800px 600px at 92% 108%, rgba(255,215,0,0.05), transparent 60%); animation: ovx-drift 26s var(--ease) infinite alternate; } @keyframes ovx-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-22px,0); } } .bg-glow{ background:radial-gradient(circle, rgba(232,25,44,0.10) 0%, transparent 70%); width:720px; height:720px; } .bg-glow-2{ background:radial-gradient(circle, rgba(255,215,0,0.045) 0%, transparent 70%); } .bg-grid{ opacity:.6; } /* Keep real content above the wash */ #view-picker, #view-dashboard, .dash-main, .sidebar{ position:relative; z-index:1; } /* ─── Reusable glass-card mixin via class ─────────────────────────────────── */ .ovx-card{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%), var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg); backdrop-filter:blur(14px) saturate(1.1); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .ovx-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--stroke-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none; transition:opacity .35s var(--ease); } .ovx-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-glow); border-color:var(--crimson-border); } .ovx-card:hover::before{ opacity:1; } /* ═══════════════════ SIDEBAR / CHROME ═══════════════════ */ .sidebar{ background: linear-gradient(180deg, rgba(232,25,44,0.05), transparent 220px), rgba(11,13,18,0.86); border-right:1px solid var(--glass-brd); backdrop-filter:blur(18px); } /* Desktop app-shell: lock the dashboard to one viewport tall so the sidebar is full-height and ONLY .dash-main scrolls. Without this the sidebar relies on `position:sticky`, which breaks when the body is the scroller (e.g. "Request Desktop Site" on a phone, where body{overflow-x:hidden} makes the body scroll) — leaving the sidebar scrolled away with an empty column beneath it. */ @media (min-width:901px){ #view-dashboard.active{ height:100vh; min-height:0; overflow:hidden; } .sidebar{ height:100vh; position:relative; top:auto; } .dash-main{ height:100vh; } } .server-switcher{ background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:var(--r-md); transition:border-color .3s var(--ease), background .3s var(--ease); } .server-switcher:hover{ border-color:var(--crimson-border); background:rgba(232,25,44,0.06); } .nav-group-header{ border-radius:var(--r-sm); letter-spacing:.5px; } .nav-group-count{ background:rgba(255,255,255,0.05); color:var(--text-dim); border-radius:999px; padding:1px 7px; font-size:10px; } .nav-item{ border-radius:var(--r-sm); transition:background .2s var(--ease), color .2s var(--ease), padding .2s var(--ease); } .nav-item:hover{ background:rgba(255,255,255,0.045); } .nav-item.active{ background:linear-gradient(90deg, rgba(232,25,44,0.18), rgba(232,25,44,0.04)); color:#fff; box-shadow:inset 0 0 0 1px var(--crimson-border); } .nav-item.active::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; border-radius:0 3px 3px 0; background:var(--grad-crimson); box-shadow:0 0 10px var(--glow-crimson); } .nav-item{ position:relative; } /* Sidebar tier badge — crimson for Premium, gold for Ultimate (set via data-tier in B4) */ #nav-billing-tier{ background:rgba(255,255,255,0.06); color:var(--text-muted); border:1px solid var(--glass-brd); border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.6px; padding:2px 8px; } #nav-billing-tier[data-tier="tier2"]{ background:var(--grad-crimson); color:#fff; border-color:transparent; box-shadow:0 4px 14px -4px var(--glow-crimson); } #nav-billing-tier[data-tier="tier3"]{ background:var(--grad-gold); color:#1a1206; border-color:transparent; box-shadow:0 4px 14px -4px rgba(255,215,0,.4); } /* Generic premium nav badge pills (PREMIUM / ULTIMATE) */ .nav-badge{ border-radius:999px; font-weight:800; letter-spacing:.5px; } .nav-badge.tier-premium{ background:var(--grad-crimson); color:#fff; } .nav-badge.tier-ultimate{ background:var(--grad-gold); color:#1a1206; } /* Topbar — glass bar + hamburger */ .dash-topbar{ background:rgba(8,10,14,0.72); backdrop-filter:blur(18px) saturate(1.1); border-bottom:1px solid var(--glass-brd); } .topbar-section{ font-family:'Bebas Neue',sans-serif; letter-spacing:2px; background:linear-gradient(90deg,#fff,var(--crimson-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .topbar-guild{ background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:999px; } .dash-hamburger{ display:none; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; margin-right:6px; background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:12px; color:var(--text); font-size:18px; cursor:pointer; transition:.2s var(--ease); } .dash-hamburger:hover{ border-color:var(--crimson-border); color:#fff; } .dash-scrim{ display:none; position:fixed; inset:0; z-index:40; background:rgba(4,5,8,0.6); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s var(--ease); } .dash-scrim.show{ display:block; opacity:1; } /* ═══════════════════ OVERVIEW CENTERPIECE ═══════════════════ */ .ovx{ display:flex; flex-direction:column; gap:30px; } .ovx > *{ animation:ovx-rise .55s var(--ease-out) both; } .ovx > *:nth-child(1){ animation-delay:.02s; } .ovx > *:nth-child(2){ animation-delay:.07s; } .ovx > *:nth-child(3){ animation-delay:.12s; } .ovx > *:nth-child(4){ animation-delay:.17s; } .ovx > *:nth-child(5){ animation-delay:.22s; } .ovx > *:nth-child(6){ animation-delay:.27s; } @keyframes ovx-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } /* Greeting hero */ .ovx-hero{ position:relative; overflow:hidden; padding:30px 32px; border-radius:var(--r-xl); background: radial-gradient(560px 280px at 88% -40%, rgba(232,25,44,0.22), transparent 60%), linear-gradient(120deg, rgba(20,23,31,0.86), rgba(12,14,19,0.86)); border:1px solid var(--glass-brd); box-shadow:var(--shadow-md); } .ovx-hero::after{ content:""; position:absolute; right:-60px; top:-80px; width:320px; height:320px; background:radial-gradient(circle, rgba(232,25,44,0.28), transparent 65%); filter:blur(6px); pointer-events:none; } .ovx-hero-greet{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--crimson-2); display:flex; align-items:center; gap:8px; margin-bottom:8px; } .ovx-hero-title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(34px,5vw,52px); line-height:.98; letter-spacing:1px; color:#fff; margin:0; background:linear-gradient(90deg,#fff 30%, #FFD9DD 70%, var(--crimson-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .ovx-hero-meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--text-muted); } .ovx-hero-meta b{ color:var(--text); font-weight:700; } .ovx-hero-meta .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); margin-right:7px; vertical-align:middle; } /* Stat cards */ .ovx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .ovx-stat{ padding:20px; border-radius:var(--r-lg); } .ovx-stat-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:19px; margin-bottom:16px; background:var(--crimson-dim); color:var(--crimson-2); box-shadow:inset 0 0 0 1px var(--crimson-border); } .ovx-stat.c-members .ovx-stat-ic{ background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); } .ovx-stat.c-warns .ovx-stat-ic{ background:rgba(245,158,11,0.14); color:#fbbf24; box-shadow:inset 0 0 0 1px rgba(245,158,11,.3); } .ovx-stat.c-mutes .ovx-stat-ic{ background:rgba(20,184,166,0.14); color:#2dd4bf; box-shadow:inset 0 0 0 1px rgba(20,184,166,.3); } .ovx-stat-val{ font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:1; color:#fff; letter-spacing:1px; } .ovx-stat-lbl{ margin-top:6px; font-size:13px; font-weight:600; color:var(--text); } .ovx-stat-sub{ margin-top:2px; font-size:11px; color:var(--text-dim); } .ovx-stat .soon{ font-size:9px; font-weight:800; letter-spacing:.5px; color:var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:1px 7px; } /* Community banner */ .ovx-banner{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--r-lg); background: radial-gradient(400px 200px at 0% 0%, rgba(232,25,44,0.2), transparent 60%), linear-gradient(120deg, rgba(20,23,31,0.9), rgba(12,14,19,0.9)); border:1px solid var(--crimson-border); } .ovx-banner-ic{ width:48px; height:48px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; font-size:24px; background:var(--grad-crimson); box-shadow:0 8px 24px -6px var(--glow-crimson); } .ovx-banner-tx{ flex:1; } .ovx-banner-tx h3{ margin:0; font-size:16px; color:#fff; } .ovx-banner-tx p{ margin:3px 0 0; font-size:13px; color:var(--text-muted); } .ovx-banner-btn{ flex-shrink:0; padding:11px 20px; border-radius:12px; border:none; cursor:pointer; background:var(--grad-crimson); color:#fff; font-weight:700; font-size:13px; text-decoration:none; box-shadow:0 8px 22px -8px var(--glow-crimson); transition:.25s var(--ease); } .ovx-banner-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px var(--glow-crimson); } /* Low / out-of AI Action Points warning banner (amber when low, red when out) */ .ovx-apwarn{ display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:18px; border-radius:var(--r-lg); background: radial-gradient(420px 200px at 0% 0%, rgba(245,176,65,0.18), transparent 62%), linear-gradient(120deg, rgba(28,24,14,0.92), rgba(14,13,10,0.92)); border:1px solid rgba(245,176,65,0.45); } /* The display:flex above outranks the UA [hidden]{display:none}, so the JS `hidden` toggle wouldn't actually hide it — re-assert it explicitly. */ .ovx-apwarn[hidden]{ display:none; } .ovx-apwarn[data-level="out"]{ background: radial-gradient(420px 200px at 0% 0%, rgba(232,25,44,0.24), transparent 62%), linear-gradient(120deg, rgba(30,16,18,0.94), rgba(15,11,12,0.94)); border-color:var(--crimson-border); } .ovx-apwarn-ic{ width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center; font-size:23px; background:linear-gradient(135deg,#F5B041,#C77F12); box-shadow:0 8px 24px -8px rgba(245,176,65,0.5); } .ovx-apwarn[data-level="out"] .ovx-apwarn-ic{ background:var(--grad-crimson); box-shadow:0 8px 24px -6px var(--glow-crimson); } .ovx-apwarn-tx{ flex:1; } .ovx-apwarn-tx h3{ margin:0; font-size:16px; color:#fff; } .ovx-apwarn-tx p{ margin:3px 0 0; font-size:13px; color:var(--text-muted); } .ovx-apwarn-btn{ flex-shrink:0; padding:11px 20px; border-radius:12px; border:none; cursor:pointer; background:linear-gradient(135deg,#F5B041,#C77F12); color:#1a1206; font-weight:700; font-size:13px; text-decoration:none; box-shadow:0 8px 22px -8px rgba(245,176,65,0.5); transition:.25s var(--ease); } .ovx-apwarn[data-level="out"] .ovx-apwarn-btn{ background:var(--grad-crimson); color:#fff; box-shadow:0 8px 22px -8px var(--glow-crimson); } .ovx-apwarn-btn:hover{ transform:translateY(-2px); } @media (max-width:640px){ .ovx-apwarn{ flex-wrap:wrap; } .ovx-apwarn-btn{ width:100%; text-align:center; } } /* Section header */ .ovx-sec{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:-12px; } .ovx-sec-title{ display:flex; align-items:center; gap:10px; font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:1.5px; color:#fff; } .ovx-sec-title .ic{ color:var(--crimson-2); } .ovx-pill{ font-family:'DM Sans',sans-serif; font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--crimson-2); background:var(--crimson-dim); border:1px solid var(--crimson-border); border-radius:999px; padding:2px 9px; } .ovx-sec-link{ font-size:12px; color:var(--text-dim); } /* Recommendations */ .ovx-recs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; } .ovx-rec{ padding:18px; border-radius:var(--r-md); display:flex; flex-direction:column; gap:14px; } .ovx-rec-top{ display:flex; gap:13px; } .ovx-rec-ic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; font-size:17px; } .ovx-rec-ic.red{ background:var(--crimson-dim); color:var(--crimson-2); box-shadow:inset 0 0 0 1px var(--crimson-border); } .ovx-rec-ic.orange{ background:rgba(249,115,22,0.14); color:#fb923c; box-shadow:inset 0 0 0 1px rgba(249,115,22,.3); } .ovx-rec-ic.blue{ background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); } .ovx-rec-ic.gold{ background:var(--gold-dim); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(255,215,0,.3); } .ovx-rec-title{ font-size:14px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .ovx-rec-tag{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; border-radius:999px; padding:2px 7px; } .ovx-rec-tag.high{ background:var(--crimson-dim); color:var(--crimson-2); } .ovx-rec-tag.medium{ background:rgba(245,158,11,0.14); color:#fbbf24; } .ovx-rec-tag.low{ background:rgba(99,102,241,0.14); color:#8b8df6; } .ovx-rec-body{ margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--text-muted); } .ovx-rec-cta{ align-self:flex-start; font-size:12px; font-weight:700; color:var(--crimson-2); cursor:pointer; transition:gap .2s var(--ease); display:inline-flex; align-items:center; gap:5px; } .ovx-rec:hover .ovx-rec-cta{ gap:9px; } /* Manage by Area */ .ovx-areas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } .ovx-area{ padding:0; overflow:hidden; border-radius:var(--r-lg); } .ovx-area-head{ position:relative; padding:18px 18px 16px; overflow:hidden; } .ovx-area-glow{ position:absolute; inset:0; opacity:.5; pointer-events:none; } .ovx-area.protection .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(232,25,44,0.5), transparent 70%); } .ovx-area.engagement .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(249,115,22,0.45), transparent 70%); } .ovx-area.community .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(99,102,241,0.45), transparent 70%); } .ovx-area.growth .ovx-area-glow{ background:radial-gradient(140px 90px at 85% 0%, rgba(168,85,247,0.45), transparent 70%); } .ovx-area-name{ position:relative; font-size:15px; font-weight:800; color:#fff; } .ovx-area-count{ position:relative; margin-top:3px; font-size:11px; color:var(--text-muted); } .ovx-area-items{ padding:6px; display:flex; flex-direction:column; } .ovx-area-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text); transition:background .18s var(--ease); } .ovx-area-item:hover{ background:rgba(255,255,255,0.045); } .ovx-area-item .lhs{ display:flex; align-items:center; gap:9px; min-width:0; } .ovx-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex-shrink:0; transition:.2s var(--ease); } .ovx-dot.on{ background:var(--green); box-shadow:0 0 8px var(--green); } .ovx-reco-label{ font-size:9px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--crimson-2); background:var(--crimson-dim); border-radius:999px; padding:2px 7px; flex-shrink:0; } /* Quick Actions */ .ovx-qa{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; } .ovx-qa-item{ display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); cursor:pointer; transition:.25s var(--ease); } .ovx-qa-item:hover{ transform:translateY(-2px); border-color:var(--crimson-border); background:rgba(232,25,44,0.06); } .ovx-qa-ic{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; font-size:18px; background:var(--crimson-dim); box-shadow:inset 0 0 0 1px var(--crimson-border); } .ovx-qa-name{ font-size:13px; font-weight:700; color:#fff; } .ovx-qa-sub{ font-size:11px; color:var(--text-dim); } .ovx-qa-arrow{ margin-left:auto; color:var(--crimson-2); transition:transform .2s var(--ease); } .ovx-qa-item:hover .ovx-qa-arrow{ transform:translateX(3px); } /* ═══════════════════ STATISTICS AREA ═══════════════════ */ .statx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } .statx-card{ padding:20px; border-radius:var(--r-lg); } .statx-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:18px; margin-bottom:14px; background:rgba(99,102,241,0.14); color:#8b8df6; box-shadow:inset 0 0 0 1px rgba(99,102,241,.3); } .statx-card.teal .statx-ic{ background:rgba(20,184,166,0.14); color:#2dd4bf; box-shadow:inset 0 0 0 1px rgba(20,184,166,.3); } .statx-card.green .statx-ic{ background:rgba(16,185,129,0.14); color:#34d399; box-shadow:inset 0 0 0 1px rgba(16,185,129,.3); } .statx-card.gold .statx-ic{ background:var(--gold-dim); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(255,215,0,.3); } .statx-val{ font-family:'Bebas Neue',sans-serif; font-size:38px; line-height:1; color:#fff; letter-spacing:1px; } .statx-lbl{ margin-top:6px; font-size:12px; font-weight:600; color:var(--text); } .statx-sub{ margin-top:2px; font-size:11px; color:var(--text-dim); } .statx-soon{ position:relative; padding:40px 20px; border-radius:var(--r-lg); border:1px dashed var(--border); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--text-dim); } .statx-soon .badge{ font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--crimson-2); background:var(--crimson-dim); border:1px solid var(--crimson-border); border-radius:999px; padding:3px 10px; } /* ═══════════════════ RESPONSIVE / MOBILE DRAWER ═══════════════════ */ @media (max-width:900px){ .dash-hamburger{ display:flex; } /* Off-canvas drawer. display:flex !important overrides the older `@media (max-width:680px){ .sidebar{ display:none } }` rule that predates the hamburger — without it the drawer would open to nothing on phones. */ .sidebar{ display:flex !important; position:fixed; top:0; left:0; bottom:0; z-index:50; width:min(86vw,300px); transform:translateX(-104%); transition:transform .34s var(--ease-out); box-shadow:24px 0 60px rgba(0,0,0,0.5); } .sidebar.is-open{ transform:translateX(0); } body.drawer-open{ overflow:hidden; } /* Pin the topbar on mobile. Sticky fails here because .dash-main owns the sticky context (overflow-y:auto) but the BODY is what actually scrolls, so the bar scrolls away with the page and the hamburger goes out of reach. Fixed + content padding keeps ☰ always tappable. z below the scrim (40) so it dims when the drawer is open. */ .dash-topbar{ position:fixed !important; top:0; left:0; right:0; z-index:30; padding-top:env(safe-area-inset-top, 0px); } .dash-content{ padding-top:calc(env(safe-area-inset-top, 0px) + 72px); } /* Stack the audit-log + suggestion two-column row (it has an inline 2fr/1fr). */ .overview-grid{ grid-template-columns:1fr !important; } .ovx-stats{ grid-template-columns:repeat(2,1fr); } .ovx-hero{ padding:24px 20px; } .ovx-banner{ flex-wrap:wrap; } .ovx-banner-btn{ width:100%; text-align:center; } } @media (max-width:520px){ .ovx-stats{ grid-template-columns:1fr; } .ovx-sec{ flex-direction:column; align-items:flex-start; gap:2px; } /* Audit controls stack so the filter dropdown isn't crushed next to search */ .audit-controls{ flex-wrap:wrap; } .audit-filter-sel{ max-width:none; flex:1; } /* Quick-action + area + recs already auto-fit to 1 column at this width */ .ovx-qa-name, .ovx-stat-val{ font-size: clamp(13px, 4vw, 16px); } } /* ═══════════════════ AUDIT LOG CONTROLS ═══════════════════ */ .audit-controls{ display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--glass-brd); } .audit-search-box{ flex:1; display:flex; align-items:center; gap:8px; background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:10px; padding:0 12px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .audit-search-box:focus-within{ border-color:var(--crimson-border); box-shadow:0 0 0 3px var(--crimson-dim); } .audit-search-ic{ font-size:12px; opacity:.6; } .audit-search-box input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; padding:9px 0; } .audit-search-box input::placeholder{ color:var(--text-dim); } .audit-filter-sel{ background:var(--glass-2); border:1px solid var(--glass-brd); border-radius:10px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:13px; padding:9px 12px; cursor:pointer; max-width:160px; transition:border-color .2s var(--ease); } .audit-filter-sel:hover{ border-color:var(--crimson-border); } .audit-filter-sel:focus{ outline:none; border-color:var(--crimson-border); } .audit-more-btn{ display:block; width:100%; padding:11px; border:none; cursor:pointer; background:rgba(255,255,255,0.02); border-top:1px solid var(--glass-brd); color:var(--crimson-2); font-family:'DM Sans',sans-serif; font-weight:700; font-size:12px; letter-spacing:.3px; transition:background .2s var(--ease); } .audit-more-btn:hover{ background:var(--crimson-dim); } /* Audit entries — slightly richer rows + hover */ .audit-entry{ transition:background .18s var(--ease); border-radius:10px; } .audit-entry:hover{ background:rgba(255,255,255,0.03); } .audit-module{ color:var(--crimson-2); font-weight:600; } /* ═══════════════════ EXTRA POLISH — "go all out" ═══════════════════ */ /* Animated shimmer across the hero title */ .ovx-hero-title{ background-size:200% auto; animation:ovx-shimmer 6s linear infinite; } @keyframes ovx-shimmer{ to{ background-position:200% center; } } /* Hero gets a faint moving scanline sheen */ .ovx-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.04) 45%, transparent 60%); background-size:250% 100%; animation:ovx-sheen 7s var(--ease) infinite; } @keyframes ovx-sheen{ 0%{ background-position:140% 0; } 60%,100%{ background-position:-40% 0; } } /* Light sweep across glass cards on hover */ .ovx-card{ overflow:hidden; } .ovx-card > *{ position:relative; z-index:1; } .ovx-card::after{ content:""; position:absolute; top:0; left:-60%; width:50%; height:100%; z-index:0; background:linear-gradient(100deg, transparent, rgba(255,255,255,0.06), transparent); transform:skewX(-18deg); opacity:0; transition:none; pointer-events:none; } .ovx-card:hover::after{ animation:ovx-swipe .8s var(--ease) forwards; } @keyframes ovx-swipe{ from{ left:-60%; opacity:1; } to{ left:130%; opacity:1; } } /* Recommendation cards get a left priority accent bar */ .ovx-rec{ position:relative; } .ovx-rec::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--text-dim); opacity:.5; } .ovx-rec:has(.ovx-rec-tag.high)::before{ background:var(--grad-crimson); opacity:1; box-shadow:0 0 12px var(--glow-crimson); } .ovx-rec:has(.ovx-rec-tag.medium)::before{ background:linear-gradient(180deg,#fbbf24,#F59E0B); opacity:1; } .ovx-rec:has(.ovx-rec-tag.low)::before{ background:linear-gradient(180deg,#8b8df6,#6366F1); opacity:1; } /* Stat numbers get a crimson-to-white vertical gradient + tabular figures */ .ovx-stat-val, .statx-val{ background:linear-gradient(180deg,#fff, #FFD9DD); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-variant-numeric:tabular-nums; } /* Sidebar active item — soft breathing glow on the accent bar */ .nav-item.active::before{ animation:ovx-pulse 2.6s var(--ease) infinite; } @keyframes ovx-pulse{ 0%,100%{ box-shadow:0 0 8px var(--glow-crimson); } 50%{ box-shadow:0 0 16px var(--glow-crimson); } } /* Custom scrollbars to match the theme */ .dash-main::-webkit-scrollbar, .sidebar::-webkit-scrollbar{ width:10px; } .dash-main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track{ background:transparent; } .dash-main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(232,25,44,0.4), rgba(232,25,44,0.15)); border-radius:999px; border:2px solid transparent; background-clip:padding-box; } .dash-main::-webkit-scrollbar-thumb:hover{ background:var(--crimson); background-clip:padding-box; } /* Clickable stat cards — route to their module on click */ .statx-clickable{ cursor:pointer; } .statx-clickable .statx-sub, .statx-clickable .ovx-stat-sub{ color:var(--crimson-2); transition:color .2s var(--ease), letter-spacing .2s var(--ease); } .statx-clickable:hover .statx-sub, .statx-clickable:hover .ovx-stat-sub{ letter-spacing:.3px; } .statx-clickable:active{ transform:translateY(-1px) scale(.99); } /* ═══════════════════ CUSTOM BACKGROUND — "Crimson Aurora" ═══════════════════ A designed, layered backdrop instead of flat black: a deep graded base, two slow-drifting crimson/maroon aurora blobs, a center-weighted crimson dot lattice, and a fine film-grain overlay for texture. All fixed + pointer-none, sitting behind the z-index:1 app shell. */ body{ background: radial-gradient(1300px 760px at 50% -12%, #170a0e 0%, transparent 56%), radial-gradient(900px 700px at 100% 100%, #120a10 0%, transparent 60%), linear-gradient(180deg, #0a0b11 0%, #070809 58%, #050506 100%) !important; background-attachment:fixed !important; } /* Film grain */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px; } /* Aurora blobs — reuse the existing fixed bg elements, supersized + drifting */ .bg-glow{ top:-300px; right:-240px; width:880px; height:880px; filter:blur(22px); background:radial-gradient(circle, rgba(232,25,44,0.24) 0%, rgba(232,25,44,0.07) 38%, transparent 70%); animation:ovx-aurora-1 26s var(--ease) infinite alternate; } .bg-glow-2{ bottom:-320px; left:-220px; width:820px; height:820px; filter:blur(26px); background:radial-gradient(circle, rgba(176,22,52,0.18) 0%, rgba(255,215,0,0.045) 46%, transparent 72%); animation:ovx-aurora-2 33s var(--ease) infinite alternate; } @keyframes ovx-aurora-1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-70px,46px) scale(1.14); } } @keyframes ovx-aurora-2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(58px,-34px) scale(1.1); } } /* Center-weighted crimson dot lattice */ .bg-grid{ background-image:radial-gradient(rgba(232,25,44,0.11) 1px, transparent 1.5px); background-size:28px 28px; opacity:.55; -webkit-mask:radial-gradient(circle at 50% 24%, #000 0%, rgba(0,0,0,0.35) 48%, transparent 78%); mask:radial-gradient(circle at 50% 24%, #000 0%, rgba(0,0,0,0.35) 48%, transparent 78%); } /* Respect reduced-motion preference — kill the looping/atmosphere animations */ @media (prefers-reduced-motion: reduce){ body::after, .bg-glow, .bg-glow-2, .ovx-hero-title, .ovx-hero::before, .ovx-card::after, .nav-item.active::before, .ovx > *{ animation:none !important; } .ovx > *{ opacity:1 !important; transform:none !important; } } /* ████████████████████████████████████████████████████████████████████████████ COMMAND DECK — Crimson's signature overview hero (replaces the generic greeting + stat-card row). Asymmetric: big branded vitals on the left, a gamified "Readiness" ring on the right. This is the part that makes the dashboard read as Crimson, not a notoq clone. ████████████████████████████████████████████████████████████████████████████ */ .cmd-deck{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:32px 34px; border-radius:var(--r-xl); background: radial-gradient(600px 320px at 80% -30%, rgba(232,25,44,0.28), transparent 62%), linear-gradient(120deg, rgba(22,10,13,0.92), rgba(10,11,16,0.92)); border:1px solid var(--glass-brd); box-shadow:var(--shadow-md); } .cmd-deck::before{ /* angled crimson edge strip */ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad-crimson); box-shadow:0 0 26px var(--glow-crimson); } .cmd-deck::after{ /* faint scan sheen */ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.035) 48%, transparent 62%); background-size:250% 100%; animation:ovx-sheen 8s var(--ease) infinite; } /* Giant clipped CRIMSON wordmark watermark behind the deck */ .cmd-emblem{ position:absolute; right:-12px; bottom:-34px; z-index:0; pointer-events:none; font-family:'Bebas Neue',sans-serif; font-size:150px; line-height:.8; letter-spacing:6px; color:transparent; -webkit-text-stroke:1.5px rgba(232,25,44,0.10); user-select:none; white-space:nowrap; } .cmd-left{ position:relative; z-index:1; min-width:0; } .cmd-eyebrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--crimson-2); margin-bottom:10px; } .cmd-tick{ width:9px; height:9px; border-radius:2px; background:var(--grad-crimson); box-shadow:0 0 10px var(--glow-crimson); } .cmd-sep{ color:var(--text-dim); } .cmd-title{ margin:0; font-family:'Bebas Neue',sans-serif; line-height:.92; letter-spacing:1px; font-size:clamp(40px,5.5vw,68px); background:linear-gradient(92deg,#fff 24%, #FFD9DD 62%, var(--crimson-2)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:ovx-shimmer 7s linear infinite; } .cmd-online{ margin-top:12px; font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; } .cmd-online-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:ovx-pulse-dot 2s var(--ease) infinite; } @keyframes ovx-pulse-dot{ 0%,100%{ box-shadow:0 0 8px var(--green); } 50%{ box-shadow:0 0 16px var(--green); } } .cmd-hide{ display:none; } /* Vitals strip — editorial, divided by hairlines (not boxed cards) */ .cmd-vitals{ display:flex; flex-wrap:wrap; gap:0; margin-top:20px; } .cmd-vital{ position:relative; padding:4px 22px; } .cmd-vital:first-child{ padding-left:0; } .cmd-vital + .cmd-vital::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:linear-gradient(180deg, transparent, var(--glass-brd), transparent); } .cmd-vital-num{ font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,#FFD9DD); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .cmd-vital-lbl{ margin-top:3px; font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-dim); } .cmd-vital.statx-clickable .cmd-vital-lbl{ color:var(--crimson-2); } .cmd-vital.statx-clickable:hover{ transform:translateY(-2px); } .cmd-vital{ transition:transform .2s var(--ease); } /* Readiness ring */ .cmd-right{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; } .cmd-ring{ position:relative; width:140px; height:140px; } .cmd-ring svg{ width:100%; height:100%; transform:rotate(-90deg); } .cmd-ring-track{ fill:none; stroke:rgba(255,255,255,0.06); stroke-width:9; } .cmd-ring-fill{ fill:none; stroke:url(#cmdRingGrad); stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--glow-crimson)); transition:stroke-dashoffset 1.1s var(--ease-out); } .cmd-ring-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 22px; box-sizing:border-box; text-align:center; } .cmd-ring-pct{ font-family:'Bebas Neue',sans-serif; font-size:34px; line-height:1; color:#fff; letter-spacing:1px; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,0.55), 0 0 14px rgba(255,255,255,0.18); } .cmd-ring-cap{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:1.5px; color:var(--text-dim); margin-top:3px; white-space:nowrap; } .cmd-rank{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:2px; padding:4px 12px; border-radius:999px; border:1px solid var(--crimson-border); background:var(--crimson-dim); color:var(--crimson-2); } .cmd-rank[data-rank="EXPOSED"]{ color:#ff5a68; border-color:rgba(255,45,66,.4); background:rgba(255,45,66,.1); } .cmd-rank[data-rank="DEVELOPING"]{ color:#fb923c; border-color:rgba(249,115,22,.4); background:rgba(249,115,22,.1); } .cmd-rank[data-rank="ESTABLISHED"]{ color:#8b8df6; border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.1); } .cmd-rank[data-rank="FORTIFIED"]{ color:#34d399; border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.1); } .cmd-rank[data-rank="FORTRESS"]{ color:var(--gold); border-color:rgba(255,215,0,.45); background:var(--gold-dim); } .cmd-armed{ font-size:11.5px; color:var(--text-muted); } .cmd-armed b{ color:var(--text); font-variant-numeric:tabular-nums; } /* Tactical section titles — crimson tick + mono feel */ .ovx-sec-title{ position:relative; padding-left:14px; } .ovx-sec-title::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:2px; background:var(--grad-crimson); box-shadow:0 0 10px var(--glow-crimson); } .ovx-sec-title .ic{ display:none; } /* replaced by the tick bar */ /* Command Deck responsive */ @media (max-width:760px){ .cmd-deck{ grid-template-columns:1fr; gap:22px; padding:26px 20px; text-align:left; } .cmd-right{ flex-direction:row; align-items:center; gap:16px; justify-content:flex-start; flex-wrap:wrap; } .cmd-ring{ width:112px; height:112px; } .cmd-ring-pct{ font-size:30px; } .cmd-emblem{ font-size:104px; bottom:-22px; } } @media (max-width:420px){ .cmd-vital{ padding:4px 14px; } .cmd-vital-num{ font-size:28px; } } @media (prefers-reduced-motion: reduce){ .cmd-deck::after, .cmd-title, .cmd-online-dot, .cmd-ring-fill{ animation:none !important; transition:none !important; } } /* ═══════════════════════════════════════════════════════════════════ LEVEL ROLE REWARDS (auto-rank roles) — Levels tab ═══════════════════════════════════════════════════════════════════ */ .lvl-rewards-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0 14px; } .lvl-rewards-empty{ font-size:12px; color:var(--text-dim); padding:14px; text-align:center; border:1px dashed var(--border); border-radius:var(--r-md, 12px); background:rgba(255,255,255,.02); } .lvl-reward-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--r-md, 12px); background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition:border-color .15s var(--ease, ease), transform .15s var(--ease, ease); } .lvl-reward-row:hover{ border-color:rgba(232,25,44,.45); transform:translateX(2px); } .lvl-reward-lv{ flex:0 0 auto; font-weight:800; font-size:12px; letter-spacing:.04em; color:#fff; padding:3px 9px; border-radius:999px; background:var(--grad-crimson, linear-gradient(135deg,#E8192C,#b3101f)); box-shadow:0 2px 8px rgba(232,25,44,.3); } .lvl-reward-arrow{ color:var(--text-dim); font-size:13px; flex:0 0 auto; } .lvl-reward-chip{ display:inline-flex; align-items:center; gap:7px; flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lvl-reward-dot{ font-size:11px; line-height:1; flex:0 0 auto; } .lvl-reward-del{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:all .15s var(--ease, ease); } .lvl-reward-del:hover{ background:rgba(232,25,44,.12); border-color:rgba(232,25,44,.5); color:#ff6b78; } .lvl-reward-add{ display:flex; align-items:stretch; gap:8px; } .lvl-reward-add-level{ flex:0 0 90px; } .lvl-reward-add-level .field-input{ width:100%; } .lvl-reward-add-role{ flex:1 1 auto; min-width:0; } .lvl-reward-add-role .ch-picker-wrap{ width:100%; } .lvl-reward-add-role .ch-picker-btn{ width:100%; } .lvl-reward-add-btn{ flex:0 0 auto; padding:0 18px; border-radius:10px; border:1px solid rgba(232,25,44,.5); cursor:pointer; background:var(--grad-crimson, linear-gradient(135deg,#E8192C,#b3101f)); color:#fff; font-weight:700; font-size:13px; letter-spacing:.02em; transition:filter .15s var(--ease, ease), transform .1s var(--ease, ease); } .lvl-reward-add-btn:hover{ filter:brightness(1.1); } .lvl-reward-add-btn:active{ transform:translateY(1px); } @media (max-width:560px){ .lvl-reward-add{ flex-wrap:wrap; } .lvl-reward-add-level{ flex:1 1 100px; } .lvl-reward-add-role{ flex:1 1 100%; order:3; } } /* ████████████████████████████████████████████████████████████████████████████ CRIMSON MODULE POLISH LAYER · 2026-06-15 Appended last so it wins on equal specificity. Elevates the SHARED component primitives (every module uses these) + a richer living background. No element id is renamed; this only repaints surfaces. ████████████████████████████████████████████████████████████████████████████ */ /* ─── Living background: deeper base + translucent cards so the aurora shows through instead of reading as flat black. ─────────────────────────────── */ body{ background: radial-gradient(1200px 820px at 82% -12%, rgba(232,25,44,0.14) 0%, transparent 58%), radial-gradient(1000px 760px at 6% 6%, rgba(124,18,40,0.12) 0%, transparent 55%), radial-gradient(1100px 900px at 100% 105%, rgba(176,22,52,0.10) 0%, transparent 60%), linear-gradient(180deg, #0b0d13 0%, #08090e 55%, #060709 100%) !important; background-attachment:fixed !important; } /* Stronger aurora blobs */ .bg-glow{ background:radial-gradient(circle, rgba(232,25,44,0.30) 0%, rgba(232,25,44,0.09) 40%, transparent 70%) !important; } .bg-glow-2{ background:radial-gradient(circle, rgba(176,22,52,0.22) 0%, rgba(255,215,0,0.05) 46%, transparent 72%) !important; } .bg-grid{ opacity:.7 !important; } /* Soft vignette so edges fall off and content pops */ .dash-content::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(125% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%); } /* ─── Cards → glass. Translucent surfaces let the background glow through. ── */ .config-panel, .info-card, .module-card{ background:linear-gradient(180deg, rgba(24,28,38,0.78), rgba(14,17,24,0.82)) !important; border:1px solid rgba(255,255,255,0.07) !important; border-radius:18px !important; -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 44px -28px rgba(0,0,0,0.9) !important; position:relative; } /* Gradient top hairline for that premium edge-lit look */ .config-panel::before, .info-card::before, .module-card::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(232,25,44,0.55), rgba(255,255,255,0.18), transparent); opacity:.8; pointer-events:none; } .module-card{ transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .module-card:hover{ transform:translateY(-3px); border-color:rgba(232,25,44,0.35) !important; box-shadow:0 26px 50px -26px rgba(0,0,0,0.95), 0 0 0 1px rgba(232,25,44,0.18) !important; } /* ─── Module header: crimson emblem bar + gradient divider ───────────────── */ .cp-head{ position:relative; padding:22px 24px !important; } .cp-head::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(232,25,44,0.4), rgba(255,255,255,0.06) 40%, transparent); } .cp-title-row{ position:relative; } .cp-title-row::before{ content:""; width:4px; height:17px; border-radius:3px; flex-shrink:0; background:var(--grad-crimson); box-shadow:0 0 12px rgba(232,25,44,0.55); } .cp-title{ font-size:15px !important; letter-spacing:.4px !important; } /* ─── Page header: bigger title + gradient accent rule ───────────────────── */ .page-title{ font-size:30px !important; letter-spacing:1.5px !important; line-height:1.05; background:linear-gradient(180deg, #fff 0%, #d6d9e0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#fff; } .page-header{ position:relative; } .page-header::after{ content:""; display:block; width:48px; height:3px; margin-top:14px; border-radius:2px; background:var(--grad-crimson); box-shadow:0 0 14px rgba(232,25,44,0.6); } /* ─── Section titles: crimson tick before the label ──────────────────────── */ .cp-section-title{ color:var(--text-muted); } .cp-section-title::before{ content:""; width:14px; height:2px; border-radius:2px; flex-shrink:0; background:var(--grad-crimson); box-shadow:0 0 8px rgba(232,25,44,0.5); } .cp-section-title::after{ background:linear-gradient(90deg, rgba(255,255,255,0.10), transparent) !important; } /* ─── Inputs: deeper field + crimson focus ring ──────────────────────────── */ .field-input{ background:rgba(10,12,18,0.6) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:11px !important; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease) !important; } .field-input:hover{ border-color:rgba(255,255,255,0.14) !important; } .field-input:focus{ border-color:var(--crimson) !important; background:rgba(14,16,24,0.85) !important; box-shadow:0 0 0 3px rgba(232,25,44,0.16) !important; } /* ─── Channel/role picker buttons: glass + focus ─────────────────────────── */ .ch-picker-btn{ background:rgba(10,12,18,0.6) !important; border:1px solid rgba(255,255,255,0.08) !important; border-radius:11px !important; transition:border-color .18s var(--ease), box-shadow .18s var(--ease) !important; } .ch-picker-btn:hover{ border-color:rgba(232,25,44,0.4) !important; box-shadow:0 0 0 3px rgba(232,25,44,0.08) !important; } .ch-dropdown{ background:rgba(16,19,27,0.96) !important; border:1px solid rgba(255,255,255,0.1) !important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 24px 60px -16px rgba(0,0,0,0.85) !important; } /* ─── Toggle: gradient + glow when on, smoother knob ─────────────────────── */ .toggle-track{ background:rgba(255,255,255,0.07) !important; border:1px solid rgba(255,255,255,0.1) !important; } .toggle-track::before{ background:#cfd3dc !important; box-shadow:0 1px 3px rgba(0,0,0,0.5) !important; } .toggle input:checked+.toggle-track{ background:var(--grad-crimson) !important; border-color:rgba(232,25,44,0.7) !important; box-shadow:0 0 16px -2px rgba(232,25,44,0.6) !important; } .toggle input:checked+.toggle-track::before{ background:#fff !important; } /* ─── Save button: gradient + animated shine sweep ───────────────────────── */ .save-btn{ background:var(--grad-crimson); border-radius:13px; box-shadow:0 8px 22px -10px rgba(232,25,44,0.6); position:relative; overflow:hidden; } .save-btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%); transform:translateX(-120%); transition:transform .6s var(--ease); } .save-btn:hover{ background:var(--grad-crimson); filter:brightness(1.08); box-shadow:0 12px 30px -8px rgba(232,25,44,0.7) !important; } .save-btn:hover::after{ transform:translateX(120%); } /* ─── Badges: refined pills ──────────────────────────────────────────────── */ .cp-badge.on{ background:rgba(16,185,129,0.14) !important; border:1px solid rgba(16,185,129,0.35) !important; box-shadow:0 0 12px -4px rgba(16,185,129,0.5); } .cp-badge.off{ background:rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.1) !important; } /* ─── Info-card stat rows + section titles share the crimson identity ────── */ .info-section-title{ color:var(--text-muted); } /* ─── Logging modules → premium card grid (modlog tab) ───────────────────── */ .module-toggle-list#modlog-modules-list, #modlog-modules-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(248px, 1fr)); gap:14px; } .modlog-card{ background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:14px 15px; transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); position:relative; overflow:hidden; } .modlog-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mc-accent, var(--crimson)); opacity:0; transition:opacity .2s var(--ease); } .modlog-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--mc-accent, #E8192C) 45%, transparent); box-shadow:0 18px 36px -22px rgba(0,0,0,0.95); } .modlog-card.is-on{ border-color:color-mix(in srgb, var(--mc-accent, #E8192C) 40%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mc-accent, #E8192C) 18%, transparent), 0 14px 30px -24px var(--mc-accent, #E8192C); } .modlog-card.is-on::before{ opacity:1; } .modlog-card-head{ display:flex; align-items:center; gap:12px; } .modlog-card-icon{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; border:1px solid rgba(255,255,255,0.1); } .modlog-card-info{ flex:1; min-width:0; } .modlog-card-name{ font-size:14px; font-weight:700; letter-spacing:.2px; } .modlog-card-desc{ font-size:11px; color:var(--text-muted); margin-top:2px; line-height:1.35; } .modlog-card-ch{ margin-top:12px; } .modlog-card-ch .ch-picker-wrap{ width:100%; } .modlog-card-ch .ch-picker-btn{ width:100%; } /* ─── Sidebar scrollbar: slim crimson gradient w/ fade track ─────────────── */ .sb-nav{ scrollbar-width:thin; scrollbar-color:rgba(232,25,44,0.55) transparent; } .sb-nav::-webkit-scrollbar{ width:8px; } .sb-nav::-webkit-scrollbar-track{ background:transparent; margin:6px 0; } .sb-nav::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(255,45,66,0.75), rgba(232,25,44,0.55) 55%, rgba(166,15,30,0.6)); border-radius:99px; border:2px solid transparent; background-clip:padding-box; box-shadow:0 0 10px -2px rgba(232,25,44,0.5); transition:background .2s var(--ease); } .sb-nav::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #FF2D42, #E8192C 55%, #A60F1E); background-clip:padding-box; } /* Match the main content scrollbar to the same identity */ .dash-content::-webkit-scrollbar{ width:10px; } .dash-content::-webkit-scrollbar-track{ background:transparent; } .dash-content::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(232,25,44,0.5), rgba(120,18,40,0.5)); border-radius:99px; border:2px solid transparent; background-clip:padding-box; } .dash-content::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(255,45,66,0.8), rgba(232,25,44,0.7)); background-clip:padding-box; } /* ─── Segmented sub-switcher (Welcome/Goodbye, and any 2-mode module) ─────── */ .seg-switch{ position:relative; display:inline-flex; gap:4px; margin:0 0 22px; padding:5px; border-radius:14px; background:linear-gradient(180deg, rgba(10,12,18,0.7), rgba(14,17,24,0.7)); border:1px solid rgba(255,255,255,0.08); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); } .seg-thumb{ position:absolute; top:5px; left:5px; bottom:5px; width:calc(50% - 5px); border-radius:10px; background:var(--grad-crimson); box-shadow:0 6px 18px -6px rgba(232,25,44,0.7); transition:transform .28s var(--ease), width .28s var(--ease); z-index:0; pointer-events:none; } /* Pre-JS default for a 3-segment switch (JS sizes it from button geometry once the tab is visible). */ .seg-switch.seg-3 .seg-thumb{ width:calc(33.333% - 3.33px); } .seg-btn{ position:relative; z-index:1; flex:1 1 auto; min-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 20px; border:none; background:transparent; cursor:pointer; color:var(--text-muted); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:.4px; border-radius:10px; transition:color .2s var(--ease); } .seg-btn:hover{ color:var(--text); } .seg-btn.active{ color:#fff; } .seg-ic{ font-size:15px; line-height:1; } .seg-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; transition:background .2s var(--ease), box-shadow .2s var(--ease); } .seg-dot.on{ background:#3BD17A; box-shadow:0 0 8px rgba(59,209,122,0.8); } .seg-dot.off{ background:rgba(255,255,255,0.22); } .seg-btn.active .seg-dot.off{ background:rgba(255,255,255,0.5); } /* Panes: only the active one shows */ .wg-pane{ display:none; animation:fadeUp .25s var(--ease) both; } .wg-pane.wg-active{ display:block; } @media (max-width:560px){ .seg-switch{ display:flex; width:100%; } .seg-btn{ min-width:0; padding:9px 12px; } } /* ─── Sidebar clarity: more solid surface + brighter, higher-contrast text ── */ .sidebar{ background: linear-gradient(180deg, rgba(232,25,44,0.06), transparent 220px), rgba(13,15,21,0.96) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-right:1px solid rgba(255,255,255,0.08) !important; } /* Nav links: lighter by default so they read clearly, not greyed-out */ .nav-item{ color:#CDD2DE !important; font-weight:600; } .nav-item .nav-ic{ color:#C2C7D4; } .nav-item:hover{ background:rgba(255,255,255,0.05) !important; color:#FFFFFF !important; } .nav-item:hover .nav-ic{ color:#FFFFFF; } .nav-item.active{ background:var(--crimson-dim) !important; color:#FF5566 !important; border-color:var(--crimson-border) !important; } .nav-item.active .nav-ic{ color:var(--crimson-2); } /* Section / group headers: brighter + crisper */ .nav-group-label, .nav-group-header, .nav-group-title{ color:#9BA2B2 !important; } .nav-group-count{ color:#7E8596 !important; } /* Footer user card: a clear, slightly elevated panel — no fade into the bg */ .sb-foot{ background:rgba(16,19,27,0.98) !important; border-top:1px solid rgba(255,255,255,0.1) !important; box-shadow:0 -8px 20px -12px rgba(0,0,0,0.7); } .sb-user{ border:1px solid transparent; } .sb-user:hover{ background:rgba(255,255,255,0.06) !important; border-color:rgba(255,255,255,0.08); } .sb-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 4px 12px -4px rgba(232,25,44,0.5); } .sb-uname{ color:#F2F4F8 !important; font-size:13px !important; } .sb-tag{ color:#A7AEBD !important; } .sb-logout{ color:#9098A8 !important; } .sb-logout:hover{ color:#FF5566 !important; } /* ─── Welcome embed builder (the embed IS the editor) ────────────────────── */ .emb-canvas{ display:flex; align-items:stretch; background:rgba(8,10,14,0.55); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; } .emb-bar{ flex:0 0 4px; background:var(--grad-crimson); } .emb-main{ flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; gap:13px; } .emb-author{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); } .emb-author-av{ width:22px; height:22px; border-radius:50%; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:12px; } .emb-author-name{ font-weight:600; color:var(--text); } .emb-chip{ font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); padding:2px 7px; border-radius:999px; margin-left:auto; font-family:'JetBrains Mono',monospace; } .emb-grid{ display:flex; gap:14px; align-items:flex-start; } .emb-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:13px; } .emb-region{ display:flex; flex-direction:column; gap:5px; } .emb-tag{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; } .emb-input{ width:100%; background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.13); border-radius:8px; padding:9px 12px; color:var(--text); font-family:inherit; outline:none; transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } .emb-input::placeholder{ color:var(--text-dim); } .emb-input:hover{ border-color:rgba(255,255,255,0.22); } .emb-input:focus{ border-style:solid; border-color:var(--crimson); background:rgba(232,25,44,0.05); box-shadow:0 0 0 3px rgba(232,25,44,0.12); } .emb-input-title{ font-size:16px; font-weight:700; } .emb-input-desc{ font-size:13px; line-height:1.5; resize:vertical; min-height:88px; } .emb-thumb{ flex:0 0 84px; height:84px; border:1px dashed rgba(255,255,255,0.14); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--text-dim); font-size:10px; text-align:center; background:rgba(255,255,255,0.02); } .emb-thumb-ic{ font-size:18px; opacity:.6; } .emb-thumb .emb-chip{ margin-left:0; } .emb-image{ width:100%; min-height:118px; border:1px dashed rgba(255,255,255,0.14); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-dim); font-size:12px; cursor:pointer; background:rgba(255,255,255,0.02); background-size:cover; background-position:center; background-repeat:no-repeat; transition:border-color .18s var(--ease), color .18s var(--ease); position:relative; } .emb-image:hover{ border-color:rgba(232,25,44,0.5); color:var(--text-muted); } .emb-image-clear{ display:none; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:7px; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); color:#fff; font-size:16px; line-height:1; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.15); cursor:pointer; } .emb-image-clear:hover{ background:rgba(232,25,44,0.85); } .emb-image.has-img .emb-image-clear{ display:flex; } .emb-image-ic{ font-size:22px; opacity:.6; } .emb-image.has-img{ min-height:160px; border-style:solid; border-color:rgba(255,255,255,0.12); justify-content:flex-end; align-items:flex-end; padding:10px; } .emb-image.has-img .emb-image-ic{ display:none; } .emb-image.has-img .emb-image-lbl{ background:rgba(0,0,0,0.6); color:#fff; padding:4px 10px; border-radius:7px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .emb-image.has-img .emb-image-lbl::before{ content:"Change image"; } .emb-image.has-img .emb-image-lbl{ font-size:0; } .emb-image.has-img .emb-image-lbl::before{ font-size:11px; } .emb-footer{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); border-top:1px solid rgba(255,255,255,0.06); padding-top:10px; } .emb-footer .emb-chip{ margin-left:auto; } /* Placeholders helper bar */ .emb-ph{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding:10px 14px; border-radius:10px; background:linear-gradient(135deg, rgba(0,176,244,0.07), rgba(88,101,242,0.04)); border:1px solid rgba(88,101,242,0.2); } .emb-ph-title{ font-size:11px; font-weight:700; color:#8aa0ff; font-family:'JetBrains Mono',monospace; } .emb-ph code{ font-size:11px; color:#cbd2ff; background:rgba(255,255,255,0.06); padding:2px 7px; border-radius:6px; font-family:'JetBrains Mono',monospace; } .emb-ph-hint{ font-size:11px; color:var(--text-dim); margin-left:auto; } /* Display-mode visibility (class lives on #wb-stack so editor + preview share it) */ .wb-mode-embed .wb-text-only{ display:none !important; } .wb-mode-text .wb-embed-only{ display:none !important; } /* Text mode softens the canvas into a plain message box */ .wb-mode-text .emb-canvas{ background:rgba(255,255,255,0.02); } .wb-mode-text .emb-bar{ background:rgba(255,255,255,0.1); } .wb-mode-text .emb-input-desc{ min-height:120px; } /* Plain-text preview bubble */ .wprev-text{ background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:14px 16px; } .wprev-text-ping{ font-size:13px; color:var(--text); margin-bottom:6px; } .wprev-text-body{ font-size:14px; color:var(--text); line-height:1.55; white-space:pre-wrap; word-break:break-word; } @media (max-width:560px){ .emb-grid{ flex-direction:column; } .emb-thumb{ flex:0 0 auto; width:100%; height:64px; flex-direction:row; } .emb-ph-hint{ margin-left:0; } } /* ─── My Account: profile hero + sub-section panes ───────────────────────── */ .acct-hero{ display:flex; align-items:center; gap:16px; position:relative; padding:20px 22px; margin-bottom:22px; border-radius:18px; background:linear-gradient(180deg, rgba(232,25,44,0.08), rgba(20,23,31,0.6)); border:1px solid rgba(255,255,255,0.08); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); } .acct-hero-av{ width:64px; height:64px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--crimson), #7B0000); box-shadow:0 0 0 3px rgba(255,255,255,0.1), 0 8px 22px -8px rgba(232,25,44,0.7); } .acct-hero-av img{ width:100%; height:100%; object-fit:cover; } .acct-hero-meta{ flex:1; min-width:0; } .acct-hero-name{ font-family:'DM Sans',sans-serif; font-size:22px; font-weight:800; letter-spacing:.3px; color:#fff; line-height:1.1; } .acct-hero-tag{ font-size:13px; color:var(--text-muted); font-family:'JetBrains Mono',monospace; margin-top:2px; } .acct-hero-badge{ display:inline-block; margin-top:8px; font-size:10px; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace; background:rgba(255,255,255,0.06); color:var(--text-muted); border:1px solid rgba(255,255,255,0.12); } .acct-hero-badge.is-premium{ background:var(--grad-gold); color:#241a00; border-color:transparent; box-shadow:0 0 16px -4px rgba(255,215,0,0.6); } .acct-hero-x{ position:absolute; top:16px; right:18px; width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s var(--ease); } .acct-hero-x:hover{ background:rgba(232,25,44,0.15); border-color:rgba(232,25,44,0.4); color:#ff6b78; } /* Section panes — no fill-mode (avoids the pane getting stuck at opacity:0 when revealed after being hidden). */ .acct-pane{ display:none; } .acct-pane.active{ display:block; animation:fadeUp .25s var(--ease); } .acct-pane .config-panel + .config-panel, .acct-pane #account-transfers-panel, .acct-pane > .config-panel ~ .config-panel{ margin-top:20px; } /* Key/value rows (Account pane) */ .acct-kv{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 2px; border-bottom:1px solid var(--border-2, rgba(255,255,255,0.06)); } .acct-kv:last-of-type{ border-bottom:none; } .acct-kv-k{ font-size:12px; color:var(--text-muted); font-weight:600; letter-spacing:.3px; } .acct-kv-v{ font-size:13px; color:var(--text); font-weight:600; text-align:right; } .acct-mono{ font-family:'JetBrains Mono',monospace; font-weight:500; } /* Reward / link rows (Rewards + About panes) */ .acct-reward{ display:flex; align-items:center; gap:14px; text-decoration:none; padding:14px 16px; border-radius:12px; margin-bottom:10px; background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); border:1px solid rgba(255,255,255,0.08); transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); } .acct-reward:last-child{ margin-bottom:0; } .acct-reward:hover{ transform:translateY(-2px); border-color:rgba(232,25,44,0.35); box-shadow:0 16px 32px -22px rgba(0,0,0,0.9); } .acct-reward-ic{ width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:19px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); } .acct-reward-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .acct-reward-title{ font-size:14px; font-weight:700; color:var(--text); } .acct-reward-desc{ font-size:12px; color:var(--text-muted); } .acct-reward-ext{ color:var(--text-dim); font-size:15px; flex-shrink:0; } .acct-reward:hover .acct-reward-ext{ color:var(--crimson-2); } .acct-reward-note{ margin-top:14px; padding:12px 16px; border-radius:10px; font-size:12px; color:var(--text); background:linear-gradient(135deg, rgba(255,215,0,0.06), rgba(232,25,44,0.04)); border:1px solid rgba(255,215,0,0.18); line-height:1.5; } /* ─── My Account modal ───────────────────────────────────────────────────── */ .acct-modal-overlay{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(4,5,8,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .acct-modal{ width:min(980px, 96vw); max-height:88vh; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; position:relative; background:linear-gradient(180deg, rgba(22,26,34,0.98), rgba(12,14,20,0.99)); border:1px solid rgba(255,255,255,0.1); box-shadow:0 40px 100px -30px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05); animation:acctPop .22s var(--ease); } @keyframes acctPop{ from{ transform:translateY(14px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } } .acct-modal-head{ display:flex; align-items:center; gap:16px; position:relative; flex-shrink:0; padding:22px 24px; border-bottom:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(232,25,44,0.08), transparent); } .acct-modal-head .acct-hero-meta{ flex:1; min-width:0; } .acct-modal-close{ position:absolute; top:18px; right:20px; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s var(--ease); } .acct-modal-close:hover{ background:rgba(232,25,44,0.18); border-color:rgba(232,25,44,0.45); color:#ff6b78; } .acct-modal-body{ display:flex; min-height:0; flex:1; } .acct-modal-nav{ flex:0 0 208px; padding:16px 12px; overflow-y:auto; border-right:1px solid rgba(255,255,255,0.07); background:rgba(0,0,0,0.18); } .acct-modal-nav .nav-item{ margin-bottom:2px; } .acct-modal-content{ flex:1; min-width:0; padding:22px 24px; overflow-y:auto; } .acct-modal-content .config-panel{ background:transparent !important; border:none !important; box-shadow:none !important; } .acct-modal-content .config-panel::before{ display:none; } .acct-modal-content .cp-head{ padding-left:0; padding-right:0; } .acct-modal-content .cp-body{ padding-left:0; padding-right:0; } @media (max-width:720px){ .acct-modal{ width:100%; max-height:92vh; } .acct-modal-body{ flex-direction:column; } .acct-modal-nav{ flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; white-space:nowrap; border-right:none; border-bottom:1px solid rgba(255,255,255,0.07); } .acct-modal-nav .nav-sep{ display:none; } } /* ─── Billing: plan comparison + add-ons ─────────────────────────────────── */ .cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cmp-col{ position:relative; padding:22px 20px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); border:1px solid rgba(255,255,255,0.09); display:flex; flex-direction:column; } .cmp-col-ultimate{ border-color:rgba(255,215,0,0.45); background:linear-gradient(180deg, rgba(255,215,0,0.07), rgba(255,255,255,0.012)); box-shadow:0 18px 40px -28px rgba(255,215,0,0.5); } .cmp-flag{ position:absolute; top:-10px; right:16px; font-size:9px; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace; background:var(--grad-gold); color:#241a00; box-shadow:0 4px 12px -2px rgba(255,215,0,0.6); } .cmp-name{ font-family:'DM Sans',sans-serif; font-size:16px; font-weight:800; color:#fff; } .cmp-price{ font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:1; letter-spacing:1px; color:var(--text); margin-top:6px; } .cmp-price span{ font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:0; } .cmp-tag{ font-size:12px; color:var(--text-muted); margin-top:4px; margin-bottom:14px; } .cmp-feats{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; } .cmp-feats li{ position:relative; padding-left:24px; font-size:13px; color:var(--text); line-height:1.4; } .cmp-feats li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--crimson-2); font-weight:800; } .cmp-feats-gold li::before{ color:var(--gold); } .cmp-cta{ width:100%; } .cmp-cta-gold{ background:var(--grad-gold) !important; color:#241a00 !important; } .cmp-cta-gold::after{ display:none; } .addon-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width:900px){ .addon-grid{ grid-template-columns:1fr 1fr; } } .addon-card{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.02); position:relative; transition:.2s var(--ease); } .addon-card:hover{ border-color:var(--crimson-border); background:rgba(232,25,44,0.04); } .addon-card.is-soon{ filter:saturate(.85); opacity:.92; border-style:dashed; } .addon-buy{ flex-shrink:0; padding:9px 16px; border-radius:10px; border:none; cursor:pointer; background:var(--grad-crimson); color:#fff; font-weight:800; font-size:13px; font-family:'JetBrains Mono',monospace; letter-spacing:.5px; box-shadow:0 6px 18px -8px var(--glow-crimson); transition:.2s var(--ease); } .addon-buy:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px var(--glow-crimson); } .addon-buy:disabled{ opacity:.6; cursor:default; transform:none; } .addon-ic{ width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); } .addon-info{ flex:1; min-width:0; } .addon-title{ font-size:14px; font-weight:700; color:var(--text); } .addon-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; } .addon-soon{ flex-shrink:0; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:999px; font-family:'JetBrains Mono',monospace; background:rgba(255,165,0,0.12); color:#FFB444; border:1px solid rgba(255,165,0,0.3); } .addon-note{ margin-top:14px; padding:12px 16px; border-radius:10px; font-size:12px; color:var(--text); line-height:1.5; background:linear-gradient(135deg, rgba(255,215,0,0.06), rgba(232,25,44,0.04)); border:1px solid rgba(255,215,0,0.18); } @media (max-width:680px){ .cmp-grid, .addon-grid{ grid-template-columns:1fr; } } /* ─── Site-wide mascot watermark (drop file at public/assets/crimson-bg.png) ── */ .bg-mascot{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image:url("/assets/crimson-bg.png"); background-repeat:no-repeat; background-position:center 46%; background-size:min(680px, 58vw); opacity:.22; filter:saturate(1.15) brightness(1.05); } /* ─── Let the mascot watermark + aurora show through the main area ────────── */ .dash-main{ background:transparent !important; } .dash-content{ background:transparent !important; } #view-dashboard, #view-picker, #view-owner{ background:transparent !important; } /* ─── Member Growth analytics (Statistics tab) ───────────────────────────── */ .mgrowth-panel{ padding:18px 20px; } .mgrowth-head{ display:flex; justify-content:flex-end; margin-bottom:14px; } .mgrowth-ranges{ display:inline-flex; gap:4px; padding:4px; border-radius:10px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); } .mgrowth-range{ border:none; background:transparent; cursor:pointer; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; padding:5px 12px; border-radius:7px; transition:all .15s var(--ease); } .mgrowth-range:hover{ color:var(--text); } .mgrowth-range.active{ background:var(--grad-crimson); color:#fff; box-shadow:0 4px 12px -4px rgba(232,25,44,0.6); } .mgrowth-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; } .mgrowth-stat{ padding:14px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); text-align:center; } .mgrowth-stat-val{ font-family:'Bebas Neue',sans-serif; font-size:30px; line-height:1; letter-spacing:1px; color:var(--text); } .mgrowth-stat-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-top:6px; font-weight:600; } .mgrowth-stat.green .mgrowth-stat-val{ color:#3BD17A; } .mgrowth-stat.red .mgrowth-stat-val{ color:#FF5566; } .mgrowth-stat.teal .mgrowth-stat-val{ color:#2DD4BF; } .mgrowth-chart{ width:100%; } .mgrowth-note{ font-size:12px; color:var(--text-muted); margin-top:12px; text-align:center; line-height:1.5; } .cx-svg{ width:100%; height:auto; display:block; } .cx-axislbl{ fill:var(--text-dim); font-size:11px; font-family:'JetBrains Mono',monospace; } .cx-grid{ stroke:rgba(255,255,255,0.08); stroke-width:1; } .cx-empty{ padding:28px 14px; text-align:center; font-size:13px; color:var(--text-muted); } @media (max-width:680px){ .mgrowth-stats{ grid-template-columns:repeat(2,1fr); } } /* ─── Analytics: section subtitle + horizontal bar list (top channels) ────── */ .stx-subtitle{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; font-weight:700; color:var(--text-muted); margin:18px 0 10px; } .cx-barlist{ display:flex; flex-direction:column; gap:8px; } .cx-bar-row{ display:flex; align-items:center; gap:12px; } .cx-bar-label{ flex:0 0 140px; font-size:12px; color:var(--text); font-family:'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cx-bar-track{ flex:1; height:10px; border-radius:99px; background:rgba(255,255,255,0.05); overflow:hidden; } .cx-bar-fill{ height:100%; border-radius:99px; transition:width .4s var(--ease); min-width:3%; } .cx-bar-val{ flex:0 0 auto; min-width:54px; text-align:right; font-size:12px; font-weight:700; color:var(--text); font-family:'JetBrains Mono',monospace; } @media (max-width:560px){ .cx-bar-label{ flex-basis:88px; } } /* ═══════════════════════════════════════════ TICKET ARCHIVE — closed-ticket transcripts ═══════════════════════════════════════════ */ .ticket-archive-search-row{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .ticket-archive-search-row .field-input{ flex:1 1 240px; } .ticket-archive-list{ display:flex; flex-direction:column; gap:8px; } .ta-empty{ font-size:12px; color:var(--text-dim); padding:14px 4px; text-align:center; } .ta-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); cursor:pointer; transition:border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease); } .ta-row:hover{ border-color:var(--crimson); background:var(--crimson-dim); transform:translateX(2px); } .ta-row-main{ flex:1; min-width:0; } .ta-row-id{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--crimson-2); } .ta-row-subject{ font-size:13px; color:var(--text); margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ta-row-meta{ font-size:11px; color:var(--text-dim); } .ta-row-actions{ display:flex; gap:6px; flex:0 0 auto; } /* Conversation viewer (chat-style) */ .ta-viewer-sub{ font-size:11px; color:var(--text-dim); margin-top:3px; } .ta-chat{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow-y:auto; padding-right:4px; } .ta-msg{ padding:9px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--crimson); } .ta-msg-bot{ border-left-color:#5865F2; opacity:0.9; } .ta-msg-head{ display:flex; align-items:center; gap:8px; margin-bottom:3px; } .ta-msg-author{ font-size:12px; font-weight:700; color:var(--text); } .ta-msg-tag{ font-size:9px; font-weight:700; letter-spacing:.5px; background:#5865F2; color:#fff; padding:1px 5px; border-radius:4px; } .ta-msg-time{ font-size:10px; color:var(--text-dim); margin-left:auto; font-family:'JetBrains Mono',monospace; } .ta-msg-body{ font-size:13px; color:var(--text); line-height:1.5; word-break:break-word; } .ta-msg-atts{ margin-top:5px; display:flex; flex-direction:column; gap:3px; } .ta-msg-atts a{ font-size:11px; color:var(--crimson-2); text-decoration:none; } .ta-msg-atts a:hover{ text-decoration:underline; } @media (max-width:560px){ .ta-row-actions{ flex-wrap:wrap; } .ta-chat{ max-height:70vh; } } /* ═══════════════════════════════════════════ MODULE EMBLEMS — per-tab crimson glass icon chip in the page header. Injected by module-emblems.js. Gives every module a designed identity. ═══════════════════════════════════════════ */ .page-header-row{ display:flex; align-items:center; gap:16px; } .page-header-text{ min-width:0; } .page-emblem{ flex:0 0 auto; width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1; background:linear-gradient(160deg, rgba(232,25,44,0.18), rgba(14,17,24,0.55)); border:1px solid rgba(232,25,44,0.34); box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 12px 28px -14px rgba(232,25,44,0.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); position:relative; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .page-emblem::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(82% 80% at 50% 16%, rgba(255,255,255,0.16), transparent 72%); } .tab-page.active .page-emblem{ animation:emblemPop .45s var(--ease) both; } .page-header:hover .page-emblem{ transform:translateY(-2px) rotate(-3deg); border-color:rgba(232,25,44,0.6); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 34px -12px rgba(232,25,44,0.75); } @keyframes emblemPop{ from{ opacity:0; transform:scale(.7) translateY(6px);} to{ opacity:1; transform:scale(1) translateY(0);} } @media (max-width:560px){ .page-emblem{ width:46px; height:46px; font-size:22px; border-radius:13px; } .page-header-row{ gap:12px; } } /* ─── Recurring sub-component polish (applies across all modules) ─────────── */ /* Icon buttons → crimson hover + lift */ .rr-icon-btn{ transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), color .15s var(--ease); } .rr-icon-btn:hover{ border-color:rgba(232,25,44,0.55) !important; background:var(--crimson-dim) !important; color:#fff !important; transform:translateY(-1px); } .rr-icon-danger:hover{ border-color:rgba(232,25,44,0.7) !important; color:var(--crimson-2) !important; } /* Empty states → soft crimson aura behind the glyph so they read intentional */ .empty-state{ background:linear-gradient(180deg, rgba(24,28,38,0.55), rgba(14,17,24,0.6)) !important; border:1px dashed rgba(255,255,255,0.1) !important; } .empty-ic{ opacity:.85 !important; filter:drop-shadow(0 6px 20px rgba(232,25,44,0.45)); } /* Native