/* Post-Show Connect — shared chrome for all mockup pages */

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  margin: 0;
}

.chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:999px; font-weight:500; }
.pill-slate  { background:#f1f5f9; color:#475569; }
.pill-amber  { background:#fffbeb; color:#b45309; }
.pill-red    { background:#fef2f2; color:#b91c1c; }
.pill-green  { background:#ecfdf5; color:#047857; }
.pill-indigo { background:#eef2ff; color:#4338ca; }
.pill-blue   { background:#eff6ff; color:#1d4ed8; }

/* App shell */
.app { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }

/* Sidebar */
.sidebar { background:#0f172a; color:#cbd5e1; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:8px; font-size:13.5px; color:#cbd5e1; transition:all .15s; text-decoration:none; }
.sidebar a:hover { background:rgba(255,255,255,0.05); color:white; }
.sidebar a.active { background:rgba(99,102,241,0.2); color:white; }
.sidebar a svg { width:16px; height:16px; }

/* Topbar */
.topbar { height:52px; background:white; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; padding:0 20px; gap:16px; position:sticky; top:0; z-index:10; }
.search-box { flex:1; max-width:480px; position:relative; }
.search-box input { width:100%; padding:7px 12px 7px 34px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; background:#f8fafc; }
.search-box input:focus { outline:none; border-color:#818cf8; background:white; }
.search-box svg { position:absolute; left:11px; top:8px; width:15px; height:15px; color:#94a3b8; }
.search-box kbd { position:absolute; right:10px; top:6px; font-size:10.5px; padding:2px 5px; background:#e2e8f0; border-radius:4px; color:#64748b; font-family:inherit; }

.icon-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:#64748b; position:relative; cursor:pointer; border:none; background:transparent; }
.icon-btn:hover { background:#f1f5f9; color:#0f172a; }
.icon-btn .badge { position:absolute; top:4px; right:4px; width:8px; height:8px; background:#ef4444; border-radius:999px; border:2px solid white; }

.user-chip { display:flex; align-items:center; gap:8px; padding:4px 8px 4px 4px; border-radius:999px; cursor:pointer; background:transparent; border:none; }
.user-chip:hover { background:#f1f5f9; }

/* Panels */
.panel { background:white; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.panel-head { padding:12px 18px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; }
.panel-head h2 { font-size:13.5px; font-weight:600; color:#0f172a; margin:0; }
.panel-head .sub { font-size:11.5px; color:#64748b; margin-top:1px; }

/* 3-state segmented control */
.seg { display:inline-flex; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:7px; padding:2px; font-size:11px; }
.seg button { padding:3px 9px; border-radius:5px; font-weight:500; color:#64748b; transition:all .15s; border:none; background:transparent; cursor:pointer; }
.seg button.on { background:white; color:#4338ca; box-shadow:0 1px 2px rgba(15,23,42,0.08); }
.seg button.muted { background:white; color:#b91c1c; box-shadow:0 1px 2px rgba(15,23,42,0.08); }
.seg button:hover:not(.on):not(.muted) { color:#334155; }

/* Page header */
.page-head { padding:20px 28px 8px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.breadcrumb { font-size:12px; color:#64748b; display:flex; align-items:center; gap:6px; }
.breadcrumb a { color:#64748b; text-decoration:none; }
.breadcrumb a:hover { color:#0f172a; }
.page-title { font-size:20px; font-weight:700; color:#0f172a; margin:4px 0 0; }
.page-subtitle { font-size:13px; color:#64748b; margin-top:2px; }

.btn-primary { background:#4f46e5; color:white; padding:7px 14px; border-radius:7px; font-size:13px; font-weight:500; border:none; cursor:pointer; }
.btn-primary:hover { background:#4338ca; }
.btn-secondary { background:white; color:#334155; padding:7px 14px; border-radius:7px; font-size:13px; font-weight:500; border:1px solid #e2e8f0; cursor:pointer; }
.btn-secondary:hover { background:#f8fafc; }

/* Filter pills row */
.filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-pill { padding:5px 10px; border-radius:999px; font-size:12px; font-weight:500; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; cursor:pointer; }
.filter-pill.on { background:#0f172a; color:white; border-color:#0f172a; }
.filter-pill:hover:not(.on) { background:#e2e8f0; }

/* Footer */
.app-footer { padding:12px 28px; font-size:11.5px; color:#64748b; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e2e8f0; background:white; }
.app-footer a { color:#64748b; text-decoration:none; }
.app-footer a:hover { color:#0f172a; }