/* The scene layer owns surfaces, motion and touch feedback; mvp.css owns fields. */
:root {
  --action: #7359e6;
  --muted: #62667f;
  --line: #e8e5f1;
  --panel: rgba(251, 251, 255, .94);
  --spring: cubic-bezier(.2, .8, .2, 1);
}
body {font-family: -apple-system, BlinkMacSystemFont, Onest, sans-serif; -webkit-font-smoothing: antialiased;}
button, a, input, select, textarea {-webkit-tap-highlight-color: transparent;}
button, a.primary, a.secondary {touch-action: manipulation; transition: transform .18s var(--spring), background .2s, box-shadow .2s;}
button:active, a.primary:active, a.secondary:active {transform: scale(.97);}
button:disabled {transform: none;}
.topbar {background: rgba(249, 250, 255, .9); border-radius: 24px; border: 1px solid #ffffffa8; box-shadow: 0 16px 50px #090a2726;}
.environment-badge {border-radius: 99px; background: #ece6ff; color: #6c5293;}
.account-chip {border-radius: 99px; box-shadow: 0 2px 8px #31296108;}
.rail {background: rgba(249, 250, 255, .94); border: 1px solid #ffffffb0; border-radius: 24px; box-shadow: 0 16px 50px #090a272b;}
.rail button {border-radius: 15px; transition: background .25s, color .25s, transform .18s;}
.rail button[aria-current=page] {background: linear-gradient(140deg, #eee7ff, #e1dcff); color: #6345ca; box-shadow: inset 0 1px 0 #fff, 0 4px 10px #6c4cce12;}
.rail-label {display: none;}
#panel, #panel.library-wide {border-radius: 30px; padding: 30px; border: 1px solid #ffffffbd; box-shadow: 0 24px 90px #0c12373b, inset 0 1px 0 #fff;}
#panel {width: min(520px, 44vw);}
#panel.library-wide {width: min(660px, 50vw);}
#panel h1 {font-size: clamp(29px, 2.5vw, 36px); font-weight: 720; letter-spacing: -.045em; line-height: 1.08;}
#panel h2 {font-size: 18px; font-weight: 650; letter-spacing: -.025em;}
#panel h3 {letter-spacing: -.015em;}
.eyebrow {font-size: 9px; font-weight: 700; letter-spacing: .16em; color: #7b679c;}
.lead {font-size: 14px; line-height: 1.65;}
.section, .report-card {border-radius: 21px; border-color: #ece9f4; box-shadow: 0 3px 12px #30284b04;}
.primary {background: linear-gradient(135deg, #8b6cf0, #6c4bd5); border-radius: 16px; min-height: 48px; box-shadow: 0 7px 18px #7359e630, inset 0 1px 0 #ffffff29;}
.primary:hover {box-shadow: 0 9px 24px #7359e645;}
.secondary, .danger {border-radius: 16px; min-height: 48px;}
.pill {border-radius: 99px; padding: 5px 10px; font-weight: 600;}
.section.tinted {background: linear-gradient(125deg, #f3efff, #eeebfb);}
.filters {gap: 7px;}
.filter {border-radius: 99px; padding: 9px 13px;}
.filter[aria-pressed=true] {box-shadow: 0 3px 9px #7258ca13;}
.report-card {transition: transform .2s var(--spring), border-color .2s, box-shadow .2s;}
.report-card:hover {transform: translateY(-2px); box-shadow: 0 10px 25px #65578c12;}
.report-card:active {transform: scale(.99);}
.metric {border-radius: 15px; background: linear-gradient(120deg, #f4f1fc, #f8f8fc); border: 1px solid #efeaf7;}
.metric strong {font-variant-numeric: tabular-nums;}
.pill.ready:before {content: '✓'; margin-right: 5px;}
.report-card h3 {overflow-wrap: anywhere;}
.world-emblem {height: 108px; width: 108px; margin: 0 auto 24px; border-radius: 34px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #d8fbf3, #a6a3ed 55%, #7558ba); box-shadow: inset 0 1px 2px #ffffffc0, inset -8px -9px 26px #5c3d9138, 0 18px 36px #7759bc28;}
.world-emblem > span {color: #fff; font-size: 58px; text-shadow: 0 2px 22px #ffffff8c; animation: emblem-breathe 4s ease-in-out infinite;}
.world-emblem i {position: absolute; height: 5px; width: 5px; border-radius: 50%; background: #fff; right: 20px; top: 19px; box-shadow: 0 0 12px #fff;}
.world-emblem i:last-child {width: 3px; height: 3px; left: 20px; bottom: 20px; top: auto;}
body[data-scene=auth] #panel {text-align: center;}
body[data-scene=auth] .rail {display: none;}
body[data-scene=auth] .journey-panel {opacity: 0; pointer-events: none;}
body[data-scene=auth] #panel .lead {max-width: 340px; margin: 0 auto 20px;}
.auth-benefits {display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 24px;}
.auth-benefits span {font-size: 10px; color: #716189; background: #efeaf9; border: 1px solid #e5dbf7; padding: 7px 10px; border-radius: 99px;}
.auth-divider {display: flex; align-items: center; gap: 12px; color: #8a8396; font-size: 10px; margin: 0 0 18px;}
.auth-divider:before, .auth-divider:after {content: ''; flex: 1; height: 1px; background: #e4deed;}
.provider {min-height: 58px; border-radius: 18px; padding: 14px; gap: 10px; box-shadow: 0 3px 10px #30284b05;}
.provider:hover {background: #f5f1ff; border-color: #cbbdf3; transform: translateY(-2px);}
.provider img {width: 26px; height: 26px;}
.provider small {color: #a29ab1; font-size: 15px;}
.provider[aria-busy=true] {background: #ece5fc; border-color: #bea9f3;}
.auth-feedback {font-size: 12px; color: #786994; text-align: center; min-height: 10px; margin-top: 12px;}
.stub-note {border-radius: 17px; padding: 14px 16px; background: #eeebf74d; border: 1px solid #e7e0f0; margin: 12px 0 18px; text-align: left;}
.stub-note p {margin: 7px 0 0; font-size: 11px; line-height: 1.55;}
.auth-trust {display: flex; justify-content: center; gap: 10px; text-align: left; font-size: 10px; line-height: 1.6; color: #8b8297;}
.auth-trust .nav-icon {width: 17px; height: 17px; margin-top: 3px;}
.menu-hero {background: radial-gradient(circle at 95% 0, #bde9e6aa, transparent 50%), linear-gradient(135deg, #f0e9ff, #eae9fb); border: 1px solid #ddd4f3; border-radius: 24px; padding: 23px; position: relative; overflow: hidden; margin-bottom: 20px;}
.menu-hero h1 {margin-top: 8px!important;}
.menu-hero .lead {font-size: 12px; margin-bottom: 17px;}
.menu-stats {display: flex; align-items: center; gap: 24px; border-top: 1px solid #cdc5e780; padding-top: 17px;}
.menu-stats strong {display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.04em;}
.menu-stats span {font-size: 10px; color: #81768f;}
.menu-stats > i {height: 28px; width: 1px; background: #cdc5e7;}
.menu-tiles {display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 15px 0 20px;}
.menu-tile {background: #fff; border: 1px solid #ebe5f5; border-radius: 21px; text-align: left; padding: 17px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 15px #44345d06; color: #39314d;}
.menu-tile:hover {border-color: #d3c3f4; transform: translateY(-2px);}
.menu-tile .tile-icon {display: grid; place-items: center; width: 39px; height: 39px; border-radius: 14px; background: #eee7fc; color: #8661cc;}
.menu-tile:nth-child(2) .tile-icon {background: #e5f4f1; color: #5c9d8e;}
.menu-tile:nth-child(3) .tile-icon {background: #fdf0de; color: #b69460;}
.menu-tile:nth-child(4) .tile-icon {background: #edf0fa; color: #8192b8;}
.menu-tile strong {font-size: 13px;}
.menu-tile small {font-size: 10px; color: #93849f; line-height: 1.45;}
.next-step {display: flex; gap: 13px; align-items: center; margin: 18px 0; padding: 17px; border-radius: 20px; background: #fff; border: 1px solid #e8e2f1;}
.next-step > span {display: grid; place-items: center; height: 34px; width: 34px; flex: none; border-radius: 12px; background: #e9f2ef; color: #71a08b; font-size: 15px;}
.next-step strong {display: block; font-size: 12px;}
.next-step p {font-size: 11px; margin: 5px 0 0; color: #8b8196;}
.journey-panel {border-radius: 25px; background: rgba(250, 251, 255, .91); transition: opacity .35s;}
.journey-panel li.done > span {font-size: 0;}
.journey-panel li.done > span:after {content: '✓'; font-size: 13px;}
.processing-orbit {width: 110px; height: 110px; margin: 24px auto; position: relative; display: grid; place-items: center; color: #957ad7; font-size: 37px;}
.processing-orbit:before, .processing-orbit:after {content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #d6c6f4;}
.processing-orbit:after {inset: 9px; border: 2px solid #bfa6ee; border-left-color: transparent; border-bottom-color: transparent; animation: spin 2s linear infinite;}
.process-stages {display: grid; gap: 9px; margin: 22px 0; font-size: 12px; color: #897599;}
.process-stages span {display: flex; gap: 9px; align-items: center;}
.process-stages span:before {content: ''; width: 5px; height: 5px; border-radius: 50%; background: #bba6df;}
.photo-preview {height: 210px; border-radius: 18px; border: 1px solid #e8e2f1;}
.upload-zone {position: relative; cursor: pointer; padding: 30px 18px; border-radius: 23px; background: linear-gradient(135deg, #f4efff, #f0f6f8); border-color: #c9b8e6;}
.upload-zone input {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0;}
.upload-zone:focus-within {outline: 3px solid #b7a5ff; outline-offset: 3px;}
.upload-zone b {overflow-wrap: anywhere;}
.photo-picker-action {display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 14px; color: #7359e6; background: #fff; border: 1px solid #e3d9f4; box-shadow: 0 4px 14px #7359e60d; font-size: 12px; font-weight: 600;}
.upload-zone:before {content: '+'; display: grid; place-items: center; width: 48px; height: 48px; font-size: 26px; color: #987ac4; border-radius: 17px; background: #fff9; margin: 0 auto 13px;}
.plan {border-radius: 23px; padding: 22px 18px;}
.plan.featured {background: radial-gradient(circle at 100% 0, #dbf5ee, transparent 70%), #f2edff;}
dialog {border-radius: 30px; background: #fafbfffa; padding: 32px;}
dialog[open] {animation: sheet-in .3s var(--spring);}
dialog::backdrop {background: #0f163e82; backdrop-filter: blur(8px);}
#toast {border-radius: 99px; background: #212038e8; border: 1px solid #ffffff26; box-shadow: 0 12px 38px #05071c52;}
@keyframes emblem-breathe {50% {transform: scale(1.07); opacity: .85;}}
@keyframes sheet-in {from {opacity: 0; transform: translateY(20px) scale(.98);} to {opacity: 1; transform: translateY(0) scale(1);}}
@media (min-width: 861px) and (max-height: 800px) {
  .world-emblem {width: 78px; height: 78px; border-radius: 26px; margin-bottom: 17px;}
  .world-emblem > span {font-size: 45px;}
  body[data-scene=auth] .auth-benefits {margin-bottom: 16px;}
}
@media (max-width: 860px) {
  .topbar {border-radius: 20px; margin: max(12px, env(safe-area-inset-top)) 12px 0; top: max(10px, env(safe-area-inset-top));}
  #panel, #panel.library-wide {width: auto; padding: 25px 22px; border-radius: 29px; margin: 235px 12px 18px; scroll-margin-top: 90px;}
  #panel h1 {font-size: 32px;}
  body[data-scene=auth] #panel {margin-top: 210px;}
  .world-emblem {height: 76px; width: 76px; border-radius: 25px; margin-bottom: 21px;}
  .world-emblem > span {font-size: 44px;}
  .provider {padding: 13px 11px; gap: 9px; font-size: 12px;}
  .rail {bottom: max(10px, env(safe-area-inset-bottom)); height: 69px; border-radius: 25px; padding: 6px 7px;}
  .rail button {width: 57px; height: 55px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border-radius: 18px;}
  .rail-label {display: block; font-size: 8px; line-height: 1; font-weight: 550;}
  .rail .nav-icon {width: 21px; height: 21px;}
  .rail i {right: 7px; top: 1px;}
  .scene-controls {border-radius: 99px; top: 240px;}
  .menu-hero {padding: 21px 18px;}
  .menu-tile {padding: 15px;}
  .menu-tile strong {font-size: 12px;}
  .footer {margin-bottom: 15px;}
  .footer nav {gap: 12px;}
  #toast {bottom: calc(90px + env(safe-area-inset-bottom)); border-radius: 19px;}
  dialog {padding: 28px 22px; border-radius: 28px;}
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {animation: none!important; transition: none!important; scroll-behavior: auto!important;}
  button:active, .report-card:active, .menu-tile:hover, .provider:hover {transform: none;}
}