@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #0a0810;
  --bg-glow: radial-gradient(ellipse 900px 600px at 15% -10%, rgba(139,92,246,0.22), transparent 60%),
             radial-gradient(ellipse 700px 500px at 100% 0%, rgba(168,85,247,0.12), transparent 55%);
  --glass: rgba(255,255,255,0.045);
  --glass-hover: rgba(255,255,255,0.075);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border-strong: rgba(255,255,255,0.16);
  --text: #f1eefb;
  --text-dim: #a79fc0;
  --text-dimmer: #766e8d;
  --violet: #8b5cf6;
  --violet-2: #a855f7;
  --violet-grad: linear-gradient(135deg, #8b5cf6, #c084fc);
  --green: #34d399;
  --green-bg: rgba(52,211,153,0.14);
  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,0.14);
  --red: #f87171;
  --red-bg: rgba(248,113,113,0.14);
  --violet-bg: rgba(139,92,246,0.14);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-glow), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(139,92,246,0.35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ---------- Layout ---------- */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 22px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet-grad);
  box-shadow: 0 0 14px rgba(168,85,247,0.9);
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 500; cursor: pointer;
  transition: background 150ms, color 150ms;
  font-size: 13.5px;
}
.nav-item:hover { background: var(--glass); color: var(--text); }
.nav-item.active { background: var(--violet-bg); color: var(--text); box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35); }
.nav-item .icon { width: 18px; text-align: center; font-size: 15px; }
.nav-badge {
  margin-left: auto; background: var(--red); color: #1a0505; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
}
.sidebar-foot { margin-top: auto; padding: 10px; font-size: 11px; color: var(--text-dimmer); }

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 24px;
  background: rgba(10,8,16,0.7);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
}
.date-nav { display: flex; align-items: center; gap: 6px; }
.date-nav button.icon-btn { width: 30px; height: 30px; }
.date-display {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border);
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.date-display:hover { background: var(--glass-hover); }
.btn-today {
  padding: 7px 12px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-dim); font-weight: 600; cursor: pointer; font-size: 12.5px;
}
.btn-today:hover { color: var(--text); background: var(--glass-hover); }

.search-wrap { flex: 1; max-width: 380px; position: relative; }
.search-input {
  width: 100%; padding: 9px 12px 9px 34px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  font-family: inherit; font-size: 13px; outline: none; transition: border-color 150ms, background 150ms;
}
.search-input:focus { border-color: rgba(139,92,246,0.5); background: rgba(255,255,255,0.07); }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dimmer); font-size: 13px; pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #14101f; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; z-index: 60; display: none;
}
.search-results.open { display: block; }
.search-results .sr-group-label { padding: 8px 12px 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dimmer); }
.search-results .sr-item { padding: 9px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.search-results .sr-item:hover { background: var(--glass-hover); }

.spacer { flex: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 100ms;
}
.btn:hover { background: var(--glass-hover); }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--violet-grad); border: none; color: #120a1e;
  box-shadow: 0 4px 18px rgba(139,92,246,0.4);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--red-bg); border-color: rgba(248,113,113,0.3); color: #ffd6d6; }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-dim);
  cursor: pointer; transition: background 150ms, color 150ms;
}
.icon-btn:hover { background: var(--glass-hover); color: var(--text); }
.link-btn { background: none; border: none; color: var(--violet-2); cursor: pointer; font-weight: 600; font-size: 12.5px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* ---------- Page ---------- */
.page { padding: 22px 26px 60px; max-width: 1500px; }
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-size: 21px; font-weight: 800; letter-spacing: -0.2px; }
.page-sub { color: var(--text-dim); font-size: 13px; margin-top: 2px; }

/* ---------- Cards / glass ---------- */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.card-pad { padding: 18px 20px; }

/* ---------- Hero strip ---------- */
.hero-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1200px) { .hero-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: repeat(2, 1fr); } }
#heroGrid { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1300px) { #heroGrid { grid-template-columns: repeat(3, 1fr); } }
.hero-card { padding: 16px 18px; position: relative; overflow: hidden; }
.hero-label { font-size: 11.5px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.hero-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.hero-value.green { color: var(--green); }
.hero-value.amber { color: var(--amber); }
.hero-value.red { color: var(--red); }
.hero-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.hero-sparkline { position: absolute; right: 14px; bottom: 12px; opacity: 0.9; }
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }

.gauge-wrap { display: flex; align-items: center; gap: 12px; }

/* ---------- Badges / chips / status ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.badge.green { background: var(--green-bg); color: var(--green); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.violet { background: var(--violet-bg); color: #c9b3ff; }
.badge.tag-meta { background: rgba(96,165,250,0.15); color: #93c5fd; }
.badge.tag-vip { background: rgba(251,191,36,0.18); color: #fcd34d; }

/* vertical-align: top — as a lone inline-block with no text beside it, this otherwise sits
   on the text baseline (the default), whose offset from the cell top depends on font metrics
   rather than the cell's actual height, drifting away from the row's other content in a tall
   (multi-offer) row. */
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; vertical-align: top; }
.status-dot.green { background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.status-dot.amber { background: var(--amber); box-shadow: 0 0 8px rgba(251,191,36,0.7); }
.status-dot.red { background: var(--red); box-shadow: 0 0 8px rgba(248,113,113,0.7); }
.status-dot.violet { background: var(--text-dimmer); }

.chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); font-size: 12px; font-weight: 600;
}

/* ---------- Progress bars ---------- */
.progress-track {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; border-radius: 999px; width: 0%;
  transition: width 500ms cubic-bezier(.2,.8,.2,1);
}
.progress-fill.green { background: linear-gradient(90deg, #22c55e, #34d399); }
.progress-fill.amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.progress-fill.red { background: linear-gradient(90deg, #ef4444, #f87171); }
.progress-fill.violet { background: var(--violet-grad); }

/* ---------- Attention feed ---------- */
.attention-list { display: flex; flex-direction: column; gap: 8px; }
.attention-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border); border-left: 3px solid var(--text-dimmer);
  cursor: pointer; transition: background 150ms, transform 100ms;
}
.attention-item:hover { background: var(--glass-hover); transform: translateX(2px); }
.attention-item.red { border-left-color: var(--red); }
.attention-item.amber { border-left-color: var(--amber); }
.attention-item.violet { border-left-color: var(--violet); }
.attention-item .ai-icon { font-size: 15px; }
.attention-item .ai-text { flex: 1; font-size: 13px; }
.attention-item .ai-arrow { color: var(--text-dimmer); }
.ai-dismiss {
  background: none; border: none; color: var(--text-dimmer); cursor: pointer; font-size: 13px;
  padding: 4px 6px; border-radius: 6px; opacity: 0.5; line-height: 1;
}
.ai-dismiss:hover { opacity: 1; color: var(--red); background: var(--glass-hover); }
.all-clear { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 10px; color: var(--text-dim); }
.all-clear .ac-icon { font-size: 30px; }

/* ---------- Member board ---------- */
.board-controls { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; flex-wrap: wrap; }
.segmented { display: flex; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 3px; }
.segmented button {
  border: none; background: none; color: var(--text-dim); padding: 6px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 150ms, color 150ms;
}
.segmented button.active { background: var(--violet-grad); color: #120a1e; }
.select-ctl, .text-ctl {
  padding: 8px 11px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-family: inherit; font-size: 12.5px; outline: none;
}
.select-ctl:focus, .text-ctl:focus { border-color: rgba(139,92,246,0.5); }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.member-card { padding: 16px 18px; transition: border-color 150ms; }
.member-card:hover { border-color: var(--glass-border-strong); }
.mc-header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mc-name { font-weight: 700; font-size: 14.5px; }
.mc-total { margin-left: auto; font-weight: 800; font-size: 15px; }
.mc-menu-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 2px 4px; border-radius: 6px; }
.mc-menu-btn:hover { background: var(--glass-hover); color: var(--text); }

.assign-row {
  display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; transition: background 150ms; position: relative;
}
.assign-row:hover { background: var(--glass-hover); }
.assign-row + .assign-row { margin-top: 2px; }
.assign-row.tc-pending { background: rgba(248,113,113,0.11); border-left: 3px solid rgba(248,113,113,0.5); padding-left: 8px; }
.assign-row.tc-pending:hover { background: rgba(248,113,113,0.17); }
.assign-row.tc-reached { background: rgba(52,211,153,0.16); border-left: 3px solid rgba(52,211,153,0.55); padding-left: 8px; }
.assign-row.tc-reached:hover { background: rgba(52,211,153,0.22); }
.assign-row.tc-over { background: rgba(248,113,113,0.18); border-left: 3px solid rgba(248,113,113,0.6); padding-left: 8px; }
.assign-row.tc-over:hover { background: rgba(248,113,113,0.24); }
.assign-row-top { display: flex; align-items: center; gap: 8px; }
.assign-offer-name { font-weight: 600; font-size: 12.5px; flex: 1; }
.assign-amounts { font-size: 11.5px; color: var(--text-dim); }
.assign-row-bottom { display: flex; align-items: center; gap: 8px; }
.empty-assignments { color: var(--text-dimmer); font-size: 12px; padding: 8px 10px; }

.compact-table-wrap { overflow-x: auto; }

/* ---------- Offer lanes ---------- */
.lane-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.lane-card { padding: 16px 16px; }
.lane-header { margin-bottom: 10px; }
.lane-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.lane-cap-info { font-size: 11.5px; color: var(--text-dim); margin-bottom: 8px; }
.lane-members { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.member-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); cursor: pointer;
}
.member-chip:hover { background: var(--glass-hover); }
.member-chip .mchip-name { font-size: 12.5px; font-weight: 600; flex: 1; }
.member-chip .mchip-amt { font-size: 11.5px; color: var(--text-dim); }

/* ---------- Tracker cell (Members list — one row per member, offers inline) ---------- */
.tracker-offers-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.tracker-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); cursor: pointer; transition: background 150ms;
  /* Fixed line-height so chips carrying an emoji (🌐 for global-cap offers) don't render
     taller than plain-text chips next to them and throw the row out of alignment. */
  line-height: 1;
}
.tracker-chip:hover { background: var(--glass-hover); border-color: var(--glass-border-strong); }
.tracker-chip.tc-pending { background: rgba(248,113,113,0.11); border-color: rgba(248,113,113,0.38); }
.tracker-chip.tc-pending:hover { background: rgba(248,113,113,0.17); }
.tracker-chip.tc-reached { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.45); }
.tracker-chip.tc-reached:hover { background: rgba(52,211,153,0.24); }
.tracker-chip.tc-over { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.45); }
.tracker-chip.tc-over:hover { background: rgba(248,113,113,0.24); }
.tracker-chip .tc-name { font-size: 12px; font-weight: 600; }
.tracker-chip .tc-amt { font-size: 11.5px; color: var(--text-dim); }
.tracker-chip .tc-quality { font-size: 11px; color: var(--amber); }
.tracker-chip .tc-check { color: var(--green); font-size: 12px; font-weight: 700; }
.tracker-chip .tc-fill {
  background: none; border: none; color: var(--green); cursor: pointer; font-size: 12px; padding: 0 1px;
  border-radius: 4px; line-height: 1;
}
.tracker-chip .tc-fill:hover { background: rgba(52,211,153,0.18); }
.tracker-chip .tc-edit {
  background: none; border: none; color: var(--text-dimmer); cursor: pointer; font-size: 11px; padding: 0 1px;
  border-radius: 4px; line-height: 1;
}
.tracker-chip .tc-edit:hover { background: var(--glass-hover); color: var(--text); }
.chip-add-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9px;
  background: var(--glass); border: 1px dashed var(--glass-border-strong); color: var(--text-dim); cursor: pointer; font-size: 13px;
}
.chip-add-btn:hover { background: var(--glass-hover); color: var(--text); }

