:root{
  --page-bg:#14161A;
  --card-surface:#000000;
  --heading:#FFFFFF;
  --body:#E8EAED;
  --body-muted:#9AA0A8;
  --body-faint:#6B7280;
  --accent:#2563EB;
  --accent-hover:#FE7F2D;
  --accent-light:rgba(37,99,235,0.12);
  --accent-glow:0 4px 20px rgba(37,99,235,0.35);
  --footer-bg:#0F1115;
  --footer-text:#9AA0A8;
  --success:#34D399;
  --danger:#F87171;

  --bg:var(--card-surface);
  --bg-alt:var(--card-surface);
  --text:var(--body);
  --text-muted:var(--body-muted);
  --text-faint:var(--body-faint);
  --border:#2A2D33;

  --shadow-sm:0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:0 8px 36px rgba(0,0,0,0.45);

  --radius:12px;
  --radius-lg:16px;

  --font-display:'DM Sans', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'DM Mono', 'SF Mono', Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-top:64px;
}
::selection{background:var(--accent-light); color:var(--heading);}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent); opacity:0.8;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* ====== SPA PAGES ====== */
.page{display:none;}
.page.active{display:block; animation:fadePage 0.25s ease;}
@keyframes fadePage{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}
.section-wrap{max-width:920px; margin:0 auto; padding:20px 20px 80px;}
.section-alt{background:var(--bg-alt); border-radius:var(--radius-lg); padding:36px 28px; margin:28px 0; box-shadow:var(--shadow-sm);}

/* ====== NAVIGATION ====== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:2000;
  background:rgba(0,0,0,0.92); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  font-family:var(--font-body); font-size:14px; font-weight:500;
}
.nav-inner{
  max-width:960px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.nav-brand{
  font-family:var(--font-display); font-size:24px; font-weight:600;
  color:var(--heading); text-decoration:none; display:flex; align-items:center; gap:8px;
}
.nav-brand .brand-symbol{color:var(--accent); font-size:26px;}
.nav-brand:hover{color:var(--accent);}
.nav-links{display:flex; gap:2px;}
.nav-links a{
  color:var(--body-muted); text-decoration:none; padding:8px 14px;
  border-radius:8px; transition:all 0.15s ease; font-size:14px;
}
.nav-links a:hover{color:var(--heading); background:rgba(255,255,255,0.06);}
.nav-links a.active{color:var(--accent); background:var(--accent-light); font-weight:600;}
.nav-toggle{display:none; background:none; border:none; color:var(--heading); font-size:26px; cursor:pointer; padding:4px 8px; border-radius:8px;}

@media (max-width:560px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute; top:64px; left:0; right:0;
    background:rgba(0,0,0,0.96);
    flex-direction:column; padding:8px 16px 16px;
    border-bottom:1px solid var(--border);
    display:none; box-shadow:var(--shadow-md);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 16px;}
}

/* ====== HERO ====== */
.hero{
  text-align:center; padding:64px 20px 48px;
  max-width:680px; margin:0 auto;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px; font-weight:600;
}
.hero-eyebrow::before, .hero-eyebrow::after{content:'—'; opacity:0.35; margin:0 10px;}
.hero-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(40px,8vw,64px);
  letter-spacing:-0.02em; margin:0 0 14px; line-height:1.06; color:var(--heading);
}
.hero-title em{font-style:italic; color:var(--accent);}
.hero-sub{
  color:var(--body); font-size:clamp(17px,2.2vw,21px);
  max-width:540px; margin:0 auto 28px; line-height:1.7;
}
.hero-cta .btn{font-size:17px; padding:15px 36px; border-radius:var(--radius);}

