/* The Octopus admin panel. Values from Toko's sign-in brand book of 2026-11-13 (admin/README.md, Design):
   accent Graphite, Space Grotesk 600 for headlines, Inter for text, round corners (16 px), elevated buttons, outlined
   fields, comfortable spacing (fields 42 px, button 44 px, gap 14 px), lively motion; sign-in split, panel right,
   without picture, soft glow. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --page: #151517;
  --surface: #1B1B1C;
  --input: #1B1B1C;
  --text: #F9FAFB;
  --secondary: #CFD3D6;
  --muted: #A5AAB0;
  --lines: #24262A;
  --error: #F25A5A;
  --button: #E6E8EA;
  --button-text: #0F1115;
  --button-hover: #EAECED;
  --button-end: #EDEEF0;
  --link: #E6E8EA;
  --art: #0B0C0E;
  --art-text: #F2F3F5;
  --art-muted: #A5AAB0;
  --glow: rgba(230, 232, 234, 0.16);
  --ok: #4ADE80;
  --warn: #FBBF24;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.45);
  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
[data-theme="light"] {
  color-scheme: light;
  --page: #FFFFFF;
  --surface: #FFFFFF;
  --input: #F9FAFB;
  --text: #0F1115;
  --secondary: #61666B;
  --muted: #61666B;
  --lines: #E3E5E8;
  --error: #EC1313;
  --button: #2B2F33;
  --button-text: #FFFFFF;
  --button-hover: #26292D;
  --button-end: #222528;
  --link: #2B2F33;
  --art: #FFFFFF;
  --art-text: #0F1115;
  --art-muted: #61666B;
  --glow: rgba(43, 47, 51, 0.10);
  --ok: #15803D;
  --warn: #B45309;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px rgba(15, 17, 21, 0.18);
  --card-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
}

:root {
  --radius: 16px;
  --radius-small: 10px;
  --field: 42px;
  --button-height: 44px;
  --gap: 14px;
  --head: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 180ms;
  --slow: 420ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --slow: 0ms; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--page);
  color: var(--text);
  font: 400 14px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 36px; line-height: 1.1; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 16px; }
a { color: var(--link); text-underline-offset: 3px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--button); outline-offset: 2px; }

/* -- Fields and buttons ------------------------------------------------------------------------------------------ */

label { display: grid; gap: 6px; font-size: 13px; color: var(--secondary); font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  height: var(--field);
  padding: 0 14px;
  border: 1px solid var(--lines);
  border-radius: var(--radius-small);
  background: var(--input);
  color: var(--text);
  font: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus { outline: none; border-color: var(--button); box-shadow: 0 0 0 3px var(--glow); }
input.code { letter-spacing: 0.4em; font-family: var(--mono); font-size: 18px; text-align: center; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--button-height);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-small);
  background: linear-gradient(180deg, var(--button), var(--button-end));
  color: var(--button-text);
  font: 600 14px/1 var(--body);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--fast) var(--spring), background var(--fast) var(--ease), opacity var(--fast);
}
.button:hover { background: var(--button-hover); transform: translateY(-1px); }
.button:active { transform: translateY(1px) scale(0.98); }
.button:disabled { opacity: 0.5; cursor: default; transform: none; }
.button.quiet {
  background: transparent; color: var(--text); box-shadow: none; border: 1px solid var(--lines);
}
.button.quiet:hover { border-color: var(--muted); background: var(--input); }
.button.danger { background: transparent; color: var(--error); border: 1px solid var(--error); box-shadow: none; }
.button.danger:hover { background: color-mix(in srgb, var(--error) 10%, transparent); }
.button.small { height: 32px; padding: 0 12px; font-size: 13px; }
.button.wide { width: 100%; }

.error { color: var(--error); font-size: 13px; }
.note { color: var(--muted); font-size: 13px; }

/* -- Sign-in: split, panel right, soft glow ---------------------------------------------------------------------- */

