:root { --ink:#20312c; --muted:#66756f; --line:#dce6df; --paper:#f7f8f3; --mint:#d9eee4; --peach:#f9dfcf; --lavender:#e6e2f6; --white:#fffefa; --input:#fff; --result:#eff6f1; --weight-result:#fff4ed; }
[data-theme="dark"] { --ink:#f2f3f5; --muted:#abb0b8; --line:#353941; --paper:#111214; --mint:#2b2e34; --peach:#343035; --lavender:#302f38; --white:#1b1d21; --input:#24262b; --result:#292c31; --weight-result:#302c30; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
.page-shell { width:min(1120px, calc(100% - 40px)); margin:auto; position:relative; }
.is-loading .tool-grid { visibility:hidden; }.navbar { min-height:76px; display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); }.navbar nav { position:static; display:flex; gap:23px; margin:0 124px 0 auto; }.navbar nav a { color:var(--muted); font-size:.88rem; text-decoration:none; }.navbar nav a:hover { color:var(--ink); }.navbar .theme-toggle { position:absolute; top:17px; right:0; z-index:10; margin:0; }
.hero { min-height:360px; position:relative; padding:30px 0 42px; border-bottom:1px solid var(--line); }
.brand { font-size:1.2rem; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.05em; }.brand span { color:#e66d48; margin-right:3px; }.theme-toggle { position:static; display:flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); cursor:pointer; font:600 .75rem "DM Sans",sans-serif; }.theme-toggle:hover { background:var(--mint); }
.hero-copy { margin-top:68px; }.eyebrow { color:#789087; text-transform:uppercase; letter-spacing:.11em; font-size:.7rem; font-weight:700; margin:0 0 9px; }
h1,h2 { margin:0; letter-spacing:-.055em; } h1 { font-family:Fraunces,serif; font-size:clamp(2.7rem,6vw,5rem); line-height:1.03; } h1 em { color:#e56f4c; font-weight:600; } .intro { max-width:470px; color:var(--muted); font-size:1.05rem; margin:20px 0 0; line-height:1.5; }
nav { position:absolute; right:0; top:76px; display:flex; gap:23px; } nav a { color:var(--muted); font-size:.88rem; text-decoration:none; } nav a:hover { color:var(--ink); }
.tool-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:34px 0 38px; }.card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 5px 18px rgba(48,75,62,.04); }.tax-card { grid-column:span 2; }
.card-heading { display:flex; align-items:center; gap:13px; margin-bottom:25px; }.card-heading .eyebrow { margin-bottom:3px; }.card-heading h2 { font-size:1.45rem; }.icon { width:41px; height:41px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:1.1rem; }.mint { background:var(--mint); }.peach { background:var(--peach); }.lavender { background:var(--lavender); }
label { color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.02em; display:block; } input,select { display:block; width:100%; height:46px; margin-top:7px; border:1px solid var(--line); border-radius:9px; background:var(--input); color:var(--ink); padding:0 12px; font:500 .95rem "DM Sans",sans-serif; } input:focus,select:focus { outline:3px solid #365d4d; border-color:#8ab8a2; }
.conversion-row { display:grid; grid-template-columns:1fr 42px 1.45fr; gap:12px; align-items:end; }.swap { height:46px; border:1px solid var(--line); border-radius:9px; background:var(--input); color:var(--ink); cursor:pointer; font-size:1.25rem; }.swap:hover { background:var(--mint); }.result-panel { padding:17px 18px; margin-top:18px; border-radius:11px; background:var(--result); }.result-panel span { font-size:1.55rem; font-weight:700; letter-spacing:-.04em; display:block; }.result-panel small { color:var(--muted); display:block; margin-top:4px; }.note { font-size:.72rem; line-height:1.45; color:var(--muted); margin:13px 0 0; }
.weight-inputs { grid-template-columns:1fr 1.35fr; }.weight-results { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }.weight-results div { background:var(--weight-result); padding:13px; border-radius:10px; }.weight-results span { display:block; font-size:1.2rem; font-weight:700; letter-spacing:-.04em; }.weight-results small { color:var(--muted); font-size:.72rem; }
.tax-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; max-width:570px; }.tax-summary { margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.tax-summary > div { padding:16px 20px 0 0; }.tax-summary > div+div { padding-left:20px; border-left:1px solid var(--line); }.tax-summary span { color:var(--muted); font-size:.78rem; display:block; }.tax-summary strong { font-size:1.25rem; margin-top:4px; display:block; letter-spacing:-.04em; }.tax-summary .total strong { color:#cf5d3c; }.tax-summary .euro-total strong { color:#4c7363; } .tax-summary b { color:var(--ink); }
footer { padding:22px 0 32px; text-align:center; color:#89968f; font-size:.78rem; border-top:1px solid var(--line); }
@media (max-width:680px) { .page-shell { width:min(100% - 28px,1120px); }.navbar { min-height:66px; gap:12px; }.navbar nav { display:none; }.theme-toggle { position:static; margin-left:auto; }.theme-label { display:none; }.tool-grid { grid-template-columns:1fr; padding-top:22px; }.tax-card { grid-column:auto; }.card { padding:21px; }.conversion-row { grid-template-columns:1fr; }.swap { display:none; }.weight-results { grid-template-columns:1fr; }.tax-form,.tax-summary { grid-template-columns:1fr; }.tax-summary > div+div { padding-left:0; border-left:0; }.tax-summary > div { padding:12px 0 0; } }