/* The shared scene is outside #app: it survives navigation and never handles input. */
:root { --cosmic-scroll: 0; }
@property --cosmic-rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
body { background: radial-gradient(ellipse at 50% 18%, #16352c, #020b09 62%, #010605); }
.cosmic-scene {
  position: fixed; z-index: 0; pointer-events: none; overflow: hidden;
  top: 0; bottom: 0; left: 50%; width: min(100%, 460px); transform: translateX(-50%);
  background: #03130f url('./assets/blackhole-cinematic-v1.png') center top / cover no-repeat;
  contain: strict;
}
.cosmic-canvas, .cosmic-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cosmic-canvas { display: block; opacity: 0; transition: opacity 700ms ease; }
.cosmic-scene[data-renderer="webgl"] .cosmic-canvas { opacity: 1; }
.cosmic-shade {
  border-radius: inherit;
  background: linear-gradient(90deg, #020d0999, transparent 65%), linear-gradient(180deg, #02100c08 0%, #02100c12 24%, #03161138 50%, #010c0928 80%, #020c094a);
}
.cosmic-scene[data-renderer="fallback"]::before,
.cosmic-scene[data-renderer="fallback"]::after {
  content: ''; position: absolute; inset: -12%; pointer-events: none;
  background: radial-gradient(ellipse 38% 15% at 24% 25%, #b9c3a528, transparent 75%), radial-gradient(ellipse 52% 7% at 45% 69%, #b9aa7d18, transparent 75%), radial-gradient(ellipse 45% 9% at 28% 90%, #92baa81b, transparent 75%);
  mix-blend-mode: screen; transform-origin: 79% 27%; animation: cosmos-mist 36s linear infinite;
}
.cosmic-scene[data-renderer="fallback"]::after {
  animation-delay: -18s;
}
.app-shell {
  z-index: 1; background: transparent;
  --ui-surface: radial-gradient(ellipse at 0 0, #6c91731c, transparent 64%), linear-gradient(130deg, #103b31ef, #061f1be8 72%, #031712ed);
}
.app-shell::before, .app-shell::after { content: none; }
.preview-label { color: #b1c4b4; text-shadow: 0 1px 6px #000; }
.preview-label .preview-actions { border-radius: 24px; background: #03191178; }
.brand-head, .page-head, .page-description, .settings-hero, .smart-intro { text-shadow: 0 2px 10px #001009; }
.brand-name { color: #f4dcaa; text-shadow: 0 2px 4px #00110b, 0 0 20px #e0bc6422; }
.brand-sub { color: #c4d5bd; }
.ornament.brand-watermark {
  opacity: 1; mix-blend-mode: normal;
  filter: sepia(.48) brightness(1.42) contrast(1.12) drop-shadow(0 6px 12px #0009);
  mask-image: radial-gradient(circle closest-side, #000 87%, #000c 93%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 87%, #000c 93%, transparent 100%);
}
.date-pill, .text-button, .page-head .pill { text-shadow: 0 1px 3px #0008; }
.date-pill { background: linear-gradient(135deg, #204535ee, #061f18eb); }
.page-head { min-height: 46px; }
.page-head h1 { color: #f4e8c9; }
.page-description { color: #d4dfcd; text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 0 16px #000; }
.settings-hero .logo {
  opacity: 1; filter: grayscale(1) sepia(.6) brightness(1.6) contrast(1.12) drop-shadow(0 3px 5px #0009);
  mask-image: radial-gradient(circle closest-side, #000 86%, #000c 92%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 86%, #000c 92%, transparent 100%);
}
.card, .mini-stat, .list-summary, .smart-input, .smart-total, .form-total, .order-summary {
  position: relative; isolation: isolate;
  background: var(--ui-surface);
  border-color: #bcc5a62e; border-top-color: #d6d3a65b;
  box-shadow: inset 0 1px 0 #fff3c913, inset 0 -1px 0 #0009, 0 3px 0 -1px #041710, 0 4px 0 -1px #c3ad6342, 0 16px 30px -12px #000d;
}
/* A quiet lens reflection and a light lip give lower cards their own depth. */
.card:not(.profit-card)::before, .mini-stat::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 250px 160px at 118% 118%, transparent 62%, #e0c17e12 63%, #e0c17e20 63.5%, transparent 65%), radial-gradient(ellipse at 0 100%, #e3bc6b08, transparent 58%);
}
.card:not(.profit-card):nth-of-type(even)::before {
  background: radial-gradient(ellipse 260px 160px at -23% 25%, transparent 62%, #8bb7a016 63%, #e6d1a013 63.7%, transparent 65%), radial-gradient(ellipse at 100% 0, #e3bc6b0c, transparent 62%);
}
.profit-card {
  --cosmic-profit-shadow: inset 0 1px 0 #fff0bf36, inset 0 -2px 0 #00130ee6, 0 5px 0 -1px #061f16, 0 6px 0 -1px #c3a15d6e, 0 20px 36px -10px #000b;
  background: radial-gradient(ellipse at var(--ui-light-x, 15%) var(--ui-light-y, 0%), #e6d7a327, transparent 70%), linear-gradient(128deg, #2b5848f5, #123e30f2 50%, #06291ff2);
  border-top-color: #efdaad8c;
  box-shadow: var(--cosmic-profit-shadow);
  animation: cosmos-hero-rim 26s steps(520) infinite;
}
.quick-button { background: linear-gradient(120deg, #746846b8, #224b38ed 57%, #123126f2); }
.quick-button.secondary { background: linear-gradient(135deg, #234e3ded, #0c2a22f2); }
.smart-entry { background: linear-gradient(110deg, #16382ad9, #041d15ed); border-color: #c4b57a52; }
.record { border-color: #d3cdb31a; }
.record-symbol { border-color: #c9be8366; box-shadow: inset 0 1px 1px #fff1bd24, 0 3px 0 #041e16, 0 5px 11px #0006; }
.record-meta, .settings-row small, .stats-three label, .chart-readout, .order-fees-readout { color: #b5c7b7; }
.record-title, .card h2 { color: #f4f1dc; }
.rank-track { background: #000e0ba8; }
.rank-fill { box-shadow: 0 1px 0 #fff0bd3b, 0 0 9px #e6bf6626; }
.chart-readout { background: #02130dcc; }
.bottom-nav {
  background: linear-gradient(130deg, #1f4033f0, #062119f7 74%);
  border-top-color: #e6cc9096;
  box-shadow: inset 0 1px 0 #e9dda511, 0 -4px 25px #e2be4c08, 0 10px 30px #000c;
}
.empty, .info-box { background: #08291fe8; }
.list-date { color: #e2d8b5; text-shadow: 0 2px 6px #000; }
.page-head .text-button { background: #041e15b8; border-radius: 13px; }
.segmented { background: #03150fe8; }
.footnote { color: #b4c4ae; text-shadow: 0 1px 5px #000; }
/* Dialogs and all choice sheets inherit the same scene without obscuring fields. */
dialog, dialog.ui-choice-sheet {
  background: radial-gradient(ellipse at 100% 0, #b18d4530, transparent 55%), linear-gradient(150deg, #133b2ff2, #06271ef0 50%, #041a15f5), url('./assets/blackhole-cinematic-v1.png') center 65% / cover;
  border-top-color: #e4c88c99; box-shadow: inset 0 1px 0 #eadcb826, 0 -12px 50px #000b;
}
dialog::backdrop { background: #001009a1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet-head { border-bottom: 1px solid #cdb98522; margin-bottom: 8px; }
.sheet-grip { background: linear-gradient(90deg, #80714880, #e6cd97aa, #80714880); }
/* Only the 1px rim is illuminated. The mask leaves labels, icons and hit areas clear.
   Keep the hero's existing lens/satin pseudo-elements; light its inset edge instead. */
.quick-button, .smart-entry, .nav-add-circle, .ui-select-trigger, .color-trigger { position: relative; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :is(:where(.card:not(.profit-card)), .mini-stat, .list-summary, .smart-input, .smart-total, .form-total, .order-summary, .bottom-nav, .nav-add-circle, .quick-button, .smart-entry, .date-pill, .ui-select-trigger, .color-trigger, .cosmic-shade)::after {
    content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
    pointer-events: none; z-index: 2; opacity: .82;
    background: conic-gradient(from var(--cosmic-rim-angle, 0deg), transparent 0deg 218deg, #b8994b12 246deg, #d7bb7370 270deg, #fff0c3dc 289deg, #ddbf7860 310deg, transparent 338deg 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cosmos-rim 28s steps(560) infinite;
  }
  .card:not(.profit-card):nth-of-type(even)::after, .mini-stat:nth-of-type(even)::after { animation-delay: -14s; }
  .bottom-nav::after { opacity: .95; padding: 1.25px; animation-duration: 22s; animation-timing-function: steps(440); animation-delay: -7s; }
  .nav-add-circle::after { opacity: .95; padding: 1.25px; animation-duration: 20s; animation-timing-function: steps(400); }
  .quick-button::after, .smart-entry::after, .date-pill::after, .ui-select-trigger::after, .color-trigger::after { opacity: .50; animation-delay: -22s; }
  .cosmic-shade::after { opacity: .34; animation-duration: 34s; animation-timing-function: steps(680); }
  .ui-select-trigger:disabled::after { content: none; }
}
@keyframes cosmos-mist {
  0% { opacity: 0; transform: rotate(6deg) scale(1); }
  35%, 65% { opacity: .8; }
  100% { opacity: 0; transform: rotate(-6deg) scale(1.03); }
}
@keyframes cosmos-rim { from { --cosmic-rim-angle: 0deg; } to { --cosmic-rim-angle: -360deg; } }
@keyframes cosmos-hero-rim {
  0%, 100% { box-shadow: var(--cosmic-profit-shadow), inset 0 3px 5px -3px #ffe6a6a6; }
  25% { box-shadow: var(--cosmic-profit-shadow), inset 3px 0 5px -3px #ffe6a6a6; }
  50% { box-shadow: var(--cosmic-profit-shadow), inset 0 -3px 5px -3px #ffe6a6a6; }
  75% { box-shadow: var(--cosmic-profit-shadow), inset -3px 0 5px -3px #ffe6a6a6; }
}
.ui-background-paused .profit-card,
.ui-background-paused .cosmic-scene::before,
.ui-background-paused .cosmic-scene::after,
.ui-background-paused :is(.card, .mini-stat, .list-summary, .smart-input, .smart-total, .form-total, .order-summary, .bottom-nav, .nav-add-circle, .quick-button, .smart-entry, .date-pill, .ui-select-trigger, .color-trigger, .cosmic-shade)::after { animation-play-state: paused; }
@media (min-width: 600px) {
  .cosmic-scene { top: 24px; bottom: 0; border-radius: 32px 32px 0 0; }
  .app-shell { border-color: #c6b88235; box-shadow: 0 24px 85px #0008; }
}
/* On phone GPUs, keep the metallic rim but avoid dozens of moving masked
   layers alongside the WebGL scene. The launch medallion owns the 3D entrance. */
@media (max-width: 600px), (pointer: coarse) {
  .profit-card { animation: none; transform: none; }
  .bottom-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
  :is(.card, .mini-stat, .list-summary, .smart-input, .smart-total, .form-total, .order-summary, .bottom-nav, .nav-add-circle, .quick-button, .smart-entry, .date-pill, .ui-select-trigger, .color-trigger, .cosmic-shade)::after {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-scene, .cosmic-scene::before, .cosmic-scene::after, .profit-card,
  :is(.card, .mini-stat, .list-summary, .smart-input, .smart-total, .form-total, .order-summary, .bottom-nav, .nav-add-circle, .quick-button, .smart-entry, .date-pill, .ui-select-trigger, .color-trigger, .cosmic-shade)::after { animation: none !important; }
  .cosmic-scene[data-renderer="fallback"]::before, .cosmic-scene[data-renderer="fallback"]::after { opacity: 0; }
  .cosmic-canvas { transition: none; }
}