:root {
  color-scheme: dark;
  --bg: #080b13;
  --surface: #0f1421;
  --surface-2: #151b2b;
  --field: #0a0e19;
  --border: #293148;
  --border-bright: #3d4865;
  --text: #f4f6ff;
  --muted: #9da7bd;
  --subtle: #737f98;
  --accent: #6670ff;
  --accent-2: #9b5cff;
  --good: #43d39e;
  --warn: #f5b54c;
  --bad: #ff7188;
  --shadow: 0 24px 70px rgba(0, 0, 0, .24);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f3f8;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --field: #fafbfe;
  --border: #d9deea;
  --border-bright: #c1c9da;
  --text: #111629;
  --muted: #566078;
  --subtle: #747e93;
  --shadow: 0 22px 60px rgba(35, 45, 75, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 72% 0, rgba(102,112,255,.13), transparent 32rem), var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .7rem 1rem; border-radius: .5rem; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 1rem; }

.topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1380px) / 2)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 91%, transparent); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; font-weight: 840; font-size: .88rem; letter-spacing: .14em; }
.brand > span:last-child > span { color: var(--accent); }
.brand-mark { width: 31px; height: 31px; display: flex; align-items: end; gap: 3px; padding: 7px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.brand-mark i { display: block; width: 4px; border-radius: 1px; background: linear-gradient(var(--accent-2), var(--accent)); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 12px; }
.top-actions, .intro-actions { display: flex; align-items: center; gap: .65rem; }
.free-chip, .diagnostic-chip { border: 1px solid rgba(67,211,158,.35); color: var(--good); background: rgba(67,211,158,.08); border-radius: 999px; padding: .42rem .65rem; font: 700 .65rem var(--mono); letter-spacing: .08em; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; }

main { max-width: 1380px; margin: 0 auto; padding: 30px 22px 56px; }
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; margin-bottom: 18px; }
.eyebrow { margin: 0 0 .55rem; color: var(--accent); font: 750 .68rem var(--mono); letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .35rem; max-width: 760px; font-size: clamp(2rem, 3.7vw, 3.25rem); letter-spacing: -.05em; line-height: 1; }
.subtitle { color: var(--muted); font-size: .9rem; margin-bottom: 0; }
.intro-copy { justify-self: end; max-width: 520px; }
.intro-copy > p { margin-bottom: .75rem; color: var(--muted); font-size: .83rem; line-height: 1.5; }
button.primary-button, button.secondary-button { min-height: 42px; padding: .65rem 1rem; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-weight: 720; }
button.primary-button { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: white; }
button.secondary-button { background: var(--surface); }

.workspace { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.setup-panel { border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 76%, var(--surface)); }
.section-heading, .result-heading { min-height: 64px; padding: 13px 17px; border-bottom: 1px solid var(--border); display: flex; gap: .7rem; align-items: center; }
.section-number { color: var(--accent); font: 700 .68rem var(--mono); }
.section-heading p, .result-heading p { margin: 0 0 .2rem; color: var(--subtle); font: 720 .62rem var(--mono); letter-spacing: .13em; }
.section-heading h2, .result-heading h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.015em; }
.result-heading { justify-content: space-between; }
.form-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; padding: 15px; }
.form-body > * { min-width: 0; }
.field { display: grid; align-content: start; gap: .38rem; }
.field > span, fieldset legend { color: var(--text); font-size: .78rem; font-weight: 700; }
.field small, fieldset > p { color: var(--subtle); font-size: .68rem; line-height: 1.45; }
.form-body > .field > small, .optics-fields > p { display: none; }
input, select { width: 100%; min-height: 38px; border: 1px solid var(--border); border-radius: 7px; background: var(--field); color: var(--text); padding: 0 .72rem; outline: none; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,112,255,.13); }
.unit-input { display: flex; align-items: center; position: relative; }
.unit-input input { padding-right: 3.7rem; }
.unit-input b { position: absolute; right: .8rem; color: var(--subtle); font: 650 .72rem var(--mono); }
.toggle-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; min-height: 38px; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--field); cursor: pointer; }
.toggle-row span { display: grid; gap: .2rem; }.toggle-row strong { font-size: .78rem; }.toggle-row small { color: var(--subtle); font-size: .65rem; }
.toggle-row input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.toggle-row i { width: 36px; height: 20px; border-radius: 99px; background: var(--border-bright); position: relative; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; transition: transform .18s ease; }
.toggle-row input:checked + i { background: var(--accent); }.toggle-row input:checked + i::after { transform: translateX(16px); }
.toggle-row > b { color: var(--good); font: 750 .65rem var(--mono); }
.toggle-row, .optics-fields { grid-column: 1 / -1; }
.optics-fields { min-width: 0; margin: 1px 0 0; padding: 11px; border: 1px solid var(--border); border-radius: 9px; }
.optics-fields legend { padding: 0 .45rem; }
.optics-fields > p { margin: 0; }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.span-2 { grid-column: 1 / -1; }

