*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:    #141414;
  --grey:     #bebebe;
  --lgrey:    #F4F4F4;
  --white:    #FFFFFF;
  --border:   #e8e8e8;
  --text:     #141414;
  --muted:    #888888;
  --danger:   #d94f4f;
  --success:  #3a9e6f;
  --warn:     #c28a2a;
  --radius:   6px;
}

body { background: var(--lgrey); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; height: 100vh; overflow: hidden; }

/* ── Login ───────────────────────────────────────────────────── */
#login-screen { display:flex; align-items:center; justify-content:center; height:100vh; background: var(--lgrey); }
.login-box { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 40px; width: 360px; text-align: center; }
.login-logo { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:24px; }
.logo-mark { background: var(--black); color: var(--white); width: 32px; height: 32px; border-radius: 6px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.logo-text { font-size:18px; font-weight:700; color: var(--black); }
.login-desc { color: var(--muted); margin-bottom: 20px; }
.device-code { font-size: 32px; font-weight:700; letter-spacing: 6px; color: var(--black); padding: 16px; background: var(--lgrey); border-radius: var(--radius); margin: 16px 0; }
.login-status { color: var(--muted); font-size:13px; }

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

.sidebar { width: 220px; flex-shrink:0; background: var(--black); display:flex; flex-direction:column; padding: 16px 0; }
.sidebar-logo { display:flex; align-items:center; gap:10px; padding: 4px 16px 20px; }
.sidebar-logo .logo-mark { background: var(--white); color: var(--black); }
.sidebar-logo .logo-text { color: var(--white); }
.nav-items { flex:1; display:flex; flex-direction:column; gap:2px; padding: 0 8px; }
.nav-section-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.3); padding:16px 10px 4px; }
.nav-item { display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--radius); color: rgba(255,255,255,.5); text-decoration:none; font-weight:500; transition: background .15s, color .15s; cursor:pointer; }
.nav-item svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.nav-item.active { background: rgba(190,190,190,.15); color: var(--white); }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); margin-top:auto; }
.sidebar-user-info { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sidebar-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.sidebar-user-name { font-weight:600; font-size:13px; color: var(--white); }
.sidebar-user-email { color: rgba(255,255,255,.4); font-size:12px; margin-top:2px; }
.sidebar-logout { color: rgba(255,255,255,.35); font-size:12px; cursor:pointer; display:inline-block; transition: color .15s; }
.sidebar-logout:hover { color: #ff8080; }

.main { flex:1; display:flex; flex-direction:column; overflow:hidden; background: var(--lgrey); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 0 24px; height: 56px; background: var(--white); border-bottom: 1px solid var(--border); flex-shrink:0; }
.topbar-title { font-size:16px; font-weight:700; color: var(--black); }
.topbar-right { display:flex; gap:8px; align-items:center; }
.content { flex:1; overflow-y:auto; padding: 24px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary { background: var(--black); color: var(--white); border:none; padding: 8px 18px; border-radius: var(--radius); font-size:14px; font-weight:600; cursor:pointer; transition: opacity .15s; }
.btn-primary:hover { opacity:.8; }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; }
.btn-secondary { background:var(--white); color:var(--black); border:1px solid var(--border); padding:7px 14px; border-radius:var(--radius); font-size:13px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s, border-color .15s; white-space:nowrap; }
.btn-secondary:hover { background:var(--lgrey); border-color:#bbb; }
.btn-secondary:disabled { opacity:.4; cursor:not-allowed; }
.btn-secondary svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 7px 14px; border-radius: var(--radius); font-size:13px; cursor:pointer; transition: border-color .15s, color .15s; }
.btn-ghost:hover { border-color: var(--black); color: var(--black); }
.btn-danger { background: var(--danger); color: var(--white); border:none; padding: 6px 12px; border-radius: var(--radius); font-size:13px; cursor:pointer; opacity:.85; transition: opacity .15s; }
.btn-danger:hover { opacity:1; }

/* ── Cards / Stats ───────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin-bottom:24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-label { color: var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.stat-value { font-size:28px; font-weight:700; margin-top:6px; color: var(--black); }
.stat-value.accent { color: var(--black); }

.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.section-heading { font-size:16px; font-weight:700; color:var(--black); margin:8px 0 4px; }
.section-desc { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.section-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:4px; }
.info-box { display:flex; align-items:flex-start; gap:10px; background:#f0f7ff; border:1px solid #c7dff7; border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; font-size:12px; color:#1e4d8c; line-height:1.6; }
.info-box svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:#1e4d8c; }
.info-box-title { display:block; margin-bottom:3px; font-size:13px; }
.section-heading-row .section-desc { margin-bottom:16px; }
.mcp-status-dot { position:absolute; top:19px; right:16px; width:8px; height:8px; border-radius:50%; }
.dot-ok { background:#3a9e6f; box-shadow:0 0 0 3px rgba(58,158,111,.18); }
.dot-error { background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; padding: 10px 14px; font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.6px; border-bottom: 1px solid var(--border); background: var(--lgrey); }
td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
tr:last-child td { border-bottom:none; }
tr:hover td { background: var(--lgrey); }

/* ── Badges ──────────────────────────────────────────────────── */
.badge { display:inline-block; padding: 2px 8px; border-radius: 3px; font-size:11px; font-weight:600; }
.badge-green  { background: #e8f5ee; color: var(--success); }
.badge-indigo { background: var(--lgrey); color: var(--black); border: 1px solid var(--border); }
.badge-gray   { background: var(--lgrey); color: var(--muted); }
.badge-red    { background: #fceaea; color: var(--danger); }
.badge-tool   { background: var(--lgrey); color: var(--black); border: 1px solid var(--border); font-weight:500; }
.badge-ga4        { background: #e8f0fe; color: #1a56db; }
.badge-gads       { background: #e6f4ea; color: #137333; }
.badge-gsc        { background: #fce8e6; color: #c5221f; }
.badge-semrush    { background: #fff0e0; color: #c46f0a; }
.badge-meta       { background: #e7f0fd; color: #1877f2; }
.badge-linkedin   { background: #e8f3f9; color: #0077b5; }

/* ── Client grid ─────────────────────────────────────────────── */
.client-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.client-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor:pointer; transition: border-color .15s, box-shadow .15s; }
.client-card:hover { border-color: var(--grey); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.client-name { font-weight:700; margin-bottom:4px; color: var(--black); }
.client-site { color: var(--muted); font-size:12px; }
.client-meta { display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; }

/* ── Search ──────────────────────────────────────────────────── */
.search-bar { display:flex; gap:8px; margin-bottom:20px; }
.search-input { background: var(--white); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius); font-size:14px; flex:1; }
.search-input:focus { outline:none; border-color: var(--grey); }
.filter-select { background: var(--white); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius); font-size:14px; }

/* ── Side panel ──────────────────────────────────────────────── */
.panel-overlay { position:fixed; inset:0; background:rgba(20,20,20,.4); z-index:100; opacity:0; pointer-events:none; transition: opacity .2s; }
.panel-overlay.open { opacity:1; pointer-events:auto; }
.panel { position:fixed; right:0; top:0; bottom:0; width:580px; max-width:95vw; background: var(--white); border-left: 1px solid var(--border); z-index:101; display:flex; flex-direction:column; transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); }
.panel.open { transform: translateX(0); }
.panel-header { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink:0; background: var(--white); }
.panel-title { font-weight:700; font-size:16px; color: var(--black); }
.panel-close { background:none; border:none; color: var(--muted); cursor:pointer; padding:4px; border-radius:4px; transition: color .15s; }
.panel-close:hover { color: var(--black); background: var(--lgrey); }
.panel-close svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.panel-tabs { display:flex; border-bottom: 1px solid var(--border); padding: 0 20px; flex-shrink:0; overflow-x:auto; background: var(--white); }
.panel-tab { padding: 10px 14px; font-size:13px; font-weight:500; color: var(--muted); cursor:pointer; border-bottom: 2px solid transparent; white-space:nowrap; transition: color .15s; }
.panel-tab.active { color: var(--black); border-bottom-color: var(--black); font-weight:700; }
.panel-body { flex:1; overflow-y:auto; padding: 20px; background: var(--lgrey); }

/* ── Panel content ───────────────────────────────────────────── */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-field { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.info-field label { display:block; font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
.info-field input, .info-field textarea { background:none; border:none; color: var(--text); font-size:14px; width:100%; resize:none; outline:none; }
.info-actions { margin-top:14px; display:flex; gap:8px; }

/* ── Kanban board ────────────────────────────────────────────── */
.kanban { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; }
.kanban-col { min-width:220px; max-width:220px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); display:flex; flex-direction:column; }
.kanban-col-header { padding: 10px 12px; font-size:11px; font-weight:700; color: var(--black); text-transform:uppercase; letter-spacing:.6px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.kanban-col-header .count { background: var(--lgrey); color: var(--muted); border-radius:99px; padding: 0 6px; font-size:11px; }
.kanban-cards { padding: 8px; display:flex; flex-direction:column; gap:6px; flex:1; }
.kanban-card { background: var(--white); border: 1px solid var(--border); border-radius: 5px; padding: 10px; cursor:pointer; transition: border-color .15s; }
.kanban-card:hover { border-color: var(--grey); }
.kanban-card-name { font-size:13px; font-weight:500; margin-bottom:4px; color: var(--black); }
.kanban-card-meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.kanban-card-owner { font-size:11px; color: var(--muted); }
.kanban-card-due { font-size:11px; color: var(--warn); }

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:12px; color: var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.form-input { width:100%; background: var(--white); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius); font-size:14px; }
.form-input:focus { outline:none; border-color: var(--grey); }

/* ── Activity feed ───────────────────────────────────────────── */
.activity-feed { display:flex; flex-direction:column; gap:2px; }
.activity-item { display:flex; gap:12px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items:flex-start; }
.activity-item:last-child { border-bottom:none; }
.activity-tool { font-weight:700; font-size:13px; color: var(--black); min-width:200px; }
.activity-user { color: var(--muted); font-size:12px; }
.activity-ts { color: var(--muted); font-size:11px; white-space:nowrap; margin-left:auto; }

/* ── Log lines ───────────────────────────────────────────────── */
.log-line { font-family: 'SF Mono', 'Fira Code', monospace; font-size:12px; color: var(--muted); padding: 3px 0; border-bottom: 1px solid var(--border); white-space:pre-wrap; word-break:break-all; }
.log-line.error { color: var(--danger); }

/* ── Toast ───────────────────────────────────────────────────── */
#toast { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast-msg { background: var(--black); color: var(--white); border-radius: var(--radius); padding: 10px 16px; font-size:13px; animation: slideIn .2s ease; }
.toast-msg.success { background: var(--black); border-left: 3px solid var(--success); }
.toast-msg.error   { background: var(--black); border-left: 3px solid var(--danger); }
@keyframes slideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(20,20,20,.5); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s; }
.modal-overlay.open { opacity:1; pointer-events:auto; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.97); width:520px; max-width:95vw; max-height:90vh; background:var(--white); border:1px solid var(--border); border-radius:10px; z-index:201; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.modal.open { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-title { font-weight:700; font-size:16px; color: var(--black); }
.modal-stepper { display:flex; align-items:center; padding:16px 24px; border-bottom:1px solid var(--border); flex-shrink:0; background: var(--lgrey); }
.mstep { display:flex; align-items:center; flex:1; }
.mstep:not(:last-child)::after { content:''; flex:1; height:1px; background:var(--border); margin:0 8px; transition:background .3s; }
.mstep.done:not(:last-child)::after { background:var(--black); }
.mstep-inner { display:flex; align-items:center; gap:8px; }
.mstep-circle { width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--white); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--muted); flex-shrink:0; transition:all .2s; }
.mstep.active .mstep-circle { border-color:var(--black); background:var(--black); color:var(--white); }
.mstep.done .mstep-circle { border-color:var(--black); background:var(--black); color:var(--white); }
.mstep-label { font-size:12px; color:var(--muted); white-space:nowrap; }
.mstep.active .mstep-label { color:var(--black); font-weight:700; }
.modal-body { flex:1; overflow-y:auto; padding:24px; }
.modal-actions { display:flex; gap:8px; margin-top:20px; }

/* ── Modal form ──────────────────────────────────────────────── */
.mform-group { margin-bottom:14px; }
.mform-label { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.mform-label .opt { font-weight:400; font-size:11px; }
.mform-input { width:100%; background:var(--lgrey); border:1px solid var(--border); color:var(--text); padding:8px 11px; border-radius:var(--radius); font-size:14px; transition:border-color .15s; }
.mform-input:focus { outline:none; border-color:var(--grey); background:var(--white); }
.mform-hint { font-size:11px; color:var(--muted); margin-top:3px; }
.mform-error { background:#fceaea; border:1px solid #f5c0c0; color:var(--danger); padding:8px 12px; border-radius:var(--radius); font-size:13px; margin-top:10px; }

/* ── Modal summary ───────────────────────────────────────────── */
.msum-group { margin-bottom:16px; }
.msum-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:8px; }
.msum-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:13px; }
.msum-row:last-child { border-bottom:none; }
.msum-key { color:var(--muted); }
.msum-val { font-weight:600; color:var(--black); }

/* ── GA4 Events ──────────────────────────────────────────────── */
.ga4-event-row { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:6px; }
.ga4-event-info { display:flex; flex-direction:column; gap:2px; }
.ga4-event-name { font-family:monospace; font-size:12px; color:var(--muted); }
.ga4-event-label { font-size:13px; font-weight:600; color:var(--text); }
.btn-sm { padding:4px 10px; font-size:12px; }

/* ── Misc ────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding: 48px 24px; color: var(--muted); }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title { font-size:15px; font-weight:700; color: var(--black); }
.loading { color: var(--muted); font-size:13px; }

/* ── MCP ─────────────────────────────────────────────────────── */
.mcp-connection { display:flex; align-items:center; justify-content:space-between; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:14px 20px; margin-bottom:20px; }
.mcp-conn-left { display:flex; align-items:center; gap:10px; }
.status-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.status-online { background:#3a9e6f; box-shadow: 0 0 0 3px rgba(58,158,111,.15); }
.mcp-conn-name { font-weight:700; font-size:14px; }
.mcp-conn-meta { color:var(--muted); font-size:12px; }
.mcp-conn-right { display:flex; align-items:center; gap:16px; }
.mcp-conn-url { font-family: monospace; font-size:12px; background:var(--lgrey); padding:3px 8px; border-radius:4px; color:var(--muted); }
.mcp-stat { font-size:12px; color:var(--muted); }
.mcp-tool-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.mcp-tcard { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; }
.mcp-tcard-top { display:flex; flex-direction:column; gap:4px; }
.mcp-tcard-title { font-weight:700; font-size:14px; color:var(--black); display:flex; align-items:center; gap:8px; }
.mcp-tcard-title svg { width:16px; height:16px; stroke:var(--black); fill:none; stroke-width:2; flex-shrink:0; }
.mcp-tcard-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.mcp-tcard-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mcp-access-badge { font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.mcp-access-badge.available { background:#dcfce7; color:#16a34a; }
.mcp-access-badge.unavailable { background:#fee2e2; color:#dc2626; }
.mcp-tcard-meta { display:flex; align-items:center; gap:8px; }
.mcp-for-ai-badge { font-size:10px; font-weight:600; background:#e8f0fe; color:#1a56db; padding:2px 6px; border-radius:4px; white-space:nowrap; }
.mcp-for-ai-name { font-size:12px; font-family:monospace; color:#1a56db; flex:1; }
.mcp-copy-btn { background:none; border:none; cursor:pointer; padding:3px; color:var(--muted); display:flex; align-items:center; border-radius:4px; }
.mcp-copy-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.mcp-copy-btn:hover { background:var(--lgrey); color:var(--black); }
.mcp-copy-btn.copied { color:var(--success); }
.mcp-tcard-url { font-size:11px; font-family:monospace; color:var(--muted); background:var(--lgrey); padding:5px 8px; border-radius:4px; word-break:break-all; }
.mcp-tcard-footer { border-top:1px solid var(--border); padding-top:10px; }
.mcp-expand-btn { background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:6px; padding:0; color:var(--muted); font-size:12px; }
.mcp-expand-btn:hover { color:var(--black); }
.mcp-chevron { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; flex-shrink:0; }
.mcp-badge { background:var(--lgrey); color:var(--muted); font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; }
.mcp-tcard-tools { list-style:none; display:none; flex-direction:column; gap:6px; padding-top:8px; }
.mcp-tcard-tools.open { display:flex; }
.mcp-ttool { display:flex; flex-direction:column; gap:2px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.mcp-ttool:last-child { border-bottom:none; padding-bottom:0; }
.mcp-ttool-name { font-size:12px; font-family:monospace; color:#1a56db; font-weight:500; }
.mcp-ttool-desc { font-size:11px; color:var(--muted); line-height:1.4; }