/* App shell */
body.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh;background:var(--bg)}
.sidebar{background:var(--bg-elev);border-right:1px solid var(--line);padding:24px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-logo{display:flex;align-items:center;gap:11px;padding:0 24px 28px;font-size:1.1rem;font-weight:700;border-bottom:1px solid var(--line);margin-bottom:14px}
.sidebar-nav{flex:1;padding:0 12px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px;color:var(--fg-dim);font-size:.92rem;font-weight:500;margin-bottom:3px;transition:all .15s;cursor:pointer}
.nav-item:hover{background:var(--bg-elev-2);color:var(--fg)}
.nav-item.active{background:var(--gold-dim);color:var(--gold)}
.nav-icon{width:18px;text-align:center;font-size:1rem;opacity:.8}
.badge{margin-left:auto;background:var(--bg);color:var(--muted);font-size:.72rem;padding:2px 7px;border-radius:10px;font-weight:600}
.nav-item.active .badge{background:var(--gold);color:#0a0a0b}
.sidebar-foot{padding:14px 18px;border-top:1px solid var(--line)}
.agent-status{display:flex;align-items:center;gap:12px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:pulse 2s infinite}
.status-dot.inline{display:inline-block;margin-right:9px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.agent-name{font-weight:600;font-size:.92rem}
.agent-sub{font-size:.74rem;color:var(--muted);margin-top:2px}

/* Main */
.main{padding:32px 40px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;flex-wrap:wrap;gap:18px}
.topbar-eyebrow{color:var(--muted);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.topbar-title{font-size:2rem;font-weight:700;letter-spacing:-0.02em;line-height:1}
.customer-pill{padding:7px 14px;background:var(--gold-dim);color:var(--gold);border-radius:8px;font-size:.85rem;font-weight:600}

.route{animation:fadeIn .2s ease}
.route.hidden{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:20px}
.kpi-label{font-size:.78rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.kpi-value{font-size:1.85rem;font-weight:700;letter-spacing:-0.02em;line-height:1}
.kpi-unit{font-size:1.05rem;color:var(--muted);font-weight:500;margin-left:2px}
.kpi-sub{font-size:.78rem;color:var(--muted);margin-top:8px}
.kpi-trend-up{color:var(--green)}

/* Two-column layout */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
@media(max-width:980px){.two-col{grid-template-columns:1fr}}

.card-panel{background:var(--bg-elev);border:1px solid var(--line);border-radius:14px;padding:24px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.panel-head h3{font-size:1.05rem;font-weight:600}
.ts{color:var(--muted);font-size:.78rem}
.link-gold{color:var(--gold);font-size:.85rem;font-weight:500}

/* Activity list */
.activity-list{list-style:none;display:flex;flex-direction:column;gap:1px}
.activity-item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.activity-item:last-child{border-bottom:none}
.activity-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:.9rem;font-weight:700;background:var(--bg-elev-2)}
.activity-icon.email{background:rgba(99,102,241,.15);color:#a5b4fc}
.activity-icon.ops{background:rgba(245,158,11,.15);color:#fbbf24}
.activity-icon.skill{background:rgba(212,175,55,.15);color:var(--gold)}
.activity-icon.error{background:rgba(239,68,68,.15);color:#fca5a5}
.activity-body{flex:1;min-width:0}
.activity-title{font-size:.92rem;font-weight:500;color:var(--fg);margin-bottom:3px}
.activity-meta{font-size:.78rem;color:var(--muted)}
.activity-meta .ts-rel{color:var(--muted-dim);margin-left:8px}

/* Loom card */
.loom-card .loom-thumb{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-elev-2) 100%);border:1px dashed var(--line-bright);border-radius:10px;padding:32px;text-align:center;color:var(--gold);font-weight:600;cursor:pointer;transition:border-color .2s}
.loom-card .loom-thumb:hover{border-color:var(--gold)}

/* Sparklines */
.sparkline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.sparkline-card{padding:14px}
.spark-label{font-size:.78rem;color:var(--muted);margin-bottom:6px}
.spark-value{font-size:1.4rem;font-weight:700;letter-spacing:-0.015em;margin-bottom:8px}
.spark-svg{width:100%;height:38px}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;min-height:600px}
@media(max-width:1100px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kanban{grid-template-columns:1fr}}
.kanban-col{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:300px}
.kanban-col.drag-over{border-color:var(--gold)}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}
.kanban-col-title{font-size:.85rem;font-weight:600;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.06em}
.kanban-count{background:var(--bg);color:var(--muted);font-size:.72rem;padding:2px 8px;border-radius:10px;font-weight:600}
.kanban-cards{display:flex;flex-direction:column;gap:10px;min-height:60px}
.kanban-card{background:var(--bg);border:1px solid var(--line-bright);border-radius:10px;padding:14px 16px;cursor:grab;transition:all .15s}
.kanban-card:hover{border-color:var(--gold)}
.kanban-card:active{cursor:grabbing}
.kanban-card.dragging{opacity:.4}
.card-title{font-size:.9rem;font-weight:500;color:var(--fg);margin-bottom:6px;line-height:1.4}
.card-meta{font-size:.74rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.card-meta .age{display:flex;align-items:center;gap:4px}

/* Filter pills */
.filter-pill{padding:5px 12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;font-size:.78rem;color:var(--fg-dim);cursor:pointer;transition:all .15s}
.filter-pill:hover{border-color:var(--gold);color:var(--gold)}
.filter-pill.active{background:var(--gold);color:#0a0a0b;border-color:var(--gold)}

/* Skills */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.skill-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:20px;transition:border-color .15s}
.skill-card:hover{border-color:var(--gold)}
.skill-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.skill-icon{width:36px;height:36px;border-radius:9px;background:var(--gold-dim);color:var(--gold);display:grid;place-items:center;font-weight:700}
.skill-title{font-size:.95rem;font-weight:600}
.skill-desc{font-size:.85rem;color:var(--muted);line-height:1.55}
.skill-sub{font-size:.74rem;color:var(--muted-dim);margin-top:10px}

/* Team */
.team-list{display:flex;flex-direction:column;gap:8px}
.team-row{background:var(--bg-elev);border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.team-avatar{width:42px;height:42px;border-radius:50%;background:var(--gold);color:#0a0a0b;display:grid;place-items:center;font-weight:700}
.team-body{flex:1}
.team-name{font-weight:600;font-size:.95rem}
.team-email{color:var(--muted);font-size:.82rem;margin-top:2px}
.team-role{padding:4px 10px;background:var(--bg);border-radius:10px;font-size:.74rem;color:var(--muted);font-weight:600}

/* Settings */
.settings-row{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);gap:24px;flex-wrap:wrap}
.settings-row:last-child{border-bottom:none}
.settings-label{font-weight:600;font-size:.95rem;margin-bottom:4px}
.settings-help{color:var(--muted);font-size:.82rem;max-width:380px}
.settings-input{background:var(--bg);border:1px solid var(--line-bright);border-radius:8px;padding:9px 13px;color:var(--fg);font-size:.88rem;min-width:280px}
.danger-zone{border-color:rgba(239,68,68,.3)}
.danger-zone h3{color:#fca5a5}

/* Connections grid */
.connections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.conn-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px}
.conn-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:.95rem;font-weight:700;background:var(--bg-elev-2);color:var(--gold)}
.conn-name{font-size:.88rem;font-weight:500}
.conn-status{margin-left:auto;color:var(--green);font-size:.74rem}
.conn-status.warn{color:var(--amber)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(10,10,11,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.show{display:flex}
.modal-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;padding:28px;max-width:500px;width:100%;animation:modalIn .15s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal h3{font-size:1.2rem}

/* Mobile */
@media(max-width:768px){
  body.app{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .main{padding:20px}
  .topbar-title{font-size:1.5rem}
}