.signin { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.signin .art {
  position: relative; overflow: hidden;
  background: var(--art); color: var(--art-text);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px;
}
.signin .art::before, .signin .art::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.signin .art::before {
  width: 520px; height: 520px; left: -120px; top: 18%;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  animation: drift 14s var(--ease) infinite alternate;
}
.signin .art::after {
  width: 380px; height: 380px; right: -80px; bottom: -60px;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  animation: drift 18s var(--ease) infinite alternate-reverse;
}
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .signin .art::before, .signin .art::after { animation: none; } }
.signin .art > * { position: relative; }
.signin .art p { color: var(--art-muted); max-width: 420px; font-size: 15px; }
.brand { display: flex; align-items: center; gap: 10px; font: 600 18px var(--head); }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(180deg, var(--button), var(--button-end));
  display: grid; place-items: center; color: var(--button-text); font-size: 15px;
}
.signin .panel { display: grid; place-items: center; padding: 48px 32px; }
.signin form { width: min(380px, 100%); display: grid; gap: var(--gap); animation: rise var(--slow) var(--spring); }
.signin form h2 { margin-bottom: 4px; }
.signin .qr { background: #FFFFFF; padding: 12px; border-radius: var(--radius-small); justify-self: center; }
.signin .qr img { display: block; width: 180px; height: 180px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .signin { grid-template-columns: 1fr; }
  .signin .art { min-height: 220px; padding: 32px; }
}

/* -- The app: side navigation, top bar, cards -------------------------------------------------------------------- */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side {
  border-right: 1px solid var(--lines); padding: 20px 14px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.side nav { display: grid; gap: 2px; }
.side nav a {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px; border-radius: var(--radius-small);
  color: var(--secondary); text-decoration: none; font-weight: 500;
  transition: background var(--fast) var(--ease), color var(--fast), transform var(--fast) var(--spring);
}
.side nav a:hover { background: var(--input); color: var(--text); transform: translateX(2px); }
.side nav a.on { background: var(--input); color: var(--text); box-shadow: inset 2px 0 0 var(--button); }
.side nav a svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.side .foot { margin-top: auto; display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.side .foot .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { padding: 28px 32px 48px; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.top .actions { display: flex; gap: 8px; align-items: center; }
.view { display: grid; gap: 18px; animation: rise var(--slow) var(--spring); }

.grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--lines); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--card-shadow); min-width: 0;
}
.card h3 { margin-bottom: 10px; }
a.card { display: block; color: inherit; text-decoration: none; transition: border-color var(--fast), transform var(--fast) var(--spring); }
a.card:hover { border-color: var(--muted); transform: translateY(-2px); }
a.card.stack { display: grid; }
.card .big { font: 600 28px/1.1 var(--head); }
.card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: grid; gap: 10px; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.dot.bad { background: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 18%, transparent); }
.service { display: flex; align-items: center; gap: 10px; }
.service .name { font-weight: 600; text-transform: capitalize; }
.service .ms { margin-left: auto; color: var(--muted); font-size: 12px; }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--lines); font-size: 12px; color: var(--secondary); white-space: nowrap;
}
.tag.on { border-color: var(--ok); color: var(--ok); }
.tag.off { border-color: var(--error); color: var(--error); }
.tag.warn { border-color: var(--warn); color: var(--warn); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 10px;
     border-bottom: 1px solid var(--lines); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--lines); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--fast) var(--ease); }
tbody tr.pick { cursor: pointer; }
tbody tr.pick:hover, tbody tr.chosen { background: var(--input); }
.table-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--lines); border-radius: var(--radius); }
.table-wrap table thead th { position: sticky; top: 0; background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--lines); border-radius: 12px; }
.tabs button {
  height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--secondary);
  font: 500 13px var(--body); cursor: pointer; transition: background var(--fast), color var(--fast);
}
.tabs button.on { background: var(--input); color: var(--text); box-shadow: var(--card-shadow); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); font-size: 13px; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--lines);
                position: relative; cursor: pointer; transition: background var(--fast); margin: 0; }
.switch input::after { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px;
                       border-radius: 50%; background: var(--text); transition: transform var(--fast) var(--spring); }
.switch input:checked { background: var(--button); }
.switch input:checked::after { transform: translateX(16px); background: var(--button-text); }

.steps { display: grid; gap: 6px; font-size: 13px; }
.steps div { display: flex; gap: 10px; }
.steps time { color: var(--muted); font-family: var(--mono); font-size: 12px; flex: none; }
.bar { height: 6px; border-radius: 999px; background: var(--lines); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--button); transition: width var(--slow) var(--ease); }

pre.json {
  margin: 0; padding: 12px; border-radius: var(--radius-small); background: var(--input); border: 1px solid var(--lines);
  font: 12px/1.5 var(--mono); overflow: auto; max-height: 320px; white-space: pre-wrap; word-break: break-word;
}

dialog {
  border: 1px solid var(--lines); border-radius: var(--radius); background: var(--surface); color: var(--text);
  padding: 22px; width: min(460px, 92vw); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
dialog[open] { animation: pop var(--slow) var(--spring); }
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
dialog form { display: grid; gap: var(--gap); }

.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 10; max-width: 420px;
  background: var(--surface); border: 1px solid var(--lines); border-radius: var(--radius); padding: 12px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); animation: rise var(--slow) var(--spring);
}
.toast.bad { border-color: var(--error); }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.spin { width: 14px; height: 14px; border: 2px solid var(--lines); border-top-color: var(--text); border-radius: 50%;
        display: inline-block; animation: turn 0.8s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--lines); }
  .side nav { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  main { padding: 20px; }
}