/* Apply Kit UI: tokens, buttons and cards in plain CSS, in a neutral admin style
   (neutral black and white, Plus Jakarta Sans, flat surfaces with a hairline ring).
   Used by panel.html (extension) and server/dashboard.html (served at /ui.css). */

:root {
  --shell: #FAFAFA; --background: #FFFFFF; --panel-border: #E5E5E5;
  --foreground: #0A0A0A; --card: #FFFFFF;
  --primary: #171717; --primary-foreground: #FAFAFA;
  --secondary: #F5F5F5; --muted: #F5F5F5; --muted-foreground: #737373; --accent: #F5F5F5; --nav-active: #EFEFEF;
  --border: #E5E5E5; --input: #E5E5E5; --ring: #A3A3A3;
  --success: #10B981; --success-soft: #ECFDF5; --success-ink: #047857;
  --warn: #F59E0B; --warn-soft: #FFFBEB; --warn-ink: #B45309;
  --danger: #E7000B; --danger-soft: #FEF2F2;
  --ai: #171717; --ai-soft: #F5F5F5; --ai-ink: #171717;
  --key-top: #262626; --key-bottom: #171717; --key-border: #171717; --key-edge: transparent;
  --key-glow: rgb(0 0 0 / .18); --key-ink: #FAFAFA; --key-highlight: rgb(255 255 255 / .1);
  --surface-top: #FFFFFF; --surface-bottom: #FFFFFF; --surface-edge: transparent;
  --surface-highlight: transparent;
  --surface-drop: 0 1px 2px rgb(0 0 0 / .04);
  --radius: .75rem;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell: #050505; --background: #0A0A0A; --panel-border: rgb(255 255 255 / .1);
    --foreground: #FAFAFA; --card: #141414;
    --primary: #E5E5E5; --primary-foreground: #171717;
    --secondary: #262626; --muted: #1F1F1F; --muted-foreground: #A1A1A1; --accent: #1F1F1F; --nav-active: #1C1C1C;
    --border: rgb(255 255 255 / .1); --input: rgb(255 255 255 / .14); --ring: #737373;
    --success-soft: rgb(16 185 129 / .14); --success-ink: #6EE7B7;
    --warn-soft: rgb(245 158 11 / .14); --warn-ink: #FCD34D;
    --danger: #FF6467; --danger-soft: rgb(255 100 103 / .14);
    --ai: #FAFAFA; --ai-soft: #1F1F1F; --ai-ink: #FAFAFA;
    --key-top: #FAFAFA; --key-bottom: #E5E5E5; --key-border: #E5E5E5; --key-edge: transparent;
    --key-glow: rgb(0 0 0 / .4); --key-ink: #171717; --key-highlight: transparent;
    --surface-top: #141414; --surface-bottom: #141414; --surface-edge: transparent;
    --surface-highlight: transparent;
    --surface-drop: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --shell: #050505; --background: #0A0A0A; --panel-border: rgb(255 255 255 / .1);
  --foreground: #FAFAFA; --card: #141414;
  --primary: #E5E5E5; --primary-foreground: #171717;
  --secondary: #262626; --muted: #1F1F1F; --muted-foreground: #A1A1A1; --accent: #1F1F1F; --nav-active: #1C1C1C;
  --border: rgb(255 255 255 / .1); --input: rgb(255 255 255 / .14); --ring: #737373;
  --success-soft: rgb(16 185 129 / .14); --success-ink: #6EE7B7;
  --warn-soft: rgb(245 158 11 / .14); --warn-ink: #FCD34D;
  --danger: #FF6467; --danger-soft: rgb(255 100 103 / .14);
  --ai: #FAFAFA; --ai-soft: #1F1F1F; --ai-ink: #FAFAFA;
  --key-top: #FAFAFA; --key-bottom: #E5E5E5; --key-border: #E5E5E5; --key-edge: transparent;
  --key-glow: rgb(0 0 0 / .4); --key-ink: #171717; --key-highlight: transparent;
  --surface-top: #141414; --surface-bottom: #141414; --surface-edge: transparent;
  --surface-highlight: transparent;
  --surface-drop: 0 1px 2px rgb(0 0 0 / .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { background: var(--background); color: var(--foreground); }
body { margin: 0; font: 14px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.02em; margin: 0; }
a { color: var(--primary); text-decoration: none; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted-foreground); }
.xs { font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.mono { font-family: var(--font-mono); }

/* Raised finishes */
.key-brand {
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  color: var(--key-ink); border: 1px solid var(--key-border);
  box-shadow: inset 0 1px 0 var(--key-highlight), inset 0 -3px 0 var(--key-edge), 0 10px 20px -12px var(--key-glow);
}
.key-neutral {
  background-image: linear-gradient(180deg, var(--surface-top), var(--surface-bottom));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--surface-highlight), inset 0 -3px 0 var(--surface-edge), var(--surface-drop);
}
.card {
  background: var(--card);
  background-image: linear-gradient(180deg, var(--surface-top), var(--surface-bottom));
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 var(--surface-highlight), inset 0 -2px 0 var(--surface-edge), var(--surface-drop);
  border-radius: 12px; padding: 16px;
}
.card-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 10px; font: 500 13px/1 var(--font-sans);
  color: var(--foreground); cursor: pointer; white-space: nowrap; transition: filter .15s, transform .05s;
  background-image: linear-gradient(180deg, var(--surface-top), var(--surface-bottom));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--surface-highlight), inset 0 -3px 0 var(--surface-edge), var(--surface-drop);
}
.btn:hover { filter: brightness(.98); }
:root[data-theme="dark"] .btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ring) 45%, transparent); outline-offset: 1px; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.brand {
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  color: var(--key-ink); border-color: var(--key-border); font-weight: 600;
  box-shadow: inset 0 1px 0 var(--key-highlight), inset 0 -3px 0 var(--key-edge), 0 10px 20px -12px var(--key-glow);
}
.btn.ai { color: var(--ai-ink); background-image: linear-gradient(180deg, var(--ai-soft), color-mix(in srgb, var(--ai-soft) 80%, var(--ai) 20%)); border-color: color-mix(in srgb, var(--ai) 35%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted-foreground); }
.btn.ghost:hover { background: var(--muted); color: var(--foreground); }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 9px; }
.btn.lg { height: 38px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn.icon { width: 32px; padding: 0; }
.btn.sm.icon { width: 28px; }
.kbd { font: 500 11px var(--font-mono); opacity: .65; }

/* Badges & pills */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 500; background: var(--secondary); color: var(--muted-foreground); white-space: nowrap; }
.badge.ok { background: var(--success-soft); color: var(--success-ink); }
.badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.ai { background: var(--ai-soft); color: var(--ai-ink); }
.badge.brand { background: var(--accent); color: var(--key-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }

/* Inputs */
.input, textarea.input {
  width: 100%; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--input);
  background: var(--card); color: var(--foreground); font: 14px var(--font-sans);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .04);
}
textarea.input { height: auto; min-height: 140px; padding: 10px; line-height: 1.5; resize: vertical; }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.label { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); margin-bottom: 6px; display: block; }

/* Progress */
.progress { height: 8px; border-radius: 99px; background: var(--muted); overflow: hidden; box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); }
.progress > b { display: block; height: 100%; border-radius: 99px; background: var(--primary); }

/* Logo */
.logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--font-display); }

/* Output block */
.out { white-space: pre-wrap; background: var(--muted); border: 1px solid var(--border); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.55; margin: 0; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Segmented switch (one choice of a few) */
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--muted); border: 1px solid var(--border); }
.seg button { height: 22px; padding: 0 8px; border: 0; background: none; border-radius: 7px; font: 500 11.5px var(--font-sans); color: var(--muted-foreground); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.seg button .n { opacity: .6; margin-left: 4px; }