:root {
  color-scheme: dark;
  --bg: #03070b;
  --panel: #09131d;
  --panel2: #101f2d;
  --line: #223d51;
  --text: #f2f8fc;
  --muted: #9cb8cb;
  --accent: #80dfff;
  --orange: #d1e8f6;
  --red: #ed9391;
  --radius: 15px;
  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
#app { position: relative; z-index: 1; }
#frost-layer {
  position: absolute;
  inset: 0 0 auto;
  height: 330px;
  max-width: 1536px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}
#frost-canvas { display: block; width: 100%; height: 100%; }
.ambience-control {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 38px 18px;
}
#frost-toggle { color: var(--muted); font-size: 11px; }
#frost-toggle:disabled { cursor: default; opacity: 0.8; }
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text);
  background: var(--panel2);
  font-weight: 600;
}
button:hover {
  border-color: #72b8df;
  background: #142b3c;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #021018;
}
button.primary:hover {
  background: #b8efff;
}
button.quiet {
  background: transparent;
}
button.small {
  padding: 7px 11px;
  font-size: 12px;
}
button.danger {
  color: var(--red);
  background: #322223;
  border-color: #553a3b;
}
a {
  color: var(--accent);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 34px;
  letter-spacing: -1.3px;
  font-weight: 550;
  margin-bottom: 10px;
}
h2 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
p {
  line-height: 1.6;
  color: var(--muted);
}
small,
.sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
svg {
  vertical-align: middle;
}
.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.shell {
  max-width: 1536px;
  margin: auto;
}
.topbar {
  background: #03070be8;
  height: 83px;
  padding: 0 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  letter-spacing: -1px;
  font-weight: 650;
}
.brandmark {
  width: 36px;
  height: 36px;
  color: var(--accent);
}
.brand small {
  font-weight: 400;
  letter-spacing: 0;
  padding-left: 16px;
  margin-left: 8px;
  border-left: 1px solid var(--line);
}
.top-actions,
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.badge {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border: 1px solid #235470;
  border-radius: 20px;
  color: var(--accent);
  background: #0a2334;
}
.badge.muted {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}
.badge.orange {
  color: var(--orange);
  background: #13232f;
  border-color: #35566c;
}
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #173a52;
  color: #e2f5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.nav {
  background: #03070bf0;
  display: flex;
  gap: 25px;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
  overflow: auto;
}
.nav button {
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  white-space: nowrap;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}
.nav button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 16px #80dfff30;
}
.nav .icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
}
.main {
  padding: 34px 38px 50px;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 20px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.heading p {
  margin: 0;
}
.section-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--muted);
  font-weight: 600;
  margin: 32px 0 14px;
}
.grid {
  display: grid;
  gap: 18px;
}
.metrics {
  grid-template-columns: repeat(4, 1fr);
}
.twocol {
  grid-template-columns: 1.55fr 1fr;
}
.halves {
  grid-template-columns: 1fr 1fr;
}
.three {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  background: var(--panel);
  box-shadow: inset 0 1px 0 #addfff06;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 23px;
  min-width: 0;
}
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.card-header p {
  font-size: 12px;
  margin: 7px 0 0;
}
.stat-label {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.stat-value {
  font-size: 29px;
  letter-spacing: -1px;
  margin: 17px 0 10px;
  font-variant-numeric: tabular-nums;
}
.stat-value small {
  font-size: 15px;
  letter-spacing: 0;
}
.positive {
  color: var(--accent);
}
.negative {
  color: var(--red);
}
.metric-note {
  color: var(--muted);
  font-size: 11px;
}
.stats-first {
  background: linear-gradient(135deg, #0b2d43, #081622);
  border-color: #386d8b;
}
.stats-first .stat-value {
  color: #a5ecff;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 26px 0;
}
.step {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #09131c;
  border-right: 1px solid var(--line);
  text-align: left;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}
.step:last-child {
  border-right: 0;
}
.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #315065;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
}
.step.done .step-number {
  background: #103448;
  border-color: #36799f;
  color: var(--accent);
}
.step strong {
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
}
.step small {
  font-size: 10px;
}
.step.current {
  background: #0d2333;
}
.step.current .step-number {
  border-color: var(--accent);
  color: var(--accent);
}
.stack {
  display: grid;
  gap: 18px;
}
.allocation-row,
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.allocation-row:last-child,
.list-row:last-child {
  border-bottom: 0;
}
.asset-icon {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #153246;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}
.asset-icon.ETH {
  background: #1b3549;
  color: #c4eaff;
}
.asset-icon.SOL {
  background: #162638;
  color: #a4c9e3;
}
.asset-icon.BTC {
  background: #1b4160;
  color: #ace7ff;
}
.number {
  font-variant-numeric: tabular-nums;
}
.right {
  text-align: right;
}
.empty {
  padding: 34px 12px;
  text-align: center;
  border: 1px dashed #315066;
  border-radius: 12px;
  color: var(--muted);
  line-height: 1.7;
}
.empty h3 {
  font-size: 16px;
  color: var(--text);
  margin: 12px 0 6px;
}
.empty .icon {
  color: var(--accent);
  width: 29px;
  height: 29px;
}
.empty p {
  max-width: 390px;
  margin: 0 auto 18px;
  font-size: 12px;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
}
.chart-label {
  fill: var(--muted);
  font-size: 10px;
}
.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.chart-key {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}
.legend {
  display: inline-block;
  height: 6px;
  width: 14px;
  border-radius: 5px;
  background: var(--accent);
  margin-right: 6px;
}
.legend.orange {
  background: var(--orange);
}
.donut-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin: 12px 0 26px;
}
.donut {
  width: 152px;
  height: 152px;
  flex-shrink: 0;
}
.donut text {
  fill: var(--text);
  font-size: 23px;
  font-weight: 600;
}
.donut .hint {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 400;
}
.legend-list {
  font-size: 12px;
  line-height: 2.1;
  color: var(--muted);
}
.notice {
  padding: 12px 15px;
  background: #0d2332;
  border: 1px solid #294e65;
  border-radius: 8px;
  color: #bcdaec;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.notice.warning {
  color: var(--orange);
  background: #142733;
  border-color: #45697f;
}
.notice.error {
  color: var(--red);
  background: #2f2022;
  border-color: #51393d;
}
.notice p {
  margin: 0;
  color: inherit;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full {
  grid-column: 1/-1;
}
label {
  display: block;
  font-size: 12px;
  color: #c1d5e3;
  line-height: 1.5;
}
label input,
label select,
label textarea {
  margin-top: 8px;
}
input,
select,
textarea {
  display: block;
  background: #060e16;
  color: var(--text);
  border: 1px solid #2c4659;
  border-radius: 7px;
  padding: 11px 12px;
  width: 100%;
  min-width: 0;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}
textarea {
  resize: vertical;
  min-height: 100px;
}
input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0 8px 0 0;
  accent-color: var(--accent);
}
label.help:after {
  content: " ⓘ";
  color: var(--muted);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  align-items: center;
}
.form-note {
  margin-top: 15px;
  font-size: 11px;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 23px 0;
}
details {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 20px;
}
summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
}
details[open] summary {
  margin-bottom: 18px;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
th {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1.2px;
  border-bottom: 1px solid var(--line);
  padding: 12px 9px;
}
td {
  padding: 13px 9px;
  border-bottom: 1px solid var(--line);
}
tr:last-child td {
  border: 0;
}
.table-wrap {
  overflow-x: auto;
}
progress {
  display: block;
  width: 100%;
  height: 7px;
  border: 0;
  border-radius: 7px;
  background: #163041;
  accent-color: var(--accent);
  overflow: hidden;
  margin: 13px 0;
}
progress::-webkit-progress-bar {
  background: #163041;
}
progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 7px;
}
.budget-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  font-size: 12px;
  color: var(--muted);
}
.budget-row.total {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  font-size: 15px;
  color: var(--text);
  margin-top: 17px;
}
.rule-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.rule-amount {
  font-size: 30px;
  letter-spacing: -1px;
  margin: 10px 0;
}
.rule-detail {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
.auth {
  max-width: 1050px;
  margin: 9vh auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 85px;
  padding: 30px;
}
.auth-intro {
  padding-top: 30px;
}
.auth .brand {
  margin-bottom: 45px;
}
.auth h1 {
  font-size: 49px;
  line-height: 1.15;
}
.auth-intro p {
  max-width: 380px;
  font-size: 15px;
  line-height: 1.8;
}
.auth form {
  margin-top: 34px;
}
.auth label {
  margin-top: 20px;
}
.auth .card {
  padding: 32px;
}
.auth .primary {
  width: 100%;
  margin-top: 25px;
}
.auth-feature {
  padding: 14px 0;
  color: #abc6d8;
  font-size: 12px;
  display: flex;
  gap: 12px;
}
.auth-feature .icon {
  color: var(--accent);
}
.footer {
  border-top: 1px solid var(--line);
  padding: 20px 38px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #839eaf;
  letter-spacing: 0.4px;
}
.loading {
  padding: 20vh 30px;
  text-align: center;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  z-index: 50;
  padding: 13px 20px;
  background: #11354b;
  border: 1px solid #4185ac;
  color: var(--text);
  border-radius: 10px;
  box-shadow: 0 12px 30px #0005;
  display: none;
}
#toast.show {
  display: block;
}
#toast.error {
  background: #412729;
  border-color: #835256;
}
.spaced {
  margin-top: 22px;
}
.nowrap {
  white-space: nowrap;
}
.wrap {
  overflow-wrap: anywhere;
}
.code {
  font-family: Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #abc6d8;
  max-height: 330px;
  overflow: auto;
}
[hidden] { display: none !important; }
.product-details, .preview-summary {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
}
.product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.product-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.product-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.session-windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.session-windows p { margin: 12px 0 0; }
.record-id { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-summary .notice + .notice { margin-top: 10px; }
.research-layout { align-items: start; }
#research-output { scroll-margin-top: 20px; }
#research-output:focus-visible { outline: 2px solid #80dfff; outline-offset: 6px; }
.research-output-panel:not([hidden]) { margin: 0 0 24px; }
#research-connection:not([hidden]) { margin-bottom: 14px; }
.research-progress-text { color: #d7f6ff; font-size: 18px; font-weight: 600; }
.research-work-count, .research-completion-note { color: #a2d8ef; }
#research-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#research-form legend { font-weight: 600; margin-bottom: 20px; }
.research-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 18px; margin: 22px 0; }
.research-stat-grid strong, .monthly-grid strong { display: block; margin-top: 6px; }
.research-stat-grid strong { overflow-wrap: anywhere; }
#research-form #goal-controls { padding: 18px; margin: 18px 0 24px; border: 1px solid #386580; border-radius: 10px; background: linear-gradient(130deg, #12324e88, #050b13); }
#goal-controls legend { padding: 0 8px; color: #d9f1ff; }
.goal-summary { border: 1px solid #31536a; background: linear-gradient(120deg, #122a3b80, #060c15); padding: 20px; border-radius: 10px; }
.monthly-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 10px; margin: 20px 0; }
.monthly-grid > div, .candidate-detail { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.monthly-grid small { display: block; margin-top: 6px; }
.drawdown-chart { max-height: 140px; }
#research-comparison { min-width: 0; }
.pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.balance-inline {
  font-size: 12px;
  color: var(--muted);
}
.flat-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-size: 12px;
}
.budget-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.budget-line { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.7fr) 38px; align-items: end; gap: 10px; margin-bottom: 12px; }
.budget-line button { height: 42px; padding: 6px; }
.budget-capacity { font-size: 34px; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 24px; }
.budget-capacity small { display: block; margin-top: 8px; }
input[readonly] { color: var(--accent); background: #0c2231; }
.toolbar { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.toolbar .grow { flex: 1 1 240px; }
.toolbar .checkbox { min-height: 42px; margin: 0; }
.toolbar > label { min-width: 150px; }
.compact { margin-top: 0; justify-content: flex-end; }
.community-list { display: grid; gap: 0; }
.community-row { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); min-width: 0; }
.community-row > div { min-width: 0; }
.community-row > button { flex-shrink: 0; }
.community-row h2 { margin: 14px 0 8px; }
.text-button { background: none; border: 0; padding: 0; font-size: 20px; text-align: left; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.text-button:hover { background: none; color: var(--accent); }
.community-excerpt { font-size: 14px; overflow-wrap: anywhere; margin-bottom: 10px; }
.community-title { font-size: 28px; line-height: 1.3; overflow-wrap: anywhere; }
.community-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 15px; max-width: 1050px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.composer { max-width: 1000px; margin: 0 auto; }
.composer textarea { min-height: 170px; }
.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 22px; margin: 22px 0; }
.snapshot-grid strong { display: block; margin-top: 6px; }
.strategy-snapshot { padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.reply { padding: 22px 0; border-bottom: 1px solid var(--line); }
.reply .card-header { margin-bottom: 12px; }
.reply .card-header p { margin: 0; }
.help-articles details { padding: 22px 0 0; }
.help-articles summary { color: var(--text); font-size: 17px; line-height: 1.5; }
.help-category { display: inline-block; font-size: 12px; color: var(--muted); margin-left: 18px; }
.help-steps { padding-left: 22px; color: var(--muted); max-width: 1050px; }
.help-steps li { margin: 14px 0; line-height: 1.6; }
.help-articles details { scroll-margin-top: 24px; }
.glossary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 32px; margin-top: 24px; }
@media (max-width: 1050px) {
  .budget-layout { grid-template-columns: 1fr; }
  .glossary { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .community-row { align-items: flex-start; gap: 12px; }
  .community-row > button { display: none; }
  .community-title { font-size: 22px; }
  .reply .card-header { flex-direction: column; }
  .glossary { grid-template-columns: 1fr; }
  .help-category { display: block; margin: 4px 0 0; }
  .strategy-snapshot { padding: 16px; }
  .budget-line { grid-template-columns: minmax(0,1fr) minmax(0,.8fr) 32px; gap: 6px; }
  .budget-line label { font-size: 12px; }
  .budget-line input { padding: 10px 7px; }
  .heading:has(.compact) { flex-wrap: wrap; }
  .toolbar { align-items: stretch; }
  .toolbar > label { flex: 1 1 160px; }
}
.wide {
  grid-column: 1/-1;
}
.result-metrics {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 18px;
}
.result-metrics .card {
  padding: 15px;
}
.result-metrics .stat-value {
  font-size: 23px;
}
.route-note {
  font-size: 11px;
  margin: 18px 0 0;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 14px;
}
.integration-logo {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 22px;
  border-radius: 10px;
  background: #234aba;
  color: white;
}
.integration-logo.openai {
  background: #173347;
  color: var(--accent);
}
.hide {
  display: none;
}
@media (min-width: 1450px) {
  .main {
    padding: 40px 48px 60px;
  }
  .topbar,
  .nav {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 1050px) {
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .twocol {
    grid-template-columns: 1fr;
  }
  .three {
    grid-template-columns: 1fr 1fr;
  }
  .brand small {
    display: none;
  }
  .nav {
    gap: 20px;
  }
  .auth {
    gap: 35px;
  }
}
@media (max-width: 700px) {
  .topbar {
    height: 70px;
    padding: 0 18px;
  }
  .top-actions .balance-inline {
    display: none;
  }
  .nav {
    padding: 0 18px;
    gap: 20px;
  }
  .main {
    padding: 26px 18px;
  }
  .heading {
    align-items: flex-start;
  }
  .heading .actions {
    margin-top: 0;
  }
  h1 {
    font-size: 27px;
  }
  .heading p {
    font-size: 12px;
  }
  .metrics {
    gap: 10px;
  }
  .card {
    padding: 18px;
  }
  .stat-value {
    font-size: 24px;
  }
  .halves,
  .three,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .step:nth-child(2) {
    border-right: 0;
  }
  .step {
    padding: 12px;
  }
  .step small {
    display: none;
  }
  .step strong {
    font-size: 11px;
  }
  .footer {
    padding: 20px 18px;
    gap: 20px;
  }
  .ambience-control { padding: 0 18px 18px; }
  .auth {
    grid-template-columns: 1fr;
    margin: 15px auto;
    gap: 18px;
    padding: 22px;
  }
  .auth-intro {
    padding: 0;
  }
  .auth .brand {
    margin-bottom: 25px;
  }
  .auth h1 {
    font-size: 36px;
  }
  .auth-feature {
    display: none;
  }
  .auth-intro p {
    font-size: 13px;
    margin-bottom: 0;
  }
  .auth .card {
    padding: 25px;
  }
  .result-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .brand {
    font-size: 21px;
  }
  .top-actions {
    gap: 8px;
  }
}
/* Cryogen motion and interactive controls */
body {
  font-size: 16px;
}
.nav button {
  font-size: 14px;
}
.stat-label,
label,
summary {
  font-size: 14px;
}
small,
.sub,
.form-note,
.metric-note,
.route-note,
.rule-detail,
.budget-row {
  font-size: 12px;
}
.eyebrow,
.section-label {
  font-size: 12px;
  letter-spacing: 1.4px;
}
.badge {
  font-size: 12px;
}
.step strong {
  font-size: 14px;
}
.step small {
  font-size: 12px;
}
th {
  font-size: 12px;
  letter-spacing: 0.5px;
}
td {
  font-size: 13px;
}
.brand small {
  font-size: 12px;
}
.footer {
  font-size: 12px;
  letter-spacing: 0;
}
.chart-label {
  font-size: 12px;
}
.auth-feature {
  font-size: 14px;
}
.nav {
  gap: 21px;
}
@media (min-width: 1100px) {
  .nav { flex-wrap: wrap; column-gap: 21px; row-gap: 0; }
  .nav button { padding-top: 13px; padding-bottom: 13px; }
}
.nav button {
  flex-shrink: 0;
}
button {
  position: relative;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  min-height: 38px;
}
button.primary {
  border-radius: 7px 14px 7px 14px;
  box-shadow:
    inset 0 1px 0 #d4f5ff80,
    0 3px 0 #26719580;
}
button.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #d4f5ff80,
    0 5px 16px #50cfff20;
}
button.primary:active {
  transform: translateY(1px);
  box-shadow: none;
}
button:focus-visible {
  outline: 2px solid var(--accent);
}
button.quiet:hover {
  transform: translateY(-1px);
}
button:disabled:hover {
  transform: none;
}
.nav button:hover {
  transform: none;
  color: var(--text);
}
.card {
  animation: reveal 0.35s ease both;
}
.metrics .card:nth-child(2) {
  animation-delay: 0.04s;
}
.metrics .card:nth-child(3) {
  animation-delay: 0.08s;
}
.metrics .card:nth-child(4) {
  animation-delay: 0.12s;
}
.brandmark {
  transition: transform 0.3s ease;
}
.brand:hover .brandmark {
  transform: rotate(-5deg) scale(1.07);
}
progress::-webkit-progress-value {
  transition: width 0.3s ease;
}
.chart path[stroke] {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.asset-input {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.8fr 38px;
  align-items: end;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.asset-input .small {
  padding: 8px;
  height: 42px;
  margin-bottom: 1px;
}
.principal-example {
  background: linear-gradient(145deg, #102a3b, #091c2a);
  border: 1px solid #2a526b;
  border-radius: 12px;
  padding: 22px;
  margin: 18px 0 22px;
}
.principal-example > span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  display: block;
}
.principal-example > strong {
  display: block;
  font-size: 36px;
  letter-spacing: -1.5px;
  font-weight: 550;
  color: var(--accent);
  margin: 12px 0 20px;
}
.principal-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  border-top: 3px solid #509fc7;
  padding-top: 13px;
}
.principal-band span:nth-child(2) {
  color: var(--accent);
}
.plan {
  padding: 20px;
  background: var(--panel2);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.auth .card {
  box-shadow: 0 0 90px #55c8ff0b;
}
.heading h1 {
  font-size: 32px;
}
.auth h1 {
  font-size: 49px;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 700px) {
  .asset-input {
    grid-template-columns: 1.2fr 1fr 0.7fr 32px;
    gap: 7px;
  }
  .asset-input label {
    font-size: 12px;
  }
  .asset-input input,
  .asset-input select {
    padding: 10px 6px;
  }
  .heading h1 {
    font-size: 26px;
  }
  .auth h1 {
    font-size: 36px;
  }
  .principal-example > strong {
    font-size: 31px;
  }
  .nav {
    gap: 20px;
  }
  .step strong {
    font-size: 12px;
  }
  .top-actions .badge {
    font-size: 10px;
  }
  .top-actions .quiet {
    padding: 7px;
  }
  .metrics .card {
    padding: 14px;
  }
  .stat-label {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  button:hover,
  .brand:hover .brandmark {
    transform: none;
  }
}

/* Cryogen crystalline workspace. All textures are code-native SVG/canvas. */
:root {
  --bg: #02070c;
  --panel: #07131d;
  --panel2: #0b2234;
  --line: #244a64;
  --text: #f3f8ff;
  --muted: #aed2e8;
  --accent: #63dfff;
  --radius: 10px;
}
body {
  font-size: 14px;
  background:
    radial-gradient(ellipse at 85% 3%, #08213750, transparent 34%),
    radial-gradient(ellipse at 12% 76%, #07243d30, transparent 35%),
    #02070c;
  min-height: 100vh;
}
#frost-layer { height: clamp(390px, 58vh, 650px); z-index: 0; }
#frost-edges {
  position: fixed;
  inset: 0;
  max-width: 1536px;
  margin: auto;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  contain: strict;
  z-index: 0;
}
#frost-edges canvas { display: block; width: 100%; height: 100%; }
.topbar {
  height: 64px;
  padding: 0 4%;
  border-color: #3279a0;
  background: linear-gradient(90deg, #02080dda 0%, #02080d9c 54%, #030a1080 100%);
  box-shadow: 0 1px 12px #0a8bd916;
}
.brand { font-size: 28px; font-weight: 700; letter-spacing: -1px; gap: 10px; }
.brandmark { width: 34px; height: 39px; filter: drop-shadow(0 0 6px #329bed60); }
.brand small { font-size: 11px; letter-spacing: .7px; padding-left: 17px; border-color: #40819d; }
.avatar {
  background: linear-gradient(145deg, #225d88, #113455);
  border: 1px solid #3f7ca3;
  box-shadow: inset 0 1px 4px #a8eaff20;
}
.nav {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 15px;
  padding: 0 4%;
  min-height: 43px;
  border-color: #2877a0;
  background: linear-gradient(180deg, #030b12e6, #02080dc9);
  scrollbar-width: thin;
  scrollbar-color: #317899 #07131c;
  box-shadow: 0 2px 9px #0099ee0c;
}
.nav button {
  position: relative;
  font-size: 12px;
  padding: 12px 0 11px;
  font-weight: 500;
  line-height: 19px;
  flex-shrink: 0;
  min-height: 42px;
  overflow: visible;
}
.nav .icon { width: 14px; height: 14px; margin-right: 5px; }
.nav button.active { color: #f0faff; font-weight: 650; border-bottom-color: #66e7ff; text-shadow: 0 0 13px #5bc5ff80; }
.nav button.active::after {
  content: "";
  position: absolute;
  height: 2px;
  inset: auto 0 -2px;
  background: #8ef3ff;
  box-shadow: 0 0 5px 1px #32baff, 0 0 14px #0097ff;
}
.nav button.active .icon { color: #72e6ff; }
.main { padding: 25px 4% 30px; }
.heading { margin-bottom: 19px; }
.heading h1 { font-size: 32px; font-weight: 680; line-height: 1.2; letter-spacing: -.8px; margin-bottom: 5px; }
.heading p { color: #b7def1; font-size: 15px; line-height: 1.45; }
.eyebrow { color: #59e6ff; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; margin-bottom: 8px; }
h2 { font-size: 19px; font-weight: 650; letter-spacing: -.3px; }
.grid { gap: 13px; }
.card {
  position: relative;
  border-color: #4784a5;
  padding: 20px;
  background:
    radial-gradient(ellipse at 0 0, #11365629, transparent 54%),
    linear-gradient(135deg, #071420f0, #040d15f5 63%, #091929ee);
  box-shadow:
    inset 0 1px 1px #b1eaff72,
    inset 0 -1px 0 #327fb95c,
    inset 1px 0 4px #4caee327,
    0 0 0 1px #0a284a3d,
    0 4px 18px #0003;
  border-radius: 10px;
}
.card-header { margin-bottom: 15px; }
.card-header p { font-size: 12px; margin-top: 5px; line-height: 1.4; }
.card-header .icon { color: #d6edff; }
.metrics .card { padding: 18px 21px 17px; }
.stat-label { color: #bcddf0; font-size: 14px; line-height: 1.4; }
.stat-value { font-size: 30px; font-weight: 650; letter-spacing: -.65px; line-height: 1.15; margin: 8px 0 7px; }
.metric-note { font-size: 12px; color: #acd9ef; line-height: 1.4; }
.stats-first {
  overflow: hidden;
  background: radial-gradient(ellipse at top right, #12639a42, transparent 65%), linear-gradient(145deg, #042a42, #03111d 64%, #092d48);
  border-color: #6ddcff;
  box-shadow: inset 0 1px 2px #b3f5ffb3, inset 0 -1px 1px #36b8ff99, 0 0 9px #2bbaff26;
}
.stats-first::after {
  content: "";
  position: absolute;
  width: 142px;
  height: 142px;
  bottom: -20px;
  right: -10px;
  background: var(--frost-corner, url("/static/ice-corner.svg")) right bottom / contain no-repeat;
  opacity: calc(.85 * var(--frost-cycle-opacity, 1));
  pointer-events: none;
}
.stats-first > * { position: relative; z-index: 1; }
.stats-first .stat-value { color: #83eaff; text-shadow: 0 0 14px #20b7ed30; }
.steps { margin: 13px 0; border-color: #3c789b; border-radius: 9px; box-shadow: inset 0 1px 2px #86d9ff30; }
.step { background: linear-gradient(140deg, #102c4366, #050e1799); padding: 12px 15px; gap: 12px; border-color: #3d7895; }
.step.current { background: linear-gradient(145deg, #123d587f, #061723); }
.step strong { font-size: 13px; font-weight: 650; }
.step small { font-size: 12px; font-weight: 400; }
.step-number { height: 33px; width: 33px; border-color: #4cb7eb; }
.step.done .step-number {
  background: radial-gradient(circle at 40% 30%, #1177aa, #06375f 80%);
  color: #a6f3ff;
  font-size: 20px;
  border-color: #50d6ff;
  box-shadow: inset 0 1px 3px #a7faff58, 0 0 8px #118ee82a;
}
button {
  border-color: #32698b;
  background: linear-gradient(150deg, #123247c7, #061320);
  border-radius: 7px;
  box-shadow: inset 0 1px 1px #b1e4ff17;
  font-weight: 600;
}
button.quiet { background: linear-gradient(150deg, #0b243855, #020b15cc); }
button.small { font-size: 12px; min-height: 33px; padding: 6px 11px; }
button:hover { background: #133247; border-color: #71d2ff; box-shadow: 0 0 9px #39adf52b; }
button.primary {
  color: #02131d;
  background: linear-gradient(180deg, #b2f5ff, #6ae4ff 50%, #3bc6f1);
  border: 1px solid #b4f6ff;
  border-radius: 9px;
  box-shadow: inset 0 1px 2px #eeffff, inset 0 -1px 1px #18a9e7, 0 0 4px #4bd8ff, 0 0 16px #009aff48;
}
button.primary:hover { background: linear-gradient(180deg, #d3fbff, #8deaff 60%, #51d4f8); box-shadow: inset 0 1px 2px white, 0 0 16px #28baff80; transform: translateY(-1px); }
.heading button.primary { padding: 12px 20px; font-size: 16px; min-height: 43px; }
.badge { background: linear-gradient(180deg, #0b3d5a88, #041728); border-color: #247fb0; color: #8ee9ff; box-shadow: inset 0 1px 3px #71d8ff16; font-size: 11px; padding: 5px 10px; }
.badge.muted { background: #04111c88; border-color: #367698; color: #c0def1; }
.dot { background: #69e2ff; box-shadow: 0 0 4px #44bfff99; }
.asset-icon, .asset-icon.ETH, .asset-icon.SOL, .asset-icon.BTC {
  height: 31px;
  width: 31px;
  background: radial-gradient(circle at 38% 28%, #286d9b, #10426a 66%, #09233b);
  border: 1px solid #36a7df;
  box-shadow: inset 0 1px 2px #a3e5ff70, 0 0 6px #118eda16;
  color: #e4f9ff;
  font-weight: 650;
}
.donut-section { margin: 4px 0 10px; gap: 23px; }
.donut { width: 134px; height: 134px; overflow: visible; }
.donut circle:not(:first-child) { filter: drop-shadow(0 0 2px #31ceff75); }
.donut text { font-size: 24px; }
.donut .hint { font-size: 8px; letter-spacing: .5px; color: #c8eafb; }
.legend-list { color: #c2dfef; line-height: 1.8; }
.allocation-row { padding: 8px 0; border-color: #1d4056; font-size: 14px; }
.allocation-row small { font-size: 12px; }
.chart-grid { stroke: #185675; stroke-dasharray: 3 3; opacity: .8; }
.chart-key { gap: 20px; font-size: 10px; color: #b9daf1; }
.chart path[stroke="#80dfff"] { filter: drop-shadow(0 0 2px #4ebcf38c); }
.chart-label { fill: #b7def6; font-size: 11px; }
input, select, textarea { background: #020c16; border-color: #29556f; border-radius: 6px; color: #e9f6ff; box-shadow: inset 0 1px 4px #0005; }
input:focus, select:focus, textarea:focus { border-color: #73dfff; outline: 1px solid #73dfff; box-shadow: 0 0 9px #2695c333; }
label { color: #c5e0f0; font-size: 13px; }
.notice { background: #092033db; border-color: #2f678b; }
.notice.warning { border-color: #5b8bab; background: #1430459c; color: #d1e5f7; }
.table-wrap { border-radius: 5px; }
th { color: #a8d8f3; font-size: 11px; letter-spacing: .45px; }
th, td { border-color: #21475e; }
progress::-webkit-progress-bar { background: linear-gradient(90deg, #154d79, #0a233c); }
progress::-webkit-progress-value { background: linear-gradient(90deg, #81efff, #46cdf2); box-shadow: 0 0 6px #40b8f466; }
.footer { padding: 13px 4%; border-color: #1e4a60; font-size: 10px; color: #a3d3ec; }
.ambience-control { padding: 0 4% 12px; }
#frost-toggle { font-size: 10px; padding: 5px 9px; min-height: 27px; opacity: .85; }
.spaced { margin-top: 13px; }
/* The dashboard keeps the reference's compact visual hierarchy; forms keep their room. */
.main:has(#overview-chart) .twocol { grid-template-columns: minmax(0,1.54fr) minmax(0,1fr); align-items: stretch; }
.main:has(#overview-chart) .card-header { margin-bottom: 11px; }
.main:has(#overview-chart) .budget-row { margin-bottom: 4px; font-size: 12px; line-height: 1.45; }
.main:has(#overview-chart) .budget-row.total { margin-top: 6px; padding-top: 7px; margin-bottom: 5px; font-size: 14px; }
.main:has(#overview-chart) progress { height: 7px; margin: 6px 0; }
.main:has(#overview-chart) .actions { justify-content: flex-end; margin-top: 4px; }
.main:has(#overview-chart) .route-note { margin-top: 12px; font-size: 11px; }
.main:has(#overview-chart) .card-header h2 { margin-bottom: 5px; }
.main:has(#overview-chart) .chart { max-height: 243px; }
.main:has(#overview-chart) .chart-key { flex-wrap: wrap; row-gap: 5px; }
/* Dense restored tools reuse the same compact, wrapping controls. */
.research-subnav { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.research-subnav a, .research-subnav button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #315f7c; border-radius: 6px; color: #badef1; background: #09203480; font-size: 12px; text-decoration: none; }
.research-subnav a.active, .research-subnav button.active, .research-subnav [aria-current] { border-color: #69dafd; color: #a1efff; background: #123d5799; box-shadow: inset 0 -2px 0 #57cfff; }
.research-section { border-top: 1px solid #2b536b; padding-top: 18px; margin-top: 19px; }
.research-section > h3 { color: #daefff; margin-bottom: 12px; }
.research-blocks { display: grid; gap: 15px; }
.gene-list { display: grid; gap: 10px; margin: 14px 0; }
.gene-row { margin: 0; padding: 13px 15px; border: 1px solid #2c5a79; border-radius: 8px; background: linear-gradient(120deg, #0d294060, #071522); min-width: 0; }
.gene-header, .gene-title, .gene-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gene-header { justify-content: space-between; }
.gene-title { min-width: 0; color: #dcefff; font-size: 13px; }
.gene-actions { margin-left: auto; gap: 6px; }
.gene-actions button { font-size: 11px; min-height: 29px; padding: 5px 8px; }
.gene-param-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr)); gap: 12px; margin-top: 15px; }
.genome-summary { padding: 13px 16px; background: #0b283ba6; border: 1px solid #2e668c; border-radius: 8px; font-size: 12px; color: #bfdaed; line-height: 1.65; }
.strategy-tag { display: inline-flex; align-items: center; padding: 3px 7px; margin: 3px; border-radius: 5px; border: 1px solid #3b6d8b; background: #0e2e4480; color: #abeaff; font-size: 11px; }
.strategy-library-list { display: grid; gap: 11px; }
.strategy-library-item { min-width: 0; padding: 16px; border: 1px solid #346885; border-radius: 8px; background: #081827; }
.strategy-library-item h3 { margin-bottom: 8px; }
.strategy-library-item .actions { margin-top: 12px; }
@media (min-width: 1500px) { .nav { gap: 20px; } .nav button { font-size: 13px; } }
@media (max-width: 1200px) {
  .nav { gap: 15px; padding-left: 28px; padding-right: 28px; }
  .topbar { padding-left: 28px; padding-right: 28px; }
  .main { padding-left: 28px; padding-right: 28px; }
  .metrics .card { padding: 17px; }
}
@media (max-width: 1050px) {
  .main:has(#overview-chart) .twocol { grid-template-columns: 1fr; }
  .main:has(#overview-chart) .chart { max-height: none; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brand { font-size: 25px; }
}
@media (max-width: 700px) {
  #frost-layer { height: 390px; opacity: .66; }
  #frost-edges { opacity: .72; }
  .topbar { height: 66px; padding: 0 17px; }
  .brand { font-size: 22px; gap: 6px; }
  .brandmark { width: 28px; height: 33px; }
  .top-actions { gap: 7px; }
  .top-actions .badge { font-size: 9px; padding: 5px 7px; }
  .top-actions .avatar { width: 26px; height: 26px; font-size: 12px; }
  .top-actions .quiet { font-size: 11px; padding: 5px 7px; }
  .nav { padding: 0 17px; gap: 19px; }
  .nav button { font-size: 13px; padding-top: 12px; padding-bottom: 12px; }
  .main { padding: 25px 18px; }
  .heading { gap: 13px; flex-wrap: wrap; }
  .heading h1 { font-size: 27px; letter-spacing: -.7px; }
  .heading p { font-size: 13px; }
  .heading button.primary { font-size: 14px; padding: 10px 15px; }
  .card { padding: 17px; }
  .metrics { gap: 10px; }
  .metrics .card { padding: 14px; }
  .metrics .stat-label { min-height: 34px; font-size: 12px; gap: 7px; }
  .stat-value { font-size: 24px; margin-top: 9px; }
  .metric-note { font-size: 11px; }
  .stats-first::after { width: 105px; height: 105px; opacity: calc(.6 * var(--frost-cycle-opacity, 1)); right: -19px; bottom: -13px; }
  .steps { margin: 13px 0; }
  .step { padding: 12px 9px; gap: 8px; }
  .step-number { width: 29px; height: 29px; flex-shrink: 0; }
  .step strong { font-size: 11px; }
  h2 { font-size: 18px; }
  .card-header { gap: 8px; }
  .card-header button { padding: 6px 8px; font-size: 11px; }
  .footer { padding: 14px 18px; font-size: 9px; gap: 20px; }
  .ambience-control { padding: 0 18px 12px; }
  .auth .card { padding: 23px; }
  .research-subnav { gap: 6px; }
  .gene-row { padding: 12px; }
  .gene-actions { margin-left: 0; }
  .gene-param-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  button.primary:hover { transform: none; }
}
.main:has(#overview-chart) .twocol > .card { padding: 17px 20px; }
.main:has(#overview-chart) .donut-section { height: 121px; margin: 0 0 9px; }
.main:has(#overview-chart) .allocation-row { padding: 5px 0; }
.main:has(#overview-chart) .twocol.spaced .card-header { margin-bottom: 8px; }
.main:has(#overview-chart) .twocol.spaced .budget-row { margin-bottom: 1px; line-height: 1.3; }
.main:has(#overview-chart) .twocol.spaced .budget-row.total { margin-top: 4px; padding-top: 5px; margin-bottom: 5px; }
.main:has(#overview-chart) .twocol.spaced .actions button { min-height: 27px; padding-top: 4px; padding-bottom: 4px; font-size: 11px; }
@media (max-width: 700px) {
  .brand { font-size: 21px; flex-shrink: 0; }
  .top-actions .quiet { white-space: nowrap; }
  .main:has(#overview-chart) .twocol > .card { padding: 17px; }
  #frost-layer { opacity: .46; }
}
@media (max-width: 420px) { .top-actions .avatar { display: none; } .top-actions .badge { white-space: nowrap; } }
@media (min-width: 701px) {
  .topbar { background: linear-gradient(90deg, #02080dda 0%, #02080d9c 54%, #030a10a1 92%, #030a1000 98%); }
  .nav { background: linear-gradient(90deg, #030b12e8, #02080dde 93%, #030a1050 100%); }
}
.finance-workspace { margin-bottom: 25px; }
.finance-workspace > .card-header > label { width: 165px; flex-shrink: 0; }
.finance-tabs { gap: 7px; padding-bottom: 15px; border-bottom: 1px solid #2c536d; }
.finance-tabs button { font-size: 12px; }
.finance-tabs button.primary { box-shadow: inset 0 1px 1px #c3f7ff75, 0 0 7px #13a5e520; }
.finance-editor { background: #0b2034b8; border-color: #4c9ac6; box-shadow: inset 0 1px 1px #9adfff44; margin-bottom: 20px; }
.finance-chart, .equity-chart { display: block; width: 100%; height: auto; margin-top: 15px; }
.finance-chart polyline { stroke-linecap: round; stroke-linejoin: round; }
.live-layout { align-items: start; }
.live-layout fieldset { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); }
.live-layout legend { padding: 0 9px 0 0; font-weight: 600; color: #d1ecff; }
.live-process { color: var(--muted); padding-left: 22px; margin: 18px 0; }
.live-process li { padding-left: 4px; margin-bottom: 14px; line-height: 1.5; }
.live-process li::marker { color: #69d6fc; font-weight: 700; }
#live-session-detail .card-header .actions { margin-top: 0; justify-content: flex-end; }
#live-session-detail .stat-value { overflow-wrap: anywhere; }
.chart-wrap { min-width: 0; }
@media (max-width: 700px) {
  .finance-workspace > .card-header { flex-wrap: wrap; }
  .finance-workspace > .card-header > label { width: 100%; }
  .finance-workspace > .card-header input { max-width: 220px; }
  .finance-workspace .metrics { grid-template-columns: 1fr 1fr; }
  .finance-workspace .metrics .card { padding: 12px; }
  .finance-workspace .stat-value { font-size: 21px; overflow-wrap: anywhere; }
  .finance-tabs { gap: 7px; }
  .finance-tabs button { flex: 1 1 auto; padding: 7px 9px; }
  #live-session-detail .card-header { flex-wrap: wrap; }
  #live-session-detail .card-header .actions { justify-content: flex-start; }
}
.gene-header > label { flex: 1 1 150px; min-width: 0; }
.gene-row summary .gene-title { display: inline-flex; vertical-align: middle; }
.gene-number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 24px; min-width: 24px; border: 1px solid #438cb4; border-radius: 50%; color: #99eaff; background: #0a324c; font-size: 11px; }
.gene-add { align-items: end; flex-wrap: wrap; }
.gene-add > label { flex: 1 1 200px; min-width: 0; }
.genome-summary { margin-top: 15px; }
.research-subnav a:hover { color: white; border-color: #61c8f1; background: #11334d; }
/* Keep the restored full navigation in one row on standard desktop widths. */
@media (min-width: 1280px) {
  .nav { column-gap: 8px; }
  .nav button { font-size: 12px; }
  .nav .icon { width: 12px; height: 12px; margin-right: 4px; }
}
@media (min-width: 1536px) { .nav { column-gap: 12px; } }
@media (max-width: 700px) {
  .finance-chart text { font-size: 26px; }
  .finance-chart text:last-of-type { text-anchor: end; }
}

/* Ambient frost fades independently of readable application content. */
#frost-canvas, #frost-edges canvas { opacity: var(--frost-cycle-opacity, 1); }

/* Empty, waiting and informational panels retain crisp text on frosted glass.
   :has() removes the treatment as soon as a result replaces its placeholder. */
.empty, .panel-frosted,
.card:has(> .empty), .card:has(> #overview-chart > .empty),
.card:has(> #research-comparison:empty) {
  position: relative;
  background:
    radial-gradient(ellipse at 4% 0%, #d9f3ff1f, transparent 65%),
    linear-gradient(120deg, #779aac2c, #18354685 52%, #9dc7dc18);
  border: 1px solid #aed4e766;
  box-shadow: inset 0 1px 0 #effaff60, inset 0 0 32px #bddcec0c, 0 8px 24px #0003;
  -webkit-backdrop-filter: blur(14px) saturate(.7);
  backdrop-filter: blur(14px) saturate(.7);
}
.empty::before, .panel-frosted::before,
.card:has(> .empty)::before, .card:has(> #overview-chart > .empty)::before,
.card:has(> #research-comparison:empty)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23dbeeff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.empty > *, .panel-frosted > * { position: relative; }
.card:has(> .empty) > .empty, .card:has(> #overview-chart > .empty) #overview-chart > .empty {
  background: #b6d9ea06;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.card:has(> .empty) > .empty::before,
.card:has(> #overview-chart > .empty) #overview-chart > .empty::before { content: none; }

/* Forecast evidence and complete trial history */
.forecast-chart { margin: 20px 0 0; }
.forecast-chart svg { display: block; width: 100%; min-height: 150px; }
.forecast-chart figcaption { color: var(--muted); font-size: .8rem; margin-top: 8px; }
.forecast-chart-controls { max-width: 360px; }
.research-evidence { border-top: 1px solid rgba(123,194,239,.16); padding-top: 22px; }
.trial-parameters { max-width: 440px; max-height: 260px; overflow: auto; font-size: .75rem; white-space: pre-wrap; word-break: break-word; }

/* Principal holding charts retain readable height on narrow screens. */
.principal-chart { min-height: 160px; max-height: 240px; }

/* Crystal data displays: original vector curves and native progress semantics. */
.donut-section { gap: 22px; flex-wrap: wrap; }
.donut.ice-ring { width: clamp(180px, 18vw, 240px); height: auto; overflow: visible; }
.donut.ice-ring text { font-size: 46px; font-weight: 500; letter-spacing: -1.6px; fill: #f3faff; }
.donut.ice-ring .hint { font-size: 13px; font-weight: 500; letter-spacing: 1.2px; fill: #a9c9e3; }
.donut.ice-ring circle { filter: none; }
.ice-ring[data-ice-ready] .ice-ring-core { opacity: .20; }
.ice-art { pointer-events: none; }
.ice-swatch { width: 10px; height: 10px; margin-right: 8px; vertical-align: middle; }
.donut-section .legend-list { min-width: 132px; flex: 1; max-width: 260px; }
.donut-section .legend-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #4b79902b; }
.donut-section .legend-list strong { color: #dcefff; font-variant-numeric: tabular-nums; }
.main:has(#overview-chart) .donut-section { height: auto; min-height: 210px; margin: 0 0 14px; }
.ice-data-chart [data-ice-trace] { stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 2px #6bdbff80); }
.ice-progress { position: relative; display: block; width: 100%; height: 29px; margin: 14px 0; overflow: hidden; border: 1px solid #6d9bb9a6; border-radius: 8px; background: #030b13; box-shadow: inset 0 1px 6px #000b, 0 0 0 1px #16324650; }
.ice-progress > progress, .main:has(#overview-chart) .ice-progress > progress { width: 100%; height: 100%; margin: 0; border-radius: inherit; }
.ice-progress-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.ice-progress-ready > progress { opacity: 0; }
.ice-progress-ready > .ice-progress-art { display: block; }
.ice-progress::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 #effaff5c, inset 0 -1px 0 #bad9ec22; }
.ice-progress[data-ice-indeterminate] { border-style: dashed; }
.research-progress-card .ice-progress { height: 34px; margin: 18px 0; }
.main:has(#overview-chart) .ice-progress { height: 21px; margin: 10px 0; }
@media (max-width: 600px) {
  .donut.ice-ring { width: 220px; max-width: 100%; }
  .donut-section { gap: 8px; }
  .donut-section .legend-list { max-width: none; flex-basis: 100%; }
  .main:has(#overview-chart) .donut-section { min-height: 0; }
}
.principal-status .research-stat-grid { margin-top: 1rem; }

/* LIVE data uses vector coordinates; frost never obscures prices or markers. */
.live-market-panel { margin-bottom: 24px; min-width: 0; overflow: hidden; }
.live-chart-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.live-chart-controls label { flex: 1 1 140px; max-width: 240px; min-width: 0; }
.live-market-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin: 22px 0 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.live-market-stats > div { min-width: 0; display: grid; gap: 6px; }
.live-market-stats span,.live-market-stats small { color: #a5bed0; font-size: 12px; overflow-wrap: anywhere; }
.live-market-stats strong { color: #e4f8ff; font-size: clamp(19px,2vw,28px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.live-market-svg,.live-principal-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.live-chart-scroll { overflow-x: auto; max-width: 100%; }
.live-market-svg:focus-visible { outline: 1px solid #9eeaff; outline-offset: 3px; }
.live-axis { fill: #9ebdce; font-size: 11px; font-variant-numeric: tabular-nums; }
.live-grid-line { stroke: #325063; stroke-opacity: .4; stroke-width: 1; }
.live-candle line { stroke: #b2e9ff; stroke-width: 1; }
.live-candle.rise rect { fill: #83def6; stroke: #b9f0ff; stroke-width: .6; }
.live-candle.fall rect { fill: #315974; stroke: #83a4bc; stroke-width: .6; }
.live-volume-bar { fill: #488ba9; opacity: .65; }
.live-volume-bar.fall { fill: #465f7d; }
.live-candle.forming,.live-volume-bar.forming { opacity: .55; }
.live-close-line { fill: none; stroke: #86e1fc; stroke-width: 2; stroke-linejoin: round; }
.live-quote-line line { stroke: #c1f5ff; stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
.live-quote-line circle,.live-current-holding { fill: #dcfbff; stroke: #0f536e; stroke-width: 2; }
.live-quote-line.stale { opacity: .4; }
.live-fill { cursor: pointer; stroke: #04121c; stroke-width: 1.4; }
.live-fill.buy { fill: #6fe8ff; }
.live-fill.sell { fill: #d8c7ff; }
.live-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: #bdd6e5; margin: 10px 0; }
.live-legend-buy { color: #6fe8ff; }.live-legend-sell { color: #d8c7ff; }
.live-chart-inspect { min-height: 44px; padding: 10px 12px; border: 1px solid #79b2d02e; border-radius: 8px; font-size: 12px; color: #c7e8f7; background: #06121c; font-variant-numeric: tabular-nums; }
.live-crosshair { stroke: #dbf4ff; stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; opacity: .7; }
.live-principal-target { fill: none; stroke: #f0faff; stroke-width: 2; }
.live-principal-band { fill: none; stroke: #95accb; stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
.live-principal-chart { border-top: 1px solid var(--line); padding-top: 18px; }
.live-chart-empty { min-height: 220px; }
@media(max-width: 760px) {
  .live-market-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .live-market-svg { min-width: 660px; }
  .live-principal-svg { min-width: 570px; }
  .live-chart-controls label { max-width: none; }
}