:root {
  color-scheme: dark;
  --bg: #070708;
  --surface: #0d0d10;
  --surface-2: #121216;
  --surface-3: #17171d;
  --line: rgba(255,255,255,.085);
  --muted: #8e8e9b;
  --text: #f5f5f7;
  --brand: #7c5cff;
  --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent);
  --ok: #66d19e;
  --warn: #f0b95b;
  --bad: #ef6a72;
  --radius: 18px;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 75% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 35rem),
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.03), transparent 28rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
::selection { background: color-mix(in srgb, var(--brand) 45%, transparent); }

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  z-index: 1000;
}

.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand-lockup { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.brand-title { font-weight: 780; letter-spacing: -.03em; }
.brand-sub { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top:2px; }
.user-chip { display:flex; align-items:center; gap:10px; color:#d7d7df; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit:cover; background:#1b1b22; }

.hero {
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 38px 20px;
  overflow:hidden;
}
.hero-card {
  position:relative;
  width:min(1020px,100%);
  min-height:580px;
  border:1px solid var(--line);
  border-radius:30px;
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  overflow:hidden;
}
.hero-copy { padding:72px; display:flex; flex-direction:column; justify-content:center; z-index:2; }
.eyebrow { color:#b7b7c3; font-size:12px; text-transform:uppercase; letter-spacing:.22em; }
h1 { font-size: clamp(48px, 7vw, 82px); line-height:.92; letter-spacing:-.065em; margin:18px 0 22px; }
.hero-copy p { max-width:560px; color:#aaaab5; font-size:18px; line-height:1.65; margin:0 0 32px; }
.hero-visual { position:relative; background:radial-gradient(circle at center, rgba(255,255,255,.035), transparent 57%); }
.hero-eye { position:absolute; width:min(650px, 115%); height:auto; right:-80px; top:50%; transform:translateY(-50%); opacity:.72; filter:contrast(1.12); mix-blend-mode:screen; }
.hero-orbit { position:absolute; inset:12%; border:1px solid rgba(255,255,255,.06); border-radius:50%; }
.hero-orbit::before, .hero-orbit::after { content:""; position:absolute; inset:13%; border:1px dashed rgba(255,255,255,.04); border-radius:50%; }
.hero-orbit::after { inset:28%; }

.button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 18px; border-radius:12px;
  border:1px solid var(--line); background:#17171c; color:#fff; font-weight:680;
  transition:.18s ease;
}
.button:hover { transform: translateY(-1px); border-color:rgba(255,255,255,.18); background:#1b1b21; }
.button.primary { background:var(--brand); border-color:transparent; box-shadow:0 10px 32px color-mix(in srgb, var(--brand) 22%, transparent); }
.button.primary:hover { filter:brightness(1.08); }
.button.ghost { background:transparent; color:#bcbcc7; }
.button.danger { color:#ffadb2; border-color:rgba(239,106,114,.25); background:rgba(239,106,114,.06); }
.button.small { min-height:36px; padding:0 13px; font-size:13px; border-radius:10px; }

.page-head { padding:48px 0 30px; display:flex; justify-content:space-between; gap:28px; align-items:end; }
.page-head h1 { font-size:44px; margin:0 0 8px; line-height:1; }
.page-head p { color:var(--muted); margin:0; }

.server-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-bottom:60px; }
.server-card {
  min-height:190px; padding:20px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.009));
  position:relative; overflow:hidden; transition:.2s ease;
}
.server-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.16); }
.server-card::after { content:""; position:absolute; width:180px; height:180px; right:-80px; bottom:-90px; border-radius:50%; background:color-mix(in srgb, var(--brand) 10%, transparent); filter:blur(10px); }
.server-icon { width:54px; height:54px; border-radius:16px; background:#19191f; display:grid; place-items:center; object-fit:cover; border:1px solid var(--line); font-weight:800; font-size:20px; }
.server-name { font-size:19px; font-weight:750; margin:18px 0 7px; }
.server-meta { color:var(--muted); font-size:13px; }
.status { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:#c4c4ce; margin-top:16px; }
.dot { width:7px;height:7px;border-radius:50%; background:var(--ok); box-shadow:0 0 12px rgba(102,209,158,.55); }
.dot.off { background:#6c6c76; box-shadow:none; }
.card-actions { display:flex; gap:8px; margin-top:16px; position:relative; z-index:2; }

.dashboard-layout { width:min(1380px, calc(100% - 24px)); margin:0 auto; display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 76px); }
.sidebar { padding:28px 18px 40px 0; border-right:1px solid var(--line); position:sticky; top:0; height:calc(100vh - 76px); }
.guild-chip { display:flex; align-items:center; gap:10px; padding:0 8px 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.guild-chip .server-icon { width:38px;height:38px;border-radius:12px; font-size:15px; }
.guild-chip strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:155px; }
.guild-chip span { color:var(--muted); font-size:11px; }
.nav-group { margin:18px 0; }
.nav-label { color:#63636d; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.16em; padding:0 10px 8px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; color:#aaaab5; font-size:14px; margin:2px 0; }
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,.045); }
.nav-link.active { box-shadow:inset 2px 0 var(--brand); }
.main { padding:32px 0 70px 32px; min-width:0; }
.section { display:none; }
.section.active { display:block; }
.section-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
.section-head h2 { margin:0; font-size:25px; letter-spacing:-.035em; }
.section-head p { color:var(--muted); margin:5px 0 0; font-size:14px; }

.flash { padding:13px 15px; border:1px solid var(--line); border-radius:12px; margin-bottom:18px; font-size:14px; }
.flash.success { background:rgba(102,209,158,.07); border-color:rgba(102,209,158,.22); color:#bcebd3; }
.flash.error { background:rgba(239,106,114,.07); border-color:rgba(239,106,114,.22); color:#ffc0c4; }
.flash.warning { background:rgba(240,185,91,.07); border-color:rgba(240,185,91,.22); color:#f6d69d; }

.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.stat-card, .panel {
  border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.018);
}
.stat-card { padding:18px; }
.stat-card .k { color:#777783; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.stat-card .v { font-size:28px; font-weight:760; letter-spacing:-.04em; margin-top:8px; }
.stat-card .hint { font-size:12px; color:var(--muted); margin-top:5px; }
.panel { padding:20px; margin-bottom:14px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.panel-title h3 { margin:0; font-size:16px; }
.panel-title span { color:var(--muted); font-size:12px; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; color:#aaaab5; font-weight:650; }
.input, select, textarea {
  width:100%; min-height:43px; border:1px solid var(--line); border-radius:11px;
  background:#0a0a0d; color:#f2f2f5; padding:0 12px; outline:none;
}
textarea { padding:11px 12px; min-height:84px; resize:vertical; }
.input:focus, select:focus, textarea:focus { border-color:color-mix(in srgb, var(--brand) 65%, #fff 10%); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.form-actions { margin-top:16px; display:flex; justify-content:flex-end; gap:10px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.switch-row:last-child { border-bottom:0; }
.switch-copy strong { font-size:14px; display:block; }
.switch-copy span { font-size:12px; color:var(--muted); display:block; margin-top:4px; }
.switch { position:relative; width:42px; height:24px; flex:0 0 auto; }
.switch input { opacity:0;width:0;height:0; }
.slider { position:absolute; inset:0; border-radius:999px; background:#25252c; border:1px solid var(--line); transition:.2s; }
.slider::after { content:""; position:absolute; width:17px;height:17px;left:3px;top:2px;border-radius:50%;background:#8e8e99;transition:.2s; }
.switch input:checked + .slider { background:color-mix(in srgb, var(--brand) 36%, #16161b); border-color:color-mix(in srgb, var(--brand) 55%, transparent); }
.switch input:checked + .slider::after { transform:translateX(18px); background:#fff; }

.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th, td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:13px; }
th { color:#6f6f7a; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:750; }
td { color:#ccccd4; }
.badge { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px; font-size:11px; border:1px solid var(--line); background:#111116; }
.badge.green { color:#aee6ca; border-color:rgba(102,209,158,.2); background:rgba(102,209,158,.06); }
.badge.yellow { color:#f1cf93; border-color:rgba(240,185,91,.2); background:rgba(240,185,91,.06); }
.badge.red { color:#ffb0b5; border-color:rgba(239,106,114,.2); background:rgba(239,106,114,.06); }
.badge.gray { color:#9b9ba6; }
.empty { color:#6e6e78; font-size:13px; padding:24px 0; text-align:center; }

.shop-list { display:grid; gap:9px; }
.shop-item { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px; padding:13px; background:#0a0a0d; }
.shop-name { font-weight:700; }
.shop-desc { color:var(--muted); font-size:12px; margin-top:3px; }
.shop-price { font-weight:700; color:#dedee6; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#9c9ca8; font-size:12px; }
.audit-list { display:grid; gap:8px; }
.audit-row { display:grid; grid-template-columns:140px 1fr auto; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.audit-row:last-child { border-bottom:0; }
.audit-row .time { color:#6f6f7a; }
.audit-row .action { color:#c8c8d0; }
.audit-row .actor { color:#777783; }

.error-page { min-height:100vh;display:grid;place-items:center;padding:30px; }
.error-card { width:min(540px,100%); padding:34px; border:1px solid var(--line); border-radius:22px; background:var(--surface); text-align:center; }
.error-card h1 { font-size:40px; margin:10px 0; }
.error-card p { color:var(--muted); line-height:1.6; }

@media (max-width: 980px) {
  .server-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-layout { grid-template-columns:80px 1fr; }
  .sidebar { padding-right:10px; }
  .guild-chip div:last-child, .nav-label, .nav-link span { display:none; }
  .nav-link { justify-content:center; font-size:18px; }
  .guild-chip { justify-content:center; padding-left:0; }
  .main { padding-left:20px; }
  .hero-card { grid-template-columns:1fr; }
  .hero-visual { position:absolute; inset:0; opacity:.22; }
  .hero-copy { padding:54px; }
}
@media (max-width: 680px) {
  .shell { width:min(100% - 22px,1180px); }
  .topbar { height:66px; }
  .brand-sub, .user-chip span { display:none; }
  .page-head { padding-top:32px; }
  .page-head h1 { font-size:36px; }
  .server-grid, .two-col, .three-col, .form-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .field.full { grid-column:auto; }
  .dashboard-layout { width:100%; grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:20; bottom:0; top:auto; height:65px; width:100%; border-right:0; border-top:1px solid var(--line); background:rgba(7,7,8,.94); backdrop-filter:blur(18px); display:flex; align-items:center; padding:8px 10px; }
  .guild-chip, .nav-label { display:none; }
  .nav-group { display:contents; }
  .nav-link { flex:1; margin:0; padding:9px 6px; font-size:17px; }
  .nav-link.active { box-shadow:inset 0 -2px var(--brand); }
  .main { padding:24px 14px 90px; }
  .section-head { align-items:flex-start; }
  .hero-copy { padding:38px 28px; }
  .hero-copy p { font-size:16px; }
  h1 { font-size:52px; }
}

/* v0.5.2 Staff Centers / player control */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.toolbar .hint { color:var(--muted); font-size:12px; margin-top:4px; }
.compact-select { width:auto; min-width:160px; min-height:38px; }
.action-stack { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.inline-reason { display:flex; gap:6px; align-items:center; }
.mini-input { min-height:36px; width:145px; border:1px solid var(--line); border-radius:9px; background:#08080b; color:#eee; padding:0 9px; outline:none; }
.mini-input:focus { border-color:color-mix(in srgb, var(--brand) 60%, #fff 10%); }
td a { color:#cfcfda; }
td a:hover { color:#fff; }
.player-page { padding:38px 0 70px; }
.player-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px; }
.player-identity { display:flex; align-items:center; gap:18px; min-width:0; }
.player-avatar { width:84px; height:84px; border-radius:24px; object-fit:cover; border:1px solid var(--line); background:#09090c; }
.player-avatar.placeholder { display:grid; place-items:center; font-size:32px; }
.player-identity h1 { font-size:32px; margin:3px 0 8px; letter-spacing:-.04em; }
.eyebrow { color:var(--brand); font-size:10px; letter-spacing:.19em; font-weight:800; }
.player-ranks { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.money-plus { color:#9ee3c1; font-weight:700; }
.money-minus { color:#ffadb2; font-weight:700; }
@media (max-width:680px) {
  .toolbar, .player-hero { align-items:flex-start; flex-direction:column; }
  .player-ranks { justify-content:flex-start; }
  .player-page { padding:24px 12px 60px; }
  .inline-reason { flex-direction:column; align-items:stretch; }
  .mini-input { width:100%; }
}