:root {
  --sidebar-w:      248px;
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --border:         #e2e8f0;
  --border-soft:    #f1f5f9;
  --text:           #0f172a;
  --text-sub:       #475569;
  --muted:          #94a3b8;
  --sidebar-bg:     #080b10;
  --sidebar-txt:    #94a3b8;
  --sidebar-muted:  #334155;
  --sidebar-active: rgba(99,102,241,0.14);
  --accent:         #6366f1;
  --accent-soft:    #eef2ff;
  --accent-hover:   #4f46e5;
  --success:        #10b981;
  --success-soft:   #d1fae5;
  --danger:         #ef4444;
  --danger-soft:    #fee2e2;
  --warning:        #f59e0b;
  --warning-soft:   #fef3c7;
  --blue:           #3b82f6;
  --blue-soft:      #dbeafe;
  --teal:           #14b8a6;
  --purple:         #8b5cf6;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow:         0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.12);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html,body { height:100% }
body {
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.5;
  display: flex; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; cursor:pointer }
button { cursor:pointer; font-family:inherit; border:none; background:transparent; outline:none }
input,textarea,select { font-family:inherit; font-size:14px }

/* ======================================================
   SIDEBAR
   ====================================================== */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  height: 100vh; background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  overflow: hidden; position: sticky; top: 0;
  border-right: 1px solid rgba(255,255,255,.04);
}

.sidebar-header {
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display:flex; align-items:center; gap:12px }
.brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 10px;
  display: flex; align-items:center; justify-content:center;
  font-weight: 800; font-size: 16px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.brand-text { display:flex; flex-direction:column; gap:1px }
.brand-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.02em }
.brand-sub  { font-size:10px; color:var(--sidebar-muted); letter-spacing:.08em; text-transform:uppercase }

.sidebar-nav {
  flex: 1; padding: 10px 10px;
  overflow-y: auto; scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display:none }

.nav-grp {
  font-size: 10px; font-weight: 700; color: #2d3a4a;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 16px 12px 5px;
  pointer-events: none;
}
.ic { font-size: 15px; line-height: 1; flex-shrink: 0 }
.nb {
  margin-left: auto; font-size: 10px; font-weight: 700;
  border-radius: 20px; padding: 1px 6px; flex-shrink: 0;
}
.nb.rd { background: rgba(239,68,68,.2);   color: #f87171 }
.nb.yw { background: rgba(245,158,11,.2);  color: #fbbf24 }
.nb.gn { background: rgba(16,185,129,.2);  color: #34d399 }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  color: #94a3b8;
  background: transparent;
  font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  margin-bottom: 1px; width: 100%; text-align: left;
  border-left: 2px solid transparent;
  outline: none;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #e2e8f0 }
.nav-item.active {
  background: rgba(99,102,241,.14);
  color: #a5b4fc;
  border-left-color: #6366f1;
  font-weight: 600;
}

.sidebar-footer {
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar-footer-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--sidebar-txt); font-size: 13px; font-weight: 500;
  background: transparent; transition: background .15s, color .15s;
}
.sidebar-footer-btn:hover { background: rgba(255,255,255,.04); color: #e2e8f0 }
.sidebar-footer-btn.active { background: rgba(99,102,241,.14); color: #a5b4fc }
.sidebar-footer-btn .ic { font-size: 15px }
.sync-indicator { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sidebar-muted); padding: 0 4px }
.sync-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0; transition: background .3s;
}
.sync-dot.online  { background: var(--success); box-shadow: 0 0 6px rgba(16,185,129,.6) }
.sync-dot.offline { background: var(--danger) }

/* ======================================================
   MAIN AREA
   ====================================================== */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0 }

.topbar {
  height: 60px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; flex-shrink: 0; gap: 16px;
}
.topbar-left  { display:flex; align-items:baseline; gap:10px }
.page-title   { font-size: 17px; font-weight: 700; letter-spacing:-.02em; color: var(--text) }
.page-date    { font-size: 12px; color: var(--muted) }
.topbar-right { display:flex; align-items:center; gap:8px; position: relative }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(99,102,241,.35);
}

.content-area {
  flex:1; overflow-y:auto; padding: 28px 32px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.content-area::-webkit-scrollbar { width:5px }
.content-area::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }

