/* ============================================================
   RFONLINE.DEV — WARROOM UI v3
   Tactical / sci-fi broadcast design. Sharp cuts, HUD panels,
   race-coded accents, mono numerals. No generic glassmorphism.
   ============================================================ */
:root {
    --bg: #0a0b0d;
    --bg2: #0e1014;
    --panel: #131519;
    --panel2: #171a20;
    --line: #23272f;
    --line-hi: #333a46;
    --txt: #e9ecf1;
    --txt-dim: #98a0ad;
    --txt-faint: #5b6370;

    --amber: #ffb84d;
    --cyan: #38b6ff;
    --violet: #b07bff;
    --crimson: #ff5a5f;
    --green: #3ddc84;
    --warn: #ffd23d;
    --blue: #39a7ff;

    /* race colors — RF kanonik: Bellato pink muda, Cora ungu, Accretia biru muda */
    --race-bellato: #ff9fc2;
    --race-cora: #b07bff;
    --race-accretia: #6ec1ff;

    /* aliases dipakai inline style / content lama */
    --galaxy-1: var(--cyan);
    --ancient-1: var(--amber);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-bg-strong: var(--panel2);
    --glass-border: var(--line);
    --glass-border-hi: var(--line-hi);
    --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);

    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --disp: 'Rajdhani', 'JetBrains Sans', 'Segoe UI', sans-serif;
    --font: 'Chakra Petch', 'JetBrains Sans', 'Segoe UI', sans-serif;

    --radius: 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--txt);
    background: var(--bg);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

code {
    font-family: var(--mono);
    font-size: .88em;
    color: var(--cyan);
    background: rgba(56, 182, 255, .1);
    border: 1px solid rgba(56, 182, 255, .18);
    padding: 1px 6px 2px;
    border-radius: 5px;
    white-space: nowrap;
}
warning {
    font-family: var(--mono);
    font-size: .88em;
    color: var(--crimson);
    background: rgba(255, 90, 95, .1);
    border: 1px solid rgba(255, 90, 95, .28);
    padding: 1px 6px 2px;
    border-radius: 5px;
    white-space: nowrap;
}
kbd { font-family: var(--mono); font-size: .85em; color: var(--txt); background: var(--panel2); border: 1px solid var(--line-hi); border-bottom-width: 2px; padding: 1px 6px; border-radius: 5px; }

/* ---------- BACKGROUND (grid + noise) ---------- */
.bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
}
.bg-noise {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.bg-nebula { display: none; }

.site { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }
.container { width: min(1180px, 92%); margin: 0 auto; }

/* ============================================================
   HUD HELPERS
   ============================================================ */
.cham { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.cham-sm { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.corner { position: relative; }
.corner::before, .corner::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2; }
.corner::before { top: -1px; left: -1px; border-top: 2px solid var(--panel-accent, var(--line-hi)); border-left: 2px solid var(--panel-accent, var(--line-hi)); }
.corner::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--panel-accent, var(--line-hi)); border-right: 2px solid var(--panel-accent, var(--line-hi)); }

.kicker {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--txt-faint);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: var(--amber); }
.kicker b { color: var(--amber); font-weight: 700; font-style: normal; }
.section-kicker { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--txt-faint); }
.section-kicker::before { content: ""; width: 22px; height: 1px; background: var(--amber); }
.section-kicker svg { display: none; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: sticky; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(10, 11, 13, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--txt); }
.brand-mark {
    width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .05em; color: #05060a;
}
.brand-name { font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.brand-name em { font-style: normal; color: var(--amber); }
.brand-img { max-height: 34px; display: block; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin-left: auto; }
.nav-links > li { position: relative; }
.nav-links a.nav-main {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px; color: var(--txt-dim); text-decoration: none;
    font-family: var(--disp); font-weight: 600; font-size: 13px;
    letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s;
}
.nav-links a.nav-main:hover { color: var(--txt); }
.nav-links a.nav-main.active { color: var(--txt); border-bottom-color: var(--amber); }
.nav-links a.nav-main svg { flex: 0 0 auto; }
.nav-links a.nav-main .nav-caret { transition: transform .18s; }

.nav-drop-toggle { cursor: pointer; user-select: none; }
.nav-drop { position: relative; }
.nav-drop::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; z-index: 5;
}
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
    position: absolute; top: 100%; left: 0; min-width: 210px;
    background: var(--panel2); border: 1px solid var(--line);
    padding: 6px; display: none; z-index: 120;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.nav-menu::before {
    content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px;
    background: var(--panel2); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(45deg);
}
.nav-drop.open .nav-menu { display: block; }
.nav-drop:hover .nav-menu { display: block; }
.nav-menu a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    color: var(--txt-dim); text-decoration: none;
    font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.nav-menu a:hover { background: rgba(255, 255, 255, .03); color: var(--txt); }
.nav-menu a.active { color: var(--amber); }

.nav-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
    padding: 9px 16px; background: var(--amber); color: #16130b; text-decoration: none;
    font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: filter .15s;
}
.nav-cta:hover { filter: brightness(1.1); }
.nav-toggle {
    display: none; background: none; border: 1px solid var(--line-hi); color: var(--txt);
    width: 38px; height: 38px; place-items: center; cursor: pointer;
}
.nav-right { display: flex; align-items: center; gap: 10px; }

