/* AppCreator  SPEC PACK (FINAL)  UI v2 (Isolated) */
:root{
  --bg:#0b0f14; --panel:#0f1620; --panel2:#0c121a; --text:#e8eef7; --muted:#9bb0c8;
  --line:#1d2a3a; --accent:#7cc4ff; --good:#66e3a4; --warn:#ffd36b; --bad:#ff6b8b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
html[data-theme="clean_light"]{
  --bg:#f5f7fb; --panel:#ffffff; --panel2:#f0f3f8; --text:#0c1220; --muted:#52657f; --line:#d6deea;
  --accent:#2563eb; --good:#059669; --warn:#b45309; --bad:#be123c;
}
html[data-theme="glass_cold"]{
  --bg:#05070b; --panel:#0b1018; --panel2:#070b12; --text:#eef6ff; --muted:#a4bad6; --line:#1b2a40;
  --accent:#93c5fd; --good:#7ce7bb; --warn:#ffe08a; --bad:#ff7ea0;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,196,255,.20), transparent 55%),
              radial-gradient(900px 400px at 80% 0%, rgba(102,227,164,.12), transparent 60%),
              var(--bg);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(to bottom, rgba(15,22,32,.95), rgba(15,22,32,.70));
  backdrop-filter: blur(8px); position:sticky; top:0; z-index:10;
}
html[data-theme="clean_light"] .topbar{
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.70));
}
.brand{display:flex; gap:12px; align-items:center;}
.dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(124,196,255,.15);}
.titles .name{font-weight:700; letter-spacing:.2px}
.titles .sub{font-size:12px; color:var(--muted); margin-top:2px}
.top-controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mode-indicators{display:flex; gap:8px; align-items:center}
.toggle{
  display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line);
  border-radius:999px; background: rgba(12,18,26,.6); color:var(--muted); user-select:none;
}
.toggle input{accent-color: var(--accent);}
.field-inline{
  display:flex; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--line);
  border-radius:999px; background: rgba(12,18,26,.6); color:var(--muted);
}
.field-inline__label{font-size:12px; color:var(--muted);}
.select-compact{padding:8px 10px; border-radius:999px;}
.layout{display:grid; grid-template-columns: 360px 1fr 420px; gap:12px; padding:12px;}
.panel{
  border:1px solid var(--line); border-radius:16px; background: rgba(15,22,32,.75);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow:hidden; min-height:calc(100vh - 86px);
}
html[data-theme="clean_light"] .panel{background: rgba(255,255,255,.75);}
.panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 10px 14px; border-bottom:1px solid var(--line); background: rgba(12,18,26,.65);
}
html[data-theme="clean_light"] .panel-header{ background: rgba(240,243,248,.85); }
.panel-header h2{margin:0; font-size:14px; letter-spacing:.35px; text-transform:uppercase; color:var(--muted)}
.pill{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(15,22,32,.7); color:var(--muted);}
.group{padding:12px 14px}
.group h3{margin:0 0 8px 0; font-size:13px; color:var(--text)}
.hint{margin-top:8px; font-size:12px; color:var(--muted); line-height:1.35}
.row{display:flex; gap:10px; align-items:center}
.select,.input,.textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
  background: rgba(12,18,26,.70); color: var(--text); outline:none;
}
html[data-theme="clean_light"] .select,
html[data-theme="clean_light"] .input,
html[data-theme="clean_light"] .textarea{ background: rgba(240,243,248,.85); color: var(--text); }
.textarea{resize:vertical; min-height:120px}
.btn{padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(12,18,26,.70); color:var(--text); cursor:pointer;}
html[data-theme="clean_light"] .btn{ background: rgba(240,243,248,.85); }
.btn:hover{border-color: rgba(124,196,255,.45)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{border-color: rgba(124,196,255,.45); background: rgba(124,196,255,.16);}
.btn-ghost{background: transparent;}
.divider{height:1px; background: var(--line); margin:4px 0}
.kv{display:grid; grid-template-columns: 120px 1fr; gap:8px 10px; align-items:center; font-size:12px;}
.k{color:var(--muted)} .v{color:var(--text)} .mono{font-family: var(--mono)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(12,18,26,.55); color: var(--muted);}
html[data-theme="clean_light"] .chip{ background: rgba(240,243,248,.85); }
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{padding:8px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(12,18,26,.65); color: var(--muted); cursor:pointer; font-size:12px;}
html[data-theme="clean_light"] .tab{ background: rgba(240,243,248,.85); }
.tab.is-active{color: var(--text); border-color: rgba(124,196,255,.45); background: rgba(124,196,255,.14);}
.pane{padding:12px 14px}
.pane-topline{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.hidden{display:none !important}
.canvas-wrap{border:1px solid var(--line); border-radius:16px; background: rgba(12,18,26,.60); overflow:hidden; height: 420px;}
html[data-theme="clean_light"] .canvas-wrap{ background: rgba(240,243,248,.85); }
.pipeline-svg{width:100%; height:100%}
.canvas-legend{padding:10px 2px; color:var(--muted); font-size:12px}
.form{display:grid; gap:12px}
.field .label{font-size:12px; color:var(--muted); margin-bottom:6px}
.code{
  margin:0; overflow:auto; padding:12px; font-family: var(--mono); font-size:12px; line-height:1.45;
  color: #dbe7f7; border:1px solid var(--line); border-radius:16px; background: rgba(12,18,26,.60);
}
html[data-theme="clean_light"] .code{ color:#0c1220; background: rgba(240,243,248,.85); }
.code-tall{min-height:160px}
.exec-body{padding-bottom:8px}
.artifact-list{display:grid; gap:8px;}
.artifact{padding:10px 12px; border:1px solid var(--line); border-radius:14px; background: rgba(12,18,26,.55);}
html[data-theme="clean_light"] .artifact{ background: rgba(240,243,248,.85); }
.artifact .title{font-size:12px; color:var(--text); margin-bottom:4px}
.artifact .meta{font-size:12px; color:var(--muted)}
.footerline{display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-top:1px solid var(--line); background: rgba(12,18,26,.65); color: var(--muted); font-size:12px;}
html[data-theme="clean_light"] .footerline{ background: rgba(240,243,248,.85); }
@media (max-width: 1100px){ .layout{grid-template-columns: 1fr} .canvas-wrap{height: 360px} }
/* === Theme Pack Set v1 (PM-locked) === */
html[data-theme="deep_forest"]{ --bg:#07110b; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.035); --text:rgba(235,245,238,.94); --muted:rgba(190,215,198,.70); --line:rgba(120,170,140,.18); --accent:#34d399; --good:#34d399; --warn:#fbbf24; --bad:#fb7185; }
html[data-theme="aurora_purple"]{ --bg:#0a0713; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04); --text:rgba(245,240,255,.94); --muted:rgba(210,195,235,.72); --line:rgba(167,139,250,.22); --accent:#a78bfa; --good:#34d399; --warn:#fbbf24; --bad:#fb7185; }
html[data-theme="neon_fjord"]{ --bg:#061018; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04); --text:rgba(235,250,255,.94); --muted:rgba(180,210,220,.72); --line:rgba(125,211,252,.22); --accent:#7dd3fc; --good:#34d399; --warn:#fbbf24; --bad:#fb7185; }
html[data-theme="ember"]{ --bg:#140808; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.04); --text:rgba(255,240,235,.94); --muted:rgba(230,190,180,.72); --line:rgba(251,146,60,.22); --accent:#fb923c; --good:#34d399; --warn:#fbbf24; --bad:#fb7185; }
html[data-theme="forest_light"]{ --bg:#f5fbf7; --panel:rgba(0,0,0,.03); --panel2:rgba(0,0,0,.045); --text:rgba(10,12,16,.92); --muted:rgba(10,12,16,.60); --line:rgba(16,185,129,.22); --accent:#10b981; --good:#059669; --warn:#b45309; --bad:#e11d48; }
html[data-theme="lavender_light"]{ --bg:#faf7ff; --panel:rgba(0,0,0,.03); --panel2:rgba(0,0,0,.045); --text:rgba(10,12,16,.92); --muted:rgba(10,12,16,.60); --line:rgba(167,139,250,.24); --accent:#7c3aed; --good:#059669; --warn:#b45309; --bad:#e11d48; }