.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-5) var(--space-4) var(--space-7)}.hero{text-align:center;margin-bottom:var(--space-5)}.wordmark{font-size:clamp(2.25rem,5vw,3rem);margin:0;color:var(--text)}.wordmark:after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.15em;border-radius:50%;background:var(--accent);vertical-align:middle;transform:translateY(-.35em)}.tagline{color:var(--text-muted);margin:var(--space-2) 0 0;font-size:1.05rem}.calculator{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--space-4);flex:1;justify-content:center;min-height:60vh}.invoice-field{display:flex;flex-direction:column;gap:var(--space-2)}.invoice-label{font-weight:600;color:var(--text-muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}.invoice-input-row{display:flex;align-items:center;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-3) var(--space-4);transition:border-color var(--motion-ui),box-shadow var(--motion-ui)}.invoice-input-row:hover{border-color:var(--accent)}.invoice-input-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #1f6f542e,var(--shadow-card)}.invoice-input-row--invalid,.invoice-input-row--invalid:hover{border-color:var(--danger)}.invoice-input-row--invalid:focus-within{border-color:var(--danger);box-shadow:0 0 0 3px #c1442d2e,var(--shadow-card)}.currency-sign{font-size:1.75rem;color:var(--text-muted);margin-right:var(--space-2)}.invoice-input-row input{border:none;outline:none;background:transparent;font-size:2rem;font-variant-numeric:tabular-nums;width:100%;color:var(--text)}.invoice-input-row input::-webkit-outer-spin-button,.invoice-input-row input::-webkit-inner-spin-button,.settings-grid input::-webkit-outer-spin-button,.settings-grid input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.invoice-input-row input[type=number],.settings-grid input[type=number]{-moz-appearance:textfield}.field-error{color:var(--danger);font-size:.9rem}.result{background:var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-5) var(--space-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-1)}.result-label{color:var(--text-muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}.result-amount{font-size:clamp(2.75rem,9vw,4.5rem);color:var(--accent);font-variant-numeric:tabular-nums;transition:color var(--motion-number)}.digit-roll{display:inline-block}@keyframes digit-roll{0%{transform:translateY(.3em);opacity:0}to{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: no-preference){.digit-roll{animation:digit-roll var(--motion-number)}}.result-rate{color:var(--text-muted);font-size:.95rem}.record-button{margin-top:var(--space-3);border:none;border-radius:var(--radius);padding:var(--space-2) var(--space-4);min-height:44px;background:var(--accent);color:var(--surface-1);font-weight:600;font-size:.95rem;cursor:pointer;transition:background var(--motion-ui),transform var(--motion-ui),box-shadow var(--motion-ui)}.record-button:hover:not(:disabled){background:#195c46}.record-button:active:not(:disabled){transform:translateY(1px)}.record-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.record-button:disabled{background:var(--line);color:var(--text-muted);cursor:not-allowed}.saved-total{display:flex;align-items:baseline;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius)}.saved-total-label{color:var(--text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}.saved-total-amount{font-size:1.5rem;color:var(--text);font-variant-numeric:tabular-nums}.history{display:flex;flex-direction:column;gap:var(--space-2)}.history-header{display:flex;align-items:center;justify-content:space-between}.history-heading{font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0}.export-button{display:inline-flex;align-items:center;gap:var(--space-1);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-1) var(--space-3);min-height:44px;background:var(--surface-1);color:var(--text);font-size:.85rem;font-weight:500;cursor:pointer;transition:border-color var(--motion-ui),color var(--motion-ui)}.export-button:hover{border-color:var(--accent);color:var(--accent)}.export-button:active{transform:translateY(1px)}.export-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pro-badge{background:var(--accent-support);color:var(--surface-1);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:4px}.history-empty{color:var(--text-muted);font-size:.9rem;padding:var(--space-3);background:var(--surface-1);border:1px dashed var(--line);border-radius:var(--radius);margin:0}.history-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.history-row{display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:var(--space-3);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:.9rem}.history-date{color:var(--text-muted)}.history-amount{font-variant-numeric:tabular-nums}.history-rate{color:var(--text-muted);font-variant-numeric:tabular-nums}.history-set-aside{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}.history-delete{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-1);color:var(--text-muted);width:32px;height:32px;min-width:44px;min-height:44px;cursor:pointer;transition:background var(--motion-ui),color var(--motion-ui),border-color var(--motion-ui)}.history-delete:hover{background:var(--danger);color:var(--surface-1);border-color:var(--danger)}.history-delete:active{transform:translateY(1px)}.history-delete:focus-visible{outline:2px solid var(--danger);outline-offset:2px}@media (max-width: 480px){.history-row{grid-template-columns:1fr auto;grid-template-areas:"date delete" "amount amount" "rate set-aside"}.history-date{grid-area:date}.history-amount{grid-area:amount}.history-rate{grid-area:rate}.history-set-aside{grid-area:set-aside;justify-self:end}.history-delete{grid-area:delete;justify-self:end}}.reset-year{display:flex;justify-content:center}.reset-year-button{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-4);min-height:44px;background:transparent;color:var(--text-muted);font-size:.9rem;cursor:pointer;transition:border-color var(--motion-ui),color var(--motion-ui)}.reset-year-button:hover{border-color:var(--accent-support);color:var(--accent-support)}.reset-year-button:active{transform:translateY(1px)}.reset-year-button:focus-visible{outline:2px solid var(--accent-support);outline-offset:2px}.reset-confirm{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;text-align:center;background:var(--surface-1);border:1px solid var(--accent-support);border-radius:var(--radius);padding:var(--space-4)}.reset-confirm-text{margin:0;color:var(--text);font-size:.9rem}.reset-confirm-actions{display:flex;gap:var(--space-2)}.reset-confirm-cancel,.reset-confirm-yes{border-radius:var(--radius);padding:var(--space-2) var(--space-4);min-height:44px;font-size:.9rem;cursor:pointer;transition:background var(--motion-ui),color var(--motion-ui),border-color var(--motion-ui)}.reset-confirm-cancel{border:1px solid var(--line);background:transparent;color:var(--text)}.reset-confirm-cancel:hover{border-color:var(--text)}.reset-confirm-yes{border:1px solid var(--accent-support);background:var(--accent-support);color:var(--surface-1);font-weight:600}.reset-confirm-yes:hover{background:#a03623}.reset-confirm-cancel:active,.reset-confirm-yes:active{transform:translateY(1px)}.reset-confirm-cancel:focus-visible,.reset-confirm-yes:focus-visible{outline:2px solid var(--accent-support);outline-offset:2px}.settings{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3) var(--space-4)}.settings summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:500;color:var(--text-muted)}.settings summary:hover{color:var(--text)}.settings summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-3)}.settings-grid label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.9rem;color:var(--text-muted)}.settings-grid input,.settings-grid select{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2);background:var(--surface-1);color:var(--text);transition:border-color var(--motion-ui)}.settings-grid input:hover,.settings-grid select:hover{border-color:var(--accent)}.settings-grid input:focus-visible,.settings-grid select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.settings-grid input[aria-invalid=true]{border-color:var(--danger)}.settings-grid input[aria-invalid=true]:focus-visible{outline-color:var(--danger)}@media (max-width: 480px){.settings-grid{grid-template-columns:1fr}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1b2a2f73;display:flex;align-items:center;justify-content:center;padding:var(--space-4);z-index:10}.modal{background:var(--surface-1);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-5);max-width:420px;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}.modal-badge{background:var(--accent-support);color:var(--surface-1);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:4px}.modal-title{margin:0;font-size:1.4rem;color:var(--text)}.modal-body{margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.5}.modal-dismiss{align-self:flex-end;border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-4);min-height:44px;background:transparent;color:var(--text);font-weight:500;cursor:pointer;transition:border-color var(--motion-ui),background var(--motion-ui)}.modal-dismiss:hover{border-color:var(--accent);background:var(--surface-2)}.modal-dismiss:active{transform:translateY(1px)}.modal-dismiss:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.site-info{width:100%;max-width:720px;margin-top:var(--space-7);padding:var(--space-6) var(--space-4) 0;display:flex;flex-direction:column;gap:var(--space-5);border-top:1px solid var(--line)}.site-info-heading{font-size:1.35rem;color:var(--text);margin:0 0 var(--space-3)}.site-info-copy p,.faq-item dd{color:var(--text-muted);font-size:.98rem;line-height:1.6;max-width:68ch;margin:0}.site-info-faq dl{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}.faq-item dt{font-weight:600;color:var(--text);margin-bottom:var(--space-1)}.site-info-links{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-5) 0 var(--space-6)}.github-link{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-5);border-radius:var(--radius);background:var(--accent);color:var(--surface-1);font-weight:600;text-decoration:none;transition:background var(--motion-ui),transform var(--motion-ui)}.github-link:hover{background:#195c46}.github-link:active{transform:translateY(1px)}.github-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.portfolio-link{margin:0;font-size:.9rem;color:var(--text-muted)}.portfolio-link a{color:var(--accent);text-decoration:none}.portfolio-link a:hover{text-decoration:underline}.disclaimer{margin:0;font-size:.8rem;color:var(--text-muted);max-width:60ch;line-height:1.5}:root{--bg: #f7f3ea;--surface-1: #ffffff;--surface-2: #ede6d6;--text: #1b2a2f;--text-muted: #5b6b65;--accent: #1f6f54;--accent-support: #c1442d;--success: #1f6f54;--danger: #c1442d;--line: rgba(27, 42, 47, .12);--font-display: "Fraunces", ui-serif, Georgia, serif;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--space-6: 48px;--space-7: 64px;--radius: 6px;--shadow-card: 0 2px 8px rgba(27, 42, 47, .08), 0 1px 2px rgba(27, 42, 47, .06);--motion-ui: .18s ease-out;--motion-number: .22s ease-out;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--line) 35px,var(--line) 36px);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5;min-height:100vh}#root{min-height:100vh}h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}button,input,select{font-family:inherit;font-size:1rem}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
