/* Light-blue theme (easy on eyes) */
:root{
  --bg:#eaf3ff;
  --panel:#f7fbff;
  --panel-2:#eef6ff;
  --text:#0b1f3a;
  --muted:#35557d;
  --border:#b8cff0;
  --border-2:#94b4e6;
  --accent:#0f3d8c;       /* dark blue */
  --accent-2:#1d5db8;     /* lighter blue */
  --link:#0f3d8c;
  --success:#146c43;
  --success-bg:#e7f6ee;
  --success-border:#9cd7b8;
  --danger:#b42318;
  --danger-bg:#ffe8ea;
  --danger-border:#ffb3bb;
  --warn:#8a5a00;
  --warn-bg:#fff4db;
  --warn-border:#ffd18a;
  --info:#0b4ea2;
  --info-bg:#e7f0ff;
  --info-border:#a9c4ff;
}

body{
  font-family:Segoe UI,Arial,sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{display:flex;min-height:100vh}

.side{
  width:300px;
  background:var(--panel-2);
  padding:16px;
  box-sizing:border-box;
  border-right:1px solid var(--border);
}

.main{flex:1;padding:18px;box-sizing:border-box}
.brand{font-weight:800;margin-bottom:8px}
.muted{color:var(--muted)}

.nav a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  margin:6px 0;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.nav a.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.nav a:hover{
  background:rgba(15,61,140,.08);
  border-color:var(--border-2);
  text-decoration:none;
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

.tbl{
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.tbl th,.tbl td{
  border-bottom:1px solid var(--border);
  padding:8px 10px;
  vertical-align:top;
}
.tbl th{
  background:var(--accent);
  color:#fff;
  text-align:left;
}

.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(15,61,140,.10);
  border:1px solid var(--border-2);
  color:var(--text);
  white-space:nowrap;
}

.row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;align-items:center}

.btn{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
}
.btn:hover{text-decoration:none;filter:brightness(0.98)}

.btn.secondary{
  background:var(--panel-2);
  color:var(--accent);
  border-color:var(--border-2);
}

.btn.danger{
  background:var(--danger);
  color:#fff;
  border-color:var(--danger);
}

.btn.ghost{
  background:transparent;
  color:var(--accent);
  border-color:var(--border);
}

.btn.small{
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
}

.alert{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  margin:10px 0;
}
.alert.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.alert.error{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.alert.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info)}

input,select,textarea{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border-2);
  color:var(--text);
  background:#fff;
}
textarea{min-height:90px}

code{
  background:rgba(29,93,184,.10);
  border:1px solid var(--border);
  padding:1px 6px;
  border-radius:8px;
  color:var(--text);
}

.split{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:1100px){ .split{grid-template-columns:1fr 1fr;} }