.vip-tags-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 220px; }

.vip-action-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; font-size: 17px; font-weight: 700; cursor: pointer; transition: transform 100ms, background 150ms;
  border: 1px solid var(--glass-border);
}
.vip-action-btn:active { transform: scale(0.94); }
.vip-action-replied { background: var(--green-bg); color: var(--green); border-color: rgba(52,211,153,0.35); }
.vip-action-replied:hover { background: rgba(52,211,153,0.28); }
.vip-action-note { background: var(--violet-bg); color: var(--violet-2); border-color: rgba(139,92,246,0.35); font-size: 15px; }
.vip-action-note:hover { background: rgba(139,92,246,0.28); }

.quick-mark-cell { text-align: center; }
.row-mark-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 11px; font-size: 17px; font-weight: 700; cursor: pointer; transition: transform 100ms, background 150ms;
  background: var(--green-bg); color: var(--green); border: 1px solid rgba(52,211,153,0.35);
  vertical-align: middle;
}
.row-mark-btn:hover { background: rgba(52,211,153,0.28); }
.row-mark-btn:active { transform: scale(0.94); }
.row-mark-btn:disabled { background: var(--glass); color: var(--text-dimmer); border-color: var(--glass-border); cursor: default; opacity: 0.5; }
.vip-row-actions { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.vip-select-cb {
  width: 20px; height: 20px; cursor: pointer; accent-color: var(--violet);
  border-radius: 5px; margin: 0;
}

.quick-notes-divider { height: 1px; background: var(--glass-border); margin: 16px 0 14px; }
.quick-notes-head { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.quick-note-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; transition: background 150ms;
}
.quick-note-row:hover { background: var(--glass-hover); }
.quick-note-row .qn-text { flex: 1; font-size: 13px; }
.quick-note-row.qn-done .qn-text { text-decoration: line-through; color: var(--text-dimmer); }
.quick-note-row [data-qn-remove] { opacity: 0.5; }
.quick-note-row [data-qn-remove]:hover { opacity: 1; color: var(--red); }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dimmer); border-bottom: 1px solid var(--glass-border); font-weight: 700; cursor: pointer; white-space: nowrap;
  user-select: none;
}
table.data-table th:hover { color: var(--text-dim); }
/* top, not middle: a row with several offer chips grows taller than its neighbors, and
   middle-alignment floated the name/status-dot/quick-mark toward that row's center instead
   of lining up with the first line of chips — every row now starts from the same top edge. */
table.data-table td { padding: 11px 12px; vertical-align: top; }
table.data-table tbody tr { transition: background 150ms; cursor: pointer; }
table.data-table tbody tr:hover { background: var(--glass-hover); }
table.data-table tfoot td { font-weight: 700; border-top: 1px solid var(--glass-border-strong); border-bottom: none; }

/* Offers roster — whole-row tint so "cap reached" is obvious at a glance, not just a small badge. */
table.data-table tbody tr.or-pending { background: rgba(248,113,113,0.13); border-left: 3px solid rgba(248,113,113,0.55); }
table.data-table tbody tr.or-pending:hover { background: rgba(248,113,113,0.20); }
table.data-table tbody tr.or-reached { background: rgba(52,211,153,0.20); border-left: 3px solid rgba(52,211,153,0.6); }
table.data-table tbody tr.or-reached:hover { background: rgba(52,211,153,0.27); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,4,10,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 420; padding: 20px;
  animation: fadein 150ms ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #140f20; border: 1px solid var(--glass-border-strong); border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55); width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  animation: modalin 180ms cubic-bezier(.2,.9,.3,1);
}
.modal.modal-wide { max-width: 780px; }
@keyframes modalin { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--glass-border); }
.modal-title { font-weight: 800; font-size: 15.5px; }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--glass-border); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field input, .field select, .field textarea {
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-family: inherit; font-size: 13.5px; outline: none; transition: border-color 150ms;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(139,92,246,0.55); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* ---------- Quick log popover ---------- */
.popover {
  position: absolute; z-index: 150; background: #150f22; border: 1px solid var(--glass-border-strong);
  border-radius: 14px; box-shadow: var(--shadow); padding: 12px; display: flex; gap: 8px; align-items: center;
  animation: modalin 130ms ease;
}
.popover input {
  width: 110px; padding: 8px 10px; border-radius: 9px; background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-family: inherit; font-size: 14px; outline: none;
}
.popover input:focus { border-color: rgba(139,92,246,0.6); }

/* ---------- Calendar popover ---------- */
.calendar-pop { width: 236px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-weight: 700; font-size: 13px; }
.cal-nav { width: 26px; height: 26px; border-radius: 8px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-weekdays div { text-align: center; font-size: 10px; color: var(--text-dimmer); font-weight: 700; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  border: none; background: none; color: var(--text); font-size: 12.5px; cursor: pointer; font-family: inherit;
  transition: background 120ms;
}
.cal-cell:hover { background: var(--glass-hover); }
.cal-cell.cal-empty { cursor: default; pointer-events: none; }
.cal-cell.cal-today { box-shadow: inset 0 0 0 1px var(--violet); font-weight: 700; }
.cal-cell.cal-selected { background: var(--violet-grad); color: #120a1e; font-weight: 700; box-shadow: none; }
.cal-today-btn { width: 100%; margin-top: 10px; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 500; max-width: 360px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: #16111f; border: 1px solid var(--glass-border-strong); box-shadow: var(--shadow);
  animation: toastin 200ms cubic-bezier(.2,.9,.3,1); font-size: 13px;
}
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast.error { border-color: rgba(248,113,113,0.4); }
.toast .toast-msg { flex: 1; }
.toast .toast-undo { color: var(--violet-2); font-weight: 700; cursor: pointer; background: none; border: none; font-size: 12.5px; }
.toast .toast-close { background: none; border: none; color: var(--text-dimmer); cursor: pointer; }

/* ---------- Empty / skeleton ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 20px; color: var(--text-dim); text-align: center; }
.empty-state .es-icon { font-size: 32px; opacity: 0.7; }
.empty-state .es-title { font-weight: 700; color: var(--text); }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-hero { height: 100px; }
.skel-card { height: 150px; }

/* ---------- Kanban (Issues) ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col { display: flex; flex-direction: column; gap: 10px; }
.kanban-col-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding: 4px 4px 8px; }
.kanban-count { color: var(--text-dimmer); font-weight: 600; }
.kanban-cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.issue-card { padding: 12px 14px; cursor: pointer; }
.issue-card .ic-offer { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.issue-card .ic-desc { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.issue-card .ic-actions { display: flex; gap: 6px; }

/* ---------- Misc utility ---------- */
.flex { display: flex; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.vip-board-grid { grid-template-columns: 1fr 280px; }
/* A grid item won't shrink below its content's intrinsic width by default — without this,
   the wide table inside forces the whole grid track wider instead of scrolling internally. */
#vipBoard { min-width: 0; }
.section-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--text-dim); }
.dimmer { color: var(--text-dimmer); }
.id-badge { cursor: pointer; border-radius: 4px; padding: 1px 3px; }
.id-badge:hover { background: var(--glass-hover); color: var(--text); }
.mt-18 { margin-top: 18px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--glass-border); margin-bottom: 16px; }
.tab-btn { padding: 9px 14px; background: none; border: none; color: var(--text-dim); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; font-size: 13px; }
.tab-btn.active { color: var(--text); border-color: var(--violet); }
.kbd { display: inline-block; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.08); border: 1px solid var(--glass-border); font-size: 11px; font-family: monospace; }

/* ---------- Sidebar section divider (VIP Hub) ---------- */
.nav-divider {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 12px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dimmer);
}
.nav-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }

/* ---------- Drawer (slide-over panel) ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(5,4,10,0.55); backdrop-filter: blur(2px);
  z-index: 210; display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity 220ms ease;
}
.drawer-backdrop.open { opacity: 1; }
.drawer {
  width: 100%; max-width: 480px; height: 100%; background: #120d1c;
  border-left: 1px solid var(--glass-border-strong); box-shadow: -20px 0 50px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform 240ms cubic-bezier(.2,.9,.3,1);
}
.drawer-backdrop.open .drawer { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: flex-start; gap: 10px; padding: 20px; position: sticky; top: 0;
  background: #120d1c; border-bottom: 1px solid var(--glass-border); z-index: 2;
}
.drawer-title { font-weight: 800; font-size: 16px; }
.drawer-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.drawer-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- 5-column kanban (VIP pipeline) ---------- */
.kanban-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1300px) { .kanban-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .kanban-5 { grid-template-columns: 1fr; } }

.vip-card { padding: 13px 14px; cursor: pointer; transition: background 150ms, border-color 150ms; }
.vip-card:hover { background: var(--glass-hover); border-color: var(--glass-border-strong); }
.vip-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.vip-card-name { font-weight: 700; font-size: 13px; flex: 1; }
.vip-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); }
.priority-flag { font-size: 11px; }

/* ---------- Triage mode (full-screen) ---------- */
.triage-overlay {
  position: fixed; inset: 0; background: var(--bg-glow), var(--bg); z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.triage-progress { color: var(--text-dim); font-size: 12.5px; margin-bottom: 14px; }
.triage-card { width: 100%; max-width: 560px; }
.triage-nav { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.triage-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-dim); }

/* ---------- Mobile sidebar ---------- */
.mobile-nav-toggle { display: none; }
@media (max-width: 880px) {
  #app { flex-direction: column; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%);
    transition: transform 200ms ease; background: #0d0a16; width: 240px;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,0.5); }
  .mobile-nav-toggle { display: inline-flex; }
  .page { padding: 16px 14px 60px; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; }
  .hero-grid, #heroGrid { grid-template-columns: 1fr 1fr; }
  .member-grid { grid-template-columns: 1fr; }
  .lane-grid { grid-template-columns: 1fr; }
  .drawer { max-width: 100%; }
  /* Forms throughout the app (modals, Settings) put 2-3 fields side by side — the only
     thing keeping that usable on a phone width is stacking them. */
  .field-row { flex-direction: column; gap: 14px; }
  .vip-board-grid { grid-template-columns: 1fr; }
}