.mobile-brand { display: none; }

html[data-shell="mobile"] {
  --mobile-width: 520px;
  background: #05090d;
}

html[data-shell="mobile"] body {
  min-width: 320px;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% -8%, #123d3a66, transparent 26rem),
    #05090d;
}

html[data-shell="mobile"] body::before {
  opacity: .08;
  background-size: 28px 28px;
}

html[data-shell="mobile"] .app-shell {
  display: block;
  width: min(100%, var(--mobile-width));
  min-height: 100dvh;
  margin: 0 auto;
  border-inline: 1px solid #15232c;
  background: #070b10e8;
}

html[data-shell="mobile"] .sidebar { display: none; }
html[data-shell="mobile"] .workspace { min-width: 0; }

html[data-shell="mobile"] .topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 112px;
  display: grid;
  grid-template-areas: "brand status" "title title";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 10px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  border-bottom-color: #1b3037;
  background: #060b10f2;
}

html[data-shell="mobile"] .mobile-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[data-shell="mobile"] .mobile-brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  box-shadow: inset 0 0 18px #33e6c114;
  font: 700 21px/1 ui-monospace, monospace;
}

html[data-shell="mobile"] .mobile-brand b,
html[data-shell="mobile"] .mobile-brand small { display: block; }
html[data-shell="mobile"] .mobile-brand b { font-size: 13px; letter-spacing: .1em; }
html[data-shell="mobile"] .mobile-brand small {
  margin-top: 4px;
  color: var(--faint);
  font: 7px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}

html[data-shell="mobile"] .view-heading { grid-area: title; }
html[data-shell="mobile"] .view-heading p { margin-bottom: 5px; font-size: 7px; }
html[data-shell="mobile"] .view-heading h1 { font-size: 19px; }
html[data-shell="mobile"] .top-actions { grid-area: status; gap: 5px; }
html[data-shell="mobile"] .top-actions > span:first-child { display: none; }
html[data-shell="mobile"] .badge { padding: 6px; font-size: 7px; }

html[data-shell="mobile"] main {
  width: 100%;
  padding: 12px 10px 22px;
}

html[data-shell="mobile"] .view.active { display: block; }
html[data-shell="mobile"] [data-page="home"].active {
  display: flex;
  flex-direction: column;
}
html[data-shell="mobile"] [data-page="home"] .status-strip { order: 1; }
html[data-shell="mobile"] [data-page="home"] .content-grid { order: 2; }
html[data-shell="mobile"] [data-page="home"] .kpi-grid { order: 3; }
html[data-shell="mobile"] [data-page="home"].active .content-grid.wide-left {
  display: flex;
  flex-direction: column;
}
html[data-shell="mobile"] [data-page="home"] .content-grid > .panel:last-child { order: -1; }

html[data-shell="mobile"] .status-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
  border-color: #1b3037;
}
html[data-shell="mobile"] .status-cell {
  min-height: 58px;
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
html[data-shell="mobile"] .status-cell:nth-child(3n) { border-right: 0; }
html[data-shell="mobile"] .status-cell:nth-last-child(-n+3) { border-bottom: 0; }
html[data-shell="mobile"] .status-cell b { margin-top: 6px; font-size: 9px; }

html[data-shell="mobile"] .content-grid,
html[data-shell="mobile"] .content-grid.wide-left,
html[data-shell="mobile"] .content-grid.equal { display: block; }
html[data-shell="mobile"] .content-grid > .panel { margin: 10px 0; }

html[data-shell="mobile"] .panel {
  margin: 10px 0;
  padding: 14px;
  border-color: #1b2b34;
  background: linear-gradient(145deg, #0b141a, #080d12);
}
html[data-shell="mobile"] .panel.flush { padding: 0; }
html[data-shell="mobile"] .panel-head { gap: 10px; padding-bottom: 12px; }
html[data-shell="mobile"] .panel-head h2 { font-size: 15px; }

html[data-shell="mobile"] .study-progress {
  display: grid;
  gap: 8px;
  margin: 12px 0 7px;
  padding: 12px;
  border: 1px solid #245048;
  background: #0d211d;
}
html[data-shell="mobile"] .study-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--cyan);
  font: 800 9px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
html[data-shell="mobile"] .study-progress-bar {
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: #152128;
}
html[data-shell="mobile"] .study-progress-bar::-webkit-progress-bar { background: #152128; }
html[data-shell="mobile"] .study-progress-bar::-webkit-progress-value { background: var(--cyan); }
html[data-shell="mobile"] .study-progress-bar::-moz-progress-bar { background: var(--cyan); }
html[data-shell="mobile"] .study-progress small {
  color: var(--muted);
  font: 8px/1.4 ui-monospace, monospace;
}

html[data-shell="mobile"] .kpi-grid,
html[data-shell="mobile"] .kpi-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
html[data-shell="mobile"] .kpi {
  min-height: 94px;
  padding: 13px;
  border-color: #1c2c35;
  background: linear-gradient(145deg, #0c151c, #080d12);
}
html[data-shell="mobile"] .kpi strong { margin-top: 13px; font-size: 19px; }

html[data-shell="mobile"] .signal-list { grid-template-columns: 1fr; gap: 8px; }
html[data-shell="mobile"] .signal-card {
  min-height: 112px;
  padding: 14px;
  border-color: #1a2a33;
  background: #091117;
}
html[data-shell="mobile"] .signal-card:active { border-color: var(--cyan); }
html[data-shell="mobile"] .signal-top strong { max-width: 220px; font-size: 13px; }
html[data-shell="mobile"] .signal-metrics { gap: 8px; }

html[data-shell="mobile"] .section-intro {
  display: block;
  margin: 2px 0 13px;
}
html[data-shell="mobile"] .section-intro h2 { font-size: 21px; }
html[data-shell="mobile"] .toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 14px;
}
html[data-shell="mobile"] .toolbar label:first-child { grid-column: 1 / -1; }
html[data-shell="mobile"] input,
html[data-shell="mobile"] select { width: 100%; min-width: 0; min-height: 42px; }

html[data-shell="mobile"] .desktop-only { display: none; }
html[data-shell="mobile"] .mobile-only { display: block; }
html[data-shell="mobile"] .mobile-signal-grid { display: grid; gap: 8px; }
html[data-shell="mobile"] .table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-shell="mobile"] .token-hero { display: block; }
html[data-shell="mobile"] .consensus-box {
  min-width: 0;
  margin-top: 16px;
  padding: 14px 0 0;
  border-left: 0;
  border-top: 1px solid var(--line);
}
html[data-shell="mobile"] .horizon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-shell="mobile"] .agent-grid,
html[data-shell="mobile"] .agent-performance-grid { grid-template-columns: 1fr; }
html[data-shell="mobile"] .funnel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-shell="mobile"] .research-alert { display: block; }
html[data-shell="mobile"] .research-alert span { display: block; margin-top: 8px; }
html[data-shell="mobile"] .timeline-item { grid-template-columns: auto minmax(0, 1fr); }
html[data-shell="mobile"] .timeline-item time { grid-column: 2; }

