:root {
  --bg: #08090a;
  --panel: rgba(255,255,255,.035);
  --panel-2: rgba(255,255,255,.055);
  --border: rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.05);
  --text: #f7f8f8;
  --muted: #8a8f98;
  --soft: #d0d6e0;
  --dim: #62666d;
  --accent: #7170ff;
  --accent-2: #5e6ad2;
  --blue: #60a5fa;
  --green: #10b981;
  --amber: #fbbf24;
  --pink: #f472b6;
  --danger: #f87171;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: "cv01", "ss03";
  color: var(--text);
  background:
    radial-gradient(circle at 18% -10%, rgba(113,112,255,.28), transparent 36rem),
    radial-gradient(circle at 88% 10%, rgba(16,185,129,.13), transparent 30rem),
    linear-gradient(180deg, #0d0e12 0%, var(--bg) 44%);
  min-height: 100vh;
}
body[data-page="dashboard"] { background: radial-gradient(circle at 16% -12%, rgba(113,112,255,.32), transparent 34rem), radial-gradient(circle at 88% 8%, rgba(96,165,250,.14), transparent 28rem), radial-gradient(circle at 50% 110%, rgba(16,185,129,.08), transparent 32rem), linear-gradient(180deg,#0d0e12 0%,var(--bg) 44%); }
body[data-page="weather"], body.theme-green { background: radial-gradient(circle at 18% -12%, rgba(16,185,129,.22), transparent 34rem), radial-gradient(circle at 88% 3%, rgba(96,165,250,.20), transparent 30rem), radial-gradient(circle at 56% 115%, rgba(251,191,36,.08), transparent 34rem), linear-gradient(180deg,#0b1010 0%,var(--bg) 46%); }
body[data-page="wallhaven"], body.theme-pink { background: radial-gradient(circle at 14% -12%, rgba(244,114,182,.22), transparent 34rem), radial-gradient(circle at 90% 10%, rgba(113,112,255,.22), transparent 31rem), radial-gradient(circle at 48% 118%, rgba(96,165,250,.08), transparent 36rem), linear-gradient(180deg,#100d12 0%,var(--bg) 46%); }
body[data-page="vitals"] { background: radial-gradient(circle at 18% -10%, rgba(96,165,250,.22), transparent 34rem), radial-gradient(circle at 92% 8%, rgba(16,185,129,.18), transparent 30rem), radial-gradient(circle at 52% 112%, rgba(113,112,255,.10), transparent 34rem), linear-gradient(180deg,#0a0f13 0%,var(--bg) 44%); }
a { color: inherit; }
.wrap { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 32px 0 48px; }
.wrap.wide { width: min(1180px, calc(100vw - 32px)); }
.app-shell { display:grid; grid-template-columns: 236px minmax(0, 1fr); gap:0; align-items:start; }
.content { min-width:0; }
.sidebar { position:sticky; top:0; min-height:100vh; padding:24px 18px; border-right:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); backdrop-filter:blur(18px); }
.side-brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-size:16px; font-weight:510; letter-spacing:.08em; margin-bottom:24px; text-transform:uppercase; font-family:'JetBrains Mono', ui-monospace, monospace; }
.orb.mini { width:32px; height:32px; border-radius:11px; }
.orb.mini::after { inset:7px; border-radius:7px; }
.side-nav { display:grid; gap:8px; }
.side-separator { height:1px; margin:8px 4px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }
.side-nav a { text-decoration:none; color:var(--soft); border:1px solid transparent; border-radius:12px; padding:11px 12px; background:transparent; font-size:14px; font-weight:520; transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
.side-nav a:hover { color:var(--text); background:rgba(255,255,255,.045); border-color:var(--border); transform:translateX(2px); }
body[data-page="dashboard"] .side-nav a[data-nav="dashboard"], body[data-page="vitals"] .side-nav a[data-nav="vitals"], body[data-page="weather"] .side-nav a[data-nav="weather"], body[data-page="wallhaven"] .side-nav a[data-nav="wallhaven"] { color:var(--text); background:rgba(94,106,210,.22); border-color:rgba(113,112,255,.42); box-shadow:0 12px 34px rgba(94,106,210,.12); }
.side-note { position:absolute; left:18px; right:18px; bottom:20px; color:var(--dim); font-size:11px; line-height:1.45; font-family:'JetBrains Mono', ui-monospace, monospace; }
.site-header { display:flex; justify-content:space-between; gap:22px; align-items:flex-start; margin-bottom:34px; }
.brand { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.orb { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg, var(--accent), var(--blue) 55%, var(--green)); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 18px 48px rgba(113,112,255,.25); position:relative; overflow:hidden; flex:0 0 auto; }
.orb.pink { background:linear-gradient(135deg, var(--accent), var(--blue) 48%, var(--pink)); }
.orb::after { content:""; position:absolute; inset:8px; border-radius:10px; border:1px solid rgba(255,255,255,.34); }
h1 { margin:0; font-size:clamp(30px,5vw,62px); line-height:.96; letter-spacing:-1.1px; font-weight:510; }
h1 .line-2 { display:inline-block; margin-top:6px; font-size:.78em; color:var(--soft); opacity:.72; letter-spacing:-.8px; font-weight:400; text-shadow:0 0 34px rgba(113,112,255,.18); }
h2 { margin:0; font-size:20px; letter-spacing:-.24px; font-weight:590; }
h3 { margin:0; font-size:16px; letter-spacing:-.14px; font-weight:590; }
.subtitle { margin:14px 0 0; color:var(--muted); font-size:16px; line-height:1.65; max-width:760px; }
.label { color:var(--muted); font-size:12px; font-weight:510; font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:.02em; text-transform:uppercase; }
.pillbar { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.pill, .counter-pill { border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--soft); border-radius:999px; padding:8px 11px; font-size:12px; font-weight:510; font-family:'JetBrains Mono', ui-monospace, monospace; }
.actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.button, a.button, button.button { color:var(--text); text-decoration:none; border:1px solid var(--border); border-radius:9px; padding:10px 13px; background:rgba(255,255,255,.035); font-size:13px; font-weight:510; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover { background:rgba(255,255,255,.065); border-color:rgba(113,112,255,.45); transform:translateY(-1px); }
.button.primary { background:var(--accent-2); border-color:rgba(255,255,255,.13); }
.card, .chart-card { background:var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:rgba(0,0,0,.28) 0 16px 48px, rgba(255,255,255,.03) 0 1px 0 inset; backdrop-filter:blur(16px); }
.card { padding:18px; }
.value { margin-top:12px; font-size:32px; letter-spacing:-.7px; font-weight:510; }
.hint { margin-top:7px; color:var(--dim); font-size:12px; line-height:1.45; }
.grid { display:grid; gap:14px; }
.stats, .metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }
.footer { margin-top:22px; color:var(--dim); font-size:12px; font-family:'JetBrains Mono', ui-monospace, monospace; text-align:center; }
.error { display:none; color:#fecaca; border:1px solid rgba(248,113,113,.3); background:rgba(127,29,29,.22); padding:14px; border-radius:12px; margin-bottom:14px; }
.status-dot { display:inline-block; width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 22px var(--green); margin-right:8px; }
.status-dot.warn { background:var(--amber); box-shadow:0 0 22px var(--amber); }
.status-dot.danger { background:var(--danger); box-shadow:0 0 22px var(--danger); }
.section-head { display:flex; justify-content:space-between; gap:16px; align-items:end; margin:30px 0 14px; }
.section-note { color:var(--muted); font-size:13px; line-height:1.5; margin-top:6px; }
/* Hub */
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.dashboard-card { min-height:210px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative; }
.dashboard-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 0%, rgba(113,112,255,.13), transparent 16rem); pointer-events:none; }
.dashboard-card > * { position:relative; }
.dashboard-title { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:12px; }
.dashboard-title h3 { font-size:19px; }
.dashboard-path { color:var(--green); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; }
.dashboard-description { color:var(--muted); line-height:1.6; font-size:14px; margin:0 0 16px; }
.vitals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.vital-bar { height:8px; border-radius:999px; background:rgba(255,255,255,.055); overflow:hidden; margin-top:14px; border:1px solid rgba(255,255,255,.055); }
.vital-bar span { display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--blue), var(--green)); transition:width .4s ease; }
.counter-pill { display:inline-block; margin-top:8px; }
.action-left { justify-content:flex-start; margin-top:18px; }
.service-list { display:grid; gap:10px; margin-top:14px; }
.service-row { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--border-soft); border-radius:12px; background:rgba(255,255,255,.025); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; color:var(--soft); }
.service-state { color:var(--green); }
/* Weather */
.weather-grid { grid-template-columns:repeat(4,1fr); margin:24px 0; }
.chart-card { padding:18px; min-height:390px; position:relative; overflow:hidden; }
.charts { display:grid; grid-template-columns:1.3fr .7fr; gap:14px; }
.chart-card.wide { grid-column:1 / -1; min-height:430px; }
.chart-head { display:flex; justify-content:space-between; align-items:start; gap:14px; margin-bottom:18px; }
.chart-note { margin-top:5px; color:var(--muted); font-size:13px; line-height:1.5; }
.canvas-box { height:315px; }
.wide .canvas-box { height:330px; }
/* Wallhaven */
.wall-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px; }
.wall { overflow:hidden; padding:0; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.wall:hover { transform:translateY(-2px); border-color:rgba(113,112,255,.45); background:rgba(255,255,255,.05); }
.thumb { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#111; cursor:zoom-in; }
.meta { padding:14px; }
.meta-row { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.id, .res, .modal-title { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; color:var(--soft); }
.res { color:var(--green); }
.swatches { display:flex; gap:5px; margin:12px 0; }
.swatch { width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.2); }
.links { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.links a { flex:1; text-align:center; min-width:96px; }
.empty { display:none; padding:30px; border:1px solid var(--border); border-radius:18px; background:var(--panel); color:var(--muted); line-height:1.6; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; padding:24px; z-index:10; }
.modal.open { display:flex; }
.modal-box { width:min(1200px,96vw); max-height:94vh; background:#0f1011; border:1px solid var(--border); border-radius:20px; box-shadow:0 30px 90px rgba(0,0,0,.65); overflow:hidden; }
.modal-img { display:block; width:100%; max-height:76vh; object-fit:contain; background:#050506; }
.modal-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:13px 14px; border-top:1px solid var(--border); background:rgba(255,255,255,.025); }
.modal-actions { display:flex; gap:8px; flex-wrap:wrap; }
.nav-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:72px; border-radius:16px; border:1px solid var(--border); background:rgba(15,16,17,.62); color:var(--text); font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(12px); box-shadow:0 18px 50px rgba(0,0,0,.45); transition:background .15s ease,border-color .15s ease,transform .15s ease; }
.nav-arrow:hover { background:rgba(94,106,210,.42); border-color:rgba(113,112,255,.6); transform:translateY(-50%) scale(1.03); }
.nav-prev { left:18px; }
.nav-next { right:18px; }
@media(max-width:900px){ .app-shell{display:block;} .sidebar{position:relative; min-height:0; border-right:0; border-bottom:1px solid var(--border); padding:16px;} .side-brand{margin-bottom:14px;} .side-nav{display:flex; flex-wrap:wrap;} .side-nav a{padding:9px 11px;} .side-note{display:none;} .site-header{align-items:flex-start; flex-direction:column;} .actions{justify-content:flex-start;} .stats,.metrics-grid,.weather-grid,.vitals-grid{grid-template-columns:repeat(2,1fr);} .charts{grid-template-columns:1fr;} }
@media(max-width:560px){ .wrap{width:min(100vw - 22px,1180px); padding-top:20px;} .stats,.metrics-grid,.weather-grid,.vitals-grid,.dashboard-grid,.wall-grid{grid-template-columns:1fr;} .chart-card{padding:14px;} .modal{padding:10px;} .modal-bar{align-items:flex-start; flex-direction:column;} .section-head{align-items:start; flex-direction:column;} }

/* SPA-ish partial navigation polish */
.content { transition: opacity .22s ease, transform .22s ease, filter .22s ease; }
.content.page-leave, body.is-navigating .content { opacity:.12; transform:translateY(8px) scale(.992); filter:blur(8px); pointer-events:none; }
.content.page-enter { opacity:0; transform:translateY(10px) scale(.992); filter:blur(8px); }
@media (prefers-reduced-motion: reduce) { .content, .button, .side-nav a { transition:none !important; transform:none !important; filter:none !important; } }
/* Weather weekly forecast */
.weekly-forecast { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.forecast-day { min-height:166px; position:relative; overflow:hidden; }
.forecast-day::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 0%, rgba(96,165,250,.12), transparent 10rem); pointer-events:none; }
.forecast-day > * { position:relative; }
.forecast-date { color:var(--soft); font-size:13px; font-weight:590; }
.forecast-icon { font-size:28px; margin:12px 0 4px; }
.forecast-temps { display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.forecast-high { font-size:24px; letter-spacing:-.5px; }
.forecast-low { color:var(--muted); font-size:15px; }
.forecast-rain { color:var(--blue); font-family:'JetBrains Mono', ui-monospace, monospace; font-size:12px; margin-top:10px; }
@media(max-width:1180px){ .weekly-forecast{grid-template-columns:repeat(4, minmax(0, 1fr));} }
@media(max-width:700px){ .weekly-forecast{grid-template-columns:repeat(2, minmax(0, 1fr));} }