/* Shared visual layer. Keep operational state colours and module layouts intact. */
:root {
  --bg: #f1f5fa;
  --panel: #ffffff;
  --line: #dce5ee;
  --primary: #2862bd;
  --primary-strong: #1d4f9c;
  --primary-soft: #eaf1fc;
  --accent: #087d78;
  --accent-soft: #e1f4ef;
  --radius-card: 14px;
  --shadow: 0 16px 42px -20px rgba(27, 56, 91, .24);
  --shadow-soft: 0 8px 24px -14px rgba(27, 56, 91, .2);
  --ambient-blue: rgba(69, 128, 223, .1);
  --ambient-teal: rgba(33, 175, 151, .08);
  --workspace-ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="dark"] {
  --bg: #0c1420;
  --panel: #141f2e;
  --panel-soft: #192638;
  --surface: #1d2c40;
  --surface-elevated: #203047;
  --line: #2b3c52;
  --text: #edf3fc;
  --muted: #a5b6cd;
  --primary: #8db7ff;
  --primary-strong: #a7c7ff;
  --primary-soft: rgba(112, 164, 255, .15);
  --accent: #67d9c7;
  --accent-soft: rgba(68, 202, 177, .13);
  --input-bg: #101a29;
  --hover: #20324b;
  --ambient-blue: rgba(58, 112, 204, .12);
  --ambient-teal: rgba(26, 143, 132, .09);
  --shadow: 0 18px 42px -20px rgba(0, 0, 0, .55);
}
body { isolation: isolate; line-height: 1.55; }
.workspace-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(var(--line) .65px, transparent .65px);
  background-size: 26px 26px;
}
.workspace-ambient span {
  position: absolute;
  width: min(760px, 90vw);
  height: min(760px, 90vw);
  top: -220px;
  right: -180px;
  background: radial-gradient(circle, var(--ambient-blue), transparent 68%);
  animation: workspace-drift 16s ease-in-out 3 alternate;
}
.workspace-ambient span + span {
  top: auto;
  bottom: -240px;
  right: 20%;
  background: radial-gradient(circle, var(--ambient-teal), transparent 68%);
  animation-delay: -8s;
}
.workspace-skip {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: 9px;
  background: var(--panel);
  color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-160%);
}
.workspace-skip:focus { transform: none; }
.sidebar {
  background: radial-gradient(ellipse at 0 0, #203957, transparent 60%), linear-gradient(175deg, #101d30, #142a36);
  border-right-color: rgba(170, 208, 255, .1);
}
.brand-mark {
  border-radius: 13px;
  background: linear-gradient(145deg, #3786cb, #238e86);
  box-shadow: 0 5px 22px rgba(49, 161, 189, .23), inset 0 1px rgba(255, 255, 255, .22);
}
.brand-subtitle { letter-spacing: .08em; font-size: 11px; margin-top: 3px; }
.nav-group-label { letter-spacing: .09em; color: #99b4cf; }
.nav-link { border: 1px solid transparent; border-radius: 10px; }
.nav-link.active {
  background: linear-gradient(100deg, rgba(72, 145, 235, .23), rgba(63, 177, 163, .1));
  border-color: rgba(130, 191, 255, .18);
  box-shadow: inset 3px 0 #65d9cc, 0 4px 14px rgba(0, 0, 0, .08);
}
.nav-link svg { transition: transform .2s var(--workspace-ease), color .2s; }
.sidebar-foot {
  position: static;
  flex-shrink: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: transparent;
}
:root[data-theme="dark"] .sidebar-foot { background: transparent; }
.sidebar-foot > :is(.user-card, form) { grid-column: 1 / -1; }
.sidebar-foot .user-card { background: rgba(163, 202, 244, .06); border-radius: 10px; }
.sidebar-foot .button.ghost { color: #bed0e5; background: transparent; border: 1px solid rgba(183, 214, 245, .13); }
.sidebar-foot .button.ghost:hover { color: #fff; background: rgba(183, 214, 245, .1); }
.sidebar-foot .effects-toggle { font-size: 12px; min-height: 32px; }
.workspace-kicker { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 750; letter-spacing: .2em; color: var(--accent); }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -.035em; }
.page-header p { line-height: 1.75; max-width: 80ch; }
.panel { border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.panel-header h2 { letter-spacing: -.025em; }
.stat-card { border-radius: var(--radius-card); background: linear-gradient(140deg, var(--panel), var(--panel-soft)); }
.stat-value { letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-meta { line-height: 1.65; }
.monitor-summary-grid > div { min-width: 0; }
.monitor-summary-grid :is(strong, small) { overflow-wrap: anywhere; }
.button { border-radius: 9px; transition: background .2s, box-shadow .2s, transform .2s var(--workspace-ease); }
.button:not(.secondary):not(.ghost):not(.danger):not(:disabled):not(.is-disabled) {
  background-image: linear-gradient(115deg, rgba(255,255,255,.09), transparent 65%);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
:root[data-theme="dark"] .button:not(.secondary):not(.ghost):not(.danger) { color: #0b1b30; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 75%, transparent);
  outline-offset: 3px;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color .18s, box-shadow .18s;
}
:is(input, select, textarea):focus { box-shadow: 0 0 0 3px var(--primary-soft); }
:is(.dashboard-hero, .control-hero, .stock-hero, .paper-trading-hero, .ai-stock-hero, .housing-hero, .skill-lab-hero) {
  border-radius: 18px;
  box-shadow: 0 18px 36px -22px rgba(15, 63, 104, .5);
}
body:not(.has-custom-bg) :is(.dashboard-hero, .control-hero, .stock-hero) {
  background: radial-gradient(ellipse at 85% 0, rgba(57, 162, 176, .22), transparent 55%), linear-gradient(120deg, #132942, #163e4b);
}
/* Only decorative pseudo-elements animate; controls and data never shimmer. */
.dashboard-hero::before { border-color: rgba(172, 216, 255, .12); border-radius: 12px; }
.housing-hero::after { animation: workspace-orbit 12s ease-in-out 3 alternate; pointer-events: none; }
.housing-catalog-card, .housing-listing-card { border-radius: 13px; }
.housing-catalog-media img, .housing-listing-media img { transition: transform .45s var(--workspace-ease); }
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.command-palette { border-radius: 18px; }
.command-search input { border-radius: 10px; }

/* Navigation scrolls independently; the account controls never cover links. */
@media (min-width: 841px) {
  .sidebar { overflow: hidden; }
  .sidebar-menu { overflow: hidden; gap: 14px; }
  .sidebar-menu > .nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(170, 208, 255, .25) transparent;
    padding: 0 2px 5px 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover svg { transform: translateX(2px) rotate(-5deg); }
  :is(.stat-card, .action-card, .module-health-item, .housing-catalog-card) {
    transition: border-color .22s, box-shadow .22s, transform .22s var(--workspace-ease);
  }
  :is(.stat-card, .action-card, .housing-catalog-card):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    box-shadow: var(--shadow);
  }
  .module-health-item:hover { background: var(--primary-soft); }
  .housing-catalog-card:hover .housing-catalog-media img, .housing-listing-card:hover .housing-listing-media img { transform: scale(1.035); }
}
/* Short staggered entrances, no observers and no initially hidden content. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-effects="full"] .content > * { animation: workspace-enter .42s var(--workspace-ease) both; }
  :root[data-effects="full"] .content > :nth-child(2) { animation-delay: .045s; }
  :root[data-effects="full"] .content > :nth-child(3) { animation-delay: .09s; }
}
@keyframes workspace-enter {
  from { opacity: .55; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes workspace-drift { to { transform: translate(-45px, 55px) scale(1.08); } }
@keyframes workspace-orbit { to { transform: translate(-18px, -12px) scale(1.08); } }

@media (max-width: 840px) {
  .workspace-ambient span { animation: none; }
  .workspace-ambient { background-size: 32px 32px; }
  .sidebar-foot, :root[data-theme="dark"] .sidebar-foot { background: transparent; }
  .sidebar-menu { background: #142736; }
  .page-header { margin-bottom: 18px; }
  :is(.dashboard-hero, .control-hero, .stock-hero, .paper-trading-hero, .ai-stock-hero, .housing-hero) { border-radius: 14px; }
  .brand-subtitle { letter-spacing: .03em; }
}
:root[data-page-hidden="true"] *, :root[data-page-hidden="true"] *::before, :root[data-page-hidden="true"] *::after { animation-play-state: paused !important; }
:root[data-effects="quiet"] *, :root[data-effects="quiet"] *::before, :root[data-effects="quiet"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
:root[data-effects="quiet"] :is(.nav-link, .nav-link svg, .stat-card, .action-card, .housing-catalog-card, .housing-listing-card, .housing-catalog-media img, .housing-listing-media img, .button):hover { transform: none; }
:root[data-effects="quiet"] :is(.button, .icon-button, .sidebar-icon-button):active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(.nav-link, .nav-link svg, .stat-card, .action-card, .housing-catalog-card, .housing-listing-card, .housing-catalog-media img, .housing-listing-media img, .button):hover { transform: none; }
  :is(.button, .icon-button, .sidebar-icon-button):active { transform: none; }
}