/* flash */
.flash {
    padding: 12px 18px; text-align: center; font-family: var(--mono); font-size: 12px;
    letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.flash.success, .flash.ok { color: var(--green); background: rgba(61, 220, 132, .06); }
.flash.error { color: var(--crimson); background: rgba(255, 90, 95, .06); }
.flash.info { color: var(--cyan); background: rgba(56, 182, 255, .06); }

/* ============================================================
   PAGES (SPA)
   ============================================================ */
.page { display: none; }
.page.active { display: block; flex: 1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 22px; text-decoration: none; cursor: pointer; border: 0;
    font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: filter .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.btn .btn-ico { flex: 0 0 auto; }
.btn:hover { filter: brightness(1.25) drop-shadow(0 6px 18px rgba(255,184,77,.4)); transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; filter: brightness(1); }
.btn-solar, .btn-galaxy { background: var(--amber); color: #16130b; }
.btn-ancient { background: var(--crimson); color: #fff; }
.btn-ghost { background: transparent; color: var(--txt); }
.btn-ghost::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background: var(--line-hi); transition: background .2s ease;
}
.btn-ghost::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(11px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 11px), calc(100% - 11px) calc(100% - 1px), 1px calc(100% - 1px), 1px 11px);
    background: rgba(255, 255, 255, .03); transition: background .2s ease;
}
.btn-ghost:hover { filter: none; color: var(--amber); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,184,77,.3); }
.btn-ghost:hover::before { background: #4c5668; }
.btn-ghost:hover::after { background: rgba(255, 255, 255, .08); }
.btn-ghost.solar { color: var(--amber); }
.btn-ghost.solar::before { background: rgba(255, 184, 77, .4); }
.btn-ghost.solar::after { background: rgba(255, 184, 77, .07); }
.btn-ghost.solar:hover { color: #16130b; }
.btn-ghost.solar:hover::before { background: var(--amber); }
.btn-ghost.solar:hover::after { background: rgba(255, 184, 77, .12); }
.btn-race { background: var(--crimson); color: #fff; }

/* ============================================================
   HERO (HOME)
   ============================================================ */
.hero { position: relative; }
.hero-inner { padding: 66px 0 38px; position: relative; }
.hero-logo { text-align: center; margin-bottom: 28px; }
.hero-logo img { max-height: var(--hero-logo-size, 220px); display: inline-block; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .5)); }
.hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.status-pill {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--txt-dim);
    border: 1px solid var(--line-hi); padding: 7px 13px; background: rgba(255, 255, 255, .02);
}
.status-pill .warn { color: var(--warn); }
.status-pill .ok { color: var(--green); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulse 2s infinite; }
.pulse.down { background: var(--crimson); box-shadow: none; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); } 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

.hero h1 {
    font-family: var(--disp); font-weight: 700; font-size: clamp(38px, 6vw, 74px);
    line-height: .99; letter-spacing: .02em; text-transform: uppercase; margin: 6px 0 0;
}
.hero h1 .g { color: var(--race-bellato); }
.hero h1 .v { color: var(--race-cora); }
.hero h1 .a { color: var(--race-accretia); }
.hero h1 .vs { color: var(--txt-faint); font-size: .5em; vertical-align: middle; letter-spacing: .2em; margin: 0 .14em; font-weight: 600; }
.hero h1 .dim { color: var(--txt); }
.hero-sub { max-width: 640px; color: var(--txt-dim); font-size: 15px; margin: 20px 0 30px; }
.hero-sub b { color: var(--txt); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* war ticker */
.war-ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; position: relative; }
.war-t { padding: 18px 22px; border-right: 1px solid var(--line); position: relative; }
.war-t:last-child { border-right: 0; }
.war-t .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--txt-faint); text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.war-t .lbl::before { content: ""; width: 16px; height: 1px; background: var(--txt-faint); }
.war-t .lbl svg { flex: 0 0 auto; }
.war-t .lbl .st { color: var(--green); font-weight: 700; }
.war-t .lbl .hot { color: var(--crimson); font-weight: 700; animation: blink 1.4s steps(2, start) infinite; }
.war-t .lbl .stb { color: var(--txt-faint); font-weight: 700; }
@keyframes blink { 50% { opacity: .35; } }
.war-t .num { font-family: var(--mono); font-weight: 700; font-size: 26px; color: var(--txt); margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.war-t .num small { font-size: 12px; color: var(--txt-faint); font-weight: 500; margin-left: 6px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 58px 0 20px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 14px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.section-head .right { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); letter-spacing: .14em; text-transform: uppercase; }
.section-head p { color: var(--txt-dim); font-size: 13px; margin-top: 4px; }

/* ============================================================
   PANELS
   ============================================================ */
.panel, .glass {
    background: linear-gradient(180deg, rgba(22,24,30,.7), rgba(19,21,25,.6));
    border: 1px solid rgba(255,255,255,.07); position: relative;
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.panel .p-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--txt-faint); text-transform: uppercase;
}
.panel .p-head .sq { width: 8px; height: 8px; background: var(--panel-accent, var(--amber)); flex: 0 0 8px; transform: rotate(45deg); }
.panel .p-head .ico { margin-left: auto; display: inline-flex; }
#s-dot svg { color: var(--green); }
#s-dot.down svg { color: var(--crimson); }

/* Server mode tag */
.s-mode-tag { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); display: inline-flex; gap: 2px; align-items: center; }
.s-mode-tag .sm-letter { display: inline-block; opacity: 0; transform: translateY(4px) scale(0.6); }
.s-mode-tag .sm-letter.sm-in { animation: smPopIn .3s ease forwards; }
.s-mode-tag .sm-space { width: 4px; }
@keyframes smPopIn { 0% { opacity: 0; transform: translateY(4px) scale(0.6); } 60% { opacity: 1; transform: translateY(-1px) scale(1.08); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.panel .p-body { padding: 18px 16px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================
   SERVER STATUS PANEL
   ============================================================ */
.big-num { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.big-num .big-sep { color: var(--amber); font-size: 15px; font-weight: 700; }
.big-num small { font-size: 13px; color: var(--amber); font-weight: 700; letter-spacing: .08em; }
.meter { margin-top: 16px; }
.meter .m-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--txt-faint); text-transform: uppercase; margin-bottom: 7px; }
.meter .track { height: 6px; background: var(--line); position: relative; overflow: hidden; }
.meter .fill { height: 100%; width: 0; transition: width .8s ease; }
.meter .fill.g { background: var(--green); }
.meter .fill.w { background: var(--warn); }
.meter .fill.r { background: var(--crimson); }

/* state yang di-set app.js (className diganti penuh) */
.s-load-fill { height: 100%; width: 100%; background: var(--warn); transition: width .8s ease; }
.s-load-fill.s-fill-full { background: var(--crimson); }
.s-load-fill.s-fill-busy { background: var(--warn); }
.s-load-fill.s-fill-off { background: var(--txt-faint); }
.s-load-badge { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line-hi); color: var(--txt-dim); }
.s-load-badge.s-normal { color: var(--green); border-color: rgba(61, 220, 132, .4); }
.s-load-badge.s-busy { color: var(--warn); border-color: rgba(255, 210, 61, .4); }
.s-load-badge.s-full { color: var(--crimson); border-color: rgba(255, 90, 95, .4); }
.s-load-badge.s-off { color: var(--txt-faint); }

.rows { margin-top: 18px; border-top: 1px solid var(--line); }
.row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.row span { color: var(--txt-faint); }
.row b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; font-weight: 500; color: var(--txt); }
.row b.up { color: var(--green); }
.row b .pulse-dot, .row b .dr { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: var(--green); vertical-align: 1px; }
.row b .pulse-dot.down { background: var(--crimson); }

/* ============================================================
   CHIP WAR PANEL
   ============================================================ */
.race-bar { margin-bottom: 15px; }
.race-bar .rb-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 12.5px; }
.race-bar .rb-top b { font-weight: 600; display: inline-flex; align-items: center; }
.race-bar .rb-top b .race-ico { margin-right: 6px; vertical-align: -2px; }
.race-bar .rb-top .pct { font-family: var(--mono); font-size: 12px; }
.race-bar .track { height: 9px; background: var(--line); position: relative; display: flex; overflow: hidden; }
.race-bar .track i { display: block; height: 100%; }
.fill-bel { background: var(--race-bellato); }
.fill-cora { background: var(--race-cora); }
.fill-acc { background: var(--race-accretia); }
.chip-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--txt-faint); text-transform: uppercase; }
.chip-foot .winner { display: flex; align-items: center; gap: 8px; color: var(--txt-dim); }
.medal { font-family: var(--disp); font-weight: 700; color: var(--amber); }

/* chip info partial (di-poll live) */
.chip-info { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.chip-info .sinfo { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12.5px; }
.chip-info .sinfo span { color: var(--txt-faint); }
.chip-info .sinfo b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--txt); }
.chip-info .cb-divider { height: 1px; background: var(--line); margin: 2px 0; }
.chip-info .cb-status[data-status="goal"] { color: var(--green); }
.chip-info .cb-status[data-status="fail"] { color: var(--crimson); }
.chip-info .cb-status[data-status="running"] { color: var(--warn); }
.cb-class { display: inline-flex; }

/* ============================================================
   RATES PANEL
   ============================================================ */
.rate-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rate-row:last-child { border-bottom: 0; }
.rate-row span { color: var(--txt-dim); }
.rate-row b { font-family: var(--mono); font-weight: 600; color: var(--txt); font-size: 12.5px; text-align: right; }
.rate-row b.x { color: var(--amber); }
.rate-row b.prem { color: var(--violet); }
.rate-row b.vals { color: var(--amber); }
.rate-row b.vals .p-val { color: var(--violet); }
.rate-row b.vals .sep { font-style: normal; color: var(--txt-faint); margin: 0 5px; }
.rate-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; padding: 2px 6px; border: 1px solid var(--line-hi); color: var(--txt-faint); }
.rate-tag.p { color: var(--violet); border-color: rgba(176, 123, 255, .35); }

/* ============================================================
   NEWS (HOME)
   ============================================================ */
.news-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.news-main { display: flex; flex-direction: column; gap: 16px; }
.news-main .news-list { flex: 1; }
.headline {
    position: relative; min-height: 300px; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 24px; border: 1px solid var(--line);
    background: var(--panel); overflow: hidden; color: var(--txt); text-decoration: none;
}
.headline .hbg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 13, 0) 20%, rgba(10, 11, 13, .95) 90%), radial-gradient(300px 120px at 80% 20%, rgba(56, 182, 255, .1), transparent); background-size: cover; background-position: center; }
.headline .tag { position: relative; align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(255, 184, 77, .4); padding: 4px 9px; background: rgba(255, 184, 77, .08); margin-bottom: 14px; }
.headline h3 { position: relative; font-family: var(--disp); font-weight: 700; font-size: 24px; letter-spacing: .02em; line-height: 1.2; }
.headline p { position: relative; color: var(--txt-dim); font-size: 13px; margin-top: 8px; }
.headline .meta { position: relative; font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint); letter-spacing: .14em; text-transform: uppercase; margin-top: 14px; }

.news-list { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); }
.news-list .nl-head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--txt-faint); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.news-list .nl-head::before { content: ""; width: 8px; height: 8px; background: var(--crimson); transform: rotate(45deg); }
.nl-item { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--txt); transition: background .15s; }
.nl-item:hover { background: rgba(255, 255, 255, .025); }
.nl-item .ni-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); flex: 0 0 56px; padding-top: 3px; }
.nl-item .ni-tag.ev, .nl-item .ni-tag.event { color: var(--crimson); }
.nl-item .ni-tag.mt, .nl-item .ni-tag.maintenance { color: var(--warn); }
.nl-item .ni-body h4 { font-family: var(--disp); font-weight: 600; font-size: 15px; letter-spacing: .02em; line-height: 1.3; }
.nl-item .ni-body .ni-meta { font-family: var(--mono); font-size: 9.5px; color: var(--txt-faint); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }

.news-rail { display: flex; flex-direction: column; gap: 16px; }
.rail { background: rgba(22,24,30,.55); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04); }
.rail .rail-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--txt-faint); text-transform: uppercase; }
.rail .rail-head .ico { color: var(--amber); }
.sp-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sp-row:last-child { border-bottom: 0; }
.sp-row .rk { font-family: var(--mono); font-weight: 700; width: 18px; text-align: center; color: var(--txt-faint); display: inline-flex; align-items: center; justify-content: center; }
.sp-row .rk .medal-ic { width: 17px; height: 17px; vertical-align: middle; }
.sp-row .rk.g1 { color: var(--amber); }
.sp-row .rk.g2 { color: #c9d4e4; }
.sp-row .rk.g3 { color: #d4915a; }
.sp-row .nm { flex: 1; font-weight: 600; font-family: var(--disp); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row .vl { font-family: var(--mono); font-size: 12px; color: var(--txt-dim); }
.sp-row .vl b { color: var(--amber); font-weight: 600; }
.badge-gm { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 1px 5px; border-radius: 3px; background: rgba(255,90,95,.15); color: var(--crimson); border: 1px solid rgba(255,90,95,.25); line-height: 1.4; vertical-align: middle; flex: 0 0 auto; margin-left: 10px; }
.badge-del { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 1px 5px; border-radius: 3px; background: rgba(255,210,61,.15); color: var(--warn); border: 1px solid rgba(255,210,61,.3); line-height: 1.4; vertical-align: middle; flex: 0 0 auto; margin-left: 10px; }
.kf-killer .badge-gm { margin-right: 10px; margin-left: 0; }
.kf-victim .badge-gm { margin-left: 10px; margin-right: 0; }

.arch-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.arch-row:last-child { border-bottom: 0; }
.arch-row .rk { font-family: var(--disp); font-weight: 700; font-size: 15px; width: 16px; text-align: center; color: var(--txt-faint); }
.arch-row .rc { width: 9px; height: 9px; transform: rotate(45deg); flex: 0 0 9px; }
.arch-row .arc-rc { display: inline-flex; flex: 0 0 auto; }
.arch-row .nm { flex: 1; font-weight: 600; font-family: var(--disp); letter-spacing: .04em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.arch-row .nm small { display: block; color: var(--txt-faint); font-size: 10.5px; font-weight: 500; }
.arch-row:hover .nm { color: var(--amber); }
.arch-row .kd { font-family: var(--mono); font-size: 11.5px; color: var(--txt-dim); text-align: right; white-space: nowrap; }
.arch-row .kd b { color: var(--txt); }

.kf-row { display: grid; grid-template-columns: 20px 1fr auto 1fr 20px; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.kf-row:last-child { border-bottom: 0; }
.kf-row img.race-ico { display: block; }
.kf-row .nm { font-weight: 600; font-family: var(--disp); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-row .nm.kf-killer { text-align: right; }
.kf-row .nm.kf-victim { text-align: left; }
.kf-vs { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); letter-spacing: .05em; text-transform: lowercase; justify-self: center; }
.kf-empty { display: flex !important; justify-content: center; align-items: center; min-height: 64px; }
.kf-empty .kf-empty-txt { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-faint); white-space: normal; overflow: visible; text-align: center; }
.kf-row > .nm:only-child { font-weight: 600; font-family: var(--disp); font-size: 13px; letter-spacing: .04em; white-space: normal; overflow: visible; text-overflow: clip; text-align: left; grid-column: 1 / -1; }

.see-all, .seeall {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber); text-decoration: none;
}
.see-all:hover, .seeall:hover { text-decoration: underline; }
.news-list .see-all-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: auto; padding: 14px 16px; border: 0; border-top: 1px solid var(--line);
    background: transparent; text-decoration: none;
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber); cursor: pointer; transition: background .15s, color .15s;
}
.news-list .see-all-btn:hover { background: rgba(255, 184, 77, .06); color: #fff; }
.news-list .see-all-btn svg { transition: transform .15s; }
.news-list .see-all-btn:hover svg { transform: translateX(3px); }

/* ============================================================
   RANKING (HOME PREVIEW)
   ============================================================ */
.home-rank-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: 16px; align-items: stretch; }
.rank-panel { background: rgba(22,24,30,.55); border: 1px solid rgba(255,255,255,.07); align-self: stretch; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04); }
.rank-panel .rp-row { min-height: 46px; }
.rp-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.rp-head .bar { width: 3px; height: 16px; background: var(--amber); }
.rp-cols { display: grid; grid-template-columns: 40px 1fr 72px 72px; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--txt-faint); text-transform: uppercase; }
.rp-row { display: grid; grid-template-columns: 40px 1fr 72px 72px; gap: 8px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13px; transition: background .12s; min-height: 46px; }
.rp-row:last-child { border-bottom: 0; }
.rp-row:hover { background: rgba(255, 255, 255, .02); }
.rp-row .no { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); text-align: center; }
.rp-row .no.t1 { color: var(--amber); font-weight: 700; }
.rp-row .no.t2 { color: #c9d4e4; font-weight: 700; }
.rp-row .no.t3 { color: #d4915a; font-weight: 700; }
.rp-row .pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-row .pl .ico { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); font-size: 11px; }
.rp-row .pl .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--disp); letter-spacing: .03em; font-size: 14px; transition: color .15s; }
.rp-row .pl .nm small { display: block; color: var(--txt-faint); font-weight: 500; font-size: 10.5px; font-family: var(--body, var(--font)); transition: color .15s; }
.rp-row:hover .pl .nm { color: var(--amber); }
.rp-row .pl .nm small:hover { color: var(--txt-dim); }
.rp-row .k, .rp-row .d { font-family: var(--mono); font-size: 12px; text-align: right; }
.rp-row .k { color: var(--green); }
.rp-row .d { color: var(--crimson); }
.home-rank-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--txt-faint); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; border: 1px dashed var(--line-hi); }

.race-b { color: var(--race-bellato); }
.race-c { color: var(--race-cora); }
.race-a { color: var(--race-accretia); }

/* ============================================================
   COMMUNITY (HOME)
   ============================================================ */
.comm { display: grid; grid-template-columns: 1fr 1.2fr; background: rgba(22,24,30,.55); border: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04); }
.comm-info { padding: 34px 32px; }
.comm-info .c-ic { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(88, 101, 242, .12); border: 1px solid rgba(88, 101, 242, .35); color: #7289da; margin-bottom: 18px; font-size: 20px; }
.comm-info h2 { font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; }
.comm-info p { color: var(--txt-dim); font-size: 13.5px; margin: 10px 0 22px; max-width: 44ch; }
.comm-mock { background: transparent; display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.dc-member { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; transition: background .18s, border-color .18s, transform .18s; }
.dc-member .av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px; display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 12px; color: #fff; transition: transform .18s; }
.dc-member:hover { background: rgba(255, 255, 255, .04); border-color: var(--line-hi); transform: translateX(4px); }
.dc-member:hover .av { transform: scale(1.15); }
.dc-member:hover .nm { color: var(--txt); }
.dc-member .nm { transition: color .18s; }
.dc-member .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-member .nm small { display: block; color: var(--txt-faint); font-size: 10px; }
.dc-member .st { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-faint); display: flex; align-items: center; gap: 6px; }
.dc-member .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }

/* community lama fallback */
.community { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--panel); border: 1px solid var(--line); }
.community--split .community-info { padding: 34px 32px; }
.community-widget { background: var(--bg2); border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 22px; }

/* discord card partial — gaya Discord klasik */
.discord-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #404EED 0%, #2c2f66 45%, #16162a 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 101, 242, 0.35), 0 0 44px rgba(88, 101, 242, 0.28);
}
.discord-card::before {
    content: '';
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    filter: blur(44px);
    pointer-events: none;
}
.discord-card .dc-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.discord-card .dc-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.discord-card .dc-logo img { width: 100%; height: 100%; object-fit: cover; }
.discord-card .dc-meta .dc-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: rgba(255, 255, 255, 0.75);
}
.discord-card .dc-meta .dc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #23a55a;
    animation: dcPulse 1.8s infinite;
}
@keyframes dcPulse {
    0% { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(35, 165, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, 0); }
}
.discord-card .dc-meta h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; color: #fff; font-family: var(--disp); letter-spacing: .04em; }
.discord-card .dc-avatars {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    position: relative;
}
.discord-card .dc-ava-wrap {
    position: relative;
    display: inline-flex;
}
.discord-card .dc-ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ava-ring, #80848e);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.discord-card .dc-ava-wrap:hover .dc-ava {
    transform: scale(1.14);
    border-color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(88, 101, 242, 0.5);
    z-index: 2;
}
.discord-card .dc-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px) scale(0.92);
    transform-origin: bottom center;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(12, 12, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 20;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.discord-card .dc-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(12, 12, 24, 0.92);
}
.discord-card .dc-ava-wrap:hover .dc-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}
.discord-card .dc-ava.dc-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
}
.discord-card .dc-count {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font);
    letter-spacing: normal;
    text-transform: none;
}
.discord-card .dc-count b { color: #fff; font-weight: 700; }

/* ============================================================
   INNER PAGE HEADER
   ============================================================ */
.page-hero {
    padding: 52px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 34px;
    position: relative;
}
.page-hero::before { content: ""; position: absolute; bottom: -1px; left: calc((100% - min(1180px, 92%)) / 2); width: 90px; height: 2px; background: var(--amber); }
.page-hero h1 {
    font-family: var(--disp); font-weight: 700; font-size: clamp(26px, 4vw, 38px);
    letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 12px;
    width: min(1180px, 92%); margin: 0 auto;
}
.page-hero h1 svg { color: var(--amber); flex: 0 0 auto; }
.page-hero p { color: var(--txt-dim); font-size: 14px; margin: 8px auto 0; width: min(1180px, 92%); }
.page-body { padding-bottom: 20px; }

/* page panels */
.page-panel {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--line); padding: 24px 26px; margin-bottom: 20px;
}
.page-panel > h2 {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--disp); font-weight: 700; font-size: 18px;
    letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.page-panel > h2 i { display: inline-flex; color: var(--amber); font-style: normal; }
.page-panel > h2 i svg { display: block; }
.page-panel ul, .page-panel ol { padding-left: 20px; }
.page-panel li { margin: 8px 0; color: var(--txt-dim); font-size: 13.5px; }
.page-panel li::marker { color: var(--amber); }
.page-extra { color: var(--txt-dim); font-size: 13.5px; line-height: 1.7; }
.page-extra a { color: var(--cyan); }
.page-extra h3, .page-extra h4 { color: var(--txt); font-family: var(--disp); letter-spacing: .04em; text-transform: uppercase; margin: 18px 0 8px; }

/* ============================================================
   RANKING PAGE
   ============================================================ */
.rank-wrap { display: flex; flex-direction: column; gap: 18px; }
.rank-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.rank-tabs button {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer;
    position: relative;
    background: transparent; border: 0; color: var(--txt-dim);
    font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    transition: .15s;
}
.rank-tabs button::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    background: var(--line); transition: background .15s;
}
.rank-tabs button::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(8px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 8px), calc(100% - 8px) calc(100% - 1px), 1px calc(100% - 1px), 1px 8px);
    background: rgba(255, 255, 255, .03); transition: background .15s;
}
.rank-tabs button:hover { color: var(--txt); }
.rank-tabs button:hover::before { background: var(--line-hi); }
.rank-tabs button:hover::after { background: rgba(255, 255, 255, .06); }
.rank-tabs button.active { color: #16130b; }
.rank-tabs button.active::before { background: var(--amber); }
.rank-tabs button.active::after { background: var(--amber); }
.rank-tabs button svg { flex: 0 0 auto; }
.rank-pane { display: none; }
.rank-pane.active { display: block; }
.rank-filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rf-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-faint); }
.rank-filter {
    background: var(--panel2); border: 1px solid var(--line-hi); color: var(--txt);
    font-family: var(--mono); font-size: 12px; padding: 7px 12px; outline: none;
}
.rank-filter:focus { border-color: var(--amber); }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th {
    text-align: left; padding: 10px 16px; font-family: var(--mono); font-size: 9px;
    letter-spacing: .18em; color: var(--txt-faint); text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.rank-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--txt-dim); }
