/* ===== Theme: Professional Light Blue ===== */
:root{
  --bg: #eaf2ff;          /* light blue page background */
  --sidebar: #f3f7ff;     /* light blue sidebar */
  --panel: #ffffff;       /* white cards */
  --text: #0f172a;        /* slate-900 */
  --muted:#475569;        /* slate-600 */
  --accent:#3b82f6;       /* blue-500 */
  --accent-700:#1d4ed8;   /* blue-700 */
  --accent-200:#bfdbfe;   /* blue-200 */
  --border: rgba(15,23,42,.08);
  --shadow: 0 14px 30px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);           /* ← solid light blue (not white) */
  color:var(--text);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* ===== Layout ===== */
.layout{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height:100vh;
}

/* ===== Sidebar ===== */
aside{
  position:sticky; top:0; height:100vh;
  background: var(--sidebar);      /* light blue too */
  border-right:1px solid var(--border);
  padding:26px 18px;
}

.brand h2{ margin:0 0 4px; font-size:22px; color:var(--accent-700) }
.brand .nim{ margin:0 0 16px; font-size:14px; color:var(--muted) }

nav{ display:flex; flex-direction:column; gap:14px; margin-top:8px }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:18px;
  color:var(--text); text-decoration:none;
  border:1px solid transparent; background:#fff;
  box-shadow: 0 4px 14px rgba(2,6,23,.04);
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.nav-item:hover{
  transform: translateY(-1px);
  border-color: var(--accent-200);
  box-shadow: 0 10px 24px rgba(29,78,216,.12);
}
.nav-item.active{
  background: linear-gradient(180deg,var(--accent) 0%, var(--accent-700) 100%);
  color:#fff; font-weight:650;
  box-shadow: 0 16px 36px rgba(29,78,216,.28);
}
.icon{ width:22px; height:22px; display:inline-grid; place-items:center }

/* optional left spine */
.pill{ width:6px; height:26px; border-radius:6px; background: var(--accent-200) }

/* ===== Main ===== */
main{ padding:34px 40px }

.header{
  margin:0 0 18px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.header h1{
  margin:0 0 6px;
  font-size: clamp(34px, 5.4vw, 64px);
  color: var(--accent-700);
}
.header p{ margin:0; color:var(--muted); font-weight:600 }

.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow: var(--shadow);
}

figure{ margin:0 0 16px }
img{ width:100%; display:block; border-radius:16px; border:1px solid var(--border) }

/* utilities */
.center{ text-align:center }
.m-40{ margin:40px 0 }

/* subtle scrollbar */
*::-webkit-scrollbar{ width:10px }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,var(--accent-200), var(--accent));
  border-radius:20px;
}