html { scroll-behavior:smooth; }
/* ── Dev Mode ── */
.dev-only { position:relative; }
body.dev-mode .dev-only {
border:2px solid rgba(255,165,0,.4) !important;
box-shadow:0 0 20px rgba(255,165,0,.1) !important;
}
body.dev-mode .dev-only::before {
content:'DEV';
position:absolute; top:-10px; right:12px; z-index:10;
padding:2px 8px; border-radius:6px;
font-size:.58rem; font-weight:900; letter-spacing:.1em;
background:linear-gradient(135deg,#ff9500,#ff6a00);
color:#fff; box-shadow:0 2px 8px rgba(255,149,0,.4);
}
body:not(.dev-mode) .dev-only { display:none !important; }
/* ── Bug Report Button ── */
.bug-fab {
position:fixed; bottom:20px; right:20px; z-index:800;
width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.4); font-size:1.1rem;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:all .25s; backdrop-filter:blur(10px);
}
.bug-fab:hover {
background:rgba(255,43,43,.15); border-color:rgba(255,43,43,.3);
color:#ff5b5b; transform:scale(1.1);
box-shadow:0 4px 20px rgba(255,43,43,.2);
}
.bug-overlay {
position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.7);
backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px;
}
.bug-overlay.show { display:flex; }
.bug-modal {
background:linear-gradient(180deg,rgba(30,6,8,.99),rgba(12,3,4,.99));
border:1px solid rgba(255,255,255,.1); border-radius:20px;
width:100%; max-width:480px; box-shadow:0 24px 80px rgba(0,0,0,.7);
animation:pageIn .25s ease;
}
.dev-toggle {
display:flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:8px; cursor:pointer;
font-size:.72rem; font-weight:700; letter-spacing:.06em;
border:1px solid rgba(255,165,0,.25); background:rgba(255,165,0,.08); color:#ff9500;
transition:all .2s;
}
.dev-toggle:hover { background:rgba(255,165,0,.15); }
body.dev-mode .dev-toggle { background:rgba(255,165,0,.2); border-color:rgba(255,165,0,.5); }
body.dev-mode .dev-toggle::after { content:'ON'; }
body:not(.dev-mode) .dev-toggle::after { content:'OFF'; }
:root {
--bg:#070102; --bg2:#130304; --panel:rgba(26,7,8,.8); --panel2:rgba(42,10,12,.92);
--line:rgba(255,255,255,.08); --text:#fff5f5; --muted:#d9b3b3;
--red:#ff2d2d; --red2:#ff5b5b; --red3:#ff8b8b; --silver:#f2f4f8; --steel:#bcc4d2;
--gold:#ffd16a; --green:#8dffc4; --shadow:0 24px 70px rgba(0,0,0,.55);
--glow:0 0 0 1px rgba(255,255,255,.05),0 18px 45px rgba(0,0,0,.42),0 0 40px rgba(255,45,45,.18);
--r-xl:30px; --r-lg:24px; --r-md:18px;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
background:
radial-gradient(circle at 18% 18%, rgba(255,45,45,.18), transparent 28%),
radial-gradient(circle at 82% 16%, rgba(255,255,255,.07), transparent 22%),
radial-gradient(circle at 50% 84%, rgba(255,91,91,.12), transparent 34%),
linear-gradient(180deg, #190304 0%, #090203 56%, #030102 100%);
overflow-x:hidden;
}
body::before, body::after {
content:""; position:fixed; inset:0; pointer-events:none;
}
body::before {
z-index:0;
background:
radial-gradient(ellipse at 20% 0%, rgba(255,43,43,.12), transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(255,91,91,.08), transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.02), transparent 60%);
animation:bgShift 20s ease-in-out infinite;
}
body::after {
z-index:1;
background:
radial-gradient(circle at center 115%, rgba(255,70,70,.14), transparent 30%),
linear-gradient(180deg, transparent 72%, rgba(0,0,0,.38));
}
@keyframes bgShift {
0%,100% { opacity:.8; }
50% { opacity:1; }
}
.bg-scene {
position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0; display:none;
background-image:url("data:image/svg+xml;utf8, ");
background-size:cover; background-position:center bottom;
filter:saturate(1.4) contrast(1.14) brightness(1.02);
}
.bg-scene::before, .bg-scene::after { content:""; position:absolute; inset:0; }
.bg-scene::before {
background:
radial-gradient(circle at 20% 12%, rgba(255,255,255,.75) 0 1px, transparent 2px),
radial-gradient(circle at 80% 18%, rgba(255,255,255,.5) 0 1px, transparent 2px),
radial-gradient(circle at 54% 10%, rgba(255,255,255,.4) 0 1px, transparent 2px),
radial-gradient(circle at 66% 26%, rgba(255,255,255,.36) 0 1px, transparent 2px),
radial-gradient(circle at 33% 30%, rgba(255,255,255,.28) 0 1px, transparent 2px);
animation:starsDrift 22s linear infinite;
opacity:.65;
}
.bg-scene::after {
background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 14%, transparent 86%, rgba(255,255,255,.02));
mix-blend-mode:screen;
}
.scan-overlay {
display:none;
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }
/* Fix dropdown/select styling */
select option { background:#1a0608; color:#fff5f5; }
.filter-chips select { color:var(--text); }
.filter-chips select:focus { border-color:rgba(255,43,43,.3); }
.shell {
position:relative; z-index:3; display:grid; grid-template-columns:280px 1fr; gap:22px; min-height:100vh; padding:22px; padding-top:80px;
}
.sidebar {
position:sticky; top:80px; align-self:start; height:calc(100vh - 100px);
border:1px solid var(--line); border-radius:36px;
background:linear-gradient(180deg, rgba(20,6,8,.94), rgba(10,3,4,.88));
backdrop-filter:blur(18px); box-shadow:var(--shadow); padding:22px; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
isolation:isolate;
}
.brand { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.brand-badge {
width: 64px;
height: 64px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
box-shadow: 0 18px 45px rgba(0,0,0,.4), 0 0 30px rgba(255,43,43,.25);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
animation: logoFloat 6s ease-in-out infinite;
}
.brand-badge img{
width:80%;
height:80%;
object-fit:contain;
filter: drop-shadow(0 0 20px rgba(255,43,43,.5));
}
.brand-badge::before { content:"FM"; position:absolute; inset:0; display:grid; place-items:center; font-weight:900; letter-spacing:.12em; color:white; }
.brand h1 { margin:0; font-size:.88rem; letter-spacing:.1em; text-transform:uppercase; font-family:'Bebas Neue','Impact',sans-serif; font-size:1.1rem; }
.brand p { margin:4px 0 0; color:var(--muted); font-size:.82rem; }
.section-label { color:rgba(255,255,255,.48); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin:18px 0 12px; }
.nav { display:grid; gap:10px; }
.nav a {
color:var(--text); text-decoration:none; display:flex; align-items:center; gap:12px; padding:14px 16px;
border-radius:18px; background:rgba(255,255,255,.02); border:1px solid transparent; transition:.22s ease;
}
.nav a:hover, .nav a.active {
transform:translateX(3px); border-color:rgba(255,255,255,.08);
background:linear-gradient(90deg, rgba(255,43,43,.14), rgba(255,255,255,.05));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 28px rgba(0,0,0,.25);
}
.nav .dot { width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, var(--red), var(--silver)); box-shadow:0 0 18px rgba(255,43,43,.55); }
.side-card, .view-switcher {
border-radius:24px; border:1px solid var(--line); box-shadow:var(--glow);
background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.view-switcher { padding:10px; margin-top:16px; display:grid; gap:8px; }
.view-switcher button {
width:100%; border:1px solid transparent; color:var(--text); background:rgba(255,255,255,.03);
padding:12px 14px; border-radius:16px; text-align:left; font-weight:700; cursor:pointer; transition:.22s ease;
}
.view-switcher button.active, .view-switcher button:hover {
background:linear-gradient(90deg, rgba(255,43,43,.18), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.08);
}
.side-card { margin-top:auto; padding:16px; }
.side-card .title { font-weight:700; margin:0 0 8px; }
.side-card .sub { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0 0 14px; }
.pill-btn, .ghost-btn { padding:12px 16px; border-radius:999px; font-weight:700; letter-spacing:.02em; cursor:pointer; }
.pill-btn { border:0; color:white; background:linear-gradient(135deg, var(--red), var(--red2), var(--silver)); box-shadow:0 12px 30px rgba(255,43,43,.32); }
.ghost-btn { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.035); }
.content { min-width:0; position:relative; }
.topbar {
display:flex; gap:16px; align-items:center; justify-content:space-between;
padding:12px 32px;
position:fixed; top:0; left:0; right:0; z-index:50;
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
background:linear-gradient(180deg, rgba(9,2,3,.75), rgba(9,2,3,.6));
border-bottom:1px solid rgba(255,255,255,.08);
box-shadow:0 4px 30px rgba(0,0,0,.3);
}
.search { flex:1; }
.search-results {
position:absolute; top:calc(100% + 6px); left:0; right:0;
background:rgba(14,4,6,.97); border:1px solid rgba(255,255,255,.1);
border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.6); z-index:300;
overflow:hidden; backdrop-filter:blur(20px); max-height:340px; overflow-y:auto;
}
.sr-item {
display:flex; align-items:center; gap:11px; padding:11px 16px;
cursor:pointer; transition:background .12s; border-bottom:1px solid rgba(255,255,255,.04);
}
.sr-item:last-child { border-bottom:none; }
.sr-item:hover { background:rgba(255,255,255,.05); }
.sr-icon { font-size:1.05rem; flex-shrink:0; width:28px; text-align:center; }
.sr-body { flex:1; min-width:0; }
.sr-title { font-size:.84rem; font-weight:700; color:#fff5f5; }
.sr-sub { font-size:.72rem; color:rgba(255,255,255,.4); margin-top:1px; }
.sr-tag { font-size:.67rem; color:rgba(255,255,255,.28); flex-shrink:0; }
.sr-empty { padding:18px 16px; text-align:center; color:rgba(255,255,255,.3); font-size:.8rem; }
.search input {
width:100%; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text);
border-radius:18px; padding:16px 18px; font-size:.95rem; outline:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.top-actions { display:flex; align-items:center; gap:12px; flex:1; justify-content:flex-end; }
.topbar-welcome { flex-shrink:0; display:flex; align-items:baseline; gap:8px; white-space:nowrap; margin-left:32px; }
.topbar-welcome-line { font-size:1rem; color:rgba(255,255,255,.38); font-weight:700; text-transform:uppercase; letter-spacing:.12em; }
.topbar-welcome-name { font-size:1.15rem; font-weight:900; color:#fff5f5; text-transform:uppercase; letter-spacing:.1em; }
/* ── Notification Bell ── */
.notif-wrap { position:relative; }
.notif-bell {
position:relative; display:flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.09);
background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); cursor:pointer;
transition:background .15s, color .15s;
}
.notif-bell:hover { background:rgba(255,255,255,.08); color:#fff; }
.notif-count {
position:absolute; top:-5px; right:-5px; min-width:16px; height:16px;
background:#ff2d2d; color:#fff; font-size:.6rem; font-weight:800;
border-radius:999px; display:flex; align-items:center; justify-content:center;
padding:0 4px; border:2px solid rgba(9,2,3,1); pointer-events:none;
}
.notif-count:empty, .notif-count[data-zero] { display:none; }
.notif-panel {
position:absolute; top:calc(100% + 10px); right:0; width:320px;
background:rgba(18,5,7,.97); border:1px solid rgba(255,255,255,.1);
border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6); z-index:200;
overflow:hidden; backdrop-filter:blur(20px);
}
.notif-head {
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,.07);
font-size:.78rem; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.06em; text-transform:uppercase;
}
.notif-list { max-height:340px; overflow-y:auto; }
.notif-item {
display:flex; align-items:flex-start; gap:11px; padding:12px 16px;
border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .12s;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:rgba(255,255,255,.04); }
.notif-item.unread { background:rgba(255,43,43,.04); }
.notif-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:.82rem; font-weight:700; color:#fff5f5; margin-bottom:2px; }
.notif-sub { font-size:.73rem; color:rgba(255,255,255,.45); line-height:1.4; }
.notif-time { font-size:.67rem; color:rgba(255,255,255,.28); flex-shrink:0; margin-top:3px; }
.notif-empty { padding:24px 16px; text-align:center; color:rgba(255,255,255,.3); font-size:.8rem; }
/* ── Topbar Avatar ── */
.topbar-avatar {
position:relative; width:38px; height:38px; border-radius:50%;
border:2px solid rgba(141,255,196,.4); flex-shrink:0; overflow:visible;
cursor:pointer; transition:border-color .2s;
}
.topbar-avatar:hover { border-color:rgba(141,255,196,.8); }
.topbar-avatar img, .topbar-avatar > span:first-child {
border-radius:50%; overflow:hidden; display:block;
}
.avatar-online {
position:absolute; bottom:0; right:0; width:10px; height:10px;
border-radius:50%; background:#8dffc4; border:2px solid rgba(9,2,3,1);
animation:pulseGreen 2s ease-in-out infinite;
}
/* ── Avatar Dropdown Menu ── */
.avatar-wrap { position:relative; }
.topbar-avatar { cursor:pointer; }
.avatar-menu {
position:absolute; top:calc(100% + 10px); right:0; width:240px;
background:rgba(14,4,6,.98); border:1px solid rgba(255,255,255,.1);
border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.7);
z-index:300; overflow:hidden; backdrop-filter:blur(24px);
padding-bottom:6px;
}
.av-header {
display:flex; align-items:center; gap:12px; padding:16px 14px 14px;
border-bottom:1px solid rgba(255,255,255,.07);
}
.av-header-avatar {
position:relative; width:40px; height:40px; flex-shrink:0;
border-radius:50%; border:2px solid rgba(141,255,196,.35); overflow:visible;
}
.av-header-avatar img { border-radius:50%; width:100%; height:100%; }
.av-username { font-size:.88rem; font-weight:800; color:#fff5f5; letter-spacing:.02em; }
.av-status { display:flex; align-items:center; gap:5px; font-size:.7rem; color:rgba(255,255,255,.4); margin-top:3px; }
.av-section-label {
font-size:.62rem; font-weight:800; color:rgba(255,255,255,.28);
text-transform:uppercase; letter-spacing:.14em;
padding:10px 14px 4px;
}
.av-divider { height:1px; background:rgba(255,255,255,.06); margin:4px 0; }
.av-item {
display:flex; align-items:center; gap:9px; padding:9px 14px;
font-size:.82rem; font-weight:600; color:rgba(255,255,255,.75);
cursor:pointer; transition:background .12s, color .12s; position:relative;
}
.av-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.av-item-icon { font-size:.9rem; width:18px; text-align:center; flex-shrink:0; }
.av-item-danger { color:rgba(255,80,80,.8); }
.av-item-danger:hover { background:rgba(255,43,43,.12); color:#ff5b5b; }
.av-badge-new {
margin-left:auto; font-size:.58rem; font-weight:800; letter-spacing:.08em;
background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff;
padding:2px 6px; border-radius:999px;
}
.page-stage { position:relative; min-height:calc(100vh - 90px); perspective:1400px; }
.page { display:none; }
.page.active { display:flex; flex-direction:column; gap:22px; animation:pageIn .35s ease; }
.hero {
position:relative; min-height:420px; border-radius:36px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at 20% 20%, rgba(255,43,43,.30), transparent 22%),
radial-gradient(circle at 80% 22%, rgba(255,255,255,.10), transparent 20%),
radial-gradient(circle at 50% 100%, rgba(255,91,91,.28), transparent 40%),
linear-gradient(180deg, rgba(28,7,9,.94), rgba(12,4,5,.94));
box-shadow:var(--shadow); padding:34px; isolation:isolate; backdrop-filter:blur(12px);
}
.hero::before {
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, transparent 72%, rgba(0,0,0,.68)),
radial-gradient(circle at 78% 26%, rgba(255,255,255,.08), transparent 16%);
z-index:0;
}
.hero::after {
content:""; position:absolute; inset:-40% auto auto -20%; width:60%; height:180%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), rgba(255,80,80,.12), transparent);
transform:rotate(18deg); animation:neonSweep 6s linear infinite; z-index:0;
}
.hero-logo {
position:absolute; right:34px; top:26px; width:124px;
filter:drop-shadow(0 0 20px rgba(255,43,43,.28)) drop-shadow(0 0 40px rgba(255,255,255,.12));
opacity:.95; z-index:2;
}
.hero-flare {
position:absolute; inset:0; pointer-events:none; z-index:1; mix-blend-mode:screen;
background:
radial-gradient(circle at 20% 32%, rgba(255,255,255,.22) 0 1.5%, transparent 6%),
radial-gradient(circle at 76% 18%, rgba(255,255,255,.26) 0 1.2%, transparent 6%),
radial-gradient(circle at 88% 74%, rgba(255,80,80,.22) 0 1.2%, transparent 7%),
radial-gradient(circle at 10% 84%, rgba(255,80,80,.18) 0 1%, transparent 6%);
}
.hero > * { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:1.06fr .94fr; gap:20px; height:100%; align-items:end; }
.eyebrow {
display:inline-flex; align-items:center; gap:10px; color:white; padding:9px 14px; border-radius:999px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px;
}
.hero h2 { margin:0; font-size:clamp(2.2rem, 5vw, 4.6rem); line-height:.96; letter-spacing:-.04em; max-width:720px; }
.hero h2 span { background:linear-gradient(90deg, #fff, #ffd6d6 30%, #ff7777 70%, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width:700px; color:#e6c6c6; font-size:1rem; line-height:1.7; margin:18px 0 24px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-meta-bar { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.hero-chip {
padding:11px 14px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
color:#fff0f0; font-size:.86rem; backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,43,43,.08);
}
.hero-visual { position:relative; min-height:300px; display:flex; align-items:end; justify-content:end; gap:14px; perspective:1200px; }
.character-card {
position:relative; display:inline-flex; align-items:end; justify-content:center; min-width:180px; padding:14px;
border-radius:30px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(10px); transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; overflow:hidden; will-change:transform;
}
.character-card::before {
content:""; position:absolute; inset:auto 10% 8px 10%; height:18px; border-radius:999px;
background:radial-gradient(ellipse at center, rgba(255,43,43,.35), transparent 70%); filter:blur(10px); z-index:0;
}
.character-card::after {
content:""; position:absolute; inset:0; background:linear-gradient(130deg, transparent 10%, rgba(255,255,255,.08) 32%, transparent 48%);
opacity:.7; pointer-events:none; transform:translateX(-120%);
}
.character-card:hover {
transform:translateY(-6px) rotateX(2deg); box-shadow:0 28px 70px rgba(0,0,0,.48), 0 0 28px rgba(255,43,43,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.character-card:hover::after { animation:neonSweep 1.2s ease; }
.character-card .parallax {
position:relative; z-index:2; transform-style:preserve-3d; transition:transform .18s ease; display:flex; align-items:end; justify-content:center;
}
.grid-4, .grid-3, .grid-2 { display:grid; gap:18px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.card, .module, .faction-card, .category-block, .side-card { transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; }
.card:hover, .module:hover, .faction-card:hover, .category-block:hover, .side-card:hover {
transform:translateY(-4px); border-color:rgba(255,255,255,.12); box-shadow:0 24px 60px rgba(0,0,0,.36), 0 0 32px rgba(255,43,43,.14);
}
.card {
position:relative; border-radius:var(--r-xl);
background:linear-gradient(180deg, rgba(40,14,16,1), rgba(22,8,10,1));
border:1px solid rgba(255,255,255,.18);
box-shadow:0 0 0 1px rgba(255,43,43,.1), 0 8px 32px rgba(0,0,0,.6), 0 0 30px rgba(255,43,43,.1);
overflow:hidden;
}
.card::before {
content:""; position:absolute; inset:1px; border-radius:calc(var(--r-xl) - 1px); padding:1px;
background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,43,43,.22), rgba(255,255,255,.08), rgba(255,43,43,.12));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
opacity:.72; pointer-events:none;
}
.card::after {
content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 26%); pointer-events:none;
}
.card-header, .card-body { padding:22px; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.06); }
.card-title { margin:0; font-size:1.02rem; letter-spacing:-.02em; }
.card-sub { margin:5px 0 0; color:var(--muted); font-size:.88rem; }
.stat { padding:20px; min-height:142px; }
.stat .mini { color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; margin-bottom:18px; }
.stat .value { font-size:clamp(1.8rem, 3vw, 2.5rem); font-weight:900; line-height:1; margin-bottom:10px; }
.stat .note { color:var(--muted); font-size:.92rem; line-height:1.5; }
.neon-line { position:absolute; inset:auto 18px 18px 18px; height:4px; border-radius:999px; background:linear-gradient(90deg, var(--red), var(--red2), var(--silver)); opacity:.82; filter:blur(.2px); }
.badge {
display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:700; white-space:nowrap; letter-spacing:.01em;
}
@keyframes pulseDot {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.35; transform:scale(.7); }
}
.badge::before {
content:''; display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.b-blue { color:#7ab4ff; }
.b-blue::before { background:#7ab4ff; animation:pulseDot 2.2s ease-in-out infinite; }
.b-pink { color:#ff8080; }
.b-pink::before { background:#ff8080; animation:pulseDot 1.8s ease-in-out infinite; }
.b-gold { color:#ffd16a; }
.b-gold::before { background:#ffd16a; animation:pulseDot 2.4s ease-in-out infinite; }
.b-green { color:#8dffc4; }
.b-green::before { background:#8dffc4; animation:pulseDot 1.9s ease-in-out infinite; }
.b-red { color:#ff5b5b; }
.b-red::before { background:#ff5b5b; animation:pulseDot 1.5s ease-in-out infinite; }
.b-gray { color:rgba(255,255,255,.4); }
.b-gray::before { background:rgba(255,255,255,.35); }
.ticker {
position:relative; overflow:hidden; padding:14px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
background:linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border-radius:22px;
}
.ticker-track { display:flex; width:max-content; gap:26px; animation:marquee 24s linear infinite; padding-left:20px; }
.ticker-item { display:inline-flex; align-items:center; gap:10px; color:#f0e7e7; font-size:.9rem; white-space:nowrap; }
.ticker-item b { color:white; }
.status-board .category { display:grid; gap:12px; }
.category-block { padding:16px; border-radius:22px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.cat-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; }
.cat-title, .faction-name { font-weight:800; letter-spacing:-.02em; }
.faction-meta { color:var(--muted); font-size:.86rem; margin-top:4px; }
.faction-row { display:grid; grid-template-columns:1.2fr auto auto; gap:10px; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.06); }
.faction-row:first-of-type { border-top:0; }
.faction-cards { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.faction-card {
min-height:260px; position:relative; padding:22px; display:flex; flex-direction:column; justify-content:space-between;
border-radius:30px; overflow:hidden; border:1px solid rgba(255,255,255,.2); box-shadow:0 0 0 1px rgba(255,43,43,.12), 0 12px 40px rgba(0,0,0,.6), 0 0 40px rgba(255,43,43,.12);
}
.faction-card::before {
content:""; position:absolute; inset:1px; border-radius:29px; padding:1px;
background:linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,43,43,.24), rgba(255,255,255,.08), rgba(255,43,43,.12));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
opacity:.8; pointer-events:none;
}
.faction-card::after {
content:""; position:absolute; inset:0; background:linear-gradient(130deg, transparent 0 58%, rgba(255,255,255,.05) 65%, transparent 72%); opacity:.75; pointer-events:none;
}
.faction-card.state { background:radial-gradient(circle at 15% 15%, rgba(60,80,180,.25), transparent 40%), linear-gradient(180deg, rgba(35,14,18,1), rgba(18,7,9,1)); }
.faction-card.illegal { background:radial-gradient(circle at 18% 14%, rgba(255,43,43,.3), transparent 40%), linear-gradient(180deg, rgba(50,10,12,1), rgba(25,5,7,1)); }
.faction-card .top { display:flex; justify-content:space-between; gap:16px; align-items:start; }
.logo-mark { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-weight:900; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.faction-card h3 { margin:16px 0 8px; font-size:1.4rem; }
.faction-card p { margin:0; color:#ead1d1; line-height:1.6; max-width:520px; }
.meta-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:20px; }
.meta-grid .box { padding:14px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); }
.meta-grid .box .k { color:rgba(255,255,255,.58); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; }
.meta-grid .box .v { margin-top:6px; font-size:1.1rem; font-weight:800; }
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td { text-align:left; padding:13px 18px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem; }
.table th { color:rgba(255,255,255,.38); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; padding-top:0; padding-bottom:12px; }
.table td:first-child, .table th:first-child { padding-left:4px; }
.table td:last-child, .table th:last-child { padding-right:4px; }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr { transition:background .15s; }
.table tbody tr:hover { background:rgba(255,255,255,.03); }
.progress { width:100%; height:9px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--red), var(--red2), var(--silver)); }
.module-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.module {
position:relative; padding:18px; min-height:170px; border-radius:24px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); overflow:hidden;
}
.module::after {
content:""; position:absolute; inset:1px; border-radius:23px; padding:1px;
background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,43,43,.16), rgba(255,255,255,.06));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
opacity:.7; pointer-events:none;
}
.module .icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.2rem; background:linear-gradient(135deg, rgba(255,43,43,.22), rgba(255,255,255,.14)); margin-bottom:16px; }
.module h4 { margin:0 0 8px; font-size:1rem; }
.module p { margin:0; color:var(--muted); line-height:1.6; font-size:.92rem; }
.foot { text-align:center; color:rgba(255,255,255,.48); padding:8px 0 22px; font-size:.88rem; }
/* ── Login Fullscreen Mode ── */
.shell.login-mode > aside.sidebar { display:none; }
.shell.login-mode { grid-template-columns:1fr; }
body.login-active .topbar { display:none !important; }
#page-login {
position:fixed; inset:0; z-index:500; overflow-y:auto;
background:linear-gradient(160deg,#120204,#0a0303);
display:none; flex-direction:column; align-items:center; justify-content:center; padding:24px;
}
#page-login.active { display:flex; }
/* ── Login BG Animations ── */
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-60px) scale(1.08);} 66%{transform:translate(-30px,30px) scale(.94);} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1);} 40%{transform:translate(-50px,40px) scale(1.1);} 70%{transform:translate(35px,-25px) scale(.92);} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(20px,50px) scale(1.05);} }
@keyframes bgShift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes particleDrift { 0%{transform:translateY(0) translateX(0);opacity:0;} 10%{opacity:1;} 90%{opacity:.6;} 100%{transform:translateY(-100vh) translateX(30px);opacity:0;} }
.login-bg-orb {
position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(80px);
}
.login-bg-orb-1 {
width:480px; height:480px; left:-100px; top:-80px;
background:radial-gradient(circle, rgba(180,20,40,.28) 0%, transparent 70%);
animation:orbFloat1 14s ease-in-out infinite;
}
.login-bg-orb-2 {
width:360px; height:360px; right:-60px; bottom:10%;
background:radial-gradient(circle, rgba(140,10,30,.22) 0%, transparent 70%);
animation:orbFloat2 18s ease-in-out infinite;
}
.login-bg-orb-3 {
width:260px; height:260px; left:38%; top:55%;
background:radial-gradient(circle, rgba(220,50,70,.14) 0%, transparent 70%);
animation:orbFloat3 11s ease-in-out infinite;
}
.login-bg-grid {
position:fixed; inset:0; z-index:0; pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.login-bg-particles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.login-bg-particle {
position:absolute; bottom:-10px; width:2px; height:2px; border-radius:50%;
background:rgba(255,100,120,.55);
animation:particleDrift linear infinite;
}
.login-stage { position:relative; z-index:1; }
.login-stage { min-height:calc(100vh - 120px); display:grid; grid-template-columns:1fr 440px; gap:22px; align-items:stretch; max-width:1400px; width:100%; }
/* ── Login Image Slider ── */
.login-img-slider {
flex:1; position:relative; overflow:hidden;
}
.lis-slide {
display:none; position:absolute; inset:0;
flex-direction:column; justify-content:flex-start; padding:36px 36px 64px;
}
.lis-slide.active { display:flex; animation:feedSlideIn .4s ease; }
.lis-text {
display:flex; flex-direction:column; gap:10px; z-index:2; max-width:92%;
}
.lis-slide .hslide-eyebrow { font-size:.75rem; padding:3px 9px; border-radius:999px; }
.lis-slide .hslide-title {
font-size:clamp(3rem,5vw,5.2rem);
text-shadow:0 0 50px rgba(255,43,43,.45),0 0 100px rgba(255,43,43,.18),0 4px 24px rgba(0,0,0,.8);
}
.lis-slide img {
position:absolute; bottom:0; left:50%; transform:translateX(-50%);
height:auto; max-height:88%; max-width:85%; width:auto; object-fit:contain;
filter:drop-shadow(0 24px 40px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(255,43,43,.3));
animation:floatSlow 6s ease-in-out infinite;
}
.lis-dots {
position:absolute; bottom:18px; left:0; right:0;
display:flex; justify-content:center; gap:7px;
}
.lis-dot {
width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.2);
cursor:pointer; border:none; transition:background .2s, transform .2s;
}
.lis-dot.active { background:#ff2d2d; transform:scale(1.3); }
/* ── Login Banner Title ── */
.login-banner-title {
font-family:'Bebas Neue','Impact',sans-serif;
font-size:clamp(3rem,5vw,5rem); font-weight:900; letter-spacing:.06em;
text-transform:uppercase; line-height:.95; margin-bottom:12px;
display:block; width:100%;
background:linear-gradient(135deg,#fff 30%,rgba(255,180,180,.8));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.login-banner-title span {
background:linear-gradient(135deg,var(--red),var(--red2),#ff8080);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.login-hero {
border-radius:34px; border:1px solid rgba(255,255,255,.08); overflow:hidden; position:relative;
background:linear-gradient(180deg, rgba(31,7,9,.88), rgba(10,3,4,.82));
box-shadow:var(--shadow); padding:0; display:flex; flex-direction:column;
}
.login-glow {
position:absolute; inset:auto -10% -8% -10%; height:52%; background:radial-gradient(ellipse at center, rgba(255,80,80,.3), transparent 60%); filter:blur(18px);
}
.login-characters { position:absolute; right:26px; bottom:18px; display:flex; gap:14px; align-items:end; }
.login-panel {
border-radius:34px; border:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg, rgba(29,9,11,.92), rgba(12,4,5,.9));
box-shadow:var(--shadow); padding:34px; display:flex; align-items:center; position:relative; overflow:hidden;
}
.login-panel::before {
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(circle at 88% 12%, rgba(255,255,255,.12), transparent 24%), linear-gradient(180deg, rgba(255,255,255,.03), transparent 22%);
}
.auth-card {
width:100%; max-width:460px; margin:0 auto; padding:28px; border-radius:28px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-shadow:var(--glow);
}
.auth-field { display:grid; gap:8px; margin-bottom:14px; }
.auth-field label { color:rgba(255,255,255,.66); font-size:.84rem; text-transform:uppercase; letter-spacing:.12em; }
.auth-field input, .auth-field select, .auth-field textarea {
width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:var(--text); outline:none;
}
.auth-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.discord-login-btn {
display:inline-flex; align-items:center; gap:10px;
padding:12px 22px; border-radius:16px; border:none; cursor:pointer; font-size:.9rem; font-weight:700;
background:#5865f2; color:#fff; letter-spacing:.02em; margin-bottom:18px;
transition:background .15s, transform .1s; box-shadow:0 8px 24px rgba(88,101,242,.35);
}
.discord-login-btn:hover { background:#4752c4; transform:translateY(-1px); }
.auth-divider {
display:flex; align-items:center; gap:12px; margin-bottom:18px; color:rgba(255,255,255,.2); font-size:.75rem;
}
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }
/* Dev badge on topbar */
.dev-badge {
font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
background:linear-gradient(135deg,rgba(255,43,43,.25),rgba(255,91,91,.15));
border:1px solid rgba(255,43,43,.3); color:#ff5b5b; padding:3px 8px; border-radius:999px;
}
.overview-head, .detail-head { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.filter-chips { display:flex; flex-wrap:wrap; gap:10px; }
.filter-chips .chip { padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:.86rem; cursor:pointer; transition:.18s ease; }
.filter-chips .chip.active { background:linear-gradient(135deg, var(--red), var(--red2)); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(255,43,43,.28); }
.filter-chips .chip:hover:not(.active) { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); }
.split-detail { display:grid; grid-template-columns:360px 1fr; gap:18px; align-items:start; }
.profile-card {
padding:22px; border-radius:30px; background:linear-gradient(180deg, rgba(43,9,11,.94), rgba(14,4,5,.86)); border:1px solid rgba(255,255,255,.08); box-shadow:var(--glow); position:relative; overflow:hidden;
}
.profile-card::before {
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
}
/* ── Faction Character Hero ── */
.fp-char-hero {
position:relative; height:300px;
margin:-22px -22px 20px; overflow:hidden;
border-radius:30px 30px 0 0;
}
.fp-char-bg {
position:absolute; inset:0; border-radius:30px 30px 0 0;
background:linear-gradient(160deg, rgba(20,4,6,.9) 0%, rgba(10,2,3,.7) 100%);
overflow:hidden;
}
.fp-char-bg-glow {
position:absolute; left:-40px; right:-40px; bottom:-40px; top:-40px; pointer-events:none;
background:radial-gradient(ellipse 80% 70% at 50% 100%, var(--fp-char-glow,rgba(255,43,43,.35)), transparent 65%);
}
.fp-char-fade {
position:absolute; bottom:0; left:0; right:0; height:60px; pointer-events:none;
background:linear-gradient(to bottom, transparent, rgba(14,4,5,.98));
z-index:3;
}
.fp-char-img {
position:absolute; bottom:0; left:50%; transform:translateX(-50%);
height:95%; max-height:290px; width:auto; object-fit:contain;
filter:
drop-shadow(0 0 8px var(--fp-char-glow,rgba(255,43,43,.9)))
drop-shadow(0 0 16px var(--fp-char-glow,rgba(255,43,43,.6)))
drop-shadow(0 8px 20px rgba(0,0,0,.8));
animation:floatSlowCenter 6s ease-in-out infinite;
z-index:10; pointer-events:none;
}
.tab-bar { display:flex; gap:10px; flex-wrap:wrap; }
.tab-bar .tab { padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:.86rem; }
@keyframes floatSlow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes floatSlowCenter { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-8px); } }
@keyframes neonSweep { 0% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }
@keyframes starsDrift { 0% { transform:translateY(0); } 50% { transform:translateY(8px); } 100% { transform:translateY(0); } }
@keyframes scanline { 0% { transform:translateY(-100%); } 100% { transform:translateY(300%); } }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes pageIn {
0% { opacity:0; transform:translateY(16px); }
100% { opacity:1; transform:translateY(0); }
}
@keyframes pulseRed {
0%,100% { filter:drop-shadow(0 0 16px rgba(255,43,43,.18)) drop-shadow(0 0 34px rgba(255,255,255,.08)); }
50% { filter:drop-shadow(0 0 24px rgba(255,43,43,.34)) drop-shadow(0 0 44px rgba(255,255,255,.16)); }
}
@keyframes pulseGreen {
0%,100% { box-shadow:0 0 0 0 rgba(141,255,196,.6); }
50% { box-shadow:0 0 0 4px rgba(141,255,196,0); }
}
@keyframes pulseYellow {
0%,100% { box-shadow:0 0 0 0 rgba(255,209,106,.6); }
50% { box-shadow:0 0 0 4px rgba(255,209,106,0); }
}
.search input:focus, .auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus {
border-color:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 4px rgba(255,43,43,.12);
}
.stat::before, .module::before, .faction-card > .shine {
content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.05) 25%, transparent 40%); transform:translateX(-120%); pointer-events:none;
}
.stat:hover::before, .module:hover::before { animation:neonSweep 1.15s ease; }
@media (max-width:1280px) {
.grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.module-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.hero-grid, .grid-2, .grid-3, .faction-cards, .login-stage, .split-detail { grid-template-columns:1fr; }
}
@media (max-width:980px) {
.shell { grid-template-columns:1fr; padding-top:70px; }
.sidebar {
position:fixed; top:60px; left:0; bottom:0; width:280px; z-index:40;
height:auto; max-height:calc(100vh - 60px); overflow-y:auto;
transform:translateX(-110%); transition:transform .3s ease;
border-radius:0 24px 24px 0;
box-shadow:4px 0 30px rgba(0,0,0,.5);
}
.sidebar.sidebar-open { transform:translateX(0); }
#menuToggle { display:flex !important; align-items:center; justify-content:center; }
.topbar { padding:10px 16px; }
.topbar-welcome { display:none; }
.top-actions { justify-content:space-between; }
}
@media (max-width:700px) {
.grid-4, .module-grid, .auth-grid { grid-template-columns:1fr; }
.grid-2 { grid-template-columns:1fr; }
.hero { padding:24px; }
.hero-visual { justify-content:start; }
.hero-slider { height:300px; }
.hslide-title { font-size:clamp(1.8rem,4vw,3rem) !important; }
.hslide-char img { height:280px; }
.hslide-center { padding:0 60px !important; }
.meta-grid, .faction-row { grid-template-columns:1fr; }
.login-panel, .login-hero { padding:22px; }
.login-stage { grid-template-columns:1fr; }
.hero-logo { width:90px; right:18px; top:18px; }
.topbar { padding:8px 12px; }
.search input { padding:10px 14px; font-size:.85rem; }
.dash-panel { border-radius:16px; }
.card { border-radius:16px; }
}
.sidebar::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.045), transparent 18%, transparent 82%, rgba(255,255,255,.025));
pointer-events: none;
z-index: 0;
}
.sidebar::after {
content: "";
position: absolute;
top: -30%;
left: -35%;
width: 70%;
height: 160%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), rgba(255,43,43,.08), transparent);
transform: rotate(16deg);
animation: neonSweep 8s linear infinite;
pointer-events: none;
opacity: .42;
z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }
.brand-badge {
animation: logoFloat 5.8s ease-in-out infinite, logoPulse 4.2s ease-in-out infinite;
transform-style: preserve-3d;
backdrop-filter: blur(10px);
overflow: hidden;
}
.brand-badge::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(130deg, transparent 8%, rgba(255,255,255,.12) 28%, transparent 42%);
transform: translateX(-120%);
animation: neonSweep 4.8s linear infinite;
pointer-events: none;
mix-blend-mode: screen;
}
.nav a {
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.nav a::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,43,43,.16), rgba(255,255,255,.08), transparent 60%);
transform: translateX(-115%);
transition: transform .32s ease;
pointer-events: none;
}
.nav a::after {
content: "";
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--red), var(--silver));
box-shadow: 0 0 18px rgba(255,43,43,.35);
opacity: 0;
transform: scaleY(.4);
transition: .22s ease;
}
.nav a:hover,
.nav a.active {
transform: translateX(7px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 28px rgba(0,0,0,.28), 0 0 24px rgba(255,43,43,.10);
}
.nav a:hover::before,
.nav a.active::before {
transform: translateX(0%);
}
.nav a:hover::after,
.nav a.active::after {
opacity: 1;
transform: scaleY(1);
}
.view-switcher button {
position: relative;
overflow: hidden;
}
.view-switcher button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,43,43,.14), rgba(255,255,255,.08), transparent 70%);
transform: translateX(-110%);
transition: transform .3s ease;
pointer-events: none;
}
.view-switcher button.active,
.view-switcher button:hover {
transform: translateX(6px);
box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 20px rgba(255,43,43,.08);
}
.view-switcher button.active::before,
.view-switcher button:hover::before {
transform: translateX(0);
}
.pill-btn,
.ghost-btn {
position: relative;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pill-btn::after,
.ghost-btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.18) 35%, transparent 50%);
transform: translateX(-120%);
pointer-events: none;
}
.pill-btn:hover,
.ghost-btn:hover {
transform: translateY(-2px);
}
.pill-btn:hover::after,
.ghost-btn:hover::after {
animation: neonSweep 1.1s ease;
}
.topbar {
position: fixed;
}
.topbar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,43,43,.28), rgba(255,255,255,.18), transparent);
}
.card,
.faction-card,
.module {
position: relative;
}
.card::before,
.module::after,
.faction-card::before {
content: "";
position: absolute;
inset: 1px;
pointer-events: none;
opacity: .72;
}
.card::before {
border-radius: 27px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,43,43,.22), rgba(255,255,255,.08), rgba(255,43,43,.12));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.module::after {
border-radius: 23px;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,43,43,.16), rgba(255,255,255,.06));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .66;
}
.faction-card::before {
border-radius: 29px;
padding: 1px;
background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,43,43,.24), rgba(255,255,255,.08), rgba(255,43,43,.12));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .78;
}
.character-card {
overflow: hidden;
will-change: transform;
transition: transform .18s ease, box-shadow .18s ease;
}
.character-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(130deg, transparent 10%, rgba(255,255,255,.08) 32%, transparent 48%);
opacity: .7;
pointer-events: none;
transform: translateX(-120%);
}
.character-card:hover {
transform: translateY(-10px) rotateX(4deg);
box-shadow: 0 30px 72px rgba(0,0,0,.48), 0 0 28px rgba(255,43,43,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.character-card:hover::after {
animation: neonSweep 1.05s ease;
}
.tilt-inner {
display: block;
transition: transform .16s ease;
transform-style: preserve-3d;
will-change: transform;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0px) rotateX(0deg); }
50% { transform: translateY(-4px) rotateX(4deg); }
}
@keyframes logoPulse {
0%, 100% {
box-shadow: 0 16px 38px rgba(0,0,0,.35), 0 0 28px rgba(255,43,43,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
50% {
box-shadow: 0 20px 44px rgba(0,0,0,.42), 0 0 38px rgba(255,43,43,.28), inset 0 1px 0 rgba(255,255,255,.1);
}
}
/* ── Hero Slider ── */
.hero-slider {
position: relative; border-radius: 36px; overflow: hidden; height: 460px;
border: 1px solid rgba(255,43,43,.22);
box-shadow: 0 0 0 1px rgba(255,43,43,.08), 0 0 60px rgba(255,43,43,.18), 0 24px 70px rgba(0,0,0,.55);
}
.hslide {
position: absolute; inset: 0; display: flex; align-items: center;
opacity: 0; pointer-events: none; transition: opacity .65s ease;
}
.hslide.active { opacity: 1; pointer-events: auto; }
.hslide-bg {
position: absolute; inset: 0; pointer-events: none;
}
.hslide-bg-1 {
background:
radial-gradient(ellipse at 18% 110%, rgba(0,30,100,.55), transparent 42%),
radial-gradient(ellipse at 82% 110%, rgba(180,10,10,.45), transparent 42%),
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.03), transparent 55%),
linear-gradient(160deg, rgba(6,10,24,.98) 0%, rgba(14,5,8,.97) 55%, rgba(6,8,20,.98) 100%);
}
.hslide-bg-2 {
background:
radial-gradient(ellipse at 75% 105%, rgba(220,30,0,.5), transparent 50%),
radial-gradient(ellipse at 20% 60%, rgba(120,10,0,.25), transparent 45%),
linear-gradient(155deg, rgba(8,3,3,.98) 0%, rgba(24,6,2,.97) 100%);
}
.hslide-bg-3 {
background:
radial-gradient(ellipse at 30% 80%, rgba(220,90,0,.38), transparent 45%),
radial-gradient(ellipse at 70% 60%, rgba(180,20,0,.28), transparent 50%),
radial-gradient(ellipse at 50% 0%, rgba(255,120,0,.1), transparent 40%),
linear-gradient(160deg, rgba(12,4,2,.98) 0%, rgba(26,8,2,.97) 60%, rgba(10,3,1,.98) 100%);
}
.hslide-bg-4 {
background:
radial-gradient(ellipse at 50% 0%, rgba(255,43,43,.22), transparent 55%),
radial-gradient(ellipse at 15% 50%, rgba(255,43,43,.1), transparent 40%),
radial-gradient(ellipse at 85% 50%, rgba(255,43,43,.1), transparent 40%),
radial-gradient(ellipse at 50% 110%, rgba(255,43,43,.35), transparent 55%),
linear-gradient(180deg, rgba(8,2,2,.99) 0%, rgba(14,4,4,.98) 100%);
}
/* Brand Slide layout */
.hslide-brand-slide {
position: relative; z-index: 4; width: 100%; display: flex;
align-items: center; justify-content: center; gap: 40px; padding: 0 60px;
}
.hslide-brand-logo {
flex-shrink: 0; width: 110px; height: 110px; border-radius: 28px;
background: linear-gradient(135deg, rgba(255,43,43,.18), rgba(255,255,255,.06));
border: 1px solid rgba(255,43,43,.3); display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 50px rgba(255,43,43,.3), 0 0 100px rgba(255,43,43,.1);
font-family: 'Bebas Neue','Impact',sans-serif; font-size: 2.8rem; color: var(--red2);
position: relative; overflow: hidden;
}
.hslide-brand-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 22px; }
.hslide-brand-divider {
flex-shrink: 0; width: 1px; height: 180px;
background: linear-gradient(180deg, transparent, rgba(255,43,43,.4), transparent);
}
.hslide-brand-text { flex: 1; max-width: 580px; }
/* scanline atmosphere per slide */
.hslide::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px);
mix-blend-mode: multiply;
}
/* neon border glow inner */
.hslide::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
border-radius: 35px;
box-shadow: inset 0 0 0 1px rgba(255,43,43,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.hslide-char {
position: absolute; bottom: 0; z-index: 2; display: flex; align-items: flex-end;
}
.hslide-char img {
height: 440px; width: auto; object-fit: contain;
filter: drop-shadow(0 0 28px rgba(255,43,43,.28)) drop-shadow(0 18px 38px rgba(0,0,0,.7));
animation: floatSlow 6s ease-in-out infinite;
mix-blend-mode: multiply;
}
.hslide-char-left { left: 0; }
.hslide-char-left img { transform-origin: bottom left; }
.hslide-char-right { right: 0; }
.hslide-char-right img { transform-origin: bottom right; }
.hslide-char-left2 { left: 220px; }
.hslide-content {
position: relative; z-index: 4; display: flex; flex-direction: column; gap: 14px; pointer-events: auto;
}
.hslide-center {
margin: 0 auto; text-align: center; align-items: center; padding: 0 300px;
}
.hslide-left { margin-left: 52px; max-width: 400px; }
.hslide-right { margin-left: auto; margin-right: 52px; max-width: 400px; text-align: right; align-items: flex-end; }
.hslide-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--red2); background: rgba(255,43,43,.1); border: 1px solid rgba(255,43,43,.24);
padding: 7px 14px; border-radius: 999px;
}
.hslide-title {
font-family: 'Bebas Neue', 'Impact', sans-serif;
font-size: clamp(3.2rem, 5.5vw, 5.8rem); line-height: .92; letter-spacing: .05em; margin: 0;
color: #fff;
text-shadow: 0 0 50px rgba(255,43,43,.45), 0 0 100px rgba(255,43,43,.18), 0 4px 24px rgba(0,0,0,.8);
}
.hslide-title span { color: var(--red2); }
.hslide-sub {
font-size: .88rem; color: rgba(255,255,255,.55); letter-spacing: .14em; text-transform: uppercase; margin: 0;
}
.hslide-center { padding: 0 340px; }
.hslide-left { margin-left: 60px; max-width: 420px; }
.hslide-right { margin-right: 60px; max-width: 420px; }
.hslide-btn {
margin-top: 4px; padding: 13px 28px; border: 0; border-radius: 999px; font-weight: 700;
font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
background: linear-gradient(135deg, var(--red), var(--red2));
color: #fff; box-shadow: 0 10px 30px rgba(255,43,43,.38), 0 0 0 1px rgba(255,255,255,.08);
transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden;
}
.hslide-btn::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 40%, transparent 55%);
transform: translateX(-120%); pointer-events: none;
}
.hslide-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,43,43,.48); }
.hslide-btn:hover::after { animation: neonSweep 1s ease; }
/* Progress bar at bottom */
.hslide-progress {
position: absolute; bottom: 0; left: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--red), var(--red2), rgba(255,255,255,.6));
border-radius: 0 0 0 36px; z-index: 10; box-shadow: 0 0 10px rgba(255,43,43,.5);
transition: none;
}
.hslide-progress.animating {
width: 100%; transition: width 10s linear;
}
/* Arrows */
.hslide-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.10);
color: white; font-size: 1.8rem; width: 46px; height: 46px; border-radius: 50%;
cursor: pointer; display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(12px); transition: .22s ease; line-height: 1;
}
.hslide-arrow:hover {
background: rgba(255,43,43,.22); border-color: rgba(255,43,43,.4);
box-shadow: 0 0 24px rgba(255,43,43,.28);
}
.hslide-prev { left: 18px; }
.hslide-next { right: 18px; }
/* Dots */
.hslide-dots {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
display: flex; gap: 10px; z-index: 10;
}
.hslide-dot {
width: 8px; height: 8px; border-radius: 999px;
background: rgba(255,255,255,.25); cursor: pointer; transition: .35s ease; border: 0;
}
.hslide-dot.active {
width: 30px; background: var(--red); box-shadow: 0 0 14px rgba(255,43,43,.6);
}
/* ── Tilt Card ── */
.tilt-card { transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease; }
/* ── Fraktionsstatus Expand ── */
.dash-frak-row { cursor:pointer; transition:background .15s; }
.dash-frak-row:hover { background:rgba(255,255,255,.04); }
.dash-frak-row:hover td { color:#fff5f5; }
.dash-frak-row td:first-child { display:flex; align-items:center; gap:10px; }
.dash-frak-arrow { font-size:.7rem; color:var(--muted); transition:transform .2s; display:inline-block; }
.dash-frak-arrow.open { transform:rotate(90deg); color:var(--red); }
.frak-name-cell { display:flex; align-items:center; gap:8px; }
.frak-edit-btn {
opacity:0; background:none; border:none; color:rgba(255,255,255,.35); cursor:pointer;
font-size:.78rem; padding:2px 5px; border-radius:5px; transition:opacity .15s, color .15s, background .15s;
flex-shrink:0;
}
.dash-frak-row:hover .frak-edit-btn { opacity:1; }
.frak-edit-btn:hover { color:#fff; background:rgba(255,43,43,.2); }
.frak-name-input {
background:rgba(15,5,6,.85); border:1px solid rgba(255,43,43,.4);
border-radius:7px; color:#fff5f5; font-size:.88rem; font-weight:600;
padding:3px 9px; outline:none; width:140px;
}
.frak-name-save {
padding:3px 10px; border-radius:7px; border:none;
background:rgba(255,43,43,.2); color:var(--red2); font-size:.78rem; font-weight:700;
cursor:pointer; transition:background .15s;
}
.frak-name-save:hover { background:rgba(255,43,43,.38); }
.dash-frak-detail { display:none; }
.dash-frak-detail td { padding:0 !important; border-bottom:1px solid rgba(255,255,255,.06); }
.dash-frak-panel {
display:grid; grid-template-columns:1.15fr .9fr 1.05fr; gap:12px;
padding:16px; border-top:1px solid rgba(255,255,255,.06);
animation:pageIn .18s ease; background:rgba(0,0,0,.18);
}
.dash-frak-panel > div {
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
border-radius:14px; padding:15px 16px;
}
.dash-frak-panel > div:nth-child(4) { grid-column:1 / 3; }
.dash-frak-section-label {
color:rgba(255,255,255,.75); font-size:.67rem; font-weight:700; text-transform:uppercase;
letter-spacing:.18em; margin-bottom:13px;
display:flex; align-items:center; gap:8px;
}
.dash-frak-section-label::before {
content:''; width:3px; height:13px; border-radius:2px; flex-shrink:0;
background:linear-gradient(180deg,#ff2b2b,rgba(255,43,43,.25));
}
.dash-frak-field { display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.dash-frak-field label { color:rgba(255,255,255,.55); font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; font-weight:600; }
.dash-frak-field select, .dash-frak-field input {
background:rgba(20,6,8,.9); border:1px solid rgba(255,255,255,.14);
border-radius:10px; padding:9px 12px; color:#fff5f5; font-size:.88rem; outline:none; width:100%;
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d9b3b3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center;
padding-right:32px; transition:border-color .15s, box-shadow .15s;
}
.dash-frak-field input { background-image:none; padding-right:12px; }
.dash-frak-field select option { background:#1a0608; color:#fff5f5; }
.dash-frak-field select:focus, .dash-frak-field input:focus {
border-color:rgba(255,43,43,.5); box-shadow:0 0 0 3px rgba(255,43,43,.12);
}
.dash-frak-save {
padding:10px 22px; border-radius:10px;
background:linear-gradient(135deg, rgba(255,43,43,.9), rgba(255,91,91,.85));
border:1px solid rgba(255,43,43,.4);
box-shadow:0 4px 16px rgba(255,43,43,.25);
color:#fff; font-weight:700; font-size:.86rem; cursor:pointer; margin-top:4px;
transition:box-shadow .18s, transform .15s;
}
.dash-frak-save:hover { box-shadow:0 6px 22px rgba(255,43,43,.4); transform:translateY(-1px); }
/* ── Fraktionen Page ── */
.frak-kachel { border-radius:14px; border:1px solid rgba(255,255,255,.08); overflow:hidden; background:rgba(255,255,255,.02); }
.frak-kachel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; cursor:pointer; transition:background .15s; }
.frak-kachel-head:hover { background:rgba(255,255,255,.04); }
.frak-kachel-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.frak-kachel-arrow { font-size:.7rem; color:var(--muted); transition:transform .2s; }
.frak-kachel-arrow.open { transform:rotate(180deg); }
.frak-kachel-body { padding:0 14px 14px; border-top:1px solid rgba(255,255,255,.06); padding-top:12px; }
.frak-kachel-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.fks-box { background:rgba(255,255,255,.04); border-radius:10px; padding:8px 10px; text-align:center; }
.fks-k { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.fks-v { font-size:1.3rem; font-weight:800; }
.frak-mod-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:6px; }
.frak-mod-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.frak-mod-toggle { display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); cursor:pointer; font-size:.8rem; transition:background .15s,border-color .15s; }
.frak-mod-toggle:hover { background:rgba(255,255,255,.07); }
.frak-mod-toggle:has(input:checked) { background:rgba(141,255,196,.07); border-color:rgba(141,255,196,.25); }
.frak-mod-toggle:has(input:checked) span { color:#c8ffe8; }
.frak-mod-toggle input[type=checkbox] { accent-color:#8dffc4; width:14px; height:14px; cursor:pointer; }
.frak-chan-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.8rem; color:#c8d6e0; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.frak-chan-row:last-child { border-bottom:none; padding-bottom:0; }
.btn-cap-save { padding:6px 14px; border-radius:8px; background:rgba(141,255,196,.1); border:1px solid rgba(141,255,196,.24); color:#8dffc4; font-weight:700; font-size:.78rem; cursor:pointer; white-space:nowrap; transition:background .15s,box-shadow .15s; }
.btn-cap-save:hover { background:rgba(141,255,196,.18); box-shadow:0 4px 14px rgba(141,255,196,.12); }
.cap-input { width:72px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#fff; padding:5px 8px; font-size:.85rem; outline:none; transition:border-color .15s; }
.cap-input:focus { border-color:rgba(141,255,196,.4); box-shadow:0 0 0 3px rgba(141,255,196,.08); }
.fpd-logo-drag { border-color:rgba(255,43,43,.7) !important; background:rgba(255,43,43,.08) !important; }
.cap-label { color:rgba(255,255,255,.5); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
/* ── Save Toast ── */
/* ── Save Modal ── */
@keyframes toastIn { from{opacity:0;transform:scale(.88) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(.92) translateY(8px)} }
#dashSaveOverlay {
position:fixed; inset:0; z-index:998;
display:none; align-items:center; justify-content:center;
pointer-events:none;
}
#dashSaveOverlay.show { display:flex; }
#dashSaveModal {
position:relative; width:480px;
background:linear-gradient(160deg, rgba(28,9,12,.98), rgba(18,5,7,.98));
border:1px solid rgba(255,255,255,.1);
border-radius:24px;
box-shadow:0 24px 64px rgba(0,0,0,.7), 0 0 40px rgba(255,43,43,.12);
padding:48px 48px 36px;
text-align:center;
animation:toastIn .28s cubic-bezier(.34,1.56,.64,1) forwards;
}
#dashSaveOverlay.hiding #dashSaveModal { animation:toastOut .25s ease forwards; }
.toast-close {
position:absolute; top:14px; right:16px;
background:rgba(255,255,255,.07); border:none; color:rgba(255,255,255,.5);
width:28px; height:28px; border-radius:50%; font-size:.9rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s, color .15s;
}
.toast-close:hover { background:rgba(255,255,255,.13); color:#fff; }
.toast-check-wrap {
width:90px; height:90px; border-radius:50%; margin:0 auto 24px;
background:rgba(255,43,43,.1); border:2px solid rgba(255,43,43,.35);
display:flex; align-items:center; justify-content:center;
box-shadow:0 0 28px rgba(255,43,43,.2);
animation:checkPop .35s cubic-bezier(.34,1.56,.64,1) .05s both;
}
@keyframes checkPop { from{transform:scale(0);opacity:0;} to{transform:scale(1);opacity:1;} }
.toast-check-svg { width:46px; height:46px; }
.toast-check-path {
stroke:#ff5b5b; stroke-width:2.5; fill:none;
stroke-dasharray:40; stroke-dashoffset:40;
stroke-linecap:round; stroke-linejoin:round;
animation:drawCheck .4s ease .25s forwards;
}
@keyframes drawCheck { to{ stroke-dashoffset:0; } }
.toast-title {
font-size:1.32rem; font-weight:800; letter-spacing:-.02em;
margin:0 0 8px; color:#fff5f5;
}
.toast-sub { color:var(--muted); font-size:.92rem; margin:0 0 28px; line-height:1.5; }
.toast-bar-wrap {
height:3px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;
}
.toast-bar {
height:100%; border-radius:inherit;
background:linear-gradient(90deg, var(--red), var(--red2), var(--silver));
width:0%; animation:toastProgress 1.6s linear .1s forwards;
}
@keyframes toastProgress { from{width:0%} to{width:100%} }
.dash-frak-live-val {
font-size:2.4rem; font-weight:900; line-height:1; margin-bottom:10px;
background:linear-gradient(135deg,#fff 30%,rgba(255,180,180,.75)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dash-frak-sync-hint { color:var(--muted); font-size:.8rem; }
.dash-frak-connect-btn {
padding:10px 16px; border-radius:10px; border:1px solid rgba(88,101,242,.4);
background:rgba(88,101,242,.1); color:#aab4ff; font-weight:700; font-size:.86rem;
cursor:pointer; transition:background .15s, border-color .15s; display:block; width:100%; text-align:left;
}
.dash-frak-connect-btn:hover { background:rgba(88,101,242,.2); border-color:rgba(88,101,242,.6); }
.dash-frak-connect-form { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.dash-frak-connect-form input {
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
border-radius:10px; padding:9px 12px; color:var(--text); font-size:.86rem; outline:none;
}
.dash-frak-connect-form input:focus { border-color:rgba(88,101,242,.5); box-shadow:0 0 0 3px rgba(88,101,242,.1); }
.dash-live-dot {
display:none; width:8px; height:8px; border-radius:50%; background:#8dffc4;
box-shadow:0 0 6px rgba(141,255,196,.7); animation:livePulse 2s ease-in-out infinite;
vertical-align:middle;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
/* ── FRAK Meeting Tile ── */
.frak-bar-pulse {
animation:barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
0%,100% { opacity:1; box-shadow:0 0 6px rgba(168,85,247,.5); }
50% { opacity:.55; box-shadow:0 0 16px rgba(232,121,249,.9); }
}
.frak-reminder-row {
display:flex; flex-direction:column; gap:8px;
padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
}
.frak-reminder-controls {
display:flex; gap:8px; align-items:center;
}
.frak-reminder-controls .frak-reminder-select { flex:1; }
.frak-reminder-betreff {
background:rgba(15,5,6,.85); border:1px solid rgba(255,255,255,.12);
border-radius:8px; padding:7px 10px; color:#fff5f5; font-size:.83rem; outline:none;
width:100%; box-sizing:border-box;
}
.frak-reminder-betreff::placeholder { color:rgba(255,255,255,.3); }
.frak-reminder-targets {
display:flex; gap:6px; flex-wrap:wrap;
}
.frak-target-chip {
padding:3px 10px; border-radius:999px; font-size:.74rem; cursor:pointer;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.5); user-select:none; transition:all .15s;
}
.frak-target-chip.active {
background:rgba(168,85,247,.25); border-color:rgba(168,85,247,.6);
color:#e9d5ff;
}
.frak-reminder-select {
background:rgba(15,5,6,.85); border:1px solid rgba(255,255,255,.12);
border-radius:8px; padding:8px 10px; color:#fff5f5; font-size:.84rem; outline:none;
appearance:none; -webkit-appearance:none;
}
.frak-reminder-status {
display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.5); white-space:nowrap;
}
input[type="date"], input[type="time"] {
background:rgba(15,5,6,.85); border:1px solid rgba(255,255,255,.14);
border-radius:10px; padding:9px 12px; color:#fff5f5; font-size:.88rem; outline:none; width:100%;
color-scheme:dark;
}
/* ── Discord Slider Backgrounds ── */
.dc-slide-bg-1 {
background:
radial-gradient(ellipse at 50% 110%, rgba(88,101,242,.45), transparent 50%),
radial-gradient(ellipse at 20% 30%, rgba(88,101,242,.18), transparent 40%),
radial-gradient(ellipse at 80% 20%, rgba(255,43,43,.12), transparent 35%),
linear-gradient(170deg, rgba(4,5,20,.99) 0%, rgba(8,7,28,.98) 55%, rgba(5,3,18,.99) 100%);
}
.dc-slide-bg-2 {
background:
radial-gradient(ellipse at 70% 110%, rgba(60,120,255,.4), transparent 48%),
radial-gradient(ellipse at 15% 50%, rgba(88,101,242,.2), transparent 40%),
linear-gradient(160deg, rgba(3,6,22,.99) 0%, rgba(6,10,30,.98) 60%, rgba(3,5,20,.99) 100%);
}
.dc-slide-bg-3 {
background:
radial-gradient(ellipse at 30% 110%, rgba(138,67,255,.38), transparent 48%),
radial-gradient(ellipse at 75% 40%, rgba(88,101,242,.22), transparent 42%),
radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 40%),
linear-gradient(155deg, rgba(5,3,18,.99) 0%, rgba(12,6,28,.98) 55%, rgba(4,3,16,.99) 100%);
}
.dc-slide-bg-4 {
background:
radial-gradient(ellipse at 50% 110%, rgba(0,200,255,.3), transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(88,101,242,.18), transparent 38%),
radial-gradient(ellipse at 20% 20%, rgba(255,43,43,.1), transparent 35%),
linear-gradient(160deg, rgba(3,8,22,.99) 0%, rgba(5,12,26,.98) 60%, rgba(3,7,20,.99) 100%);
}
/* ── Discord Server Page ── */
.dc-server-grid { display:flex; flex-direction:column; gap:10px; }
.dc-server-item { border-radius:14px; border:1px solid rgba(255,255,255,.07); overflow:hidden; }
.dc-settings-arrow {
font-size:.7rem; color:var(--muted); transition:transform .2s; display:inline-block; margin-left:2px;
}
.dc-settings-arrow.open { transform:rotate(90deg); color:var(--red); }
.dc-settings-panel {
display:none; padding:18px 16px 16px; border-top:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.02); animation:pageIn .18s ease;
}
.dc-settings-grid {
display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px;
}
.dc-server-card {
display:flex; align-items:center; gap:14px; padding:14px 16px;
background:rgba(255,255,255,.03); cursor:pointer;
transition:background .15s;
}
.dc-server-card:hover { background:rgba(255,255,255,.055); }
.dc-server-icon {
width:44px; height:44px; border-radius:12px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:1.3rem;
border:1px solid rgba(255,255,255,.08);
}
.dc-server-name { font-weight:700; font-size:.92rem; margin-bottom:3px; }
.dc-server-meta { color:var(--muted); font-size:.78rem; }
.dc-action-btn {
width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.05); color:rgba(255,255,255,.6); cursor:pointer; font-size:.9rem;
display:flex; align-items:center; justify-content:center;
transition:background .15s, color .15s;
}
.dc-action-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.dc-action-red { border-color:rgba(255,43,43,.2); color:rgba(255,100,100,.7); }
.dc-action-red:hover { background:rgba(255,43,43,.18); color:#ff6464; }
/* Discord Mock Preview */
.dc-discord-mock {
border-radius:12px; overflow:hidden;
border:1px solid rgba(255,255,255,.06);
display:flex; flex-direction:column;
}
.dc-mock-bar {
display:flex; align-items:center; gap:6px; padding:9px 14px;
background:#1e1f22; border-bottom:1px solid rgba(0,0,0,.3); flex-shrink:0;
}
.dc-mock-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.dc-mock-layout {
display:flex; flex:1; min-height:0;
}
/* Left sidebar — channel list */
.dc-mock-sidebar {
width:200px; flex-shrink:0; background:#2b2d31;
display:flex; flex-direction:column; border-right:1px solid rgba(0,0,0,.25);
font-size:.78rem;
}
.dc-mock-server-header {
display:flex; align-items:center; gap:9px; padding:11px 12px 10px;
border-bottom:1px solid rgba(0,0,0,.3); font-weight:700; font-size:.82rem; color:#fff;
cursor:default;
}
.dc-mock-server-icon {
width:28px; height:28px; border-radius:8px; flex-shrink:0; overflow:hidden;
background:linear-gradient(135deg,rgba(255,43,43,.5),rgba(180,20,20,.3));
display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:900;
}
.dc-mock-server-icon img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.dc-mock-cat {
color:rgba(255,255,255,.32); font-size:.65rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; padding:14px 12px 4px;
}
.dc-mock-ch {
display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:4px;
color:rgba(255,255,255,.38); cursor:default; margin:1px 4px;
}
.dc-mock-ch.active {
background:rgba(255,255,255,.1); color:#fff;
}
.dc-mock-ch-icon { font-size:.82rem; opacity:.6; }
.dc-mock-ch.active .dc-mock-ch-icon { opacity:1; }
.dc-mock-members-foot {
margin-top:auto; padding:10px 12px; border-top:1px solid rgba(0,0,0,.25);
display:flex; align-items:center; gap:8px;
}
.dc-mock-user-avatar {
width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0;
background:rgba(255,43,43,.3);
}
.dc-mock-user-avatar img { width:100%; height:100%; object-fit:cover; }
.dc-mock-user-name { font-size:.74rem; color:rgba(255,255,255,.6); font-weight:600; line-height:1.2; }
.dc-mock-user-tag { font-size:.65rem; color:rgba(255,255,255,.28); }
/* Main chat area */
.dc-mock-main { flex:1; display:flex; flex-direction:column; background:#313338; min-width:0; }
.dc-mock-channel {
display:flex; align-items:center; gap:6px; padding:8px 14px;
background:#313338; border-bottom:1px solid rgba(0,0,0,.2);
font-size:.82rem; color:#fff; font-weight:600; flex-shrink:0;
}
.dc-mock-channel-sep { width:1px; height:16px; background:rgba(255,255,255,.15); margin:0 4px; }
.dc-mock-channel-topic { color:rgba(255,255,255,.38); font-weight:400; font-size:.76rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dc-mock-body { padding:14px 14px 10px; flex:1; overflow:hidden; }
.dc-mock-msg { display:flex; gap:12px; align-items:flex-start; }
.dc-mock-avatar {
width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
background:#5865f2; display:flex; align-items:center; justify-content:center;
}
.dc-mock-avatar img { width:100%; height:100%; object-fit:cover; }
.dc-mock-name { font-weight:700; font-size:.9rem; color:#fff; }
.dc-mock-bot-badge {
background:#5865f2; color:#fff; font-size:.6rem; font-weight:800;
padding:2px 5px; border-radius:4px; letter-spacing:.04em;
}
.dc-mock-time { color:rgba(255,255,255,.3); font-size:.72rem; }
/* Members sidebar */
.dc-mock-members {
width:140px; flex-shrink:0; background:#2b2d31; border-left:1px solid rgba(0,0,0,.2);
padding:10px 8px; font-size:.72rem;
}
.dc-mock-members-cat {
color:rgba(255,255,255,.32); font-size:.62rem; font-weight:700;
text-transform:uppercase; letter-spacing:.08em; padding:0 4px 6px;
}
.dc-mock-member-row {
display:flex; align-items:center; gap:7px; padding:3px 4px;
border-radius:4px; margin-bottom:2px;
}
.dc-mock-member-av {
width:24px; height:24px; border-radius:50%; flex-shrink:0;
font-size:.62rem; display:flex; align-items:center; justify-content:center;
font-weight:700; color:#fff;
}
.dc-mock-member-name { color:rgba(255,255,255,.5); }
.dc-mock-member-row.bot .dc-mock-member-name { color:rgba(141,197,255,.75); }
.dc-embed {
display:flex; border-radius:4px; overflow:hidden; margin-top:6px;
background:#2b2d31; border:1px solid rgba(255,255,255,.07);
}
.dc-embed-bar { width:4px; flex-shrink:0; background:#ff2d2d; }
.dc-embed-content { padding:10px 14px 12px; flex:1; }
.dc-embed-title { font-weight:700; font-size:.88rem; margin-bottom:5px; color:#fff; }
.dc-embed-text { color:rgba(255,255,255,.78); font-size:.82rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
/* ── DC Settings Tabs ── */
.dcs-tabs { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:0; }
.dcs-tab-btn {
padding:9px 16px; border-radius:10px 10px 0 0; border:none; background:transparent;
color:rgba(255,255,255,.45); font-size:.82rem; font-weight:600; cursor:pointer;
letter-spacing:.04em; transition:background .15s, color .15s;
border-bottom:2px solid transparent; margin-bottom:-1px;
}
.dcs-tab-btn.active { color:#fff5f5; border-bottom-color:var(--red); background:rgba(255,43,43,.08); }
.dcs-tab-btn:hover:not(.active) { color:rgba(255,255,255,.7); background:rgba(255,255,255,.04); }
.dcs-tab-pane { display:none; }
.dcs-tab-pane.active { display:block; animation:pageIn .16s ease; }
.dcs-section-head {
color:rgba(255,255,255,.38); font-size:.68rem; text-transform:uppercase;
letter-spacing:.18em; margin:18px 0 10px; padding-bottom:6px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.dcs-section-head:first-child { margin-top:0; }
.dcs-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dcs-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.dcs-toggle-row {
display:flex; align-items:center; justify-content:space-between;
padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07); margin-bottom:8px;
}
.dcs-toggle-label { font-size:.88rem; }
.dcs-toggle-sub { color:var(--muted); font-size:.76rem; margin-top:2px; }
.dcs-toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.dcs-toggle input { opacity:0; width:0; height:0; }
.dcs-toggle-slider {
position:absolute; inset:0; border-radius:999px;
background:rgba(255,255,255,.12); cursor:pointer; transition:.2s;
}
.dcs-toggle-slider::before {
content:""; position:absolute; width:16px; height:16px; border-radius:50%;
background:#fff; left:3px; top:3px; transition:.2s;
}
.dcs-toggle input:checked + .dcs-toggle-slider { background:var(--red); }
.dcs-toggle input:checked + .dcs-toggle-slider::before { transform:translateX(18px); }
/* Roles Table */
.dcs-roles-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.dcs-roles-table th {
color:rgba(255,255,255,.38); font-size:.68rem; text-transform:uppercase;
letter-spacing:.14em; text-align:left; padding:0 10px 8px 0; border-bottom:1px solid rgba(255,255,255,.07);
}
.dcs-roles-table td { padding:8px 10px 8px 0; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; }
.dcs-roles-table tr:last-child td { border-bottom:0; }
.dcs-roles-table input, .dcs-roles-table select {
background:rgba(15,5,6,.85); border:1px solid rgba(255,255,255,.12);
border-radius:8px; padding:7px 10px; color:#fff5f5; font-size:.82rem; outline:none; width:100%;
}
.dcs-roles-table select { appearance:none; -webkit-appearance:none; padding-right:24px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d9b3b3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 8px center;
}
.dcs-role-rights { display:flex; gap:6px; flex-wrap:wrap; }
.dcs-right-chip {
display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:6px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
font-size:.72rem; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s;
}
.dcs-right-chip input { display:none; }
.dcs-right-chip.checked { background:rgba(255,43,43,.15); border-color:rgba(255,43,43,.3); color:#ffb3b3; }
.dcs-add-role-btn {
padding:8px 16px; border-radius:10px; border:1px dashed rgba(255,255,255,.15);
background:transparent; color:rgba(255,255,255,.45); font-size:.82rem; cursor:pointer;
transition:border-color .15s, color .15s; width:100%;
}
.dcs-add-role-btn:hover { border-color:rgba(255,43,43,.4); color:var(--red2); }
.dcs-del-btn {
padding:5px 10px; border-radius:8px; border:1px solid rgba(255,43,43,.2);
background:rgba(255,43,43,.07); color:rgba(255,100,100,.8); font-size:.78rem;
cursor:pointer; white-space:nowrap; transition:background .15s;
}
.dcs-del-btn:hover { background:rgba(255,43,43,.18); }
.dcs-save-row { display:flex; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); }
/* ── Stub Pages ── */
.stub-view { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:320px; gap:18px; }
.stub-icon { font-size:3rem; filter:drop-shadow(0 0 24px rgba(255,43,43,.4)); }
.stub-title { font-size:1.4rem; font-weight:900; letter-spacing:-.02em; margin:0; }
.stub-sub { color:var(--muted); margin:0; text-align:center; max-width:420px; line-height:1.6; }
/* ── Dashboard Stat Tiles ── */
.dash-stat {
position:relative; padding:20px 20px 28px; border-radius:var(--r-xl); overflow:hidden;
background:linear-gradient(180deg, rgba(40,14,16,1), rgba(22,8,10,1));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 0 0 1px rgba(255,43,43,.08), 0 8px 28px rgba(0,0,0,.55), 0 0 24px rgba(255,43,43,.08);
display:flex; flex-direction:column;
}
.dash-stat-alert {
border-color:rgba(255,43,43,.32);
box-shadow:0 0 0 1px rgba(255,43,43,.22), 0 8px 28px rgba(0,0,0,.55), 0 0 32px rgba(255,43,43,.18);
}
.dash-stat-label {
color:rgba(255,255,255,.52); font-size:.72rem; text-transform:uppercase;
letter-spacing:.16em; margin:0 0 10px;
}
.dash-stat-value {
font-size:clamp(1.9rem, 3vw, 2.6rem); font-weight:900; line-height:1.1; margin:0 0 8px;
background:linear-gradient(135deg, #fff 40%, rgba(255,200,200,.8));
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dash-stat-note {
color:var(--muted); font-size:.82rem; line-height:1.45; margin:0;
}
.dash-stat-bar {
position:absolute; bottom:0; left:0; right:0; height:3px;
border-radius:0 0 var(--r-xl) var(--r-xl); opacity:.9;
}
/* ── Dashboard Panels ── */
.dash-panel {
border-radius:var(--r-xl); overflow:hidden;
background:linear-gradient(180deg, rgba(40,14,16,1), rgba(22,8,10,1));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 0 0 1px rgba(255,43,43,.08), 0 8px 28px rgba(0,0,0,.55);
padding:22px; display:flex; flex-direction:column;
}
.dash-panel-head {
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.07);
}
.dash-panel-title {
font-size:1rem; font-weight:800; letter-spacing:-.02em; margin-bottom:3px;
}
.dash-panel-sub {
color:var(--muted); font-size:.82rem;
}
/* ── Activity Feed ── */
/* ── Aktivitätsfeed ── */
.feed-tabs { display:flex; gap:4px; margin-bottom:14px; }
.feed-tab {
padding:5px 13px; border-radius:20px; font-size:.75rem; font-weight:700;
letter-spacing:.04em; border:1px solid rgba(255,255,255,.09);
background:transparent; color:rgba(255,255,255,.42); cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}
.feed-tab.active { background:rgba(255,43,43,.18); border-color:rgba(255,43,43,.4); color:#fff5f5; }
.feed-tab:hover:not(.active) { color:rgba(255,255,255,.7); background:rgba(255,255,255,.05); }
.dash-feed { display:flex; flex-direction:column; gap:7px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,43,43,.3) transparent; padding-bottom:4px; }
.dash-feed::-webkit-scrollbar { width:3px; }
.dash-feed::-webkit-scrollbar-thumb { background:rgba(255,43,43,.3); border-radius:2px; }
.feed-card {
display:flex; align-items:center; gap:12px; padding:10px 13px;
border-radius:12px; border-left:3px solid transparent;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
cursor:pointer; transition:background .15s, transform .15s;
animation:feedSlideIn .3s ease;
}
.feed-card:hover { background:rgba(255,255,255,.07); transform:translateX(3px); }
@keyframes feedSlideIn {
from { opacity:0; transform:translateY(-10px); }
to { opacity:1; transform:translateY(0); }
}
.feed-card.fc-warn { border-left-color:#ff2d2d; }
.feed-card.fc-discord { border-left-color:#5865f2; }
.feed-card.fc-system { border-left-color:#ffd16a; }
.feed-card.fc-ok { border-left-color:#8dffc4; }
.feed-card.fc-lager { border-left-color:#ff914d; }
.feed-icon {
width:34px; height:34px; border-radius:10px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.fc-warn .feed-icon { background:rgba(255,43,43,.15); }
.fc-discord .feed-icon { background:rgba(88,101,242,.18); }
.fc-system .feed-icon { background:rgba(255,209,106,.14); }
.fc-ok .feed-icon { background:rgba(141,255,196,.12); }
.fc-lager .feed-icon { background:rgba(255,145,77,.14); }
.feed-body { flex:1; min-width:0; }
.feed-top { display:flex; align-items:center; gap:7px; margin-bottom:3px; flex-wrap:wrap; }
.feed-frak-badge {
font-size:.67rem; font-weight:800; padding:2px 7px; border-radius:6px;
letter-spacing:.04em; flex-shrink:0;
}
.feed-action { font-size:.84rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-sub { font-size:.74rem; color:var(--muted); }
.feed-time { font-size:.7rem; color:rgba(255,255,255,.28); flex-shrink:0; white-space:nowrap; }
/* ── Quick Shortcuts ── */
.dash-shortcuts {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.dash-shortcut {
padding:13px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
color:var(--text); font-size:.88rem; font-weight:600; cursor:pointer; text-align:left;
transition:background .18s, border-color .18s, transform .18s;
}
.dash-shortcut:hover {
background:rgba(255,43,43,.14); border-color:rgba(255,43,43,.3);
transform:translateY(-2px);
}
/* Ticker Bar */
.ticker-bar {
display:flex; align-items:center; overflow:hidden;
background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
border-radius:12px; margin-bottom:18px; height:40px; position:relative;
}
.ticker-bar::before, .ticker-bar::after {
content:''; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
.ticker-bar::before { left:0; background:linear-gradient(90deg, rgba(10,3,4,1), transparent); }
.ticker-bar::after { right:0; background:linear-gradient(-90deg, rgba(10,3,4,1), transparent); }
.ticker-track {
display:flex; align-items:center; gap:0;
white-space:nowrap; animation:tickerScroll 32s linear infinite;
will-change:transform;
}
.ticker-track:hover { animation-play-state:paused; }
.ticker-item {
display:inline-flex; align-items:center; gap:6px;
font-size:.82rem; padding:0 20px; color:rgba(255,255,255,.6);
}
.ticker-item b { color:#fff5f5; font-weight:700; }
.ticker-sep {
color:rgba(255,43,43,.7); font-size:.7rem; flex-shrink:0;
}
@keyframes tickerScroll {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}