:root{
  --bg: #FBF3EC;
  --panel: #FFFFFF;
  --text: #211711;
  --text-dim: #5C4F45;
  --text-faint: #8A7A6E;
  --accent: #FF6A1A;
  --good: #1E8449;
  --bad: #D6403C;
  --border: #E8DCCF;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-body: 'JetBrains Mono', 'Courier New', monospace;
  --radius: 12px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; min-height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.page{
  max-width:560px;
  margin:0 auto;
  padding:48px 20px 80px;
}

.header{ text-align:center; margin-bottom:32px; }
.wordmark{ font-size:26px; font-weight:700; color:var(--text); }
.wordmark span{ color:var(--accent); }
.tagline{ font-size:13px; color:var(--text-faint); margin-top:6px; }

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 24px;
}

.filetag{ font-size:13px; font-weight:500; color:var(--accent); margin-bottom:10px; }

h1{ font-size:26px; font-weight:700; margin:0 0 14px; color:var(--text); }
h2{ font-size:19px; font-weight:600; margin:0 0 10px; color:var(--text); }

.intro{ font-size:15px; font-weight:400; color:var(--text-dim); line-height:1.55; margin:0 0 22px; }

.form{ display:flex; flex-direction:column; gap:16px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size:12.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.4px; }

.field input{
  font-family:var(--font-mono);
  font-size:16px;
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  outline:none;
}
.field input:focus{ border-color:var(--accent); }
.field input::placeholder{ color:var(--text-faint); }

.btn-primary{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:600;
  color:var(--bg);
  background:var(--accent);
  border:none;
  border-radius:8px;
  padding:14px 18px;
  cursor:pointer;
  margin-top:4px;
}
.btn-primary:hover{ opacity:0.9; }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }

.email-status{ font-size:13px; color:var(--good); margin-top:14px; }

.result{ margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.result-label{ font-size:12.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.4px; }
.result-value{ font-size:44px; font-weight:700; color:var(--good); margin-top:6px; font-variant-numeric:tabular-nums; }
.result-sub{ font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.5; }

.divider{ height:1px; background:var(--border); margin:26px 0 22px; }

.gate .intro{ margin-bottom:18px; }

.dev-note{ font-size:11.5px; color:var(--text-faint); margin-top:12px; font-style:italic; }
.dev-note:empty{ display:none; }

.chart-section{ margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.chart-section canvas{ margin-top:16px; max-width:100%; }

.formula-box{ margin-top:16px; padding:14px 16px; background:var(--bg); border:1px solid var(--border); border-radius:8px; }
.formula{ font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--accent); }
.formula-note{ font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.5; }

.disclaimer{ font-size:12px; color:var(--text-faint); margin:26px 0 0; line-height:1.5; }

@media (max-width: 480px){
  .page{ padding:32px 16px 60px; }
  .card{ padding:22px 16px; }
  h1{ font-size:22px; }
  .result-value{ font-size:36px; }
}