/* Linh Ung Studio: host controls and synchronized stage treatments. */
:root {
  --studio-bg: #0d111d; --surface: #141a29; --surface-soft: #191f31;
  --stroke: #293044; --ink: #f2f3fc; --dim: #949eb9; --accent: #c6a7ff;
  --mint: #6de4c5; --pink: #f4a2c9; --amber: #f6cf82; --radius: 18px;
}
[hidden] { display: none !important; }
html { min-height: 100%; height: auto; overflow: auto; background: var(--studio-bg); }
body { min-height: 100vh; height: auto; overflow: visible; color: var(--ink); background: radial-gradient(ellipse at 4% 10%,#22223b90,transparent 48%),radial-gradient(ellipse at 99% 80%,#103c3838,transparent 45%),var(--studio-bg); font-size: 14px; line-height: 1.5; }
button,input,textarea,select { font: inherit; }
input,textarea,select { user-select: text; }
button,a,input,textarea,select { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
a { color: inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
button { transition: background .18s,border-color .18s,box-shadow .18s; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon,.hotspot-svg,.gift-svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.studio-topbar { max-width: 1480px; margin: auto; height: 90px; display: flex; align-items: center; gap: 28px; padding: 16px 42px; border-bottom: 1px solid #ffffff0d; }
.studio-brand { display: flex; gap: 13px; align-items: center; text-decoration: none; margin-right: auto; }
.brand-mark { width: 48px; height: 48px; display: grid; place-items: center; background: linear-gradient(145deg,#342c50,#172e32); border: 1px solid #cab1ff40; border-radius: 16px; color: #d6b7ff; box-shadow: 0 0 25px #a778f515; }
.brand-mark .icon { width: 33px; height: 33px; stroke-width: 1.3; }
.studio-brand strong { font-family: 'Noto Serif',Georgia,serif; font-size: 23px; letter-spacing: -.6px; display: flex; align-items: center; gap: 11px; }
.brand-studio { font: 600 9px 'Be Vietnam Pro',sans-serif; letter-spacing: 2px; color: #b4a5d2; border: 1px solid #57466c; padding: 3px 5px; border-radius: 4px; }
.studio-brand small { color: var(--dim); font-size: 11px; display: block; margin-top: 1px; letter-spacing: .4px; }
.topbar-status { display: flex; gap: 16px; align-items: center; font-size: 11px; }
.connection-badge,.subtle-badge { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; color: #b2c0ca; }
.connection-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #6de4c560; }
.connection-badge[data-connected="false"]::before { background: var(--amber); }
.subtle-badge { color: var(--dim); }
.subtle-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 15px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 12px; text-decoration: none; white-space: nowrap; }
.button .icon { width: 16px; height: 16px; }
.button-primary { color: #092820; background: #80e6c9; border-color: #a1f2da; box-shadow: 0 3px 12px #3cd6a410; }
.button-primary:hover { background: #a3f2dc; }
.button-violet { background: #c6acfa; color: #291547; border-color: #dcc7ff; }
.button-violet:hover { background: #dfcdff; }
.button-ghost { background: #ffffff04; border-color: var(--stroke); color: #c8cee1; }
.button-ghost:hover { background: #ffffff0b; border-color: #65708a; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border: 1px solid var(--stroke); border-radius: 10px; background: #ffffff03; color: #b9c1d7; font-size: 23px; }
.icon-button:hover { color: white; background: #ffffff0a; }
.icon-button .icon { width: 16px; height: 16px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; color: var(--accent); font-size: 11px; font-weight: 600; padding: 7px 0; min-height: 30px; white-space: nowrap; }
.text-button:hover { color: white; }
.text-button .icon { width: 14px; height: 14px; }
.studio-workspace { width: 100%; height: auto; max-width: 1400px; margin: 0 auto; padding: 28px 42px 32px; display: grid; grid-template-columns: minmax(290px,.87fr) minmax(0,1.5fr); gap: 42px; align-items: start; }
.preview-column { min-width: 0; position: sticky; top: 22px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 18px; }
.eyebrow { font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: #8e91aa; display: block; margin-bottom: 8px; }
.preview-heading h1 { font-family: 'Noto Serif',Georgia,serif; font-weight: 600; font-size: clamp(21px,2vw,28px); line-height: 1.3; letter-spacing: -.7px; }
.preview-heading h1 span { color: var(--accent); }
.preview-well { position: relative; display: flex; justify-content: center; align-items: center; padding: 13px; border: 1px solid #c6a7ff20; border-radius: 27px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%,#6e448f30,transparent 55%),#111522; box-shadow: 0 16px 60px #00000035; }
.preview-well::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 45px #69519e10; }
.preview-orbit { position: absolute; width: 340px; height: 340px; border: 1px solid #b390e41c; border-radius: 50%; pointer-events: none; }
.orbit-one { top: -200px; left: -170px; }
.orbit-two { bottom: -190px; right: -170px; }
.stage-wrapper { flex: 0 0 auto; width: min(100%,calc((100vh - 245px)*.5625)); height: auto; max-height: none; aspect-ratio: 9/16; border-radius: 17px; border: 1px solid #d6b38285; box-shadow: 0 0 30px #bd7f5720; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 4px; }
.preview-format { color: #8890a7; font-size: 10px; display: flex; align-items: center; gap: 7px; }
.preview-format i { width: 5px; height: 5px; border-radius: 50%; background: #d1b285; }
.preview-footer>div { display: flex; gap: 14px; align-items: center; }
.preview-footer .icon-button { width: 28px; min-width: 28px; height: 28px; border: 0; }
.preview-footer .text-button { color: #a6adc4; font-size: 10px; }
.studio-console { min-width: 0; width: auto; max-height: none; height: auto; overflow: visible; background: none; border: 0; border-radius: 0; padding: 0; gap: 0; display: block; }
.console-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.console-heading .eyebrow { margin-bottom: 7px; }
.console-heading h2 { font-size: 18px; letter-spacing: -.5px; line-height: 1.4; font-weight: 600; }
.console-heading h2 span { font-weight: 400; color: #b8bfd4; }
.session-time { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #a4adc4; font-variant-numeric: tabular-nums; background: #ffffff04; border: 1px solid #ffffff0b; padding: 7px 10px; border-radius: 8px; }
.session-time .icon { width: 13px; height: 13px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 21px; }
.metric { position: relative; padding: 14px 13px 12px; background: linear-gradient(135deg,#ffffff04,transparent),var(--surface); border: 1px solid #ffffff08; border-radius: 13px; overflow: hidden; min-width: 0; }
.metric::after { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 50%; background: currentColor; opacity: .045; top: -20px; right: -20px; }
.metric .icon { width: 17px; height: 17px; display: block; margin-bottom: 9px; }
.metric strong { display: block; color: var(--ink); font-size: 23px; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric span { display: block; color: #a3acc4; font-size: 9px; margin-top: 6px; }
.metric-amber { color: var(--amber); }.metric-pink { color: var(--pink); }.metric-mint { color: var(--mint); }.metric-violet { color: var(--accent); }
.studio-tabs { display: flex; gap: 2px; padding: 5px; background: #171b2a; border: 1px solid #ffffff07; border-radius: 13px; margin-bottom: 22px; }
.studio-tabs button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 39px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #8f99b3; font-size: 11px; font-weight: 500; }
.studio-tabs .icon { width: 16px; height: 16px; }
.studio-tabs button[aria-selected=true],.studio-tabs button.active { background: #2b293e; color: #e0cffb; border-color: #71608245; box-shadow: 0 2px 6px #0002; }
.studio-tab-panel { min-height: 390px; animation: panelReveal .2s ease; }
@keyframes panelReveal { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 500; color: #c8cfe1; }
.section-label>span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.section-label .icon { width: 15px; height: 15px; color: var(--accent); }
.connection-card { padding: 15px 17px 10px; border: 1px solid #314440; background: linear-gradient(105deg,#18332c37,transparent),var(--surface); border-radius: 15px; margin-bottom: 22px; }
.mode-badge { font-size: 9px; color: #bac4cc; background: #ffffff06; border: 1px solid #ffffff10; border-radius: 5px; padding: 3px 6px; }
.input-action { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.dock-input,select,textarea { background: #0f1421; border: 1px solid #30374c; border-radius: 9px; color: #e2e5f1; padding: 10px 12px; font-size: 11px; outline: none; min-width: 0; width: 100%; max-width: 100%; }
.dock-input::placeholder,textarea::placeholder { color: #79849f; opacity: 1; }
.dock-input:hover,select:hover,textarea:hover { border-color: #576079; }
.dock-input:focus,select:focus,textarea:focus { border-color: #a68acb; }
select { min-height: 40px; color-scheme: dark; }
textarea { resize: vertical; min-height: 85px; line-height: 1.7; }
.input-action .dock-input { flex: 1; }
.input-action .button { min-height: 39px; }
.input-action .icon-button { width: 31px; min-width: 31px; height: 36px; border-color: transparent; color: #879790; }
.connection-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; color: #8c9d9b; font-size: 9px; }
.connection-footer>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-footer .text-button { font-size: 9px; color: #93d9c0; }
.connection-footer .active-toggle { color: #f4ce8e; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
h3 { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.section-heading p,.settings-row p { font-size: 10px; color: var(--dim); margin-top: 5px; }
.key-hint { font-size: 9px; color: #747f9a; border: 1px solid #2d3345; border-radius: 5px; padding: 3px 7px; }
.identity-fields { display: grid; grid-template-columns: 1fr 1.55fr; gap: 10px; margin-bottom: 13px; }
.identity-fields label,.settings-card>label,.form-row>label { font-size: 9px; color: #9aa4bd; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.identity-fields input { padding: 9px 11px; font-size: 10px; }
.ritual-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.ritual-button { --ritual: #c6a7ff; background: linear-gradient(145deg,color-mix(in srgb,var(--ritual) 7%,#151a28),#151a28); border: 1px solid color-mix(in srgb,var(--ritual) 18%,#242939); border-radius: 13px; min-width: 0; padding: 12px 10px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; position: relative; color: var(--ritual); min-height: 76px; }
.ritual-button:hover { border-color: var(--ritual); box-shadow: 0 0 16px color-mix(in srgb,var(--ritual) 9%,transparent); }
.ritual-button:active { transform: translateY(1px); }
.ritual-icon { width: 30px; height: 34px; display: grid; place-items: center; }
.ritual-icon .icon { width: 25px; height: 25px; stroke-width: 1.35; }
.ritual-copy { min-width: 0; }
.ritual-copy strong { font-size: 10px; font-weight: 600; display: block; color: #e9eaf4; white-space: nowrap; }
.ritual-copy small { font-size: 8px; display: block; margin-top: 4px; color: #929db8; line-height: 1.4; }
kbd { font-family: inherit; font-size: 8px; color: #838da6; border: 1px solid #ffffff0e; border-radius: 4px; width: 15px; height: 17px; display: inline-flex; align-items: center; justify-content: center; }
.ritual-button kbd { position: absolute; right: 6px; top: 5px; opacity: .5; }
.amber { --ritual: #f6c376; }.rose { --ritual: #ee9ab9; }.mint { --ritual: #7dddc4; }.sky { --ritual: #85beec; }.violet { --ritual: #baa1ee; }.pink { --ritual: #e7a1de; }
.grand-button { width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 13px; text-align: left; padding: 12px 17px; min-height: 65px; color: #f8dfaf; background: linear-gradient(105deg,#46302c,#38243d 65%,#292239); border: 1px solid #a878615c; border-radius: 13px; position: relative; overflow: hidden; }
.grand-button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,#ffe6ae0a,transparent); transform: translateX(-100%); animation: grandShimmer 9s ease-in-out infinite; pointer-events: none; }
@keyframes grandShimmer { 0%,70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.grand-button:hover { border-color: #efc491; }
.grand-button-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #f9d89310; }
.grand-button-icon .icon { width: 25px; height: 25px; }
.grand-button strong { display: block; font-size: 12px; font-weight: 600; }
.grand-button small { font-size: 8px; color: #c0a4ad; margin-top: 4px; display: block; }
.grand-button kbd { margin-left: auto; color: #d0b6bd; }
.grand-button>.icon { width: 16px; color: #f8dcaf; }
.console-bottom-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-top: 21px; }
.goal-summary,.leaderboard-card { padding: 15px; border: 1px solid #ffffff0a; border-radius: 14px; background: #141a2870; min-width: 0; }
.small-tag { color: #818ba6; font-size: 7px; letter-spacing: .7px; white-space: nowrap; }
.goal-summary h3 { font-size: 11px; font-weight: 500; margin-top: 17px; color: #d2d2e4; }
.progress-track,.stage-goal-track { height: 5px; border-radius: 20px; overflow: hidden; background: #2b2b41; }
.progress-track { margin-top: 12px; }
.progress-track>div,.stage-goal-track>div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ab86ed,#eba8d6,#f3ca91); transition: width .6s ease; box-shadow: 0 0 10px #dd9dea40; }
.goal-summary-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9px; color: #9ba5bf; margin-top: 7px; }
.goal-summary-footer .text-button { font-size: 8px; }
.goal-summary-footer .icon { width: 12px; }
#studioLeaderboard { margin-top: 10px; }
.studio-leader-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 9px; border-bottom: 1px solid #ffffff05; }
.studio-leader-item:last-child { border: 0; }
.studio-leader-rank { width: 18px; height: 18px; border-radius: 5px; background: #cfa5ff12; color: #c8a7f6; display: grid; place-items: center; font-size: 8px; flex: 0 0 auto; }
.studio-leader-item:first-child .studio-leader-rank { background: #e6b46019; color: #ebce99; }
.studio-leader-name { color: #bdc5db; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-leader-merit { margin-left: auto; color: #e1c496; font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaderboard-empty { font-size: 10px; color: #8b95af; padding: 15px 0; line-height: 1.7; }
.console-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #ffffff08; margin-top: 20px; padding-top: 13px; color: #6f7a95; font-size: 8px; }
.console-footer>span:first-child { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.console-footer .icon { width: 14px; height: 14px; color: #887a9f; }
.version-label { border: 1px solid #36364a; border-radius: 3px; font-size: 7px; padding: 0 3px; }
#studioEventNotice { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 19px; margin-bottom: 22px; }
.theme-option { position: relative; padding: 7px 7px 13px; border: 1px solid #33354e; border-radius: 14px; background: #171b2b; color: #d9d9ec; text-align: left; min-width: 0; }
.theme-option[aria-pressed=true] { border-color: #c3a2f4; box-shadow: 0 0 0 2px #af8bdf15; }
.theme-preview { display: grid; place-items: center; height: 87px; border-radius: 9px; position: relative; overflow: hidden; color: #d7b5fb; background: radial-gradient(ellipse at 55% 100%,#ac559b40,transparent 60%),linear-gradient(135deg,#222146,#163934); }
.theme-preview::before,.theme-preview::after { content: ''; width: 75px; height: 75px; border-radius: 50%; border: 1px solid currentColor; opacity: .17; position: absolute; }
.theme-preview::after { width: 102px; height: 102px; }
.theme-preview .icon { width: 36px; height: 36px; stroke-width: 1; z-index: 1; }
.theme-sunset .theme-preview { background: radial-gradient(ellipse at 55% 100%,#ce924550,transparent 65%),linear-gradient(135deg,#32251d,#574026); color: #f7ce87; }
.theme-ruby .theme-preview { background: radial-gradient(ellipse at 55% 100%,#f4597950,transparent 65%),linear-gradient(135deg,#4a1e3b,#2d1833); color: #f5b3d2; }
.theme-option strong { display: block; font-size: 11px; margin: 11px 6px 3px; font-weight: 500; }
.theme-option small { color: #919ab4; font-size: 8px; display: block; margin-left: 6px; }
.theme-check { position: absolute; top: 14px; right: 13px; background: #c8aafa; color: #282139; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: none; align-items: center; justify-content: center; }
.theme-option[aria-pressed=true] .theme-check { display: flex; }
.settings-row { padding: 16px 0; border-top: 1px solid #ffffff08; border-bottom: 1px solid #ffffff08; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.settings-row h3 { font-size: 11px; }
.segmented-control { display: inline-flex; gap: 3px; padding: 4px; border-radius: 9px; background: #171c2c; border: 1px solid #303347; }
.segmented-control button { min-height: 32px; border: 0; border-radius: 6px; background: none; color: #a0a9be; padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.segmented-control button[aria-pressed=true] { background: #39304e; color: #e8d4ff; }
.scene-forms,.audio-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 20px; }
.settings-card { border: 1px solid #ffffff0b; border-radius: 15px; background: #151b2a; padding: 17px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings-card .section-label { margin-bottom: 3px; }
.settings-card .section-label .check-label { display: flex; flex-direction: row; gap: 5px; align-items: center; font-size: 8px; color: #a3acc4; white-space: nowrap; }
input[type=checkbox] { accent-color: #c3a3f7; width: 12px; height: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.form-note { color: #7f8ba6; font-size: 8px; line-height: 1.8; }
.settings-card>.button { margin-top: auto; font-size: 10px; }
.announcement-controls .button { padding: 8px 9px; font-size: 9px; }
.audio-unlock { display: flex; align-items: center; gap: 14px; padding: 21px; border: 1px solid #6d5b8a50; border-radius: 17px; background: linear-gradient(115deg,#32264770,#17283450); }
.audio-orb { width: 46px; height: 46px; display: grid; place-items: center; color: #ceb2fc; background: radial-gradient(#4c3865,#2d2840); border: 1px solid #b592e130; border-radius: 50%; flex: 0 0 auto; }
.audio-orb .icon { width: 24px; height: 24px; }
.audio-unlock p { font-size: 9px; color: #a6a1bb; margin-top: 4px; }
.audio-unlock .button { margin-left: auto; font-size: 10px; white-space: normal; }
.audio-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: #bcc4d9; }
.toggle-pill { border-radius: 6px; padding: 6px 9px; background: #212537; border: 1px solid #43485a; color: #aab2c8; font-size: 8px; }
.toggle-pill[aria-pressed=true] { background: #193931; border-color: #387b64; color: #9fe1c9; }
.volume-control-row { margin: 0; padding: 0; }
.volume-label-line { display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: #9da8c0; margin-bottom: 8px; }
.volume-label-line strong { color: #c5aeed; font-size: 9px; }
.volume-slider { display: block; width: 100%; height: 5px; accent-color: #baa0ef; margin: 7px 0; }
.queue-line { display: flex; align-items: center; justify-content: space-between; color: #8692ae; font-size: 8px; margin-top: auto; }
.danger-text { color: #dd9cae; font-size: 9px; }
.voice-preview-card { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #384157; border-radius: 14px; background: #171e2b; }
.voice-preview-icon { color: #a68ce0; }
.voice-preview-card>div { flex: 1; min-width: 0; }
.voice-preview-card h3 { font-size: 11px; margin-bottom: 7px; }
.voice-preview-card .dock-input { padding: 9px; font-size: 10px; }
.voice-preview-card .button { font-size: 10px; }
.activity-filters { display: grid; grid-template-columns: 1fr 150px; gap: 10px; margin: 18px 0; }
.studio-activity { max-height: 515px; min-height: 80px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #44425d transparent; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 15px 3px; border-bottom: 1px solid #ffffff08; }
.activity-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; background: #39304a70; color: #d2b9f4; border-radius: 10px; font-size: 13px; }
.activity-copy { flex: 1; min-width: 0; }
.activity-title { font-size: 11px; color: #d2d6e5; overflow-wrap: anywhere; }
.activity-meta { font-size: 9px; color: #8a96b2; margin-top: 5px; overflow-wrap: anywhere; }
.activity-time { flex: 0 0 auto; color: #72809d; font-size: 8px; padding-top: 2px; }
.activity-empty { text-align: center; padding: 65px 20px; color: #848da7; }
.activity-empty .icon { width: 40px; height: 40px; color: #8b70b7; margin-bottom: 14px; }
.activity-empty h3 { font-weight: 500; color: #b5aac8; }
.activity-empty p { font-size: 10px; margin-top: 8px; }
.studio-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 100; max-width: calc(100vw - 36px); padding: 12px 22px; border: 1px solid #7edbc14d; background: #203331f5; color: #e1f8ee; font-size: 12px; border-radius: 12px; box-shadow: 0 8px 40px #0005; pointer-events: none; }
.studio-toast[data-tone=error] { border-color: #bf727c; background: #462733f5; }
/* Stage effects use edge light only, preserving the central Buddha image. */
.stage-atmosphere { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 0% 50%,#b357e45c,transparent 35%),radial-gradient(ellipse at 100% 65%,#ee78b24a,transparent 35%),linear-gradient(0deg,#40265b44,transparent 40%); mix-blend-mode: screen; opacity: .7; }
.stage-9x16[data-theme=sunset] .stage-atmosphere { background: radial-gradient(ellipse at 0% 50%,#ffbf6940,transparent 35%),radial-gradient(ellipse at 100% 65%,#f0874140,transparent 35%); }
.stage-9x16[data-theme=ruby] .stage-atmosphere { background: radial-gradient(ellipse at 0% 50%,#ff528059,transparent 35%),radial-gradient(ellipse at 100% 65%,#dd428659,transparent 35%); }
.stage-9x16 .minimal-top-bar { top: 26px; left: 28px; right: 28px; }
.stage-9x16 .live-pill { border-color: #f2d3fe60; background: #20132ce8; }
.stage-9x16 .mini-stat-pill { background: #231729db; border-color: #e7beff45; }
.stage-9x16 .hud-active-notice,.stage-9x16 .hud-gift-card,.stage-9x16 .hud-right-leaderboard { background: #1a1128ef; border-color: #d9aefc70; }
.stage-9x16[data-theme=sunset] .hud-active-notice,.stage-9x16[data-theme=sunset] .hud-gift-card,.stage-9x16[data-theme=sunset] .hud-right-leaderboard { background: #281d12ef; border-color: #e6bc7970; }
.stage-9x16[data-theme=ruby] .hud-active-notice,.stage-9x16[data-theme=ruby] .hud-gift-card,.stage-9x16[data-theme=ruby] .hud-right-leaderboard { background: #321223ef; border-color: #e99bb370; }
.hotspot-svg { width: 37px; height: 37px; color: #ffdb9c; }
.gift-svg { width: 34px; height: 34px; color: #ffdb9c; }
.stage-goal { position: absolute; z-index: 30; left: 34px; right: 34px; bottom: 237px; background: #191124e8; border: 1px solid #d9b2f96b; border-radius: 18px; padding: 19px 24px; }
.stage-goal-copy { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 23px; color: #f8e7ff; margin-bottom: 13px; }
.stage-goal-copy>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-goal-copy strong { font-size: 21px; font-weight: 500; white-space: nowrap; color: #edc0ee; }
.stage-goal-track { height: 9px; background: #65457065; }
.stage-announcement { position: absolute; z-index: 46; top: 1040px; left: 95px; width: 890px; padding: 29px 37px; border-radius: 24px; border: 2px solid #f2c6ffb8; background: linear-gradient(115deg,#362243f7,#172b31f7); color: #fff5f9; box-shadow: 0 15px 70px #0006,0 0 70px #dd89f330; text-align: center; animation: announcementReveal .5s ease; }
.announcement-kicker { font-size: 14px; color: #d8a6e4; letter-spacing: 3px; display: block; margin-bottom: 12px; }
.stage-announcement strong { font-family: 'Noto Serif',serif; font-size: 35px; display: block; color: #ffdfae; overflow-wrap: anywhere; }
.stage-announcement p { font-size: 27px; margin-top: 12px; line-height: 1.6; overflow-wrap: anywhere; }
@keyframes announcementReveal { from { opacity: 0; transform: translateY(25px) scale(.98); } to { opacity: 1; transform: none; } }
body[data-effects=gentle] .halo-sunburst,body[data-effects=gentle] .dharma-wheel-outer,body[data-effects=gentle] .dharma-wheel-inner,body[data-effects=gentle] .grand-button::before { animation: none; }
body[data-effects=gentle] .stage-atmosphere { opacity: .3; }
body[data-effects=vivid] .stage-atmosphere { animation: atmosphereBreathe 9s ease-in-out infinite alternate; }
@keyframes atmosphereBreathe { from { opacity: .45; } to { opacity: .85; } }
body[data-theme=sunset] { --accent: #ecc58a; }
body[data-theme=ruby] { --accent: #efa4c0; }
/* Clean OBS output always occupies the requested 9:16 canvas. */
body.obs-mode { height: 100vh; min-height: 0; overflow: hidden; background: transparent; }
body.obs-mode .studio-topbar,body.obs-mode .preview-heading,body.obs-mode .preview-footer,body.obs-mode .studio-toast,body.obs-mode .preview-orbit { display: none !important; }
body.obs-mode .studio-workspace { max-width: none; width: 100vw; height: 100vh; display: flex; padding: 0; margin: 0; gap: 0; justify-content: center; }
body.obs-mode .preview-column { position: static; display: contents; }
body.obs-mode .preview-well { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; width: 100%; height: 100%; }
body.obs-mode .preview-well::after { display: none; }
body.obs-mode .stage-wrapper { height: 100vh; width: auto; max-width: 100vw; aspect-ratio: 9/16; border: 0; border-radius: 0; box-shadow: none; }
body.theater-mode .studio-console { display: none; }
body.theater-mode .studio-workspace { grid-template-columns: minmax(0,640px); justify-content: center; }
body.theater-mode .stage-wrapper { width: min(100%,calc((100vh - 220px)*.5625)); }
body.theater-mode .preview-heading { margin-bottom: 12px; }
.metric span { font-size: 10px; }
.studio-tabs button { font-size: 12px; }
.section-label { font-size: 12px; }
.identity-fields label,.settings-card>label,.form-row>label { font-size: 10px; }
.identity-fields input { font-size: 11px; }
.ritual-copy strong { font-size: 12px; }
.ritual-copy small { font-size: 9px; }
.form-note { font-size: 10px; }
.goal-summary h3 { font-size: 12px; }
.goal-summary-footer,.studio-leader-item { font-size: 10px; }
.activity-title { font-size: 12px; }.activity-meta { font-size: 10px; }
.settings-card>.button { font-size: 11px; }
.ritual-button.shortcut-pressed { border-color: var(--ritual); background: color-mix(in srgb,var(--ritual) 18%,#151a28); }
body.goal-complete .stage-goal { border-color: #9aeed3; box-shadow: 0 0 60px #72e3c94d; }
@media(min-width:1450px) { .studio-workspace { gap: 55px; grid-template-columns: minmax(360px,.9fr) minmax(0,1.5fr); }.ritual-button { padding: 14px 13px; }.ritual-copy strong { font-size: 12px; }.ritual-copy small { font-size: 9px; }.metric strong { font-size: 27px; } }
@media(max-width:1100px) and (min-width:861px) { .studio-workspace { padding: 25px; gap: 25px; grid-template-columns: minmax(260px,.85fr) minmax(0,1.5fr); }.studio-topbar { padding: 16px 25px; }.topbar-status { gap: 8px; font-size: 9px; }.ritual-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.metric { padding: 12px 10px; }.metric strong { font-size: 19px; }.console-heading h2 { font-size: 15px; }.scene-forms { grid-template-columns: 1fr; }.audio-settings-grid { grid-template-columns: 1fr; }.ritual-copy strong { font-size: 11px; } }
@media(max-width:860px) { .studio-topbar { height: 77px; padding: 14px 22px; gap: 12px; }.studio-brand strong { font-size: 19px; }.brand-mark { width: 42px; height: 42px; border-radius: 13px; }.brand-mark .icon { width: 29px; height: 29px; }.brand-studio { font-size: 7px; }.studio-brand small { font-size: 9px; }.topbar-status { display: none; }.admin-link { font-size: 10px; padding: 8px 10px; min-height: 35px; }.studio-workspace { display: flex; flex-direction: column; gap: 25px; padding: 25px 24px 30px; max-width: 650px; }.preview-column { position: static; width: 100%; }.preview-heading h1 { font-size: 25px; }.preview-well { padding: 16px; background: radial-gradient(ellipse at 30% 40%,#6e448f20,transparent 60%),#111522; }.stage-wrapper { width: min(100%,310px); height: auto; }.preview-footer { padding-bottom: 0; }.studio-console { width: 100%; }.console-heading { margin-bottom: 17px; }.console-heading h2 { font-size: 17px; }.ritual-copy strong { font-size: 12px; }.ritual-copy small { font-size: 9px; }.ritual-button { padding: 15px 11px; min-height: 85px; }.metrics-grid { margin-bottom: 17px; }.metric strong { font-size: 25px; }.metric span { font-size: 10px; }.studio-tabs button { font-size: 11px; }.connection-footer,.connection-footer .text-button { font-size: 10px; }.identity-fields label { font-size: 10px; }.identity-fields input { font-size: 11px; }.theme-preview { height: 100px; }.scene-forms { grid-template-columns: 1fr 1fr; } }
@media(max-width:540px) { .studio-topbar { padding: 12px 16px; height: 72px; }.brand-studio { display: none; }.studio-brand { gap: 10px; }.studio-workspace { padding: 22px 16px; gap: 22px; }.preview-heading h1 { font-size: 23px; }.stage-wrapper { width: min(100%,280px); }.preview-well { padding: 12px; border-radius: 22px; }.console-heading h2 { font-size: 15px; }.console-heading h2 span { display: block; margin-top: 3px; }.metrics-grid { gap: 7px; }.metric { padding: 12px 9px; }.metric strong { font-size: 21px; }.metric span { font-size: 8px; }.studio-tabs { gap: 0; padding: 4px; }.studio-tabs button { gap: 5px; font-size: 10px; min-height: 42px; }.studio-tabs .icon { width: 14px; height: 14px; }.connection-card { padding: 14px 12px 8px; }.input-action { gap: 4px; }.input-action .button { font-size: 10px; padding: 9px 10px; }.input-action .button .icon { display: none; }.dock-input,select,textarea { font-size: 11px; }.input-action .dock-input { font-size: 10px; padding: 10px; }.connection-footer>span { font-size: 8px; }.connection-footer .text-button { font-size: 9px; }.identity-fields { grid-template-columns: 1fr; }.ritual-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ritual-copy strong { font-size: 11px; }.ritual-copy small { font-size: 8px; }.ritual-button { min-height: 76px; gap: 6px; }.console-bottom-grid { grid-template-columns: 1fr; }.scene-forms,.audio-settings-grid { grid-template-columns: 1fr; }.theme-grid { gap: 8px; }.theme-preview { height: 80px; }.theme-option small { font-size: 7px; }.theme-option strong { font-size: 10px; }.settings-row { align-items: start; flex-direction: column; gap: 12px; }.segmented-control { width: 100%; }.segmented-control button { flex: 1; }.audio-unlock { flex-wrap: wrap; padding: 17px; }.audio-unlock>div:nth-child(2) { flex: 1; }.audio-unlock .button { width: 100%; }.voice-preview-card { flex-wrap: wrap; }.voice-preview-card>.button { width: 100%; }.activity-filters { grid-template-columns: 1fr; }.activity-time { font-size: 7px; }.activity-item { gap: 8px; }.console-footer { font-size: 7px; }.grand-button small { font-size: 7px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }