/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-bg:#0f1419;--c-surface:#1a2332;--c-surface2:#243044;--c-border:#2d3f54;
  --c-text:#e2e8f0;--c-text-dim:#94a3b8;--c-accent:#f59e0b;--c-accent2:#fbbf24;
  --c-success:#22c55e;--c-danger:#ef4444;--c-info:#3b82f6;
  --radius:10px;--radius-sm:6px;
  --font:ui-sans-serif,system-ui,-apple-system,sans-serif;
  --container:1120px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--c-accent);text-decoration:none}
a:hover,a:focus{color:var(--c-accent2);text-decoration:underline}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
/* Header */
.site-header{background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{display:flex;align-items:center;gap:8px;color:var(--c-text);font-size:1.1rem}
.logo:hover{text-decoration:none;color:var(--c-accent)}
.main-nav{display:flex;gap:20px}
.main-nav a{font-size:.9rem;color:var(--c-text-dim);padding:4px 0}
.main-nav a:hover{color:var(--c-text)}
/* Hero */
.hero-section{padding:60px 0 40px;background:linear-gradient(180deg,var(--c-surface) 0%,var(--c-bg) 100%)}
.hero-section h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;margin-bottom:12px;color:#fff}
.hero-sub{font-size:1.1rem;color:var(--c-text-dim);max-width:640px}
/* Simulator */
.sim-section{padding:48px 0}
.sim-layout{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:860px){
  .sim-layout{grid-template-columns:1fr 360px}
}
.sim-inputs h2{font-size:1.4rem;margin-bottom:4px;color:#fff}
.sim-intro{color:var(--c-text-dim);margin-bottom:20px;font-size:.95rem}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.preset-btn{background:var(--c-surface2);border:1px solid var(--c-border);color:var(--c-text-dim);padding:6px 14px;border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;transition:all .15s}
.preset-btn:hover,.preset-btn:focus{border-color:var(--c-accent);color:var(--c-accent);outline:none}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--c-text-dim)}
.field input,.field select{width:100%;padding:10px 12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);color:var(--c-text);font-size:1rem;transition:border-color .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.field .hint{display:block;font-size:.78rem;color:var(--c-text-dim);margin-top:4px}
.btn-primary{width:100%;padding:12px;background:var(--c-accent);color:#0f1419;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:700;cursor:pointer;transition:background .15s}
.btn-primary:hover,.btn-primary:focus{background:var(--c-accent2)}
.btn-secondary{padding:8px 16px;background:var(--c-surface2);border:1px solid var(--c-border);color:var(--c-text-dim);border-radius:var(--radius-sm);font-size:.85rem;cursor:pointer;transition:all .15s}
.btn-secondary:hover,.btn-secondary:focus{border-color:var(--c-accent);color:var(--c-accent);outline:none}
/* Results */
.sim-results{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;position:sticky;top:72px}
.results-empty{text-align:center;padding:40px 0;color:var(--c-text-dim)}
.results-empty svg{margin-bottom:12px}
.results-filled h3{font-size:1.1rem;margin-bottom:16px;color:#fff}
.result-main{text-align:center;margin-bottom:20px}
.gauge-badge{display:inline-block;background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));color:#0f1419;font-size:1.8rem;font-weight:800;padding:12px 28px;border-radius:var(--radius);line-height:1}
.gauge-label{font-size:.85rem;color:var(--c-text-dim);margin-top:8px}
.result-details{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:20px}
.result-details dt{font-size:.78rem;color:var(--c-text-dim);text-transform:uppercase;letter-spacing:.04em}
.result-details dd{font-size:.95rem;font-weight:600;color:#fff}
.cost-compare{margin-bottom:20px}
.cost-compare h4{font-size:.95rem;margin-bottom:8px;color:#fff}
.cost-table{width:100%;border-collapse:collapse;font-size:.85rem}
.cost-table th,.cost-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--c-border)}
.cost-table th{color:var(--c-text-dim);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.cost-table tr.recommended{background:rgba(245,158,11,.08)}
.cost-table tr.recommended td:first-child::content:"★ "}
.cost-table .rec-badge{background:var(--c-accent);color:#0f1419;font-size:.7rem;padding:2px 6px;border-radius:4px;font-weight:700;margin-left:4px}
.cost-note{font-size:.75rem;color:var(--c-text-dim);margin-top:8px}
.result-actions{display:flex;flex-wrap:wrap;gap:8px}
/* Guide */
.guide-section{padding:48px 0;background:var(--c-surface)}
.guide-section h2{font-size:1.4rem;margin-bottom:24px;color:#fff}
.guide-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.guide-grid{grid-template-columns:1fr 1fr}}
.guide-card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:20px}
.guide-card h3{font-size:1rem;margin-bottom:8px;color:var(--c-accent2)}
.guide-card p{font-size:.9rem;color:var(--c-text-dim)}
/* Mistakes */
.mistakes-section{padding:48px 0}
.mistakes-section h2{font-size:1.4rem;margin-bottom:24px;color:#fff}
.mistakes-list details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:8px;padding:16px 20px}
.mistakes-list summary{font-weight:600;cursor:pointer;font-size:.95rem;color:#fff}
.mistakes-list summary:hover{color:var(--c-accent)}
.mistakes-list details p{margin-top:12px;font-size:.9rem;color:var(--c-text-dim);line-height:1.6}
/* Scenario */
.scenario-section{padding:48px 0;background:var(--c-surface)}
.scenario-section h2{font-size:1.4rem;margin-bottom:12px;color:#fff}
.scenario-section p{font-size:.95rem;color:var(--c-text-dim);margin-bottom:12px}
.scenario-steps{margin:0 0 16px 20px;color:var(--c-text-dim);font-size:.9rem;line-height:2}
.scenario-steps li::marker{color:var(--c-accent);font-weight:700}
/* Footer */
.site-footer{background:var(--c-surface);border-top:1px solid var(--c-border);padding:40px 0 20px;margin-top:48px}
.footer-top{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
@media(min-width:640px){.footer-top{grid-template-columns:2fr 1fr 1fr}}
.footer-top strong{font-size:.9rem;color:#fff;display:block;margin-bottom:8px}
.footer-top p,.footer-top a{font-size:.85rem;color:var(--c-text-dim)}
.footer-top nav{display:flex;flex-direction:column;gap:4px}
.footer-bottom{border-top:1px solid var(--c-border);padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--c-text-dim)}
.footer-bottom a{color:var(--c-accent)}
/* Print */
@media print{
  .site-header,.site-footer,.presets,.result-actions,.sim-intro{display:none!important}
  body{background:#fff;color:#000}
  .sim-results{border:none;padding:0;position:static}
  .gauge-badge{background:none!important;color:#000!important;font-size:2.5rem;border:3px solid #000}
}
/* Focus visible */
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:2px}
/* Smooth transitions */
.results-filled{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--c-accent);color:#0f1419;padding:10px 20px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;z-index:999;animation:toastIn .3s ease;pointer-events:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}