:root{
  --bg:#0b1210;
  --panel:#111b18;
  --panel-2:#0e1614;
  --line:#1f2e29;
  --text:#dfe8e4;
  --muted:#7c9089;
  --signal:#39ffb0;
  --signal-dim:#1e8f68;
  --amber:#e8b45c;
  --red:#e0625a;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14px; line-height:1.45;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);}
.brand h1{font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin:0; font-weight:600;}
.brand .sub{color:var(--muted); font-size:12px; font-family:var(--font-mono);}
nav{display:flex; gap:4px;}
nav a{
  background:none; border:1px solid transparent; color:var(--muted);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  padding:7px 12px; border-radius:6px; cursor:pointer; text-transform:uppercase;
  text-decoration:none; display:inline-block;
}
nav a.active{background:var(--panel); color:var(--signal); border-color:var(--line);}
nav a:hover{color:var(--text);}
main{padding:20px; max-width:1100px; margin:0 auto;}
.grid{display:grid; gap:14px;}
.cards{grid-template-columns:repeat(auto-fit, minmax(190px,1fr));}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px;
  position:relative;
}
.card-edit-btn{
  position:absolute; top:8px; right:8px; background:none; border:none; cursor:pointer;
  color:var(--muted); font-size:14px; line-height:1; padding:4px;
}
.card-edit-btn:hover{color:var(--signal);}
.card .label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.card .value{font-family:var(--font-mono); font-size:24px; color:var(--signal);}
.card .value.amber{color:var(--amber);}
.card .value.red{color:var(--red);}
.card .sub{color:var(--muted); font-size:12px; margin-top:4px;}
table{width:100%; border-collapse:collapse; margin-top:8px;}
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--line); font-weight:500;
}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top;}
tr:hover td{background:var(--panel-2);}
.pill{
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.03em;
}
.pill.new{background:#1f2e29; color:var(--signal);}
.pill.contacted{background:#26261a; color:var(--amber);}
.pill.quoted{background:#26261a; color:var(--amber);}
.pill.agreement{background:#1a2626; color:#5cc2e8;}
.pill.closed_won{background:#123322; color:var(--signal);}
.pill.dead{background:#2a1a1a; color:var(--red);}
.btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; font-family:var(--font-mono);
}
.btn:hover{border-color:var(--signal-dim);}
.btn.primary{background:var(--signal-dim); border-color:var(--signal-dim); color:#04120c;}
.btn.primary:hover{background:var(--signal);}
.btn.ghost{background:none;}
.section-title{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:24px 0 10px;}
.empty{color:var(--muted); text-align:center; padding:40px 20px; font-family:var(--font-mono); font-size:13px;}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:none;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:100;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  max-width:680px; width:100%; padding:22px;
}
.modal h2{margin:0 0 4px; font-size:16px;}
.modal .meta{color:var(--muted); font-size:12px; font-family:var(--font-mono); margin-bottom:16px;}
.thread{max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:14px; background:var(--panel-2);}
.msg{padding:8px 0; border-bottom:1px solid var(--line);}
.msg:last-child{border-bottom:none;}
.msg .who{font-size:11px; color:var(--muted); font-family:var(--font-mono); margin-bottom:4px;}
.msg.out .who{color:var(--signal);}
textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:10px; font-family:var(--font-mono); font-size:13px; resize:vertical;
}
.row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center;}
select, input[type=number], input[type=text]{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:6px 10px; border-radius:6px; font-family:var(--font-mono); font-size:12px;
}
label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
.close-x{position:absolute; top:16px; right:16px; cursor:pointer; color:var(--muted); background:none; border:none; font-size:18px;}
.modal{position:relative;}