:root{
  --ink:#16181d;        /* iron black */
  --accent:#FF6A13;     /* safety orange */
  --paper:#f4f5f4;
  --card:#ffffff;
  --line:#d9dde2;
  --soft:#6b7480;
  --green:#1e7d4f;
  --radius:10px;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit;font-size:14px}

/* top bar */
.topbar{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;height:60px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:baseline;gap:2px}
.mark{font-weight:900;font-size:22px;letter-spacing:-1px}
.mark.accent{color:var(--accent)}
.tagline{font-size:12px;color:#9aa3ad;margin-left:12px;font-weight:500}
.tabs{display:flex;align-items:center;gap:6px}
.tab{background:none;border:none;color:#c7ccd3;padding:10px 14px;font-size:14px;font-weight:600;border-radius:6px}
.tab[data-active="1"]{color:#fff;background:#2a2e36}
.tab:hover{color:#fff}
.plan{margin-left:10px;font-size:11px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:20px}
.plan.free{background:#3a3f48;color:#c7ccd3}
.plan.pro{background:var(--accent);color:#16181d}

main{max-width:980px;margin:24px auto;padding:0 18px}
.view{display:none}
.view[data-active="1"]{display:block}
h1{font-size:24px;margin:0 0 16px}
h2{font-size:16px;margin:0 0 12px}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;padding:9px 16px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-block}
.btn:hover{border-color:#aab2bd}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#16181d;font-weight:800}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{background:#fff}
.btn.small{padding:6px 12px;font-size:13px}
.btn.block{display:block;width:100%;text-align:center;margin-top:10px}
.btn.link{background:none;border:none;color:var(--accent);font-weight:700;padding:4px}
.btn.ghost.back{margin-bottom:14px}
.link{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;padding:0;font-size:inherit}

/* panels & cards */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.card-list{display:flex;flex-direction:column;gap:10px}
.est-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.est-card:hover{border-color:var(--accent)}
.est-card .who{font-weight:700}
.est-card .meta{font-size:12px;color:var(--soft);margin-top:2px}
.est-card .amt{font-weight:800;font-size:18px}
.est-card .del{color:var(--soft);border:none;background:none;font-size:18px;margin-left:12px}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:40px;text-align:center;color:var(--soft)}

/* editor */
.editor-grid{display:grid;grid-template-columns:1fr 300px;gap:16px}
.editor-side .sticky{position:sticky;top:80px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:var(--soft);gap:5px}
label input,textarea{border:1px solid var(--line);border-radius:7px;padding:9px 10px;color:var(--ink);background:#fff}
textarea{width:100%;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}

table.lines{width:100%;border-collapse:collapse;margin-top:4px}
table.lines th{text-align:left;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.4px;padding:6px 6px}
table.lines td{padding:4px 6px;border-top:1px solid var(--line)}
.c-qty{width:62px}.c-rate{width:92px}.c-amt{width:96px;text-align:right}
table.lines input{width:100%;border:1px solid transparent;border-radius:6px;padding:7px 8px}
table.lines input:hover{border-color:var(--line)}
.line-amt{text-align:right;font-weight:700;padding-right:8px}
.rm{border:none;background:none;color:var(--soft);font-size:16px}
.catalog-hint{font-size:12px;color:var(--soft);margin-top:10px}

.totals{margin-bottom:6px}
.trow{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.trow input{width:54px;border:1px solid var(--line);border-radius:6px;padding:3px 6px;margin:0 4px}
.trow.total{border-top:2px solid var(--ink);margin-top:6px;padding-top:10px;font-weight:900;font-size:18px}
.share-row{display:flex;gap:8px;margin-top:8px}
.share-row .btn{flex:1;text-align:center}
.wm-note{font-size:11px;color:var(--soft);margin-top:12px;line-height:1.5}

/* settings */
.brand-row{display:flex;align-items:center;gap:20px;margin:16px 0}
.logo-up{flex-direction:row;align-items:center;gap:8px}
.locked-pill{background:#eee;color:#999;font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700}
.logo-prev{width:80px;height:46px;border:1px dashed var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-prev img{max-width:100%;max-height:100%}
.accent-pick{flex-direction:row;align-items:center;gap:8px}
.muted{color:var(--soft);font-size:13px;line-height:1.6}
.unlock-panel{border:2px solid var(--accent)}
.unlocked-badge{background:#e3f3ea;color:var(--green);font-weight:700;padding:10px 14px;border-radius:8px}
.code-row{display:flex;gap:8px;margin-top:12px}
.code-row input{flex:1;border:1px solid var(--line);border-radius:7px;padding:9px}
.unlock-msg{font-size:13px;margin-top:8px;font-weight:600}
.unlock-msg.ok{color:var(--green)}.unlock-msg.err{color:#c0392b}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:8px;opacity:0;transition:.25s;font-weight:600;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:760px){.editor-grid{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.editor-side .sticky{position:static}}

/* status pills + status select (bare-bones gap-fills) */
.pill{font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:20px;text-transform:uppercase}
.st-draft{background:#e9edf1;color:#6b7480}
.st-sent{background:#fff0dd;color:#b07d12}
.st-approved{background:#e3f3ea;color:#1e7d4f}
.st-declined{background:#fdeaea;color:#c0392b}
.card-right{display:flex;align-items:center;gap:10px}
.icon{border:none;background:none;color:#9aa3ad;font-size:17px;cursor:pointer;padding:2px 4px}
.icon:hover{color:#16181d}
.status-sel{flex-direction:row;align-items:center;justify-content:space-between;margin:4px 0 10px;font-weight:700;color:var(--ink)}
.status-sel select{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:13px}

/* feedback FAB + modal (bottom-right, like DialBlitz) */
.fab{position:fixed;bottom:20px;right:20px;background:var(--accent);color:#16181d;border:none;border-radius:30px;padding:12px 18px;font-weight:800;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:60}
.fab:hover{filter:brightness(.95)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:70}
.modal-overlay[hidden]{display:none}
.modal{background:#fff;border-radius:12px;padding:24px;width:min(440px,92vw);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.modal h2{margin:0 0 6px}
.modal textarea,.modal input{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;margin-top:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}