:root, [data-theme="dark"] {
  --bg: #111214; --bg-2: #15161a; --panel: #181a1f; --panel-2: #1d2026; --border: #2b2f37;
  --text: #f2f4f8; --muted: #a7afba; --accent: #2bc3d6; --accent-2: #20343a;
  --good: #88f28b; --good-bg: rgba(136,242,139,.08); --shadow: 0 10px 24px rgba(0,0,0,.35);
  --radius: 12px; --radius-sm: 9px;
}

[data-theme="light"] {
  --bg: #eae7e0;                     /* was #f6f5f2 - darkened slightly to create real headroom below panel */
  --bg-2: #f2efe9;                   /* was #fbfaf8 */
  --panel: #ffffff;                  /* unchanged - stays the brightest surface, max separation from bg */
  --panel-2: #e6e1d6;                /* was #f1eee8 - pulled further from bg/panel so it reads as its own layer */
  --border: #9c8e76;                 /* unchanged from last fix - still ~2.6-3.2:1 */
  --text: #23211d;
  --muted: #57524a;                  /* unchanged from last fix */
  --accent: #075258;                 /* unchanged from last fix */
  --accent-2: #e4f6f7;
  --good: #2f7d32; --good-bg: rgba(47,125,50,.08);
  --shadow: 0 10px 24px rgba(0,0,0,.14);   /* was .08 - shadows are actually effective on light backgrounds (unlike dark), leaning on this harder helps compensate */
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(45deg, rgba(255,255,255,.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.02) 75%, rgba(255,255,255,.02)), 
                    linear-gradient(45deg, rgba(255,255,255,.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.02) 75%, rgba(255,255,255,.02));
  background-size: 18px 18px, 18px 18px;
  background-position: 0 0, 9px 9px;
  background-attachment: fixed, fixed;
  line-height: 1.4; font-size: 14.5px;
}

button, input, select { font: inherit; }
input, select, button {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
input, select { min-height: 34px; padding: .42rem .6rem; width: 100%; }
button { min-height: 34px; padding: .42rem .7rem; cursor: pointer; }

.page {
  max-width: 1180px; margin: 0 auto; padding: 8px; min-height: 100dvh;
  display: grid; gap: 8px;
}

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px 10px; position: relative; overflow: hidden;
}
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
}
.panel > * { position: relative; z-index: 1; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 44px;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 10px;
  background: var(--panel); border-bottom: 1px solid color-mix(in srgb, var(--accent), transparent 55%);
  box-shadow: 0 0 0 1px rgba(43,195,214,.12), 0 0 18px rgba(43,195,214,.18), 0 10px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
}
.icon-btn { width: 34px; min-width: 34px; padding: 0; display: inline-grid; place-items: center; }
.top-title {
  justify-self: center; margin: 0; font-family: "Orbitron", "Eurostile", sans-serif; font-size: .92rem;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--accent), white 10%);
  text-shadow: 0 0 10px rgba(43,195,214,.35);
}
.shell { padding-top: 56px; position: relative; z-index: 1; }

.page-title {
  position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  margin: 0; z-index: 0; pointer-events: none;
  font-family: "Orbitron", "Eurostile", "Segoe UI", sans-serif;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 4.8rem);
  color: color-mix(in srgb, var(--accent), white 8%);
  text-shadow: 0 0 12px rgba(43,195,214,.28), 0 0 28px rgba(43,195,214,.18);
  opacity: .26; user-select: none;
}

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.muted { color: var(--muted); }

@media (max-width: 860px) {
  .topbar { width: calc(100% - 16px); }
}
@media (max-width: 620px) {
  .page { padding: 6px; }
}