body.studio-mode { background:#0b1419; color:#e9e4d8; display:block; }
.studio-shell { width:min(1480px,100%); min-height:100svh; margin:0 auto; padding:22px clamp(16px,3vw,42px) 48px; }
.studio-header { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.studio-header-actions { display:flex; align-items:center; gap:18px; }
.save-status { color:#7fa78f; font-size:.72rem; }.save-status.error { color:#e57b72; }
.studio-link { color:#dfe8e3; text-decoration:none; border:1px solid #587078; border-radius:5px; padding:9px 13px; font-size:.78rem; }
.header-button { color:#aebfbc; background:transparent; border:0; padding:7px 2px; font:inherit; font-size:.72rem; cursor:pointer; }
.header-button:hover { color:#f0d28f; }
.studio-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:48px 0 26px; }
.studio-intro h1 { font-size:clamp(2.4rem,5vw,4rem); }
.studio-intro p:last-child { color:#91a6a5; margin:11px 0 0; max-width:650px; }
.primary-button,.secondary-button,.danger-button { border:0; border-radius:5px; font:inherit; font-size:.78rem; font-weight:700; padding:11px 14px; white-space:nowrap; cursor:pointer; }
.primary-button { color:#172015; background:#eabf62; box-shadow:0 6px 22px #eabf6228; }
.secondary-button { color:#c8d5d1; background:#294149; border:1px solid #4d6870; }
.danger-button { color:#cf8c87; background:transparent; border:1px solid #744b4b; }
.secondary-button:disabled,.danger-button:disabled { opacity:.35; cursor:not-allowed; }
.studio-layout { display:grid; grid-template-columns:290px minmax(0,1fr); gap:18px; align-items:start; }
.library-column { display:grid; gap:18px; }
.studio-card { background:#111f25; border:1px solid #304750; border-radius:8px; box-shadow:0 16px 50px #0003; }
.library-column .studio-card { padding:16px; }
.card-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.card-heading div { display:grid; gap:3px; }.card-heading span,.toolbox-label { color:#eabf62; font-size:.61rem; letter-spacing:.16em; font-weight:800; }.card-heading strong { color:#dce5e1; font-size:.9rem; }
.studio-input { width:100%; color:#e9e4d8; background:#0c181d; border:1px solid #39515a; border-radius:5px; padding:10px 11px; font:inherit; font-size:.82rem; outline:none; }
.studio-input:focus { border-color:#eabf62; box-shadow:0 0 0 2px #eabf621b; }
.level-list,.published-list { display:grid; gap:7px; margin-top:11px; max-height:310px; overflow:auto; }
.level-row { display:flex; align-items:center; gap:9px; min-width:0; padding:10px; border:1px solid #2c424a; border-radius:5px; background:#14252b; cursor:pointer; }
.level-row.active { border-color:#eabf62; background:#1c2b2e; }.type-chip { flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:4px; color:#17201c; background:#8fb8af; font-size:.64rem; font-weight:900; }.level-row-text { min-width:0; flex:1; }.level-row strong,.level-row small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }.level-row strong { color:#dfe7e3; font-size:.76rem; }.level-row small { color:#78908f; font-size:.66rem; margin-top:2px; }
.published-row { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:7px; padding:8px; color:#cbd7d3; background:#14252b; border-radius:5px; font-size:.72rem; }.order-number { color:#eabf62; font-weight:800; }.row-actions { display:flex; gap:3px; }.mini-button { border:0; color:#91a5a4; background:#233940; border-radius:3px; width:24px; height:24px; cursor:pointer; }.mini-button:hover { color:#fff; background:#34515a; }.card-note { color:#708685; font-size:.67rem; line-height:1.45; margin:13px 2px 0; }.card-note a { color:#bca36f; text-decoration:none; }.card-note a:hover { color:#efd28e; }
.editor-column { min-height:690px; padding:20px; }.empty-editor { min-height:645px; display:grid; place-content:center; text-align:center; color:#7d9392; }.empty-editor h2 { color:#d5deda; margin:12px 0 5px; }.empty-editor p { margin:0; }.empty-glyph { width:54px; height:54px; display:grid; place-items:center; margin:auto; border:1px dashed #557078; border-radius:50%; color:#eabf62; font-size:1.6rem; }
.editor-topbar { display:flex; align-items:end; gap:10px; margin-bottom:12px; }.field { display:grid; gap:6px; }.field.grow { flex:1; }.field label { color:#819493; font-size:.65rem; letter-spacing:.08em; font-weight:700; text-transform:uppercase; }
.panel-bar { display:flex; align-items:center; gap:8px; padding:18px 0 13px; border-bottom:1px solid #2d434b; }.panel-tabs { display:flex; flex:1; gap:7px; overflow:auto; }.panel-tab { border:1px solid #3b535b; color:#92a6a4; background:#132329; border-radius:50%; width:32px; height:32px; flex:0 0 auto; cursor:pointer; }.panel-tab.active { color:#172017; border-color:#eabf62; background:#eabf62; }
.design-workspace { display:grid; grid-template-columns:128px minmax(300px,560px) minmax(155px,1fr); gap:22px; align-items:start; padding-top:22px; }.toolbox { display:grid; gap:10px; }.toolbox>div { display:grid; gap:7px; }.tool-button { display:flex; align-items:center; gap:8px; color:#aebfbc; background:#15262c; border:1px solid #314950; border-radius:5px; padding:9px; font:inherit; font-size:.7rem; cursor:pointer; text-align:left; }.tool-button.active { color:#f2d28d; border-color:#eabf62; background:#27302d; }.tool-icon { display:grid; place-items:center; width:22px; height:22px; color:#0e171b; background:#91aaa6; border-radius:4px; font-size:.65rem; font-weight:900; }
.tool-button[data-tool="silver"] .tool-icon { color:#303a3a; background:#aeb8b7; }.tool-button[data-tool="gold"] .tool-icon { color:#4c3818; background:#c5a35b; }
.design-canvas-wrap { min-width:0; }.design-canvas-wrap canvas { width:100%; aspect-ratio:1; display:block; background:#0d1b20; border:1px solid #3a535b; border-radius:7px; touch-action:none; cursor:crosshair; }.design-hint { color:#7f9493; font-size:.72rem; text-align:center; min-height:1em; margin:10px 0 0; }.panel-settings { display:grid; gap:15px; }.legend { display:grid; grid-template-columns:auto 20px; align-items:center; gap:8px; color:#78908e; font-size:.62rem; }.legend i { display:block; width:15px; height:15px; }.start-swatch { border-radius:50%; border:2px solid #eabf62; }.end-swatch { border-radius:50%; border:2px solid #d8e4db; }.studio-tip { color:#809593; background:#0d191e; border:1px solid #293e46; border-radius:6px; padding:11px; font-size:.7rem; line-height:1.5; }.studio-tip strong { color:#cad6d2; }.studio-tip p { margin:5px 0 0; }
@media(max-width:900px){.studio-layout{grid-template-columns:1fr}.library-column{grid-template-columns:1fr 1fr}.design-workspace{grid-template-columns:110px minmax(280px,1fr)}.panel-settings{grid-column:1/-1;grid-template-columns:160px 1fr;align-items:start}.editor-column{min-height:auto}}
@media(max-width:620px){.studio-shell{padding:16px}.studio-intro{align-items:flex-start;flex-direction:column;padding-top:34px}.studio-intro .primary-button{width:100%}.library-column{grid-template-columns:1fr}.editor-topbar{display:grid;grid-template-columns:1fr 1fr}.editor-topbar .grow{grid-column:1/-1}.design-workspace{grid-template-columns:1fr}.toolbox>div{display:flex;overflow:auto}.tool-button{flex:0 0 auto}.panel-settings{grid-column:auto;grid-template-columns:1fr}.panel-bar{flex-wrap:wrap}.panel-tabs{flex-basis:100%}.save-status{display:none}.studio-header-actions{gap:9px}.header-button{font-size:.65rem}}