/* VibeTrack enterprise light interface */
:root {
  --paper: #f6f7fa;
  --white: #ffffff;
  --ink: #111827;
  --muted: #667085;
  --line: #e5e8ef;
  --line-strong: #d6dae4;
  --blue: #3659e3;
  --blue-soft: #eef2ff;
  --coral: #e85d4a;
  --nav: #fbfcfe;
  --shadow: 0 1px 2px rgba(16,24,40,.03), 0 8px 24px rgba(16,24,40,.045);
  --shadow-raised: 0 2px 4px rgba(16,24,40,.04), 0 18px 45px rgba(16,24,40,.08);
  --radius: 14px;
}

html, body { background: var(--paper); }
body { font-size: 14px; letter-spacing: -.006em; }
.app-shell { grid-template-columns: 264px minmax(0,1fr); }
.app-shell>main { padding: 0 clamp(24px,3.3vw,52px) 72px; max-width: 1700px; }

.sidebar {
  padding: 22px 18px 20px;
  border-right: 1px solid var(--line);
  background: rgba(251,252,254,.96);
  backdrop-filter: blur(18px);
}
.brand { padding: 0 8px; font-size: 18px; letter-spacing: -.045em; }
.brand:after { content: "INTELLIGENCE"; margin-left: auto; color: #98a2b3; font-size: 8px; letter-spacing: .14em; font-weight: 800; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 6px 16px rgba(54,89,227,.2); }
.site-chip {
  margin: 27px 0 20px; padding: 14px 14px 13px;
  border-color: var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.site-chip:before { content: "●"; position: absolute; color: #22b573; font-size: 10px; margin: 19px 0 0 205px; }
.site-chip span { color: #98a2b3; font-size: 9px; letter-spacing: .13em; }
.site-chip strong { font-size: 13px; padding-right: 18px; }
.sidebar nav { gap: 2px; overflow-y: auto; scrollbar-width: none; }
.nav-label { margin: 18px 11px 7px; color: #a0a7b4; font-size: 9px; letter-spacing: .15em; font-weight: 850; }
.nav-link {
  position: relative; min-height: 38px; padding: 9px 11px; border-radius: 8px;
  color: #667085; font-size: 12.5px; font-weight: 680; transition: background .15s,color .15s,transform .15s;
}
.nav-link>span { width: 19px; color: #8992a3; font-size: 13px; }
.nav-link:hover { color: #202939; background: #f0f2f7; transform: translateX(1px); }
.nav-link.active { color: #2847be; background: #eef2ff; box-shadow: inset 0 0 0 1px #e1e7ff; }
.nav-link.active:before { content: ""; position: absolute; left: -18px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 4px 4px 0; background: var(--blue); }
.sidebar-foot { border-color: var(--line); font-size: 11px; }

.workspace-topbar {
  height: 68px; margin: 0 calc(clamp(24px,3.3vw,52px) * -1) 36px;
  padding: 0 clamp(24px,3.3vw,52px); display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: sticky; top: 0; z-index: 4; background: rgba(246,247,250,.92); border-bottom: 1px solid rgba(218,222,231,.85); backdrop-filter: blur(18px);
}
.workspace-context { display: flex; align-items: center; min-width: 0; gap: 9px; font-size: 12px; color: #98a2b3; }
.workspace-context a:hover { color: var(--blue); }
.workspace-context strong { color: #344054; }
.workspace-context em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; padding: 3px 7px; border-radius: 5px; background: #eceff4; color: #667085; font-size: 10px; }
.workspace-actions { display: flex; align-items: center; gap: 11px; }
.pipeline-state { color: #475467; font-size: 11px; font-weight: 700; }
.pipeline-state i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 3px rgba(34,181,115,.12); }
.command-button { height: 34px; min-width: 205px; padding: 0 8px 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: #8a93a3; font-size: 11px; text-align: left; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.command-button kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #e0e3ea; border-radius: 4px; background: #f8f9fb; color: #98a2b3; font: 9px ui-monospace,monospace; }
.user-avatar { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #d9deea; border-radius: 50%; background: linear-gradient(145deg,#f1f4ff,#fff); color: #3659e3; font-size: 11px; font-weight: 850; }
.command-layer { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 14vh 18px 20px; background: rgba(17,24,39,.24); backdrop-filter: blur(7px); }
.command-layer.open { display:flex; }
.command-palette { width: min(590px,100%); overflow:hidden; border:1px solid rgba(255,255,255,.75); border-radius:16px; background:#fff; box-shadow:0 30px 90px rgba(17,24,39,.24); }
.command-search { height:60px; padding:0 17px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); color:#8490a3; }
.command-search input { flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; }
.command-search kbd { padding:3px 6px; border:1px solid var(--line); border-radius:5px; background:#f7f8fa; color:#98a2b3; font:9px ui-monospace,monospace; }
.command-results { max-height:390px; padding:8px; overflow:auto; }
.command-results a { padding:11px 12px; display:flex; justify-content:space-between; align-items:center; border-radius:8px; color:#344054; font-size:12px; font-weight:700; }
.command-results a em { color:#98a2b3; font-size:9px; font-style:normal; font-weight:600; }
.command-results a:hover,.command-results a.selected { background:#eef2ff; color:#2847be; }
.command-results p { padding:24px; text-align:center; color:var(--muted); }
.command-palette footer { padding:10px 18px; display:flex; gap:18px; border-top:1px solid var(--line); background:#fafbfc; color:#98a2b3; font-size:9px; }

.page-head { margin: 0 0 26px; align-items: center; }
.page-head h1 { margin: 5px 0 6px; font-size: clamp(30px,3vw,43px); letter-spacing: -.055em; color: #121926; }
.page-head p { max-width: 720px; color: #667085; font-size: 13px; }
.overview-bridge { display:none; }
.decision-brief { margin-bottom:18px; padding:22px; border:1px solid #dce2ef; border-radius:16px; background:linear-gradient(145deg,#fff,#f8f9fd); box-shadow:var(--shadow-raised); }
.decision-heading { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.decision-heading span { color:#3659e3; font-size:8.5px; letter-spacing:.16em; font-weight:900; }
.decision-heading h2 { margin:4px 0 0; font-size:21px; letter-spacing:-.04em; }
.decision-heading>p { max-width:480px; margin:0; color:#667085; font-size:11px; text-align:right; }
.decision-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.decision-card { position:relative; min-height:185px; padding:17px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden; }
.decision-card:before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:#f1b43c; }
.decision-card.good:before { background:#24b47e; }.decision-card.risk:before { background:#e85d4a; }
.decision-card>span { color:#8b95a6; font-size:8px; letter-spacing:.13em; text-transform:uppercase; font-weight:900; }
.decision-card h3 { margin:13px 0 7px; color:#182230; font-size:15px; line-height:1.22; letter-spacing:-.025em; }
.decision-card p { margin:0 0 15px; color:#667085; font-size:10.5px; line-height:1.55; }
.decision-card a { margin-top:auto; color:#3659e3; font-size:10px; font-weight:800; }
.intelligence-workspace { margin:18px 0; }
.intelligence-title { margin:0 2px 13px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.intelligence-title span { color:#3659e3; font-size:8.5px; letter-spacing:.15em; font-weight:900; }
.intelligence-title h2 { margin:4px 0 0; font-size:20px; letter-spacing:-.04em; }
.intelligence-title p { max-width:470px; margin:0; color:#667085; font-size:10.5px; text-align:right; }
.intelligence-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.intelligence-chart,.page-intelligence { padding:20px; min-width:0; }
.intelligence-chart canvas { display:block; width:100%; height:245px; }
.activity-panel { grid-column:1/-1; }
.activity-panel canvas { height:220px; }
.page-intelligence { grid-column:1/-1; }
.page-intelligence .panel-head>a { color:#3659e3; font-size:10px; font-weight:800; }
.page-intelligence td:first-child { max-width:330px; }
.page-intelligence td:first-child strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.value-score { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#eef2ff; color:#3659e3; font-size:10px; font-weight:900; }
.intel-tag { display:inline-block; margin-left:7px; padding:3px 6px; border-radius:5px; background:#f1f3f7; color:#667085; font-size:8px; font-weight:850; white-space:nowrap; }
.intel-tag.good { background:#e7f7ef; color:#16835a; }.intel-tag.risk { background:#fff0ed; color:#bd4739; }
.eyebrow { color: #4b68d8; font-size: 9px; letter-spacing: .16em; }
.button { min-height: 38px; padding: 8px 13px; border-radius: 8px; font-size: 11.5px; }
.button.primary { background: #3659e3; box-shadow: 0 3px 8px rgba(54,89,227,.2); }
.button.primary:hover { background: #294bcf; }
.button.secondary,.button.ghost { border-color: var(--line-strong); }
.period-picker { padding: 3px; border-color: var(--line-strong); border-radius: 9px; box-shadow: none; }
.period-picker a { min-width: 39px; text-align: center; padding: 6px 9px; border-radius: 6px; font-size: 10px; }

.panel, .metric-card, .site-card { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head { margin-bottom: 17px; }
.panel-head h2,.panel h2 { color: #182230; font-size: 15px; letter-spacing: -.025em; }
.panel-head p,.panel p { font-size: 11.5px; }

.metrics-grid { gap: 12px; margin-bottom: 16px; }
.metric-card { position: relative; min-height: 142px; padding: 19px 20px; overflow: hidden; }
.metric-card:after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 100px; height: 100px; border: 18px solid rgba(54,89,227,.035); border-radius: 50%; }
.metric-card.accent { background: linear-gradient(145deg,#3659e3,#4f46d9); border-color: transparent; box-shadow: 0 12px 28px rgba(54,89,227,.18); }
.metric-card span { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.metric-card strong { margin: 21px 0 8px; font-size: 36px; }
.metric-card small { font-size: 10.5px; }
.delta { border-radius: 5px; }

.insights-strip { display:none; margin: 16px 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.insight-title { background: #fafbfc; }
.insight-title span { color: #e05a48; font-size: 9px; }
.insight-title strong { font-size: 15px; }
.insights-strip article small { font-size: 8px; }
.insights-strip article strong { font-size: 12px; }

.chart-panel { padding: 23px; margin-bottom: 16px; }
.chart-wrap { height: 300px; }
.breakdown-grid { gap: 16px; }
.breakdown-grid>.panel { padding: 22px; }
.rank-label { border-radius: 4px; }
.rank-label i { background: rgba(54,89,227,.075); }

table { font-size: 12px; }
th { padding: 10px 11px; color: #8992a3; font-size: 8.5px; letter-spacing: .11em; background: #fafbfc; border-bottom-color: #e7eaf0; }
td { padding: 12px 11px; border-bottom-color: #edf0f4; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #fafbff; }
td small { margin-top: 2px; font-size: 9.5px; }

.explorer-stats { gap: 12px; }
.explorer-stats article,.retention-summary article { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.filter-panel,.event-stream,.save-segment,.create-funnel { border-color: var(--line); }
.filter-bar input,.filter-bar select,.inline-form input,.inline-form select,.funnel-form input,.funnel-form select,.annotation-form input { border-color: var(--line-strong); border-radius: 8px; }
.event-kind,.bot-status { border-radius: 5px; letter-spacing: .08em; }

.journey-hero { background: linear-gradient(125deg,#2f55dc,#5c4ad5); box-shadow: 0 14px 32px rgba(54,89,227,.18); }
.journey-hero>div,.journey-hero>article { min-height: 132px; }
.journey-filter { border-color: var(--line); box-shadow: var(--shadow); }
.journey-grid,.bot-charts { gap: 16px; }
.journey-grid>.panel,.journey-source,.journey-flow,.bot-chart { border-color: var(--line); box-shadow: var(--shadow); }
.flow-arrow { background: #eef2ff; color: #3659e3; }

.bot-verification { border-color: #dfe5f7; background: linear-gradient(110deg,#f4f6ff,#fbfcff); box-shadow: none; }
.bot-chart canvas { height: 268px; }
.bot-trend-card canvas { height: 300px; }
.bot-pages-panel { grid-column: 1/-1; }
.verification-pills b { background: #fff; border-color: #dbe2f3; color: #3d5bc4; }

.health-hero,.report-intro { border-radius: var(--radius); }
.health-grid,.settings-grid,.split-panels { gap: 16px; }
.funnel-card,.retention-panel { box-shadow: var(--shadow); }
.enterprise-note { background: linear-gradient(140deg,#f5f7ff,#fff); }

.flash { margin-top: -20px; border-radius: 8px; }
.empty-state { border-color: #d9deea; background: linear-gradient(160deg,#fff,#fafbff); }

@media(max-width:1120px) {
  .app-shell { grid-template-columns: 226px minmax(0,1fr); }
  .sidebar { padding-left: 14px; padding-right: 14px; }
  .site-chip:before { display:none; }
  .command-button { min-width: 150px; }
  .decision-grid { grid-template-columns:1fr 1fr; }
  .intelligence-grid { grid-template-columns:1fr; }
  .activity-panel,.page-intelligence { grid-column:auto; }
}

@media(max-width:780px) {
  .app-shell { display:block; }
  .app-shell>main { padding: 0 15px 55px; }
  .sidebar { padding: 11px 15px; background: rgba(251,252,254,.98); }
  .sidebar .brand:after { display:none; }
  .sidebar nav { margin-top: 9px; }
  .nav-label { display:none; }
  .nav-link.active:before { display:none; }
  .workspace-topbar { height: 54px; margin: 0 -15px 24px; padding: 0 15px; }
  .workspace-context em,.pipeline-state,.command-button { display:none; }
  .page-head { align-items:flex-start; }
  .page-head h1 { font-size: 32px; }
  .chart-wrap { height: 240px; }
  .decision-heading { align-items:flex-start; flex-direction:column; }
  .decision-heading>p { text-align:left; }
  .intelligence-title { align-items:flex-start; flex-direction:column; }
  .intelligence-title p { text-align:left; }
  .journey-hero>div,.journey-hero>article { min-height: 105px; }
}

@media(max-width:500px) {
  .metrics-grid { gap: 9px; }
  .metric-card { min-height: 126px; }
  .workspace-actions { margin-left:auto; }
  .page-head { gap: 15px; }
  .decision-grid { grid-template-columns:1fr; }
  .decision-card { min-height:150px; }
  .intelligence-chart,.page-intelligence { padding:15px; }
  .intelligence-chart canvas { height:220px; }
  .activity-panel canvas { height:190px; }
}