:root {
  --bg-void: #050709;
  --bg-panel: #0B0F1A;
  --bg-panel-2: #0F1524;
  --border: rgba(0, 229, 255, 0.14);
  --border-soft: rgba(232, 236, 244, 0.08);
  --cyan: #00E5FF;
  --violet: #8B5CF6;
  --green: #3DDC84;
  --amber: #F5A623;
  --red: #FF5470;
  --text: #E8ECF4;
  --muted: #7A8399;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg-void);
  color: var(--text);
}

.mono { font-family: 'JetBrains Mono', monospace; }

.app-root {
  min-height: 100vh;
  padding: 32px 28px 60px;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(0,229,255,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(139,92,246,0.08), transparent 60%),
    var(--bg-void);
  position: relative;
}

.loading-screen {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  color: var(--cyan); letter-spacing: 0.08em; font-size: 13px;
}

.header-row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.header-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; color:var(--cyan); text-transform:uppercase; opacity:0.85; margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.header-title { font-size:26px; font-weight:700; letter-spacing:-0.01em; }
.header-sub { color:var(--muted); font-size:13px; margin-top:4px; }

.btn-primary {
  display:flex; align-items:center; gap:6px; background:linear-gradient(135deg, var(--cyan), var(--violet));
  color:#050709; border:none; padding:10px 16px; border-radius:9px; font-weight:600; font-size:13px;
  cursor:pointer; box-shadow:0 0 24px rgba(0,229,255,0.25); transition:transform .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 32px rgba(0,229,255,0.4); }

.kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:24px; }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px) { .kpi-grid { grid-template-columns:repeat(2,1fr); } }

.tilt-card {
  position:relative; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--bg-panel);
  overflow:hidden; transition:transform .12s ease; will-change: transform;
}
.tilt-sheen {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--glow, #00E5FF) 16%, transparent), transparent 70%);
}
.kpi-inner { padding:16px 16px 14px; position:relative; z-index:1; }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-label { font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); }
.kpi-value { font-size:22px; font-weight:700; }

.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.brand-filter-select {
  background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:9px; color:var(--text);
  padding:9px 12px; font-size:13px; font-family:'Space Grotesk',sans-serif; outline:none; cursor:pointer;
}
.brand-filter-select:focus { border-color:var(--cyan); }
.search-box { display:flex; align-items:center; gap:8px; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:9px; padding:8px 12px; flex:1; max-width:320px; }
.search-box input { background:transparent; border:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:'Space Grotesk',sans-serif; }
.search-box input::placeholder { color:var(--muted); }

.board { display:grid; grid-template-columns:repeat(6, minmax(220px,1fr)); gap:12px; overflow-x:auto; padding-bottom:8px; }
@media (max-width: 1200px) { .board { grid-template-columns:repeat(3, minmax(240px,1fr)); } }
@media (max-width: 640px) { .board { grid-template-columns:1fr; } }