.result-panel { min-width: 0; }
.hero-result { margin: 24px; padding: 25px; border: 1px solid rgba(67,211,158,.34); border-radius: 13px; background: radial-gradient(circle at 84% 15%, rgba(67,211,158,.12), transparent 18rem), linear-gradient(145deg, rgba(67,211,158,.08), rgba(102,112,255,.05)); }
.hero-result.disabled { border-color: rgba(255,113,136,.42); background: rgba(255,113,136,.06); }
.hero-badge { display: flex; align-items: center; gap: .5rem; margin-bottom: 25px; color: var(--good); font: 800 .67rem var(--mono); letter-spacing: .12em; }
.disabled .hero-badge { color: var(--bad); }
.hero-badge span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; }
.hero-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-settings > div { min-width: 0; padding-right: 1rem; border-right: 1px solid var(--border); }
.hero-settings > div:last-child { border-right: 0; }
.hero-settings span, .condition-row span, .risk-card > span { display: block; color: var(--subtle); font: 700 .64rem var(--mono); letter-spacing: .1em; }
.hero-settings strong { display: block; margin: .32rem 0 .1rem; font: 800 clamp(2.25rem, 5vw, 4.25rem)/1 var(--mono); letter-spacing: -.07em; }
.hero-settings small { color: var(--muted); font: .73rem var(--mono); }
.hero-result > p { margin: 20px 0; padding: .85rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: .82rem; }
.setup-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.setup-steps li { display: grid; grid-template-columns: 24px 1fr; gap: .65rem; align-items: start; }
.setup-steps li > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(102,112,255,.15); color: var(--accent); font: 800 .64rem var(--mono); }
.setup-steps p { margin: .15rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.condition-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin: 0 24px 20px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.condition-indicator { display: flex; gap: 5px; align-items: end; height: 38px; }
.condition-indicator i { display: block; width: 8px; border-radius: 2px; background: var(--border-bright); }.condition-indicator i:nth-child(1) { height: 13px; }.condition-indicator i:nth-child(2) { height: 23px; }.condition-indicator i:nth-child(3) { height: 34px; }
.condition-indicator[data-level="caution"] i:nth-child(1), .condition-indicator[data-level="workable"] i:nth-child(-n+2), .condition-indicator[data-level="favorable"] i { background: var(--good); }
.condition-indicator[data-level="caution"] i:nth-child(1) { background: var(--bad); }
.condition-indicator[data-level="workable"] i:nth-child(-n+2) { background: var(--warn); }
.condition-row strong { display: block; margin: .2rem 0; font: 800 .96rem var(--mono); }.condition-row p { margin: 0; color: var(--muted); font-size: .72rem; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0 24px 24px; }
.profile-card { padding: 18px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.profile-card.compromise { border-top: 3px solid var(--warn); }.profile-card.avoid { border-top: 3px solid var(--bad); }
.profile-title { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.profile-title span { color: var(--warn); font: 800 .62rem var(--mono); letter-spacing: .1em; }.avoid .profile-title span { color: var(--bad); }
.profile-title b { color: var(--subtle); font-size: .67rem; }
.profile-value { display: grid; gap: .3rem; margin: 16px 0 11px; }.profile-value strong { font: 800 1.3rem var(--mono); }.profile-value span { color: var(--muted); font-size: .69rem; line-height: 1.5; }
.profile-card p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

.artifact-panel, .detail-panel { margin-top: 20px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.risk-card { min-height: 185px; padding: 21px; background: var(--surface); }
.risk-card strong { display: block; margin: 15px 0 10px; font: 830 1.35rem var(--mono); }
.risk-card[data-risk="lower"] strong { color: var(--good); }.risk-card[data-risk="medium"] strong { color: var(--warn); }.risk-card[data-risk="high"] strong { color: var(--bad); }
.risk-card p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.55; }.risk-card small { display: inline-block; margin-top: 14px; color: var(--accent); font: 700 .67rem var(--mono); }
.risk-disclaimer { margin: 0; padding: 14px 21px; border-top: 1px solid var(--border); color: var(--subtle); font-size: .69rem; line-height: 1.5; }
.rate-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 20px; border-bottom: 1px solid var(--border); text-align: left; font-size: .75rem; }
th { color: var(--subtle); background: var(--surface-2); font: 750 .63rem var(--mono); letter-spacing: .08em; }
td:nth-child(1), td:nth-child(3) { font-family: var(--mono); white-space: nowrap; } td:nth-child(2) { color: var(--muted); }
.status-chip { display: inline-block; border-radius: 999px; padding: .35rem .55rem; font: 750 .58rem var(--mono); letter-spacing: .06em; white-space: nowrap; }
.status-chip.optimal { color: var(--good); background: rgba(67,211,158,.1); }.status-chip.compromise { color: var(--warn); background: rgba(245,181,76,.1); }.status-chip.not-recommended { color: var(--bad); background: rgba(255,113,136,.1); }
.notice { display: grid; gap: 10px; margin-top: 20px; }
.warning-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 14px 17px; border: 1px solid rgba(245,181,76,.3); border-radius: 9px; background: rgba(245,181,76,.06); }
.warning-card > b { color: var(--warn); }.warning-card div { display: grid; gap: .2rem; }.warning-card strong { font-size: .76rem; }.warning-card span { color: var(--muted); font-size: .71rem; line-height: 1.5; }
.method-note { margin-top: 20px; padding: 20px; border: 1px solid rgba(102,112,255,.3); border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(102,112,255,.07); }
.method-heading p { margin: 0; color: #aeb4ff; font: 750 .64rem var(--mono); letter-spacing: .1em; }
.method-heading h2 { margin: .35rem 0 0; font-size: 1.2rem; }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.method-grid article { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: rgba(8,11,19,.45); }
.method-note strong { font-size: .78rem; }
.method-note p { margin: .45rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.method-summary { margin-top: 16px !important; }
.method-sources { display: grid; gap: 7px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.method-sources a { color: #b9bdff; font-size: .73rem; line-height: 1.45; text-underline-offset: 3px; }
.method-sources p { margin-top: 2px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; margin-top: 20px; padding: 18px 4px 0; border-top: 1px solid var(--border); color: var(--subtle); font-size: .7rem; }
.site-footer a { color: #b9bdff; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 20; transform: translate(-50%, 20px); opacity: 0; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 9px; background: var(--text); color: var(--bg); font-size: .75rem; font-weight: 700; pointer-events: none; transition: .2s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .setup-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .form-body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .input-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .toggle-row { grid-column: auto; padding: .7rem .75rem; }
  .toggle-row small { display: none; }
  .toggle-row > b { display: none; }
  .hero-settings strong { font-size: 2.7rem; }
  .risk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  main { padding-top: 34px; }
  .intro { grid-template-columns: 1fr; }
  .intro { gap: 1.4rem; }.intro-copy { justify-self: start; }
  .form-body, .input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid, .setup-steps { grid-template-columns: 1fr; }
  .risk-grid { grid-template-columns: 1fr; }
  .risk-card { min-height: auto; }
}
@media (max-width: 520px) {
  .topbar { padding-inline: 14px; }.free-chip { display: none; }
  main { padding-inline: 12px; }.intro-actions { width: 100%; }.intro-actions button { flex: 1; }
  .hero-result, .condition-row, .profile-grid { margin-left: 14px; margin-right: 14px; }
  .hero-settings { grid-template-columns: 1fr; }.hero-settings > div { border-right: 0; padding: 0 0 1rem; border-bottom: 1px solid var(--border); }.hero-settings > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .form-body, .input-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }
  th, td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }