:root { color-scheme: dark; --blue:#1c2f52; --deep:#0b1730; --gold:#e4b83a; --sun:#ffd447; --green:#6b8a3a; --orange:#c97a13; --text:#f4f0e6; --muted:#c8c2b5; --line:#415a77; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% 0,#284c7a 0,transparent 35%),linear-gradient(145deg,var(--blue),var(--deep) 70%); }
a { color:inherit; text-decoration:none; }
.topbar { min-height:78px; padding:14px clamp(20px,4vw,60px); display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; border-bottom:1px solid #415a7788; background:#08142ad9; backdrop-filter:blur(18px); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; color:var(--sun); font-size:1.35rem; }
.brand span { color:var(--text); }
.topbar > div { display:grid; gap:3px; }
.topbar > div span { color:var(--muted); font-size:.82rem; }
.new-button,.action { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid #e4b83a88; border-radius:13px; background:var(--gold); color:#17213a; font-weight:800; }
main { width:min(1420px,calc(100% - 40px)); margin:0 auto; padding:clamp(30px,5vw,64px) 0 70px; }
.hero { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; }
.eyebrow { margin:0; color:var(--gold); font-weight:800; letter-spacing:.12em; }
h1 { margin:8px 0 5px; font-size:clamp(38px,5vw,66px); }
.hero p:last-child { margin:0; color:var(--muted); font-size:1.08rem; }
.summary { padding:16px 20px; border:1px solid var(--line); border-radius:16px; background:#0b1730aa; color:var(--muted); }
.filters { display:flex; gap:10px; margin:34px 0 22px; }
.filters button { min-height:44px; padding:0 20px; border:1px solid var(--line); border-radius:999px; background:#0b173099; color:var(--muted); font:inherit; cursor:pointer; }
.filters button.is-active { border-color:var(--gold); color:#17213a; background:var(--gold); font-weight:800; }
.proposal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.proposal-card { min-width:0; padding:22px; border:1px solid #415a7799; border-radius:20px; background:linear-gradient(160deg,#12284bcf,#09162dcc); box-shadow:0 18px 45px #0003; display:grid; gap:18px; }
.card-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }
.card-head h2 { margin:4px 0 0; font-size:1.35rem; overflow-wrap:anywhere; }
.customer { color:var(--muted); font-size:.9rem; }
.status { flex:0 0 auto; padding:7px 11px; border-radius:999px; font-size:.78rem; font-weight:800; border:1px solid var(--line); }
.status-draft { color:var(--muted); }.status-quoted { color:var(--sun); border-color:#e4b83a88; }.status-signed { color:#c6e097; border-color:#6b8a3a; }
.facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fact { padding:12px; border-radius:13px; background:#08162dcc; display:grid; gap:5px; }
.fact span { color:var(--muted); font-size:.78rem; }.fact strong { font-size:1.05rem; }
.actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.actions .action { min-height:40px; padding:0 13px; font-size:.86rem; }
.actions .secondary { background:transparent; color:var(--text); border-color:var(--line); }
.actions button { cursor:pointer; font:inherit; }
.actions .danger { margin-left:auto; color:#f3b29f; border-color:#c97a1377; background:transparent; }
.archive-dialog { width:min(460px,calc(100% - 32px)); color:var(--text); border:1px solid var(--line); border-radius:22px; background:linear-gradient(160deg,#172d51,#0b1730); box-shadow:0 28px 90px #000a; }
.archive-dialog::backdrop { background:#030916bb; backdrop-filter:blur(5px); }
.archive-dialog form { display:grid; justify-items:center; gap:12px; padding:18px; text-align:center; }
.archive-dialog h2,.archive-dialog p { margin:0; }
.archive-dialog p { color:var(--muted); line-height:1.6; }
.dialog-mark { width:46px; height:46px; display:grid; place-items:center; color:#2b1605; border-radius:50%; background:var(--orange); font-size:1.5rem; font-weight:900; }
.dialog-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.dialog-actions .danger { color:#fff7f2; border-color:#d77c4b; background:#9c4328; }
.empty { grid-column:1/-1; min-height:260px; display:grid; place-items:center; text-align:center; border:1px dashed var(--line); border-radius:22px; color:var(--muted); background:#0b173066; }
@media (max-width:1000px) { .proposal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:660px) { .topbar { grid-template-columns:1fr auto; }.topbar > div { display:none; }.hero { grid-template-columns:1fr; }.summary { justify-self:start; }.proposal-grid { grid-template-columns:1fr; }.filters { overflow-x:auto; }.filters button { flex:0 0 auto; } }
@media (min-width:1900px) { .proposal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } main { width:min(1760px,calc(100% - 80px)); } }