:root {
  color-scheme: dark;
  --q-bg: #02100d;
  --q-bg-elevated: #06221b;
  --q-panel: rgba(4, 31, 24, 0.82);
  --q-panel-strong: rgba(3, 22, 18, 0.96);
  --q-mint: #4dffbd;
  --q-cyan: #45e9ff;
  --q-blue: #4b94ff;
  --q-sol: #a777ff;
  --q-warn: #ffc768;
  --q-danger: #ff6d80;
  --q-text: #f1fff9;
  --q-muted: #9bbdb0;
  --q-line: rgba(90, 233, 182, 0.2);
  --q-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  --q-radius-sm: 10px;
  --q-radius-md: 16px;
  --q-radius-lg: 24px;
  --q-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --q-font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --q-transition-fast: 120ms ease;
  --q-transition-base: 180ms ease;
  --bg: var(--q-bg);
  --panel: var(--q-panel);
  --mint: var(--q-mint);
  --cyan: var(--q-cyan);
  --blue: var(--q-blue);
  --warn: var(--q-warn);
  --danger: var(--q-danger);
  --line: var(--q-line);
}

html { min-height: 100%; min-height: 100dvh; }
body { min-height: 100vh; min-height: 100dvh; font-family: var(--q-font-sans); }

.q-skeleton {
  position: relative;
  min-height: 1em;
  overflow: hidden;
  border-radius: var(--q-radius-sm);
  background: rgba(145, 205, 183, 0.09);
}
.q-skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(109, 255, 201, 0.12) 45%, transparent 70%);
  animation: q-shimmer 1.35s linear infinite;
  content: "";
  transform: translateX(-100%);
}
.q-skeleton-card { min-height: 150px; border: 1px solid var(--q-line); border-radius: var(--q-radius-md); }

.q-value-updated { animation: q-value-flash 800ms ease-out; }
.q-view-entering { animation: q-view-enter 180ms ease-out both; }
.q-target-hit { animation: q-target-hit 1.8s ease-out; }

.q-experience-dock {
  position: sticky;
  top: 0;
  z-index: 95;
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  margin: 0 0 10px;
  padding: 7px 10px;
  overflow-x: auto;
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-md);
  background: rgba(2, 19, 15, 0.9);
  box-shadow: var(--q-shadow);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
}
.q-status-orbs, .q-market-strip { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.q-status-orb, .q-experience-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(111, 231, 190, 0.18);
  border-radius: 999px;
  color: var(--q-muted);
  background: rgba(4, 36, 27, 0.72);
  font-size: 0.68rem;
  font-weight: 800;
}
.q-status-orb::before, .q-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--q-mint);
  box-shadow: 0 0 12px currentColor;
  content: "";
  animation: q-status-pulse 1.8s ease-in-out infinite;
}
.q-status-orb[data-state="warning"]::before { background: var(--q-warn); }
.q-status-orb[data-state="error"]::before { background: var(--q-danger); }
.q-market-strip { margin-left: auto; }
.q-market-price strong { color: var(--q-text); }
.q-experience-chip.is-negative { color: var(--q-danger); border-color: rgba(255, 109, 128, .32); }

