:root{--ink:#192b46;--muted:#7988a0;--line:#e7edf5;--blue:#2e68e8;--bg:#f5f8fd;--card:#fff;--green:#188c64;--shadow:0 13px 40px rgba(28,66,119,.045)}
*{box-sizing:border-box}
html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse 48% 22% at 50% 0%,#eaf1ff 0%,transparent 100%),var(--bg);line-height:1.55}
.page-shell{max-width:1104px;margin:0 auto;padding:0 28px}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.8px;color:#21334d}
.brand-symbol{display:flex;align-items:center;justify-content:center;width:31px;height:31px;background:var(--blue);border-radius:10px;color:#fff;font-size:20px;font-weight:900;line-height:1}
.brand-accent{color:var(--blue)}
.top-note{display:inline-flex;align-items:center;gap:8px;background:white;border:1px solid #e6edf5;border-radius:100px;padding:8px 14px;color:#77879a;font-size:12px;font-weight:600}
.status-dot{height:7px;width:7px;background:#2fba84;border-radius:50%;box-shadow:0 0 0 3px #e5f8f0}
.intro{text-align:center;max-width:755px;margin:43px auto 45px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;color:#4377df;font-size:11px;letter-spacing:1.9px;font-weight:800}
.eyebrow-icon{font-size:14px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(33px,4.5vw,52px);font-weight:800;line-height:1.19;letter-spacing:-2.45px;margin:15px 0 17px}
h1 span{color:#3170ec}
.intro p{font-size:15px;color:#7988a0;max-width:580px;margin:0 auto;line-height:1.85}
.workspace-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:23px;align-items:stretch}
.panel{background:#fff;border:1px solid #e8eef5;border-radius:20px;box-shadow:var(--shadow);padding:27px}
.panel-heading{display:flex;align-items:center;gap:13px;margin-bottom:30px}
.circle-icon{height:43px;width:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:13px}
.circle-icon svg{width:24px;height:24px}
.circle-icon.blue{background:#eaf1ff;color:#3471ec}.circle-icon.green{background:#e8f8f1;color:#18a576}.circle-icon.gray{background:#eef2fa;color:#667b9b}
.panel-heading h2{font-size:16px;line-height:1.35;letter-spacing:-.35px;margin:0 0 3px;font-weight:800}
.panel-heading p{color:#93a0b3;font-size:12px;margin:0}
.input-group{margin-bottom:22px}
.input-group label{display:block;font-size:13px;font-weight:700;color:#495d76;margin:0 0 10px}
.field-wrap{height:58px;border-radius:12px;border:1px solid #e0e7f1;background:#fbfcff;display:flex;align-items:center;gap:13px;padding:0 13px;transition:border-color .18s,box-shadow .18s}
.field-wrap:focus-within{border-color:#7ba8ff;box-shadow:0 0 0 4px #ebf2ff}
.person-icon,.small-person{display:inline-grid;place-items:center;border-radius:10px;font-weight:800}
.person-icon{height:32px;width:32px;font-size:12px;flex:0 0 32px}
.person-icon.mother,.small-person.mother{background:#eee9ff;color:#8062cd}
.person-icon.father,.small-person.father{background:#e4f3ff;color:#348bcb}
input[type=date]{border:0;outline:0;font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;min-width:0;width:100%;color:#283d59;background:transparent;letter-spacing:.15px;appearance:auto}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.54}
.assumption-box{background:#f5f8ff;border:1px solid #e8effb;border-radius:12px;padding:15px 17px;margin:30px 0 18px}
.assumption-title{color:#3975d9;font-size:12px;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:6px}
.assumption-title span{font-size:17px;line-height:1}
.assumption-box p{font-size:12px;line-height:1.85;color:#77869e;margin:0}
.assumption-box strong{color:#52667f}
.tiny-footnote{font-size:11px;color:#a0abc0;display:flex;align-items:center;gap:6px}
.result-heading{margin-bottom:20px}.result-heading>div:nth-child(2){flex:1}
.realtime-pill{background:#e9f9ef;border-radius:100px;color:#299468;font-size:10px;padding:6px 10px;white-space:nowrap;font-weight:800}
#result-content{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result-card{border-radius:14px;padding:17px 16px 15px;min-width:0;border:1px solid transparent}
.mother-result{background:linear-gradient(155deg,#f8f5ff,#f4f2ff);border-color:#eae5ff}
.father-result{background:linear-gradient(155deg,#f2f9ff,#eef6ff);border-color:#e2effc}
.result-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:27px}
.identity{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;letter-spacing:1.5px;color:#63708f}
.small-person{height:24px;width:24px;font-size:10px;border-radius:7px}
.remaining{font-size:10px;font-weight:700;color:#8f83b5;white-space:nowrap}.father-result .remaining{color:#678db6}
.result-caption{font-size:11px;color:#8692a9;margin:20px 0 1px}
.main-date{font-size:clamp(21px,2.4vw,29px);font-weight:850;letter-spacing:-1.1px;line-height:1.4;white-space:nowrap;color:#7859c8}
.father-result .main-date{color:#267bbd}
.result-divider{height:1px;background:rgba(139,148,179,.18);margin:18px 0 13px}
.detail-row{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:11px;line-height:1.8;margin:4px 0}
.detail-row span{color:#8896aa}.detail-row strong{color:#42536e;font-weight:750;text-align:right}
.error-message{padding:12px 15px;margin-bottom:16px;background:#fff1f1;border:1px solid #ffc9cb;color:#af3b46;border-radius:10px;font-size:13px}
.error-message[hidden],#result-content[hidden],#timeline[hidden]{display:none}
.summary{margin:27px 0;background:#fff;border:1px solid #e8eef5;border-radius:20px;box-shadow:var(--shadow);padding:26px 29px 24px}
.summary-intro{text-align:center;margin-bottom:23px}.summary-eyebrow{color:#8b9ab4;letter-spacing:1.9px;font-size:10px}
.summary h2{font-size:19px;letter-spacing:-.55px;margin:2px 0 0}
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;position:relative}
.timeline.two-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.step{position:relative;padding:18px 18px 17px;border-radius:13px;border:1px solid #e8eef5;background:#fcfdff;min-height:116px}
.step.highlight{background:#f4fbf7;border-color:#ddf0e6}
.step-marker{height:25px;width:25px;display:grid;place-items:center;border-radius:8px;font-size:12px;font-weight:800;margin-bottom:10px}
.step:not(.highlight) .step-marker{background:#eaf0fb;color:#617a9e}.step.highlight .step-marker{background:#dff3e9;color:#1a9a65}
.step-period{font-size:12px;font-weight:800;line-height:1.5;margin-bottom:4px;color:#344760}
.step-label{font-size:11px;line-height:1.6;color:#8190a5}
.step-amount{font-size:12px;font-weight:800;color:#239669;margin-top:5px}
.summary-note{font-size:11px;color:#8795ab;text-align:center;line-height:1.8;margin:18px 0 0}
.summary-note strong{color:#516480}
.legal{background:#eff4fc;border-radius:16px;padding:21px 25px;margin-bottom:30px}
.legal-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}.legal-head h2{font-size:13px;margin:0;font-weight:800}
.legal .circle-icon{height:27px;width:27px;flex:0 0 27px;border-radius:8px;font-size:15px;font-weight:800}
.legal p{font-size:11px;color:#788aa3;line-height:1.9;margin-bottom:10px}.legal strong{color:#526780}
.source-links{display:flex;gap:20px;flex-wrap:wrap}.source-links a{font-size:11px;font-weight:750;text-decoration:none;color:#3977d6}.source-links a:hover{text-decoration:underline}
footer{font-size:11px;color:#a4b0c1;text-align:center;padding:0 0 30px}
@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}.result-card{min-height:220px}h1{letter-spacing:-1.5px}.intro{margin-top:30px}}
@media(max-width:580px){.page-shell{padding:0 16px}.topbar{height:75px}.top-note{font-size:10px;padding:7px 9px}.intro{margin:22px auto 28px}h1{font-size:34px;letter-spacing:-1.4px}.intro p{font-size:13px}.panel{padding:20px;border-radius:17px}.panel-heading{margin-bottom:22px}.results-panel .result-heading{margin-bottom:15px}#result-content{grid-template-columns:1fr}.result-card{min-height:0;padding:17px}.result-caption{margin-top:11px}.main-date{font-size:28px}.result-divider{margin:12px 0}.summary{padding:22px 18px}.timeline,.timeline.two-steps{grid-template-columns:1fr}.step{min-height:0;padding:14px 16px}.step-marker{margin-bottom:5px}.summary-note{text-align:left}.legal{padding:18px}.realtime-pill{font-size:9px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* V2 — typography, calculator, navigation and accessible themes */
:root{color-scheme:light;--ink:#182b45;--muted:#70849b;--line:#e0e9f4;--card:#fff;--bg:#f4f7fc;--shadow:0 16px 42px rgba(22,53,100,.055)}
html{font-family:"Be Vietnam Pro",ui-sans-serif,system-ui,-apple-system,sans-serif}
body{line-height:1.65}
button,input,select{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #82b1ff;outline-offset:3px}
[hidden]{display:none!important}
.page-shell{max-width:1168px}
.topbar{height:90px}
.brand{font-size:21px}
.brand-symbol{height:35px;width:35px;font-size:22px}
.topbar-actions{display:flex;align-items:center;gap:12px}
.top-note{font-size:12px}
.theme-toggle{border:1px solid var(--line);border-radius:100px;background:var(--card);color:var(--ink);padding:8px 15px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;min-height:42px;transition:background .2s,transform .2s,border-color .2s}
.theme-toggle:hover{transform:translateY(-1px);border-color:#a2b9df}
#theme-icon{font-size:19px;line-height:1}
.tool-tabs{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:7px;border-radius:16px;max-width:540px;margin:16px auto 0;box-shadow:var(--shadow)}
.tool-tab{border:0;background:transparent;color:#7b8ba3;border-radius:11px;padding:12px 20px;font-size:13px;font-weight:800;min-height:45px;flex:1;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.tool-tab span{font-size:17px;vertical-align:-1px;margin-right:4px}
.tool-tab.active{background:#2e68e8;color:white;box-shadow:0 5px 12px #3069e82c}
.tool-tab:not(.active):hover{background:#edf3ff;color:#3669bb}
.intro{margin:49px auto 43px}
.intro .eyebrow{font-size:12px}
h1{font-size:clamp(35px,4.7vw,54px);letter-spacing:-2.4px}
.intro p{font-size:16px;line-height:1.85}
.panel{border-color:var(--line);background:var(--card);padding:29px}
.panel-heading h2{font-size:18px}
.panel-heading p{font-size:13px}
.panel-heading{margin-bottom:32px}
.input-group label{font-size:14px;margin-bottom:11px}
.field-wrap{height:61px}
input[type=date]{font-size:16px}
.assumption-box p{font-size:13px}
.assumption-title{font-size:13px}
.tiny-footnote{font-size:12px}
.result-card{padding:19px 17px}
.identity{font-size:12px}
.remaining{font-size:11px}
.result-caption{font-size:13px}
.main-date{font-size:clamp(22px,2.5vw,30px)}
.detail-row{font-size:12px}
.summary{border-color:var(--line);padding:29px}
.summary h2{font-size:22px}
.summary-eyebrow{font-size:12px}
.step-period{font-size:13px}
.step-label,.summary-note{font-size:12px}
.step-amount{font-size:13px}
.legal-head h2{font-size:15px}
.legal p{font-size:13px}
.source-links a{font-size:12px}
footer{font-size:12px}

/* Salary form */
.salary-intro{max-width:700px}
.salary-layout{grid-template-columns:1fr 1fr}
.salary-input-panel{min-width:0}
.mode-switch{display:flex;padding:5px;background:#edf3fd;border-radius:13px;gap:4px;margin:-6px 0 27px}
.mode-btn{flex:1;min-width:0;padding:11px 10px;border:0;border-radius:10px;background:transparent;color:#7487a3;font-size:14px;font-weight:800;transition:all .2s}
.mode-btn.active{background:#fff;color:#2b66dc;box-shadow:0 2px 10px #2c55951a}
.salary-amount-group{margin-bottom:23px}
.money-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fbfcff;border:1px solid #dce7f2;border-radius:12px;height:63px;padding:0 15px;transition:border-color .2s,box-shadow .2s}
.money-wrap:focus-within{border-color:#7ba8ff;box-shadow:0 0 0 4px #ebf2ff}
.money-wrap input{border:0;outline:0;min-width:0;width:100%;background:transparent;color:#243955;font-size:21px;font-weight:800;letter-spacing:-.4px}
.money-wrap>span{color:#7186a4;font-weight:800;font-size:12px}
.field-helper{font-size:12px;color:#8da0b7;margin:7px 0 0}
.salary-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.select-control{height:55px;border:1px solid #dce7f2;border-radius:12px;color:#2f4461;background:#fbfcff;padding:0 12px;font-size:14px;font-weight:700;width:100%;cursor:pointer}
.stepper{display:flex;height:55px;align-items:center;border:1px solid #dce7f2;border-radius:12px;background:#fbfcff;overflow:hidden}
.stepper button{height:100%;width:44px;flex:0 0 44px;border:0;background:transparent;color:#3d6bb8;font-size:23px;font-weight:600}
.stepper button:hover{background:#e9f0ff}
.stepper input{min-width:0;width:100%;border:0;outline:0;background:transparent;text-align:center;font-size:17px;font-weight:800;color:#2d4566;appearance:textfield;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.check-row{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.6;font-weight:700;color:#536983;cursor:pointer;margin:8px 0 13px}
.check-row input{accent-color:#2e68e8;height:17px;width:17px;flex:0 0 17px}
.custom-base-group{margin:12px 0 21px}
.custom-base-group .money-wrap{height:55px}
.custom-base-group .money-wrap input{font-size:17px}
.salary-assumptions{margin:22px 0 0}

/* Salary output */
.salary-highlight{background:linear-gradient(140deg,#eaf7f2,#eef9f7);border:1px solid #d8f0e6;border-radius:15px;padding:22px 22px 20px;margin-bottom:22px}
.salary-empty{min-height:330px;border:1px dashed #ccdaeb;border-radius:15px;background:#f9fbff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.salary-empty-icon{display:grid;place-items:center;width:55px;height:55px;border-radius:17px;color:#2e68e8;background:#e7f0ff;font-size:27px;font-weight:800;margin-bottom:16px}
.salary-empty h3{font-size:18px;color:#314967;margin:0 0 8px}
.salary-empty p{font-size:13px;color:#8494ac;max-width:305px;margin:0;line-height:1.85}
.money-wrap input::placeholder{color:#a1b0c4;font-weight:500;letter-spacing:0;font-size:15px}
.highlight-label{font-size:12px;letter-spacing:1.6px;color:#409d7b;font-weight:900}
.highlight-number{font-size:clamp(25px,3vw,36px);line-height:1.42;color:#11825b;letter-spacing:-1.1px;font-weight:800;overflow-wrap:anywhere;margin:6px 0}
.highlight-desc{font-size:12px;color:#669889}
.breakdown-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800;color:#596e88;margin-bottom:9px}
.breakdown-heading span:last-child{font-size:11px;color:#97a6ba;font-weight:600}
.breakdown-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#7b8da4;padding:8px 0}
.breakdown-row strong{color:#435671;white-space:nowrap;font-size:13px;font-weight:750}
.breakdown-row.negative strong{color:#be6871}
.breakdown-row.total{border-top:1px dashed #d6e1ee;padding-top:14px;margin-top:6px;font-size:15px;font-weight:800;color:#283e58}
.breakdown-row.total strong{color:#188b63;font-size:16px;font-weight:900}
.salary-bottom{border-radius:11px;background:#f3f7fd;padding:13px 15px;margin-top:15px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#6e819d}
.salary-bottom strong{font-size:15px;color:#304967}
.salary-legal{margin-top:27px}

/* Back to top */
.back-to-top{position:fixed;right:27px;bottom:25px;width:50px;height:50px;border-radius:16px;border:1px solid #ccd9eb;background:#2e68e8;color:white;box-shadow:0 10px 28px #326ee04f;font-size:24px;line-height:1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s,transform .22s,visibility .22s;z-index:40}
.back-to-top.visible{visibility:visible;opacity:1;transform:translateY(0)}
.back-to-top:hover{background:#1c56c4}

/* Dark palette, including all surfaces and form controls */
html[data-theme="dark"]{color-scheme:dark;--ink:#e8f0fc;--muted:#a4b6cd;--line:#30435a;--card:#1b293a;--bg:#101723;--shadow:0 14px 42px #0002}
html[data-theme="dark"] body{background:radial-gradient(ellipse 55% 18% at 50% 0%,#1b3155 0%,transparent 100%),var(--bg)}
html[data-theme="dark"] .brand,html[data-theme="dark"] .panel-heading h2,html[data-theme="dark"] .summary h2,html[data-theme="dark"] .legal-head h2{color:#edf3fc}
html[data-theme="dark"] .top-note,html[data-theme="dark"] .tool-tabs,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .panel,html[data-theme="dark"] .summary{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .tool-tab:not(.active){color:#adbed3}
html[data-theme="dark"] .tool-tab:not(.active):hover{background:#29415f;color:#dce9fb}
html[data-theme="dark"] .intro p,html[data-theme="dark"] .panel-heading p,html[data-theme="dark"] .top-note{color:#a1b2c9}
html[data-theme="dark"] .input-group label,html[data-theme="dark"] .check-row{color:#c7d5e7}
html[data-theme="dark"] .field-wrap,html[data-theme="dark"] .money-wrap,html[data-theme="dark"] .select-control,html[data-theme="dark"] .stepper{background:#152337;border-color:#3b4f69}
html[data-theme="dark"] .field-wrap:focus-within,html[data-theme="dark"] .money-wrap:focus-within{box-shadow:0 0 0 4px #2355a744}
html[data-theme="dark"] input[type=date],html[data-theme="dark"] .money-wrap input,html[data-theme="dark"] .select-control,html[data-theme="dark"] .stepper input{color:#eef4fe}
html[data-theme="dark"] .mode-switch{background:#122034}
html[data-theme="dark"] .mode-btn{color:#98aac5}
html[data-theme="dark"] .mode-btn.active{background:#315e9d;color:#f5faff;box-shadow:none}
html[data-theme="dark"] .assumption-box,html[data-theme="dark"] .legal{background:#1b3046;border-color:#314c6b}
html[data-theme="dark"] .assumption-box p,html[data-theme="dark"] .legal p,html[data-theme="dark"] .assumption-box strong,html[data-theme="dark"] .legal strong{color:#b6c9e0}
html[data-theme="dark"] .circle-icon.blue{background:#29476e;color:#9ac4ff}
html[data-theme="dark"] .circle-icon.green{background:#244d47;color:#81ddba}
html[data-theme="dark"] .circle-icon.gray{background:#293f59;color:#a8c2e0}
html[data-theme="dark"] .mother-result{background:linear-gradient(150deg,#2e2947,#28253f);border-color:#49416b}
html[data-theme="dark"] .father-result{background:linear-gradient(150deg,#21394e,#1c344b);border-color:#315677}
html[data-theme="dark"] .result-caption,html[data-theme="dark"] .detail-row span,html[data-theme="dark"] .summary-note{color:#a1b1c8}
html[data-theme="dark"] .detail-row strong,html[data-theme="dark"] .step-period,html[data-theme="dark"] .summary-note strong{color:#dce9f9}
html[data-theme="dark"] .main-date{color:#c2a8ff}
html[data-theme="dark"] .father-result .main-date{color:#89c6f9}
html[data-theme="dark"] .realtime-pill{background:#264c42;color:#7ee0b0}
html[data-theme="dark"] .step{background:#18273b;border-color:#30435a}
html[data-theme="dark"] .step.highlight{background:#1a3a35;border-color:#2b6757}
html[data-theme="dark"] .step-label{color:#a7bad0}
html[data-theme="dark"] .salary-highlight{background:linear-gradient(135deg,#1a4038,#1b3536);border-color:#2a6552}
html[data-theme="dark"] .salary-empty{background:#15243a;border-color:#38506d}
html[data-theme="dark"] .salary-empty-icon{background:#244b78;color:#a6cdff}
html[data-theme="dark"] .salary-empty h3{color:#e0edfd}
html[data-theme="dark"] .salary-empty p{color:#a4b9d1}
html[data-theme="dark"] .highlight-number{color:#85e7bd}
html[data-theme="dark"] .highlight-desc{color:#a9d5c7}
html[data-theme="dark"] .breakdown-heading,html[data-theme="dark"] .breakdown-row.total{color:#d0deee}
html[data-theme="dark"] .breakdown-row{color:#adbed3}
html[data-theme="dark"] .breakdown-row strong{color:#ecf2fc}
html[data-theme="dark"] .breakdown-row.negative strong{color:#f0a1a8}
html[data-theme="dark"] .breakdown-row.total strong{color:#83e5b7}
html[data-theme="dark"] .salary-bottom{background:#15243a;color:#a5b6cd}
html[data-theme="dark"] .salary-bottom strong{color:#e9f2fc}
html[data-theme="dark"] .stepper button{color:#94c4ff}
html[data-theme="dark"] .stepper button:hover{background:#2c4665}
html[data-theme="dark"] footer{color:#7f94ad}

@media(max-width:900px){.salary-layout{grid-template-columns:1fr}.intro{margin-top:32px}.salary-results-panel{max-width:none}}
@media(max-width:580px){
  .topbar{height:79px}.page-shell{padding:0 15px}
  .brand{font-size:18px}.brand-symbol{width:31px;height:31px}
  .top-note{display:none}.theme-toggle{padding:9px 12px;min-height:40px}.theme-toggle #theme-label{display:none}
  .tool-tabs{margin-top:5px;padding:5px;gap:4px;border-radius:13px}
  .tool-tab{font-size:11px;padding:10px 4px;min-height:44px;white-space:normal;line-height:1.45}
  .tool-tab span{font-size:13px;margin-right:2px}
  .intro{margin:31px auto 29px}.intro .eyebrow{font-size:10px}
  h1{font-size:31px;line-height:1.29;letter-spacing:-1.5px}
  .intro p{font-size:14px;line-height:1.8}
  .panel{padding:20px}.panel-heading{margin-bottom:22px}
  .panel-heading h2{font-size:16px}.panel-heading p{font-size:12px}
  .input-group label{font-size:14px}
  .result-card{padding:18px}.main-date{font-size:29px}.detail-row{font-size:13px}
  .salary-form-grid{grid-template-columns:1fr;gap:1px}
  .salary-form-grid .input-group{margin-bottom:18px}
  .salary-layout .panel{padding:19px}.money-wrap input{font-size:19px}
  .mode-btn{font-size:12px}.highlight-number{font-size:28px}
  .breakdown-row{font-size:12px}.breakdown-row strong{font-size:12px}
  .summary h2{font-size:19px}.step-label,.summary-note{font-size:13px}
  .legal p{font-size:12px}.back-to-top{width:45px;height:45px;right:16px;bottom:16px;border-radius:14px}
  footer{padding:0 15px 24px;line-height:1.8}
}
@media(max-width:350px){.result-heading .realtime-pill{display:none}.tool-tab{font-size:10px}.breakdown-row{gap:5px}}