.rank-table tbody tr { transition: background .12s; }
.rank-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.rank-table tbody tr:last-child td { border-bottom: 0; }
.rank-no { font-family: var(--mono); font-size: 12px; color: var(--txt-faint); white-space: nowrap; }
.rank-no .medal-ic { width: 16px; height: 16px; vertical-align: -3px; }
.rank-name { font-weight: 600; font-family: var(--disp); letter-spacing: .03em; font-size: 14px; color: var(--txt); }
.rank-table .rank-name .guild-emblem { margin-right: 9px; vertical-align: -2px; }
.rank-name.nm-bellato { color: var(--race-bellato); }
.rank-name.nm-cora { color: var(--race-cora); }
.rank-name.nm-accretia { color: var(--race-accretia); }
.nm-bellato { color: var(--race-bellato); }
.nm-cora { color: var(--race-cora); }
.nm-accretia { color: var(--race-accretia); }
.rank-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rank-cell .rank-nm { display: flex; flex-direction: column; min-width: 0; }
.rank-cell .rank-guild { font-size: 10.5px; color: var(--txt-faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.rank-race { font-size: 12px; white-space: nowrap; }
.rank-val { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.rank-grade { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.class-ic, .rp-avatar { display: inline-block; }
.class-tip.class-ic-fb {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--panel2); border: 1px solid var(--line-hi);
    font-family: var(--mono); font-size: 8px; font-weight: 700; color: var(--txt-faint);
    letter-spacing: .03em; text-align: center; line-height: 1.1;
}
.class-tip {
    position: relative; display: inline-flex; flex: 0 0 auto; cursor: help;
}
.class-tip::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    padding: 5px 11px;
    background: var(--panel2); border: 1px solid var(--line-hi);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    color: var(--amber); font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 30;
    transition: opacity .16s ease, transform .16s ease;
}
.class-tip::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--line-hi);
    opacity: 0; pointer-events: none; z-index: 30; transition: opacity .16s ease;
}
.class-tip:hover::after,
.class-tip:hover::before { opacity: 1; }
.class-tip:hover::after { transform: translateX(-50%) translateY(0); }
.guild-emblem { display: inline-block; vertical-align: middle; }
.guild-emblem .ge-layer { display: block; position: absolute; inset: 0; }
.guild-emblem { position: relative; }
.guild-emblem-empty { background: var(--line); }

/* ============================================================
   NEWS LIST PAGE
   ============================================================ */
.news-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.news-cat {
    padding: 8px 15px; text-decoration: none; border: 1px solid var(--line);
    font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--txt-dim); background: linear-gradient(180deg, var(--panel2), var(--panel));
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    display: inline-flex; align-items: center; gap: 6px; transition: color .15s, border-color .15s, filter .15s;
}
.news-cat:hover { color: var(--txt); border-color: var(--line-hi); filter: brightness(1.1); }
.news-cat.active { background: var(--panel-accent, var(--amber)); color: #0b0d12; border-color: var(--panel-accent, var(--amber)); font-weight: 700; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.news-card {
    background: linear-gradient(180deg, var(--panel2), var(--panel));
    border: 1px solid var(--line); padding: 18px; display: flex; gap: 16px;
}
.news-card > .news-thumb { width: 132px; height: 132px; flex: 0 0 132px; align-self: flex-start; margin: 0; border: 1px solid var(--line); }
.news-card > .news-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.news-card:hover { border-color: var(--line-hi); }
.news-card .news-thumb { background-size: cover; background-position: center; }
.news-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--txt-faint); text-transform: uppercase; }
.news-badge { padding: 3px 8px; border: 1px solid rgba(56, 182, 255, .4); color: var(--cyan); }
.news-badge.hot { border-color: rgba(255, 90, 95, .4); color: var(--crimson); }
.news-card h3 { font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: .02em; line-height: 1.25; }
.news-card p { color: var(--txt-dim); font-size: 13px; flex: 1; }
.news-card .more { margin-top: auto; color: var(--amber); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.news-card .more:hover { text-decoration: underline; }
.news-card .news-thumb:hover { filter: brightness(1.1); }
.news-card.zig { flex-direction: row-reverse; }
.news-content { color: var(--txt-dim); font-size: 14.5px; line-height: 1.75; }
.news-content p { margin: 12px 0; }
.news-content h1, .news-content h2, .news-content h3 { color: var(--txt); font-family: var(--disp); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.news-content img { max-width: 100%; }
.news-content a { color: var(--cyan); }
.news-content ul, .news-content ol { padding-left: 22px; margin: 10px 0; }

/* ---- Tabel konten WYSIWYG (rte-table) — news & pages ---- */
.news-content table,
.page-extra table,
.acc-content table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--txt-dim);
  background: var(--panel);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 14px rgba(0,0,0,.18);
  border-radius: 10px; overflow: hidden;
}
.news-content table caption,
.page-extra table caption,
.acc-content table caption {
  caption-side: top; text-align: left; padding: 0 0 8px;
  color: var(--txt-faint); font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.news-content table th,
.news-content table td,
.page-extra table th,
.page-extra table td,
.acc-content table th,
.acc-content table td {
  border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top;
}
.news-content table thead th,
.page-extra table thead th,
.acc-content table thead th {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary,#fff) 12%, transparent), transparent);
  background: rgba(255,255,255,.05);
  color: var(--txt); font-family: var(--disp); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px;
  border-bottom: 2px solid var(--line-hi);
}
.news-content table tbody tr:nth-child(even),
.page-extra table tbody tr:nth-child(even),
.acc-content table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.news-content table tbody tr:hover,
.page-extra table tbody tr:hover,
.acc-content table tbody tr:hover { background: rgba(255,255,255,.06); }


/* ============================================================
   DOWNLOAD PAGE
   ============================================================ */
.pack-card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.pack-card:hover { border-color: var(--line-hi); }
.pack-card .pname { display: flex; align-items: center; gap: 10px; font-family: var(--disp); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.pack-card .pname svg { color: var(--amber); }
.pack-card .pdesc { color: var(--txt-dim); font-size: 13px; flex: 1; }
.pack-card .pm { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-card .pm span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--txt-dim); border: 1px solid var(--line); padding: 4px 9px; text-transform: uppercase; }
.pack-card .btn { align-self: flex-start; }

/* ---------- Download (client & patch mirror sections) ---------- */
.dl-section { position: relative; padding: 26px 28px; }
.dl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dl-head h2 { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 24px; line-height: 1.1; color: var(--txt); display: flex; align-items: center; gap: 12px; }
.dl-head h2 svg { color: var(--amber); flex: 0 0 auto; }
.dl-count { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--txt-faint); text-transform: uppercase; border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; }
.dl-list { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dl-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-left: 3px solid var(--galaxy-1); }
.dl-row:hover { border-color: var(--line-hi); }
.dl-srv { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; padding: 6px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.dl-srv img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-main { flex: 1; min-width: 0; }
.dl-file { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 600; font-size: 15px; color: var(--txt); letter-spacing: .04em; text-transform: uppercase; }
.dl-file svg { color: var(--galaxy-1); flex: 0 0 auto; }
.dl-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--txt-faint); margin-top: 3px; }
.dl-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--txt-faint); display: inline-block; }
.dl-size { font-family: var(--mono); font-size: 11px; color: var(--txt-dim); border: 1px solid var(--line); padding: 5px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.dl-size svg { color: var(--amber); }
.dl-row .btn { flex: 0 0 auto; }
.dl-btn { padding: 8px 14px !important; font-size: 12px !important; background: var(--dlc, var(--amber)) !important; color: #10100b !important; }
.dl-btn:hover { filter: brightness(1.18); }
.dl-note { margin: 0 0 16px; }

/* ============================================================
   CONTENT BLOCKS (dari admin)
   ============================================================ */
.info-note { border-left: 3px solid var(--amber); background: rgba(255, 184, 77, .05); padding: 12px 16px; color: var(--txt-dim); font-size: 13px; margin-bottom: 18px; }
.rt-table, .rate-table { width: 100%; border-collapse: collapse; }
.rt-table th, .rt-table td, .rate-table th, .rate-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; }
.rt-table th, .rate-table th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--txt-faint); text-transform: uppercase; }
.rt-table td, .rate-table td { color: var(--txt-dim); }
.rt-table tr:last-child td, .rate-table tr:last-child td { border-bottom: 0; }
.rt-table td:first-child { color: var(--txt); font-family: var(--disp); font-weight: 600; letter-spacing: .04em; }
.dl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dl-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-decoration: none; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); }
.dl-card:hover { border-color: var(--amber); }
.dl-card .dl-name { font-family: var(--disp); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dl-card .dl-size { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-cell { background: var(--panel2); border: 1px solid var(--line); padding: 16px; }
.pay-cell .pay-name { display: block; font-family: var(--disp); font-weight: 700; letter-spacing: .1em; color: var(--amber); text-transform: uppercase; font-size: 13px; }
.pay-cell .pay-num { display: block; font-family: var(--mono); font-size: 15px; margin-top: 6px; color: var(--txt); }
.pay-cell .pay-hold { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint); margin-top: 2px; text-transform: uppercase; letter-spacing: .1em; }
.rules-list { padding-left: 20px; }
.rules-list li { margin: 9px 0; color: var(--txt-dim); font-size: 13.5px; }
.rules-list li::marker { color: var(--amber); font-weight: 700; }
.rules-list li.gold { color: var(--txt); }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-cell { display: flex; align-items: center; gap: 12px; padding: 16px; text-decoration: none; background: var(--panel2); border: 1px solid var(--line); color: var(--txt); font-family: var(--disp); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.ct-cell:hover { border-color: var(--amber); }
.ct-ico { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; background: var(--line); font-family: var(--mono); font-size: 10px; color: var(--amber); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.contact-cell { background: var(--panel2); border: 1px solid var(--line); padding: 18px; }
.contact-cell .ic { margin-bottom: 10px; }
.contact-cell h4 { font-family: var(--disp); font-weight: 700; letter-spacing: .14em; font-size: 13px; margin-bottom: 6px; }
.contact-cell p { color: var(--txt-dim); font-size: 12.5px; line-height: 1.6; }
.donate-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dp-group { background: var(--panel2); border: 1px solid var(--line); padding: 16px; }
.dp-gname { font-family: var(--disp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--amber); margin-bottom: 10px; }
.dp-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--txt-dim); }
.dp-row:last-child { border-bottom: 0; }
.dp-row b { font-family: var(--mono); color: var(--txt); }
.dp-row span { font-family: var(--mono); }

/* accordion */
.accordion { border: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 0; }
.acc-head {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; background: var(--panel2); border: 0; border-bottom: 1px solid transparent; color: var(--txt); cursor: pointer;
    font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; text-align: left;
    transition: background .2s, color .2s;
}
.acc-head:hover { background: rgba(255, 255, 255, .04); }
.acc-item.open .acc-head { color: var(--amber); border-bottom-color: var(--line); background: rgba(255, 184, 77, .04); }
.acc-chev { transition: transform .25s ease; color: var(--txt-faint); display: inline-flex; }
.acc-item.open .acc-chev { transform: rotate(180deg); color: var(--amber); }
.acc-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.acc-item.open .acc-wrap { grid-template-rows: 1fr; }
.acc-body { overflow: hidden; }
.acc-content { color: var(--txt-dim); font-size: 13.5px; padding: 10px 18px 18px; }

/* locked / empty state */
.locked { text-align: center; padding: 40px 20px; color: var(--txt-dim); }
.locked .ic { margin-bottom: 12px; color: var(--txt-faint); }
.locked h3 { font-family: var(--disp); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 18px; margin-bottom: 6px; }
.locked p { font-size: 13px; color: var(--txt-faint); }

/* ============================================================
   FORMS (contact)
   ============================================================ */
.admin-form { display: flex; flex-direction: column; gap: 14px; }
.admin-form .field { display: flex; flex-direction: column; gap: 6px; }
.admin-form label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-faint); }
.admin-form input, .admin-form textarea, .admin-form select {
    background: var(--panel2); border: 1px solid var(--line-hi); color: var(--txt);
    padding: 11px 14px; font-family: var(--font); font-size: 13.5px; outline: none; transition: border-color .15s;
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--amber); }
.admin-form ::placeholder { color: var(--txt-faint); }
.contact-count { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--txt-faint); text-transform: uppercase; }
.contact-count span { color: var(--amber); font-weight: 700; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); margin-top: 70px; background: var(--bg2); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; flex-wrap: wrap; }
.footer-copy { color: var(--txt-faint); font-size: 12px; font-family: var(--mono); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-hi); color: var(--txt-dim); transition: .15s; }
.footer-social a:hover { border-color: var(--amber); color: var(--amber); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--txt-dim); text-decoration: none; font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.footer-links a:hover { color: var(--amber); }
.footer-legal { padding: 22px 0 30px; border-top: 1px solid var(--line); }
.footer-legal-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-legal p { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--txt-faint); text-transform: uppercase; line-height: 1.7; }
.footer-legal-left { max-width: 100ch; flex: 1; min-width: 0; }
.footer-legal-right { display: flex; align-items: center; gap: 10px; }
.legal-by { color: var(--txt-faint); font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.legal-brand {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border: 1px solid var(--line-hi);
    font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .2em;
    color: var(--amber); text-decoration: none; transition: border-color .15s, background .15s;
}
.legal-brand:hover { border-color: var(--amber); background: rgba(255, 184, 77, .06); }

/* ============================================================
   SCROLL TOP + REVEAL
   ============================================================ */
.scroll-top {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    width: 42px; height: 42px; display: grid; place-items: center;
    background: transparent; border: 0; color: var(--txt-dim);
    cursor: pointer; opacity: 0; pointer-events: none; transition: .2s;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.scroll-top::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    background: var(--line-hi); transition: background .2s;
}
.scroll-top::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    clip-path: polygon(7px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 7px), calc(100% - 7px) calc(100% - 1px), 1px calc(100% - 1px), 1px 7px);
    background: var(--panel2); transition: background .2s;
}
.scroll-top.show { opacity: 1; pointer-events: auto; }
.scroll-top:hover { color: var(--amber); }
.scroll-top:hover::before { background: var(--amber); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible, .reveal.active { opacity: 1; transform: none; }
.page-body .glass { transition: opacity .5s ease, transform .5s ease; }
.page-body .glass.visible, .page-body .glass.active { opacity: 1 !important; transform: none !important; }

/* race icons */
.race-ico { display: inline-block; vertical-align: -2px; }
.medal-ic { width: 16px; height: 16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .news-card { flex-direction: column; }
    .news-card > .news-thumb { width: 100%; height: 160px; flex: 0 0 auto; }
    .news-card.zig { flex-direction: column; }
    .grid-3, .news-layout, .rank-wrap, .comm, .home-rank-grid, .two-col,
    .news-grid, .dl-list, .pay-grid, .ct-grid, .donate-packs { grid-template-columns: 1fr; }
    .rp-cols { grid-template-columns: 28px 1fr 56px; padding: 8px 12px; }
    .rp-cols span:nth-child(4) { display: none; }
    .rp-row { grid-template-columns: 28px 1fr 56px; padding: 8px 12px; min-height: 40px; }
    .rp-row .d, .rp-row span:nth-child(4) { display: none; }
    .rp-row .pl .nm { font-size: 13px; }
    .rp-row .pl .ico { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; }
    .rp-head { padding: 11px 12px; font-size: 13px; }
    .comm-mock { border-left: 0; border-top: 1px solid var(--line); }
    .community { grid-template-columns: 1fr; }
    .community-widget { border-left: 0; border-top: 1px solid var(--line); }
    .war-ticker { grid-template-columns: 1fr; }
    .war-t { border-right: 0; border-bottom: 1px solid var(--line); }
    .war-t:last-child { border-bottom: 0; }
    .nav-cta { display: none; }
}
@media (max-width: 860px) {
    .nav-links {
        position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-end;
        background: rgba(10, 11, 13, .98); border-bottom: 1px solid var(--line);
        padding: 12px; gap: 4px; display: none; margin-left: 0;
    }
    .nav-links.open { display: flex; }
    .nav-links > li { width: auto; }
    .nav-links a.nav-main { padding: 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 0; text-align: right; }
    .nav-links a.nav-main.active { border-bottom-color: var(--amber); }
    .nav-links a.nav-main .nav-caret { transform-origin: center; }
    .nav-menu { position: static; display: none; box-shadow: none; border: 0; padding: 0; min-width: 0; }
    .nav-menu::before { display: none; }
    .nav-menu a { justify-content: flex-end; text-align: right; }
    .nav-drop.open .nav-menu, .nav-drop:hover .nav-menu { display: block; }
    .nav-toggle { display: grid; }
}
@media (max-width: 760px) {
    .dl-section { padding: 18px; }
    .dl-head h2 { font-size: 20px; }
    .dl-row { flex-wrap: wrap; gap: 10px 12px; }
    .dl-srv { width: 38px; height: 38px; font-size: 12px; border-radius: 8px; }
    .dl-main { flex: 1 1 100%; order: 1; }
    .dl-row .dl-size { margin-left: 50px; }
    .dl-row .btn { width: 100%; justify-content: center; }
}