.banner-studio{--s-bg:#fff;--s-panel:#f8f9fa;--s-line:#dadfe4;--s-text:#25313d;--s-muted:#687783;--s-accent:#087f8c;--s-selected:#e4f3f4;--s-canvas:#e9edef;color:var(--s-text);background:var(--s-bg);border:1px solid var(--s-line);border-radius:6px;overflow:hidden;min-width:0;text-align:start;letter-spacing:0}
form:has([data-banner-studio]),form:has([data-banner-studio])>.form-tab-panel{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%}
form:has([data-banner-studio])>*{min-width:0;max-width:100%}
[data-banner-studio],.studio-workspace>*,.studio-viewport{min-width:0;max-width:100%}
body:has([data-banner-studio]) .admin-menu{position:static}
@media(max-width:560px){form:has([data-banner-studio]) .form-tab-panel{padding:8px}.form-tabs button{flex-basis:70px;font-size:11px}.studio-header>div{flex-wrap:wrap}}
[data-theme=dark] .banner-studio{--s-bg:#1b2026;--s-panel:#242a31;--s-line:#414a53;--s-text:#edf1f4;--s-muted:#b0bdc5;--s-accent:#63ced5;--s-selected:#173b42;--s-canvas:#11161a}
.banner-studio *{box-sizing:border-box;letter-spacing:0}.banner-studio button,.banner-studio input,.banner-studio textarea,.banner-studio select{font-family:inherit;font-size:12px}.banner-studio button{cursor:pointer;color:inherit}.banner-studio button:disabled{opacity:.4;cursor:not-allowed}.banner-studio button:focus-visible,.banner-studio input:focus-visible,.banner-studio select:focus-visible,.banner-studio textarea:focus-visible{outline:2px solid var(--s-accent);outline-offset:2px}
.studio-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 14px;border-bottom:1px solid var(--s-line)}.studio-header>div{display:flex;align-items:center;gap:12px}.studio-header strong{font-size:15px;white-space:nowrap}.studio-size{font-size:12px;color:var(--s-muted);direction:ltr;white-space:nowrap}.studio-tools{display:flex;flex-wrap:wrap;gap:3px!important}.studio-divider{height:22px;border-inline-start:1px solid var(--s-line);margin:0 5px}
.banner-studio .studio-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;min-width:32px;padding:6px;border:1px solid transparent;border-radius:4px;background:transparent;line-height:1}.banner-studio svg{width:17px;height:17px;stroke-width:1.75;flex-shrink:0}.studio-icon:hover,.studio-icon[aria-pressed=true]{background:var(--s-selected);color:var(--s-accent)}.studio-workspace{display:grid;grid-template-columns:210px minmax(260px,1fr) 228px;min-height:500px;align-items:stretch}.studio-sidebar{background:var(--s-panel);border-inline-end:1px solid var(--s-line);min-width:0}.studio-tabs{display:flex;border-bottom:1px solid var(--s-line);margin:0;padding:0;gap:0}.studio-tabs button{flex:1;min-width:0;padding:12px 3px;background:none;border:0;border-bottom:2px solid transparent;line-height:1.5;overflow-wrap:anywhere}.studio-tabs button.active{color:var(--s-accent);border-bottom-color:var(--s-accent);font-weight:700}.studio-side-content{padding:10px;overflow:auto;max-height:570px}.studio-layer-list{display:grid;gap:3px;font-size:12px;color:var(--s-muted)}.studio-layer-row{display:flex;align-items:center;gap:2px;border:1px solid transparent;border-radius:4px;min-width:0;height:42px}.studio-layer-row.active{border-color:var(--s-accent);background:var(--s-selected)}.studio-layer-name{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:100%;border:0;background:none;padding:6px;text-align:start;color:var(--s-text)!important}.studio-layer-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.studio-layer-actions{display:flex;gap:1px;margin-top:16px;border-top:1px solid var(--s-line);padding-top:8px;flex-wrap:wrap}.studio-center{min-width:0;display:flex;flex-direction:column;background:var(--s-canvas)}.studio-insert{min-height:48px;display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:6px 10px;background:var(--s-bg);border-bottom:1px solid var(--s-line)}.studio-insert select{width:auto;max-width:160px}.studio-viewport{direction:ltr;flex:1;min-height:360px;max-height:650px;overflow:auto;padding:30px 24px;display:grid;align-items:center;justify-items:center;background-image:linear-gradient(45deg,#80808009 25%,transparent 25%),linear-gradient(-45deg,#80808009 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#80808009 75%),linear-gradient(-45deg,transparent 75%,#80808009 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.studio-artboard-space{position:relative;flex-shrink:0;box-shadow:0 4px 16px #0002}.studio-artboard{position:absolute;top:0;left:0;transform-origin:top left;background:#fff;overflow:hidden;touch-action:none;outline:1px solid #0001;text-align:left}.studio-background,.studio-elements{position:absolute;inset:0}.studio-background img,.studio-background video{width:100%;height:100%;display:block}.studio-elements{pointer-events:none}.studio-element{position:absolute;overflow:hidden;pointer-events:auto;touch-action:none;user-select:none;box-sizing:border-box;cursor:move;line-height:1.25;white-space:pre-wrap;overflow-wrap:anywhere;align-items:flex-start}.studio-element[data-type=button]{align-items:center;justify-content:center;padding:4px}.studio-element[data-type=text] .studio-text{width:100%;display:block}.studio-element img{width:100%;height:100%;display:block;pointer-events:none}.studio-element.is-selected{outline:2px solid #15a3b6;outline-offset:-1px}.studio-element.is-locked{cursor:default}.studio-element.is-selected:after{content:"";position:absolute;inset:0;border:1px dashed #fff8;pointer-events:none}.studio-status{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:7px 12px;min-height:44px;background:var(--s-bg);border-top:1px solid var(--s-line);font-size:11px}.studio-status label{display:flex!important;align-items:center;gap:6px;flex-shrink:0;margin:0!important}.studio-status select{width:90px!important}.studio-message{min-width:0;color:var(--s-muted);overflow-wrap:anywhere;line-height:1.5}.studio-message.is-error{color:#cc4258}.studio-inspector{border-inline-start:1px solid var(--s-line);background:var(--s-panel);padding:12px;min-width:0}.studio-inspector h3{font-size:12px;color:var(--s-muted);font-weight:500;margin:0 0 12px}.studio-inspector h4{font-size:13px;margin:0 0 10px}.studio-selection-head{display:flex;align-items:center;justify-content:space-between}.studio-selection-head h4{margin:0}.studio-properties{max-height:565px;overflow:auto}.banner-studio label{display:grid;gap:5px;margin:0 0 10px;font-size:11px;font-weight:400;color:var(--s-muted)}.banner-studio input:not([type=file]),.banner-studio select,.banner-studio textarea{width:100%;min-width:0;max-width:100%;height:32px;min-height:0;padding:5px 7px;border:1px solid var(--s-line);border-radius:4px;box-shadow:none;background:var(--s-bg);color:var(--s-text);line-height:1.4}.banner-studio textarea{height:auto;resize:vertical}.banner-studio input[type=color]{padding:3px;cursor:pointer}.banner-studio input[type=number]{direction:ltr}.studio-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.studio-properties fieldset{margin:0;padding:0;border:0;min-width:0}.studio-align-tools{display:flex;justify-content:space-between;gap:0;margin:8px 0 12px}.studio-align-tools .studio-icon{min-width:28px;width:28px;height:28px;flex-basis:28px}.studio-format{display:flex;align-items:center;gap:5px;margin-bottom:12px}.studio-format label{margin:0;flex:1}.studio-command{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px solid var(--s-line);border-radius:4px;background:var(--s-bg);font-weight:600;line-height:1.6;white-space:normal;margin-bottom:10px}.studio-command.primary{background:#087f8c;color:white;border-color:#087f8c}.studio-assets{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:12px;color:var(--s-muted)}.studio-asset{aspect-ratio:1;border:1px solid var(--s-line);border-radius:4px;overflow:hidden;padding:0;background:var(--s-bg)}.studio-asset img,.studio-asset video{width:100%;height:100%;object-fit:contain;display:block}.studio-ai-notice{font-size:11px;line-height:1.8;color:var(--s-muted);margin:12px 0}.studio-ai-result img{display:block;width:100%;height:auto;margin-bottom:10px;border-radius:4px}.studio-draft{border:0;background:none;font-size:11px;color:var(--s-accent)!important;text-decoration:underline}.studio-draft[hidden]{display:none}
@media(max-width:1200px){.studio-workspace{grid-template-columns:180px minmax(220px,1fr) 200px}.studio-side-content{padding:6px}.studio-inspector{padding:8px}.studio-tabs button{font-size:11px}.studio-align-tools{flex-wrap:wrap;justify-content:start}}
@media(max-width:900px){.studio-workspace{grid-template-columns:180px minmax(180px,1fr)}.studio-inspector{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--s-line)}.studio-properties{max-height:none}.studio-properties fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}.studio-properties .studio-field-grid{grid-column:1/-1;grid-template-columns:repeat(6,minmax(0,1fr))}.studio-align-tools{grid-column:1/-1;margin:0}.studio-viewport{min-height:300px}.studio-selection-head{margin-bottom:8px}.studio-header{flex-wrap:wrap}}
@media(max-width:560px){.studio-workspace{display:flex;flex-direction:column}.studio-center{order:0}.studio-sidebar{order:1;border-inline-end:0;border-top:1px solid var(--s-line)}.studio-inspector{order:2}.studio-side-content{max-height:240px;padding:10px}.studio-layer-list{grid-template-columns:minmax(0,1fr)}.studio-layer-actions{margin-top:8px}.studio-viewport{min-height:210px;padding:24px 12px;max-height:500px}.studio-insert{padding:6px;gap:1px}.studio-header{padding:8px}.studio-header>div{gap:8px}.studio-header strong{font-size:14px}.studio-properties fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-properties .studio-field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.studio-status{padding:7px;flex-wrap:wrap}.studio-assets{grid-template-columns:repeat(4,minmax(0,1fr))}.studio-ai-result img{max-height:200px;object-fit:contain}.studio-tabs button{font-size:12px}.studio-insert select{max-width:115px}}