:root{
  --bg:#0b1324; --panel:#101a33; --text:#eaf0fb; --muted:#a7b4cc;
  --accent:#6cc4ff; --accent-2:#a78bfa; --success:#22c55e;
  --warning:#f59e0b; --error:#ef4444; --radius:14px; --gap:12px;
  --shadow:0 6px 24px rgba(0,0,0,.18);
}

/* Light mode token overrides if you add a light theme later */
@media (prefers-color-scheme: light){
  :root{ --bg:#3c8cff; --panel:#ffffff; --text:#0b1324; --muted:#44506b; --shadow:0 4px 18px rgba(0,0,0,.08); }
}

/* Tell the browser which control palette to use so native dropdowns render readable */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

.topbar{position:sticky;top:0;background:rgba(68, 120, 253, 0.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid rgba(68, 120, 253, 0.9);z-index:10}
.topbar .container{display:flex;align-items:center;gap:16px;padding:10px 16px}
.brand{font-weight:700;letter-spacing:.3px;text-decoration:none;color:var(--text)}

.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.nav a{display:inline-block;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--text);opacity:.9}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.08);opacity:1}

.content{display:grid;gap:20px;padding:20px 0}
.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}

.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px;align-items:center}

/* Inputs - unify height & alignment */
.input,.select{
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  vertical-align:middle;
}

/* Select: readable dropdown + arrow, cross-browser safe */
.select{
  appearance:none;
  line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a7b4cc' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:36px;
}

/* Many browsers honor these; if not, color-scheme dark above takes over */
.select option{ color:var(--text); background:var(--panel); }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text);cursor:pointer}
.btn.small{padding:6px 10px;border-radius:10px;font-size:.9rem}
.btn.ghost{opacity:.85}
.btn:hover{background:rgba(255,255,255,.08)}

/* Tables */
.table-scroll{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0 6px;min-width:760px}
.table thead th{text-align:left;font-weight:700;padding:8px 10px;position:sticky;top:0;background:var(--panel)}
.table tbody td{padding:8px 10px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}

.muted{color:var(--muted)}
.success{color:var(--success)}
.error{color:var(--error)}

.footer{padding:28px 0;opacity:.8}

/* === External link styling (high-contrast on dark) === */
:root{
  /* tweak these two to taste */
  --link-external: #22c55e;   /* warm amber (accessible on #0b1324) */
  --link-external-hover: #f59e0b;
}

/* Only affects links with .external (added by app.js for off-site links) */
a.external{
  color: var(--link-external) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  font-weight: 600;
}
a.external:hover{
  color: var(--link-external-hover) !important;
  text-decoration-thickness: 2px;
  opacity: 1;
}
a.external::after{
  content: "↗";
  margin-left: .25em;
  font-size: .9em;
  opacity: .9;
}

/* Don’t decorate nav/menu buttons */
.topbar .nav a.external::after,
.btn.external::after{ content: none; }