@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* PlanScale design tokens */
:root{--bg:#0a0a0b;--surface:#141416;--surface-2:#1c1c1f;--surface-3:#242428;--border:#2a2a2f;--border-hover:#3a3a42;
  --text:#e8e6e3;--text-2:#9d9b97;--text-3:#6b6966;
  --accent:#3b82f6;--accent-hover:#60a5fa;--accent-dim:#3b82f620;
  --green:#22c55e;--red:#ef4444;--orange:#f59e0b;--orange-dim:#f59e0b20;
  --mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:'DM Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.45}
.wrap{max-width:1040px;margin:0 auto;padding:22px 18px 80px}
.apphead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
h1.t{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.5px}
h1.t span{color:var(--accent)}
.whoami{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2)}
.savestat{font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-radius:6px;padding:4px 8px;background:var(--surface-2);color:var(--text-2)}
.flow{font-size:12.5px;color:var(--text-2);margin:0 0 16px}
.flow b{color:var(--accent)}
.tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:14px}
.tab{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;padding:9px 15px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-2);font-family:var(--sans)}
.tab:hover{border-color:var(--border-hover);color:var(--text)}
.tab.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
.panel{display:none}.panel.on{display:block}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.card h2{margin:0 0 4px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-2);font-weight:600}
.card .hint{margin:0 0 12px;font-size:12px;color:var(--text-3)}
input,select,textarea{font-family:var(--sans);font-size:13px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:var(--surface-2);color:var(--text);width:100%;outline:none}
input[type=number]{font-family:var(--mono);text-align:right}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);text-align:left;padding:5px 6px;font-weight:600;border-bottom:1px solid var(--border)}
td{padding:4px 6px;border-bottom:1px dotted var(--border);vertical-align:middle}
td.n,th.n{text-align:right}
.lt{font-family:var(--mono);text-align:right;white-space:nowrap}
.x{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;width:30px;height:32px;cursor:pointer;color:var(--text-3);font-family:var(--sans)}.x:hover{border-color:var(--red);color:var(--red)}
.btn{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:9px 14px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text-2);font-family:var(--sans)}
.btn:hover{border-color:var(--border-hover);color:var(--text)}
.btn.pri{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.sm{padding:5px 10px;font-size:12px}
.miniadd{border:1px dashed var(--border);background:transparent;border-radius:6px;padding:7px 12px;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-3);margin-top:10px;font-family:var(--sans)}.miniadd:hover{border-color:var(--accent);color:var(--accent)}
.row{display:flex;gap:10px;align-items:center;margin-bottom:9px}.row label{flex:1;font-size:13px;color:var(--text-2)}
.num{width:108px;flex:0 0 108px;text-align:right}.cnt{width:60px;flex:0 0 60px}.pct{width:84px;flex:0 0 84px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.roleout{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.rchip{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:8px 12px;background:var(--surface-2)}
.rchip .nm{font-size:12px;color:var(--text-2)}
.rchip .v{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--text)}
.item{border:1px solid var(--border);border-radius:9px;padding:12px;margin-bottom:10px;background:var(--surface)}
.item .top{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.item .top input{font-weight:600}
.item .rt{font-family:var(--mono);font-size:20px;font-weight:500;white-space:nowrap;text-align:right;color:var(--text)}
.item .rt small{font-size:11px;color:var(--text-3);display:block;font-weight:400;font-family:var(--sans)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:7px}
.f{display:flex;flex-direction:column;gap:3px}.f label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3)}
.crew{border:1px dashed var(--border);border-radius:7px;padding:9px;margin-top:8px;background:var(--surface-2)}
.crewrow{display:flex;gap:7px;align-items:center;margin-bottom:5px}.crewrow select{flex:1}.crewrow input{width:60px}
.flag{border:1px solid var(--orange);background:var(--orange-dim);border-radius:8px;padding:12px 14px;font-size:13px;display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;color:var(--text)}.flag .mk{font-weight:700;font-family:var(--mono);color:var(--orange)}
.totals{margin-left:auto;max-width:340px}
.trow{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px dotted var(--border);color:var(--text-2)}
.trow.grand{border-top:2px solid var(--border-hover);border-bottom:none;font-weight:700;font-size:17px;margin-top:4px;padding-top:10px;color:var(--text)}
.trow span:last-child{font-family:var(--mono);color:var(--text)}
textarea{min-height:74px;resize:vertical;font-size:13px}
.qmeta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:600px){.qmeta{grid-template-columns:1fr}}
.qlist td{padding:9px 6px}
.qlist .qn{font-weight:600}
/* Status chips: the word is always the signal; colour is only reinforcement */
.stat{font-family:var(--mono);font-size:10px;border:1px solid var(--border);border-radius:5px;padding:2px 7px;text-transform:uppercase;letter-spacing:1px;background:var(--surface-2);color:var(--text-2)}
.stat.st-sent{border-color:var(--accent);color:var(--accent)}
.stat.st-won{border-color:var(--green);color:var(--green)}
.stat.st-lost{border-color:var(--red);color:var(--red)}
.empty{border:1px dashed var(--border);border-radius:10px;padding:26px;text-align:center;color:var(--text-3);font-size:14px}
/* rate library table: caret glyph (not colour) marks the expanded row */
.libtbl th.caret,.libtbl td.caret{width:24px;text-align:center;padding-left:2px;padding-right:2px}
.libcat td{background:var(--surface-2);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:7px 8px;border-bottom:1px solid var(--border)}
.libcount{color:var(--text-3);font-weight:400;letter-spacing:0;text-transform:none}
.librow{cursor:pointer}
.librow td{padding:8px 6px}
.librow:hover td{background:var(--surface-2)}
.librow .caret{color:var(--text-3);font-size:11px}
.libedit>td{padding:10px 4px 14px;border-bottom:1px solid var(--border)}
.libedit .item{margin-bottom:0}
/* quote sections */
.qsec td{background:var(--surface-2);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:7px 6px;border-bottom:1px solid var(--border)}
.qsubtot td{font-weight:600;color:var(--text);border-bottom:1px solid var(--border)}
.qsubtot td:first-child{text-align:right;color:var(--text-2)}
#qsummary td{padding:7px 6px}
/* gate */
#boot,#gate{max-width:420px;margin:12vh auto 0;padding:0 18px}
.gatecard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;text-align:center}
.gatecard h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-0.5px}
.gatecard h1 span{color:var(--accent)}
.gatecard p{color:var(--text-2);font-size:14px;margin:0 0 18px}
.gatecard .btn{width:100%;margin-bottom:9px;padding:12px}