.q-delta-badge, .q-streak-badge {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--q-mint);
  background: rgba(77, 255, 189, 0.09);
  font-size: 0.66rem;
  font-weight: 850;
}
.q-delta-badge.is-negative { color: var(--q-danger); background: rgba(255, 109, 128, 0.1); }
.q-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--q-mint); box-shadow: 0 0 14px rgba(77,255,189,.75); animation: q-status-pulse 1.8s ease-in-out infinite; }
.q-locked-seal { position: relative; }
.q-locked-seal::after { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border: 1px solid rgba(255,204,102,.5); border-radius: 50%; content: "L"; display: grid; place-items: center; color: var(--q-warn); background: radial-gradient(circle,rgba(255,204,102,.16),transparent 68%); filter: drop-shadow(0 0 8px rgba(255,204,102,.25)); font-size: .62rem; font-weight: 900; }
.q-target-ring { display: inline-block; width: 13px; height: 13px; margin-right: 5px; border-radius: 50%; background: conic-gradient(var(--q-mint) calc(var(--q-progress) * 1turn), rgba(255,255,255,.09) 0); box-shadow: inset 0 0 0 3px #062119; vertical-align: -2px; }

.q-command-palette,
.q-daily-briefing,
.q-network-overlay,
.q-calendar-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: start center;
  padding: max(8vh, 42px) 16px 24px;
  background: rgba(0, 8, 6, 0.76);
  backdrop-filter: blur(12px);
}
.q-overlay-card {
  width: min(760px, 100%);
  max-height: 82vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(88, 255, 194, 0.32);
  border-radius: var(--q-radius-lg);
  color: var(--q-text);
  background: var(--q-panel-strong);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55);
}
.q-command-input { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 13px; border: 1px solid var(--q-line); border-radius: 12px; color: var(--q-text); background: #031712; }
.q-command-results { display: grid; gap: 7px; }
.q-command-results button { display: flex; justify-content: space-between; width: 100%; padding: 11px 12px; border: 1px solid var(--q-line); border-radius: 10px; color: var(--q-text); background: rgba(5, 38, 29, 0.72); text-align: left; }

.q-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(38px, 1fr)); gap: 6px; }
.q-calendar-day { min-height: 50px; padding: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: color-mix(in srgb, var(--q-mint) calc(var(--q-intensity, 0) * 60%), rgba(255,255,255,.02)); font-size: .7rem; }
.q-calendar-day.is-negative { background: color-mix(in srgb, var(--q-danger) calc(var(--q-intensity, 0) * 60%), rgba(255,255,255,.02)); }

.q-bottom-tabs { display: none; }
.q-list-section { content-visibility: auto; contain-intrinsic-size: 0 500px; }
.q-intro-reveal { position: fixed; inset: 0; z-index: 12000; width: 100%; height: 100%; object-fit: cover; background: #020b08; transition: opacity 350ms ease; }
.q-intro-reveal.is-ending { opacity: 0; }
.q-matrix-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .28; pointer-events: none; }
.q-form-progress { display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(77,255,189,.12); }
.q-form-progress::after { display: block; width: 38%; height: 100%; content: ""; border-radius: inherit; background: var(--q-mint); animation: q-form-progress 1s ease-in-out infinite alternate; }
.q-view-entering > :where(article, section, .card, .panel):nth-child(2) { animation-delay: 35ms; }
.q-view-entering > :where(article, section, .card, .panel):nth-child(3) { animation-delay: 70ms; }
.q-view-entering > :where(article, section, .card, .panel):nth-child(4) { animation-delay: 105ms; }

.panel, .card, .position-card, .command-bar { container-type: inline-size; }
.panel, .card, button, .button { transition: transform var(--q-transition-fast), box-shadow var(--q-transition-base), border-color var(--q-transition-base); }
@media (hover:hover) and (pointer:fine) {
  .panel:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--q-shadow); }
}
button:active, .button:active { transform: translateY(1px); }

@keyframes q-shimmer { to { transform: translateX(100%); } }
@keyframes q-value-flash { 0% { background-color: rgba(77,255,189,.2); } 100% { background-color: transparent; } }
@keyframes q-view-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes q-target-hit { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 34px rgba(77,255,189,.35); } }
@keyframes q-status-pulse { 50% { opacity: .45; transform: scale(.78); } }
@keyframes q-form-progress { from { transform: translateX(-10%); } to { transform: translateX(180%); } }

@media (max-width: 640px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .q-experience-dock { top: env(safe-area-inset-top); min-height: 38px; border-radius: 0; }
  .q-market-strip { display: none; }
  .q-bottom-tabs {
    position: fixed;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 8px;
    z-index: 999;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border: 1px solid var(--q-line);
    border-radius: 18px;
    background: rgba(2, 20, 15, .95);
    box-shadow: var(--q-shadow);
    backdrop-filter: blur(18px);
  }
  .q-bottom-tabs button { min-width: 0; padding: 8px 3px; border: 0; border-radius: 12px; color: var(--q-muted); background: transparent; font-size: .62rem; font-weight: 800; }
  .q-bottom-tabs button.is-active { color: var(--q-mint); background: rgba(77,255,189,.09); }
  .bot-grid, .bot-carousel { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .bot-grid > *, .bot-carousel > * { min-width: min(86vw, 370px); scroll-snap-align: start; }
}

@container (max-width: 420px) {
  .q-status-orbs { gap: 4px; }
  .q-status-orb { padding: 5px 7px; font-size: .58rem; }
  .q-calendar-grid { grid-template-columns: repeat(4, minmax(38px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}