:root{
  --ink:#1a1a1a;
  --ink-soft:#2d3748;
  --bg: #f7fbff;
  --brand:#1e88e5;
  --brand-dark:#1565c0;
  --accent:#f59e0b;
  --mint:#10b981;
  --lilac:#8b5cf6;
  --card:#ffffff;
  --ring:rgba(30,136,229,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.1);
  --border:#e0e7ff;
}

/* Automatic dark theme using prefers-color-scheme */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1726;
    --card:#101c2d;
    --ink:#e6f4ff;
    --ink-soft:#b5d7ff;
    --ring:rgba(255,255,255,.25);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --border:#2d3748;
  }
}

/* Manual dark theme override */
:root[data-theme="dark"]{
  --bg:#0e1726;
  --card:#101c2d;
  --ink:#e6f4ff;
  --ink-soft:#b5d7ff;
  --ring:rgba(255,255,255,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --border:#2d3748;
}

/* Global */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60rem 60rem at -10% -10%, #fff 0%, #e6f4ff 35%, transparent 36%) no-repeat,
    radial-gradient(50rem 50rem at 110% -20%, #fff 0%, #e0ffe5 40%, transparent 41%) no-repeat,
    linear-gradient(180deg, #ffffff 0%, #f7fbff 40%, #f0fbff 100%);
  min-height:100dvh;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1, h2, h3, h4, h5, h6{ color: #1a1a1a !important; font-weight: 900; }
#viewTitle{ color: #94a3b8 !important; }

/* Header / Hero */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background: color-mix(in srgb, var(--bg) 70%, white 30%);
  border-bottom:1px solid #e8f2ff22;
}
.nav{
  max-width:1100px; margin:auto; padding:12px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
@media (max-width: 768px){
  .nav{ gap:8px; padding:10px 12px; }
  .nav a{ padding:6px 10px; font-size:0.9rem; }
  .brand span{ font-size:1rem; }
  .brand img{ height:36px; }
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.3px;
  color:var(--ink);
}
.brand img{height:42px; width:auto; filter: drop-shadow(0 2px 6px var(--ring));}
.brand span{ font-family:'Quicksand', sans-serif; font-size:1.15rem}
.spacer{flex:1}
.nav a{
  padding:8px 12px; border-radius:10px; font-weight:700; color:var(--ink-soft)
}
.nav a:hover{ background: #10b981; color:#ffffff }
.theme-toggle{
  border:none; background:var(--card); color:var(--ink);
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:700;
  border:1px solid #e7f2ff88; box-shadow:var(--shadow);
}
.theme-toggle:hover{ background:var(--mint); color:#ffffff }
.theme-toggle:active{ transform:translateY(1px) }

.hero{
  max-width:1100px; margin: clamp(12px,3vw,30px) auto 0; padding: 28px 18px 10px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr } }
@media (max-width: 768px){
  .hero{ padding:20px 12px 10px; }
  .hero-card{ padding:20px; }
  .polaroid{ display:none; }
}

.hero-card{
  background: var(--card);
  border-radius:22px; padding:28px; box-shadow:var(--shadow);
  border:1px solid #e7f2ff88;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  background: #8b5cf6; color:#ffffff; font-weight:900;
  padding:6px 12px; border-radius:999px; letter-spacing:.3px
}
.title{
  font-size: clamp(2rem, 3.4vw, 3rem); line-height:1.08; margin:12px 0 10px; font-weight:900; color: #64748b !important;
}
.subtitle{ color:var(--ink-soft); font-weight:700 }

.hero-badge{
  display:flex; gap:10px; margin-top:16px; flex-wrap:wrap
}
.chip{
  background: #dbeafe; color:#1e3a8a; padding:8px 12px; border-radius:999px; font-weight:800
}

.polaroid{
  position:relative; background: var(--card); border-radius:16px; padding:16px;
  transform: rotate(2.5deg); box-shadow:var(--shadow);
  border:1px solid #e7f2ff88;
  overflow:hidden;
}
.polaroid::after{
  content:'Adventure vibes ✨';
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background:#fff; color:#2d2d2d; font-weight:800;
  padding:6px 10px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.05)
}

/* Section layout */
section{
  max-width:1100px; margin: 0 auto; padding: 40px 18px 10px;
}
.wave{
  display:block; margin: 40px 0 0; width:100%; height:48px;
}

.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:12px;
}
@media (max-width: 950px){ .cards{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr } }
@media (max-width: 768px){
  .card{ padding:16px; }
}

.card{
  background: var(--card); border:1px solid #e7f2ff88;
  border-radius:18px; padding:20px; box-shadow:var(--shadow)
}
.card h3{ margin:6px 0 8px }
.card p{ margin:0; color:var(--ink-soft); font-weight:700 }

.tag{ display:inline-block; background:#f59e0b; color:#ffffff; padding:6px 10px; border-radius:999px; font-weight:900; margin:6px 0 }

.strava-feed{ margin-top: 40px; text-align: center; }
.strava-feed h3{ margin-bottom: 20px; }
.strava-feed iframe{ margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow); }
@media (max-width: 768px){
  .strava-feed iframe{ width:100% !important; height:auto; }
}

/* Notes page */
.notes-sidebar{ background: var(--card); padding: 20px; border-radius: 18px; box-shadow: var(--shadow); }
.notes-main{ background: var(--card); padding: 30px; border-radius: 18px; box-shadow: var(--shadow); }
.note-item{ padding: 12px; border-radius: 10px; cursor: pointer; margin-bottom: 8px; border: 1px solid #e7f2ff88; }
.note-item:hover{ background: #dbeafe; }
.note-item.active{ background: var(--brand); color: white; }
.note-item.active div{ color: white !important; }
.btn-primary{ background: var(--brand); color: white; border: none; padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; width: 100%; }
.btn-primary:hover{ background: var(--brand-dark); }
.btn-secondary{ background: var(--card); color: var(--ink); border: 2px solid var(--border); padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.btn-secondary:hover{ background: var(--mint); color: #ffffff; }
.btn-danger{ background: #ff4444; color: white; border: none; padding: 10px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.btn-danger:hover{ background: #cc0000; }
.markdown-content{ line-height: 1.6; color: var(--ink); }
.markdown-content h1, .markdown-content h2, .markdown-content h3{ margin-top: 1.5em; color: var(--ink) !important; }
.markdown-content p{ color: var(--ink); }
.markdown-content code{ background: var(--ink-soft); color: var(--bg); padding: 2px 6px; border-radius: 4px; }
.markdown-content pre{ background: var(--ink-soft); color: var(--bg); padding: 12px; border-radius: 8px; overflow-x: auto; }
.markdown-content pre code{ background: transparent; }
.markdown-content ul, .markdown-content ol{ padding-left: 20px; }
.markdown-content li{ color: var(--ink); }
.markdown-content a{ color: var(--brand); }
.markdown-content blockquote{ border-left: 4px solid var(--brand); padding-left: 16px; color: var(--ink-soft); }

/* Footer & floating */
footer{
  text-align:center; padding:28px 18px 60px; color:var(--ink-soft)
}
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:20;
  border:none; background: linear-gradient(180deg, var(--brand), var(--brand-dark));
  color:#fff; padding:12px 14px; border-radius:14px; box-shadow:var(--shadow); cursor:pointer; font-weight:900;
  display:none; transition: opacity 0.3s ease;
}
.to-top:hover{ opacity: 0.9 }
.to-top:active{ transform: translateY(1px) }

/* Fun micro-anim */
@keyframes floaty{ from{ transform:translateY(0) } 50%{ transform:translateY(-6px)} to{ transform:translateY(0)} }
.floaty{ animation: floaty 6s ease-in-out infinite }

/* Mobile responsive layouts */
@media (max-width: 768px){
  section{ padding:30px 12px 10px; }
  .notes-sidebar, .notes-main{ padding:16px; }
  input, textarea, select{ font-size:16px !important; }
}

/* Gym/Health/Notes mobile layouts */
.app-layout{ display:grid; grid-template-columns:300px 1fr; gap:20px; margin-top:30px; }
@media (max-width: 900px){
  .app-layout{ grid-template-columns:1fr; }
  .app-layout aside{ order:2; }
  .app-layout main{ order:1; }
}

/* Gym workout form mobile */
@media (max-width: 768px){
  #strengthFields, #cardioFields{ grid-template-columns:1fr !important; }
}

.health-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin:30px 0; }
@media (max-width: 768px){
  .health-stats{ grid-template-columns:1fr; gap:15px; }
}

.health-charts{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:30px 0; }
@media (max-width: 900px){
  .health-charts{ grid-template-columns:1fr; }
}