/* ====== FEATURE GRID ====== */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:0 0 48px;
}
@media (max-width:640px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{
  background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 22px;
  box-shadow:var(--shadow-sm); transition:box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.feature-icon{font-size:28px; margin-bottom:10px; display:block;}
.feature-card h3{font-family:var(--font-display); font-size:17px; font-weight:600; margin:0 0 8px; color:var(--heading);}
.feature-card p{font-size:15px; color:var(--body); margin:0; line-height:1.7;}

/* ====== HOW IT WORKS ====== */
.how-section{margin-bottom:36px;}
.how-section h2{
  font-family:var(--font-display); font-size:26px; font-weight:600;
  text-align:center; margin:0 0 28px; color:var(--heading);
}
.steps{display:flex; flex-direction:column; gap:16px; max-width:520px; margin:0 auto;}
.step{display:flex; align-items:flex-start; gap:16px;}
.step-num{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--heading);
  background:var(--accent); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.step div{display:flex; flex-direction:column; gap:2px;}
.step strong{font-size:16px; color:var(--heading);}
.step span{font-size:15px; color:var(--body); line-height:1.6;}

/* ====== PAGE TITLES ====== */
.page-title{
  font-family:var(--font-display); font-size:clamp(28px,5vw,40px); font-weight:600;
  text-align:center; margin:0 0 6px; color:var(--heading);
}
.page-sub{text-align:center; color:var(--text-muted); font-size:15px; margin:0 0 36px;}

/* ====== ABOUT ====== */
.about-card{
  background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.about-card h2{
  font-family:var(--font-display); font-size:20px; font-weight:600; margin:0 0 12px; color:var(--heading);
}
.about-card p{font-size:15.5px; color:var(--body); margin:0 0 12px; line-height:1.75;}
.about-card p:last-child{margin-bottom:0;}
.about-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:560px){.about-grid{grid-template-columns:1fr;}}
.about-item{
  background:var(--bg-alt); border-radius:10px; padding:16px;
}
.about-item strong{display:block; font-size:14px; margin-bottom:6px; color:var(--heading);}
.about-item span{font-size:14.5px; color:var(--body); line-height:1.65;}
.about-list{list-style:none; padding:0; margin:0;}
.about-list li{
  padding:6px 0 6px 20px; position:relative; font-size:15px; color:var(--body); line-height:1.7;
}
.about-list li::before{content:'•'; color:var(--accent); position:absolute; left:4px;}

/* ====== CONTACT ====== */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px;}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; text-align:center; box-shadow:var(--shadow-sm);
}
.contact-icon{font-size:30px; margin-bottom:8px; display:block;}
.contact-card h3{font-family:var(--font-display); font-size:16px; font-weight:600; margin:0 0 8px; color:var(--heading);}
.contact-card p{font-size:14.5px; color:var(--body); margin:0; line-height:1.6;}
.contact-card a{word-break:break-all;}
.contact-form-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; max-width:580px; margin:0 auto; box-shadow:var(--shadow-sm);
}
.contact-form-card h3{font-family:var(--font-display); font-size:18px; font-weight:600; margin:0 0 16px; color:var(--heading);}
.form-row{display:flex; gap:14px; margin-bottom:14px;}
@media (max-width:480px){.form-row{flex-direction:column;}}
.form-row .field{margin-bottom:0;}
.contact-form-card .field{margin-bottom:14px;}
.contact-form-card label{font-size:13px; color:var(--body-muted); margin-bottom:4px; display:block;}
.contact-form-card input,
.contact-form-card textarea{
  background:#1A1D23; border:1px solid var(--border); color:var(--heading);
  padding:13px 15px; border-radius:var(--radius); font-family:var(--font-body); font-size:16px;
  width:100%; outline:none; transition:border-color 0.15s;
  resize:vertical;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);}
.form-status{
  margin-top:12px; font-size:13px; color:var(--success); display:none;
  align-items:center; gap:8px;
}
.form-status.show{display:flex;}

/* ====== FOOTER ====== */
.site-footer{
  background:var(--footer-bg); margin-top:40px;
  font-size:12.5px; color:var(--footer-text);
}
.footer-inner{
  max-width:960px; margin:0 auto; padding:32px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.footer-brand{font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--footer-text); opacity:0.7;}
.footer-links{display:flex; gap:16px;}
.footer-links a{color:var(--footer-text); text-decoration:none; opacity:0.6;}
.footer-links a:hover{opacity:1; color:var(--accent);}
.footer-copy{width:100%; text-align:center; font-size:11.5px; color:var(--footer-text); opacity:0.5; margin-top:4px;}
@media (max-width:480px){.footer-inner{flex-direction:column; text-align:center;}}

/* ====== TOOL LAYOUT ====== */
.wrap{max-width:920px; margin:0 auto; padding:20px 20px 80px;}