.column { background:rgba(255,255,255,0.015); border:1px solid var(--border-soft); border-radius:12px; padding:10px; min-height:120px; transition:background .15s ease, border-color .15s ease; }
.column.drag-over { background:rgba(0,229,255,0.05); border-color:var(--border); }
.column-head { display:flex; align-items:center; gap:8px; padding:4px 6px 10px; }
.status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.column-title { font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.column-count { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }

.collab-card {
  background:var(--bg-panel-2); border:1px solid var(--border-soft); border-radius:10px; padding:11px 12px;
  margin-bottom:9px; cursor:grab; transition:border-color .15s ease, transform .15s ease;
}
.collab-card:hover { border-color:var(--border); transform:translateY(-1px); }
.collab-card:active { cursor:grabbing; }
.card-top { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.card-name { font-size:13.5px; font-weight:600; flex:1; }
.card-type { font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); background:rgba(255,255,255,0.05); padding:2px 6px; border-radius:5px; display:inline-block; margin-bottom:6px; margin-right:5px; }
.card-brand { font-size:9.5px; letter-spacing:0.04em; color:var(--violet); background:rgba(139,92,246,0.12); border:1px solid rgba(139,92,246,0.25); padding:2px 6px; border-radius:5px; display:inline-block; margin-bottom:6px; }
.card-handles { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.handle-chip {
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  background:rgba(0,229,255,0.06); border:1px solid var(--border-soft); border-radius:6px;
  color:var(--muted); text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.handle-chip:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,229,255,0.14); }
.card-meta { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace; flex-wrap:wrap; }
.card-meta span { display:flex; align-items:center; gap:3px; }
.card-business { color: var(--green); }

.empty-col { color:var(--muted); font-size:11px; text-align:center; padding:18px 6px; opacity:0.5; font-family:'JetBrains Mono',monospace; }

.modal-backdrop { position:fixed; inset:0; background:rgba(2,4,8,0.75); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-panel { width:100%; max-width:600px; max-height:90vh; overflow-y:auto; background:var(--bg-panel); border:1px solid var(--border); border-radius:14px; box-shadow:0 0 60px rgba(0,229,255,0.08); padding:20px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-title { font-weight:700; font-size:15px; }
.icon-btn { background:transparent; border:1px solid var(--border-soft); color:var(--muted); border-radius:7px; padding:6px; cursor:pointer; display:flex; }
.icon-btn:hover { color:var(--text); border-color:var(--border); }

.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border-soft); }
.tab-btn { background:transparent; border:none; color:var(--muted); padding:8px 4px; margin-right:16px; font-size:12.5px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; font-family:inherit; }
.tab-btn.active { color:var(--cyan); border-bottom-color:var(--cyan); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.field.full { grid-column:1/-1; }
.field-label { color:var(--muted); letter-spacing:0.03em; }
.field input, .field select, .field textarea {
  background:var(--bg-panel-2); border:1px solid var(--border-soft); border-radius:7px; color:var(--text);
  padding:8px 9px; font-size:13px; font-family:'Space Grotesk',sans-serif; outline:none; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--cyan); }
.field textarea { resize:vertical; min-height:52px; }

.modal-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:10px; }
.btn-danger { background:transparent; border:1px solid rgba(255,84,112,0.4); color:var(--red); padding:9px 13px; border-radius:8px; font-size:12.5px; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:inherit; }
.btn-danger:hover { background:rgba(255,84,112,0.08); }
.btn-ghost { background:transparent; border:1px solid var(--border-soft); color:var(--text); padding:9px 14px; border-radius:8px; font-size:12.5px; cursor:pointer; font-family:inherit; }

.sublist-item { display:flex; align-items:center; gap:8px; background:var(--bg-panel-2); border:1px solid var(--border-soft); border-radius:8px; padding:8px 10px; margin-bottom:8px; font-size:12px; }
.sublist-item .grow { flex:1; }
.sublist-item .meta { color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:11px; }
.sublist-remove { background:transparent; border:none; color:var(--red); cursor:pointer; padding:4px; display:flex; }
.add-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.add-row input, .add-row select { background:var(--bg-panel-2); border:1px solid var(--border-soft); border-radius:7px; color:var(--text); padding:7px 8px; font-size:12px; font-family:'Space Grotesk',sans-serif; }
.add-row .btn-small { background:rgba(0,229,255,0.12); border:1px solid var(--border); color:var(--cyan); border-radius:7px; padding:7px 10px; font-size:12px; cursor:pointer; font-family:inherit; }
.sub-empty { color:var(--muted); font-size:11.5px; opacity:0.6; padding:6px 0; font-family:'JetBrains Mono',monospace; }
.sub-section-label { font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin: 14px 0 8px; }

.toast { position:fixed; bottom:20px; right:20px; background:#1a0a0e; border:1px solid var(--red); color:var(--red); padding:10px 14px; border-radius:8px; font-size:12px; z-index:80; }