:root{
  --navy:#163973; --gold:#FBC901; --ink:#16202e; --muted:#6b7788;
  --line:#e2e7ef; --bg:#f4f6fa; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Assistant','Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); height:100vh; display:flex; flex-direction:column;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; background:var(--navy); color:#fff; flex:none;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 32%, var(--gold) 0 42%, #fff0 42%),
             linear-gradient(#2f6fb8,#123a6b);
}
.brand strong{display:block;font-size:16px;line-height:1.2}
.brand small{color:#b9cbe6;font-size:12px}
.actions{display:flex;gap:8px}
button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid transparent;padding:9px 16px}
.primary{background:var(--gold);color:#2b2400;font-weight:700}
.primary:hover{filter:brightness(1.06)}
.primary:disabled{opacity:.6;cursor:progress}
.ghost{background:#ffffff1a;color:#fff;border-color:#ffffff40}
.ghost:hover{background:#ffffff2e}

/* ---------- layout ---------- */
main{flex:1; display:grid; grid-template-columns:400px 1fr; min-height:0}
form{overflow-y:auto; padding:16px; border-inline-end:1px solid var(--line); background:var(--card)}
fieldset{border:1px solid var(--line); border-radius:10px; padding:12px 14px 14px; margin-bottom:14px}
legend{padding:0 6px; font-weight:700; color:var(--navy); font-size:14px}
legend small{font-weight:400;color:var(--muted)}
label{display:block; margin-top:10px; font-size:13px; color:var(--muted)}
label small{color:#9aa6b6}
input,select,textarea{
  display:block; width:100%; margin-top:4px; padding:8px 10px; font:inherit; font-size:14px;
  color:var(--ink); background:#fbfcfe; border:1px solid var(--line); border-radius:7px;
}
input:focus,select:focus,textarea:focus{outline:2px solid #cfe0f7; border-color:#8fb4e4}
textarea{resize:vertical; line-height:1.5}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.unit{color:#9aa6b6}
.hint{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.5}
.derived{margin-top:10px; font-size:13px; color:var(--muted)}
.derived b{color:var(--navy); font-size:15px}
.derived-list{list-style:none; margin-top:10px; display:grid; gap:5px; font-size:13px; color:var(--muted)}
.derived-list li{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding-bottom:4px}
.derived-list b{color:var(--navy)}
#wrap-optimizer.off{opacity:.4; pointer-events:none}

/* ---------- preview ---------- */
.preview{display:flex; flex-direction:column; min-width:0; min-height:0}
.preview-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; background:#eaeef5; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted); flex:none;
}
.zoom{display:flex; align-items:center; gap:6px}
.zoom button{padding:2px 10px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:15px}
.preview-scroll{flex:1; min-height:0; background:#6b6f76}
#preview{border:0; display:block; width:100%; height:100%; background:#6b6f76}

/* ---------- toast ---------- */
.toast{
  position:fixed; inset-inline:0; bottom:24px; margin:auto; width:max-content; max-width:80vw;
  background:#16202e; color:#fff; padding:11px 18px; border-radius:9px; font-size:14px;
  opacity:0; transform:translateY(10px); transition:.22s; pointer-events:none; z-index:9;
}
.toast.show{opacity:1; transform:none}
.toast.err{background:#8f1d1d}

@media (max-width:900px){ main{grid-template-columns:1fr} .preview{display:none} }

/* ---------- saved quotes ---------- */
.actions{align-items:center}
.draft-name{
  color:#cfe0f5; font-size:13px; max-width:220px; margin-inline-end:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.iconbtn{
  background:none;border:none;color:var(--muted);font-size:22px;line-height:1;
  padding:2px 8px;border-radius:6px
}
.iconbtn:hover{background:var(--bg);color:var(--ink)}

.scrim{position:fixed;inset:0;background:#0b1a2e66;z-index:40}
.drawer{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:41;
  width:min(400px,92vw); background:var(--card);
  box-shadow:4px 0 24px #0b1a2e2e;
  display:flex; flex-direction:column; padding:14px;
}
.drawer[hidden],.scrim[hidden]{display:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px
}
.drawer-head strong{color:var(--navy)}
#draft-search{width:100%;margin-bottom:10px}

.draft-list{overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.draft{
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.draft.current{border-color:var(--navy);background:#f3f7fd}
.draft-main{min-width:0}
.draft-main strong{display:block;font-size:14px}
.draft-main span,.draft-main small{
  display:block;color:var(--muted);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.draft-acts{display:flex;gap:4px;flex:none}
.draft-acts button{
  padding:5px 9px;font-size:12px;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:7px
}
.draft-acts button:hover{background:var(--bg)}
.draft-acts .danger{color:#a11b1b;border-color:#f0d2d2}
.draft-acts .danger:hover{background:#fdf2f2}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:20px 8px}

/* ---------- preview pager ---------- */
.preview-bar{justify-content:space-between}
.pager{display:flex;align-items:center;gap:6px}
.pager button{
  padding:2px 10px;font-size:17px;line-height:1.2;border:1px solid var(--line);
  background:#fff;color:var(--ink);border-radius:7px
}
.pager button:hover:not(:disabled){background:var(--bg)}
.pager button:disabled{opacity:.35;cursor:default}
#page-label{font-size:12px;color:var(--muted);min-width:46px;text-align:center}
.ephemeral-note{
  margin-bottom:10px;padding:9px 11px;border-radius:8px;font-size:12px;line-height:1.45;
  background:#fff8e6;border:1px solid #f0e0b0;color:#7a5b12;
}