.yaas-studio { color: #edf1f7; padding: 24px; width: 100%; min-width: 0; background: #0c1018; border-radius: 18px; }
.studio-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:26px; }
.studio-eyebrow { color:#b6a078; font-size:12px; letter-spacing:.16em; }
.studio-header h1 { font-size:32px; margin:8px 0; letter-spacing:-.04em; }
.studio-header h1 em { color:#d7b66d; font-style:normal; font-weight:400; }
.studio-header p { color:#aab5c6; margin:0; font-size:16px; overflow-wrap:anywhere; }
.studio-header-actions { display:flex; align-items:center; gap:16px; font-size:14px; flex-wrap:wrap; }
.studio-layout { display:grid; grid-template-columns:170px minmax(0,1fr) 235px; gap:16px; }
.studio-panel { min-width:0; background:#141b27; border:1px solid #293244; border-radius:12px; padding:18px; }
.studio-panel h2 { font-size:16px; font-weight:650; margin:0 0 20px; }
.studio-panel p,.studio-hint { color:#aab5c6; font-size:14px; line-height:1.6; }
.studio-panel small { display:block; color:#aab5c6; font-size:12px; line-height:1.6; }
.studio-scenes button { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:1px solid transparent; color:#c1cad8; padding:14px 10px; text-align:left; border-radius:8px; margin-bottom:10px; font-size:14px; cursor:pointer; }
.studio-scenes button span { color:#8e9ab0; font-size:12px; }
.studio-scenes button.selected { background:#29271f; border-color:#927a49; color:#f3d99c; }
.studio-main { min-width:0; }
.studio-preview-bar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:14px 0; font-size:14px; }
#studio-status { color:#c1cad8; font-size:12px; letter-spacing:.07em; }
#studio-status.is-live { color:#ff6e7f; }
.studio-canvas-slot { overflow:hidden; border:1px solid #343d4d; border-radius:10px; background:#0b1018; aspect-ratio:16/9; }
.studio-canvas-slot canvas { display:block; width:100%; height:100%; object-fit:contain; }
.studio-transport { display:flex; flex-wrap:wrap; gap:12px; padding-top:16px; }
.yaas-studio button { min-height:42px; white-space:normal; }
.yaas-studio button:disabled { opacity:.5; cursor:wait; }
.yaas-studio button:focus-visible,.yaas-studio input:focus-visible { outline:2px solid #f0ce89; outline-offset:3px; }
.studio-decoration label,.studio-audio label { display:flex; flex-direction:column; gap:10px; color:#d4dbe6; font-size:14px; margin:18px 0; }
.studio-decoration input:not([type=color]),.studio-decoration input[type=file] { box-sizing:border-box; width:100%; min-width:0; color:#edf1f7; background:#0c121d; border:1px solid #364154; border-radius:7px; padding:10px; font-size:14px; }
.studio-decoration input[type=color] { width:100%; height:38px; padding:3px; background:#0c121d; border:1px solid #364154; border-radius:7px; }
.studio-decoration .secondary { width:100%; margin-top:12px; }
.studio-sources { grid-column:1 / 3; }
.studio-source-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:10px 0; border-bottom:1px solid #293244; font-size:14px; }
.studio-audio input[type=range] { width:100%; accent-color:#d7b66d; }
.studio-window-mode { overflow:auto !important; height:auto !important; min-height:100vh; background:#0c1018; }
#standalone-studio { max-width:1800px; margin:auto; }
.studio-window-mode .yaas-studio { box-sizing:border-box; }
.studio-broadcast-settings { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:18px; }
.studio-broadcast-settings label { flex:1; min-width:180px; }
.studio-broadcast-settings label:first-child { flex:2; }
.studio-device-selectors { margin-top:14px; }
.yaas-studio label { display:flex; flex-direction:column; gap:8px; font-size:14px; margin-bottom:14px; }
.yaas-studio select,.yaas-studio input:not([type=range]):not([type=color]),#stream-chat-input { box-sizing:border-box; min-width:0; width:100%; padding:10px; background:#0c121d; color:#edf1f7; border:1px solid #364154; border-radius:7px; font-size:14px; }
.studio-tests { grid-column:1 / -1; }
.studio-tests meter { width:100%; height:22px; accent-color:#73d6a1; }
#studio-test-playback { max-width:100%; max-height:300px; background:#05080d; margin-top:12px; }
.studio-activity { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.studio-chat-messages,#studio-events { height:230px; overflow:auto; overflow-wrap:anywhere; padding:10px; background:#0c121d; border-radius:8px; }
.studio-chat-messages p,#studio-events p { font-size:14px; line-height:1.5; margin:0 0 10px; }
.studio-chat-messages strong { color:#e7c67f; }
#stream-chat-form { display:flex; gap:8px; margin:12px 0; }
#stream-chat-form input { flex:1; }
@media(max-width:700px) { .studio-activity { display:block; } .studio-activity > div + div { margin-top:22px; } }
@media(max-width:1200px) { .studio-layout { grid-template-columns:150px minmax(0,1fr); } .studio-decoration { grid-column:1 / 3; display:grid; grid-template-columns:1fr 1fr; gap:12px; } .studio-decoration h2 { grid-column:1/-1; margin-bottom:0; } .studio-sources { grid-column:auto; } }
@media(max-width:700px) { .yaas-studio { padding:14px; } .studio-header { align-items:flex-start; flex-direction:column; } .studio-layout { display:flex; flex-direction:column; } .studio-scenes { display:flex; flex-wrap:wrap; gap:8px; } .studio-scenes h2 { width:100%; margin-bottom:4px; } .studio-scenes button { width:auto; flex:1; margin:0; } .studio-scenes p { margin:0; } .studio-main { order:-1; } .studio-decoration { display:block; } }