/* ============ Proffer design system ============ */ :root{ --bg:#0a0c11; --bg2:#0e1117; --panel:#161a22; --panel2:#12151c; --line:#252b36; --ink:#e8ebf1; --muted:#8b93a5; --muted2:#646c7e; --brand:#3b82f6; --brand2:#22c55e; --accent:#1d4ed8; --danger:#f87171; --warn:#e0b94a; --radius:14px; --shadow:0 20px 60px rgba(0,0,0,.5); /* app-chrome surfaces, themeable (documents keep their own white --doc-* palette) */ --app-grad1:#090b10; --app-grad2:#11141b; --nav-bg:rgba(10,12,17,.8); --nav-bg2:rgba(10,12,17,.92); --cost-bg:#0e1722; --cost-line:#1e3550; } /* Daylight / light theme — opt-in via data-theme on . Tunes ONLY the app chrome variables; the document preview/print (.paper, --doc-*) is untouched, so generated PDFs always render on white exactly as before. Brand stays blue/green; the shades are nudged for AA contrast on light surfaces (identity unchanged). */ :root[data-theme="light"]{ --bg:#eef1f6; --bg2:#e4e9f1; --panel:#ffffff; --panel2:#f3f6fb; --line:#dbe1ec; --ink:#171b24; --muted:#5c6678; --muted2:#8b94a5; --brand:#2563eb; --brand2:#16a34a; --accent:#1d4ed8; --danger:#dc2626; --warn:#b45309; --shadow:0 16px 44px rgba(23,34,66,.12); --app-grad1:#f6f8fc; --app-grad2:#e9eef6; --nav-bg:rgba(255,255,255,.82); --nav-bg2:rgba(255,255,255,.92); --cost-bg:#f1f5fb; --cost-line:#cdd9ea; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:linear-gradient(165deg,var(--app-grad1),var(--app-grad2));color:var(--ink);line-height:1.5; -webkit-font-smoothing:antialiased} a{color:var(--brand);text-decoration:none} img{max-width:100%} /* accessibility: visible keyboard focus + skip link */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} *:focus:not(:focus-visible){outline:none} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff; padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;font-size:14px} .skip:focus{left:0} .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} .container{max-width:1160px;margin:0 auto;padding:0 22px} .hidden{display:none!important} .muted{color:var(--muted)} .brandlogo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink)} .brandlogo .dot{width:30px;height:30px;border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;font-size:16px} /* buttons */ .btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:11px;padding:11px 18px; font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.14s;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff} .btn.primary:hover{filter:brightness(1.08)} .btn.green{background:linear-gradient(135deg,var(--brand2),#15803d);color:#fff} .btn.ghost{background:var(--bg2);border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{border-color:#36404f} .btn.sm{padding:8px 13px;font-size:13px;border-radius:9px} .linklike{background:none;border:0;padding:0;margin:0;color:var(--brand);font:inherit;font-weight:600;cursor:pointer;text-align:left} .linklike:hover{text-decoration:underline} .btn.block{width:100%;justify-content:center} /* nav */ .nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px); background:var(--nav-bg);border-bottom:1px solid var(--line); transition:box-shadow .2s ease,background .2s ease} .nav.scrolled{background:var(--nav-bg2);box-shadow:0 8px 30px rgba(0,0,0,.35)} .nav .container{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px} .nav .links{display:flex;gap:22px;align-items:center;font-size:14px;color:var(--muted)} .nav .links a{color:var(--muted)}.nav .links a:hover{color:var(--ink)} @media(max-width:780px){.nav .links .hide-sm{display:none}} /* language switch */ .lang{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:3px} .lang button{background:none;border:0;color:var(--muted);font-size:12px;font-weight:600; padding:5px 9px;border-radius:6px;cursor:pointer;font-family:inherit} .lang button.on{background:var(--brand);color:#fff} /* daylight/dark theme toggle */ .themebtn{background:var(--bg2);border:1px solid var(--line);color:var(--ink);width:34px;height:34px; border-radius:9px;display:inline-grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;padding:0; transition:.14s;flex:0 0 auto} .themebtn:hover{border-color:var(--brand)} /* forms */ label{display:block;font-size:12px;color:var(--muted);margin:11px 0 4px;font-weight:500} input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink); padding:10px 12px;border-radius:10px;font-size:14px;font-family:inherit} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,130,246,.15)} input::placeholder,textarea::placeholder{color:var(--muted2)} .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px} @media(max-width:560px){.row4{grid-template-columns:1fr 1fr}} /* panels & cards */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .panel h2,.panel h3{margin:0 0 12px} .panel h3{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px} /* toast */ #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120%); background:#15803d;color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600; box-shadow:var(--shadow);z-index:100;transition:transform .25s} #toast.show{transform:translateX(-50%) translateY(0)} #toast.err{background:#b91c1c} /* status pills */ .st{font-size:12px;padding:3px 10px;border-radius:20px;font-weight:600;display:inline-block} .st.draft{background:#222732;color:#9aa3b5} .st.sent{background:#10233f;color:#5fa0f0} .st.seen{background:#2a2410;color:var(--warn)} .st.accepted{background:#10271a;color:#4ade80} .st.rejected{background:#2a1116;color:var(--danger)} /* Inline status changer on dashboard rows: keeps the coloured pill look of .st but is an interactive