#webStudioAdmin { container-type:inline-size; min-width:0; }
.main-content.web-studio-responsive-container { container-type:inline-size; }
.web-studio-stream-key { margin-top:20px; }
.web-studio-stream-key h2 { font-size:17px; margin:0 0 12px; }
.web-studio-key-form { display:grid; grid-template-columns:minmax(180px,560px) minmax(0,1fr); gap:16px; align-items:end; margin:16px 0; }
.web-studio-key-form>.field { min-width:0; margin:0; }
.web-studio-key-form input { width:100%; min-width:0; }
@container (max-width:650px) { .web-studio-key-form { grid-template-columns:minmax(0,1fr); } }
.web-studio-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-bottom:18px; }
.web-studio-toolbar>strong { min-width:150px; flex:1; font-size:18px; overflow-wrap:anywhere; }
.web-studio-toolbar>.help-text { color:var(--accent); }
.web-studio-editor { display:grid; grid-template-columns:240px minmax(0,1fr) 290px; grid-template-areas:'sources preview properties'; gap:18px; min-width:0; align-items:start; }
.web-studio-editor>.panel { margin:0; padding:18px; min-width:0; }
.web-studio-sidebar { grid-area:sources; max-height:var(--web-studio-height); overflow:auto; }
.web-studio-workspace { grid-area:preview; min-width:0; }
.web-studio-properties { grid-area:properties; max-height:var(--web-studio-height); overflow:auto; }
.web-studio-editor h2 { font-size:15px; margin:0 0 14px; }
.web-studio-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.web-studio-heading h2 { margin:0; }
.web-studio-heading .button { font-size:11px; min-height:32px; padding:7px 10px; }
.web-studio-scenes,.web-studio-layers { display:grid; gap:7px; }
.web-studio-scene,.web-studio-layer-row { width:100%; min-width:0; border:1px solid transparent; border-radius:7px; background:var(--input); color:var(--text); padding:11px; text-align:left; font-size:12px; line-height:1.45; overflow-wrap:anywhere; cursor:pointer; }
.web-studio-scene[aria-pressed=true],.web-studio-layer-row[aria-pressed=true] { border-color:var(--accent); background:#efbd9410; }
.web-studio-layer-row strong { display:block; font-size:12px; font-weight:550; }
.web-studio-layer-row .help-text { display:block; font-size:10px; margin-top:4px; }
.web-studio-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.web-studio-actions .button { white-space:normal; }
.web-studio-sidebar .web-studio-actions .button,.web-studio-properties .web-studio-actions .button { min-height:32px; font-size:10px; padding:7px 10px; }
.web-studio-section-title { border-top:1px solid var(--line); padding-top:22px; margin-top:22px!important; }
.web-studio-add-source { display:grid; gap:9px; border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }
.web-studio-add-source select { width:100%; min-width:0; }
.web-studio-resource-links { display:flex; gap:8px 16px; flex-wrap:wrap; margin-top:18px; }
.web-studio-resource-links .text-link { font-size:10px; }
.web-studio-trash { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
.web-studio-trash summary { cursor:pointer; font-size:11px; color:var(--quiet); }
.web-studio-trash-list { display:grid; gap:12px; margin-top:12px; }
.web-studio-trash-row { display:grid; gap:7px; font-size:11px; overflow-wrap:anywhere; }
.web-studio-trash-row .button { min-height:30px; font-size:10px; padding:6px 10px; justify-self:start; }
.web-studio-canvas-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; min-height:35px; }
.web-studio-canvas-tools .button { min-height:32px; font-size:10px; padding:7px 10px; }
.web-studio-canvas-tools select { width:auto; min-width:130px; max-width:100%; min-height:32px; font-size:11px; padding:6px 10px; }
.web-studio-viewport { height:calc(var(--web-studio-height) - 118px); min-height:220px; display:grid; place-content:safe center; place-items:center; border:1px solid var(--line); border-radius:10px; background:#0c0d10; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; min-width:0; }
.web-studio-stage { position:relative; flex:none; outline:none; overflow:hidden; background:#000; box-shadow:0 0 0 1px #6d7079; }
.web-studio-stage:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.web-studio-output,.web-studio-render-plane,.web-studio-hitboxes,.web-studio-central-plane { position:absolute; inset:0; width:100%; height:100%; }
.web-studio-output { pointer-events:none; }
.web-studio-render-plane { overflow:hidden; isolation:isolate; }
.web-studio-preview-layer { position:absolute; overflow:hidden; pointer-events:none; }
.web-studio-preview-image,.web-studio-preview-video { display:block; width:100%; height:100%; object-fit:contain; }
.web-studio-source-note { position:absolute; inset:0; display:grid; place-items:center; padding:12px; color:#aab2bf; background:#13151b99; text-align:center; font:12px/1.6 system-ui,sans-serif; overflow-wrap:anywhere; }
.web-studio-hitboxes { pointer-events:none; }
.web-studio-hitbox { position:absolute; pointer-events:auto; cursor:move; touch-action:none; }
.web-studio-hitbox[data-selected=true] { box-shadow:inset 0 0 0 2px var(--accent); z-index:3; }
.web-studio-hitbox[data-locked=true] { cursor:default; }
.web-studio-hitbox[data-locked=true][data-selected=true] { box-shadow:inset 0 0 0 2px #a1afc4; }
.web-studio-resize { position:absolute; bottom:1px; right:1px; width:20px; height:20px; display:none; place-items:center; background:var(--accent); color:#211c17; font-size:14px; line-height:1; cursor:nwse-resize; border-radius:3px 0 0 0; }
.web-studio-hitbox[data-selected=true]:not([data-locked=true])>.web-studio-resize { display:grid; }
.web-studio-canvas-info { text-align:center; font-size:10px; margin:10px 0 0; color:var(--quiet); }
.web-studio-preview-info { font-size:11px; margin:10px 0 0; min-height:1.6em; }
.web-studio-fields { border:0; margin:0; padding:0; min-width:0; }
.web-studio-fields+.web-studio-fields { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.web-studio-fields>.field,.web-studio-source-fields>.field { margin-bottom:15px; }
.web-studio-fields input,.web-studio-fields select { width:100%; min-width:0; }
.web-studio-fields label { font-size:11px; }
.web-studio-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-bottom:16px; }
.web-studio-field-grid .field { margin:0; }
.web-studio-field-grid input { min-height:36px; padding:8px 10px; }
.web-studio-checks { display:flex; flex-wrap:wrap; gap:13px 18px; }
.web-studio-checks .field { display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-end; gap:7px; margin:0; }
.web-studio-checks input { width:16px; height:16px; flex:none; min-height:0; }
.web-studio-checks label { margin:0; font-weight:400; }
.web-studio-mixer { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.web-studio-mixer h3 { font-size:13px; margin:0 0 14px; }
.web-studio-mixer>.field { margin-bottom:15px; }
.web-studio-mixer>.help-text { font-size:10px; margin-top:15px; }
.web-studio-broadcast { margin-top:20px; }
.web-studio-broadcast h2 { font-size:17px; margin:0 0 12px; }
.web-studio-broadcast>.help-text { margin:6px 0; }
.web-studio-duration { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.web-studio-duration select { width:290px; max-width:100%; }
.web-studio-duration input { width:140px; }
.web-studio-server-preview { margin-top:14px; }
.web-studio-server-preview summary { cursor:pointer; font-size:12px; }
.web-studio-server-preview img { display:block; width:100%; max-height:50dvh; object-fit:contain; background:#000; border:1px solid var(--line); margin-top:12px; }
@container (min-width:2300px) { .web-studio-editor { grid-template-columns:290px minmax(0,1fr) 350px; gap:24px; } .web-studio-editor>.panel { padding:24px; } .web-studio-layer-row,.web-studio-scene { padding:14px; font-size:14px; } }
@container (max-width:1050px) { .web-studio-editor { grid-template-columns:215px minmax(0,1fr); grid-template-areas:'sources preview' 'properties properties'; } .web-studio-properties>form { display:block; } .web-studio-fields+.web-studio-fields { border-top:0; padding-top:0; margin-top:0; } }
@container (max-width:650px) { .web-studio-editor { grid-template-columns:minmax(0,1fr); grid-template-areas:'preview' 'sources' 'properties'; } .web-studio-sidebar { max-height:none; } .web-studio-properties>form { display:block; } .web-studio-fields+.web-studio-fields { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; } .web-studio-scenes { grid-template-columns:repeat(2,minmax(0,1fr)); } .web-studio-toolbar>.help-text { flex-basis:100%; } .web-studio-canvas-tools select { flex:1; } }
#webStudioAdmin { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'notice' 'toolbar' 'editor' 'output'; gap:18px; }
#webStudioAdmin>.web-studio-notice { grid-area:notice; margin:0; }
#webStudioAdmin>.web-studio-toolbar { grid-area:toolbar; margin:0; }
#webStudioAdmin>.web-studio-editor { grid-area:editor; height:var(--web-studio-height, min(760px,max(360px,calc(100dvh - 270px)))); align-items:stretch; }
#webStudioAdmin>.web-studio-output-settings { grid-area:output; margin:0; min-width:0; }
.web-studio-sidebar,.web-studio-properties { max-height:var(--web-studio-height); }
.web-studio-viewport { height:calc(var(--web-studio-height) - 86px); min-height:220px; }
.web-studio-canvas-tools { padding:8px; border:1px solid var(--line); border-radius:8px; background:#13151a; }
.web-studio-canvas-tools .button { min-height:36px; font-size:12px; }
.web-studio-zoom-value { min-width:42px; color:var(--quiet); text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.web-studio-source-fields:before { content:'Gestaltung'; display:block; margin:4px 0 14px; color:var(--text); font-size:13px; font-weight:650; }
.web-studio-mixer { padding:18px 14px 4px; border:1px solid var(--line); border-radius:8px; background:#13151a; }
.web-studio-mixer h3 { letter-spacing:.02em; }
.web-studio-broadcast { border-color:#765e4c; }
.web-studio-stream-key { border-color:#3d414c; }
@container (max-width:1050px) { #webStudioAdmin>.web-studio-editor { height:auto; } .web-studio-properties { max-height:none; } }
@container (max-width:650px) { .web-studio-sidebar,.web-studio-properties { max-height:none; } }
body.admin-panel #webStudioAdmin .web-studio-editor,
body.admin-panel #webStudioAdmin .web-studio-editor>.panel,
body.admin-panel #webStudioAdmin .web-studio-output-settings,
body.admin-panel #webStudioAdmin .web-studio-broadcast,
body.admin-panel #webStudioAdmin .web-studio-stream-key { min-width:0; }
body.admin-panel #webStudioAdmin .web-studio-output-settings>summary { cursor:pointer; padding:10px 12px; border:1px solid var(--line); background:#13151a; }
body.admin-panel #webStudioAdmin .web-studio-output-settings[open]>summary { margin-bottom:12px; }
body.admin-panel #webStudioAdmin .web-studio-broadcast .web-studio-actions .button,
body.admin-panel #webStudioAdmin .web-studio-key-form .button { max-width:100%; white-space:normal; }
body.admin-panel #webStudioAdmin .web-studio-duration :is(input,select) { box-sizing:border-box; max-width:100%; min-width:0; }
body.admin-panel #webStudioAdmin .web-studio-server-preview img { max-width:100%; }
@container (max-width:420px) {
  body.admin-panel #webStudioAdmin .web-studio-field-grid { grid-template-columns:minmax(0,1fr); }
  body.admin-panel #webStudioAdmin .web-studio-checks { gap:10px; }
  body.admin-panel #webStudioAdmin .web-studio-duration { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  body.admin-panel #webStudioAdmin .web-studio-duration :is(input,select) { width:100%; }
}