:root { --ink:#14261f; --muted:#62736c; --line:#dce5df; --paper:#fff; --canvas:#f3f7f4; --accent:#087f5b; --accent-dark:#056747; --soft:#e8f5ee; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
button,input { font:inherit; }
.app-shell { width:min(100%,680px); margin:0 auto; padding:28px 16px 44px; }
.site-header { padding:4px 4px 24px; }
.eyebrow,.section-label { margin:0; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.1em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(1.75rem,6vw,2.3rem); line-height:1.2; } h2 { margin:2px 0 0; font-size:1.15rem; }
.notice { margin:0; color:var(--muted); font-size:.88rem; }
.card { margin-bottom:14px; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 2px 8px rgba(20,38,31,.03); }
.service-card,.section-heading,.option-row,.check-row,.total-row,.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.service-status,.tax-label { padding:4px 8px; border-radius:999px; color:var(--accent-dark); background:var(--soft); font-size:.75rem; font-weight:700; white-space:nowrap; }
.required-note,.field-help { margin:0; color:var(--muted); font-size:.8rem; } .required { color:var(--danger); } .required-note span { color:var(--danger); }
.field-group { padding-top:20px; } .field-group.bordered,.option-row.bordered,.check-row.bordered { margin-top:20px; border-top:1px solid var(--line); }
.field-group label,.toggle-label { font-weight:750; } .field-help { margin-top:3px; }
.stepper { display:flex; align-items:center; gap:8px; margin-top:12px; } .stepper input { width:68px; height:42px; border:1px solid #bdcbc3; border-radius:9px; text-align:center; font-weight:700; appearance:textfield; } .stepper input::-webkit-inner-spin-button { appearance:none; }
.stepper-button { width:42px; height:42px; border:1px solid #bdcbc3; border-radius:9px; background:#fff; color:var(--ink); font-size:1.35rem; cursor:pointer; } .stepper-button:hover { background:var(--soft); }
.unit-label { font-size:.9rem; color:var(--muted); } .option-row,.check-row { padding-top:20px; } .nested-field { margin-left:8px; padding-left:16px; border-left:3px solid var(--soft); }
.switch { position:relative; display:inline-block; width:48px; height:28px; flex:none; } .switch input { opacity:0; width:0; height:0; } .slider { position:absolute; inset:0; border-radius:20px; background:#aebbb4; cursor:pointer; transition:.2s; } .slider:before { content:""; position:absolute; width:20px; height:20px; left:4px; bottom:4px; border-radius:50%; background:#fff; transition:.2s; } .switch input:checked + .slider { background:var(--accent); } .switch input:checked + .slider:before { transform:translateX(20px); }
.check-row { cursor:pointer; } .check-row input { position:absolute; opacity:0; } .check-row > span:first-child { display:grid; gap:2px; } .checkbox-mark { width:24px; height:24px; border:1px solid #aebbb4; border-radius:7px; flex:none; } .check-row input:checked + .checkbox-mark { border-color:var(--accent); background:var(--accent); } .check-row input:checked + .checkbox-mark:after { content:"✓"; display:block; color:white; font-weight:800; text-align:center; line-height:22px; }
.form-error { margin:0 0 14px; padding:12px 14px; border-radius:10px; color:#8a1c13; background:#fef1ef; font-size:.9rem; font-weight:650; }
.estimate-card { border-color:#bbddce; } .breakdown { margin:20px 0 0; } .breakdown div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; } .breakdown dt { color:var(--muted); } .breakdown dd { margin:0; font-weight:700; white-space:nowrap; } .empty-breakdown { margin:20px 0 0; color:var(--muted); font-size:.9rem; }
.total-row { margin-top:16px; padding-top:2px; font-size:1rem; font-weight:750; } .total-row strong { color:var(--accent-dark); font-size:clamp(1.55rem,7vw,2rem); letter-spacing:-.03em; }
.actions { align-items:stretch; } .button { min-height:48px; border:0; border-radius:10px; padding:10px 14px; font-weight:750; cursor:pointer; } .button.primary { flex:1; background:var(--accent); color:#fff; } .button.primary:hover { background:var(--accent-dark); } .button.secondary { color:var(--ink); background:#e5ebe7; } .button:disabled { cursor:not-allowed; opacity:.5; } .button:focus-visible,.stepper-button:focus-visible,input:focus-visible { outline:3px solid #8fd8bd; outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:380px) { .card { padding:16px; } .actions { flex-direction:column; } .button.secondary { order:2; } }
@media print { @page { margin:14mm; } body { background:#fff; } .app-shell { width:100%; max-width:none; padding:0; } .site-header { padding-bottom:12px; } .card { box-shadow:none; border-color:#bbb; margin-bottom:10px; } .service-status,.required-note,.field-group,.option-row,.check-row,.actions { display:none !important; } .estimate-card { display:block; } .notice { color:#333; } }