/* ---------- Icons ---------- */
.icon{width:15px; height:15px; flex-shrink:0; display:inline-block; vertical-align:-3px; color:var(--accent);}
.icon-lg{width:20px; height:20px;}
label{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--body-muted); font-weight:500;}
.btn .icon{color:currentColor;}
.module-title{display:flex; align-items:center; gap:10px;}
.module-title .icon{width:19px; height:19px;}

/* ---------- Chart card ---------- */
.chart-card{
  margin:0 0 28px; padding:22px 22px 16px; border-radius:var(--radius-lg);
  background:var(--bg);
  border:1px solid var(--border);
  border-top:3px solid var(--accent);
  box-shadow:var(--shadow-md);
}
.chart-card .chart-label{
  font-family:var(--font-mono); font-size:11px; color:var(--body-muted);
  text-transform:uppercase; letter-spacing:0.12em; display:flex; justify-content:space-between; margin-bottom:2px;
}
.chart-card .chart-sub{
  font-size:14px; color:var(--body-muted); margin-bottom:10px; line-height:1.5;
}
.chart-card svg{display:block; width:100%; height:auto;}
.chart-legend{display:flex; gap:18px; flex-wrap:wrap; padding:8px 4px 2px; font-family:var(--font-mono); font-size:12px; color:var(--body-muted);}
.chart-legend span{display:inline-flex; align-items:center; gap:6px;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.chart-insight{
  margin:10px 0 2px; padding:12px 14px; border-radius:8px;
  background:rgba(37,99,235,0.08); font-size:14px; color:var(--body); line-height:1.6; display:none;
}
.chart-insight.show{display:block;}
.chart-insight strong{font-weight:600;}
.chart-insight .tag{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--accent); margin-right:8px; font-weight:600;
}

/* ---------- Module cards ---------- */
.modules{display:flex; flex-direction:column; gap:16px;}
.module{
  background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 22px 24px;
  box-shadow:var(--shadow-sm); transition:box-shadow 0.2s, border-color 0.2s;
}
.module:focus-within{box-shadow:var(--shadow-md); border-color:var(--accent);}
.module-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.module-num{
  font-family:var(--font-mono); font-size:11px; color:var(--bg); background:var(--accent);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0;
}
.module-title{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0; color:var(--heading);}
.module-desc{font-size:15px; color:var(--body); margin:-10px 0 16px 32px; line-height:1.6;}

.row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.field{flex:1; min-width:150px; display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field-label-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.field-label-row label{margin:0;}

/* ---------- Inputs ---------- */
input, select{
  background:#1A1D23; border:1px solid var(--border); color:var(--heading);
  padding:13px 15px; border-radius:var(--radius); font-family:var(--font-body); font-size:16px;
  width:100%; outline:none; transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);}
input[type="number"]{font-family:var(--font-mono);}
select{cursor:pointer;}
.hint{font-size:14px; color:var(--body-faint); margin-top:2px;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:15px; border:none; border-radius:var(--radius);
  padding:12px 22px; cursor:pointer; transition:all 0.15s ease;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn:active{transform:scale(0.97);}
.btn-primary{
  background:var(--accent); color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,0.30);
}
.btn-primary:hover{
  background:var(--accent-hover);
  box-shadow:0 4px 14px rgba(254,127,45,0.35);
  transform:translateY(-2px);
}
.btn-ghost{background:transparent; color:var(--heading); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-light);}
.btn:disabled{opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.btn-full{width:100%; justify-content:center; padding:15px; font-size:16px;}
.btn-lg{padding:14px 30px; font-size:17px;}

/* ---------- Info popover ---------- */
.info-btn{
  width:19px; height:19px; border-radius:50%; border:1px solid var(--border); background:var(--bg);
  color:var(--text-faint); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  flex-shrink:0; transition:all 0.15s ease;
}
.info-btn .icon{width:12px; height:12px; color:inherit; margin:0;}
.info-btn:hover, .info-btn[aria-expanded="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-light);}
.info-popover{
  position:absolute; z-index:1000; max-width:300px; background:#1A1D23;
  border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;
  box-shadow:var(--shadow-lg); font-size:14px; line-height:1.6; color:var(--body);
  animation:pop-in 0.14s ease;
}
@keyframes pop-in{from{opacity:0; transform:translateY(-4px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.info-popover.flip{animation:pop-in-flip 0.14s ease;}
@keyframes pop-in-flip{from{opacity:0; transform:translateY(4px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.ip-title{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--accent); margin-bottom:6px;}
.ip-text b{font-weight:600;}

/* ---------- Segmented control ---------- */
.segmented{
  display:flex; gap:4px; background:#1A1D23; border:1px solid var(--border);
  border-radius:var(--radius); padding:4px; flex-wrap:wrap;
}
.seg-btn{
  flex:1; min-width:110px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px; border-radius:9px; cursor:pointer; user-select:none; position:relative;
  font-size:14px; font-weight:600; color:var(--body-muted); transition:all 0.16s ease;
}
.seg-btn input{position:absolute; opacity:0; width:0; height:0; pointer-events:none;}
.seg-btn .icon{color:var(--body-faint); transition:color 0.16s ease;}
.seg-btn:hover{color:var(--heading); background:rgba(255,255,255,0.05);}
.seg-btn.active{background:var(--accent); color:#fff;}
.seg-btn.active .icon{color:#fff;}
@media (max-width:560px){.seg-btn{min-width:100%;}}

/* ---------- Compass ---------- */
.compass-wrap{
  display:flex; align-items:center; gap:20px; background:#1A1D23; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px; flex-wrap:wrap;
}
.compass-svg{width:150px; height:150px; cursor:grab; touch-action:none; flex-shrink:0;}
.compass-svg:active{cursor:grabbing;}
.compass-svg.static{cursor:default;}
.compass-ring{fill:rgba(255,255,255,0.03); stroke:var(--border); stroke-width:1.5;}
.compass-ring-inner{fill:none; stroke:var(--border); stroke-width:1;}
.compass-tick{stroke:var(--body-faint); stroke-width:1;}
.compass-tick.major{stroke:var(--body-muted); stroke-width:1.5;}
.compass-label{font-family:var(--font-mono); font-size:11px; fill:var(--body-muted); user-select:none;}
.compass-label.major{fill:var(--accent); font-weight:600; font-size:13px;}
.needle-north{fill:var(--accent);}
.needle-south{fill:#1A1D23; stroke:var(--border); stroke-width:0.5;}
.compass-center{fill:var(--accent);}
.compass-readout{display:flex; flex-direction:column; gap:2px;}
.compass-readout .deg{font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--accent);}
.compass-readout .name{font-size:14px; color:var(--body-muted);}
.compass-readout .drag-hint{font-size:13px; color:var(--body-faint); margin-top:6px; max-width:180px;}

/* ---------- Sun compass (live heading vs sun) ---------- */
.sun-compass-row{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:#1A1D23; border-radius:var(--radius); padding:16px 20px; border:1px solid var(--border);
}
.sun-compass-row .compass-svg{width:140px; height:140px;}
.sun-compass-info{display:flex; flex-direction:column; gap:8px; min-width:180px;}
.sun-info-row{display:flex; justify-content:space-between; gap:12px; align-items:center;}
.sun-info-label{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--body-faint); white-space:nowrap;}
.sun-info-value{font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--heading); text-align:right;}
.sun-compass-hint{
  margin-top:12px; padding:12px 14px; border-radius:8px;
  background:rgba(37,99,235,0.08); font-size:14px; color:var(--body); line-height:1.6;
  display:none; align-items:flex-start; gap:10px; flex-wrap:wrap;
}
.sun-compass-hint .icon{width:18px; height:18px; flex-shrink:0; margin-top:2px;}

/* ---------- Location status ---------- */
.loc-status{
  font-family:var(--font-mono); font-size:13px; color:var(--success); margin-top:8px; display:none;
  padding:8px 10px; background:rgba(52,211,153,0.08); border-radius:8px;
  align-items:center; gap:8px;
}
.loc-status.show{display:flex;}
.loc-status.error{color:var(--danger); background:rgba(248,113,113,0.08);}
.conditional{display:none;}
.conditional.show{display:flex;}

/* ---------- Inputs ---------- */
#results{display:none;}
#results.show{display:block; animation:fadein 0.4s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
.divider{
  display:flex; align-items:center; gap:14px; margin:40px 0 24px; color:var(--body-muted);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--border);}
.readout-panel{
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 26px; margin-bottom:20px;
  box-shadow:var(--shadow-lg);
}
.readout-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:20px; margin-bottom:18px;}
.readout-item .k-row{display:flex; align-items:center; gap:6px;}
.readout-item .k{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--body-muted);}
.readout-item .v{font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--accent); margin-top:6px;}
.readout-item .v small{font-size:14px; color:var(--body-muted); font-weight:400;}
.plain-summary{font-size:16px; line-height:1.7; color:var(--body); padding-top:18px; border-top:1px solid var(--border);}
.plain-summary strong{font-weight:600;}
.result-compass-row{display:flex; align-items:center; gap:18px; margin-bottom:18px; flex-wrap:wrap;}
.efficiency-note{
  display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px;
  background:#1A1D23; border-radius:10px; font-size:14px; color:var(--body-muted);
}
.efficiency-note.warn{background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.2);}

/* ---------- Table ---------- */
table{width:100%; border-collapse:collapse; font-size:14px;}
th, td{padding:8px 12px; text-align:right; border-bottom:1px solid var(--border);}
th:first-child, td:first-child{text-align:left;}
th{font-family:var(--font-mono); color:var(--body-muted); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:0.06em;}
th .icon{margin-right:3px;}
td{font-family:var(--font-mono); color:var(--body);}
tr:last-child td{border-bottom:none;}
.best-month{color:var(--accent) !important;}

/* ---------- Cards ---------- */
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-sm);}
.card h3{font-family:var(--font-display); font-size:17px; margin:0 0 12px; font-weight:600; display:flex; align-items:center; gap:9px; color:var(--heading);}
.caveats{list-style:none; padding-left:0; margin:0; font-size:14px; color:var(--body); line-height:1.75;}
.caveats li{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;}
.caveats li .icon{margin-top:2px;}

