:root { --ink:#16231e; --muted:#65746e; --paper:#f4f6f4; --card:#fff; --green:#173f35; --green-2:#245e4e; --gold:#b88b42; --line:#dbe2df; --danger:#a93a35; --shadow:0 14px 34px rgba(18,45,37,.09); }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:radial-gradient(circle at top right,#e6efeb 0,transparent 34rem),var(--paper); font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
.site-header { position:sticky; top:0; z-index:20; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px max(18px,env(safe-area-inset-left)); color:#fff; background:rgba(23,63,53,.96); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.12); }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; min-width:0; }.brand img { border-radius:50%; background:#fff; object-fit:contain; }.brand span { display:flex; flex-direction:column; min-width:0; }.brand strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.92rem; }.brand small { color:#c8d9d3; font-size:.75rem; }
.text-button { border:0; background:transparent; color:#d8e7e2; padding:10px; cursor:pointer; }
.page-shell { width:min(1050px,100%); margin:0 auto; padding:28px 18px 110px; }
h1,h2,h3,p { margin-top:0; }.eyebrow { margin-bottom:5px; color:var(--gold); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.hero-row,.form-heading,.detail-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }.hero-row h1,.form-heading h1 { margin-bottom:5px; font-size:clamp(2rem,8vw,3.2rem); line-height:1; letter-spacing:-.04em; }.hero-row p { color:var(--muted); max-width:590px; }
.primary,.secondary,.danger { min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; padding:0 18px; border:1px solid transparent; font-weight:750; text-decoration:none; cursor:pointer; }.primary { color:#fff; background:var(--green); box-shadow:0 8px 20px rgba(23,63,53,.2); }.primary:hover { background:var(--green-2); }.secondary { background:#fff; border-color:var(--line); }.danger { color:var(--danger); background:#fff; border-color:#e6b8b4; }.danger:hover { color:#fff; background:var(--danger); }.action-link { white-space:nowrap; }
.proposal-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }.proposal-card { display:flex; flex-direction:column; gap:5px; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); text-decoration:none; }.proposal-card:hover { border-color:#9eb8af; transform:translateY(-1px); }.proposal-card span:not(.status) { color:var(--muted); font-size:.86rem; }.proposal-card b { margin-top:8px; font-size:1.15rem; }
.status { align-self:flex-start; margin-bottom:6px; padding:4px 8px; border-radius:999px; color:#7b5b20; background:#f5e9cc; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.status.ready { color:#19553d; background:#d7eee3; }
.empty-state,.login-card { padding:clamp(24px,6vw,44px); text-align:center; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }.empty-state p,.login-card p { color:var(--muted); }.login-card { width:min(440px,100%); margin:6vh auto 0; text-align:left; }.stack { display:grid; gap:16px; }
label { display:grid; gap:7px; color:#40524b; font-size:.84rem; font-weight:700; }input,select,textarea { width:100%; border:1px solid #cbd6d2; border-radius:11px; padding:12px 13px; color:var(--ink); background:#fff; outline:none; }input:focus,select:focus,textarea:focus { border-color:var(--green-2); box-shadow:0 0 0 3px rgba(36,94,78,.13); }textarea { resize:vertical; }
.flash { margin-bottom:16px; padding:12px 14px; border-radius:11px; background:#d9eee5; color:#174c39; }.flash.error { background:#f8dfdc; color:var(--danger); }
.save-note { color:var(--muted); font-size:.78rem; }.proposal-form { display:grid; gap:12px; }.form-section { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 5px 16px rgba(18,45,37,.04); }.section-toggle { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border:0; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }.section-toggle span { display:flex; align-items:center; gap:12px; font-weight:800; }.section-toggle b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green); }.section-toggle i { font-style:normal; transition:transform .2s; }.form-section.open .section-toggle i { transform:rotate(180deg); }.section-body { display:none; border-top:1px solid var(--line); padding:18px; }.form-section.open .section-body { display:block; }.grid-two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.form-section.open .grid-two { display:grid; }.span-two { grid-column:1/-1; }.helper { color:var(--muted); font-size:.85rem; }.rate-section { margin:20px 0 7px; color:var(--green); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }.rate-row { display:grid; grid-template-columns:40px 1fr minmax(100px,140px); gap:10px; align-items:center; padding:11px 9px; border-top:1px solid #edf0ef; opacity:.68; }.rate-row.selected { opacity:1; background:#f7faf8; }.rate-row strong,.rate-row small { display:block; }.rate-row small { color:var(--muted); font-size:.73rem; }.switch { display:block; position:relative; }.switch input { position:absolute; opacity:0; }.switch span { width:38px; height:22px; display:block; border-radius:999px; background:#c9d1ce; transition:.2s; }.switch span:after { content:""; width:16px; height:16px; position:absolute; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #71817a; transition:.2s; }.switch input:checked + span { background:var(--green-2); }.switch input:checked + span:after { transform:translateX(16px); }.money-input { position:relative; display:block; }.money-input span { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); }.money-input input { padding-left:25px; }.money-input.wide { margin-top:7px; }.tax-check { grid-column:2/-1; display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:600; }.tax-check input,.check-card input { width:18px; height:18px; }.custom-row { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; padding:13px 0; border-top:1px solid var(--line); }.custom-row .tax-check { grid-column:auto; }.check-card { grid-template-columns:22px 1fr; align-items:center; gap:10px; align-self:end; min-height:48px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; }.check-card span { display:flex; flex-direction:column; }.check-card small { color:var(--muted); font-weight:500; }.sticky-actions { position:fixed; z-index:15; left:0; right:0; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:12px max(18px,calc((100vw - 1050px)/2 + 18px)) max(12px,env(safe-area-inset-bottom)); background:rgba(244,246,244,.94); border-top:1px solid var(--line); backdrop-filter:blur(12px); }
.detail-actions>div { display:flex; gap:10px; }.delete-form { display:inline-flex; }.proposal-preview { padding:clamp(20px,5vw,48px); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }.preview-top { display:flex; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:4px solid var(--green); }.preview-company { display:flex; gap:12px; align-items:center; }.preview-company img { width:72px; height:72px; object-fit:contain; }.preview-company strong,.preview-company span { display:block; }.preview-company span { color:var(--muted); font-size:.82rem; }.quote-meta { text-align:right; }.quote-meta p { margin:0; color:var(--green); font-size:1.3rem; font-weight:800; }.quote-meta b,.quote-meta span { display:block; }.quote-meta span { color:var(--muted); font-size:.78rem; }.client-block { margin:24px 0; padding:16px; background:#f1f5f3; border-radius:12px; }.client-block p { margin:4px 0; }.rates-table h3,.terms h3,.notes h3 { margin:18px 0 0; padding:8px 10px; color:#fff; background:var(--green); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; }.rates-table>div { display:flex; justify-content:space-between; gap:15px; padding:10px; border-bottom:1px solid var(--line); }.rates-table small { display:block; color:var(--muted); }.notes p { padding:12px; white-space:pre-wrap; background:#fbf8f1; border-left:3px solid var(--gold); }.total-card { width:min(330px,100%); margin:20px 0 0 auto; }.total-card span { display:flex; justify-content:space-between; padding:5px 0; }.total-card .grand { margin-top:4px; padding-top:10px; border-top:2px solid var(--green); font-size:1.12rem; }.terms { font-size:.85rem; }.terms h3 { background:#68756f; }
@media (max-width:700px) { .page-shell { padding-top:20px; }.hero-row,.form-heading { align-items:stretch; flex-direction:column; }.hero-row .primary { width:100%; }.grid-two { grid-template-columns:1fr; }.span-two { grid-column:auto; }.save-note { display:none; }.rate-row { grid-template-columns:38px 1fr 105px; padding-inline:3px; }.custom-row { grid-template-columns:1fr 1fr; }.custom-row label:first-child { grid-column:1/-1; }.detail-actions { align-items:stretch; flex-direction:column; }.detail-actions>div { display:grid; grid-template-columns:1fr 1fr; }.delete-form { grid-column:1/-1; }.delete-form .danger { width:100%; }.preview-top { flex-direction:column; }.quote-meta { text-align:left; }.preview-company img { width:58px; height:58px; }.proposal-preview { padding:18px; }.sticky-actions>* { flex:1; } }