:root{color-scheme:dark;--bg:#090c17;--panel:#111522;--border:#252938;--muted:#858b9f;--text:#f4f2fa;--purple:#a475ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px}.app{display:flex;min-height:100vh}.sidebar{width:224px;flex-shrink:0;border-right:1px solid #202433;background:#0c0f1a;display:flex;flex-direction:column;padding:29px 16px 18px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:1.1px;margin:0 6px 61px}.brand-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#9f72f7;color:#171023;font-size:25px}.brand-thin{font-weight:400}.brand small{display:block;color:#74798c;font:8px 'DM Sans';letter-spacing:1.5px;margin-top:4px}.side-label,.section-kicker{font-size:10px;font-weight:700;letter-spacing:1.6px;color:#a989f7}.side-label{color:#626a7f;font-size:9px;margin:0 10px 16px}.nav{border:0;background:transparent;color:#858b9c;width:100%;text-align:left;padding:13px 11px;border-radius:8px;font:600 12px 'DM Sans';cursor:pointer;display:flex;align-items:center;gap:12px}.nav span{font-size:17px;width:18px;text-align:center}.nav b{margin-left:auto;font-size:9px;font-weight:500;color:#a88ee4}.nav.active{background:#27213b;color:#e0d0ff}.side-bottom{margin-top:auto}.side-card{border:1px solid #302740;border-radius:10px;background:linear-gradient(145deg,#221c31,#151622);padding:14px;margin-bottom:22px}.side-card-icon{color:#c79dff;font-size:20px;display:block;margin-bottom:12px}.side-card strong{font-size:11px;line-height:1.5}.side-card p{font-size:10px;color:#8c899b;line-height:1.5;margin-bottom:0}.profile{border-top:1px solid #242735;padding:18px 2px 0;display:flex;align-items:center;gap:9px}.avatar,.top-avatar{display:grid;place-items:center;background:#5b426e;color:#e6d7f7;border-radius:50%;width:32px;height:32px;font-size:10px}.profile div{flex:1}.profile strong,.profile small{display:block;font-size:10px}.profile small{color:#737a8c;margin-top:4px}.main{min-width:0;flex:1}.topbar{height:65px;border-bottom:1px solid #202433;display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumb{color:#777e91;font-size:11px}.breadcrumb span{margin:0 12px;color:#424858}.breadcrumb strong{color:#c8cbd7;font-weight:500}.top-right{display:flex;align-items:center;gap:22px}.local-pill{font-size:9px;letter-spacing:.8px;color:#9298aa}.local-pill i,.dot,.canvas-bottom i{display:inline-block;width:6px;height:6px;background:#6ee6b2;border-radius:50%;margin-right:6px}.top-icon{font-size:18px;color:#9298aa}.content{max-width:1600px;margin:auto;padding:39px 38px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.eyebrow{font-size:10px;color:#b499eb;letter-spacing:1.8px;font-weight:700}.eyebrow span{font-size:15px}h1,h2,p{margin:0}h1,h2{font-family:'Space Grotesk',sans-serif}h1{font-size:34px;letter-spacing:-1.4px;margin:10px 0}h1 em{font-style:normal;color:#b58bff}.heading p,.section-heading p,.panel-head p,.controls-head p,.settings>p{color:var(--muted);font-size:12px;line-height:1.6}.outline-btn{background:#151927;border:1px solid #343849;border-radius:7px;color:#dddce7;padding:11px 14px;font:600 11px 'DM Sans';cursor:pointer}.outline-btn span{margin-left:13px}.status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:19px}.stat{display:flex;align-items:center;gap:11px;background:#111521;border:1px solid #242837;border-radius:9px;padding:15px}.stat-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;font-size:17px}.purple{background:#29213e;color:#bb92ff}.cyan{background:#173037;color:#74d8e3}.pink{background:#342032;color:#ee8bc3}.green{background:#19302b;color:#73d8ab}.stat small{display:block;color:#747c90;font-size:9px;letter-spacing:.8px;margin-bottom:6px}.stat strong{font-size:12px}.stat-end{margin-left:auto;color:#596072}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:15px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:11px}.preview{padding:21px}.panel-head,.controls-head,.section-heading{display:flex;justify-content:space-between;align-items:flex-start}.section-kicker{font-size:9px}.live-dot{display:inline-block;background:#9d76f8;width:5px;height:5px;border-radius:50%;margin-left:4px}h2{font-size:19px;letter-spacing:-.5px;margin:7px 0 4px}.preview-tools{display:flex;align-items:center;gap:10px}.sim-badge{font-size:9px;color:#c2a5ff;border:1px solid #4a3a69;background:#262037;border-radius:5px;padding:7px}.preview-tools button{color:#aab0c2;background:#1b1f2d;border:1px solid #333746;border-radius:5px;padding:5px 8px;font-size:16px;cursor:pointer}.canvas-wrap{position:relative;height:352px;margin-top:20px;border:1px solid #28293c;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at center,#211634 0%,#101021 45%,#0b0d19 100%)}.canvas-wrap:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:32px 32px;pointer-events:none}.canvas-top,.canvas-bottom{position:absolute;z-index:1;left:16px;right:16px;display:flex;justify-content:space-between;color:#74758c;font-size:9px;letter-spacing:1px}.canvas-top{top:14px}.canvas-bottom{bottom:14px}.canvas-bottom i{background:#a775fa}.canvas-wrap canvas{width:100%;height:100%;display:block}.preview-footer{display:flex;align-items:center;gap:17px;padding:17px 0 0}.preview-footer>div{display:flex;gap:9px;align-items:center}.tiny-icon{font-size:20px;color:#b08bf8}.preview-footer strong,.preview-footer small{display:block;font-size:11px}.preview-footer small{font-size:9px;color:#787f91;margin-top:4px}.footer-divider{height:28px;width:1px;background:#303340}.preview-note{margin-left:auto;color:#787e91;font-size:10px}.controls{padding:21px}.control-symbol{font-size:21px;color:#888da2}.power-row{display:flex;align-items:center;gap:10px;background:#1a1d2c;border:1px solid #2c2d3e;border-radius:8px;padding:13px;margin-top:23px}.power-icon{display:grid;place-items:center;width:34px;height:34px;background:#2d2443;color:#bd94ff;border-radius:7px;font-size:20px}.power-row div:nth-child(2){flex:1}.power-row strong,.power-row small{display:block;font-size:11px}.power-row small{font-size:9px;color:#858b9d;margin-top:4px}.switch input{position:absolute;opacity:0}.switch span{display:block;width:34px;height:19px;border-radius:20px;background:#454857;position:relative;cursor:pointer}.switch span:after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;top:3px;left:3px;background:white;transition:.2s}.switch input:checked+span{background:#a578f9}.switch input:checked+span:after{left:18px}.control-block{padding-top:24px}.label-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin-bottom:14px}.label-row strong{color:#c5a6ff}.muted{color:#6e7588;font-size:9px;letter-spacing:.7px}input[type=range]{width:100%;accent-color:#ad83ff;height:4px;margin:0;cursor:pointer}.range-hints{display:flex;justify-content:space-between;color:#737a8b;font-size:9px;letter-spacing:.6px;margin-top:10px}.colors{display:flex;gap:8px;align-items:center}.swatch{height:25px;width:25px;border-radius:50%;border:3px solid #1a1d2b;background:var(--c);cursor:pointer}.swatch.selected{outline:1px solid #cbaaff}.custom-color{width:25px;height:25px;border:1px dashed #687084;border-radius:50%;display:grid;place-items:center;color:#b4b8c5;cursor:pointer;position:relative}.custom-color input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.primary-btn{width:100%;background:#aa7af7;border:0;border-radius:7px;padding:13px;margin-top:27px;color:#171020;font:700 11px 'DM Sans';cursor:pointer}.primary-btn span{float:right}.send-hint{font-size:10px;text-align:center;color:#7d8496;margin-top:11px;line-height:1.5}.effects-section{margin-top:30px}.section-heading{align-items:end;margin-bottom:15px}.section-heading h2 span{color:#ae83fa;font-size:13px}.effect-count{font-size:9px;letter-spacing:.8px;color:#9b83c7}.effect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.effect-card{text-align:left;background:#121522;border:1px solid #292d3b;border-radius:9px;overflow:hidden;padding:5px;color:inherit;cursor:pointer}.effect-card.selected{border-color:#a579f3;box-shadow:0 0 0 1px #a579f333}.effect-art{height:95px;border-radius:6px;display:grid;place-items:center;overflow:hidden}.effect-art span{font-size:65px;line-height:1;text-shadow:0 0 10px currentColor,0 0 30px currentColor}.art-fire{color:#e9a2ff;background:radial-gradient(circle,#582460,#161123 68%)}.art-wave{color:#77d8f7;background:radial-gradient(ellipse,#173f58,#101928 68%)}.art-chase{color:#ffa98c;background:radial-gradient(circle,#66312e,#20131d 68%)}.art-gradient{color:#bd95ff;background:radial-gradient(circle,#3e356d,#171527 68%)}.effect-info{display:flex;justify-content:space-between;align-items:center;padding:11px 8px 8px}.effect-info strong,.effect-info small{display:block;font-size:11px}.effect-info small{font-size:10px;color:#7f8598;margin-top:5px}.effect-info>span{color:#888da0}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:30px}.settings{padding:20px}.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}.fields label{font-size:10px;color:#a8adbd}.fields input,.fields select,.connection-row input{display:block;width:100%;margin-top:6px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#e5e5ef;padding:10px;font:12px 'DM Sans'}.connection-row{display:flex;gap:8px;margin-top:18px}.connection-row input{margin:0;min-width:0}.connection-row button{white-space:nowrap}.settings .safety{font-size:10px;color:#8d93a6;margin-top:12px}footer{border-top:1px solid #242837;margin-top:35px;padding-top:20px;color:#a9adbc;font-size:9px;letter-spacing:1px;font-weight:700}footer span:first-child{color:#a47ef3;margin:0 8px}footer span:nth-child(2){font-weight:400;color:#6f7688;letter-spacing:0}footer span:last-child{float:right;color:#686f80;font-weight:400}@media(max-width:1100px){.sidebar{width:190px}.workspace{grid-template-columns:1fr 280px}.content{padding:30px 24px}.topbar{padding:0 24px}.preview-note{display:none}}@media(max-width:800px){.sidebar{display:none}.status-row{grid-template-columns:repeat(2,1fr)}.workspace,.bottom-grid{grid-template-columns:1fr}.effect-grid{grid-template-columns:repeat(2,1fr)}.heading{align-items:start;gap:15px}.heading .outline-btn{white-space:nowrap}h1{font-size:28px}.canvas-wrap{height:320px}}@media(max-width:500px){.content{padding:25px 16px}.topbar{padding:0 16px}.heading{display:block}.heading .outline-btn{margin-top:18px}.stat{padding:11px;gap:7px}.stat strong{font-size:10px}.stat-icon{width:30px;height:30px}.preview,.controls{padding:16px}.canvas-wrap{height:270px}.preview-footer{gap:9px}.preview-footer strong{font-size:10px}.top-right{gap:12px}.local-pill{display:none}.connection-row{flex-direction:column}footer span:last-child{display:none}}
.layer-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}.layer-bar>span{font-size:9px;letter-spacing:1px;color:#9298aa;margin-right:5px}.layer{border:1px solid #35394b;background:#191d2b;color:#aeb3c2;border-radius:6px;padding:7px 12px;cursor:pointer}.layer.active{border-color:#aa7af7;color:#e0ccff;background:#302542}.layer-bar label{font-size:11px;color:#b7bbca;margin-left:auto}.layer-bar input,.check-field input{accent-color:#ad83ff}.layer-note{font-size:10px;color:#9298aa;line-height:1.5;margin-top:9px}.fields .check-field{display:flex;align-items:center;gap:8px}.fields .check-field input{display:inline-block;width:auto;margin:0}
[hidden]{display:none!important}
.ray-custom{margin-top:18px;border-top:1px solid #303340;padding-top:15px}.ray-editor{display:flex;gap:8px;flex-wrap:wrap}.ray-editor select,.ray-editor input{background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#e5e5ef;padding:10px;font:12px 'DM Sans'}.ray-editor select{flex:1;min-width:85px}.ray-editor input{width:85px}.ray-editor button{flex:2;min-width:165px}
.data-panel{margin-top:30px}.data-panel .connection-row{justify-content:flex-start}
.media-studio{margin-top:18px;background:#111522;border:1px solid #252938;border-radius:10px;padding:18px}.media-studio strong{font-size:13px}.media-studio p{font-size:11px;color:#9298aa;line-height:1.5;margin-top:6px}.media-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.upload-button{display:inline-flex;align-items:center}.media-studio .safety{margin-top:12px}.effect-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:800px){.effect-grid{grid-template-columns:repeat(2,1fr)}}
#effectsDialog{width:min(780px,calc(100vw - 28px));max-height:85vh;overflow:auto;border:1px solid #3b3b4e;border-radius:14px;background:#171a24;color:#f4f2fa;padding:22px}#effectsDialog::backdrop{background:#000b}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:-22px;z-index:2;background:#171a24;padding:0 0 16px}.dialog-head p,.dialog-note{font-size:11px;color:#9298aa}.dialog-head button{border:1px solid #3b3b4e;border-radius:7px;background:#252938;color:#fff;padding:8px;cursor:pointer}#effectsDialog .effect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}#effectsDialog .effect-card{min-width:0}#effectsDialog .effect-art{height:auto;aspect-ratio:1.15;background:#282a30}#effectsDialog .effect-art canvas{width:100%;height:100%;display:block}#effectsDialog .effect-info{padding:8px 5px}#effectsDialog .effect-info strong{font-size:10px}#effectsDialog .effect-info small{display:none}.dialog-note{margin-top:16px}@media(max-width:500px){#effectsDialog{padding:14px}#effectsDialog .effect-grid{gap:5px}#effectsDialog .effect-info strong{font-size:9px}.dialog-head{top:-14px}}
#imagesDialog{width:min(650px,calc(100vw - 28px));max-height:85vh;overflow:auto;border:1px solid #3b3b4e;border-radius:14px;background:#171a24;color:#f4f2fa;padding:22px}#imagesDialog::backdrop{background:#000b}#imagesDialog .image-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.image-tile{background:#080a10;border:1px solid #45495b;border-radius:8px;overflow:hidden;padding:0;color:#e7e6f1;cursor:pointer}.image-tile:hover,.image-tile:focus-visible{outline:2px solid #bb93ff}.image-tile canvas{width:100%;aspect-ratio:1;display:block}.image-tile span{display:block;font-size:10px;padding:6px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:500px){#imagesDialog{padding:14px}#imagesDialog .image-grid{gap:5px}.image-tile span{font-size:9px}}
.theme-filter{display:flex;gap:6px;overflow-x:auto;padding:0 0 14px}.theme-filter button{flex:0 0 auto;background:#252938;border:1px solid #3d4050;border-radius:20px;color:#b9bdca;padding:7px 11px;font:11px 'DM Sans';cursor:pointer}.theme-filter button.active{color:#eadbff;border-color:#ac82f2;background:#392c50}
.step-tabs{display:flex;gap:8px;margin:0 0 16px}.step-tabs button{flex:1;text-align:left;background:#141826;color:#aeb3c4;border:1px solid #292d3d;border-radius:8px;padding:11px 14px;font:600 12px 'DM Sans';cursor:pointer}.step-tabs button b{color:#a886ec;margin-right:8px}.step-tabs button.active{background:#2a203e;color:#f1e7ff;border-color:#76599e}.playlist-panel{margin-top:26px}.playlist-actions{display:flex;align-items:end;flex-wrap:wrap;gap:8px;margin-top:16px}.playlist-actions label{font-size:10px;color:#a8adbd}.playlist-actions input{display:block;width:110px;margin-top:5px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#fff;padding:10px}.playlist-items{margin:15px 0 0;padding:0;list-style:none;display:grid;gap:7px}.playlist-items li{display:flex;align-items:center;gap:8px;padding:10px;background:#191d2b;border:1px solid #303444;border-radius:7px}.playlist-items li.current{border-color:#a578f9}.playlist-items li strong{flex:1;font-size:11px}.playlist-items li span{font-size:10px;color:#a8adbd}.playlist-items li button{background:#282c3c;border:1px solid #404458;border-radius:5px;color:#eee;cursor:pointer;padding:6px 8px}.playlist-items li button:disabled{opacity:.35;cursor:default}@media(max-width:800px){.step-tabs{position:sticky;top:0;z-index:5;background:#090c17;padding:8px 0;margin-top:-8px}.step-tabs button{text-align:center;font-size:10px;padding:10px 5px}.step-tabs button b{display:block;margin:0 0 3px}.playlist-actions button{flex:1;min-width:130px}.playlist-items li{flex-wrap:wrap}.playlist-items li strong{min-width:100px}}
.dialog-playlist-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 14px;color:#cfc8dd;font-size:11px}.dialog-playlist-tools #chosenEffect{flex:1;min-width:130px}.dialog-playlist-tools label{display:flex;align-items:center;gap:5px}.dialog-playlist-tools input{width:66px;padding:8px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#fff}.dialog-playlist-tools #dialogAddStatus{width:100%;color:#b8a5de}
.playlist-actions .auto-play-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#ddd}.playlist-actions .auto-play-label input{display:inline-block;width:auto;margin:0;accent-color:#ad83ff}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 35%,#211835,#090c17 65%)}.login-card{width:min(100%,400px);background:#111522;border:1px solid #343044;border-radius:14px;padding:32px}.login-card .brand-icon{margin-bottom:22px}.login-card h1{font-size:27px;margin:12px 0}.login-card p{font-size:12px;color:#959aac;line-height:1.6}.login-card label{display:block;margin-top:18px;font-size:11px;color:#c9cbd7}.login-card input{display:block;width:100%;padding:12px;margin-top:7px;background:#0b0f19;border:1px solid #383d4d;border-radius:7px;color:#fff}.login-card .primary-btn{margin-top:22px}.login-card .login-error{color:#ff9191;min-height:18px}.login-card .login-note{font-size:10px;margin:12px 0}.lang-toggle,.logout-btn{border:1px solid #343849;border-radius:6px;background:#171b29;color:#d9dbea;padding:7px 9px;cursor:pointer;font:11px 'DM Sans'}.login-card .lang-toggle{margin-top:12px}@media(max-width:500px){.top-right{gap:6px}.logout-btn,.lang-toggle{font-size:10px;padding:6px}}
/* Inline libraries: all presets are directly available without a modal. */
#effectsDialog,#imagesDialog{width:100%;max-height:none;overflow:visible;border:0;border-radius:0;background:transparent;padding:0}#effectsDialog .dialog-head,#imagesDialog .dialog-head{position:static;background:transparent;padding:8px 0 12px}#effectsDialog .dialog-head h2,#imagesDialog .dialog-head h2{font-size:15px}#effectsDialog .effect-grid,#imagesDialog .image-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}#effectsDialog .effect-art{aspect-ratio:1}#studio{scroll-margin-top:90px}@media(max-width:1000px){#effectsDialog .effect-grid,#imagesDialog .image-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:600px){#effectsDialog .effect-grid,#imagesDialog .image-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#effectsDialog .effect-info strong,.image-tile span{font-size:9px}.dialog-playlist-tools #chosenEffect{min-width:100%}}
#addDialog{width:min(420px,calc(100vw - 32px));border:1px solid #444055;border-radius:12px;background:#161a28;color:#f4f2fa;padding:22px}#addDialog::backdrop{background:#000b}.add-dialog-card p{font-size:12px;color:#acb1c2;line-height:1.5;margin:12px 0}.add-dialog-card label{display:flex;align-items:center;justify-content:space-between;font-size:12px}.add-dialog-card input{width:90px;padding:9px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:white}.add-dialog-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}.add-dialog-actions .primary-btn{width:auto;margin:0;padding:12px}
.preset-color-btn{width:100%;text-align:left;padding:9px 10px;margin-bottom:8px}.preset-color-btn.active{border-color:#a578f9;color:#e3d0ff;background:#302542}.color-note{font-size:10px;color:#959aad;line-height:1.4;margin:0 0 10px}.motion-setting{font-size:11px;color:#bdc1ce;display:flex;align-items:center;gap:7px}.motion-setting select{background:#0c101b;color:#eee;border:1px solid #35394a;border-radius:6px;padding:9px}
.ready-themes{margin-top:24px;padding:20px}.ready-themes>p{font-size:11px;color:#9298aa;line-height:1.5}.ready-themes-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:14px 0}.ready-theme{min-height:88px;text-align:left;background:linear-gradient(140deg,#292039,#151927);border:1px solid #453a57;border-radius:8px;color:#eee;padding:12px;cursor:pointer}.ready-theme:hover,.ready-theme:focus-visible{border-color:#b189fc}.ready-theme strong,.ready-theme small{display:block}.ready-theme strong{font-size:12px}.ready-theme small{color:#a9a1b8;font-size:10px;margin-top:8px;line-height:1.4}@media(max-width:850px){.ready-themes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.theme-management{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:14px}.theme-management label{font-size:11px;color:#abb0c0}.theme-management input{display:block;width:200px;margin-top:6px;padding:10px;border:1px solid #35394a;border-radius:6px;background:#0c101b;color:#fff}.theme-card{position:relative;min-width:0}.theme-card .ready-theme{width:100%;padding-right:35px}.theme-delete{position:absolute;right:7px;top:7px;border:1px solid #564558;border-radius:5px;background:#281d2d;color:#f5a6b3;cursor:pointer;padding:5px 7px}.playlist-panel #openLibrary{margin:10px 0 4px}@media(max-width:500px){.step-tabs button{font-size:9px}}
.geometry-editor{border-top:1px solid #303444;margin-top:25px;padding-top:22px}.geometry-editor h2{margin-top:8px}.geo-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.geo-upload{display:inline-flex;align-items:center}.geo-canvas-wrap{margin-top:14px;border:1px solid #35394a;border-radius:8px;overflow:hidden;background:#090c16}.geo-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:manipulation;cursor:crosshair}.geo-selected{margin-top:15px}
.facade-editor{border-top:1px solid #303444;margin-top:25px;padding-top:22px}.controller-box{margin-top:18px;border:1px solid #303444;border-radius:8px;padding:14px}.controller-box h3{margin:0;font-size:13px}.controller-box input{min-width:0;padding:10px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#fff}.controller-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #303444;font-size:11px}.controller-row span{flex:1}.controller-row button{background:#282c3c;border:1px solid #404458;border-radius:5px;color:#eee;cursor:pointer;padding:6px 8px}.pdf-limitation{border:1px solid #5a4c35;background:#292317;border-radius:8px;padding:12px;margin-top:14px;font-size:11px}.pdf-limitation p{margin-top:6px;line-height:1.5;color:#c5bcaa}.fa-print{display:none}@media print{body>*:not(.fa-print){display:none!important}.fa-print{display:block;color:#000;background:#fff;font:12pt sans-serif}.fa-print table{border-collapse:collapse;width:100%;font-size:9pt}.fa-print th,.fa-print td{border:1px solid #888;padding:5px;overflow-wrap:anywhere}.fa-print img{max-width:100%;max-height:300px}}
.guest-login{display:block;width:100%;margin-top:10px;text-align:center}.hardware-label{display:block;font-size:11px;color:#bdc1ce;margin-top:14px}.hardware-label select{display:block;width:100%;max-width:320px;margin-top:6px;padding:10px;background:#0c101b;border:1px solid #35394a;border-radius:6px;color:#fff}
.text-studio{margin-top:22px}.text-studio input[type=color]{height:38px;padding:3px}
/* Simplified everyday controls: quick presets alongside the live canvas. */
.advanced-layers{border-top:1px solid #292d3b;margin-top:15px;padding-top:12px}.advanced-layers summary{cursor:pointer;color:#aeb2c4;font-size:11px}.quick-effects{margin-top:16px;padding:13px;background:#191d2b;border:1px solid #303444;border-radius:8px}.quick-effects-head{display:flex;justify-content:space-between;align-items:start;gap:5px}.quick-effects-head strong,.quick-effects-head small{display:block;font-size:11px}.quick-effects-head small{font-size:9px;color:#8d93a7;margin-top:4px}.quick-effects-head button{background:none;border:0;color:#c3a3fb;font:10px 'DM Sans';cursor:pointer;white-space:nowrap}.quick-effects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}.quick-effect{background:#111521;color:#d9d8e5;border:1px solid #35384b;border-radius:6px;padding:8px 4px;font:10px 'DM Sans';cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quick-effect:before{content:'✳';display:block;color:#b789ff;font-size:18px;margin-bottom:4px}.quick-effect.selected{background:#302443;border-color:#aa7af7;color:#f0e8ff}.quick-content{background:none;border:0;color:#b9a3de;font:10px 'DM Sans';padding:10px 0 0;cursor:pointer}.controls .control-block{padding-top:17px}.controls .primary-btn{margin-top:18px}@media(max-width:800px){.quick-effects-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.status-row{gap:8px}.stat{padding:10px}.workspace .controls{order:1}}@media(max-width:500px){.content{padding-top:18px}.heading{margin-bottom:17px}.heading h1{font-size:24px}.heading p{font-size:11px}.stat-icon{width:28px;height:28px}.quick-effects-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.device-info{border:1px solid #34384a;border-radius:8px;padding:14px;margin-top:15px;background:#0d111c}.device-info h3{font-size:12px;margin:0 0 10px}.device-info dl{display:grid;grid-template-columns:minmax(100px,1fr) 2fr;gap:8px;margin:0;font-size:11px}.device-info dt{color:#969bad}.device-info dd{margin:0;color:#e3e3ec;overflow-wrap:anywhere}.device-info .safety{margin-top:11px}
#layersPanel{padding:22px;margin:0;border:1px solid var(--border);background:var(--panel);border-radius:11px}#layersPanel .layer-description{font-size:12px;color:#858b9f;line-height:1.5}#layersPanel .layer-bar{margin-top:22px}#layersPanel .layer-note{margin:14px 0 18px}#pane-studio .ready-themes{margin-top:16px}@media(max-width:800px){.step-tabs{overflow-x:auto;scrollbar-width:thin}.step-tabs button{flex:1 0 88px}}
/* Main workflow: preview → queue → themes → effects → moving pictures → text. */
#pane-studio .playlist-panel{margin-top:16px}
#pane-studio .text-studio{margin-top:24px}
#pane-studio .effects-section,#pane-studio .media-studio,#pane-studio .text-studio{scroll-margin-top:75px}
#pane-studio .media-studio h2{font-size:19px;margin:0 0 4px}
/* Give the preview the whole main column; controls and status have their own tab. */
#pane-studio .workspace{grid-template-columns:minmax(0,1fr)}
#pane-studio .canvas-wrap{height:clamp(430px,65vh,760px)}
#pane-controls .status-row{margin-bottom:16px}
#pane-controls .controls{max-width:760px;margin:0 auto}
.preview-tools .open-controls{font:600 11px 'DM Sans',sans-serif;padding:8px 10px;white-space:nowrap}
.exit-fullscreen{display:none;position:absolute;right:16px;top:12px;z-index:3;border:1px solid #76648e;border-radius:6px;padding:8px 11px;background:#181423;color:#fff;cursor:pointer}
.canvas-wrap:fullscreen{width:100vw;height:100vh;margin:0;border:0;border-radius:0;background:#0b0d19}
.canvas-wrap:fullscreen .exit-fullscreen{display:block}
.canvas-wrap:fullscreen .canvas-top{right:100px}
@media(max-width:800px){#pane-studio .canvas-wrap{height:clamp(320px,65vh,650px)}}
@media(max-width:500px){.preview-tools{gap:5px}.preview-tools .open-controls{font-size:10px;padding:7px}.preview-tools .sim-badge{display:none}#pane-studio .canvas-wrap{height:clamp(300px,60vh,520px)}}
#pane-studio .canvas-wrap:fullscreen{height:100vh;width:100vw}
.playlist-file-tools{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:14px;margin-top:16px;border:1px solid #3c3650;border-radius:8px;background:#171827}.playlist-file-tools label:not(.playlist-import){font-size:11px;color:#c3bdd4}.playlist-file-tools input:not([type=file]){display:block;width:min(250px,100%);margin-top:6px;background:#0c101b;border:1px solid #4a4057;border-radius:6px;color:#fff;padding:10px}.playlist-file-tools .safety{flex-basis:100%;margin:0}.playlist-import{display:inline-flex;align-items:center;cursor:pointer}#editPlaylistDialog{width:min(520px,calc(100vw - 28px));max-height:85vh;overflow:auto;border:1px solid #484058;border-radius:12px;background:#171a24;color:#fff;padding:22px}#editPlaylistDialog::backdrop{background:#000b}#editPlaylistDialog [hidden]{display:none!important}
.led-convert{padding:15px;margin-top:16px;background:#17192a;border-color:#403653}.led-convert strong{font-size:13px}.led-convert-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}.led-convert-controls label{display:flex;align-items:center;gap:6px;color:#c5c0d3;font-size:11px}.led-convert-controls input[type=range]{width:110px}.led-convert-controls input[type=checkbox]{accent-color:#a578f9}.led-convert .safety{margin-bottom:0}

/* Hardware layout plan: fields wrap on phones. */
#layoutConfig { margin: 20px 0; }
#layoutRows { max-height: 420px; overflow: auto; margin: 12px 0; }
.layout-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid rgba(150,150,180,.2); }
.layout-row strong { min-width: 54px; }
.layout-row input[type=number] { width: 70px; }
.layout-row label { display: inline-flex; align-items: center; gap: 4px; }

/* Mobile shortcuts keep desktop navigation and editors intact. */
.mobile-nav { display: none; }
#mobileChoose { max-width: min(92vw, 420px); width: 100%; border: 1px solid #444657; border-radius: 18px; background: #1b1c22; color: #fff; padding: 0; }
#mobileChoose::backdrop { background: rgba(0,0,0,.78); }
.mobile-dialog { padding: 20px; }
.mobile-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mobile-dialog-head h2 { font-size:20px; }
.mobile-dialog-head button { border:0; background:transparent; color:#ddd; font-size:22px; padding:8px; }
#mobileChoices { display:grid; gap:8px; margin:15px 0; }
.mobile-choice { text-align:left; background:#282a33; color:#f6f5fa; border:1px solid #454653; border-radius:10px; font:600 15px 'DM Sans',sans-serif; padding:14px; cursor:pointer; }
@media(max-width:800px) {
 .app:not([hidden]) ~ .mobile-nav { display:flex; }
 .mobile-nav { position:fixed; z-index:40; bottom:0; left:0; right:0; padding:7px 5px max(7px,env(safe-area-inset-bottom)); background:#151722; border-top:1px solid #343749; justify-content:space-around; }
 .mobile-nav button { flex:1; min-width:0; background:none; color:#a8aab7; border:0; font-size:21px; cursor:pointer; }
 .mobile-nav button span { display:block; font-size:10px; white-space:nowrap; }
 .mobile-nav button.active,.mobile-nav .mobile-plus { color:#cba9ff; }
 .content { padding-bottom:95px; }
 .heading { display:none; }
}

.mobile-f-panel,.mobile-connection-status { display:none; }
@media(max-width:800px) {
 .mobile-connection-status { display:block; width:100%; padding:12px 14px; margin-bottom:10px; border:1px solid #343849; border-radius:10px; background:#141824; color:#e9d9ff; text-align:left; font-size:14px; }
 .mobile-f-panel { display:block; background:#111522; border:1px solid #303444; border-radius:12px; margin:10px 0; padding:12px; }
 .mobile-f-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
 .mobile-f-header span { color:#9b99a8; font-size:11px; }
 .mobile-f-strip { display:flex; gap:7px; overflow-x:auto; padding:10px 0; }
 .mobile-f-strip button { flex:0 0 auto; min-width:48px; min-height:44px; border-radius:9px; border:1px solid #3b4051; background:#202333; color:#eee; font-size:14px; }
 .mobile-f-strip button.active { border-color:#be96ff; background:#493264; }
 .mobile-f-strip button.playing { box-shadow:inset 0 -3px #70e5b7; }
 .mobile-f-strip .mobile-f-add { font-size:24px; color:#d8b8ff; }
 .mobile-f-detail p { color:#aaaabc; font-size:12px; margin:6px 0; }
 .mobile-f-actions { display:flex; gap:7px; overflow-x:auto; padding-top:6px; }
 .mobile-f-actions button { flex:0 0 auto; min-height:40px; border:1px solid #414558; border-radius:8px; background:#222638; color:white; padding:8px 12px; }
 .mobile-f-actions button:disabled { opacity:.4; }
 #pane-studio .playlist-items { display:none; }
 #pane-studio .playlist-panel { margin-top:10px; }
 #pane-studio .playlist-panel > p:not(#playlistStatus), #pane-studio #openLibrary, #pane-studio #playlistAdd, #pane-studio .playlist-actions > label:first-child { display:none; }
 .playlist-more summary { cursor:pointer; margin-top:12px; color:#d1b6ff; padding:10px 0; }
 #pane-studio .effects-section, #pane-studio .media-studio, #pane-studio .text-studio { display:none; }
 body[data-mobile-browse="effects"] #pane-studio .effects-section,
 body[data-mobile-browse="media"] #pane-studio .media-studio,
 body[data-mobile-browse="text"] #pane-studio .text-studio { display:block; }
}

/* Clearly identify the updated UI and make the F workflow available on PC too. */
.version-badge { color:#c9b2fb; font-size:11px; white-space:nowrap; }
.mobile-settings-links { display:none; }
.mobile-f-panel { display:block; background:#111522; border:1px solid #303444; border-radius:12px; margin:10px 0; padding:12px; }
.mobile-f-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mobile-f-header span { color:#aaaabc; font-size:11px; }
.mobile-f-strip { display:flex; gap:7px; overflow-x:auto; padding:10px 0; }
.mobile-f-strip button { flex:0 0 auto; min-width:48px; min-height:44px; border-radius:9px; border:1px solid #3b4051; background:#202333; color:#eee; font-size:14px; }
.mobile-f-strip button.active { border-color:#be96ff; background:#493264; }
.mobile-f-strip button.playing { box-shadow:inset 0 -3px #70e5b7; }
.mobile-f-strip .mobile-f-add { font-size:24px; color:#d8b8ff; }
.mobile-f-detail p { color:#aaaabc; font-size:12px; margin:6px 0; }
.mobile-f-actions { display:flex; gap:7px; overflow-x:auto; padding-top:6px; }
.mobile-f-actions button { flex:0 0 auto; min-height:40px; border:1px solid #414558; border-radius:8px; background:#222638; color:white; padding:8px 12px; }
.mobile-f-actions button:disabled { opacity:.4; }
@media(max-width:800px) {
 .topbar { height:48px; padding:0 12px; }
 .breadcrumb,.top-avatar,.top-icon { display:none; }
 .top-right { width:100%; justify-content:space-between; gap:8px; }
 .content { padding:8px 10px 96px; }
 .step-tabs { display:none; }
 .mobile-settings-links { display:flex; gap:8px; margin-bottom:16px; }
 .mobile-settings-links button { flex:1; min-height:44px; border:1px solid #424558; border-radius:8px; background:#242638; color:#f4edff; padding:8px; }
 #pane-studio .preview { padding:8px; }
 #pane-studio .panel-head { align-items:center; }
 #pane-studio .panel-head h2 { font-size:15px; margin:2px 0; }
 #pane-studio .panel-head p,#pane-studio .panel-head .section-kicker,#pane-studio .preview-footer { display:none; }
 #pane-studio .canvas-wrap { margin-top:8px; height:clamp(250px,45vh,430px); background:#050509; }
 #pane-studio .ready-themes { margin-top:12px; }
 #pane-studio .playlist-panel .section-kicker { display:none; }
 #pane-studio .playlist-panel h2 { font-size:16px; }
}

/* Separate, uncluttered phone views. Desktop keeps all existing panels. */
.mobile-home-tools,.mobile-back-home { display:none; }
@media(max-width:800px) {
 .mobile-home-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
 .mobile-home-tools button { min-height:44px; border:1px solid #3d4050; border-radius:9px; background:#242736; color:#f2eff8; font-size:12px; }
 body[data-mobile-browse]:not([data-mobile-browse=""]) .mobile-back-home { display:block; border:0; background:transparent; color:#d2b2ff; font-size:15px; font-weight:600; padding:12px 4px; }
 #pane-studio .ready-themes, #pane-studio .playlist-panel { display:none; }
 body[data-mobile-browse="manage"] #pane-studio .playlist-panel,
 body[data-mobile-browse="themes"] #pane-studio .ready-themes { display:block; }
 body[data-mobile-browse]:not([data-mobile-browse=""]) #pane-studio .workspace,
 body[data-mobile-browse]:not([data-mobile-browse=""]) #pane-studio .mobile-f-panel { display:none; }
 body[data-mobile-browse="manage"] #pane-studio .playlist-items { display:grid; }
 body[data-mobile-browse="manage"] #pane-studio .playlist-panel > p:not(#playlistStatus),
 body[data-mobile-browse="manage"] #pane-studio #openLibrary,
 body[data-mobile-browse="manage"] #pane-studio #playlistAdd,
 body[data-mobile-browse="manage"] #pane-studio .playlist-actions > label:first-child { display:block; }
 #pane-studio .effect-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
 #pane-studio .effect-card { padding:3px; }
 #pane-studio .effect-art { height:auto; aspect-ratio:1; }
 #pane-studio .effect-info { padding:6px 2px; }
 #pane-studio .effect-info strong { font-size:10px; overflow-wrap:anywhere; }
 #pane-studio .effect-info small,#pane-studio .effect-info > span { display:none; }
 #pane-studio .section-heading { margin-bottom:10px; }
 #pane-studio .effects-section,#pane-studio .media-studio,#pane-studio .text-studio { margin-top:0; }
 .mobile-nav { box-shadow:0 -6px 20px #0008; }
 .mobile-nav button { min-height:48px; }
}
.mobile-run-status { display:none; }
@media(max-width:800px) { .mobile-run-status { display:block; color:#aaaabc; font-size:11px; line-height:1.4; margin:8px 0 0; } }

.mobile-f-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.mobile-f-form label { display:flex; flex-direction:column; gap:6px; color:#c1bfd0; font-size:12px; }
.mobile-f-form input { width:100%; min-height:42px; padding:8px; border:1px solid #45485a; border-radius:8px; background:#10121b; color:#fff; font-size:16px; }
.mobile-f-form input:disabled { opacity:.5; }
.mobile-f-form .mobile-f-unavailable { grid-column:1/-1; color:#b3a8bd; line-height:1.4; }
.mobile-f-form > button { grid-column:1/-1; min-height:42px; color:#e9dbff; background:#332747; border:1px solid #755998; border-radius:8px; }
.mobile-settings-account { display:none; }
@media(max-width:800px) {
 .topbar { display:none; }
 .mobile-settings-account { display:flex; gap:8px; margin-bottom:12px; }
 .mobile-settings-account button { flex:1; min-height:42px; border:1px solid #424558; border-radius:8px; background:#242638; color:#f4edff; }
 .mobile-f-actions { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; overflow:visible; }
 .mobile-f-actions button { min-width:0; padding:8px 3px; font-size:11px; }
 .mobile-schedule p { line-height:1.6; margin-top:12px; color:#bab4c6; }
}

/* One simple workspace on both phone and PC. The existing advanced panels
   remain reachable from Cài đặt; library is entered via +. */
.sidebar,.topbar,.heading,.step-tabs,.content > footer { display:none; }
.app:not([hidden]) { display:block; }
.main { width:100%; }
.content { width:100%; max-width:960px; margin:0 auto; padding:12px 16px 110px; }
.mobile-connection-status { display:block; width:100%; min-height:48px; padding:12px 14px; margin-bottom:10px; border:1px solid #343849; border-radius:10px; background:#141824; color:#e9d9ff; text-align:left; font-size:15px; }
.app:not([hidden]) ~ .mobile-nav { display:flex; }
.mobile-nav { position:fixed; z-index:40; bottom:0; left:0; right:0; justify-content:center; gap:0; padding:7px 5px max(7px,env(safe-area-inset-bottom)); background:#151722; border-top:1px solid #343749; box-shadow:0 -6px 20px #0008; }
.mobile-nav button { flex:1; max-width:200px; min-height:48px; background:none; color:#a8aab7; border:0; font-size:21px; cursor:pointer; }
.mobile-nav button span { display:block; font-size:11px; }
.mobile-nav button.active { color:#cba9ff; }
.mobile-home-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.mobile-home-tools button { min-height:44px; border:1px solid #3d4050; border-radius:9px; background:#242736; color:#f2eff8; font-size:12px; cursor:pointer; }
.mobile-run-status { display:block; color:#aaaabc; font-size:11px; line-height:1.4; margin:8px 0 0; }
.mobile-settings-links,.mobile-settings-account { display:flex; gap:8px; margin-bottom:12px; }
.mobile-settings-links button,.mobile-settings-account button { flex:1; min-height:44px; border:1px solid #424558; border-radius:8px; background:#242638; color:#f4edff; padding:8px; cursor:pointer; }
body[data-mobile-browse]:not([data-mobile-browse=""]) .mobile-back-home { display:block; border:0; background:transparent; color:#d2b2ff; font-size:15px; font-weight:600; padding:12px 4px; cursor:pointer; }
#pane-studio .ready-themes,#pane-studio .playlist-panel,#pane-studio .effects-section,#pane-studio .media-studio,#pane-studio .text-studio { display:none; }
body[data-mobile-browse="manage"] #pane-studio .playlist-panel,
body[data-mobile-browse="themes"] #pane-studio .ready-themes,
body[data-mobile-browse="effects"] #pane-studio .effects-section,
body[data-mobile-browse="media"] #pane-studio .media-studio,
body[data-mobile-browse="text"] #pane-studio .text-studio { display:block; }
body[data-mobile-browse]:not([data-mobile-browse=""]) #pane-studio .workspace,
body[data-mobile-browse]:not([data-mobile-browse=""]) #pane-studio .mobile-f-panel { display:none; }
body[data-mobile-browse="manage"] #pane-studio .playlist-items { display:grid; }
body[data-mobile-browse="manage"] #pane-studio .playlist-panel > p:not(#playlistStatus),
body[data-mobile-browse="manage"] #pane-studio #openLibrary,
body[data-mobile-browse="manage"] #pane-studio #playlistAdd,
body[data-mobile-browse="manage"] #pane-studio .playlist-actions > label:first-child { display:block; }
#pane-studio .preview { padding:10px; }
#pane-studio .panel-head { align-items:center; }
#pane-studio .panel-head h2 { font-size:16px; margin:2px 0; }
#pane-studio .panel-head p,#pane-studio .panel-head .section-kicker,#pane-studio .preview-footer { display:none; }
#pane-studio .canvas-wrap { margin-top:8px; height:clamp(260px,45vh,440px); background:#050509; }
#pane-studio .effect-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#pane-studio .effect-art { height:auto; aspect-ratio:1; }
#pane-studio .effects-section,#pane-studio .media-studio,#pane-studio .text-studio { margin-top:0; }
.mobile-schedule p { line-height:1.6; margin-top:12px; color:#bab4c6; }
@media(max-width:500px) { .content { padding:8px 10px 100px; } .mobile-f-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); } }
.admin-entry { display:block; width:100%; margin:0 0 14px; min-height:45px; color:#eedbff; border-color:#76599e; }
.admin-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.admin-panel > p,.admin-block p { color:#a9adbd; line-height:1.55; font-size:13px; }
.admin-block { margin-top:18px; padding:16px; background:#171b29; border:1px solid #353849; border-radius:10px; }
.admin-block h3 { margin:0 0 8px; }
.admin-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:end; gap:10px; margin:14px 0; }
.admin-form label { display:grid; gap:6px; font-size:12px; color:#bbbccd; }
.admin-form input,.admin-form select { width:100%; min-height:44px; padding:10px; border:1px solid #414558; border-radius:7px; background:#0c101b; color:white; font-size:14px; }
.admin-form .primary-btn { margin:0; min-height:44px; }
.admin-list-wrap { overflow:auto; margin-top:12px; }
.admin-list-wrap table { width:100%; border-collapse:collapse; font-size:12px; text-align:left; }
.admin-list-wrap th,.admin-list-wrap td { padding:9px; border-bottom:1px solid #363a4b; white-space:nowrap; }
.admin-block .outline-btn { margin-top:12px; }
.my-devices { margin:18px 0; background:#171b29; }
.my-devices h3 { margin:0 0 8px; }
.my-devices p { color:#a9adbd; line-height:1.5; }
.my-devices ul { padding-left:20px; line-height:1.8; overflow-wrap:anywhere; }
#adminDevices select { min-height:38px; max-width:180px; padding:7px; border:1px solid #414558; border-radius:7px; background:#0c101b; color:#fff; }
.device-summary-row { display:flex; align-items:center; gap:10px; }
.device-summary-link { flex:1; min-width:0; border:0; padding:4px 0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.device-summary-send { flex:0 0 auto; width:auto; max-width:100%; margin:0; padding:10px 14px; white-space:nowrap; }
.device-summary-facts,.device-summary-message { margin:7px 0 0; font-size:12px; line-height:1.45; color:#b9bfce; overflow-wrap:anywhere; }
.device-summary-message { color:#cfb7ff; }
@media(max-width:380px) { .device-summary-row { flex-wrap:wrap; } .device-summary-link { flex:1 1 100%; } }
.mobile-f-form select { width:100%; min-height:42px; padding:8px; border:1px solid #45485a; border-radius:8px; background:#10121b; color:#fff; font-size:16px; }
#studioCanvas { display:block; width:min(320px,100%); aspect-ratio:1; margin:16px 0; border:1px solid #45485a; border-radius:10px; background:#090b14; }
.admin-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0; }
.admin-tabs button { min-height:48px; padding:9px; border:1px solid #464259; border-radius:9px; background:#202333; color:#e1def0; font:600 13px system-ui; cursor:pointer; }
.admin-tabs button.active { background:#493463; border-color:#ba91ff; color:#fff; }
.admin-block[hidden] { display:none !important; }
body[data-admin-view="true"] .step-tabs,body[data-admin-view="true"] .mobile-back-home,body[data-admin-view="true"] .device-summary,body[data-admin-view="true"] .mobile-nav,body[data-admin-view="true"] .sidebar { display:none !important; }
body[data-admin-view="true"] #adminGeometryHost #openAdmin,body[data-admin-view="true"] #adminGeometryHost .mobile-settings-account,body[data-admin-view="true"] #adminGeometryHost .mobile-settings-links { display:none !important; }
#adminGeometryHost #geometry { margin-top:16px; }
@media(max-width:700px) { .admin-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.studio-led { margin:18px 0; padding:16px; border:1px solid #373b4c; border-radius:10px; background:#101420; }
#studioLedCanvas { display:block; width:min(320px,100%); aspect-ratio:1; background:#080a12; border:1px solid #45485a; border-radius:10px; }
.studio-led label[hidden] { display:none !important; }
.studio-workspace { display:grid; grid-template-columns:minmax(220px,340px) minmax(0,1fr); gap:18px; margin:18px 0; align-items:start; }
.studio-preview-column,.studio-settings-column { min-width:0; border:1px solid #373b4c; border-radius:10px; background:#101420; padding:14px; }
.studio-preview-column h3,.studio-settings-column h3 { margin:0 0 8px; }
.studio-preview-column #studioCanvas,.studio-preview-column #studioLedCanvas { margin:8px auto 18px; }
.studio-settings-column .admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.studio-settings-column p { margin:12px 0; }
.studio-settings-column label[hidden] { display:none !important; }
@media(max-width:700px) { .studio-workspace { grid-template-columns:1fr; } .studio-preview-column #studioCanvas,.studio-preview-column #studioLedCanvas { margin-left:auto; margin-right:auto; } }
.admin-effect-library { margin:18px 0; padding:14px; border:1px solid #544963; border-radius:10px; background:#1d192b; }
.admin-effect-library label { display:grid; gap:6px; margin-top:12px; font-size:12px; color:#c7c2d4; }
.admin-effect-library select { width:100%; min-height:44px; padding:9px; border:1px solid #45485a; border-radius:8px; background:#10121b; color:#fff; }
.admin-effect-library .primary-btn { width:auto; margin:12px 0 0; padding:11px 14px; min-height:44px; }

#studioAutoDurationLabel[hidden] { display:none !important; }
.shared-effects { margin:14px 0; padding:14px; background:#191b2a; }
.shared-effects h3 { margin:0 0 6px; }.shared-effects p { color:#b4b5c7; line-height:1.5; }
.shared-effects select { flex:1; min-width:0; background:#0c101b; color:#fff; border:1px solid #45485a; border-radius:7px; padding:10px; }
.shared-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
.shared-items button { text-align:left; min-height:48px; border:1px solid #57516a; border-radius:8px; background:#292239; color:#f5eaff; padding:10px; overflow-wrap:anywhere; cursor:pointer; }
#imageThemes.image-folders { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;overflow:visible; }
#imageThemes.image-folders button { text-align:left;white-space:normal;min-height:52px;border-radius:9px;font-size:13px;padding:12px; }
#imageFolderContent h3 { margin:14px 0; }
.image-tile img { width:100%;aspect-ratio:1;display:block;object-fit:contain;background:#080a10; }
#sharedFolder { margin:12px 0; }