/* Original project art replaces the ten reference-derived raster materials.
   Source mapping: docs/design/original-mystic-20261016/asset-map.json. */
:root.mystic-luxury { --bg-space:#010b15; --text-main:#f8fdfe; --text-muted:#b8c4c9; --gold-primary:#cfb179; --reference-foil:linear-gradient(135deg,#ecc88a 0%,#b3956a 45%,#7d5c32 100%); --reference-float:0 25px 60px rgba(0,0,0,.85),0 0 25px rgba(179,149,106,.15); }
.account-page { background:#010b15; }
.account-page::before { background:linear-gradient(180deg,#010b15 0%,#010d19 65%,#020f1a 100%); }
.account-page::after { opacity:1; background:url('./assets/scene-velvet.webp') center bottom/100% auto no-repeat; mask-image:linear-gradient(transparent calc(100% - 34vw),#000 calc(100% - 27vw)),linear-gradient(90deg,#000,transparent 7%,transparent 93%,#000); mask-composite:intersect; -webkit-mask-composite:source-in; }
.card-stage { --scene-rx:0deg; --scene-ry:0deg; height:440px; }
.scene-halo { opacity:.22; width:440px; height:auto; top:43%; mask-image:radial-gradient(ellipse,#000 45%,transparent 71%); }
.account-page button.scene-card { box-sizing:border-box; border:0; border-radius:24px; padding:2px; width:235px; height:auto; aspect-ratio:2/3; margin:0; rotate:none; box-shadow:inset 0 1px 1px rgba(255,240,200,.45),1px 2px 1px #99886a,3px 5px 2px #413929,var(--reference-float); background:var(--reference-foil); }
.account-page button.scene-card:not(:disabled):hover { background:var(--reference-foil); box-shadow:inset 0 1px 1px rgba(255,240,200,.45),1px 2px 1px #99886a,3px 5px 2px #413929,var(--reference-float); }
.scene-portrait { inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:22px; translate:none; image-rendering:auto; }
.scene-glint { display:block; inset:0; border-radius:24px; background:none; box-shadow:inset 0 1px 1px rgba(255,240,200,.45); }
.card-corner,.nameplate-rays { display:none; }
.scene-nameplate { display:grid; place-items:center; width:64%; height:auto; aspect-ratio:330/178; min-height:0; bottom:-15px; padding:0 5% 5%; border:0; outline:0; background:url('./assets/original-mystic/original-nameplate.svg') center/100% 100% no-repeat; box-shadow:3px 7px 8px #0008; translate:-50% 0 12px; }
.scene-nameplate::before { content:""; position:absolute; inset:13% 7% 19%; background:#000; }
.scene-nameplate::after { content:none; }
.nameplate-title { position:relative; z-index:1; color:#f8fdfe; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(12px,4.2vw,21px); line-height:1; letter-spacing:-.035em; white-space:nowrap; }
.card-inscription { position:absolute; z-index:1; top:40%; height:25%; width:3.6%; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; background:#fff; color:#8c794e; font-family:'ULYA Manrope',sans-serif; font-size:clamp(2.8px,.95vw,4px); line-height:1; }
.inscription-left { left:2px; transform:rotate(180deg); }.inscription-right { right:2px; }
.scene-back { top:67px; width:165px; height:325px; border:1px solid transparent; border-radius:24px; background:linear-gradient(#020506,#020506) padding-box,var(--reference-foil) border-box; box-shadow:inset 0 1px 1px rgba(255,240,200,.45),0 12px 25px #000a; rotate:none; }
.scene-back-left { left:calc(50% - 190px); }.scene-back-right { right:calc(50% - 190px); }
.scene-back img { width:auto; height:100%; object-fit:fill; opacity:1; inset:0 0 0 auto; filter:none; transform:none; }
.scene-back-left,.scene-back-right { transform:none; }
.scene-back-left img { inset:0 auto 0 0; transform:none; filter:none; }
.scene-back::before,.scene-back::after { content:"КАРТА ДНЯ"; position:absolute; z-index:1; width:35px; height:7px; background:#030303; color:#a48a61; font:3.5px/7px 'ULYA Manrope',sans-serif; text-align:center; letter-spacing:0; }
.scene-back-left::before { left:1px; top:1%; }.scene-back-left::after { left:1px; bottom:4.5%; }
.scene-back-right::before { right:1px; top:0; }.scene-back-right::after { right:1px; bottom:5.2%; }
:root[data-theme] .account-page #scene-heading { color:#f8fdfe; font-family:'Cormorant Garamond',Georgia,serif; font-size:40px; font-weight:500; line-height:.98; letter-spacing:-.035em; max-width:290px; margin-bottom:13px; }
.scene-art-label { font-size:8px; margin:0 0 10px; color:#8c938c; }
.scene-invitation { color:#cfb179; font-size:13px; max-width:280px; margin-inline:auto; }
.account-page .compose-glass { border-color:rgba(179,149,106,.26); background:rgba(10,14,26,.65); box-shadow:inset 0 1px 0 rgba(255,240,200,.07),0 5px 16px rgba(0,0,0,.16); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.account-page .compose-glass #send { position:relative; background:#0b1114; color:#fff5d5; border:0; box-shadow:0 2px 7px #0009; }
.compose-glass #send svg { filter:drop-shadow(0 1px 2px #000); stroke-width:2; }
.space-dock { gap:22px; max-width:360px; height:90px; bottom:10px; }
.space-dock .nav-medallion { --medallion-art:none; --medallion-x:0px; --medallion-y:0px; box-sizing:border-box; width:62px; height:62px; border:1px solid transparent; border-radius:50%; background:linear-gradient(#080d15,#080d15) padding-box,var(--reference-foil) border-box; filter:none; box-shadow:0 5px 10px #0005,inset 0 1px 1px rgba(255,240,200,.25); }
.space-dock button:nth-child(2) .nav-medallion { --medallion-art:none; --medallion-x:0px; --medallion-y:0px; }
.space-dock button:nth-child(3) .nav-medallion { --medallion-art:url('./assets/original-mystic/original-nav-profile.svg'); --medallion-x:0px; --medallion-y:0px; }
/* Optical centers of the silver/gold artwork differ from their crop centers. */
.space-dock .nav-medallion::before { content:""; display:block; inset:0; border:0; border-radius:50%; background:var(--medallion-art) calc(50% + var(--medallion-x)) calc(50% + var(--medallion-y))/contain no-repeat; box-shadow:none; filter:none; }
.space-dock .nav-medallion::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle,rgba(0,0,0,.23),rgba(0,0,0,.08) 48%,transparent 73%); pointer-events:none; }
.space-dock .nav-medallion svg { display:none; }
.space-dock button { color:#c2c2bd; font-size:12px; }
.space-dock button[aria-current] .nav-medallion { filter:none; box-shadow:0 5px 10px #0005,0 0 0 2px rgba(236,200,138,.2),inset 0 1px 1px rgba(255,240,200,.45); }
.space-dock button[aria-current] .nav-medallion::before { filter:none; }
.space-dock button[aria-current] { color:#dfc482; }
.space-dock::before { background:linear-gradient(transparent,#010b15 24%); width:100vw; height:144px; }
.account-page :is(.account-primary,.widget-action):not(#send):not(.scene-card):not(.combo-action) { background:#050a09 url('./assets/scene-cta.svg') center/cover; border-color:#9d824b; font-size:17px; text-shadow:0 2px 4px #000,0 -2px 4px #000; }
.account-page :is(input:not([type="checkbox"]),select,textarea:not(#question)) { background:rgba(26,28,22,.8); border-radius:999px; border-color:#a58c4e66; }
.profile-emblem::before { background-image:url('./assets/scene-acanthus.svg'); background-size:cover; opacity:1; mask-image:radial-gradient(ellipse,#000 52%,transparent 73%); }
.account-page .profile-menu> :is(button,a) { border-color:#a58d56; background:rgba(32,30,23,.83); border-radius:999px; }
.account-page .deck-emblem::before { background-image:url('./assets/scene-acanthus.svg'); opacity:1; mask-image:radial-gradient(ellipse,#000 43%,transparent 74%); }
@media(min-width:900px) {
  .card-stage { height:480px; }
  .account-page button.scene-card { width:258px; height:auto; }
  .scene-back { top:71px; height:359px; width:182px; }
  .scene-back-left { left:calc(50% - 215px); }.scene-back-right { right:calc(50% - 215px); }
  #workspace:has(#space-scene:not([hidden]))>.conversation-layout { margin-top:-480px; }
}
@media(max-width:760px) {
  .account-page .wordmark>span { font-size:22px; }
  .account-page .wordmark small { font-size:8px; }
  .space-scene { padding-top:7px; }
  .card-stage { height:408px; }
  .account-page button.scene-card { width:224px; height:auto; }
  .scene-back { top:54px; width:160px; height:311px; }
  .scene-back-left { left:calc(50% - 189px); }.scene-back-right { right:calc(50% - 189px); }
  .scene-halo { width:380px; height:auto; }
  :root[data-theme] .account-page #scene-heading { font-size:37px; max-width:290px; margin-bottom:10px; }
  .conversation-layout { margin-top:19px; }
  .account-page #dialogue-heading { margin-bottom:6px; font-size:10px; }
  .account-page .question-label { font-size:10px; margin-bottom:5px; }
  .account-page #dialogue-heading,.account-page #send-form .question-label { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
  .account-page #question { min-height:40px; padding-block:7px; }
  .account-page .composer-footer { padding-top:3px; }
  .scene-invitation { font-size:12px; }
}
@media(max-height:780px) and (max-width:760px) {
  .account-page:has(#workspace:not([hidden])) .account-information { top:47px; right:17px; }
  .account-information summary { font-size:9px;line-height:1.2;padding-block:3px; }
  .card-stage { height:282px; }
  .account-page button.scene-card { width:164px; height:auto; }
  .scene-back { width:123px; height:229px; top:22px; }
  .scene-back-left { left:calc(50% - 155px); }.scene-back-right { right:calc(50% - 155px); }
  .scene-nameplate { bottom:-11px; }
  :root[data-theme] .account-page #scene-heading { font-size:28px; }
  .scene-art-label { margin:7px 0 8px; font-size:7px; }
  .scene-invitation { font-size:10px; }
  .conversation-layout { margin-top:15px; }
}
/* Static relief preserves sharp artwork without pointer/tilt animation layers. */
.account-page button.scene-card,.account-page button.scene-card:not(:disabled):hover { transform:none; backface-visibility:visible; transition:box-shadow 200ms; }
.scene-back { translate:none; transition:none; }
.scene-nameplate { translate:-50% 0; transition:none; }
.nav-medallion { transform:none; transition:none; }
@media(prefers-reduced-motion:reduce) {
  .account-page .card-stage *,.space-dock .nav-medallion { animation:none!important; transition:none!important; }
}
/* Readable Cyrillic roles, with no extra raster/font assets or font request. */
.nameplate-title { font-size:clamp(16px,4.8vw,22px); font-weight:600; line-height:1.05; letter-spacing:-.025em; }
.account-page .message p { font-size:16px; line-height:1.65; }
@media(max-width:760px) {
  .account-page .wordmark small { font-size:11px; letter-spacing:.02em; }
  .test-label { font-size:12px; }
  .account-information summary { font-size:12px; line-height:1.4; }
  .card-stage { height:376px; align-items:start; padding-top:36px; }
  .account-page button.scene-card { width:216px; }
  .scene-art-label { font-size:11px; line-height:1.5; color:#b8c4c9; }
  .scene-invitation { font-size:14px; line-height:1.5; max-width:310px; }
  .account-page #question { font-size:16px; line-height:1.5; }
  .account-page #question::placeholder { color:#b8c4c9; opacity:1; }
  .account-page .composer-footer { flex-wrap:wrap; gap:4px 10px; padding-inline:0; align-items:center; }
  .account-page .composer-footer:not(:has(.voice-details[open])) { flex-wrap:nowrap; }
  .account-page .composer-footer > label { font-size:12px; color:#b8c4c9; }
  .account-page .composer-footer #tone { font-size:16px; min-height:32px; max-width:115px; }
  .voice-details { font-size:12px; color:#b8c4c9; flex:0 0 auto; margin-left:auto; }
  .voice-details summary { min-height:32px; display:flex; align-items:center; padding:0; }
  .voice-details[open] { flex-basis:100%; }
  .voice-composer p { font-size:14px; line-height:1.6; }
  .account-page #feedback { font-size:12px; line-height:1.5; color:#b8c4c9; margin-inline:0; }
  .account-page :is(.widget-lead,.journey-note,.step-hint,.step-user-label,#step-return-copy,#step-empty,.account-public-checkout p,.account-settings > p,.account-art-credit p) { font-size:16px; line-height:1.6; }
  .account-page .space-dock button { font-size:12px; line-height:1.4; font-weight:500; }
  .account-page :is(.account-primary,.widget-action):not(#send):not(.scene-card):not(.combo-action) { font-size:18px; }
}
@media(max-height:780px) and (max-width:760px) {
  .card-stage { height:282px; padding-top:18px; }
  .account-page button.scene-card { width:164px; }
  .scene-art-label { font-size:11px; margin-block:8px; }
  .scene-invitation { font-size:14px; }
  :root[data-theme] .account-page #scene-heading { font-size:30px; }
}
@media(max-width:360px) {
  .account-page .topbar,.topbar-actions { gap:8px; }
  .account-page .wordmark small { white-space:nowrap; }
  .test-label { white-space:nowrap; font-size:11px; }
  .account-page:has(#workspace:not([hidden])) .account-information { top:70px; }
  .space-scene { padding-top:19px; }
}
:root.mystic-luxury .journey-card-art .card-illustration[data-pilot-art] { background-image:none; background-color:#010b15; }
:root.mystic-luxury .journey-card-art .mystic-face-image { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
:root.mystic-luxury .journey-card-art .card-illustration[data-pilot-art] svg { display:none; }
:root.mystic-luxury .journey-card-art:has([data-pilot-art]) { container-type:inline-size; aspect-ratio:2/3; height:auto; }
:root.mystic-luxury .journey-card-art .card-illustration[data-pilot-art]::after { content:attr(data-card-title-lines); position:absolute; left:22%; right:22%; bottom:4.5%; height:9%; display:grid; place-items:center; color:#f8fdfe; font:600 clamp(12px,6cqw,24px)/1.05 'Cormorant Garamond',Georgia,serif; text-align:center; letter-spacing:0; white-space:pre-line; }
:root.mystic-luxury .journey-cards h4 { font-family:'Cormorant Garamond',Georgia,serif; color:#f8fdfe; font-weight:600; letter-spacing:0; }
@media(max-width:600px) {
  :root.mystic-luxury .journey-cards { grid-template-columns:minmax(0,1fr); }
  :root.mystic-luxury .journey-cards li:last-child { width:100%; justify-self:stretch; grid-column:auto; }
  :root.mystic-luxury .journey-cards .journey-card-art:has([data-pilot-art]) { width:100%; max-width:none; margin-inline:0; }
}

/* Compact interaction layer over the approved Mystic canon. Scene materials,
   card geometry, material tilt and the fixed medallion dock stay in that canon. */
.account-page #messages {
  max-height: clamp(96px,var(--account-transcript-height,45dvh),720px);
  overflow: auto; overscroll-behavior-y: contain; overflow-anchor: none;
  scrollbar-width: thin; scrollbar-color: rgba(179,149,106,.4) transparent;
  scroll-behavior: smooth; scrollbar-gutter: stable; padding-inline: 4px;
}
.account-page #messages:has(.message) { display: flex; flex-direction: column; align-items: flex-start; }
.account-page #messages > .message { flex: 0 0 auto; }
.account-page .message-tone { display: inline-block; margin-left: 10px; color: var(--text-muted); font: 400 12px/1.5 var(--font-sans); letter-spacing: 0; }
.chat-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-heading-row #dialogue-heading { margin: 0; }
.account-page #chat-expand { flex: 0 0 auto; min-height: 44px; padding: 6px 10px; color: var(--gold-primary); border: 0; background: transparent; box-shadow: none; font-size: 13px; }
.account-page #chat-module { scroll-margin-top: 20px; }
.account-page #workspace > #conversation-workspace[data-chat-expanded="true"] { width: 100%; max-width: 960px; margin: 24px auto 0; padding-top: 0; }
.account-page [data-chat-expanded="true"] #messages:has(.message) { height: var(--account-transcript-height); }
.account-page #messages::-webkit-scrollbar { width: 6px; }
.account-page #messages::-webkit-scrollbar-track { background: transparent; }
.account-page #messages::-webkit-scrollbar-thumb { background: rgba(179,149,106,.4); border-radius: 999px; }
.account-page #messages:focus-visible { outline: 2px solid var(--focus-cabinet,#f0ce8d); outline-offset: 4px; }
.account-page #chat-latest {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 8px auto; min-height: 44px; padding: 6px 12px;
  max-width: 100%; background: transparent; color: var(--gold-primary);
  border-color: var(--border-gold); font-size: 13px; box-shadow: none;
}
.chat-latest svg, .compact-fold > summary svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account-page #send-form { scroll-margin-block-end: calc(125px + env(safe-area-inset-bottom)); }
.account-page .compact-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; cursor: pointer; list-style: none; color: var(--gold-primary);
  font-family: var(--font-serif); font-size: clamp(1.5rem,3vw,2.125rem); line-height: 1.25;
}
.compact-fold > summary::-webkit-details-marker { display: none; }
.account-page .compact-fold > summary h2 { margin: 0; font: inherit; color: inherit; }
.compact-fold[open] > summary svg { transform: rotate(180deg); }
.compact-body { padding-block-start: 16px; }
.account-page #personal-section { padding-block: 16px; margin-top: 24px; }
.account-page #interactive-hub { display: block; }
.account-page #interactive-hub:not(:has(.hub-widget:not([hidden]))) { display: none; }
.account-page #interactive-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: start; }
.optional-practices { margin-block: 24px; padding-block: 16px; border-block: 1px solid var(--border-gold); }
.optional-practices:not(:has(#next-step-panel:not([hidden]),#progress-panel:not([hidden]))) { display: none; }
#practices-body :is(.next-step-panel,.progress-panel) { margin-block: 0 16px; border-block: 0; max-width: none; }
@media(max-width:760px) { .account-page #interactive-body { grid-template-columns: minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce) { .account-page #messages { scroll-behavior: auto; } }

/* Dictation is part of the composer, with one editable message draft. */
.account-page .voice-composer { padding-block: 12px 0; margin-top: 0; border: 0; }
.account-page .voice-composer #voice-status { margin: 4px 0 8px; font-size: 14px; line-height: 1.5; }
.voice-capture { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voice-capture canvas { display: block; width: 100%; min-width: 0; height: 40px; flex: 1; }
.voice-time { color: #ecc88a; font-size: 16px; font-variant-numeric: tabular-nums; min-width: 4ch; }
.account-page .voice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-page .voice-actions button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.account-page #voice-stop { border-color: var(--gold-primary); color: #ecc88a; }
.account-page #voice-cancel { border-color: transparent; background: transparent; color: #b8c4c9; }
.account-page .mic-action .stop-symbol { display: none; }
.account-page .mic-action[data-recording="true"] .mic-symbol { display: none; }
.account-page .mic-action[data-recording="true"] .stop-symbol { display: block; fill: currentColor; stroke: none; }
.account-page .mic-action[data-recording="true"] { color: #ecc88a; border-color: var(--gold-primary); }
.account-page :is(.voice-capture,.voice-composer,.voice-actions button)[hidden] { display: none; }

/* Own full back compositions and plate: no pseudo-labels or crop masks. */
.scene-back img,.scene-back-left img { width:100%; height:100%; inset:0; object-fit:fill; }
.scene-back::before,.scene-back::after,.card-inscription { display:none; }
.scene-nameplate::before { content:none; }
.scene-nameplate { padding:0 5%; }

/* These responsive images share the splash's chosen URL, including high-DPR screens. */
.nav-medallion .medallion-image,.send-medallion { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; border-radius:50%; pointer-events:none; }
.compose-glass #send svg { position:relative; }