html[data-shell="mobile"] .bottom-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  width: min(100%, var(--mobile-width));
  height: calc(62px + env(safe-area-inset-bottom));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0 4px env(safe-area-inset-bottom);
  border-top: 1px solid #1b3037;
  background: #060b10f7;
  backdrop-filter: blur(18px);
}
html[data-shell="mobile"] .bottom-nav button {
  min-width: 0;
  min-height: 48px;
  padding: 0 2px;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--faint);
  background: transparent;
  font: 700 9px/1 ui-monospace, monospace;
}
html[data-shell="mobile"] .bottom-nav button.active {
  border-top-color: var(--cyan);
  color: var(--cyan);
}
html[data-shell="mobile"] #toast {
  right: max(10px, calc((100vw - var(--mobile-width)) / 2 + 10px));
  bottom: calc(74px + env(safe-area-inset-bottom));
}

@media (max-width: 360px) {
  html[data-shell="mobile"] .topbar { padding-inline: 10px; }
  html[data-shell="mobile"] main { padding-inline: 7px; }
  html[data-shell="mobile"] .bottom-nav button { font-size: 8px; }
}

html[data-shell="mobile"] .mobile-login-body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
}
html[data-shell="mobile"] .mobile-login-shell {
  width: min(100%, 420px);
  padding: 0;
}
html[data-shell="mobile"] .mobile-login-card {
  padding: 22px;
  border: 1px solid #1b3037;
  background: linear-gradient(145deg, #0b141a, #070c11);
  box-shadow: 0 24px 80px #0008;
}
html[data-shell="mobile"] .mobile-login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
html[data-shell="mobile"] .mobile-login-brand b,
html[data-shell="mobile"] .mobile-login-brand small { display: block; }
html[data-shell="mobile"] .mobile-login-brand b { font-size: 14px; letter-spacing: .12em; }
html[data-shell="mobile"] .mobile-login-brand small {
  margin-top: 5px;
  color: var(--faint);
  font: 8px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}
html[data-shell="mobile"] .mobile-login-copy { margin: 32px 0 22px; }
html[data-shell="mobile"] .mobile-login-copy p {
  margin: 0 0 7px;
  color: var(--cyan);
  font: 700 8px/1 ui-monospace, monospace;
  letter-spacing: .16em;
}
html[data-shell="mobile"] .mobile-login-copy h1 { margin: 0; font-size: 24px; }
html[data-shell="mobile"] .mobile-login-copy span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
html[data-shell="mobile"] #mobile-login-form { display: grid; gap: 8px; }
html[data-shell="mobile"] #mobile-login-form label {
  margin-top: 7px;
  color: var(--muted);
  font: 700 9px/1 ui-monospace, monospace;
}
html[data-shell="mobile"] #mobile-login-form input { min-height: 48px; }
html[data-shell="mobile"] #mobile-login-submit {
  min-height: 48px;
  margin-top: 12px;
  border: 1px solid var(--cyan);
  color: #04110e;
  background: var(--cyan);
  cursor: pointer;
  font: 900 11px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}
html[data-shell="mobile"] #mobile-login-submit:disabled { opacity: .55; cursor: wait; }
html[data-shell="mobile"] .mobile-login-error {
  margin: 8px 0 0;
  padding: 10px;
  border-left: 2px solid var(--red);
  color: var(--red);
  background: #32151a66;
  font-size: 10px;
}
html[data-shell="mobile"] .mobile-login-safety {
  margin: 22px 0 0;
  color: var(--faint);
  text-align: center;
  font: 7px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}