*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f7f9fc;
  --bg2: #ffffff;
  --bg3: #ffffff;
  --border: #e3e8f0;
  --text: #0f172a;
  --text2: #5b6878;
  --text3: #64748b;
  --accent: #2563eb;
  --green: #059669;
  --red: #dc2626;
  --yellow: #b45309;
  --orange: #ea580c;
  --purple: #2563eb;
  --teal: #2dd4bf;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(15,23,42,0.08);
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.5; }

/* NAV */
nav { background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 16px; }
.logo { font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-print { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.btn-print:hover { border-color: var(--accent); color: var(--text); }

.page-intro { font-size: .75rem; color: #64748b; text-align: center; padding: .35rem 1rem; background: #f7f9fc; border-bottom: 1px solid #ffffff; letter-spacing: .01em; }

/* YMYL Banner */
.ymyl-banner { background: rgba(251,191,36,0.09); border-bottom: 1px solid rgba(251,191,36,0.25); padding: 10px 20px; text-align: center; font-size: 13px; color: #334155; line-height: 1.5; }
.ymyl-banner strong { color: var(--yellow); }

.container { max-width: 1280px; margin: 0 auto; padding: 24px 20px; }

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

/* MAIN LAYOUT */
.main-grid { display: grid; grid-template-columns: 400px 1fr; gap: 20px; margin-bottom: 20px; }

/* INPUTS */
.inputs-card h2 { font-size: 17px; margin-bottom: 18px; color: var(--text); }
.section-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.hint { color: var(--text3); font-weight: 400; font-size: 10px; }

.field-group { margin-bottom: 12px; }
.field-group label { display: block; font-size: 12px; color: var(--text2); margin-bottom: 5px; font-weight: 500; }
.field-hint { font-size: 11px; color: var(--teal); margin-top: 4px; font-style: italic; }

.input-wrap { display: flex; align-items: center; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.15s; }
.input-wrap:focus-within { border-color: var(--accent); }
.input-wrap input, .input-wrap select { flex: 1; background: none; border: none; color: var(--text); padding: 8px 12px; font-size: 14px; font-weight: 600; outline: none; min-width: 0; }
.input-wrap select option { background: var(--bg3); }
.prefix, .suffix { padding: 0 10px; color: var(--text3); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.suffix-label { padding: 0 10px; color: var(--teal); font-size: 11px; font-weight: 700; flex-shrink: 0; font-style: italic; }

.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.btn-calc { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 18px; transition: opacity 0.15s; letter-spacing: 0.3px; }
.btn-calc:hover { opacity: 0.88; }

/* RESULTS */
.results-col { display: flex; flex-direction: column; gap: 16px; }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-card { border-radius: var(--radius); padding: 20px; border: 2px solid var(--border); background: var(--bg2); text-align: center; }
.compare-card.need-card { border-color: rgba(79,142,247,0.4); background: rgba(79,142,247,0.07); }
.compare-card.gap-card { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.07); }
.compare-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 6px; }
.compare-value { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.compare-sub { font-size: 11px; color: var(--text3); }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 12px; text-align: center; }
.kpi-card.primary { background: var(--accent); border-color: var(--accent); }
.kpi-card.primary .kpi-label, .kpi-card.primary .kpi-sub { color: rgba(15,23,42,0.7); }
.kpi-card.primary .kpi-value { color: #fff; }
.kpi-card.green-card { border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.07); }
.kpi-label { font-size: 10px; color: var(--text3); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 18px; font-weight: 700; color: var(--text); }
.kpi-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }

/* Verdict */
.verdict-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.verdict-title { font-size: 12px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.verdict-text { color: var(--text); font-size: 14px; line-height: 1.7; }
.verdict-text strong { color: var(--green); }
.verdict-warn { color: var(--yellow); font-weight: 700; }
.verdict-ok { color: var(--green); font-weight: 700; }
.verdict-alert { color: var(--red); font-weight: 700; }

.section-group-label { font-size: 11px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 5px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* Period note */
.period-note { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 12px; color: var(--text2); }
.period-note strong { color: var(--accent); }

/* Own-occ info box */
.info-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.info-box-title { font-size: 13px; font-weight: 700; color: var(--teal); margin-bottom: 12px; letter-spacing: 0.3px; }
.info-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.info-col { font-size: 12.5px; color: var(--text2); line-height: 1.6; }
.info-col-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.own-occ-head { color: var(--green); }
.any-occ-head { color: var(--yellow); }
.info-col p { margin-bottom: 6px; }
.info-col ul { padding-left: 16px; margin: 0; }
.info-col li { margin-bottom: 3px; font-size: 12px; }
.info-box-rec { font-size: 12.5px; color: #5b6878; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.info-box-rec strong { color: var(--teal); }
.info-box-rec em { color: var(--green); font-style: normal; font-weight: 600; }

/* Disclaimer */
.disclaimer { background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.2); border-radius: 8px; padding: 12px 16px; font-size: 11.5px; color: #5b6878; line-height: 1.65; }
.disclaimer strong { color: var(--yellow); }

/* GUIDE */
.tool-guide { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; }
.guide-h2 { font-size: 1.05rem; font-weight: 700; color: var(--purple); margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.guide-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step; }
.guide-steps li { counter-increment: step; display: flex; gap: .75rem; margin-bottom: .6rem; color: #334155; font-size: .875rem; line-height: 1.6; }
.guide-steps li::before { content: counter(step); display: flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; background: #2563eb22; border-radius: 50%; color: #2563eb; font-weight: 700; font-size: .75rem; flex-shrink: 0; margin-top: .1rem; }
.guide-text { color: #5b6878; font-size: .875rem; line-height: 1.7; margin-bottom: .75rem; }
.guide-text a { color: var(--accent); text-decoration: none; }
.guide-text a:hover { text-decoration: underline; }
.guide-list { color: #5b6878; font-size: .875rem; line-height: 1.7; padding-left: 1.25rem; margin-bottom: 1rem; }
.guide-list li { margin-bottom: .35rem; }
.guide-faq { margin: 0; padding: 0; list-style: none; }
.guide-faq li { margin-bottom: 1rem; padding: 0 0 1rem; border-bottom: 1px solid #ffffff; }
.guide-faq li:last-child { border-bottom: none; }
.guide-faq .q { font-weight: 600; color: #0f172a; margin-bottom: .35rem; font-size: .875rem; }
.guide-faq .a { color: #5b6878; font-size: .85rem; line-height: 1.6; }

/* AFFILIATE */
.aff-section { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; }
.aff-h2 { font-size: 1.05rem; font-weight: 700; color: #b45309; margin: 1.5rem 0 .35rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.aff-disclosure { font-size: .72rem; color: #64748b; margin-bottom: .9rem; font-style: italic; }
.aff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.aff-card { display: block; background: rgba(252,211,77,0.06); border: 1px solid rgba(252,211,77,0.18); border-radius: 8px; padding: .9rem 1rem; text-decoration: none; transition: background .15s, border-color .15s; }
.aff-card:hover { background: rgba(252,211,77,0.12); border-color: rgba(252,211,77,0.4); }
.aff-card.ssdi-card { background: rgba(45,212,191,0.05); border-color: rgba(45,212,191,0.2); }
.aff-card.ssdi-card:hover { background: rgba(45,212,191,0.1); border-color: rgba(45,212,191,0.4); }
.aff-name { font-weight: 700; color: #b45309; font-size: .9rem; margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; }
.aff-name::after { content: "\2197"; font-size: .8rem; opacity: .7; }
.ssa-name { color: var(--teal); }
.ssa-name::after { content: "\2197"; }
.aff-desc { color: #5b6878; font-size: .8rem; line-height: 1.55; }

/* FOOTER */
.site-footer-bar { background: #f7f9fc; border-top: 1px solid #ffffff; padding: 1rem; text-align: center; font-size: .75rem; color: #64748b; margin-top: 2rem; }
.site-footer-bar a { color: #2563eb; text-decoration: none; }
.site-footer-bar a:hover { text-decoration: underline; }

/* PRINT */
@media print {
  nav, .btn-calc, .btn-print, .aff-section, .tool-guide, .site-footer-bar, .page-intro, .ymyl-banner { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .kpi-card, .compare-card, .verdict-card, .info-box { background: #fff; border: 1px solid #ccc; }
  .kpi-label, .kpi-sub, .compare-label, .compare-sub { color: #555; }
  .kpi-value, .compare-value { color: #000; }
  .disclaimer { display: block !important; border: 1px solid #aaa; }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .main-grid { grid-template-columns: 1fr; }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .input-row { grid-template-columns: 1fr; }
  .info-box-grid { grid-template-columns: 1fr; }
}