@media (max-width:520px){
  .readout-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .readout-item .v{font-size:22px;}
  .compass-wrap{justify-content:center;}
}

/* ---------- Status messages & spinner ---------- */
.spinner{
  width:14px; height:14px; border:2px solid rgba(255,255,255,0.10); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.weather-status, .feedback-status, #sunCompassStatus{
  margin-top:10px; padding:8px 10px; border-radius:8px;
  font-family:var(--font-mono); font-size:13px; display:none;
  align-items:center; gap:8px;
}
.weather-status.show, .feedback-status.show, #sunCompassStatus.show{display:flex;}
.weather-status:not(.error), .feedback-status:not(.error), #sunCompassStatus:not(.error){
  color:var(--success); background:rgba(52,211,153,0.08);
}
.weather-status.error, .feedback-status.error, #sunCompassStatus.error{
  color:var(--danger); background:rgba(248,113,113,0.08);
}
.calc-zone{margin:28px 0; text-align:center;}
.calc-error{color:var(--danger); font-size:13.5px; margin-top:10px; display:none; align-items:center; gap:8px; justify-content:center;}
.calc-error.show{display:flex;}

/* ---------- Cards ---------- */
.card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-sm);}
.card h3{font-family:var(--font-display); font-size:17px; margin:0 0 12px; font-weight:600; display:flex; align-items:center; gap:9px; color:var(--heading);}
.caveats{list-style:none; padding-left:0; margin:0; font-size:14px; color:var(--body); line-height:1.75;}
.caveats li{display:flex; align-items:flex-start; gap:10px; margin-bottom:8px;}
.caveats li .icon{margin-top:2px;}

/* ====== RANGE SLIDER ====== */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:var(--border); outline:none; padding:0; border:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid #1A1D23; box-shadow:var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid #1A1D23; box-shadow:var(--shadow-sm);
}
.range-labels{display:flex; justify-content:space-between; font-size:12px; color:var(--body-faint); margin-top:-2px;}
.range-labels span:nth-child(2){font-weight:600; color:var(--accent);}

/* ====== FEEDBACK ====== */
.feedback-desc{font-size:14.5px; color:var(--body); margin:-6px 0 16px 0;}
.feedback-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.learning-summary{
  margin-top:14px; padding:14px; background:#1A1D23;
  border-radius:var(--radius); display:none;
}
.learn-header{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--accent); display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.learn-body{font-size:13px; color:var(--body-muted); line-height:1.7;}
.learn-body strong{color:var(--heading);}

