*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,sans-serif;background:#edf1f5;color:#14233a}body{display:flex;flex-direction:column}header{background:#fff;border-bottom:1px solid #cfd7e2;display:flex;align-items:center;gap:18px;padding:10px 15px;min-height:58px}header strong{font-size:19px}header strong span{color:#1768ba}header small{color:#53667c}#connection{margin-left:auto;color:#58718b;font-size:12px}.grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px;padding:9px;min-height:0}.tile{background:white;display:flex;flex-direction:column;border:1px solid #d2dbe6;border-radius:8px;overflow:hidden;min-height:0;min-width:0}.bar{padding:8px 11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e4e8f0}.bar h2{font-size:15px;margin:0 8px 0 0}.state{font-size:12px;color:#536b84;flex:1}.controls{display:flex;gap:6px;align-items:center}button{padding:6px 12px;font:inherit;font-size:12px;border:1px solid #1e67ab;border-radius:5px;background:#1864a8;color:#fff;cursor:pointer}button.alt{background:white;color:#1d5c95;border-color:#b8cadb}button:disabled{opacity:.45;cursor:default}select{font:inherit;border:1px solid #c3d2df;border-radius:4px;background:white;padding:5px;font-size:12px}.body{flex:1;min-height:0;position:relative}.choose{height:100%;overflow:auto;padding:14px}.choose h3{margin:0 0 10px;font-size:16px}.choose .item{margin:0 0 10px}.choose .item label{display:block;font-size:12px;color:#627187;margin-bottom:4px}.choose select{width:100%;max-width:360px}.generate{margin-top:4px;font-weight:600}.codeview{height:100%;display:flex;flex-direction:column;background:#f7f9fd}.thinking{background:#e8eef7;border-bottom:1px solid #d6e1ed;max-height:25%;overflow:auto;font-size:11px;padding:6px 10px;white-space:pre-wrap;overflow-wrap:anywhere}.code{flex:1;overflow:auto;background:#111a27;color:#c9e4f9;padding:12px;margin:0;font:12px/1.48 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.scene{height:100%;display:flex;flex-direction:column}.scene iframe{flex:1;width:100%;border:0;background:#060d1c;min-height:0}.scenefoot{padding:6px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#64748b;align-items:center}.scenefoot .actions{display:flex;gap:6px}.scenefoot a{font-size:12px;background:#1764a8;color:white;text-decoration:none;padding:6px 10px;border-radius:4px}footer{font-size:10px;line-height:1.35;text-align:center;padding:5px 12px;background:#f9fbfe;border-top:1px solid #d9e2ed;color:#687789}@media(max-width:780px){body{min-height:100vh;height:auto}.grid{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(360px,1fr));flex:auto}.tile{min-height:360px}header small{display:none}}[hidden]{display:none!important}

/* Parameterauswahl: kompakte, mittig ausgerichtete Formular-Tabelle. */
.choose{display:flex;align-items:center;justify-content:center;padding:18px 24px}
.choice-panel{width:min(100%,430px);padding:22px 26px 20px;background:#fff;border:1px solid #dce5ef;border-radius:10px;box-shadow:0 4px 22px rgba(25,47,80,.075)}
.choice-panel h3{text-align:center;margin:0 0 19px;font-size:17px;color:#203956}
.choose .attributes{display:grid;grid-template-columns:minmax(105px, 1fr) minmax(150px,1.35fr);gap:10px 16px;align-items:center}
.choose .item{display:contents}
.choose .item label{font-size:13px;font-weight:600;color:#415775;margin:0}
.choose .item select{width:100%;max-width:none;font-size:13px;padding:7px 9px}
.choose .generate{display:block;width:100%;margin:20px auto 0;padding:10px 16px;font-size:13px}
@media(max-width:480px){.choose{padding:10px}.choice-panel{padding:16px}.choose .attributes{grid-template-columns:minmax(90px,1fr) minmax(130px,1.3fr);gap:9px}}
/* Dezent kontrastierende Syntaxfarben auf dunklem Hintergrund. */
.code .syn-keyword{color:#c4a7ff;font-weight:600}
.code .syn-string{color:#b3df9b}
.code .syn-number{color:#f5c17e}
.code .syn-comment{color:#92a0b3;font-style:italic}
.code .syn-tag{color:#85d8ff}
.code .syn-punct{color:#e0bbf9}
/* Nach den Layoutregeln erneut sicherstellen, dass inaktive Ansichten verborgen bleiben. */
[hidden]{display:none!important}

/* v0.6: Werbung innerhalb der bestehenden Headerhöhe. */
header .brand-link{color:inherit;text-decoration:none}header .brand-link:hover,header .brand-link:focus-visible{text-decoration:underline}
header .server-promo{flex:1;min-width:0;font-size:10px;line-height:1.15;color:#52677e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header .server-promo a{color:#1768ba;text-decoration:underline;font-weight:600}
header #connection{flex-shrink:0}
@media(max-width:780px){header .server-promo{display:block;font-size:9px}header{gap:8px}header strong{font-size:15px}}

/* v1.3: Auf Smartphones dürfen Code-Streams nicht das Grid aufziehen.
   Jede Kachel bekommt eine feste, bildschirmabhängige Höhe; nur der Inhalt scrollt. */
@media(max-width:780px){
  .grid{grid-template-rows:repeat(4,clamp(340px,65dvh,520px));flex:none;align-content:start}
  .tile{height:100%;min-height:0;min-width:0}
  .body,.codeview,.scene{min-height:0;min-width:0}
  .code{min-height:0;min-width:0;overscroll-behavior:contain}
}