:root {
  --bg: #101112;
  --sidebar: #171819;
  --surface: #1b1d1f;
  --surface-2: #222426;
  --surface-3: #292c2f;
  --line: #303336;
  --line-soft: #26282a;
  --text: #f4f4f5;
  --muted: #a5a7ab;
  --dim: #74777c;
  --accent: #10a37f;
  --accent-2: #19c49a;
  --ce: #35d399;
  --ce-soft: rgba(53, 211, 153, .12);
  --pe: #fb7185;
  --pe-soft: rgba(251, 113, 133, .12);
  --warning: #fbbf24;
  --radius: 16px;
  --sidebar-width: 270px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; line-height: 1.55; }
.eyebrow { margin: 0 0 7px; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.product-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-right: 1px solid #202224;
  background: var(--sidebar);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; font-size: 15px; font-weight: 700; }
.brand-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: white;
  background: linear-gradient(145deg, var(--accent-2), #087961);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(16,163,127,.18);
  font-weight: 800;
}
.brand-icon.small { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
.new-chat {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.new-chat:hover { background: var(--surface-2); }
.new-chat span { font-size: 19px; font-weight: 300; }
.link-button { text-decoration: none; }
.primary-nav { display: grid; gap: 3px; margin-top: 18px; }
.primary-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px; color: #c9cbce; font-size: 13px; }
.primary-nav a:hover, .primary-nav a.active { color: white; background: var(--surface-3); }
.primary-nav a span { width: 18px; color: var(--muted); font-size: 17px; text-align: center; }
.sidebar-section { margin-top: 28px; min-height: 0; overflow: auto; }
.sidebar-section > p { margin: 0 10px 9px; color: #74777b; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.sidebar-section > button {
  width: 100%;
  display: block;
  padding: 9px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: #afb1b5;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-section > button:hover { color: white; background: var(--surface-2); }
.sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.account-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px; border: 0; border-radius: 10px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
.account-row:hover { background: var(--surface-2); }
.account-row .avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #7c3aed; font-size: 12px; font-weight: 700; }
.account-row > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.account-row b { font-size: 12px; }
.account-row small { color: var(--muted); font-size: 11px; }
.account-row em { color: var(--dim); font-style: normal; font-size: 11px; letter-spacing: 1px; }
.text-button { margin: 5px 8px 0; padding: 5px; border: 0; color: var(--muted); background: none; cursor: pointer; font-size: 11px; }

/* Conversation */
.copilot-main { min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }
.copilot-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 24px;
  border-bottom: 1px solid rgba(48,51,54,.65);
  background: rgba(16,17,18,.9);
  backdrop-filter: blur(14px);
}
.mobile-brand { display: none; }
.market-pulse { display: flex; align-items: center; gap: 10px; min-width: 430px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 12px; background: #17191a; font-size: 12px; }
.market-pulse:hover { border-color: #464a4e; }
.market-pulse b { font-size: 12px; letter-spacing: .02em; }
.market-pulse > span:nth-of-type(2) { color: #c8cacc; }
.freshness { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.freshness.stale { color: var(--warning); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(165,167,171,.08); }
.pulse-dot.ce { background: var(--ce); box-shadow: 0 0 0 4px var(--ce-soft); }
.pulse-dot.pe { background: var(--pe); box-shadow: 0 0 0 4px var(--pe-soft); }
.pulse-dot.degraded { background: var(--warning); }
.dashboard-link { position: absolute; right: 25px; color: var(--muted); font-size: 12px; }
.dashboard-link:hover { color: white; }
.conversation { width: min(820px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 230px; }
.empty-state { min-height: calc(100vh - 330px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.assistant-orb { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: linear-gradient(145deg, #1bb890, #087b62); box-shadow: 0 16px 50px rgba(16,163,127,.17); font-weight: 800; }
.empty-state h1 { max-width: 660px; margin: 22px 0 8px; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.035em; }
.empty-state > p { margin: 0; color: var(--muted); font-size: 14px; }
.prompt-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; }
.prompt-grid button { min-height: 88px; display: grid; align-content: center; gap: 7px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: #17191a; cursor: pointer; text-align: left; }
.prompt-grid button:hover { border-color: #4b4f53; background: #1c1e20; transform: translateY(-1px); }
.prompt-grid b { font-size: 13px; }
.prompt-grid span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.message-row { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 16px; padding: 24px 4px; border-bottom: 1px solid var(--line-soft); }
.message-row.user { padding-top: 34px; }
.message-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #303337; color: white; font-size: 11px; font-weight: 700; }
.message-row.assistant .message-avatar { background: var(--accent); }
.message-body { min-width: 0; padding-top: 3px; }
.message-body strong { display: block; margin-bottom: 9px; font-size: 13px; }
.message-body p { margin: 0; color: #e4e5e7; font-size: 14px; line-height: 1.72; white-space: pre-wrap; }
.message-row.pending .message-body p { color: var(--muted); animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .48; } }
.composer-zone { position: fixed; z-index: 4; right: 0; bottom: 0; left: var(--sidebar-width); padding: 24px 20px 15px; background: linear-gradient(0deg, var(--bg) 70%, transparent); }
.composer { width: min(820px, 100%); min-height: 58px; display: flex; align-items: flex-end; gap: 10px; margin: 0 auto; padding: 10px 10px 10px 17px; border: 1px solid #404347; border-radius: 17px; background: #202224; box-shadow: 0 14px 45px rgba(0,0,0,.28); }
.composer:focus-within { border-color: #5a5f64; }
.composer textarea { width: 100%; max-height: 160px; padding: 8px 0; resize: none; overflow-y: auto; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 14px; line-height: 1.45; }
.composer textarea::placeholder { color: #85888d; }
.composer button { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 10px; color: #081c17; background: var(--accent-2); cursor: pointer; font-size: 21px; font-weight: 700; }
.composer button:hover { filter: brightness(1.08); }
.composer button:disabled { opacity: .4; cursor: wait; }
.composer-meta { width: min(820px,100%); display: flex; justify-content: space-between; margin: 7px auto 0; color: #777a7f; font-size: 10px; letter-spacing: .025em; }
.composer-zone > p { margin: 7px 0 0; color: #686b6f; font-size: 10px; text-align: center; }

/* Dashboard */
.dashboard-main { min-height: 100vh; margin-left: var(--sidebar-width); padding: 35px 40px 60px; background: #111213; }
.dashboard-header { max-width: 1400px; display: flex; justify-content: space-between; gap: 24px; margin: 0 auto 28px; }
.dashboard-header h1 { margin: 0; font-size: 27px; letter-spacing: -.025em; }
.dashboard-header > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.freshness.boxed { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; }
.button.primary { border-color: var(--accent); color: white; background: var(--accent); }
.button.primary:hover { background: #0d8d6e; }
.button.wide { width: 100%; }
.signal-hero { position: relative; max-width: 1400px; display: grid; grid-template-columns: 1fr auto; gap: 18px 35px; margin: 0 auto 16px; padding: 26px 29px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 80% -20%, rgba(148,163,184,.1), transparent 38%), var(--surface); }
.signal-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #6b7280; }
.signal-hero.ce::before { background: var(--ce); }
.signal-hero.pe::before { background: var(--pe); }
.signal-hero.degraded::before { background: var(--warning); }
.signal-copy h2 { margin: 0; font-size: clamp(19px,2.3vw,27px); letter-spacing: -.025em; line-height: 1.25; }
.signal-copy > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.score-block { min-width: 120px; display: grid; grid-template-columns: auto auto; align-content: center; justify-content: end; gap: 0 10px; text-align: right; }
.score-block span { align-self: center; padding: 4px 7px; border-radius: 6px; background: var(--surface-3); font-size: 11px; font-weight: 800; }
.score-block strong { font-size: 31px; letter-spacing: -.04em; }
.score-block small { grid-column: 1 / -1; color: var(--dim); font-size: 10px; }
.lean-meter { grid-column: 1 / -1; display: grid; grid-template-columns: 25px 1fr 25px; align-items: center; gap: 10px; color: var(--dim); font-size: 10px; font-weight: 800; }
.lean-meter > span:last-child { text-align: right; }
.lean-meter > div { position: relative; height: 5px; border-radius: 99px; background: linear-gradient(90deg,var(--pe),#3d4044 48%,#3d4044 52%,var(--ce)); }
.lean-meter i { position: absolute; top: -5px; width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: #202224; box-shadow: 0 2px 6px #000; }
.market-grid { max-width: 1400px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: auto; }
.data-card { min-width: 0; padding: 21px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.09); }
.data-card > header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.data-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.tag { max-width: 210px; padding: 5px 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; color: #b8bbc0; background: var(--surface-2); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.three-stats { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line-soft); border-radius: 11px; background: #17191a; }
.three-stats > div { display: grid; gap: 5px; padding: 15px; border-right: 1px solid var(--line-soft); }
.three-stats > div:last-child { border-right: 0; }
.three-stats span { color: var(--dim); font-size: 10px; text-transform: uppercase; }
.three-stats b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.three-stats.compact { margin-top: 21px; }
.callout { margin: 14px 0 0; padding: 11px 13px; border-left: 2px solid var(--warning); border-radius: 0 8px 8px 0; color: #c8cacc; background: rgba(251,191,36,.06); font-size: 12px; line-height: 1.5; }
.detail-list, .metric-table { display: grid; gap: 0; margin: 0; }
.detail-list > div, .metric-table > div { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.detail-list > div:last-child, .metric-table > div:last-child { border-bottom: 0; }
dt { color: var(--muted); font-size: 11px; }
dd { margin: 0; color: #e9eaeb; font-size: 12px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.levels-card, .evidence-card { grid-column: 1 / -1; }
.level-line { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; }
.level-line i { height: 1px; flex: 1; background: var(--line); }
.level-line strong { padding: 8px 12px; border: 1px solid #4b4f53; border-radius: 8px; color: white; background: var(--surface-3); font-size: 13px; }
.evidence-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; list-style: none; }
.evidence-list li { min-width: 0; display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #181a1b; }
.evidence-list li > b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); background: var(--surface-3); font-size: 9px; }
.evidence-list li.ce > b { color: var(--ce); background: var(--ce-soft); }
.evidence-list li.pe > b { color: var(--pe); background: var(--pe-soft); }
.evidence-list li > div { min-width: 0; display: grid; gap: 4px; }
.evidence-list strong { font-size: 11px; }
.evidence-list span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.data-source > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.data-source span { display: grid; gap: 3px; }
.data-source b { font-size: 11px; }
.data-source small { color: var(--muted); font-size: 10px; }
.source-light { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(25,196,154,.09); }

/* Login and plan overlay */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 50% 0, rgba(16,163,127,.12), transparent 32%), #101112; }
.login-card { width: min(410px,100%); display: grid; gap: 15px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.login-card .brand-icon { margin-bottom: 5px; }
.login-card h1 { margin: 0; font-size: 27px; }
.login-card p { margin: 0; line-height: 1.5; }
.login-card label { display: grid; gap: 7px; color: #c9cbce; font-size: 11px; }
.login-card input { height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: white; background: #151617; }
.login-card input:focus { border-color: var(--accent); }
.error { min-height: 17px; color: var(--pe); font-size: 11px; }
.drawer { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(440px,100%); padding: 25px; overflow: auto; border-left: 1px solid var(--line); background: #171819; box-shadow: -30px 0 80px rgba(0,0,0,.45); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.drawer h2 { margin: 0; font-size: 22px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: white; background: transparent; cursor: pointer; font-size: 20px; }
.plan-list { display: grid; gap: 12px; margin: 25px 0; }
.plan-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.plan-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-card header { display: flex; justify-content: space-between; }
.plan-card header span { color: var(--accent-2); font-size: 12px; font-weight: 700; }
.plan-card ul { display: grid; gap: 7px; margin: 15px 0 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 900px) {
  :root { --sidebar-width: 0px; }
  .sidebar { display: none; }
  .copilot-main, .dashboard-main { margin-left: 0; }
  .copilot-header { justify-content: space-between; padding: 8px 15px; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }
  .market-pulse { min-width: 0; margin-left: auto; padding: 8px 10px; }
  .market-pulse .freshness, .market-pulse > span:nth-of-type(2) { display: none; }
  .dashboard-link { display: none; }
  .dashboard-main { padding: 24px 18px 45px; }
  .dashboard-header { align-items: flex-start; }
  .market-grid { grid-template-columns: 1fr; }
  .levels-card, .evidence-card { grid-column: auto; }
  .evidence-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .conversation { width: calc(100% - 28px); padding-top: 15px; }
  .empty-state { min-height: calc(100vh - 280px); justify-content: flex-start; padding-top: 70px; }
  .empty-state h1 { font-size: 25px; }
  .prompt-grid { grid-template-columns: 1fr; margin-top: 25px; }
  .prompt-grid button { min-height: 72px; }
  .composer-zone { padding: 18px 10px 10px; }
  .composer-meta { padding: 0 5px; }
  .composer-zone > p { display: none; }
  .message-row { gap: 11px; }
  .dashboard-header { display: grid; }
  .header-actions { justify-content: space-between; }
  .signal-hero { grid-template-columns: 1fr; padding: 22px; }
  .score-block { justify-content: start; text-align: left; }
  .lean-meter { grid-column: 1; }
  .three-stats { grid-template-columns: 1fr; }
  .three-stats > div { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .three-stats > div:last-child { border-bottom: 0; }
  .detail-list > div, .metric-table > div { grid-template-columns: 110px 1fr; }
  .level-line { flex-wrap: wrap; }
  .level-line i { min-width: 25px; }
}