.dev-banner{display:flex;align-items:center;gap:20px;padding:20px 24px;border:1px solid var(--line);border-radius:16px;margin-bottom:30px}.dev-banner p{font-size:12px;margin:0;flex:1}.dev-banner .pill{background:var(--soft);color:var(--accent)}.dev-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:25px;align-items:start}.dev-controls{padding:24px}.dev-controls h2{font-size:20px}.dev-controls label{font-size:11px}.dev-controls .secondary{margin-top:23px;width:100%}.dev-controls .text-button{margin-top:13px}.dev-numbers{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.dev-workspace{min-width:0}.dev-editor{padding:24px}.dev-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.dev-editor .code-input{font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:330px;tab-size:2;white-space:pre;resize:vertical;box-shadow:none;border:1px solid var(--line);background:#211e2a;color:#e9e2f5;border-radius:10px;padding:15px}.dev-editor label{margin-top:0}.dev-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}.dev-actions label{font-size:10px;margin:0 0 0 auto}.dev-actions select{width:auto;max-width:220px;font-size:11px}.dev-preview-shell{margin-top:24px;background:var(--soft);padding:15px;border-radius:16px}#dev-preview{display:block;width:100%;height:620px;margin:0 auto;border:0;background:white;border-radius:10px}#dev-preview[data-size=tablet]{max-width:768px}#dev-preview[data-size=phone]{max-width:390px}.dev-bottom{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:30px}.dev-bottom h2{margin-top:12px}.dev-bottom input[type=file]{margin-top:8px;font-size:11px}.dev-bottom p{font-size:12px}.dev-bottom .text-button{display:inline-block;margin-top:15px}.advanced-entry{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:28px;font-size:12px}.advanced-entry a{margin-left:auto;color:var(--accent);font-weight:650}
@media(max-width:1150px){.dev-layout{grid-template-columns:1fr}.dev-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.dev-controls h2,.dev-controls .hint,.dev-numbers{grid-column:1/-1}.dev-controls label{align-self:center;margin:0}.dev-controls .secondary{margin:0}.dev-controls .text-button{margin:0}.dev-numbers{grid-template-columns:repeat(4,1fr)}.dev-numbers label{display:block;margin-bottom:8px}}
@media(max-width:720px){.sidebar nav{flex-wrap:wrap}.sidebar nav a{flex-basis:45%}.dev-banner{flex-wrap:wrap;padding:18px}.dev-banner p{flex-basis:70%}.dev-banner .primary{width:100%}.dev-editor{padding:18px}.dev-editor-grid{grid-template-columns:1fr}.dev-editor .code-input{min-height:260px}.dev-bottom{grid-template-columns:1fr}.dev-numbers{grid-template-columns:1fr 1fr;gap:12px}.dev-actions{gap:14px}.dev-actions label{margin-left:0}.dev-actions .primary{width:100%}.dev-preview-shell{padding:8px}#dev-preview{height:530px}.advanced-entry{flex-wrap:wrap}.advanced-entry a{margin-left:0}.dev-bottom .card{min-width:0}}