.view { display:none; flex-direction:column; gap:22px }
.view.active { display:flex }

/* ======================================================
   TAB STRIP (inside views)
   ====================================================== */
.tab-strip {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-top: -6px;
}
.tab-strip .tab {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.tab-strip .tab:hover { color: var(--text-sub) }
.tab-strip .tab.active { color: var(--accent); border-bottom-color: var(--accent) }
.tab-panel { display: none; flex-direction: column; gap: 22px }
.tab-panel.active { display: flex }

/* ======================================================
   EDIT DRAWER
   ====================================================== */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 10000;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 10001; display: flex; flex-direction: column;
}

/* Hide floating chrome (chat bubble, chat panel) when any overlay is open */
body.chrome-hidden #chat-bubble,
body.chrome-hidden #chat-panel { opacity: 0 !important; pointer-events: none !important; transition: opacity .18s }
.drawer.open { transform: translateX(0) }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.drawer-title { font-size: 16px; font-weight: 700; color: var(--text) }
.drawer-close {
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.drawer-close:hover { background: var(--border-soft); color: var(--text) }
.drawer-body {
  flex: 1; overflow-y: auto; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.drawer-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--border);
  background: var(--border-soft); flex-shrink: 0;
}
.drawer-field { display: flex; flex-direction: column; gap: 6px }
.drawer-field label {
  font-size: 11.5px; font-weight: 600; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .04em;
}
.drawer-field input,
.drawer-field textarea,
.drawer-field select {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}
.drawer-field input:focus,
.drawer-field textarea:focus,
.drawer-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.drawer-field textarea { min-height: 80px; resize: vertical; font-family: inherit }
.drawer-field .hint { font-size: 11px; color: var(--muted) }

/* ======================================================
   AUTH SCREEN
   ====================================================== */
.auth-screen {
  position: fixed; inset: 0; z-index: 11000;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 1; transition: opacity .25s;
}
.auth-screen.hidden { opacity: 0; pointer-events: none }
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border-radius: 16px; padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px }
.auth-logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px;
}
.auth-brand-name { font-weight: 700; font-size: 17px; color: var(--text) }
.auth-brand-sub  { font-size: 12px; color: var(--muted) }
.auth-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px }
.auth-sub   { font-size: 13.5px; color: var(--text-sub); margin-bottom: 22px }
.auth-form  { display: flex; flex-direction: column; gap: 14px }
.auth-field { display: flex; flex-direction: column; gap: 6px }
.auth-field label {
  font-size: 11.5px; font-weight: 600; color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .04em;
}
.auth-field input {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.auth-error {
  padding: 10px 12px; background: var(--danger-soft); color: var(--danger);
  border-radius: 8px; font-size: 13px;
}
.auth-submit {
  margin-top: 4px; padding: 12px; background: var(--accent); color: #fff;
  border-radius: 9px; font-size: 14px; font-weight: 600;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.auth-submit:hover { background: var(--accent-hover) }
.auth-submit:disabled { opacity: .6; cursor: wait }
.auth-toggle {
  margin-top: 6px; text-align: center; font-size: 13px; color: var(--muted);
}
.auth-toggle a {
  color: var(--accent); font-weight: 600; cursor: pointer; margin-left: 4px;
}
.auth-toggle a:hover { text-decoration: underline }

/* ======================================================
   USER MENU (avatar dropdown)
   ====================================================== */
.avatar { cursor: pointer; transition: transform .12s }
.avatar:hover { transform: scale(1.05) }
.user-menu {
  position: absolute; top: 50px; right: 0; width: 240px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 8px; z-index: 500;
}
.user-menu-info {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px;
}
.user-menu-email { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all }
.user-menu-org   { font-size: 11.5px; color: var(--muted); margin-top: 2px }
.user-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 7px; font-size: 13px; color: var(--text);
  transition: background .12s;
}
.user-menu-item:hover { background: var(--border-soft) }
.user-menu-danger { color: var(--danger) }
.user-menu-danger:hover { background: var(--danger-soft) }

/* ======================================================
   TEAM VIEW — members + invites
   ====================================================== */
.team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
}
.team-row:last-child { border-bottom: none }
.team-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.team-avatar-ghost {
  background: var(--border-soft); color: var(--muted);
}
.team-row-main { flex: 1; min-width: 0 }
.team-row-email { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all }
.team-row-meta  { font-size: 12px; color: var(--muted); margin-top: 2px }
.team-row-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0 }
.team-role-select { padding: 6px 8px; font-size: 12px; width: 110px }

.role-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0;
}
.role-owner  { background: rgba(99,102,241,.15);  color: #6366f1 }
.role-admin  { background: rgba(16,185,129,.15);  color: #10b981 }
.role-member { background: rgba(100,116,139,.15); color: #64748b }

/* ======================================================
   BUTTONS
   ====================================================== */
.btn-primary {
  padding: 8px 16px; background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  transition: background .15s, box-shadow .15s; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 12px rgba(99,102,241,.4) }

.btn-success {
  padding: 8px 16px; background: var(--success); color: #fff;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  transition: background .15s; white-space: nowrap;
}
.btn-success:hover { background: #059669 }

.btn-ghost {
  padding: 7px 14px; background: transparent; color: var(--text-sub);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  display: flex; align-items:center; gap:6px;
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--surface); border-color: #cbd5e1; color: var(--text) }

.btn-ghost-sm {
  padding: 4px 10px; background: transparent; color: var(--accent);
  border: none; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; transition: background .15s;
}
.btn-ghost-sm:hover { background: var(--accent-soft) }

.btn-sm { padding: 5px 12px !important; font-size: 12px !important }

/* ======================================================
   PANELS / CARDS
   ====================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel-header {
  display: flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft); gap: 12px;
}
.panel-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  display: flex; align-items:center; gap: 8px;
}
.label-sm { font-size:12px }
.muted { color: var(--muted) }

/* ======================================================
   KPI CARDS
   ====================================================== */
.kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:16px }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 16px;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s;
}
.kpi-card:hover { box-shadow: var(--shadow) }
.kpi-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.kpi-value { font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.kpi-trend { font-size:11px; color:var(--muted); margin-top:6px }
.kpi-trend.up   { color: var(--success) }
.kpi-trend.down { color: var(--danger) }

.text-success { color: var(--success) !important }
.text-danger  { color: var(--danger)  !important }
.text-blue    { color: var(--blue)    !important }
.text-warning { color: var(--warning) !important }

/* ======================================================
   STAGE FUNNEL
   ====================================================== */
.stages-row {
  display: flex; align-items:flex-end; gap:8px;
  padding: 20px 20px 16px; min-height: 160px;
}
.stage-col  { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px }
.stage-bar  { width:100%; border-radius:6px 6px 0 0; min-height:6px; transition:height .4s ease }
.stage-count { font-size:16px; font-weight:800; color:var(--text) }
.stage-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing:.04em; text-align:center;
}

/* ======================================================
   GRID + TABLES
   ====================================================== */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.table-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse }
th {
  padding: 10px 16px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing:.05em;
  text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface);
}
td {
  padding: 12px 16px; font-size: 13px; color: var(--text-sub);
  border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
tbody tr:last-child td { border-bottom:none }
tbody tr:hover td { background: #fafbff }
.td-name { font-weight:600; color:var(--text) }

/* ======================================================
   BADGES / PILLS / TAGS
   ====================================================== */
.score-pill {
  display: inline-flex; align-items:center;
  padding: 2px 9px; border-radius:20px;
  font-size: 12px; font-weight: 700;
}
.score-hot  { background: var(--danger-soft);  color: var(--danger) }
.score-warm { background: var(--warning-soft); color: var(--warning) }
.score-cold { background: #f1f5f9;             color: var(--muted) }

.stage-tag {
  display: inline-flex; align-items:center; padding:2px 9px;
  border-radius: 5px; font-size: 11.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
.badge {
  display: inline-flex; align-items:center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.badge-success { background:var(--success-soft); color:var(--success) }
.badge-danger  { background:var(--danger-soft);  color:var(--danger) }
.badge-warning { background:var(--warning-soft); color:var(--warning) }
.badge-neutral { background:#f1f5f9;             color:var(--muted) }

/* ======================================================
   ACTIONS GRID
   ====================================================== */
.actions-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:18px 20px 22px }
.action-tile {
  display: flex; flex-direction:column; align-items:center; gap:12px;
  padding: 22px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); font-size:13px; font-weight:600;
  color: var(--text-sub); transition: border-color .15s, background .15s, transform .12s;
}
.action-tile:hover {
  border-color: var(--accent); background: var(--surface);
  transform: translateY(-2px); box-shadow: var(--shadow);
  color: var(--accent);
}
.action-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.action-icon svg { width:20px; height:20px; stroke:#fff }
.bg-indigo  { background: linear-gradient(135deg,#6366f1,#8b5cf6) }
.bg-blue    { background: linear-gradient(135deg,#3b82f6,#06b6d4) }
.bg-purple  { background: linear-gradient(135deg,#8b5cf6,#ec4899) }
.bg-teal    { background: linear-gradient(135deg,#14b8a6,#10b981) }
.bg-success { background: linear-gradient(135deg,#10b981,#34d399) }

/* ======================================================
   KANBAN
   ====================================================== */
.kanban-board { display:flex; gap:14px; padding:20px; overflow-x:auto; min-height:420px }
.kanban-col { min-width:220px; max-width:220px; display:flex; flex-direction:column; gap:8px }
.kanban-col-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px; font-size:11.5px; font-weight:700; color:var(--text-sub);
  text-transform:uppercase; letter-spacing:.04em;
}
.kanban-count {
  background:var(--bg); border:1px solid var(--border);
  border-radius:20px; padding:1px 8px; font-size:11px; color:var(--muted);
}
.kanban-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:12px 14px;
  box-shadow:var(--shadow-sm); transition:box-shadow .15s;
}
.kanban-card:hover { box-shadow:var(--shadow) }
.kanban-card-name    { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px }
.kanban-card-company { font-size:12px; color:var(--muted); margin-bottom:8px }
.kanban-card-meta    { display:flex; align-items:center; justify-content:space-between }
.kanban-loading      { color:var(--muted); font-size:13px; padding:20px }

/* ======================================================
   SEARCH INPUT
   ====================================================== */
.search-input {
  padding: 7px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--text); font-size: 13px; width: 200px;
  outline: none; transition: border-color .15s;
}
.search-input:focus { border-color: var(--accent); background: var(--surface) }

/* ======================================================
   STATUS PILL
   ====================================================== */
.api-status-pill {
  display: inline-flex; align-items:center; gap:7px; padding:6px 12px;
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--text-sub);
  background: var(--bg); transition: background .15s; cursor: pointer;
}
.api-status-pill:hover { background:var(--surface); border-color:var(--accent); color:var(--accent) }

/* ======================================================
   EMPTY STATE
   ====================================================== */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:60px 24px; text-align:center;
}
.empty-icon {
  width: 72px; height: 72px; background: var(--bg); border-radius: 50%;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  font-size:28px;
}
.empty-title { font-size:15px; font-weight:700; color:var(--text) }
.empty-desc  { font-size:13px; color:var(--muted); max-width:380px; line-height:1.6 }

/* ======================================================
   WORKFLOWS
   ====================================================== */
.workflows-list { display:flex; flex-direction:column }
.workflow-row {
  display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom: 1px solid var(--border-soft); transition:background .12s;
}
.workflow-row:last-child { border-bottom:none }
.workflow-row:hover { background:#fafbff }
.wf-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.wf-info { flex:1 }
.wf-name { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:2px }
.wf-desc { font-size:12px; color:var(--muted) }

/* ======================================================
   MODAL
   ====================================================== */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.5);
  z-index:200; align-items:center; justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex }
.modal {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:490px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18), 0 4px 20px rgba(0,0,0,.08);
  animation: modal-in .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modal-in {
  from { opacity:0; transform:translateY(12px) scale(.96) }
  to   { opacity:1; transform:none }
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border-soft);
}
.modal-header h3 { font-size:16px; font-weight:700; letter-spacing:-.01em }
.modal-close {
  width:28px; height:28px; border-radius:6px; background:transparent;
  color:var(--muted); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s;
}
.modal-close:hover { background:var(--bg); color:var(--text) }
.modal-body   { padding:18px 22px; display:flex; flex-direction:column; gap:14px }
.modal-footer {
  padding: 14px 22px 20px; border-top: 1px solid var(--border-soft);
  display:flex; justify-content:flex-end; gap:8px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-group { display:flex; flex-direction:column; gap:5px }
.form-group label { font-size:12.5px; font-weight:700; color:var(--text-sub) }
.form-hint { font-size:11.5px; color:var(--muted); margin-top:2px }

/* ======================================================
   TOAST
   ====================================================== */
.toast {
  position:fixed; bottom:28px; right:28px; padding:12px 18px;
  border-radius: var(--radius-sm); font-size:13px; font-weight:600;
  color:#fff; box-shadow: var(--shadow-lg); z-index:999;
  animation: toast-in .2s ease; max-width:340px;
}
.toast.success { background:var(--success) }
.toast.error   { background:var(--danger) }
.toast.info    { background:var(--accent) }
@keyframes toast-in {
  from { opacity:0; transform:translateY(10px) scale(.97) }
  to   { opacity:1; transform:none }
}

/* ======================================================
   NAV GROUPS / BADGES / IC
   ====================================================== */
.notifbell {
  position:relative; cursor:pointer; font-size:18px;
  padding:5px 8px; border-radius:var(--radius-sm); transition:background .15s;
}
.notifbell:hover { background:var(--bg) }
.ncount {
  position:absolute; top:-2px; right:-2px;
  background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; border-radius:20px;
  padding:0 4px; min-width:14px; text-align:center; line-height:14px; display:none;
}

.stitle {
  font-size:20px; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  letter-spacing:-.03em;
}
.ss { font-size:13px; font-weight:400; color:var(--muted) }

.alerts-bar { display:flex; flex-direction:column; gap:8px }
.alert { padding:11px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:500 }
.alert-blue    { background:var(--blue-soft);    color:#1d4ed8; border:1px solid #bfdbfe }
.alert-danger  { background:var(--danger-soft);  color:var(--danger); border:1px solid #fecaca }
.alert-warning { background:var(--warning-soft); color:var(--warning); border:1px solid #fde68a }

/* ======================================================
   GOALS
   ====================================================== */
.goals-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px }
.goal-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s;
}
.goal-card:hover { box-shadow:var(--shadow) }
.goal-label {
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px;
}
.goal-value { font-size:26px; font-weight:800; letter-spacing:-.03em }
.goal-sub   { font-size:11.5px; color:var(--muted); margin-top:4px }
.goal-prog  { height:4px; background:var(--border); border-radius:2px; margin-top:12px; overflow:hidden }
.goal-prog-fill { height:100%; border-radius:2px; transition:width .5s ease }

/* ======================================================
   SERVICE HEALTH
   ====================================================== */
.svc-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid var(--border-soft);
}
.svc-row:last-child { border-bottom:none }
.health {
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:20px;
}
.health.ok  { background:var(--success-soft); color:var(--success) }
.health.un  { background:#f1f5f9;             color:var(--muted) }
.health.err { background:var(--danger-soft);  color:var(--danger) }
.hd { width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.hd.ok  { background:var(--success) }
.hd.un  { background:var(--muted) }
.hd.err { background:var(--danger) }

.num-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid var(--border-soft); font-size:13px;
}
.num-row:last-child { border-bottom:none }
.divider-line { height:1px; background:var(--border); margin:8px 0 }
.muted-text   { color:var(--muted); font-size:13px }
.empty-cell   { text-align:center; color:var(--muted); padding:28px 16px !important; font-size:13px }

/* ======================================================
   PROJECTS
   ====================================================== */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px }
.pc {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s, transform .15s;
}
.pc:hover { box-shadow:var(--shadow); transform:translateY(-1px) }
.pc-header  { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px }
.pc-icon    { font-size:26px }
.pc-name    { font-size:15px; font-weight:800; color:var(--text); margin-bottom:2px; letter-spacing:-.01em }
.pc-client  { font-size:12px; color:var(--muted); margin-bottom:10px }
.pc-desc    { font-size:12.5px; color:var(--text-sub); margin-bottom:12px; line-height:1.55 }
.pc-tags    { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px }
.pc-tag     {
  font-size:11px; padding:2px 8px; border-radius:5px;
  background:var(--accent-soft); color:var(--accent); font-weight:600;
}
.pc-prog-label { display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-bottom:5px }
.pc-prog       { height:6px; background:var(--border); border-radius:3px; overflow:hidden }
.pc-prog-fill  { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:3px; transition:width .4s }

/* ======================================================
   COLD EMAIL STACK
   ====================================================== */
.ce-stack { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px }
.ce-app {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm);
}
.ce-app-name { font-size:15px; font-weight:800; color:var(--text); margin-bottom:5px }
.ce-app-role { font-size:12px; color:var(--text-sub); margin-bottom:10px; line-height:1.5 }
.ce-app-cost { font-size:22px; font-weight:800; color:var(--accent) }
.ce-per  { font-size:12px; font-weight:400; color:var(--muted) }
.ce-note { font-size:11px; color:var(--muted); margin-top:8px; background:var(--bg); padding:5px 9px; border-radius:5px }

/* ======================================================
   OUTREACH
   ====================================================== */
.svc-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm);
}
.svc-name { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:6px }
.svc-desc { font-size:12px; color:var(--text-sub); margin-bottom:10px; line-height:1.5 }
.svc-goal {
  font-size:11.5px; color:var(--accent); font-weight:700;
  background:var(--accent-soft); padding:3px 9px; border-radius:5px; display:inline-block;
}
.or-week { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin:6px 8px }
.or-week-title { font-size:13px; font-weight:700; margin-bottom:10px }
.or-week-row { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-sub) }
.or-kv { display:flex; gap:4px; align-items:center }
.or-kv strong { color:var(--text) }

/* ======================================================
   VPS SERVICES
   ====================================================== */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:12px; padding:16px }
.svc-tile { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px }
.svc-top  { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px }
.svc-stat { font-size:11.5px; color:var(--muted) }
.kv-list  { padding:16px; display:flex; flex-direction:column }
.kv-row   { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:13px }
.kv-row:last-child { border-bottom:none }
.kv-row span:first-child { color:var(--muted) }
.code-val  { font-family:'Courier New',monospace; font-size:12px; background:var(--bg); padding:2px 7px; border-radius:4px; color:var(--accent) }
.route     { font-family:'Courier New',monospace; font-size:11px; background:var(--accent-soft); color:var(--accent); padding:2px 7px; border-radius:4px }
.code-tiny { font-family:'Courier New',monospace; font-size:10.5px; background:var(--bg); padding:1px 5px; border-radius:3px; color:var(--text-sub) }

/* ======================================================
   CLIENT DETAILS
   ====================================================== */
.client-details { padding:12px 16px; display:flex; flex-direction:column }
.client-row { display:flex; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:13px; gap:12px }
.client-row:last-child { border-bottom:none }
.client-row > span:first-child { color:var(--muted); min-width:92px; flex-shrink:0 }
.link { color:var(--accent) }
.link:hover { text-decoration:underline }
.cell-muted { color:var(--text-sub) }
.client-panel { overflow:hidden }
.next-client-panel { border:2px dashed var(--border) !important; background:transparent !important }

/* ======================================================
   REVENUE
   ====================================================== */
.rev-total { font-size:38px; font-weight:800; color:var(--success); letter-spacing:-.03em }

/* ======================================================
   FORM INPUT
   ====================================================== */
.fi {
  padding: 9px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--text); font-family:inherit; font-size:13px;
  outline:none; transition:border-color .15s, background .15s; width:100%;
}
.fi:focus { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px rgba(99,102,241,.1) }
select.fi { cursor:pointer }
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); background:var(--surface) }
.form-group input, .form-group textarea {
  padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text); outline:none; transition:border-color .15s; resize:vertical; width:100%;
}

