/* WP STL Gen UI — fills the page and improves control legibility */
:root {
  --wpstl-bg: #ffffff;
  --wpstl-panel: #151922;
  --wpstl-panel-2: #0f1320;
  --wpstl-accent: #4cc2ff;
  --wpstl-text: #000000;
  --wpstl-text-dim: #a9b3c3;
  --wpstl-border: rgb(229, 231, 235);
  --wpstl-focus: #7fd1ff;
  --wpstl-radius: 0px;
  --wpstl-gap: 12px;
  --wpstl-sm: 12px;
  --wpstl-md: 14px;
  --wpstl-lg: 16px;
  --wpstl-number-width: 120px;
  --wpstl-toggle-width: 52px;
  --accent:#0ea5e9;
}
.wpstl-app {
  display: grid;
  /*grid-template-columns: minmax(320px, 400px) 1fr;*/
  grid-template-rows: 1fr;
  gap: var(--wpstl-gap);
  min-height: 300px;
  max-height:800px;
  width: 100%;
  box-sizing: border-box;
  background: var(--wpstl-bg);
  color: var(--wpstl-text);
  font-size:var(--wpstl-sm);
  padding: clamp(8px, 2vw, 16px);
}
.wpstl-badge{
   display:inline-block;
   font-size:12px;
   line-height:1;
   padding:4px 8px;
   border-radius:999px;
   background:rgba(14,165,233,.12);
   color:#0369a1;
   border:1px solid rgba(14,165,233,.35);
   user-select:none;
 }
.wpstl-controls {
  background: linear-gradient(180deg, var(--wpstl-panel), var(--wpstl-panel-2));
  border: 1px solid var(--wpstl-border);
  border-radius: var(--wpstl-radius);
  padding: 14px;
  overflow: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wpstl-group { border: 0px solid var(--wpstl-border); border-radius: 10px; padding: 0px; background: rgba(255,255,255,0.02); }
.wpstl-group > .wpstl-title { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--wpstl-text-dim); margin-bottom: 10px; }
.wpstl-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 8px 0; }
.wpstl-row .wpstl-label { font-size: var(--wpstl-md); color: var(--wpstl-text); }
.wpstl-input, .wpstl-select {
  width: 100%;
  background: #0b0f18; color: var(--wpstl-text); border: 1px solid var(--wpstl-border);
  border-radius: 10px; padding: 10px 12px; font-size: var(--wpstl-md); outline: none;
}
.wpstl-input:focus, .wpstl-select:focus { border-color: var(--wpstl-focus); box-shadow: 0 0 0 3px rgba(127, 209, 255, 0.15); }
.wpstl-input[type="number"] { width: var(--wpstl-number-width); text-align: right; }
.wpstl-toggle { position: relative; width: var(--wpstl-toggle-width); height: 28px; background: #0b0f18;
  border: 1px solid var(--wpstl-border); border-radius: 999px; cursor: pointer; transition: background .2s; }
.wpstl-toggle[data-on="true"] { background: #11324b; border-color: #1a4b6e; }
.wpstl-toggle .dot { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: var(--wpstl-text); border-radius: 50%;
  transition: transform .18s ease; }
.wpstl-toggle[data-on="true"] .dot { transform: translateX(calc(var(--wpstl-toggle-width) - 28px)); }
.wpstl-unit { font-size: 12px; opacity: .7; margin-left: 4px; }
.wpstl-viewport { position: relative; background: #06080d; border: 1px solid var(--wpstl-border); border-radius: var(--wpstl-radius); overflow: hidden; }
.wpstl-viewport > canvas, .wpstl-viewport .wpstl-canvas-host { position: absolute; inset: 0; }
.wpstl-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--wpstl-border);
  background: #0b0f18; position: sticky; top: 0; z-index: 2; border-top-left-radius: var(--wpstl-radius); border-top-right-radius: var(--wpstl-radius); }
.wpstl-toolbar .wpstl-btn { background: #122034; color: var(--wpstl-text); border: 1px solid var(--wpstl-border); border-radius: 10px;
  padding: 8px 12px; font-size: var(--wpstl-md); cursor: pointer; }
.wpstl-toolbar .wpstl-btn:hover { border-color: var(--wpstl-accent); }
.wpstl-toolbar .spacer { flex: 1; }
.wpstl-toolbar{display:flex;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid #e5e7eb;background:#fafafa;color:#111}
.wpstl-hint{opacity:.6;font-size:16px}
.wpstl-main{display:grid;grid-template-columns:25% 75%;gap:0;height:100%;width:100%;overflow:hidden;}
.wpstl-main>*{min-width:0;min-height:0}
.wpstl-controls{z-index:2;min-height:0;overflow:auto;}
.wpstl-viewport{z-index:1;overflow:hidden}
.wpstl-viewport{position:relative;background:linear-gradient(#eef2f7,#f7fafe);width:100%;height:100%;overflow:hidden;}
.wpstl-canvas-host{position:absolute;inset:0}
.wpstl-controls{display:flex;flex-direction:column;border-left:1px solid #e5e7eb;background:#fff}
.wpstl-controls-header{position:sticky;top:0;display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #e5e7eb;background:#ffffffee;backdrop-filter:saturate(1.2) blur(2px)}
.wpstl-controls-inner{padding:0px;overflow:auto;border-bottom: 1px solid #dfdfdf;}
.wpstl-controls-footer{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid #e5e7eb;background:#ffffffee;backdrop-filter:saturate(1.2) blur(2px)}
.wpstl-primary{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:white;font-weight:600;cursor:pointer}
.wpstl-export-more{position:relative}
.wpstl-ellipsis{width:40px;height:40px;border-radius:10px;border:1px solid #cbd5e1;background:#f8fafc;cursor:pointer}
[hidden]{display:none !important}
.wpstl-menu{position:absolute;right:0;bottom:48px;display:flex;flex-direction:column;border:1px solid #e5e7eb;background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden}
.wpstl-menu>button{padding:10px 14px;border:none;background:#fff;text-align:left;cursor:pointer}
.wpstl-menu>button:hover{background:#f1f5f9}

.wpstl-group{margin:0px;border:0px solid #e5e7eb;border-radius:12px;background:#fff}
.wpstl-group>summary{cursor:pointer;font-weight:600;padding:10px 12px;color:#000; font-size:var(--wpstl-lg);border: 1px solid #dfdfdf;}
.wpstl-group-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;background-color: rgb(248, 248, 248);border-left: 1px solid rgb(229, 231, 235);border-right: 1px solid rgb(229, 231, 235);}

.wpstl-row{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.wpstl-input,.wpstl-select{width:auto;padding:8px 10px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#111}

.wpstl-unit{opacity:.6;font-size:.85em;margin-left:6px}
.wpstl-stepper{display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd5e1;border-radius:10px;padding:2px 4px;background:#fff;width:auto}
.wpstl-stepper input{border:none;outline:none;width:100%;padding:6px 4px;background:transparent;color:#111}
.wpstl-stepper button{width:28px;height:28px;border-radius:8px;border:1px solid #e5e7eb;background:#f8fafc;cursor:pointer}
.wpstl-stepper .icon{opacity:.6;margin-left:4px}

.wpstl-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wpstl-tile{border:1px solid #cbd5e1;border-radius:10px;padding:8px;background:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center;height:54px}
.wpstl-tile.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.15)}
@media (max-width: 980px) {
  .wpstl-app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wpstl-controls { order: 2; }
  .wpstl-viewport { order: 1; min-height: 55svh; }
}
.wpstl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }