/* ============================================================
     CARD STUDIO — application chrome (not exported)
     Vanilla CSS3, mobile-first.
     ============================================================ */
  :root {
    --bg: #0f1115;
    --bg-2: #161a22;
    --bg-3: #1d232e;
    --panel: #141821;
    --line: #2a313d;
    --line-2: #363f4d;
    --text: #e7ecf3;
    --text-dim: #9aa6b8;
    --text-faint: #66718a;
    --accent: #6d8bff;
    --accent-2: #55c2a2;
    --accent-ink: #0b1020;
    --danger: #ff6b6b;
    --radius: 10px;
    --shadow: 0 8px 30px rgba(0,0,0,.35);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  /* Fixed-height app shell: the page itself never scrolls; only inner
     regions (controls / preview / code) scroll within their own boxes.
     position:fixed takes the body out of flow so <html> has nothing to
     scroll — bulletproof against overflow-propagation quirks. */
  html, body { height: 100%; overflow: hidden; }
  body {
    margin: 0;
    position: fixed;
    inset: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
  }

  /* ---------- Top bar ---------- */
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    z-index: 20;
    flex-wrap: wrap;
  }
  .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
  .brand .logo {
    width: 30px; height: 30px; border-radius: 8px;
    background: conic-gradient(from 210deg, var(--accent), var(--accent-2), var(--accent));
    display: grid; place-items: center; color: var(--accent-ink);
    font-weight: 800; font-size: 15px; box-shadow: var(--shadow);
  }
  .brand h1 { font-size: 15px; margin: 0; letter-spacing: .2px; }
  .brand p { margin: 0; font-size: 11px; color: var(--text-faint); }

  .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  .btn {
    appearance: none; border: 1px solid var(--line-2);
    background: var(--bg-3); color: var(--text);
    padding: 7px 12px; border-radius: 8px; font-size: 12.5px;
    cursor: pointer; font-family: inherit; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color .15s, background .15s, transform .05s;
  }
  .btn:hover { border-color: var(--accent); }
  .btn:active { transform: translateY(1px); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn.ghost { background: transparent; }
  .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
  .btn svg { width: 15px; height: 15px; }

  select.preset {
    background: var(--bg-3); color: var(--text); border: 1px solid var(--line-2);
    padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-family: inherit;
  }

  /* ---------- Layout ---------- */
  .shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: 1fr;
    flex: 1 1 auto;   /* fills the space under the top bar; no magic numbers */
    min-height: 0;
    overflow: hidden; /* clip boundary so inner scroll can't propagate to the page */
  }
  .controls {
    border-right: 1px solid var(--line);
    background: var(--panel);
    overflow-y: auto;
    padding-bottom: 40px;
  }
  .workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* preview | code, 50% / 50% */
    min-width: 0;
    min-height: 0;
  }

  /* ---------- Accordion controls ---------- */
  .group { border-bottom: 1px solid var(--line); }
  .group > summary {
    list-style: none; cursor: pointer;
    padding: 12px 16px; font-weight: 700; font-size: 12.5px;
    display: flex; align-items: center; gap: 8px;
    color: var(--text); user-select: none;
    text-transform: uppercase; letter-spacing: .6px;
  }
  .group > summary::-webkit-details-marker { display: none; }
  .group > summary .chev {
    margin-left: auto; transition: transform .18s; color: var(--text-faint);
  }
  .group[open] > summary .chev { transform: rotate(90deg); }
  .group > summary .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  .group .body { padding: 4px 16px 16px; }

  .field { margin-bottom: 12px; }
  .field:last-child { margin-bottom: 0; }
  /* Plain field captions only — must NOT hit switch labels (they are inline-flex rows). */
  .field > label:not(.switch) {
    display: block; font-size: 11px; color: var(--text-dim);
    margin-bottom: 5px; font-weight: 600;
  }
  .row { display: flex; gap: 8px; }
  .row > .field { flex: 1; margin-bottom: 12px; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  input[type="text"], input[type="url"], input[type="number"], textarea, select {
    width: 100%; background: var(--bg); color: var(--text);
    border: 1px solid var(--line-2); border-radius: 7px;
    padding: 7px 9px; font-size: 12.5px; font-family: inherit;
  }
  textarea { resize: vertical; min-height: 58px; line-height: 1.4; }
  input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(109,139,255,.15);
  }
  input[type="range"] { width: 100%; accent-color: var(--accent); }
  .range-wrap { display: flex; align-items: center; gap: 8px; }
  .range-wrap output {
    min-width: 44px; text-align: right; font-size: 11.5px;
    color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: var(--mono);
  }

  .color-field { display: flex; align-items: center; gap: 8px; }
  .color-field input[type="color"] {
    width: 34px; height: 30px; padding: 0; border: 1px solid var(--line-2);
    border-radius: 7px; background: none; cursor: pointer;
  }
  .color-field input[type="text"] { flex: 1; font-family: var(--mono); font-size: 11.5px; }

  .switch {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    width: 100%; margin: 2px 0;
  }
  .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .switch .track {
    flex: 0 0 auto; display: block; box-sizing: border-box;
    width: 38px; height: 22px; border-radius: 22px; background: var(--bg-3);
    border: 1px solid var(--line-2); position: relative; transition: background .15s, border-color .15s;
  }
  .switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint);
    transition: transform .15s, background .15s;
  }
  .switch input:checked + .track { background: rgba(109,139,255,.35); border-color: var(--accent); }
  .switch input:checked + .track::after { transform: translateX(16px); background: var(--accent); }
  .switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(109,139,255,.25); }
  .switch .lbl { font-size: 12px; color: var(--text-dim); font-weight: 600; line-height: 1.3; }

  .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line-2); border-radius: 8px; padding: 2px; }
  .seg button {
    border: none; background: none; color: var(--text-dim);
    padding: 5px 9px; border-radius: 6px; cursor: pointer; font-size: 11.5px;
    font-family: inherit; font-weight: 600;
  }
  .seg button.on { background: var(--accent); color: var(--accent-ink); }

  .hint { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

  /* ---------- Sections editor ---------- */
  .sec-list { display: flex; flex-direction: column; gap: 10px; }
  .sec-card { border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); overflow: hidden; }
  .sec-head {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    background: var(--bg-3); border-bottom: 1px solid var(--line-2);
  }
  .sec-head .stype { font-size: 11px; font-weight: 700; text-transform: capitalize; letter-spacing: .3px; }
  .sec-head .badge {
    font-size: 9.5px; padding: 2px 6px; border-radius: 5px; background: rgba(109,139,255,.18);
    color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  }
  .sec-head .spacer { margin-left: auto; }
  .icon-btn {
    border: 1px solid transparent; background: none; color: var(--text-faint);
    width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
    display: grid; place-items: center; padding: 0;
  }
  .icon-btn:hover { color: var(--text); background: var(--bg-2); }
  .icon-btn.del:hover { color: var(--danger); }
  .icon-btn svg { width: 14px; height: 14px; }
  .icon-btn:disabled { opacity: .3; cursor: not-allowed; }
  .sec-body { padding: 10px; }

  .add-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
  .add-sec button {
    border: 1px dashed var(--line-2); background: var(--bg); color: var(--text-dim);
    border-radius: 8px; padding: 8px 4px; cursor: pointer; font-size: 10.5px; font-weight: 600;
    font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .add-sec button:hover { border-color: var(--accent); color: var(--text); }
  .add-sec button svg { width: 16px; height: 16px; }

  .field-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
  .field-row input, .field-row select { font-size: 11.5px; padding: 5px 7px; }
  .mini-add { font-size: 11px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 0; font-weight: 600; }

  /* ---------- Preview ---------- */
  .preview-wrap {
    position: relative; min-height: 0; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--line);
  }
  .preview-bar {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap;
  }
  .preview-bar .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); font-weight: 700; }
  .preview-canvas {
    flex: 1; min-height: 0; overflow: auto; position: relative;
  }
  #stageHost { display: block; min-height: 100%; }
  .canvas-light { background: #f2f4f8; background-image: radial-gradient(#d3d9e4 1px, transparent 1px); background-size: 18px 18px; }
  .canvas-dark  { background: #0c0e13; background-image: radial-gradient(#1c212b 1px, transparent 1px); background-size: 18px 18px; }
  .canvas-plain-light { background: #ffffff; }
  .canvas-plain-dark  { background: #10131a; }

  /* ---------- Code panel ---------- */
  .code-panel { background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; }
  .code-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
  .code-tabs .tab {
    border: none; background: none; color: var(--text-dim); padding: 7px 12px;
    border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; font-family: inherit;
    letter-spacing: .3px;
  }
  .code-tabs .tab.on { background: var(--bg-3); color: var(--text); }
  .code-tabs .spacer { margin-left: auto; }
  .code-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; }
  pre.code {
    margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
    color: #cdd6e6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 2;
  }
  pre.code .tk-tag { color: #7aa2ff; }
  pre.code .tk-attr { color: #55c2a2; }
  pre.code .tk-str { color: #e0a878; }
  pre.code .tk-com { color: #5a6577; font-style: italic; }
  pre.code .tk-key { color: #c792ea; }
  pre.code .tk-prop { color: #7aa2ff; }
  pre.code .tk-val { color: #e0a878; }
  pre.code .tk-num { color: #f78c6c; }

  .empty-note { color: var(--text-faint); font-size: 12px; padding: 6px 0; }

  /* ---------- Toast ---------- */
  .toast {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--accent-2); color: #04140f; padding: 10px 16px; border-radius: 9px;
    font-weight: 700; font-size: 13px; box-shadow: var(--shadow); opacity: 0;
    pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---------- Mobile ---------- */
  .mobile-tabs { display: none; }
  @media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .controls { border-right: none; border-bottom: 1px solid var(--line); }
    .workspace { grid-template-columns: 1fr; }
    .preview-wrap { border-right: none; }
    .mobile-tabs {
      display: flex; flex: 0 0 auto; z-index: 15;
      background: var(--bg-2); border-bottom: 1px solid var(--line);
    }
    .mobile-tabs button {
      flex: 1; border: none; background: none; color: var(--text-dim);
      padding: 11px; font-weight: 700; font-family: inherit; font-size: 12.5px; cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .mobile-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
    .m-hide { display: none !important; }
    .brand p { display: none; }
  }
  @media (max-width: 480px) {
    .add-sec { grid-template-columns: repeat(2, 1fr); }
    .toolbar .btn .txt { display: none; }
  }

/* ---- section ---- */

\n" + wrap + "\n" + css + "\n

/* ---- section ---- */

" + HOST_CSS + generateCSS() + "

/* ---- section ---- */

\n" + css + "\n

/* externalised inline-style utilities — CSP style-src 'self' */
.u-hidden{display:none}
.u-mb12{margin-bottom:12px}
.u-ml-auto{margin-left:auto}