/* ======================================================
   MILESTONES
   ====================================================== */
.ms-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 18px; border-bottom:1px solid var(--border-soft);
  cursor:pointer; transition:background .12s;
}
.ms-item:last-child { border-bottom:none }
.ms-item:hover { background:#fafbff }
.ms-check {
  width:18px; height:18px; border-radius:50%; border:2px solid var(--border);
  flex-shrink:0; margin-top:1px; transition:all .2s;
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.ms-check.done { background:var(--success); border-color:var(--success); color:#fff }
.ms-text       { font-size:13.5px; font-weight:600; flex:1 }
.ms-text.done  { text-decoration:line-through; color:var(--muted) }
.ms-meta       { font-size:11.5px; color:var(--muted); margin-top:2px }
.ms-bill-badge { font-size:10.5px; background:var(--warning-soft); color:var(--warning); border-radius:4px; padding:1px 6px; font-weight:700; margin-left:6px }

/* ======================================================
   REMINDERS
   ====================================================== */
.rem {
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  border-radius:var(--radius-sm); border:1.5px solid var(--border);
  margin-bottom:8px; background:var(--surface);
  cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.rem:hover { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.07) }
.rem.done-item { opacity:.45 }
.rem-check { width:18px; height:18px; border-radius:5px; border:2px solid var(--border); flex-shrink:0; margin-top:1px; transition:all .2s; display:flex; align-items:center; justify-content:center; font-size:10px }
.rem-check.done { background:var(--success); border-color:var(--success); color:#fff }
.rem-text  { flex:1 }
.rem-title { font-size:13px; font-weight:600 }
.rem-meta  { font-size:11.5px; color:var(--muted); margin-top:2px }
.rem-pri   { font-size:10px; font-weight:700; padding:1px 5px; border-radius:3px; margin-left:6px }
.rem-pri.high { background:var(--danger-soft);  color:var(--danger) }
.rem-pri.med  { background:var(--warning-soft); color:var(--warning) }
.rem-pri.low  { background:#f1f5f9;             color:var(--muted) }

/* ======================================================
   ACTIVITY
   ====================================================== */
.act-feed { display:flex; flex-direction:column }
.act-item { display:flex; align-items:flex-start; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border-soft); font-size:13px }
.act-item:last-child { border-bottom:none }
.act-dot  { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:4px }
.act-msg  { flex:1; color:var(--text-sub) }
.act-time { font-size:11px; color:var(--muted); white-space:nowrap }

/* ======================================================
   TOOLS HUB
   ====================================================== */
.link-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-top:8px }
.link-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.link-card:hover { box-shadow:var(--shadow); border-color:var(--accent); transform:translateY(-1px) }
.link-icon { font-size:24px; margin-bottom:10px }
.link-name { font-size:13px; font-weight:800; color:var(--text); margin-bottom:3px }
.link-desc { font-size:12px; color:var(--muted) }

/* ======================================================
   INVOICES
   ====================================================== */
.inv-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:box-shadow .15s;
}
.inv-card:hover { box-shadow:var(--shadow) }
.inv-meta   { flex:1 }
.inv-num    { font-size:12px; color:var(--muted); margin-bottom:2px }
.inv-title  { font-size:14px; font-weight:700; color:var(--text) }
.inv-client { font-size:12px; color:var(--text-sub) }
.inv-amount { font-size:20px; font-weight:800; color:var(--text) }
.inv-date   { font-size:11.5px; color:var(--muted); text-align:right; margin-top:2px }

/* ======================================================
   WEEKLY REVIEW
   ====================================================== */
.wr-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow-sm) }
.wr-week    { font-size:12px; color:var(--muted); margin-bottom:10px }
.wr-section { margin-bottom:12px }
.wr-label   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-sub); margin-bottom:4px }
.wr-text    { font-size:13px; color:var(--text) }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media(max-width:1280px) { .kpi-row { grid-template-columns:repeat(3,1fr) } }
@media(max-width:960px) {
  .grid-2 { grid-template-columns:1fr }
  .actions-grid { grid-template-columns:repeat(2,1fr) }
  .kpi-row { grid-template-columns:repeat(2,1fr) }
  .sidebar { width:62px; min-width:62px }
  .brand-text,.nav-grp,.sidebar-footer { display:none }
  .nav-item { justify-content:center; padding:10px }
  .nav-item .ic { font-size:18px }
  .nav-item > span:not(.ic):not(.nb) { display:none }
  .nb { display:none }
  .content-area { padding:16px 18px }
}
@media(max-width:640px) {
  .topbar { padding:0 16px }
  .kpi-row { grid-template-columns:1fr 1fr }
}

@keyframes chatPulse {
  0%,100% { box-shadow: 0 4px 24px rgba(99,102,241,0.5); transform: scale(1); }
  50%      { box-shadow: 0 4px 32px rgba(99,102,241,0.9); transform: scale(1.08); }
}