:root {
  --bg:#fff;
  --fg:#111;
  --muted:#6b7280;
  --card:#fff;
  --border:#e5e7eb;
  --brand:#0ea5e9;
  --primary:var(--brand);
  --primary-contrast:#fff;
}

[data-theme="dark"] {
  --bg:#0b0f14;
  --fg:#e5e7eb;
  --muted:#94a3b8;
  --card:#111827;
  --border:#1f2937;
  --brand:#38bdf8;
  --primary:var(--brand);
  --primary-contrast:#0b0f14;
}

* {
  box-sizing:border-box;
  transition:background-color .3s,color .3s,border-color .3s;
}

html,body {
  height:100%;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}

header {
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  z-index:10;
}

.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.brand img { height:28px; }

nav a, nav button.btn-link {
  margin-right:12px;
  text-decoration:none;
  color:var(--fg);
  opacity:.9;
}
nav a:hover { opacity:1; }

main {
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

.card {
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  margin:14px 0;
  background:var(--card);
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}

.btn {
  display:inline-block;
  padding:10px 14px;
  border:1px solid var(--primary);
  border-radius:10px;
  text-decoration:none;
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  font-weight:500;
  transition:.2s;
}
.btn.primary {
  background:var(--primary);
  color:var(--primary-contrast);
}
.btn:hover {
  background:var(--primary);
  color:var(--primary-contrast);
}

input,select,textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--fg);
  font-size:15px;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
th,td {
  padding:10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.row {
  display:flex;
  gap:12px;
}
.row>div {
  flex:1;
}

.alert {
  padding:12px;
  border-radius:10px;
  background:color-mix(in oklab, var(--fg) 10%, var(--bg));
}

.print-only {
  display:none;
}
@media print {
  header,nav,.no-print{display:none!important}
  .print-only{display:block}
}

/* --- Mobile Layout --- */
@media (max-width:768px){
  main{padding:10px}
  header{flex-direction:column;align-items:flex-start;gap:6px}
  nav a{display:inline-block;margin:4px 8px}
  table,thead,tbody,tr,td,th{display:block;width:100%}
  tr{margin-bottom:10px;border:1px solid var(--border);border-radius:8px;padding:8px;background:var(--card)}
  th{display:none}
  td{border:none;padding:4px 8px}
  td::before{
    content:attr(data-label);
    display:block;
    font-weight:600;
    color:var(--muted);
    margin-bottom:2px;
  }
  .row{flex-direction:column}
  .btn{width:100%;text-align:center;margin-top:6px}
}

/* --- Dark Mode Toggle (optional future use) --- */
.toggle-theme {
  cursor:pointer;
  border:none;
  background:none;
  color:var(--fg);
  font-size:20px;
}