/* ====== HOW-TO GUIDE ====== */
.guide-page .page-title{margin-top:10px;}
.guide-flow{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:28px 0 40px;}
.guide-flow-step{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; text-align:center; min-width:100px;}
.guide-flow-step .flow-num{display:block; font-family:var(--font-mono); font-size:13px; color:var(--accent); font-weight:600; margin-bottom:2px;}
.guide-flow-step strong{display:block; font-size:13px; color:var(--heading);}
.guide-flow-step span:last-child{display:block; font-size:11px; color:var(--body-muted);}
.flow-arrow{font-size:22px; color:var(--body-faint);}
.guide-card{background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; margin-bottom:28px; box-shadow:var(--shadow-sm);}
.guide-card.guide-science{border-color:var(--accent); border-width:1.5px;}
.guide-step-header{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.guide-step-num{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:14px; font-weight:600; flex-shrink:0;}
.guide-step-header h2{margin:0; font-size:20px; color:var(--heading); font-weight:600;}
.guide-row{display:flex; gap:28px; align-items:flex-start;}
.guide-visual{flex-shrink:0; width:240px;}
.guide-visual svg{width:100%; height:auto;}
.guide-text{flex:1; min-width:0;}
.guide-text p{margin:0 0 14px; font-size:15.5px; line-height:1.7; color:var(--body);}
.guide-text p:last-child{margin-bottom:0;}
.guide-tip{background:var(--accent-light); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:12px 16px; margin:16px 0; display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--body-muted); line-height:1.6;}
.tip-label{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; margin-top:2px;}
.guide-list{list-style:none; padding:0; margin:0 0 14px;}
.guide-list li{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:15px; color:var(--body); line-height:1.6;}
.guide-list.guide-ol{list-style:decimal; padding-left:20px;}
.guide-list.guide-ol li{display:list-item; gap:0; margin-bottom:12px; padding-left:4px;}
.guide-dot{display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:6px;}
.guide-subsection{margin-bottom:18px;}
.guide-subsection h3{margin:0 0 6px; font-size:15px; color:var(--heading); font-weight:600;}
.guide-subsection p{margin:0; font-size:15px; color:var(--body);}
.guide-ref-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.guide-ref-item{display:flex; align-items:flex-start; gap:10px; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:14px; font-size:13.5px; color:var(--body); line-height:1.6;}
.ref-icon{font-size:16px; color:var(--accent); flex-shrink:0; margin-top:1px;}
.guide-cta{text-align:center; padding:36px 0 20px; border-top:1px solid var(--border); margin-top:20px;}
.guide-cta p{font-size:18px; color:var(--heading); font-weight:600; margin:0 0 16px;}
.guide-cta .btn{display:inline-flex; align-items:center; gap:6px; padding:14px 36px; font-size:16px;}
@media(max-width:680px){
  .guide-row{flex-direction:column;}
  .guide-visual{width:100%; max-width:300px; margin:0 auto;}
  .guide-ref-grid{grid-template-columns:1fr;}
  .guide-flow{gap:4px;}
  .guide-flow-step{min-width:70px; padding:8px 10px;}
  .flow-arrow{font-size:16px;}
}

/* ====== STAND ANGLE PANEL ====== */
.stand-angle-panel{
  margin-top:18px; padding:20px; background:#0D0F13;
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.stand-angle-panel h4{margin:0 0 14px; font-size:15px; color:var(--heading); display:flex; align-items:center; gap:8px;}
.stand-visual{margin-bottom:16px; text-align:center;}
.stand-svg{width:100%; max-width:300px; height:auto;}
.stand-readout-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:14px;}
.stand-readout-item{display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:rgba(37,99,235,0.06); border-radius:var(--radius); border:1px solid rgba(37,99,235,0.12);}
.stand-k{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--body-faint);}
.stand-v{font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--accent);}
.stand-v small{font-size:11px; font-weight:400; color:var(--body-muted);}
.stand-hint{font-size:11px; color:var(--body-muted); margin-top:2px;}

/* ====== LOCK BUTTON ====== */
.sun-compass-lock{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}