/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --bg:              #f0ebe3;
  --bg2:             #e8e2d9;
  --border:          #cec7bc;
  --text:            #1c1917;
  --muted:           #6b6560;
  --accent:          #b5451b;
  --green:           #2d6a4f;
  --red:             #922b21;

  --badge-green-bg:  #d8f3dc;
  --badge-green-fg:  #2d6a4f;
  --badge-red-bg:    #fce8e6;
  --badge-red-fg:    #922b21;
  --badge-warn-bg:   rgba(181,69,27,.18);
  --badge-warn-fg:   #b5451b;

  --btn-primary-bg:  #b5451b;
  --btn-primary-fg:  #f0ebe3;

  --header-h: 52px;
  --radius:   8px;
  --font:     'Space Mono', 'Courier New', monospace;
}

[data-theme="dark"] {
  --bg:              #1a1612;
  --bg2:             #211e19;
  --border:          #3a342c;
  --text:            #e8e2d9;
  --muted:           #8a8078;
  --accent:          #d4622a;
  --green:           #4a9470;
  --red:             #c0403a;

  --badge-green-bg:  #1a3d2b;
  --badge-green-fg:  #4a9470;
  --badge-red-bg:    #3d1a18;
  --badge-red-fg:    #c0403a;
  --badge-warn-bg:   #3d2010;
  --badge-warn-fg:   #d4622a;

  --btn-primary-bg:  #d4622a;
  --btn-primary-fg:  #1a1612;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:              #1a1612;
    --bg2:             #211e19;
    --border:          #3a342c;
    --text:            #e8e2d9;
    --muted:           #8a8078;
    --accent:          #d4622a;
    --green:           #4a9470;
    --red:             #c0403a;

    --badge-green-bg:  #1a3d2b;
    --badge-green-fg:  #4a9470;
    --badge-red-bg:    #3d1a18;
    --badge-red-fg:    #c0403a;
    --badge-warn-bg:   #3d2010;
    --badge-warn-fg:   #d4622a;

    --btn-primary-bg:  #d4622a;
    --btn-primary-fg:  #1a1612;
  }
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:      var(--font);
  font-size:        13px;
  background:       var(--bg);
  color:            var(--text);
  min-height:       100vh;
  transition:       background .2s, color .2s;
}

/* ── Header ──────────────────────────────────────────────── */
.header {
  position:         sticky;
  top:              0;
  z-index:          100;
  height:           var(--header-h);
  background:       var(--bg2);
  border-bottom:    1px solid var(--border);
  display:          flex;
  align-items:      center;
  padding:          0 1.5rem;
  gap:              1rem;
}

.header__logo {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  flex:        1;
  text-decoration: none;
}

.header__logo-img {
  height:    34px;
  width:     auto;
  flex-shrink: 0;
}

.header__logo-text {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--accent);
}

.header__actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── Container ───────────────────────────────────────────── */
.container {
  max-width:  1100px;
  margin:     0 auto;
  padding:    1.75rem 1.5rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  padding:        6px 14px;
  border-radius:  var(--radius);
  font-family:    var(--font);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.5px;
  cursor:         pointer;
  border:         none;
  transition:     opacity .15s, background .15s;
  white-space:    nowrap;
}
.btn:hover { opacity: .85; }
.btn:active { opacity: .7; }

.btn--primary {
  background: var(--btn-primary-bg);
  color:      var(--btn-primary-fg);
}

.btn--secondary {
  background: transparent;
  color:      var(--text);
  border:     1px solid var(--border);
}

.btn--icon {
  padding:        6px 8px;
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-size:      14px;
  line-height:    1;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:        inline-block;
  padding:        3px 9px;
  border-radius:  4px;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.5px;
  white-space:    nowrap;
}

.badge--green { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.badge--red   { background: var(--badge-red-bg);   color: var(--badge-red-fg);   }
.badge--warn  { background: var(--badge-warn-bg);  color: var(--badge-warn-fg);  }

/* ── Panel / Card ────────────────────────────────────────── */
.panel {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       1.25rem 1.5rem;
}

.panel__title {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  1rem;
}

/* ── Alert ───────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius);
  padding:       0.9rem 1.1rem;
  font-size:     0.82rem;
  margin-bottom: 1.5rem;
  border:        1px solid;
}

.alert--error {
  background: var(--badge-red-bg);
  color:      var(--badge-red-fg);
  border-color: var(--red);
}

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  height:     1px;
  background: var(--border);
  margin:     0.75rem 0;
}

/* ── Utilities ───────────────────────────────────────────── */
.text-muted   { color: var(--muted); }
.text-accent  { color: var(--accent); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.empty        { color: var(--muted); font-size: 0.82rem; }