/* LumBot panel — tek dosya, bağımlılıksız. Vurgu rengi /brand.css ile gelir (--accent). */
:root {
  --accent: #16b8c8;
  --accent-ink: #062b39;
  --bg: #f2f6fb; --surface: #ffffff; --surface-2: #f6f9fd; --ink: #17233b; --muted: #64748b;
  --line: #e0e7f0; --line-2: #cbd6e5;
  --side: #111a32; --side-ink: #c4cce0; --side-hi: #202e50; --side-line: #29385a;
  --ok: #2b9a5f; --ok-bg: #def3e7; --warn: #c98200; --warn-bg: #fbefd2; --bad: #d1443b; --bad-bg: #fbe3e0;
  --shadow: 0 2px 6px rgba(21, 36, 70, .04), 0 12px 30px rgba(21, 36, 70, .07);
  --radius: 14px;
  --head: Bahnschrift, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020; --surface: #121b31; --surface-2: #18243d; --ink: #e8eefb; --muted: #9aa9c2;
    --line: #26334d; --line-2: #354665; --side: #080d1b; --side-hi: #172442; --side-line: #1b2947;
    --ok-bg: #123a27; --warn-bg: #3d3010; --bad-bg: #431c1a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  }
}
* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: .01em; margin: 0; }
h2 { font-size: 1.35rem; } h3 { font-size: 1rem; }
small, .muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .88em; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- kabuk ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; padding: 2px 8px 18px; font-family: var(--head); font-size: 1.25rem; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: #6f877f; padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--side-ink); text-decoration: none; }
.nav a:hover { background: var(--side-hi); color: #fff; }
.nav a.on { background: var(--side-hi); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.badge { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 99px; font-size: .72rem; padding: 0 7px; min-width: 20px; text-align: center; font-weight: 700; }
.side-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--side-line); padding-top: 12px; margin-top: 12px; }
.who { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: #fff; padding: 6px 8px; border-radius: 8px; min-width: 0; }
.who:hover { background: var(--side-hi); }
.who span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who small { color: #7f968e; }
.icon-btn { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 8px; border-radius: 8px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--side-hi); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.top-title { font-family: var(--head); font-size: 1.25rem; flex: 1; }
.burger { display: none; color: var(--ink); }
.burger:hover { background: var(--surface-2); }
.live { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-2); }
.live-count { color: var(--muted); }
.content { padding: 26px 28px 56px; max-width: 1320px; width: 100%; display: flex; flex-direction: column; gap: 18px; }

/* ---------- parçalar ---------- */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.dot.off { background: var(--bad); } .dot.warn { background: var(--warn); }
.small-dot { width: 7px; height: 7px; margin-left: 6px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 10px 28px rgba(21, 36, 70, .09); }
.announce-card { border-top: 3px solid var(--accent); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head.pad { padding: 16px 20px 4px; margin: 0; }
.card-head a { font-size: .88rem; color: var(--muted); }
.pad { padding: 0 20px 14px; }
.count { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 8px; font-size: .78rem; color: var(--muted); margin-left: 4px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.flash { padding: 11px 15px; border-radius: 9px; border: 1px solid; font-size: .95rem; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.flash.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.flash.err { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.flash.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); margin-bottom: 10px; }
.empty { color: var(--muted); padding: 22px 8px; text-align: center; font-size: .93rem; }
.chip { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.pill.approved, .pill.open { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.pill.pending { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.rejected, .pill.removed { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.pts { display: inline-block; min-width: 24px; text-align: center; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-weight: 700; padding: 0 6px; }
.pts.hot, .hot { color: var(--bad); }
.pts.hot { background: var(--bad-bg); }

/* butonlar & formlar */
.btn { font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn.sm { padding: 5px 10px; font-size: .84rem; }
.btn.block { width: 100%; justify-content: center; padding: 11px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger-o { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.btn.danger-o:hover { background: var(--bad-bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
input, select, textarea { font: inherit; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { width: 100%; min-height: 84px; resize: vertical; }
input.narrow { width: 96px; }
label { font-size: .88rem; color: var(--muted); display: block; margin-bottom: 4px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .92rem; margin: 0; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline.wide input:not(.narrow) { flex: 1 1 180px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
form.inline { display: inline-flex; }
.switch { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: .95rem; cursor: pointer; margin: 0; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 40px; height: 22px; border-radius: 99px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* araç çubuğu, sekmeler, arama */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.tabs a { text-decoration: none; padding: 6px 13px; border-radius: 7px; color: var(--muted); font-size: .92rem; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tabs a.on .count { background: rgba(0, 0, 0, .12); border-color: transparent; color: inherit; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; color: var(--muted); }
.search input, .search select { border: 0; background: transparent; padding: 8px 4px; }
.search input { min-width: 220px; }
.search:focus-within { border-color: var(--accent); }

/* tablo */
.wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tr:hover > td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
tr.off td { color: var(--muted); } tr.off td:not(:last-child) { text-decoration: line-through; text-decoration-color: var(--line-2); }
.who-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.who-link:hover b { text-decoration: underline; }

/* avatar */
.avatar { position: relative; display: inline-grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); color: var(--ink); font-weight: 700; overflow: hidden; flex: none; image-rendering: pixelated; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.s24 { width: 24px; height: 24px; font-size: .7rem; } .s28 { width: 28px; height: 28px; font-size: .75rem; } .s32 { width: 32px; height: 32px; }
.s40 { width: 40px; height: 40px; border-radius: 8px; } .s64 { width: 64px; height: 64px; border-radius: 12px; font-size: 1.6rem; }

/* genel bakış */
.hero { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 18px; }
.hero-state { display: flex; align-items: center; gap: 10px; font-family: var(--head); font-size: 1.2rem; margin: 6px 0 2px; }
.hero-num { font-family: var(--head); font-size: 3.4rem; line-height: 1.05; margin: 4px 0 10px; }
.hero-num small { font-size: 1rem; color: var(--muted); margin-left: 6px; font-family: var(--body); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin: 14px 0 0; }
.kv dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kv dd { margin: 2px 0 0; font-weight: 600; }
.kv.big dd { font-family: var(--head); font-size: 1.5rem; }
.chart { width: 100%; height: 150px; display: block; }
.chart-area { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.chart-line { stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-axis { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: 4px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--accent); }
.tile-n { font-family: var(--head); font-size: 2rem; line-height: 1.1; }
.tile-l { color: var(--muted); font-size: .88rem; }
.tile.hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.row-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.row-item:first-of-type { border-top: 0; }
.row-item small { display: block; }
.heads { display: flex; flex-wrap: wrap; gap: 8px; }
.head-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; font-size: .9rem; background: var(--surface-2); }
.head-chip:hover { border-color: var(--accent); }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.feed li:first-child { border-top: 0; }
.feed time { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; transform: translateY(-1px); }
.feed-join .feed-dot { background: var(--ok); } .feed-leave .feed-dot { background: var(--bad); } .feed-chat .feed-dot { background: var(--accent); }

/* oyuncu / bilet / konsol */
.profile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile .kv.big { margin: 0; grid-template-columns: repeat(4, minmax(100px, 1fr)); flex: 1 1 420px; }
.item { display: flex; flex-direction: column; gap: 10px; }
.item-head { display: flex; align-items: center; gap: 12px; }
.answers { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 8px 18px; margin: 4px 0; }
.answers dt { color: var(--muted); font-size: .9rem; } .answers dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.queue { display: flex; flex-direction: column; gap: 12px; }
.fold summary { cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold[open] summary { margin-bottom: 12px; }
.fold > .inline, .fold > .pre { margin-top: 12px; }
.pre { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.console { background: #0b1211; color: #cde7dc; font-family: var(--mono); font-size: .88rem; padding: 14px 16px; border-radius: 8px; margin: 12px 0 0; white-space: pre-wrap; overflow-x: auto; }
.console.bad { color: #ffb4ad; }
input.mono { font-family: var(--mono); }
.chip-form { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 2px 4px 2px 12px; font-size: .88rem; }
.chip-form button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 7px; border-radius: 99px; }
.chip-form button:hover { color: var(--bad); }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 14px; border-top: 1px solid var(--line); }
.narrow-card { max-width: 480px; }

/* giriş */
body.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background:
  radial-gradient(1000px 500px at 85% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--bg); }
.auth-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; max-width: 900px; width: 100%; }
.auth-brand .logo { color: var(--ink); padding-left: 0; }
.auth-brand h1 { font-size: 2.2rem; line-height: 1.15; margin: 14px 0 10px; }
.auth-brand p { color: var(--muted); max-width: 34ch; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.auth-card h2 { margin-bottom: 8px; }
.auth-card input { width: 100%; margin-bottom: 10px; }

@media (max-width: 1000px) { .hero, .cols { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 20; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-100%); transition: transform .18s; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .burger { display: inline-grid; }
  .top, .content { padding-left: 16px; padding-right: 16px; }
  .auth-wrap { grid-template-columns: 1fr; }
  .answers { grid-template-columns: 1fr; gap: 2px; }
  .profile .kv.big { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* LumCraft Control Room — koyu, yüksek kontrastlı operasyon arayüzü */
:root {
  color-scheme: dark;
  --accent: #73e4d1; --accent-ink: #06201f; --bg: #080d16; --surface: #101824; --surface-2: #151f2d;
  --ink: #edf4ff; --muted: #93a2b7; --line: #253247; --line-2: #34435a;
  --side: #090f1a; --side-ink: #a9b7ca; --side-hi: #15253a; --side-line: #1e2b3e;
  --ok: #54d39a; --ok-bg: #102b25; --warn: #f2bd62; --warn-bg: #322717; --bad: #ff7182; --bad-bg: #351c27;
  --shadow: 0 14px 38px rgba(0,0,0,.22); --radius: 18px;
  --head: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
html { background: var(--bg); }
body { background: radial-gradient(900px 520px at 82% -20%, rgba(73,126,163,.15), transparent 68%), radial-gradient(650px 420px at 42% 0%, rgba(107,83,168,.08), transparent 72%), var(--bg); color: var(--ink); }
.app { grid-template-columns: 258px minmax(0,1fr); }
.side { background: linear-gradient(180deg,#0c1420 0%,#090e17 100%); border-right: 1px solid #1c2938; padding: 22px 14px 16px; }
.logo { padding: 2px 10px 26px; font-size: 1.18rem; letter-spacing: .01em; }
.logo-mark { width: 39px; height: 39px; border-radius: 13px; color: #071a1c; background: linear-gradient(145deg,#96f4df,#52b9d2); box-shadow: 0 6px 22px rgba(88,211,205,.2); }
.nav { gap: 5px; }
.nav-label { color: #62758d; font-size: .64rem; letter-spacing: .14em; padding: 19px 12px 7px; }
.nav a { min-height: 42px; padding: 9px 12px; gap: 12px; border: 1px solid transparent; border-radius: 11px; color: #a8b6c8; font-size: .91rem; }
.nav a .ic { color: #7e91a8; width: 17px; height: 17px; }
.nav a:hover { background: rgba(118,151,184,.09); color: #f4f8ff; }
.nav a.on { color: #e8fff9; background: linear-gradient(100deg,rgba(81,198,180,.15),rgba(96,145,213,.08)); border-color: rgba(115,228,209,.13); box-shadow: inset 3px 0 #73e4d1; }
.nav a.on .ic { color: var(--accent); }
.badge { background: var(--accent); color: var(--accent-ink); }
.side-foot { border-color: #1d2a3c; }
.who { border: 1px solid transparent; }
.who:hover { background: #111c2a; }
.who small { color: #788ba3; }
.main { background: transparent; }
.top { min-height: 76px; padding: 13px clamp(18px,3vw,42px); background: rgba(8,13,22,.78); border-bottom-color: rgba(61,80,105,.42); backdrop-filter: blur(18px); }
.top-title { display: flex; flex-direction: column; gap: 1px; font-size: 1rem; line-height: 1.3; }
.top-title strong { font-size: 1.12rem; font-weight: 650; }
.top-kicker { color: #6f839b; font-size: .59rem; letter-spacing: .16em; font-weight: 700; }
.live { border-color: #27384a; background: rgba(17,28,42,.8); color: #dbe7f5; padding: 7px 12px; font-size: .82rem; }
.live-count { color: #9bacbf; }
.content { max-width: 1580px; padding: clamp(18px,3vw,38px) clamp(18px,3vw,42px) 64px; gap: 22px; }
.card { background: linear-gradient(155deg,rgba(20,30,44,.96),rgba(14,22,33,.96)); border-color: #243247; border-radius: 17px; padding: 21px 22px; box-shadow: 0 9px 28px rgba(0,0,0,.12); }
.card:hover { border-color: rgba(115,228,209,.24); box-shadow: 0 14px 34px rgba(0,0,0,.2); transform: translateY(-1px); }
.card-head { margin-bottom: 15px; }
.card-head h3 { color: #e8f0fb; }
.card-head a,.text-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.grid2 { gap: 20px; }
.cols { gap: 20px; }
.stack,.stack-sm { gap: 18px; }
.stack-sm { gap: 12px; }
.eyebrow { color: #7489a3; font-size: .65rem; letter-spacing: .15em; font-weight: 750; }
h1,h2,h3 { letter-spacing: -.025em; }
h2 { font-size: 1.22rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-heading h2 { margin-top: 4px; }
.text-link { font-size: .84rem; }
.text-link b { padding-left: 4px; color: #9df3df; }
.welcome-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr); min-height: 265px; padding: clamp(25px,4vw,46px); border: 1px solid #293a4e; border-radius: 23px; background: linear-gradient(113deg,#152633 0%,#132034 47%,#1c1e38 100%); box-shadow: 0 22px 58px rgba(0,0,0,.2); }
.welcome-panel:before { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image: radial-gradient(rgba(154,225,217,.55) .8px,transparent .8px); background-size: 22px 22px; mask-image: linear-gradient(90deg,transparent 15%,#000 100%); }
.welcome-panel:after { content:""; position:absolute; z-index:-1; width:540px; height:540px; right:7%; top:-330px; border:1px solid rgba(126,225,213,.2); border-radius:50%; box-shadow: 0 0 0 45px rgba(126,225,213,.025),0 0 0 95px rgba(126,225,213,.02); }
.welcome-copy { z-index:1; align-self:center; max-width:680px; }
.welcome-copy .eyebrow { color:#90c9c6; }
.welcome-copy h1 { font-size: clamp(2rem,4vw,3.2rem); line-height:1.08; margin:15px 0 13px; font-weight:720; }
.welcome-copy h1 em { color:#89ead8; font-style:normal; }
.welcome-copy p { max-width:56ch; color:#abbacc; font-size:1rem; margin:0; }
.welcome-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.welcome-visual { position:relative; min-height:190px; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); }
.orb-one { width:160px;height:160px;right:25%;top:8%;background:radial-gradient(circle at 35% 30%,rgba(125,237,216,.5),rgba(59,148,170,.15) 42%,transparent 72%); }
.orb-two { width:230px;height:230px;right:1%;top:-8%;background:radial-gradient(circle,rgba(151,121,234,.16),transparent 68%); }
.cube { position:absolute; width:92px;height:92px;right:28%;top:35%; display:grid;place-items:center; transform:rotate(-14deg); border:1px solid rgba(172,247,231,.55); border-radius:24px; background:linear-gradient(145deg,rgba(113,223,207,.26),rgba(62,105,143,.12)); box-shadow:0 0 46px rgba(89,213,197,.18),inset 0 0 24px rgba(177,255,234,.12); }
.cube span { font-size:2.4rem; font-weight:800; color:#b6ffeb; text-shadow:0 0 24px rgba(115,228,209,.5); transform:rotate(14deg); }
.orbit { position:absolute; width:250px;height:92px;right:4%;top:37%;border:1px solid rgba(119,213,203,.32);border-radius:50%;transform:rotate(-28deg); }
.orbit-b { width:245px;height:105px;right:4%;top:34%;border-color:rgba(174,146,243,.25);transform:rotate(36deg); }
.visual-tag { position:absolute; color:#a8bfcc; font:700 .59rem var(--mono); letter-spacing:.15em; }
.tag-top { right:4%;top:8%; }.tag-bottom { right:5%;bottom:7%;color:#83d9cb; }
.overview-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.metric-card { min-width:0; padding:18px 19px; border:1px solid #26354a; border-radius:16px; background:linear-gradient(155deg,#141e2c,#101824); box-shadow:0 8px 24px rgba(0,0,0,.1); text-decoration:none; transition:transform .18s,border-color .18s; }
.metric-link:hover { transform:translateY(-2px);border-color:rgba(115,228,209,.45); }
.metric-top { display:flex;align-items:center;gap:10px;min-height:31px; }
.metric-icon { width:32px;height:32px;display:grid;place-items:center;flex:none;color:#8ae7d6;border:1px solid rgba(115,228,209,.15);border-radius:10px;background:rgba(115,228,209,.08); }
.metric-icon .ic { width:16px;height:16px; }
.metric-icon.violet { color:#c1a7ff;border-color:rgba(172,144,255,.18);background:rgba(140,112,227,.11); }
.metric-icon.amber { color:#f5c676;border-color:rgba(245,198,118,.15);background:rgba(245,198,118,.08); }
.metric-icon.pink { color:#f39bb1;border-color:rgba(243,155,177,.15);background:rgba(243,155,177,.08); }
.metric-label { color:#8798ad;font-size:.63rem;font-weight:750;letter-spacing:.1em; }
.metric-indicator { margin-left:auto;padding:3px 8px;border-radius:99px;background:rgba(84,211,154,.1);color:#78dfad;font-size:.58rem;font-weight:800;letter-spacing:.08em; }
.metric-value { display:flex;align-items:center;gap:9px;margin:15px 0 2px;font-size:1.55rem;font-weight:720;letter-spacing:-.04em; }
.metric-value small { color:#8294aa;font-size:.92rem;font-weight:600;letter-spacing:0; }
.metric-note { color:#8292a6;font-size:.77rem; }
.metric-note b { color:#d6e5f0; }
.metric-arrow { margin-left:auto;color:#7890a6; }
.attention { border-color:rgba(242,189,98,.35); }
.dashboard-grid,.discord-grid { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.8fr);gap:20px;align-items:start; }
.dashboard-main,.dashboard-rail { min-width:0; }
.chart-card { padding:23px 24px 17px; }
.chart { width:100%;height:190px;margin:16px 0 6px;overflow:visible; }
.chart-area { fill:url(#chartFill); }
.chart-line { stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(115,228,209,.35)); }
.chart-axis { display:flex;justify-content:space-between;color:#74849a;font: .65rem var(--mono);letter-spacing:.04em; }
.chart-summary { color:#8999ac;font-size:.78rem; }.chart-summary b { color:#c8f7e9;font-size:1rem; }.chart-summary i { padding:0 5px;color:#4a6079;font-style:normal; }
.applicant-row,.top-player-row { min-height:58px; }
.row-item { border-bottom-color:#222f42; }
.row-item:last-child { border-bottom:0; }
.row-item small { color:#8494a8; }
.row-item small span { color:#4c5e74;padding:0 3px; }
.row-item b { color:#e2ebf6; }
.online-stack { display:flex;flex-direction:column;gap:5px; }
.online-player { display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;text-decoration:none;color:#dce8f4; }
.online-player:hover { background:#172233; }
.online-player i { width:7px;height:7px;margin-left:auto;border-radius:50%;background:#5bd69b;box-shadow:0 0 10px rgba(91,214,155,.35); }
.playtime { color:#a9b9ca;font-size:.83rem; }
.quick-icon,.maintenance-symbol { display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#8de8d7;background:rgba(115,228,209,.09);border:1px solid rgba(115,228,209,.16); }
.maintenance-symbol { color:#f1c170;background:rgba(242,189,98,.1);border-color:rgba(242,189,98,.15);font-size:1.15rem;font-weight:800; }
.maintenance-card p,.card-intro { margin:0 0 16px;color:#94a4b8;font-size:.9rem; }
.btn { border-color:#35445a;background:#182334;color:#e3edf8;border-radius:10px;font-size:.86rem;padding:9px 14px;transition:transform .15s,filter .15s,border-color .15s; }
.btn:hover { background:#1c2a3e;border-color:#5b728a;transform:translateY(-1px); }
.btn.primary { background:linear-gradient(120deg,#7ce5d3,#64c6d5);border-color:transparent;color:#082326;box-shadow:0 7px 20px rgba(91,204,195,.15); }
.btn.primary:hover { filter:brightness(1.06); }
.btn.ok { background:#237a5a;border-color:#237a5a;color:#fff; }
.btn.danger { background:#b8475d;border-color:#b8475d;color:#fff; }
.btn.danger-o { color:#ff9aaa;border-color:#74404d;background:rgba(98,36,52,.22); }
.btn.glass-btn { background:rgba(255,255,255,.04);border-color:rgba(195,213,232,.18);color:#e9f1fa; }
.btn.sm { border-radius:8px; }
input,select,textarea { border-color:#33435a;background:#0c1420;color:#e7eff8;border-radius:10px;padding:10px 12px; }
input::placeholder,textarea::placeholder { color:#64768d; }
input:focus,select:focus,textarea:focus { outline:none;border-color:#66d8ca;box-shadow:0 0 0 3px rgba(115,228,209,.1); }
label { color:#a3b1c2;font-size:.82rem;font-weight:600; }
.check { color:#a5b5c8; }
textarea { min-height:100px; }
.flash { border-radius:11px; }
.flash.ok { background:#102d27;border-color:#2b6655;color:#a6efcb; }
.flash.err { background:#321a25;border-color:#743848;color:#ffb8c3; }
.flash.warn { background:#302619;border-color:#69522c;color:#f5d48f; }
.empty { color:#77899f; }
.chip { background:#192438;border-color:#2d3b51;color:#a5b5c9; }
.pill { background:#182337;border-color:#2b3a50;color:#b8c7d9; }
.pill.approved,.pill.open { background:#113329;color:#77dbaa; }
.pill.pending { background:#382c19;color:#f0c374; }
.pill.rejected,.pill.removed { background:#3a2029;color:#f39aaa; }
.kv dt { color:#8394aa; }.kv dd { color:#e4edf8; }
table { border-color:#26364b; }
th { background:#141f2e;color:#8194ab; }
td,th { border-bottom-color:#263448; }
tr:hover td { background:rgba(115,228,209,.025); }
.console { background:#071019;border:1px solid #213147;color:#a5eed7;border-radius:11px; }
.pre { background:#0c1420;border-color:#26364c;color:#d6e4f3; }
.feed li { border-color:#263449; }.feed-dot { background:#6c7e94; }
.feed-join .feed-dot { background:#54d39a; }.feed-leave .feed-dot { background:#ff7182; }.feed-chat .feed-dot { background:#73e4d1; }
.status-preview { display:flex;flex-direction:column;gap:5px;padding:17px;border:1px solid #304057;border-radius:13px;background:linear-gradient(135deg,#172537,#111b29); }
.status-preview strong { font-size:1.18rem; }.status-preview small { color:#93a5bb; }.preview-kicker { color:#71879e;font-size:.61rem;font-weight:800;letter-spacing:.13em; }
.status-preview.is-maintenance { border-color:#69532c;background:linear-gradient(135deg,#33291a,#191b23); }.status-preview.is-maintenance strong { color:#f0c471; }
.status-preview.is-online strong { color:#78e0b0; }.status-preview.is-offline strong { color:#ff8898; }
.discord-kv { margin:15px 0 9px; }.discord-kv div { grid-template-columns:1fr;gap:2px; }.discord-kv dt { font-size:.72rem; }.discord-kv dd { font-size:.86rem; }
.role-form { display:grid;grid-template-columns:1fr 1fr;gap:13px; }.field { display:flex;flex-direction:column;gap:6px; }.role-actions { display:flex;gap:9px;align-items:end; }
.role-sync-strip { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:14px 15px;border:1px solid #2a3950;border-radius:12px;background:rgba(6,13,22,.45); }
.role-sync-strip div { display:flex;flex-direction:column;gap:3px; }.role-sync-strip b { color:#d9e5f2;font-size:.87rem; }.role-sync-strip small { color:#8293a8;font-size:.75rem; }
.integration-link { display:flex;align-items:center;gap:11px;padding:10px 5px;border-top:1px solid #263448;text-decoration:none; }.integration-link:first-of-type { border-top:0; }.integration-link>span:nth-child(2) { flex:1;display:flex;flex-direction:column;gap:2px; }.integration-link b { color:#dce7f3;font-size:.87rem; }.integration-link small { color:#8798ad;font-size:.75rem; }.integration-link i { color:#7d94aa;font-style:normal; }
.discord-emblem { align-self:center;justify-self:center;position:relative;display:grid;place-items:center;width:150px;height:150px;border:1px solid rgba(126,224,211,.25);border-radius:46px;color:#a8f4e3;background:linear-gradient(145deg,rgba(115,228,209,.13),rgba(159,136,229,.12));box-shadow:0 0 60px rgba(93,188,188,.12);transform:rotate(-8deg); }
.discord-emblem>.ic { width:66px;height:66px;transform:rotate(8deg); }.discord-emblem small { position:absolute;right:-45px;bottom:-21px;color:#9baec3;font:700 .56rem/1.45 var(--mono);letter-spacing:.14em;transform:rotate(8deg); }
.discord-emblem-ring { position:absolute;inset:-19px;border:1px dashed rgba(150,197,222,.3);border-radius:50%; }
.discord-welcome { background:linear-gradient(113deg,#172633 0%,#162035 52%,#27203b 100%); }
.discord-metrics { margin-top:0; }
.role-card,.status-control-card,.integration-card { min-width:0; }
.announce-card { border-top:2px solid #73e4d1; }
.metric-live .metric-value { font-size:1.32rem; }
.metric-live .dot { margin-right:1px; }
.metric-link { display:block; }
.top-player-row .avatar,.online-player .avatar,.applicant-row .avatar { flex:none; }
.table-wrap,.wrap { overflow-x:auto; }
.avatar { border:1px solid #34445a;background:#1a293b;color:#9ce9d9; }
.auth-wrap { max-width:980px; }.auth-brand .logo { color:#edf4ff; }.auth-brand h1 { font-size:2.55rem; }.auth-card { background:#111b29;border-color:#2c3b50;border-top-color:#73e4d1;box-shadow:0 25px 70px rgba(0,0,0,.35); }
@media (max-width: 1180px) { .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid,.discord-grid { grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); } }
@media (max-width: 900px) { .dashboard-grid,.discord-grid { grid-template-columns:1fr; } .welcome-panel { grid-template-columns:1fr .55fr; } .welcome-visual { opacity:.8; } }
@media (max-width: 820px) {
  .app { grid-template-columns:1fr; }
  .side { background:#090f1a; }
  .top { min-height:68px; }
  .content { padding-top:20px; }
  .welcome-panel { grid-template-columns:1fr;min-height:245px; }
  .welcome-visual { position:absolute;right:0;top:0;width:36%;height:100%;opacity:.42; }
  .welcome-copy { max-width:75%; }
  .discord-emblem { width:112px;height:112px;margin:15px 45px 12px 0; }
  .discord-emblem>.ic { width:50px;height:50px; }
}
@media (max-width: 560px) {
  html { font-size:14px; }
  .top { padding:11px 14px;gap:8px; }.top-kicker { display:none; }.top-title strong { font-size:1rem; }
  .live { gap:5px;padding:6px 9px;font-size:.73rem; }.live-count { display:none; }
  .content { padding:15px 12px 44px;gap:15px; }
  .welcome-panel { min-height:260px;padding:24px 20px;border-radius:18px; }
  .welcome-copy { max-width:100%; }.welcome-copy h1 { font-size:2rem; }.welcome-copy p { max-width:40ch;font-size:.9rem; }
  .welcome-visual { width:48%;opacity:.24; }.welcome-actions .btn { padding:8px 10px;font-size:.78rem; }
  .overview-grid { gap:9px; }.metric-card { padding:14px 12px;border-radius:13px; }.metric-label { font-size:.55rem;letter-spacing:.07em; }.metric-icon { width:28px;height:28px; }.metric-value { font-size:1.28rem;margin-top:12px; }
  .card { padding:17px 15px;border-radius:15px; }.section-heading { align-items:flex-start; }
  .role-form { grid-template-columns:1fr; }.role-actions { align-items:center; }.role-sync-strip { align-items:flex-start; }
  .row-item { gap:8px; }.applicant-row .btn.sm { padding:5px 7px; }
}