/* ===== Bumil Dashboard — shared theme + navbar ===== */
:root{
  --bg:#fdf6f4; --bg2:#ffffff; --text:#2b2330; --muted:#6b5b66;
  --border:#f0dde3; --pink:#e8547c; --pink-dk:#c23b62; --pink-soft:#fce8ee;
  --lav:#8b7ed8; --lav-soft:#eeeafc; --teal:#2f9e8f; --teal-soft:#e3f6f2;
  --amber:#c98a1c; --amber-soft:#fdf1de; --red:#d3455b; --red-soft:#fbe6ea;
  --green:#2f9e5f; --green-soft:#e5f7ec; --shadow: 0 4px 18px rgba(197,80,120,.10);
  --card-radius:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1c1520; --bg2:#241a29; --text:#f2e9ee; --muted:#c4aebb;
  --border:#3a2a37; --pink:#f28aa8; --pink-dk:#f8b4c8; --pink-soft:#3a2230;
  --lav:#b3a6f0; --lav-soft:#2c2740; --teal:#5fd0bd; --teal-soft:#173330;
  --amber:#f0b95b; --amber-soft:#3a2c14; --red:#f28293; --red-soft:#3d1f27;
  --green:#7fdba0; --green-soft:#173a26; --shadow: 0 4px 18px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1520; --bg2:#241a29; --text:#f2e9ee; --muted:#c4aebb;
    --border:#3a2a37; --pink:#f28aa8; --pink-dk:#f8b4c8; --pink-soft:#3a2230;
    --lav:#b3a6f0; --lav-soft:#2c2740; --teal:#5fd0bd; --teal-soft:#173330;
    --amber:#f0b95b; --amber-soft:#3a2c14; --red:#f28293; --red-soft:#3d1f27;
    --green:#7fdba0; --green-soft:#173a26; --shadow: 0 4px 18px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.55; margin:0; padding:0 0 60px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
.wrap{max-width:920px; margin:0 auto; padding:0 18px;}

/* ===== Top navbar (site-wide menu) ===== */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--bg2); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
}
.site-nav .nav-inner{
  max-width:920px; margin:0 auto; padding:10px 18px;
  display:flex; align-items:center; gap:14px;
}
.site-nav .brand{
  font-weight:800; font-size:1rem; text-decoration:none; color:var(--pink-dk);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.site-nav .links{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-left:auto;
}
.site-nav .links::-webkit-scrollbar{display:none;}
.site-nav .links a{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
  text-decoration:none; color:var(--muted); border:1px solid transparent; white-space:nowrap;
}
.site-nav .links a:hover{color:var(--pink-dk); border-color:var(--pink);}
.site-nav .links a.active{
  background:var(--pink-soft); color:var(--pink-dk); border-color:var(--pink);
}
#themeToggle{
  flex:0 0 auto; border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:10px; width:34px; height:34px; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
#themeToggle:hover{border-color:var(--pink);}

/* ===== Shared components ===== */
.card{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--card-radius);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;
}
header.hero{
  background:linear-gradient(135deg,var(--pink) 0%, var(--lav) 100%);
  color:#fff; padding:34px 18px 40px; text-align:center;
  border-radius:0 0 32px 32px; position:relative;
}
header.hero h1{margin:0 0 6px; font-size:clamp(1.4rem,4.5vw,2rem); font-weight:800;}
header.hero p{margin:0 auto; opacity:.95; font-size:.95rem; max-width:560px;}
footer{text-align:center; color:var(--muted); font-size:.78rem; padding:30px 18px 0;}