:root {
  --bg: #070b10;
  --panel: #0e151d;
  --line: #243440;
  --text: #d9e5ea;
  --muted: #78909c;
  --green: #58f5a8;
  --cyan: #57d9ff;
  --amber: #ffca58;
  --red: #ff6378;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% -10%, #123243 0, transparent 32%), var(--bg); color: var(--text); font-family: var(--sans); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .035; background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px); background-size: 24px 24px; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top,#132338 0,#070b10 58%); }
.auth-card { width: min(460px,100%); padding: 34px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,17,25,.96); box-shadow: 0 24px 80px #0008; }
.auth-card h1 { margin: .2rem 0 1rem; }
.auth-card p { color: var(--muted); }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
.auth-form label { display: grid; gap: 7px; color: var(--muted); font-size: .84rem; }
.auth-form input, .auth-form select { width: 100%; }
.setup-card { width: min(560px,100%); }
button, input, select, textarea { font: inherit; }
button { color: var(--text); border: 1px solid var(--line); background: #14212b; border-radius: 4px; padding: .62rem .9rem; cursor: pointer; }
button:hover { border-color: var(--cyan); }
button.primary { background: #0d5f53; border-color: #159c82; }
button.danger { background: #6b2030; border-color: #ab3850; }
button.ghost { background: transparent; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid var(--line); background: rgba(7,11,16,.88); backdrop-filter: blur(12px); }
.topbar-actions { display: flex; align-items: center; gap: 1rem; }
.findmy-link { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border: 1px solid #277c61; border-radius: 999px; color: var(--green); background: rgba(39,124,97,.12); text-decoration: none; font: 700 .7rem var(--mono); }
.findmy-link span { font-size: 1rem; }
.eyebrow { margin: 0 0 .25rem; color: var(--cyan); letter-spacing: .22em; font: 700 .68rem var(--mono); }
h1 { margin: 0; letter-spacing: .055em; font: 600 clamp(1.25rem, 3vw, 2rem) var(--mono); }
h2, h3 { margin: 0; font-family: var(--mono); font-weight: 600; }
.server-state { display: grid; grid-template-columns: auto auto; gap: .2rem .55rem; align-items: center; font: 700 .75rem var(--mono); }
.server-state small { color: var(--muted); grid-column: 2; }
.dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px currentColor; }
.dot.online { background: var(--green); }
.dot.offline { background: var(--red); }
.tabs { display: flex; gap: .4rem; padding: .7rem clamp(1rem, 4vw, 4rem); overflow-x: auto; border-bottom: 1px solid var(--line); background: #0a1016; }
.tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); white-space: nowrap; font: 700 .76rem var(--mono); text-transform: uppercase; }
.tab.active { color: var(--green); border-bottom-color: var(--green); }
main { max-width: 1660px; margin: auto; padding: 1.2rem clamp(.8rem, 3vw, 3rem) 4rem; }
.view { display: none; }
.view.active { display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .7rem; }
.metric, .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(18,31,41,.95), rgba(10,17,24,.97)); box-shadow: 0 12px 38px rgba(0,0,0,.18); }
.metric { min-height: 112px; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; }
.metric span, .panel-title span { color: var(--muted); font: 700 .65rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.metric strong { color: var(--green); font: 600 1.18rem var(--mono); }
.metric small { color: var(--muted); }
.panel { padding: 1rem; margin-bottom: .7rem; }
.section-nav { position: sticky; top: 0; z-index: 4; display: flex; gap: .45rem; margin: -.2rem 0 .9rem; padding: .65rem; overflow-x: auto; border: 1px solid var(--line); background: rgba(7,11,16,.94); backdrop-filter: blur(12px); }
.section-nav a { flex: 0 0 auto; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font: 700 .72rem var(--mono); }
.section-nav a:hover { border-color: var(--cyan); color: var(--cyan); }
.deadhand-alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; padding: 1rem; border: 1px solid var(--red); background: rgba(107,32,48,.28); }
.deadhand-alert[hidden] { display: none; }
.deadhand-alert div { display: grid; gap: .35rem; }
.deadhand-alert strong { color: var(--red); font: 700 .95rem var(--mono); }
.deadhand-alert span, .checkin-reset-panel p { color: var(--muted); }
.checkin-reset-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-color: #6b3943; }
.checkin-reset-panel h2 { margin-bottom: .35rem; }
.checkin-reset-panel p { margin: .2rem 0 0; }
.reset-actions { display: grid; gap: .5rem; min-width: 260px; }
.section-kicker { color: var(--cyan) !important; letter-spacing: .12em; font: 700 .65rem var(--mono); }
.checkin-wide { grid-column: 1 / -1; }
.panel-title { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.panel-title h2 { font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; }
.overview-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: .7rem; }
.switch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.switch { border: 1px solid #263844; background: #0a1117; padding: .7rem; min-height: 78px; display: flex; flex-direction: column; justify-content: space-between; }
.switch b { font: 600 .68rem var(--mono); text-transform: uppercase; }
.switch i { width: 2.3rem; height: .78rem; border-radius: 1rem; background: #303d45; position: relative; }
.switch i::after { content: ""; position: absolute; top: .13rem; left: .15rem; width: .52rem; height: .52rem; border-radius: 50%; background: #8a98a0; transition: .2s; }
.switch.on { border-color: #277c61; box-shadow: inset 0 0 22px rgba(39,124,97,.12); }
.switch.on i { background: #176548; }
.switch.on i::after { left: 1.62rem; background: var(--green); box-shadow: 0 0 8px var(--green); }
.switch em { color: var(--muted); font: normal .62rem var(--mono); }
.lcd { margin-bottom: 1rem; }
.lcd label { display: block; color: var(--muted); margin-bottom: .35rem; font: .62rem var(--mono); }
.lcd pre { margin: 0; min-height: 116px; padding: .85rem; border: 4px solid #23313a; border-radius: 4px; overflow: hidden; background: #9bbe76; color: #172514; text-shadow: 0 0 2px rgba(23,37,20,.3); font: 700 1rem/1.35 var(--mono); letter-spacing: .055em; }
.event-log { height: 180px; overflow: auto; font: .72rem/1.65 var(--mono); }
.event-row { display: grid; grid-template-columns: 85px 130px 1fr; border-bottom: 1px solid rgba(36,52,64,.6); }
.event-row time { color: var(--muted); }
.event-row b { color: var(--cyan); }
.editor-layout { display: grid; grid-template-columns: 250px 1fr; gap: .7rem; }
.config-list-panel { max-height: calc(100vh - 190px); overflow: auto; }
.config-list { display: grid; gap: .25rem; }
.config-item { width: 100%; display: flex; justify-content: space-between; background: transparent; font: .72rem var(--mono); text-align: left; }
.config-item.active { color: var(--green); border-color: var(--green); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.editor-stack { display: grid; grid-template-columns: 1.25fr .75fr; gap: .65rem; }
#jsonEditor, .json-preview { width: 100%; min-height: 480px; margin: 0; padding: 1rem; resize: vertical; border: 1px solid var(--line); background: #070d12; color: #d3e3e8; font: .75rem/1.55 var(--mono); tab-size: 2; overflow: auto; }
.json-preview { white-space: pre-wrap; overflow-wrap: anywhere; color: #adbac2; }
.json-key { color: var(--cyan); }.json-string { color: var(--green); }.json-number { color: var(--amber); }.json-bool { color: #c792ea; }.json-null { color: var(--red); }
.result { margin-top: .65rem; padding: .7rem; border-left: 3px solid var(--muted); background: #0a1117; font: .72rem var(--mono); }
.result.success { border-color: var(--green); color: var(--green); }.result.error { border-color: var(--red); color: var(--red); }
.history-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; margin-top: 1rem; }
.history-grid h3 { margin-bottom: .6rem; font-size: .8rem; }
.history-list { display: grid; gap: .3rem; max-height: 220px; overflow: auto; }
.history-item { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; font: .67rem var(--mono); }
.diff { margin: 0; height: 220px; overflow: auto; background: #070d12; padding: .8rem; color: #b6c8cf; font: .68rem/1.5 var(--mono); }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.upload-form, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem; }
label { display: grid; gap: .35rem; color: var(--muted); font: 700 .66rem var(--mono); text-transform: uppercase; }
input, select, textarea { min-width: 0; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: .65rem; background: #070d12; }
textarea { min-height: 100px; }
.wide, .upload-form button { grid-column: 1 / -1; }
.check { display: flex; align-items: center; flex-direction: row; }
.asset-list { display: grid; gap: .35rem; max-height: 420px; overflow: auto; }
.asset { display: grid; grid-template-columns: 1fr auto; gap: .3rem; padding: .55rem; border: 1px solid rgba(36,52,64,.65); font: .68rem var(--mono); }
.asset small { color: var(--muted); grid-column: 1 / -1; overflow-wrap: anywhere; }
.command-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font: .7rem var(--mono); }
th, td { padding: .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--cyan); }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 420px; padding: .8rem 1rem; background: #15242e; border: 1px solid var(--cyan); transform: translateY(150%); transition: .25s; font: .75rem var(--mono); z-index: 5; }
.toast.show { transform: none; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .overview-grid, .two-column { grid-template-columns: 1fr; }
  .switch-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-layout { grid-template-columns: 1fr; }
  .config-list-panel { max-height: none; }
  .editor-stack, .history-grid { grid-template-columns: 1fr; }
  .switch-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { align-items: flex-start; }
  .deadhand-alert, .checkin-reset-panel { align-items: stretch; flex-direction: column; }
}
body{font-size:17px}label{font-size:.74rem}input,select,textarea,button{font-size:.82rem}table{font-size:.78rem}.result{font-size:.78rem}
[hidden]{display:none!important}