/* App shell: sidebar + topbar + terminal grid */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 62% -8%, rgba(98, 76, 214, 0.07), transparent 60%),
    var(--bg);
}

/* ---------- sidebar ---------- */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: 26px 12px 14px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(160% 55% at 50% 108%, rgba(96, 72, 220, 0.20), transparent 62%),
    linear-gradient(180deg, #06080c 0%, #05070a 100%);
  overflow: hidden;
  z-index: 40;
}
.brand { position: relative; padding: 0 6px 22px; }
/* The glow comes from the artwork around the wordmark, never from the letters. */
.brand::before {
  content: ""; position: absolute; left: -40px; top: -34px; width: 230px; height: 120px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(122, 92, 255, 0.22), rgba(122, 92, 255, 0.06) 62%, transparent);
}
.wordmark {
  position: relative; display: block;
  font-family: var(--font-brand); font-weight: var(--weight-medium);
  font-size: 31px; line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand); text-transform: uppercase;
  color: #eceef6; margin-left: 2px;
}
.tagline {
  margin: 16px 0 0 2px;
  font-size: 9.5px; line-height: 1.8;
  letter-spacing: 0.3em;
  color: var(--text-3);
  font-weight: var(--weight-medium);
}
.nav { display: grid; gap: 2px; margin-top: 14px; position: relative; z-index: 2; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r2);
  color: var(--text-2);
  font-size: var(--fs-body); font-weight: var(--weight-medium); letter-spacing: var(--tracking-ui);
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  text-align: left; width: 100%;
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: 0.9; }
.nav-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.025); }
.nav-item[aria-current="page"] {
  color: #f1edff;
  background: linear-gradient(90deg, rgba(122, 92, 255, 0.22), rgba(122, 92, 255, 0.07));
  border-color: var(--violet-line);
  box-shadow: 0 0 22px rgba(122, 92, 255, 0.16), inset 0 0 14px rgba(122, 92, 255, 0.08);
}
.sidebar-scene {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%;
  object-fit: cover; object-position: 50% 26%;
  pointer-events: none; opacity: 0.92;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
}
.sidebar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.82) 70%, rgba(5, 7, 10, 0.92) 100%); }
.topbar-brand { display: none; flex: none; line-height: 0; }
.topbar-brand img { filter: drop-shadow(0 0 10px rgba(138, 104, 255, 0.55)); }
.sidebar-foot { margin-top: auto; position: relative; z-index: 2; padding: 0 6px 4px; display: grid; gap: 8px; text-shadow: 0 0 8px #05070a, 0 0 2px #05070a; }
.sol-mark { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: 0.1em; color: #dcd6f5; }
.sol-mark svg { width: 18px; height: 18px; }
.foot-meta { font: 500 9.5px/1.6 var(--font-ui); letter-spacing: 0.1em; color: var(--text-3); text-transform: uppercase; }
.foot-stats { display: flex; gap: 12px; font: 400 10px var(--font-data); color: var(--text-3); letter-spacing: 0; }
.foot-stats b { color: var(--text-2); font-weight: 500; }

/* ---------- main + topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 16px;
  background: rgba(5, 7, 10, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
#mainContent { padding: 12px 16px 24px; outline: none; flex: 1; }
.view[hidden] { display: none; }

/* ---------- terminal grid ---------- */
.terminal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--read-w);
  grid-template-rows: auto minmax(300px, 1fr) auto auto auto;
  grid-template-areas:
    "head  tabs"
    "chart read"
    "out   read"
    "lower read"
    "bottom bottom";
  gap: 12px;
  min-height: calc(100vh - var(--topbar-h) - 36px);
}
.area-head { grid-area: head; min-width: 0; }
.area-tabs { grid-area: tabs; display: flex; align-items: flex-end; justify-content: flex-end; }
.area-chart { grid-area: chart; min-width: 0; display: flex; flex-direction: column; }
.area-read { grid-area: read; min-width: 0; }
.area-out { grid-area: out; min-width: 0; }
.area-lower { grid-area: lower; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.area-bottom { grid-area: bottom; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 1.1fr); gap: 12px; }
.area-bottom > .panel { height: 236px; display: flex; flex-direction: column; overflow: hidden; }

/* secondary views */
.view-page { max-width: 1240px; margin: 0 auto; display: grid; gap: 12px; }
.view-page > header h1 { font-size: var(--fs-title); font-weight: var(--weight-semibold); margin: 4px 0 4px; letter-spacing: -0.02em; line-height: var(--leading-tight); }
.view-page > header p { margin: 0; color: var(--text-2); max-width: 70ch; line-height: var(--leading-body); }

/* ---------- responsive ---------- */
@media (min-width: 1700px) {
  :root { --read-w: 330px; --sidebar-w: 204px; }
  #mainContent { padding: 14px 22px 28px; }
  .terminal { gap: 14px; }
}

@media (max-width: 1179px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 244px;
    transform: translateX(-102%);
    transition: transform .26s var(--ease);
    box-shadow: 18px 0 60px rgba(0, 0, 0, 0.6);
  }
  .app[data-drawer="open"] .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(2, 3, 6, 0.62); backdrop-filter: blur(2px); }
  .topbar .icon-btn.menu-btn { display: inline-flex; }
  .topbar-brand { display: inline-flex; }
}

@media (max-width: 1099px) {
  .terminal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "tabs" "read" "chart" "out" "lower" "bottom";
    min-height: 0;
  }
  .area-tabs { justify-content: flex-start; }
  .area-chart { min-height: 400px; }
  .area-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .area-bottom > #liveMarket { grid-column: 1 / -1; }
}

/* tablet: FATE READ becomes a two-column inline band */
@media (min-width: 720px) and (max-width: 1099px) {
  .terminal .area-read { display: block; column-count: 2; column-gap: 0; }
  .area-read .read-foot { margin: 10px 14px 4px; }
  .area-read > * { break-inside: avoid; }
  .area-read > .read-head { column-span: all; }
}

@media (max-width: 899px) {
  .area-bottom { grid-template-columns: minmax(0, 1fr); }
  .area-bottom > .panel { height: auto; max-height: 420px; }
}

@media (max-width: 719px) {
  .area-lower { grid-template-columns: minmax(0, 1fr); }
  #mainContent { padding: 10px 10px 24px; }
  .topbar { padding: 0 10px; gap: 8px; }
}

@media (max-height: 780px) { .sidebar-scene { height: 30%; opacity: 0.55; } }

/* Reserve space for panels that JavaScript fills in, so first render does not jump. */
.area-head { min-height: 72px; }
#outcomes { min-height: 82px; }
.area-lower > .panel { min-height: 196px; }
.area-read { min-height: 560px; }
@media (max-width: 1099px) { .area-read { min-height: 430px; } .area-chart { min-height: 440px; } .area-head { min-height: 150px; } }
@media (max-width: 719px) { .area-read { min-height: 740px; } .area-lower > .panel { min-height: 200px; } #outcomes { min-height: 170px; } .area-head { min-height: 190px; } .area-tabs { min-height: 38px; } }