:root{
  --bg:#0B0B14; --panel:#14141F; --panel-2:#1A1A28; --line:#262636;
  --violet:#7C3AED; --violet-lt:#A78BFA; --violet-dp:#5B21B6;
  --text:#ECEAF5; --muted:#8B8AA0; --good:#34D399; --bad:#F87171; --warn:#FBBF24;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.5}
a{color:var(--violet-lt);text-decoration:none}
.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.wrap.wide{max-width:1560px}

/* top bar */
header.top{position:sticky;top:0;z-index:30;background:rgba(11,11,20,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;letter-spacing:.02em}
.logo .br{font-family:'Space Grotesk';font-weight:700}
.logo .br .lt{color:#fff}.logo .br .gt{color:var(--violet)}
nav.main{display:flex;gap:6px;align-items:center}
nav.main a{color:var(--muted);padding:8px 14px;border-radius:8px;font-size:.95rem;font-weight:500;transition:.15s}
nav.main a:hover{color:var(--text);background:var(--panel)}
nav.main a.active{color:#fff;background:var(--violet)}
.whoami{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted)}
.badge-role{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;background:var(--violet-dp);color:#fff;padding:3px 8px;border-radius:20px}

main{padding:30px 0 70px}
h1{font-size:1.7rem;font-weight:700;margin-bottom:4px}
h2{font-size:1.15rem;font-weight:600;margin:0 0 14px}
.sub{color:var(--muted);margin-bottom:24px}

/* cards / stats */
.grid{display:grid;gap:16px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.stat .k{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.stat .v{font-size:2rem;font-weight:700;margin-top:6px}
.stat .v.money{color:var(--violet-lt)}
.stat .v.good{color:var(--good)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.nowrap{white-space:nowrap}
table.compact th,table.compact td{padding:8px 9px;font-size:.88rem}
table.compact .inline-form select,table.compact .inline-form input{padding:6px 7px;font-size:.83rem}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:var(--panel-2);white-space:nowrap}
tr:last-child td{border-bottom:none}
td.biz{font-weight:600;white-space:normal;min-width:160px}
.tnotes{white-space:normal;min-width:160px;color:var(--muted)}

/* status pills */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600;border:1px solid transparent}
.st-new{background:#23233a;color:#b9b8d6}
.st-noans{background:#2a2433;color:#c9a9e0}
.st-int{background:#3a2d12;color:var(--warn)}
.st-sent{background:#13314a;color:#7cc4ff}
.st-book{background:#0f3a2e;color:#5ee0b0}
.st-won{background:#0e3b24;color:var(--good)}
.st-dead{background:#3a1620;color:var(--bad)}

/* forms */
input,select,textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:10px 12px;font-family:inherit;font-size:.92rem;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet)}
label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.field{margin-bottom:14px}
.inline-form{display:flex;gap:6px;align-items:center}
.inline-form select,.inline-form input{padding:7px 9px;font-size:.85rem;width:auto}
.btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:none;font-family:inherit;font-weight:600;
  font-size:.9rem;padding:10px 18px;border-radius:9px;transition:.15s;background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.btn:hover{border-color:var(--violet)}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-dp));color:#fff;border:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,58,237,.35)}
.btn-sm{padding:6px 12px;font-size:.82rem}
.btn-good{background:var(--good);color:#06281b;border:none}
.btn-danger{background:transparent;color:var(--bad);border:1px solid #5a2230}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters a{padding:7px 14px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:.85rem;font-weight:500}
.filters a.active{background:var(--violet);color:#fff;border-color:var(--violet)}

.flash{background:#0e3b24;border:1px solid #1c5e3c;color:#9ff0c8;padding:12px 16px;border-radius:10px;margin-bottom:18px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:18px}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:38px;width:100%;max-width:380px}
.login-card .logo{justify-content:center;margin-bottom:6px;font-size:1.5rem}
.login-card .sub{text-align:center}
.err{background:#3a1620;border:1px solid #5a2230;color:#ffb4b4;padding:10px 14px;border-radius:9px;margin-bottom:16px;font-size:.9rem}
.modal-link{cursor:pointer}
details.closebox summary{cursor:pointer;color:var(--violet-lt);font-size:.82rem;list-style:none}
details.closebox[open]{margin-top:8px}
.cf{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin-top:8px}

/* ===== MOBILE RESPONSIVE ===== */
.navtoggle{display:none}
.navwrap{display:flex;align-items:center;gap:20px}

@media (max-width:820px){
  .wrap,.wrap.wide{max-width:100%;padding:0 14px}

  /* --- nav becomes a mobile menu --- */
  .top .row{flex-wrap:wrap;height:auto;min-height:60px;padding:10px 0}
  .navtoggle{display:block;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
    font-size:1.3rem;line-height:1;padding:8px 14px;border-radius:9px;cursor:pointer}
  .navwrap{display:none;flex-direction:column;align-items:stretch;width:100%;gap:6px;padding-top:10px}
  .navwrap.open{display:flex}
  nav.main{flex-direction:column;width:100%;gap:4px}
  nav.main a{width:100%;padding:12px 14px;font-size:1rem;border-radius:9px;background:var(--panel)}
  .whoami{width:100%;justify-content:space-between;padding-top:10px;margin-top:4px;border-top:1px solid var(--line)}

  /* --- tables become stacked cards --- */
  .table-wrap{overflow:visible;border:none;background:transparent}
  .table-wrap table,.table-wrap thead,.table-wrap tbody,.table-wrap th,.table-wrap td,.table-wrap tr{display:block;width:auto}
  .table-wrap thead{position:absolute;left:-9999px}
  .table-wrap tr{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;padding:6px 14px}
  .table-wrap td{border:none;border-bottom:1px solid var(--line);padding:11px 0;display:flex;
    justify-content:space-between;align-items:center;gap:14px;white-space:normal;font-size:.95rem}
  .table-wrap tr td:last-child{border-bottom:none}
  .table-wrap td::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
  .table-wrap td.biz{font-size:1.1rem;font-weight:700;color:var(--violet-lt);border-bottom:1px solid var(--line);padding-bottom:10px}
  .table-wrap td.biz::before{content:""}
  /* controls fill the right side of each card row */
  .table-wrap td .inline-form{width:62%;justify-content:flex-end}
  .table-wrap td .inline-form select,.table-wrap td .inline-form input{width:100%;font-size:16px;padding:9px 10px}
  .table-wrap td.tnotes{flex-wrap:wrap}
  .table-wrap td.tnotes .inline-form{width:100%;flex-wrap:nowrap}
  .table-wrap td .row-actions{width:62%;justify-content:flex-end;flex-wrap:wrap}
  .table-wrap td .cf{grid-template-columns:1fr 1fr;width:100%}
  .table-wrap td .cf input{font-size:16px}
  .table-wrap details.closebox{width:100%}
  /* hide the empty-deal cell label when there's nothing in it for callers */
  .table-wrap td:empty{display:none}

  /* stat cards: comfy single/double column */
  .grid.cols-4,.grid.cols-3{grid-template-columns:1fr 1fr}
  .stat .v{font-size:1.6rem}
  h1{font-size:1.45rem}
  .toolbar{gap:12px}
  /* make all form inputs 16px to stop iOS auto-zoom */
  input,select,textarea{font-size:16px}
}

@media (max-width:430px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .table-wrap td .inline-form,.table-wrap td .row-actions{width:70%}
}