:root {
  color-scheme: dark;
  --bg: #070a07;
  --surface: #0d120c;
  --surface-2: #141d11;
  --line: #273422;
  --text: #f0f7eb;
  --muted: #9cab94;
  --cyan: #9cff57;
  --cyan-2: #57e329;
  --violet: #39d98a;
  --green: #7ef249;
  --yellow: #fbbf24;
  --red: #fb7185;
  --blue: #60a5fa;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(112,255,52,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,255,52,.025) 1px, transparent 1px),
    radial-gradient(circle at 75% -10%, rgba(92,217,42,.15) 0, transparent 38%),
    var(--bg);
  background-size: 36px 36px, 36px 36px, auto, auto;
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 2.5vw, 2.15rem); letter-spacing: -.035em; }
h2 { margin-bottom: 8px; font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: -.025em; }
h3 { margin-bottom: 8px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 278px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 16px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(7,10,18,.92); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 8px 28px; }
.brand strong, .brand span { display: block; }
.brand span { color: var(--muted); font-size: .8rem; }
.brand-mark { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid rgba(34,211,238,.4); border-radius: 22px; background: linear-gradient(145deg, rgba(34,211,238,.18), rgba(167,139,250,.12)); color: var(--cyan); font-size: 1.55rem; font-weight: 900; letter-spacing: -.06em; box-shadow: inset 0 0 30px rgba(34,211,238,.06), 0 18px 55px rgba(0,0,0,.3); }
.brand-mark.small { width: 48px; height: 48px; border-radius: 14px; font-size: 1rem; }
nav { display: grid; gap: 4px; }
.nav-item { width: 100%; padding: 11px 12px; display: flex; gap: 12px; align-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item span { color: #52617d; font-size: .7rem; font-weight: 800; }
.nav-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(34,211,238,.035)); color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
.agent-card { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.agent-card > div { display: flex; align-items: center; gap: 8px; }
.agent-card small { display: block; margin-top: 5px; color: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(251,113,133,.1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 5px rgba(52,211,153,.1); }

.main { min-width: 0; padding: 28px clamp(18px, 3vw, 42px) 60px; }
.topbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.top-actions, .button-row, .field-row { display: flex; gap: 10px; align-items: center; }
.top-actions form { margin: 0; }
.nav-live-count {
  min-width: 26px;
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
  font-size: .63rem;
  font-style: normal;
  font-weight: 850;
  text-align: center;
}
.nav-live-count.attention { color: var(--yellow); border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); }
.live-data-badge {
  min-width: 176px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.live-data-badge > i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 5px rgba(251,191,36,.09);
}
.live-data-badge > span,
.live-data-badge strong,
.live-data-badge small { display: block; }
.live-data-badge strong { color: var(--text); font-size: .75rem; }
.live-data-badge small { margin-top: 2px; color: var(--muted); font-size: .62rem; white-space: nowrap; }
.live-data-badge.live { border-color: rgba(52,211,153,.28); }
.live-data-badge.live > i {
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(52,211,153,.09), 0 0 16px rgba(52,211,153,.65);
  animation: live-pulse 1.8s ease-in-out infinite;
}
.live-data-badge.delayed > i,
.live-data-badge.reconnecting > i { background: var(--yellow); }
.live-data-badge.offline > i,
.live-data-badge.error > i { background: var(--red); box-shadow: 0 0 0 5px rgba(251,113,133,.1); }
@keyframes live-pulse { 50% { opacity: .45; transform: scale(.82); } }
.user-chip, .pill { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .76rem; }
.mini-avatar { width: 24px; height: 24px; margin-right: 7px; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--avatar) 25%, #101827); color: var(--avatar); font-size: .68rem; font-style: normal; font-weight: 900; }

.view { display: none; animation: rise .22s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.section-lead { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 20px; }
.section-lead > p { max-width: 600px; margin-bottom: 0; color: var(--muted); }
.network-hero { min-height: 148px; margin-bottom: 18px; padding: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid rgba(34,211,238,.2); border-radius: var(--radius); background: linear-gradient(110deg, rgba(34,211,238,.105), rgba(167,139,250,.055) 60%, rgba(13,18,32,.9)); box-shadow: 0 22px 60px rgba(0,0,0,.18); }

.panel, .kpi, .server-card, .group-card, .action-card { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,26,43,.94), rgba(11,16,29,.96)); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.panel { padding: 20px; margin-bottom: 18px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sync-health { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; margin: -4px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,15,29,.5); }
.sync-health div { display: flex; flex-direction: column; gap: 4px; }
.sync-health strong { font-size: .92rem; }
.narrow { max-width: 620px; }
.split { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(430px, 1.4fr); gap: 18px; align-items: start; }
.span-two { min-width: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { min-height: 116px; padding: 17px; }
.kpi span { color: var(--muted); font-size: .78rem; }
.kpi strong { display: block; margin: 8px 0 5px; font-size: clamp(1.45rem, 2.3vw, 2.1rem); letter-spacing: -.04em; }
.kpi small { color: #66748e; }

.button { min-height: 38px; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; background: #1a2335; font-weight: 750; font-size: .82rem; cursor: pointer; transition: transform .14s ease, filter .14s ease, border-color .14s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button.primary { color: #031116; background: linear-gradient(135deg, var(--cyan), #38bdf8); }
.button.success { color: #032016; background: var(--green); }
.button.warning { color: #241602; background: var(--yellow); }
.button.danger { color: #2c0710; background: var(--red); }
.button.ghost { border-color: var(--line); background: rgba(255,255,255,.025); color: var(--muted); }
.button.small { min-height: 31px; padding: 6px 9px; font-size: .72rem; }
.button.wide { width: 100%; }

.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 13px; }
.server-card { padding: 17px; }
.server-card-top { display: flex; justify-content: space-between; gap: 12px; }
.server-card h3 { margin-bottom: 3px; }
.server-meta { margin: 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.server-meta div { padding: 9px; border: 1px solid #1d2940; border-radius: 9px; background: rgba(4,8,15,.28); }
.server-meta span { display: block; color: var(--muted); font-size: .7rem; }
.server-meta strong { display: block; margin-top: 4px; font-size: .86rem; }
.state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .75rem; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.state.running { color: var(--green); }
.state.running::before { background: var(--green); box-shadow: 0 0 10px rgba(52,211,153,.7); }
.state.problem { color: var(--red); }
.state.problem::before { background: var(--red); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px; border-bottom: 1px solid var(--line); color: #73819a; font-size: .68rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { padding: 11px 10px; border-bottom: 1px solid rgba(32,43,66,.65); color: #c8d2e3; font-size: .81rem; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.empty-state { padding: 32px 12px; color: var(--muted); text-align: center; }
.truncate { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: rgba(148,163,184,.11); color: #b8c3d5; font-size: .68rem; font-weight: 800; }
.badge.allowed, .badge.completed, .badge.running { color: var(--green); background: rgba(52,211,153,.1); }
.badge.blocked, .badge.failed, .badge.stopped { color: var(--red); background: rgba(251,113,133,.1); }
.badge.queued, .badge.claimed { color: var(--yellow); background: rgba(251,191,36,.1); }

.stack { display: grid; gap: 13px; }
.import-tool { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.import-tool h3 { margin-bottom: 6px; }
.import-tool > p { font-size: .78rem; line-height: 1.5; }
label { display: grid; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 700; }
label em { color: #59667c; font-style: normal; font-weight: 500; }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #090e19; color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 3px rgba(34,211,238,.08); }
.field-row > label { flex: 1; }
.check { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.check input { width: 16px; min-height: 16px; }

.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.group-card { padding: 16px; border-top: 3px solid var(--group-color, var(--cyan)); }
.group-card strong { display: block; font-size: 1rem; }
.group-card code { display: inline-block; margin: 5px 0 12px; color: var(--group-color, var(--cyan)); }
.group-card small { display: block; color: var(--muted); line-height: 1.45; }
.group-stats { display: flex; justify-content: space-between; margin-top: 14px; color: #6f7d96; font-size: .7rem; }
.permission-tools { margin-top: 18px; }
.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.action-card { min-height: 126px; padding: 18px; border-color: var(--line); text-align: left; cursor: pointer; }
.action-card strong, .action-card span { display: block; }
.action-card strong { margin-bottom: 8px; color: var(--text); }
.action-card span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.console-form { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(300px, 1fr) auto; gap: 10px; align-items: end; }
.deployment-tools { margin-top: 18px; }
.deployment-kpis { margin-bottom: 18px; }
.component-picker { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.component-picker .check { color: #c8d2e3; }
.deploy-actions { justify-content: space-between; margin-top: 14px; }
.catalog-list { display: grid; gap: 7px; margin-top: 18px; }
.catalog-item { padding: 9px 10px; display: flex; justify-content: space-between; gap: 10px; border: 1px solid rgba(32,43,66,.7); border-radius: 9px; background: rgba(255,255,255,.018); }
.catalog-item span { color: var(--muted); font-size: .72rem; }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.settings-grid .button { min-height: 40px; }
.update-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 14px 0; }
.update-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.update-item strong, .update-item small { display: block; }
.update-item small { margin-top: 5px; color: var(--muted); }
.update-item.available { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.055); }
.compact { padding: 12px; margin-bottom: 0; }
.server-card .manage-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.config-workspace { margin-top: 18px; }
.config-toolbar { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(260px,1fr) auto auto; gap: 10px; align-items: end; }
.code-editor { min-height: 430px; margin-top: 14px; resize: vertical; border-radius: 11px; color: #d7e4f7; background: #060a12; font: 13px/1.55 "Cascadia Code", "SFMono-Regular", Consolas, monospace; tab-size: 2; }
.editor-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--muted); font-size: .72rem; }
.capability-fieldset { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }
.capability-fieldset legend { padding: 0 6px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.capability-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px 14px; }
.capability-grid label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; }
.capability-grid input { width: 16px; min-height: 16px; margin-top: 2px; }
.capability-grid small { display: block; color: #68758c; font-weight: 500; }
.fieldset-help { margin: -2px 0 10px; color: #68758c; font-size: .7rem; font-weight: 500; }
.scroll-options { max-height: 220px; padding-right: 5px; overflow-y: auto; }
.profile-layout { display: grid; grid-template-columns: minmax(390px,.82fr) minmax(530px,1.45fr); gap: 18px; align-items: start; }
.profile-editor-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 12px; }
.profile-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,10,19,.35); transition: .18s ease; }
.profile-card:hover { border-color: rgba(34,211,238,.3); transform: translateY(-1px); }
.profile-card.disabled { opacity: .64; }
.profile-card-head, .profile-inspector-head, .profile-self { display: flex; align-items: center; gap: 13px; }
.profile-card-head > div:nth-child(2), .profile-inspector-head > div:nth-child(2), .profile-self > div:nth-child(2) { flex: 1; min-width: 0; }
.profile-card-head h3 { margin-bottom: 3px; }
.profile-card-head p { margin: 0; color: var(--muted); font-size: .72rem; }
.profile-avatar { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--avatar) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--avatar) 16%, #0a1020); color: var(--avatar); font-size: .9rem; font-weight: 950; box-shadow: inset 0 0 20px color-mix(in srgb, var(--avatar) 7%, transparent); }
.profile-avatar.large { width: 66px; height: 66px; border-radius: 19px; font-size: 1.2rem; }
.profile-facts { margin: 14px 0 10px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.profile-facts span { padding: 8px; border: 1px solid rgba(32,43,66,.65); border-radius: 8px; color: var(--muted); font-size: .68rem; }
.profile-facts strong { display: block; margin-bottom: 3px; color: var(--text); font-size: .76rem; text-transform: capitalize; }
.profile-card-meta { display: flex; justify-content: space-between; gap: 10px; color: #6f7d96; font-size: .68rem; }
.profile-card-actions { margin-top: 13px; flex-wrap: wrap; }
.profile-inspector-head { margin-bottom: 18px; }
.profile-inspector-head h2 { margin-bottom: 2px; }
.profile-detail-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 16px 0 22px; }
.profile-detail-grid div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,8,15,.28); }
.profile-detail-grid span, .profile-detail-grid strong { display: block; }
.profile-detail-grid span { color: var(--muted); font-size: .68rem; }
.profile-detail-grid strong { margin-top: 6px; font-size: .8rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 20px; }
.chip-list span { padding: 6px 9px; border: 1px solid rgba(34,211,238,.16); border-radius: 999px; background: rgba(34,211,238,.055); color: #9edee8; font-size: .7rem; text-transform: capitalize; }
.inspector-section { margin-top: 26px; }
.activity-list { display: grid; gap: 7px; }
.activity-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(32,43,66,.6); }
.activity-list small { color: var(--muted); }
.weekday-picker { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.weekday-picker label { display: block; }
.weekday-picker input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-picker span { display: block; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-align: center; cursor: pointer; }
.weekday-picker input:checked + span { border-color: rgba(34,211,238,.5); background: rgba(34,211,238,.12); color: var(--cyan); }
.profile-self-card { margin-bottom: 18px; }
.profile-self { margin: 0; padding: 22px; background: linear-gradient(110deg,rgba(34,211,238,.1),rgba(167,139,250,.06),rgba(13,18,32,.95)); }
.profile-self-stats { display: flex; gap: 10px; }
.profile-self-stats span { min-width: 105px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .7rem; }
.profile-self-stats strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 1rem; }

.alert { margin-bottom: 18px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface); font-size: .82rem; }
.alert.warning { border-color: rgba(251,191,36,.3); color: #fcd881; background: rgba(251,191,36,.07); }
.alert.danger { border-color: rgba(251,113,133,.3); color: #fda4af; background: rgba(251,113,133,.07); }
.alert.info { border-color: rgba(96,165,250,.28); color: #a9c9fa; background: rgba(96,165,250,.07); }
canvas { width: 100%; height: 250px; display: block; }
.chart-legend { display: flex; justify-content: center; gap: 18px; color: var(--muted); font-size: .72rem; }
.chart-legend i { width: 8px; height: 8px; display: inline-block; margin-right: 6px; border-radius: 50%; }
.chart-legend .cyan { background: var(--cyan); }
.chart-legend .violet { background: var(--violet); }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 420px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: #111a29; box-shadow: 0 20px 60px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(251,113,133,.45); color: #fda4af; }
dialog { max-width: 450px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(3px); }
dialog .button-row { justify-content: flex-end; margin-top: 20px; }

.login-page { display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 35px; border: 1px solid var(--line); border-radius: 22px; background: rgba(13,18,32,.94); box-shadow: 0 35px 100px rgba(0,0,0,.42); }
.login-card .brand-mark { margin-bottom: 24px; }
.login-card h1 { margin-bottom: 8px; }
.login-form { margin-top: 26px; }

.sidebar {
  border-right-color: rgba(142,255,81,.16);
  background: linear-gradient(180deg, rgba(11,17,9,.98), rgba(5,8,5,.97));
  box-shadow: 18px 0 60px rgba(0,0,0,.18);
}
.brand { gap: 13px; margin-bottom: 24px; }
.brand-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid rgba(156,255,87,.4);
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 28px rgba(104,240,48,.18);
}
.brand strong { font-size: .98rem; }
.brand span { margin-top: 3px; color: #70816a; font-size: .7rem; letter-spacing: .04em; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(126,242,73,.17), rgba(126,242,73,.025));
  color: var(--cyan);
  box-shadow: inset 3px 0 var(--cyan), 0 0 24px rgba(96,229,38,.04);
}
.network-hero {
  min-height: 184px;
  overflow: hidden;
  border-color: rgba(156,255,87,.28);
  background:
    linear-gradient(105deg, rgba(82,177,36,.18), rgba(23,35,17,.9) 58%, rgba(10,13,9,.97)),
    var(--surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.25), inset 0 1px rgba(194,255,155,.04);
}
.hero-identity { display: flex; align-items: center; gap: 22px; }
.hero-logo {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  border: 1px solid rgba(156,255,87,.42);
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 0 46px rgba(115,255,48,.2);
}
.endpoint-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.endpoint-row span {
  padding: 6px 9px;
  border: 1px solid rgba(156,255,87,.15);
  border-radius: 999px;
  background: rgba(2,6,2,.34);
  color: #9aaa94;
  font-size: .68rem;
}
.endpoint-row i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px rgba(126,242,73,.85);
}
.endpoint-row span.offline { color: #c08187; border-color: rgba(251,113,133,.22); }
.endpoint-row span.offline i { background: var(--red); box-shadow: 0 0 9px rgba(251,113,133,.55); }
.panel, .kpi, .server-card, .group-card, .action-card {
  border-color: rgba(78,104,64,.55);
  background: linear-gradient(145deg, rgba(20,29,17,.96), rgba(9,13,8,.97));
  box-shadow: 0 18px 44px rgba(0,0,0,.16), inset 0 1px rgba(205,255,174,.02);
}
.kpi { position: relative; overflow: hidden; }
.kpi::after {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: .42;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px,1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.quick-card {
  min-height: 142px;
  padding: 18px;
  border: 1px solid rgba(93,125,74,.52);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(20,30,17,.95), rgba(8,13,7,.98));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.quick-card:hover { transform: translateY(-2px); border-color: rgba(156,255,87,.48); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
.quick-card span, .quick-card strong, .quick-card small { display: block; }
.quick-card span { margin-bottom: 16px; color: var(--cyan); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.quick-card strong { margin-bottom: 7px; }
.quick-card small { color: var(--muted); line-height: 1.45; }
.game-studio-panel { border-color: rgba(156,255,87,.25); }
.game-template-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: 0 0 18px;
}
.game-template {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(3,8,3,.38);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.game-template strong, .game-template span { display: block; }
.game-template span { margin-top: 4px; color: var(--muted); font-size: .68rem; }
.game-template:hover, .game-template.active { border-color: rgba(156,255,87,.5); background: rgba(126,242,73,.09); }
.game-template.active strong { color: var(--cyan); }
.game-template.featured {
  border-color: rgba(156,255,87,.42);
  background: linear-gradient(135deg,rgba(126,242,73,.13),rgba(20,53,30,.38));
  box-shadow: inset 3px 0 0 var(--green);
}
.game-template.featured strong::after {
  content: " NEW";
  color: var(--green);
  font-size: .56rem;
  letter-spacing: .12em;
}
.bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(156,255,87,.16);
  border-radius: 12px;
  background: rgba(3,8,3,.35);
}
.bulk-toolbar > strong { margin-right: auto; padding: 9px 4px; color: var(--cyan); font-size: .78rem; }
.bulk-toolbar label { min-width: 165px; }
.bulk-toolbar select { min-height: 34px; padding-block: 5px; }
.select-cell { width: 34px; padding-right: 2px; }
.select-cell input { width: 16px; min-height: 16px; accent-color: var(--cyan); }
code { color: var(--cyan); }
input, select, textarea { border-color: #2a3924; background: #070b06; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-2); box-shadow: 0 0 0 3px rgba(126,242,73,.1); }
.button.primary { color: #071203; background: linear-gradient(135deg, #b4ff76, #63e52f); box-shadow: 0 8px 25px rgba(90,213,38,.13); }
.button.success { color: #071803; background: #7ef249; }
.login-page {
  background:
    radial-gradient(circle at 50% 20%, rgba(111,239,52,.2), transparent 34%),
    linear-gradient(rgba(112,255,52,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,255,52,.025) 1px, transparent 1px),
    #060905;
  background-size: auto, 36px 36px, 36px 36px, auto;
}
.login-card {
  border-color: rgba(156,255,87,.25);
  background: rgba(11,16,9,.96);
  box-shadow: 0 35px 110px rgba(0,0,0,.56), 0 0 80px rgba(101,234,43,.07);
}
.login-logo {
  width: 116px;
  height: 116px;
  margin-bottom: 24px;
  border: 1px solid rgba(156,255,87,.4);
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 0 48px rgba(102,236,43,.2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.console-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(290px, .65fr);
  gap: 16px;
  align-items: start;
}
.console-stage {
  padding: 0;
  overflow: hidden;
  border-color: rgba(156,255,87,.26);
  background: #050805;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025);
}
.console-toolbar {
  min-height: 82px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(156,255,87,.16);
  background:
    radial-gradient(circle at 4% 0, rgba(119,255,55,.13), transparent 38%),
    linear-gradient(100deg, rgba(22,35,17,.95), rgba(7,11,6,.97));
}
.console-toolbar h3, .console-toolbar p { margin-bottom: 0; }
.console-title-row { display: flex; align-items: center; gap: 12px; }
.console-title-row h3 { font-size: 1.1rem; }
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(156,255,87,.18);
  border-radius: 999px;
  color: #b7c7ad;
  background: rgba(0,0,0,.24);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(251,191,36,.7);
}
.live-indicator.online i {
  background: var(--green);
  box-shadow: 0 0 14px rgba(126,242,73,.8);
  animation: consolePulse 1.7s infinite;
}
@keyframes consolePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}
.console-target-label { min-width: 220px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.console-target-label select { margin-top: 5px; color: var(--text); }
.console-controls {
  padding: 10px 12px;
  display: flex;
  align-items: end;
  gap: 7px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(156,255,87,.12);
  background: #090e08;
}
.filter-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid #293524;
  border-radius: 8px;
  color: #91a486;
  background: #0d140b;
  font-size: .69rem;
  font-weight: 800;
  cursor: pointer;
}
.filter-chip:hover, .filter-chip.active {
  border-color: rgba(156,255,87,.48);
  color: #dfffd0;
  background: rgba(126,242,73,.1);
}
.console-search { min-width: 210px; flex: 1; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.console-search input { min-height: 31px; margin-top: 3px; padding: 6px 9px; font-size: .76rem; text-transform: none; letter-spacing: 0; }
.active-toggle { border-color: rgba(156,255,87,.35); color: var(--cyan); background: rgba(126,242,73,.08); }
.console-viewport {
  height: min(58vh, 610px);
  min-height: 430px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #405934 #080c07;
  background:
    linear-gradient(90deg, rgba(126,242,73,.025) 1px, transparent 1px),
    linear-gradient(#040604, #070a06);
  background-size: 42px 42px, auto;
}
.console-output {
  min-width: max-content;
  padding: 15px 17px 35px;
  color: #c9d5c2;
  font: 12.5px/1.58 "Cascadia Mono", "Cascadia Code", Consolas, monospace;
  tab-size: 4;
}
.console-output.wrap { min-width: 0; }
.console-output.wrap .console-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.console-line {
  min-height: 20px;
  padding: 0 7px;
  display: grid;
  grid-template-columns: 68px 54px minmax(0,1fr);
  gap: 8px;
  border-left: 2px solid transparent;
  white-space: pre;
}
.console-line:hover { background: rgba(255,255,255,.025); }
.console-line .line-number { color: #46543f; user-select: none; text-align: right; }
.console-line .line-level { font-weight: 900; text-align: center; }
.console-line.info .line-level { color: #7fd8ff; }
.console-line.warn { border-left-color: rgba(251,191,36,.6); background: rgba(251,191,36,.025); }
.console-line.warn .line-level { color: var(--yellow); }
.console-line.error { border-left-color: rgba(251,113,133,.75); background: rgba(251,113,133,.035); }
.console-line.error .line-level { color: var(--red); }
.console-line.player { border-left-color: rgba(57,217,138,.65); background: rgba(57,217,138,.025); }
.console-line.player .line-level { color: var(--violet); }
.console-line .line-text { color: #cbd7c4; }
.console-line mark { padding: 0; color: #071003; background: #b4ff76; }
.console-placeholder { padding: 60px 25px; color: #687762; text-align: center; white-space: normal; }
.console-statusbar {
  min-height: 35px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #1c2818;
  border-bottom: 1px solid #1c2818;
  color: #6f8068;
  background: #090e08;
  font-size: .68rem;
}
.console-statusbar > span { display: inline-flex; align-items: center; gap: 7px; }
.console-command-form { padding: 13px 14px 8px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; background: #070b06; }
.console-command-form input { min-height: 42px; color: #dcffd0; font-family: "Cascadia Mono", "Cascadia Code", Consolas, monospace; }
.console-command-form input:disabled { color: #64705f; }
.console-prompt { color: var(--cyan); font: 900 1.15rem/1 "Cascadia Mono", Consolas, monospace; }
.console-help { margin: 0; padding: 0 15px 13px 35px; color: #667160; background: #070b06; font-size: .69rem; }
.console-inspector { min-width: 0; }
.console-inspector .panel { margin-bottom: 16px; }
.inspector-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inspector-metrics > div { min-height: 72px; padding: 11px; border: 1px solid #253220; border-radius: 10px; background: rgba(0,0,0,.2); }
.inspector-metrics span, .inspector-metrics strong { display: block; }
.inspector-metrics span { color: var(--muted); font-size: .7rem; }
.inspector-metrics strong { margin-top: 7px; color: #dcffd0; font-size: 1.05rem; }
.console-service-actions { margin-top: 12px; }
.console-service-actions .button { flex: 1; }
.incident-radar { position: relative; overflow: hidden; }
.incident-radar::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -95px;
  top: -100px;
  border: 1px solid rgba(126,242,73,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(126,242,73,.025), 0 0 0 56px rgba(126,242,73,.015);
}
.radar-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 20px rgba(126,242,73,.65); }
.incident-score { padding: 13px; border: 1px solid #263522; border-radius: 11px; background: linear-gradient(120deg, rgba(126,242,73,.08), rgba(0,0,0,.18)); }
.incident-score strong, .incident-score span { display: block; }
.incident-score strong { color: var(--green); font-size: 1.15rem; }
.incident-score span { margin-top: 4px; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.incident-score.degraded { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.055); }
.incident-score.degraded strong { color: var(--yellow); }
.incident-score.critical { border-color: rgba(251,113,133,.42); background: rgba(251,113,133,.07); }
.incident-score.critical strong { color: var(--red); }
.incident-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }
.incident-counts > div { padding: 9px 7px; border: 1px solid #24301f; border-radius: 9px; background: rgba(0,0,0,.18); }
.incident-counts strong, .incident-counts small { display: block; }
.incident-counts strong { margin: 5px 0 2px; font-size: 1rem; }
.incident-counts small { color: #72806b; font-size: .59rem; line-height: 1.25; }
.severity { width: 7px; height: 7px; display: block; border-radius: 50%; }
.severity.error { background: var(--red); }
.severity.warn { background: var(--yellow); }
.severity.player { background: var(--violet); }
.finding-list { display: grid; gap: 6px; margin-top: 10px; }
.finding-list span { padding: 8px 9px; border-left: 2px solid #415139; color: #91a08b; background: rgba(0,0,0,.18); font-size: .68rem; line-height: 1.4; }
.console-playbook .action-card { width: 100%; min-height: 0; margin-top: 8px; padding: 12px; border-radius: 11px; background: rgba(3,8,3,.4); }
.console-playbook .action-card strong { margin-bottom: 4px; font-size: .8rem; }
.console-playbook .action-card span { font-size: .68rem; }
.command-queue-panel { margin-top: 0; }
.full-button { width: 100%; margin-top: 12px; }
.compact-copy { margin: 7px 0 12px; font-size: .7rem; }
.mini-status {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  gap: 4px;
  border: 1px solid #263522;
  border-radius: 10px;
  background: rgba(0,0,0,.2);
  font-size: .74rem;
}
.mini-status strong, .mini-status span, .mini-status small { display: block; }
.mini-status.ready { border-color: rgba(57,217,138,.35); background: rgba(57,217,138,.06); }
.mini-status.ready strong { color: var(--green); }
.mini-status.attention { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.055); }
.mini-status.attention strong { color: var(--yellow); }
.server-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
.readiness-summary { margin: 12px 0; }
.readiness-summary > strong { display: block; margin-bottom: 8px; font-size: .78rem; }
.ready-text { color: var(--green); }
.attention-text { color: var(--yellow); }
.readiness-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.readiness-check {
  min-width: 0;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #253220;
  border-radius: 7px;
  color: #81917b;
  background: rgba(0,0,0,.18);
  font-size: .61rem;
  line-height: 1.2;
}
.readiness-check i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-weight: 900;
}
.readiness-check.pass { color: #a7d993; border-color: rgba(57,217,138,.2); }
.readiness-check.pass i { color: #031006; background: var(--green); }
.readiness-check.fail { color: #b4a982; border-color: rgba(251,191,36,.2); }
.readiness-check.fail i { color: #180d00; background: var(--yellow); }
.catalog-item { align-items: center; justify-content: space-between; gap: 10px; }
.catalog-item > span { min-width: 0; display: grid; gap: 3px; text-align: left; }
.catalog-item > span small { color: var(--muted); }
.plugin-status {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid #2a3825;
  border-radius: 999px;
  color: #8b9b84;
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.plugin-status.installed { color: var(--green); border-color: rgba(57,217,138,.28); background: rgba(57,217,138,.07); }
.plugin-status.queued, .plugin-status.claimed { color: var(--yellow); border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); }
.plugin-status.failed { color: var(--red); border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.07); }
.plugin-status.unsupported { color: #5f6d59; }
.automation-card {
  margin-top: 16px;
  padding: 16px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(126,242,73,.22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(126,242,73,.06), rgba(0,0,0,.2));
}
.automation-card h4 { margin: 2px 0 5px; font-size: 1rem; }
.automation-card .mini-status { margin-top: 0; }
.catalog-target {
  margin: 12px 0 7px;
  padding: 7px 10px;
  border-left: 3px solid var(--green);
  background: rgba(126,242,73,.04);
  font-size: .67rem;
}
.placement-plan {
  max-height: 360px;
  margin: 12px 0 16px;
  display: grid;
  gap: 7px;
  overflow: auto;
}
.placement-row {
  border: 1px solid #273821;
  border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.placement-row[data-complete="true"] { border-color: rgba(57,217,138,.24); }
.placement-row summary {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.placement-row summary::-webkit-details-marker { display: none; }
.placement-row summary > span { display: grid; gap: 2px; }
.placement-row summary small { color: var(--muted); font-size: .6rem; }
.placement-row summary em {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.placement-row summary em.warning { color: var(--yellow); background: rgba(251,191,36,.08); }
.placement-row summary em.success { color: var(--green); background: rgba(57,217,138,.08); }
.placement-chips {
  padding: 0 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.placement-chips span {
  padding: 4px 7px;
  border: 1px solid #2b3827;
  border-radius: 999px;
  color: #8f9e89;
  font-size: .56rem;
}
.placement-chips span.installed { color: var(--green); border-color: rgba(57,217,138,.25); }
.placement-chips span.missing { color: var(--yellow); border-color: rgba(251,191,36,.22); }
.content-layout { margin-bottom: 16px; display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.upload-dropzone {
  min-height: 170px;
  margin-top: 14px;
  padding: 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 2px dashed #38502f;
  border-radius: 15px;
  color: #ccefc0;
  background:
    radial-gradient(circle at 50% 10%, rgba(126,242,73,.09), transparent 55%),
    rgba(3,8,3,.45);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.upload-dropzone:hover, .upload-dropzone:focus, .upload-dropzone.dragging {
  border-color: var(--green);
  background-color: rgba(126,242,73,.06);
  outline: none;
  transform: translateY(-1px);
}
.upload-dropzone strong { font-size: 1.02rem; }
.upload-dropzone span { color: var(--muted); font-size: .74rem; }
.upload-progress {
  height: 34px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid #2b3a25;
  border-radius: 9px;
  background: #080d07;
}
.upload-progress span {
  width: 0;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #4cae2e, var(--green));
  transition: width .12s linear;
}
.upload-progress strong { position: absolute; inset: 0; display: grid; place-items: center; color: #eefbe9; font-size: .67rem; text-shadow: 0 1px 2px #000; }
.schedule-list { margin-top: 14px; display: grid; gap: 7px; }
.schedule-row {
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #273521;
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}
.schedule-row > span:first-child { min-width: 0; display: grid; gap: 3px; }
.schedule-row small { color: var(--muted); overflow-wrap: anywhere; }
.schedule-row.disabled { opacity: .58; }

/* UGN 5 Network OS */
.os-kpi-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.network-os-split { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(350px,1fr); gap: 16px; align-items: start; }
.os-inspector { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.clickable-row { cursor: pointer; transition: background .15s, transform .15s; }
.clickable-row:hover { background: rgba(126,242,73,.06); }
.clickable-row td:first-child strong { display: flex; align-items: center; gap: 7px; }
.player-live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #3f4a3b; box-shadow: 0 0 0 3px rgba(255,255,255,.02); }
.player-live-dot.online { background: var(--green); box-shadow: 0 0 10px rgba(126,242,73,.75); }
.edition-chip { padding: 4px 7px; border: 1px solid #31412b; border-radius: 999px; font-size: .59rem; font-weight: 900; text-transform: uppercase; }
.edition-chip.bedrock { color: #60a5fa; border-color: rgba(96,165,250,.3); }
.edition-chip.java { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.history-count { margin-right: 4px; padding: 3px 5px; border-radius: 5px; color: #91a18b; background: rgba(255,255,255,.035); font-size: .55rem; white-space: nowrap; }
.history-count.danger { color: var(--red); background: rgba(251,113,133,.08); }
.profile-hero-os { padding-bottom: 15px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.profile-hero-os > span:nth-child(2) { min-width: 0; flex: 1; }
.profile-hero-os h3 { margin: 2px 0; font-size: 1.25rem; }
.profile-hero-os small { color: var(--muted); overflow-wrap: anywhere; }
.minecraft-avatar { width: 56px; height: 56px; flex: 0 0 56px; display: grid; place-items: center; border: 1px solid rgba(126,242,73,.35); border-radius: 14px; color: #071006; background: linear-gradient(135deg,var(--green),#2faf4c); box-shadow: 0 8px 22px rgba(0,0,0,.28); font-weight: 950; }
.minecraft-avatar.bedrock { background: linear-gradient(135deg,#60a5fa,#22d3ee); }
.profile-fact-grid { margin: 14px 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.profile-fact-grid > div { padding: 9px; display: grid; gap: 3px; border: 1px solid #273620; border-radius: 8px; background: rgba(0,0,0,.2); }
.profile-fact-grid span { color: var(--muted); font-size: .57rem; }
.profile-fact-grid strong { overflow-wrap: anywhere; font-size: .72rem; }
.os-tab-row { display: flex; gap: 4px; overflow-x: auto; }
.os-tab { padding: 7px 9px; border: 0; border-bottom: 2px solid transparent; color: #83927e; background: transparent; cursor: pointer; font: inherit; font-size: .62rem; font-weight: 800; }
.os-tab.active { color: var(--green); border-bottom-color: var(--green); }
.os-profile-tab { padding-top: 12px; }
.compact-history { display: grid; gap: 6px; }
.compact-history > div { padding: 8px; display: flex; justify-content: space-between; gap: 8px; border: 1px solid #273520; border-radius: 8px; background: rgba(0,0,0,.18); }
.compact-history > div > span { min-width: 0; display: grid; gap: 3px; }
.compact-history small { color: var(--muted); overflow-wrap: anywhere; }
.compact-history em { color: #71806c; font-size: .57rem; font-style: normal; white-space: nowrap; }
.inline-editor { margin-bottom: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; align-items: end; }
.achievement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.achievement-grid > div { padding: 10px; display: grid; gap: 3px; border: 1px solid rgba(251,191,36,.2); border-radius: 9px; background: rgba(251,191,36,.035); }
.achievement-grid > div > span { color: var(--yellow); font-size: 1rem; }
.achievement-grid small { color: var(--muted); }
.os-range { margin-bottom: 14px; }
.os-range-button.active { color: #051004; border-color: var(--green); background: var(--green); }
.performance-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.performance-card { padding: 12px; border: 1px solid rgba(126,242,73,.22); border-radius: 12px; background: linear-gradient(145deg,rgba(126,242,73,.045),rgba(0,0,0,.25)); }
.performance-card.offline { opacity: .63; border-color: rgba(251,113,133,.2); }
.performance-card > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.performance-metrics { margin-top: 10px; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.performance-metrics > span { padding: 7px; display: grid; gap: 2px; border: 1px solid #24321f; border-radius: 7px; background: rgba(0,0,0,.18); }
.performance-metrics small { color: var(--muted); font-size: .52rem; }
.performance-metrics strong { font-size: .76rem; }
.os-list { display: grid; gap: 7px; }
.incident-row { padding: 9px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 8px; border: 1px solid #293720; border-radius: 9px; background: rgba(0,0,0,.18); }
.incident-severity { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 8px currentColor; }
.incident-row.warning .incident-severity { background: var(--yellow); }
.incident-row.critical .incident-severity { background: var(--red); }
.incident-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.incident-row small { color: var(--muted); overflow-wrap: anywhere; }
.incident-row em { color: #71806b; font-size: .58rem; font-style: normal; }
.gate-explainer { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 5px; }
.gate-explainer strong { width: 100%; margin-bottom: 2px; }
.gate-explainer span, .stage-gates span { padding: 5px 7px; border: 1px solid #2b3b25; border-radius: 999px; color: #8c9c86; font-size: .57rem; }
.stage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.stage-card { padding: 13px; display: grid; gap: 10px; border: 1px solid #2c3d25; border-radius: 12px; background: rgba(0,0,0,.2); }
.stage-card > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.stage-card h3 { margin: 2px 0 0; }
.stage-card > small { color: var(--muted); }
.stage-gates { display: flex; flex-wrap: wrap; gap: 5px; }
.stage-gates .pass { color: var(--green); border-color: rgba(57,217,138,.24); }
.stage-gates .fail { color: var(--red); border-color: rgba(251,113,133,.24); }
.stage-gates .pending { border-radius: 7px; }
.lobby-director-layout { margin-bottom: 16px; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(340px,1fr); gap: 16px; }
.portal-preview-stage { min-height: 600px; }
.portal-constellation { min-height: 500px; position: relative; overflow: hidden; border: 1px solid #2e4426; border-radius: 15px; background: radial-gradient(circle at 50% 50%,rgba(126,242,73,.15),transparent 18%),radial-gradient(circle at 50% 50%,rgba(34,211,238,.04),transparent 55%),linear-gradient(rgba(126,242,73,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(126,242,73,.04) 1px,transparent 1px),#040803; background-size: auto,auto,32px 32px,32px 32px,auto; }
.portal-constellation::before,.portal-constellation::after { content: ""; width: 390px; height: 390px; position: absolute; left: 50%; top: 50%; pointer-events: none; border: 1px solid rgba(126,242,73,.15); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 42px rgba(126,242,73,.08),inset 0 0 42px rgba(34,211,238,.04); animation: constellationSpin 32s linear infinite; }
.portal-constellation::before { background: repeating-conic-gradient(from 0deg,rgba(126,242,73,.28) 0 1deg,transparent 1deg 30deg); mask: radial-gradient(circle,transparent 0 61%,#000 62% 64%,transparent 65%); }
.portal-constellation::after { width: 255px; height: 255px; border-style: dashed; border-color: rgba(34,211,238,.26); animation-direction: reverse; animation-duration: 19s; }
@keyframes constellationSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.portal-nexus { width: 105px; height: 105px; position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid var(--green); border-radius: 50%; color: var(--green); background: radial-gradient(circle,#183514,#050a04 70%); box-shadow: 0 0 28px rgba(126,242,73,.4),inset 0 0 22px rgba(126,242,73,.18); text-align: center; font-size: .65rem; font-weight: 950; animation: nexusPulse 2.5s ease-in-out infinite; }
@keyframes nexusPulse { 50% { box-shadow: 0 0 45px rgba(126,242,73,.6),inset 0 0 28px rgba(126,242,73,.28); } }
.portal-orbit { width: 112px; min-height: 72px; position: absolute; z-index: 3; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(126,242,73,.28); border-radius: 12px; color: #dff7d5; background: rgba(5,12,4,.92); cursor: pointer; text-align: center; font: inherit; }
.portal-orbit:hover { z-index: 5; border-color: var(--green); transform: translate(-50%,-50%) scale(1.08); }
.portal-orbit i { width: 25px; height: 25px; border: 2px solid var(--green); border-radius: 50%; box-shadow: 0 0 12px rgba(126,242,73,.55); }
.portal-orbit strong { font-size: .61rem; }
.portal-orbit small { color: #83947d; font-size: .49rem; }
.portal-orbit.barrier { border-color: var(--red); }
.portal-orbit.barrier i { border-color: var(--red); box-shadow: 0 0 12px rgba(251,113,133,.55); }
.scene-nether i { border-color: #f97316; box-shadow: 0 0 12px #f97316; }.scene-arcane i { border-color: #a78bfa; box-shadow: 0 0 12px #a78bfa; }.scene-ice i { border-color: #60a5fa; box-shadow: 0 0 12px #60a5fa; }.scene-sky i { border-color: #22d3ee; box-shadow: 0 0 12px #22d3ee; }.scene-royal i { border-color: #fbbf24; box-shadow: 0 0 12px #fbbf24; }.scene-void i { border-color: #d946ef; box-shadow: 0 0 12px #d946ef; }
.bedrock-form-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; }
.bedrock-form-grid span { padding: 12px 8px; border: 1px solid rgba(96,165,250,.24); border-radius: 9px; color: #b9ddff; background: linear-gradient(145deg,rgba(96,165,250,.08),rgba(0,0,0,.15)); text-align: center; font-size: .63rem; font-weight: 800; }
.event-timeline { display: grid; gap: 8px; }
.event-row { padding: 11px; display: grid; grid-template-columns: 80px minmax(0,1fr) auto auto; align-items: center; gap: 12px; border: 1px solid #2a3a24; border-radius: 11px; background: rgba(0,0,0,.2); }
.event-date { padding: 8px; display: grid; gap: 2px; border-radius: 8px; color: #061005; background: linear-gradient(135deg,var(--green),#4fcf65); text-align: center; }
.event-date span { font-size: .55rem; }
.event-row h3 { margin: 0; font-size: .85rem; }.event-row h3 em { color: var(--yellow); font-size: .54rem; font-style: normal; }.event-row p,.event-row small { margin: 3px 0 0; color: var(--muted); font-size: .59rem; }
.integration-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.integration-card { padding: 14px; display: grid; gap: 13px; border: 1px solid #2b3d24; border-radius: 12px; background: linear-gradient(145deg,rgba(126,242,73,.035),rgba(0,0,0,.2)); }
.integration-card > div:first-child { display: flex; justify-content: space-between; gap: 9px; }
.integration-card h3 { margin: 0 0 4px; }.integration-card p,.integration-card > small { margin: 0; color: var(--muted); font-size: .61rem; }
.compact-form { gap: 10px; }
.check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.check-grid .check { min-width: 0; }
.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .63rem; }
.switch input { position: absolute; opacity: 0; }
.switch i { width: 34px; height: 19px; position: relative; border-radius: 999px; background: #273225; transition: background .15s; }
.switch i::after { content: ""; width: 13px; height: 13px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #82907d; transition: transform .15s,background .15s; }
.switch input:checked + i { background: rgba(126,242,73,.25); }.switch input:checked + i::after { transform: translateX(15px); background: var(--green); }
.two-factor-secret { padding: 12px; display: grid; gap: 7px; border: 1px solid rgba(126,242,73,.25); border-radius: 10px; background: rgba(126,242,73,.04); }
.two-factor-secret code { padding: 9px; color: var(--green); background: #020502; overflow-wrap: anywhere; }
.two-factor-secret small { color: var(--muted); }
.alert.success { color: #b8f5a2; border-color: rgba(57,217,138,.35); background: rgba(57,217,138,.08); }
.alert.success pre { max-height: 250px; overflow: auto; color: #e8ffe0; }
.configuration-center { margin-top: 18px; padding: 0; overflow: hidden; border-color: rgba(126,242,73,.22); }
.configuration-center > .panel-head { padding: 22px 22px 12px; }
.configuration-head { gap: 24px; align-items: end; }
.configuration-target { min-width: min(100%,420px); display: grid; grid-template-columns: minmax(190px,1fr) auto; gap: 10px; align-items: end; }
.configuration-health { margin: 0 22px 14px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2); font-size: .67rem; }
.configuration-health .muted:last-child { margin-left: auto; }
.config-tabs { padding: 0 22px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.config-tab { padding: 12px 13px 10px; flex: 0 0 auto; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font: inherit; font-size: .67rem; font-weight: 800; }
.config-tab:hover { color: var(--text); }
.config-tab.active { color: var(--green); border-bottom-color: var(--green); background: linear-gradient(180deg,transparent,rgba(126,242,73,.06)); }
.structured-config-form { display: block; }
.config-pane { display: none; min-height: 315px; padding: 22px; }
.config-pane.active { display: block; animation: config-pane-in .14s ease-out; }
@keyframes config-pane-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.panel-head.compact { margin-bottom: 16px; padding: 0; }
.settings-grid.wide { grid-template-columns: repeat(4,minmax(160px,1fr)); align-items: start; }
.settings-grid.wide label { min-width: 0; }
.settings-grid .span-two { grid-column: span 2; }
.settings-grid label > em { margin-top: 4px; display: block; color: #73816e; font-size: .56rem; font-style: normal; line-height: 1.35; }
.settings-grid label.check { min-height: 42px; margin-top: 16px; align-items: center; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.14); }
.locked-config-grid { display: grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap: 12px; margin-bottom: 18px; }
.locked-config-grid > div { padding: 15px; display: grid; gap: 6px; border: 1px solid rgba(126,242,73,.15); border-radius: 10px; background: rgba(1,6,2,.55); }
.locked-config-grid span { color: var(--muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; }
.locked-config-grid strong { font-size: .75rem; }
.configuration-apply-bar { position: sticky; bottom: 0; z-index: 3; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(126,242,73,.22); background: rgba(4,12,5,.97); box-shadow: 0 -12px 25px rgba(0,0,0,.25); }
.configuration-apply-bar > div { display: grid; gap: 3px; }
.configuration-apply-bar small { color: var(--muted); }
.config-history-list { display: grid; gap: 8px; }
.config-history-row { padding: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.18); }
.config-history-row span { display: grid; gap: 3px; }
.config-history-row small { color: var(--muted); }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .config-toolbar { grid-template-columns: 1fr 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-editor-panel { position: static; max-height: none; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .console-command-center { grid-template-columns: 1fr; }
  .content-layout { grid-template-columns: 1fr; }
  .console-inspector { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
  .console-inspector .panel { margin-bottom: 0; }
  .network-os-split,.lobby-director-layout { grid-template-columns: 1fr; }
  .os-inspector { position: static; max-height: none; }
  .performance-grid,.integration-grid { grid-template-columns: repeat(2,1fr); }
  .bedrock-form-grid { grid-template-columns: repeat(3,1fr); }
  .settings-grid.wide { grid-template-columns: repeat(2,minmax(150px,1fr)); }
  .locked-config-grid { grid-template-columns: repeat(2,minmax(160px,1fr)); }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: auto; height: auto; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin-bottom: 12px; }
  .sidebar nav { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .nav-item { width: auto; white-space: nowrap; }
  .agent-card { margin: 12px 0 0; }
  .main { padding-top: 20px; }
  .topbar, .network-hero, .section-lead { align-items: flex-start; flex-direction: column; }
  .top-actions { flex-wrap: wrap; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .console-form { grid-template-columns: 1fr; }
  .profile-detail-grid { grid-template-columns: repeat(2,1fr); }
  .profile-self { align-items: flex-start; flex-wrap: wrap; }
  .hero-identity { align-items: flex-start; }
  .game-template-grid { grid-template-columns: repeat(2,1fr); }
  .console-inspector { grid-template-columns: 1fr; }
  .console-toolbar { align-items: stretch; flex-direction: column; }
  .console-target-label { min-width: 0; }
  .console-viewport { min-height: 360px; height: 52vh; }
  .console-line { grid-template-columns: 50px 45px minmax(0,1fr); gap: 5px; }
  .os-kpi-grid,.performance-grid,.integration-grid { grid-template-columns: repeat(2,1fr); }
  .stage-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 65px minmax(0,1fr); }
  .event-row > .badge,.event-row > .button { justify-self: start; }
  .portal-preview-stage { min-height: 500px; }
  .portal-constellation { min-height: 420px; }
  .configuration-head,.configuration-apply-bar { align-items: stretch; flex-direction: column; }
  .configuration-target { width: 100%; }
  .configuration-health .muted:last-child { margin-left: 0; }
}
@media (max-width: 520px) {
  .kpi-grid, .action-grid { grid-template-columns: 1fr; }
  .field-row, .button-row { align-items: stretch; flex-direction: column; }
  .login-card { padding: 25px; }
  .settings-grid { grid-template-columns: 1fr; }
  .config-toolbar, .capability-grid { grid-template-columns: 1fr; }
  .profile-grid, .profile-detail-grid { grid-template-columns: 1fr; }
  .weekday-picker { grid-template-columns: repeat(4,1fr); }
  .profile-self-stats { width: 100%; flex-direction: column; }
  .quick-grid, .game-template-grid { grid-template-columns: 1fr; }
  .hero-identity { flex-direction: column; }
  .hero-logo { width: 84px; height: 84px; border-radius: 22px; }
  .bulk-toolbar { align-items: stretch; flex-direction: column; }
  .console-command-form { grid-template-columns: auto minmax(0,1fr); }
  .console-command-form .button { grid-column: 1 / -1; }
  .console-statusbar { align-items: flex-start; flex-direction: column; }
  .incident-counts { grid-template-columns: 1fr; }
  .readiness-grid { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 1fr; align-items: stretch; }
  .os-kpi-grid,.performance-grid,.integration-grid,.profile-fact-grid,.achievement-grid,.bedrock-form-grid { grid-template-columns: 1fr; }
  .inline-editor { grid-template-columns: 1fr; }
  .portal-orbit { width: 86px; min-height: 62px; }
  .configuration-target,.settings-grid.wide,.locked-config-grid { grid-template-columns: 1fr; }
  .settings-grid .span-two { grid-column: auto; }
  .config-history-row { grid-template-columns: 1fr; }
}