/* Gemeinsames Layout der CharmWerk Studio-Generatoren (Panel links, Bühne rechts) */
:root{
  --pine:#FFF8F3; --pine2:#FFFFFF; --line:#EFD8CE;
  --birch:#25212A; --muted:#746B7A; --primary:#8B5CF6; --primary-strong:#6D28D9;
  --primary-soft:#EDE9FE; --brass:var(--primary); --brass2:var(--primary-strong);
  --red:#C9344F; --sun:#FFD65A; --aqua:#4FC7D9; --mint:#8FDDB2;
  --lavender:#A88BFF; --cream:#FFFDF7; --shadow:0 18px 44px rgba(99,62,44,.13);
  --panel-w:340px;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#fff8f3 0%,#fffdf7 48%,#f3fbff 100%);
  color:var(--birch);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}
header{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 28px rgba(99,62,44,.06);
  backdrop-filter:saturate(1.2) blur(12px);
}
header::before{
  content:'';
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:8px;
  background:url('../../brand/charmwerk-studio-logo.png') center/contain no-repeat;
  box-shadow:0 0 0 1px rgba(139,92,246,.24), 0 8px 18px rgba(99,62,44,.08);
}
header h1{font-weight: 700; font-size:22px; color:#2A2530; letter-spacing:0}
header span{color:var(--muted); font-size:13px}
header .beta-badge{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  width:max-content;
  color:var(--brass2);
  border:1px solid rgba(109,40,217,.36);
  border-radius:999px;
  padding:2px 8px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0;
  line-height:1.35;
  white-space:nowrap;
  background:rgba(109,40,217,.1);
}
header a{color:#5f5368; font-size:13px; font-weight:700; text-decoration:none; margin-left:auto}
header a:hover{color:var(--brass2)}
main{flex:1; display:flex; min-height:0}

#panel{
  width:var(--panel-w); min-width:var(--panel-w);
  overflow-y:auto; overflow-x:hidden; padding:20px 18px 28px 20px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,#fffdfb 100%);
  box-shadow:8px 0 28px rgba(99,62,44,.06);
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(109,40,217,.38) rgba(239,216,206,.34);
}
#panel::-webkit-scrollbar{width:10px}
#panel::-webkit-scrollbar-track{
  background:rgba(239,216,206,.34);
  border-left:1px solid rgba(239,216,206,.72);
}
#panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(139,92,246,.72),rgba(79,199,217,.62));
  border:2px solid #fff;
  border-radius:999px;
}
#panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(109,40,217,.88),rgba(47,116,128,.78));
}
.group{
  margin:0;
  padding:0 0 18px;
  border-bottom:1px solid rgba(239,216,206,.72);
}
.group + .group{padding-top:18px}
.group:last-child{border-bottom:0; padding-bottom:0}
.group h2{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; text-transform:uppercase; letter-spacing:0;
  color:#5d5268; margin-bottom:12px; font-weight:800;
  line-height:1.2;
}
.group h2::after{
  content:'';
  height:1px;
  flex:1;
  background:linear-gradient(90deg,rgba(239,216,206,.95),rgba(239,216,206,0));
}
label.row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; margin:11px 0 5px; color:#2a2530; font-weight:700;
  line-height:1.25;
}
label.row output{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  color:var(--brass2);
  font-size:12px;
  line-height:1.35;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(139,92,246,.09);
  border:1px solid rgba(139,92,246,.16);
}
label.check{display:flex; gap:8px; align-items:center; font-size:13px; margin:9px 0}
label.check{
  min-height:38px;
  margin:8px -6px;
  padding:8px 10px;
  border-radius:8px;
  line-height:1.35;
  color:#3a3340;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
label.check:hover{background:rgba(139,92,246,.07); color:#241d22}
label.check input{width:16px; height:16px; flex:0 0 auto}
input[type=text], textarea{
  width:100%; min-height:44px; padding:11px 12px; font-size:16px; border-radius:8px;
  border:1px solid var(--line); background:var(--cream); color:var(--birch); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{min-height:98px; resize:vertical; line-height:1.35}
input[type=text]:hover, textarea:hover, select:hover{background:#fff}
input[type=text]:focus, textarea:focus{border-color:var(--brass); box-shadow:0 0 0 3px rgba(139,92,246,.14)}
input[type=range]{
  width:100%;
  min-height:32px;
  accent-color:var(--brass);
  cursor:pointer;
}
input[type=range]:focus-visible,
input[type=checkbox]:focus-visible,
button:focus-visible,
select:focus-visible{
  outline:2px solid rgba(109,40,217,.52);
  outline-offset:2px;
}
input[type=checkbox]{accent-color:var(--brass)}
select{
  width:100%; min-height:42px; padding:9px 10px; border-radius:8px; font-size:14px;
  border:1px solid var(--line); background:var(--cream); color:var(--birch);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.two{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px}
.fontpick{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fontpick button{
  min-height:42px; padding:9px 6px; border-radius:8px; border:1px solid var(--line);
  background:var(--cream); color:var(--birch); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.fontpick button:hover{border-color:var(--brass); color:var(--brass2)}
.fontpick button.sel{border-color:var(--brass); color:#241d22; background:rgba(139,92,246,.14)}
.colorrow{display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 4px}
.colorrow button{
  width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(37,33,42,.12);
  transition:box-shadow .15s ease, transform .15s ease;
}
.colorrow button:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(37,33,42,.16), 0 5px 12px rgba(99,62,44,.12)}
.colorrow button.sel{border-color:#fff; box-shadow:0 0 0 2px var(--pine2), 0 0 0 4px var(--brass)}
.btnrow{display:flex; gap:10px}
.btnrow button{
  flex:1; min-height:44px; padding:12px 10px; font-size:15px; font-weight: 700; border-radius:8px; cursor:pointer;
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btnrow button:hover{transform:translateY(-1px); box-shadow:0 8px 16px rgba(99,62,44,.12)}
.btnrow button:active,.fontpick button:active,.colorrow button:active{transform:translateY(0)}
#dlSvg{background:var(--brass); color:#ffffff; border-color:var(--brass); box-shadow:0 10px 20px rgba(139,92,246,.2)}
#dlSvg:hover{background:var(--brass2); border-color:var(--brass2)}
#dlStl{background:var(--mint); color:#1f3028; border-color:var(--mint)}
#dlStl:hover{background:#9ce9c0; border-color:#9ce9c0}
#dl3mf{background:#fff; color:#2f7480; border-color:var(--aqua)}
#dl3mf:hover{background:#f1fcff}
#dl3mfSep:not([hidden]){
  min-height:42px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
#dl3mfSep:not([hidden]):hover{
  background:rgba(139,92,246,.07) !important;
  border-color:var(--brass2) !important;
  transform:translateY(-1px);
}
.hint{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5}

#stage{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  min-width:0; overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72)),
    linear-gradient(90deg,rgba(139,92,246,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(79,199,217,.08) 1px,transparent 1px),
    linear-gradient(135deg,#fff8f3 0%,#f6fff9 48%,#f2fbff 100%);
  background-size:auto,28px 28px,28px 28px,auto;
}
#preview svg{max-width:100%; height:auto; display:block}
#preview{filter:drop-shadow(0 18px 24px rgba(99,62,44,.22)); max-width:calc(100% - 60px)}
.symbol-drag-target{
  fill:var(--symbol-color, var(--brass)); fill-rule:evenodd;
  stroke:transparent; stroke-width:5; pointer-events:visiblePainted;
  cursor:grab; touch-action:none; transition:fill .14s ease, filter .14s ease;
}
.text-drag-target{
  fill:var(--text-color, var(--brass)); fill-rule:evenodd;
  stroke:transparent; stroke-width:5; pointer-events:visiblePainted;
  cursor:grab; touch-action:none; transition:fill .14s ease, filter .14s ease;
}
.symbol-drag-target:hover,
.symbol-drag-target.symbol-drag-hover,
#stage.symbol-dragging .symbol-drag-target{
  fill:var(--brass2); filter:drop-shadow(0 0 5px rgba(109,40,217,.5));
}
.text-drag-target:hover,
.text-drag-target.text-drag-hover,
#stage.text-dragging .text-drag-target{
  fill:var(--brass2); filter:drop-shadow(0 0 5px rgba(109,40,217,.5));
}
#stage.symbol-dragging .symbol-drag-target{cursor:grabbing}
#stage.text-dragging .text-drag-target{cursor:grabbing}
#dims{position:absolute; top:14px; right:18px; font-size:12px; color:#675f70; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.74); border:1px solid var(--line); border-radius:8px; padding:4px 8px}
#viewpick{position:absolute; top:48px; right:18px; display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; z-index:3; background:#fff; box-shadow:0 8px 20px rgba(99,62,44,.08)}
#viewpick button{padding:5px 14px; font-size:12px; border:0; background:#fff; color:#675f70; cursor:pointer; font-weight:700}
#viewpick button.sel{background:rgba(79,199,217,.18); color:#2f7480}
#gl{position:absolute; inset:0; width:100%; height:100%; display:none; touch-action:none; cursor:grab; z-index:1}
#stage.view3d #preview{display:none}
#stage.view3d #gl{display:block}
#status{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  font-size:12.5px; text-align:center; max-width:80%;
  padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.82); border:1px solid var(--line);
}
#status.ok{color:#278656}
#status.ok::before{content:'✓ '}
#status.warn{color:var(--red)}

@media (max-width:780px){
  html,body{height:auto; min-height:100%}
  body{display:block}
  header{align-items:flex-start; flex-wrap:wrap}
  header h1{width:100%; font-size:21px}
  header span{line-height:1.4}
  header a{margin-left:0}
  main{display:flex; flex-direction:column; min-height:auto}
  #stage{order:-1; min-height:56vh; flex:none; padding:62px 12px 54px}
  #panel{
    width:100%; min-width:0; overflow:visible;
    border-right:none; border-top:1px solid var(--line);
    border-bottom:1px solid var(--line); box-shadow:none;
  }
  #preview{max-width:calc(100% - 24px)}
  #dims{top:14px; right:16px}
  #viewpick{top:48px; right:16px}
  #status{bottom:16px; max-width:calc(100% - 32px)}
}