/* ═══════════════════════════════════════════════════════════════
   DS BUILDER — Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:   #07080e;
  --surf: #0d0e17;
  --card: #12131e;
  --over: #181928;

  /* Borders */
  --b0: #1c1d2e;
  --b1: #242540;
  --b2: #2e3050;

  /* Text */
  --t0: #f0f1fb;  /* primary   — was #e2e4f6, ~14:1 on --bg  */
  --t1: #9ba0cc;  /* secondary — was #6b6e96, ~7.4:1 on --bg */
  --t2: #7578a8;  /* tertiary  — was #363856, ~4.6:1 on --bg  */

  /* Brand / accent */
  --blue:   #4f7cff;
  --blue-a: rgba(79,124,255,.11);
  --blue-b: rgba(79,124,255,.32);

  /* Prompt panel accents */
  --fig:   #9d7cff;
  --fig-a: rgba(157,124,255,.11);
  --fig-b: rgba(157,124,255,.3);
  --cld:   #ff6c45;
  --cld-a: rgba(255,108,69,.11);
  --cld-b: rgba(255,108,69,.3);
  --cdx:   #19c37d;
  --cdx-a: rgba(25,195,125,.11);
  --cdx-b: rgba(25,195,125,.3);

  /* Status */
  --ok:   #34d399;
  --warn: #f59e0b;
  --err:  #f87171;

  /* Typography */
  --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  --ui:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Misc */
  --r: 6px;
}

/* Demo / connected theme: swap blue → green */
body.theme-green {
  --blue:   #1EAA5C;
  --blue-a: rgba(30,170,92,.11);
  --blue-b: rgba(30,170,92,.32);
}

body {
  transition: --blue .3s;
  background:  var(--bg);
  color:       var(--t0);
  font-family: var(--ui);
  font-size:   13px;
  display:     flex;
  flex-direction: column;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height:        48px;
  background:    var(--surf);
  border-bottom: 1px solid var(--b0);
  display:       flex;
  align-items:   center;
  padding:       0 16px;
  gap:           10px;
  flex-shrink:   0;
}

.logo {
  font-family:  var(--mono);
  font-size:    11px;
  font-weight:  700;
  color:        #4f7cff;
  letter-spacing: .08em;
  display:      flex;
  align-items:  center;
  gap:          8px;
  white-space:  nowrap;
  flex-shrink:  0;
}

.logo-ring {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  border:        2px solid #4f7cff;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.logo-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #4f7cff;
  box-shadow:    0 0 10px #4f7cff;
}

.tb-sep {
  width:      1px;
  height:     20px;
  background: var(--b1);
  flex-shrink: 0;
}

.url-wrap {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--card);
  border:        1px solid var(--b1);
  border-radius: var(--r);
  padding:       0 10px;
  height:        32px;
  transition:    .15s;
  min-width:     0;
}
.url-wrap:focus-within { border-color: var(--b2); }

.url-icon {
  font-size:   11px;
  color:       var(--t2);
  flex-shrink: 0;
}

.url-input {
  flex:       1;
  background: none;
  border:     none;
  color:      var(--t0);
  font:       12px var(--mono);
  outline:    none;
  min-width:  0;
}
.url-input::placeholder { color: var(--t2); }

.url-status {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--b2);
  flex-shrink:   0;
  transition:    .2s;
}
.url-status.live    { background: var(--ok);   box-shadow: 0 0 6px var(--ok); }
.url-status.err     { background: var(--err); }
.url-status.loading { background: var(--warn); animation: blink .8s ease-in-out infinite; }

/* Topbar buttons */
.tb-btn {
  height:        32px;
  padding:       0 14px;
  border-radius: var(--r);
  font:          12px var(--ui);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           6px;
  transition:    .12s;
  white-space:   nowrap;
  flex-shrink:   0;
}

.tb-btn.ghost { background: transparent; border: 1px solid var(--b1); color: var(--t1); }
.tb-btn.ghost:hover { border-color: var(--b2); color: var(--t0); }

.tb-btn.primary {
  background:  #4f7cff;
  border:      1px solid #4f7cff;
  color:       #fff;
  font-weight: 500;
  transition:  all .25s;
}
.tb-btn.primary:hover     { filter: brightness(1.1); }
.tb-btn.primary.connected { background: #1EAA5C; border-color: #1EAA5C; }

/* Demo button */
.tb-btn.demo {
  background:  rgba(79,124,255,.10);
  border:      1px solid rgba(79,124,255,.35);
  color:       #4f7cff;
  transition:  all .25s;
  gap:         7px;
}
.tb-btn.demo:hover { background: rgba(79,124,255,.18); }
.tb-btn.demo .d-icon {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  border:        1.5px solid #4f7cff;
  display:       inline-block;
  flex-shrink:   0;
  transition:    all .3s;
  background:    transparent;
}
.tb-btn.demo.demo-active              { background: rgba(30,170,92,.12); border-color: rgba(30,170,92,.4); color: #1EAA5C; font-weight: 500; }
#libraryBtn { gap: 5px; }
#libraryBtn.has-entries { border-color: rgba(79,124,255,.35); color: var(--blue); }
.tb-btn.demo.demo-active:hover        { background: rgba(30,170,92,.18); }
.tb-btn.demo.demo-active .d-icon      { background: #1EAA5C; border-color: #1EAA5C; box-shadow: 0 0 7px #1EAA5C, 0 0 14px rgba(30,170,92,.4); }

/* Canvas button */
#canvasBtn { gap: 7px; }
#canvasBtn .c-icon {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  border:        1.5px solid var(--t2);
  display:       inline-block;
  flex-shrink:   0;
  transition:    all .3s;
  background:    transparent;
}
#canvasBtn.canvas-active              { background: rgba(30,170,92,.12); border-color: rgba(30,170,92,.4); color: #1EAA5C; font-weight: 500; }
#canvasBtn.canvas-active:hover        { background: rgba(30,170,92,.18); }
#canvasBtn.canvas-active .c-icon      { background: #1EAA5C; border-color: #1EAA5C; box-shadow: 0 0 7px #1EAA5C, 0 0 14px rgba(30,170,92,.4); }

/* API key */
.key-lbl {
  font-family:     var(--mono);
  font-size:       9px;
  color:           var(--t2);
  letter-spacing:  .06em;
  white-space:     nowrap;
}
.key-input {
  width:      150px;
  background: none;
  border:     none;
  color:      var(--t1);
  font:       11px var(--mono);
  outline:    none;
  transition: color .2s;
}
.key-input::placeholder { color: var(--t2); }
.key-input.ok { color: var(--ok); }

.key-wrap {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    var(--card);
  border:        1px solid var(--b1);
  border-radius: var(--r);
  padding:       0 10px;
  height:        32px;
  flex-shrink:   0;
  min-width:     0;
  transition:    border-color .2s;
}
.key-wrap.active { border-color: rgba(52,211,153,.5); }

/* ── Error banner ────────────────────────────────────────────── */
.err-banner {
  background:    rgba(248,113,113,.07);
  border-bottom: 1px solid rgba(248,113,113,.2);
  padding:       0 16px;
  display:       none;
  align-items:   center;
  gap:           10px;
  flex-shrink:   0;
  font-size:     12px;
  color:         var(--err);
  min-height:    38px;
}
.err-banner.show { display: flex; }

.err-banner-msg   { flex: 1; font-family: var(--mono); font-size: 11px; }
.err-banner-btn   { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); border-radius: var(--r); padding: 4px 11px; color: var(--err); font: 11px var(--ui); cursor: pointer; white-space: nowrap; transition: .1s; flex-shrink: 0; }
.err-banner-btn:hover { background: rgba(248,113,113,.2); }
.err-banner-close { color: var(--err); opacity: .5; cursor: pointer; font-size: 14px; flex-shrink: 0; padding: 0 4px; }
.err-banner-close:hover { opacity: 1; }

/* ── Trial banner (site-wide, time-boxed promo) ─────────────────── */
.trial-banner {
  background:    rgba(52,211,153,.09);
  border-bottom: 1px solid rgba(52,211,153,.25);
  padding:       0 16px;
  align-items:   center;
  justify-content: center;
  gap:           10px;
  flex-shrink:   0;
  font-size:     12px;
  color:         var(--ok);
  min-height:    36px;
}
.trial-banner.show { display: flex; }
.trial-banner-text { font-family: var(--mono); font-size: 11px; letter-spacing: .01em; }
.trial-banner-text strong { font-weight: 700; }
#trialBannerDays { opacity: .85; }
.trial-banner-close { color: var(--ok); opacity: .5; cursor: pointer; font-size: 13px; flex-shrink: 0; padding: 0 4px; background: none; border: none; }
.trial-banner-close:hover { opacity: 1; }

/* ── Cookie consent (fixed bottom bar) ──────────────────────────── */
.cookie-banner {
  position:     fixed;
  left:         16px;
  right:        16px;
  bottom:       16px;
  z-index:      200;
  background:   var(--card);
  border:       1px solid var(--b1);
  border-radius: var(--r);
  padding:      14px 16px;
  display:      none;
  align-items:  center;
  gap:          16px;
  box-shadow:   0 12px 32px rgba(0,0,0,.45);
  max-width:    640px;
  margin:       0 auto;
}
.cookie-banner.show { display: flex; }
.cookie-banner-text { flex: 1; font-family: var(--ui); font-size: 12px; line-height: 1.5; color: var(--t1); }
.cookie-banner-btns { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn { height: 32px; padding: 0 14px; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; cursor: pointer; transition: .12s; white-space: nowrap; }
.cookie-btn.reject { background: none; border: 1px solid var(--b1); color: var(--t1); }
.cookie-btn.reject:hover { border-color: var(--b2); color: var(--t0); }
.cookie-btn.accept { background: var(--blue); border: none; color: #fff; }
.cookie-btn.accept:hover { filter: brightness(1.12); }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner-btns { justify-content: flex-end; }
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-bg {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.7);
  display:         none;
  align-items:     center;
  justify-content: center;
  z-index:         100;
  backdrop-filter: blur(4px);
}
.modal-bg.open { display: flex; }

.modal {
  background:    var(--surf);
  border:        1px solid var(--b1);
  border-radius: 12px;
  width:         540px;
  overflow:      hidden;
  box-shadow:    0 32px 80px rgba(0,0,0,.6);
}

.modal-head    { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.modal-title   { font-size: 15px; font-weight: 600; color: var(--t0); }
.modal-sub     { font-size: 12px; color: var(--t1); margin-top: 3px; }
.modal-close   { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--b1); background: transparent; color: var(--t1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: .1s; }
.modal-close:hover { border-color: var(--b2); color: var(--t0); }

.conn-tabs   { display: flex; padding: 16px 24px 0; border-bottom: 1px solid var(--b0); margin-top: 16px; }
.conn-tab    { padding: 8px 16px; font: 11.5px var(--mono); color: var(--t2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .1s; letter-spacing: .04em; text-transform: uppercase; }
.conn-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.conn-tab:hover:not(.active) { color: var(--t1); }

.conn-body  { padding: 20px 24px 24px; }
.conn-pane  { display: none; }
.conn-pane.active { display: block; }

.conn-row   { display: flex; gap: 8px; margin-bottom: 12px; }
.conn-input { flex: 1; background: var(--card); border: 1px solid var(--b1); border-radius: var(--r); padding: 9px 12px; color: var(--t0); font: 12px var(--mono); outline: none; transition: .12s; }
.conn-input:focus { border-color: var(--b2); }
.conn-hint  { font-size: 11px; color: var(--t1); line-height: 1.6; margin-bottom: 14px; }
.conn-hint code { font-family: var(--mono); font-size: 10px; background: var(--over); border: 1px solid var(--b1); border-radius: 4px; padding: 1px 5px; color: var(--t0); }

.bookmarklet { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-a); border: 1px solid var(--blue-b); border-radius: var(--r); padding: 7px 14px; font: 11px var(--mono); color: var(--blue); text-decoration: none; cursor: move; transition: .12s; }
.bookmarklet:hover { background: rgba(79,124,255,.2); }

.conn-ta { width: 100%; background: var(--card); border: 1px solid var(--b1); border-radius: var(--r); padding: 10px 12px; color: var(--t0); font: 11px var(--mono); resize: none; height: 100px; outline: none; line-height: 1.55; margin-bottom: 10px; }
.conn-ta:focus { border-color: var(--b2); }

.conn-status { font: 10.5px var(--mono); color: var(--t2); padding: 8px 10px; background: var(--card); border: 1px solid var(--b0); border-radius: var(--r); min-height: 32px; }

/* ── Main layout grid ────────────────────────────────────────── */
.layout {
  flex:      1;
  display:   grid;
  grid-template-columns: 220px 1fr 360px;
  overflow:  hidden;
  min-height: 0;
  transition: grid-template-columns .2s;
}

/* Canvas mode: replace normal sidebar content with canvas sidebar */
.layout.canvas-mode .sidebar-head,
.layout.canvas-mode .sb-meta,
.layout.canvas-mode .tree           { display: none; }
.layout.canvas-mode .canvas-sidebar { display: flex !important; }

/* Canvas mode: show canvas viewport, hide storybook viewport */
.layout.canvas-mode #emptyState,
.layout.canvas-mode #vpScroll       { display: none !important; }
.layout.canvas-mode #canvasViewport { display: flex; }

/* Canvas mode: right panel empty until an image is selected */
.layout.canvas-mode .prompt-panel .canvas-panel-empty { display: flex; }
.layout.canvas-mode .prompt-panel .pp-tabs,
.layout.canvas-mode .prompt-panel .vision-strip,
.layout.canvas-mode .prompt-panel .ctx-row,
.layout.canvas-mode .prompt-panel .pp-pane { display: none !important; }

/* canvas-has-image: reveal prompt panel content */
.layout.canvas-mode.canvas-has-image .prompt-panel .canvas-panel-empty { display: none !important; }
.layout.canvas-mode.canvas-has-image .prompt-panel .pp-tabs             { display: flex !important; }
.layout.canvas-mode.canvas-has-image .prompt-panel .ctx-row             { display: flex !important; }
.layout.canvas-mode.canvas-has-image .prompt-panel .pp-pane.on          { display: flex !important; }


/* ── Left sidebar ────────────────────────────────────────────── */
.sidebar {
  background:    var(--surf);
  border-right:  1px solid var(--b0);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}

.sidebar-head { padding: 10px; border-bottom: 1px solid var(--b0); flex-shrink: 0; }

.search {
  width:             100%;
  background:        var(--card);
  border:            1px solid var(--b0);
  border-radius:     var(--r);
  padding:           7px 10px 7px 30px;
  color:             var(--t0);
  font:              12px var(--ui);
  outline:           none;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23363856' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
}
.search::placeholder { color: var(--t2); }

.sb-meta { padding: 5px 10px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--b0); font: 9.5px var(--mono); color: var(--t2); flex-shrink: 0; }

.sb-dot             { width: 5px; height: 5px; border-radius: 50%; background: var(--b2); flex-shrink: 0; transition: .2s; }
.sb-dot.live        { background: var(--ok); }
.sb-dot.loading     { background: var(--warn); animation: blink .8s ease-in-out infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.tree { flex: 1; overflow-y: auto; padding: 4px 0 16px; scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }

.grp       { font: 9px var(--mono); color: var(--t2); letter-spacing: .12em; text-transform: uppercase; padding: 10px 10px 3px; }
.item      { display: flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: pointer; color: var(--t1); transition: .08s; user-select: none; position: relative; }
.item:hover { background: var(--card); color: var(--t0); }
.item.active { background: var(--blue-a); color: var(--blue); }
.item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); border-radius: 0 1px 1px 0; }
.item-dot   { width: 4px; height: 4px; border-radius: 50%; background: var(--b2); flex-shrink: 0; }
.item.active .item-dot { background: var(--blue); }
.item-name  { font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-ct    { font: 9px var(--mono); color: var(--t2); background: var(--card); border: 1px solid var(--b0); border-radius: 8px; padding: 1px 5px; flex-shrink: 0; }
.item.active .item-ct { background: var(--blue-a); border-color: var(--blue-b); color: var(--blue); }

/* ── Canvas sidebar ──────────────────────────────────────────── */
.canvas-sidebar { display: none; flex-direction: column; flex: 1; overflow: hidden; }

.cvsb-head  { padding: 8px 10px 6px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--b0); flex-shrink: 0; }
.cvsb-title { font: 9px var(--mono); color: var(--t2); letter-spacing: .1em; }
.cvsb-add   { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--b1); background: transparent; color: var(--t1); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: .1s; flex-shrink: 0; }
.cvsb-add:hover { border-color: var(--b2); color: var(--t0); }

.canvas-upload-area {
  margin:          10px;
  border:          1.5px dashed var(--b1);
  border-radius:   8px;
  padding:         16px 10px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  cursor:          pointer;
  transition:      .15s;
  flex-shrink:     0;
  text-align:      center;
}
.canvas-upload-area:hover,
.canvas-upload-area.over { border-color: rgba(30,170,92,.5); background: rgba(30,170,92,.05); }

.cva-icon  { font-size: 18px; color: var(--t2); line-height: 1; }
.cva-text  { font-size: 11px; color: var(--t1); font-weight: 500; }
.cva-types { font: 9px var(--mono); color: var(--t2); letter-spacing: .06em; }

/* Draggable image list */
.canvas-img-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
.cvl-empty       { font: 10px var(--mono); color: var(--t2); text-align: center; padding: 20px 10px; }

.cv-item { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 6px; cursor: pointer; transition: .08s; border: 1px solid transparent; position: relative; user-select: none; }
.cv-item:hover         { background: var(--card); }
.cv-item.active        { background: rgba(30,170,92,.08); border-color: rgba(30,170,92,.25); }
.cv-item.dragging      { opacity: .35; background: var(--card); }
.cv-item.drag-over     { border-top: 2px solid #1EAA5C; background: rgba(30,170,92,.06); }

.cv-grip  { width: 12px; flex-shrink: 0; color: var(--t2); font-size: 11px; cursor: grab; opacity: 0; transition: opacity .1s; user-select: none; line-height: 1; letter-spacing: -1px; }
.cv-grip:active           { cursor: grabbing; }
.cv-item:hover .cv-grip   { opacity: 1; }

.cv-thumb { width: 34px; height: 34px; border-radius: 4px; border: 1px solid var(--b1); background-size: cover; background-position: center; background-color: var(--card); flex-shrink: 0; }

.cv-info  { flex: 1; min-width: 0; }
.cv-name  { font-size: 11px; color: var(--t0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cv-type  { font: 9px var(--mono); color: var(--t2); margin-top: 2px; }

.cv-del   { font-size: 11px; color: var(--t2); cursor: pointer; padding: 3px 5px; border-radius: 3px; opacity: 0; transition: .1s; flex-shrink: 0; }
.cv-item:hover .cv-del { opacity: 1; }
.cv-del:hover          { color: var(--err); }

/* ── Center preview ─────────────────────────────────────────── */
.preview-area {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  background:     var(--bg);
}

.preview-head {
  background:    var(--surf);
  border-bottom: 1px solid var(--b0);
  padding:       10px 16px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-shrink:   0;
}

.comp-title { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.comp-path  { font: 10px var(--mono); color: var(--t2); margin-top: 2px; }

.ph-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.vp-btns { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--b0); border-radius: var(--r); padding: 2px; }
.vp-btn  { background: transparent; border: none; border-radius: 4px; padding: 4px 8px; color: var(--t2); font: 10px var(--mono); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: .1s; white-space: nowrap; }
.vp-btn:hover { color: var(--t1); background: rgba(255,255,255,.04); }
.vp-btn.on    { background: var(--over); color: var(--t0); box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.open-btn { background: transparent; border: 1px solid var(--b1); border-radius: var(--r); padding: 5px 11px; color: var(--t1); font: 11px var(--ui); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: .1s; flex-shrink: 0; }
.open-btn:hover { border-color: var(--b2); color: var(--t0); }

.variants-bar { background: var(--surf); border-bottom: 1px solid var(--b0); padding: 7px 16px; display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; min-height: 36px; align-items: center; }

.vp      { background: var(--card); border: 1px solid var(--b0); border-radius: 20px; padding: 3px 10px; font: 10.5px var(--mono); color: var(--t2); cursor: pointer; transition: .1s; white-space: nowrap; }
.vp:hover { color: var(--t1); border-color: var(--b1); }
.vp.on    { color: var(--blue); border-color: var(--blue-b); background: var(--blue-a); }

.preview-stage {
  flex:           1;
  overflow:       hidden;
  position:       relative;
  display:        flex;
  flex-direction: column;
  background:     var(--bg);
}
.preview-stage > iframe { flex: 1; border: none; display: none; width: 100%; height: 100%; }

/* Storybook iframe viewport */
.vp-scroll { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 24px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
.vp-frame  { flex-shrink: 0; position: relative; transition: width .2s; min-height: 500px; display: flex; flex-direction: column; }

.vp-frame.vp-desktop { width: 100%; }
.vp-frame.vp-mobile  { width: 375px; box-shadow: 0 0 0 1px var(--b1), 0 8px 40px rgba(0,0,0,.6); }
.vp-frame.vp-tablet  { width: 768px; box-shadow: 0 0 0 1px var(--b1), 0 6px 28px rgba(0,0,0,.4); }

.vp-frame iframe                  { width: 100%; height: 680px; border: none; flex-shrink: 0; }
.vp-frame.vp-mobile iframe,
.vp-frame.vp-tablet iframe        { height: 600px; }

.preview-fallback { flex: 1; display: none; align-items: center; justify-content: center; padding: 40px; background: var(--bg); min-height: 500px; width: 100%; }

.vp-ruler { text-align: center; font: 9px var(--mono); color: var(--t2); padding: 8px 0 0; letter-spacing: .06em; flex-shrink: 0; }

.iframe-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; background: var(--bg); z-index: 5; pointer-events: none; }
.iframe-loading.show { display: flex; }
.iframe-spinner { width: 28px; height: 28px; border: 2.5px solid var(--b1); border-top-color: #1EAA5C; border-radius: 50%; animation: spin .8s linear infinite; }
.iframe-loading-txt { font: 11px var(--mono); color: var(--t2); }

.preview-empty       { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--t2); }
.preview-empty-icon  { font-size: 36px; opacity: .4; }
.preview-empty-title { font-size: 13px; color: var(--t1); font-weight: 500; }
.preview-empty-sub   { font-size: 11px; text-align: center; max-width: 260px; line-height: 1.6; }

/* ── Canvas viewport ─────────────────────────────────────────── */
.canvas-viewport {
  display:     none;
  flex:        1;
  flex-direction: column;
  align-items: center;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding:     28px 0 48px;
  gap:         0;
  background:  var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--b2) transparent;
}

.cvp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--t2); padding: 60px 20px; text-align: center; width: 100%; }

.cvp-item {
  flex-shrink: 0;
  overflow:    hidden;
  cursor:      pointer;
  position:    relative;
  width:       375px;
  transition:  opacity .1s;
}
.cvp-item + .cvp-item { margin-top: 24px; }
.cvp-item:hover         { opacity: .9; }
.cvp-item.active .cvp-label { border-top: 2px solid #1EAA5C; }
.cvp-item img           { width: 100%; height: auto; display: block; }

/* Viewport-driven widths */
.canvas-viewport[data-vp="mobile"]  .cvp-item { width: 375px; }
.canvas-viewport[data-vp="tablet"]  .cvp-item { width: 768px; }
.canvas-viewport[data-vp="desktop"] .cvp-item { width: 100%; }

.cvp-label {
  position:        absolute;
  bottom: 0; left: 0; right: 0;
  padding:         7px 12px;
  background:      rgba(7,8,14,.78);
  backdrop-filter: blur(6px);
  font:            10px var(--mono);
  color:           var(--t1);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
}

.cvp-badge {
  font:            8px var(--mono);
  letter-spacing:  .06em;
  color:           #1EAA5C;
  background:      rgba(30,170,92,.12);
  border:          1px solid rgba(30,170,92,.3);
  border-radius:   3px;
  padding:         1px 5px;
  flex-shrink:     0;
}

/* ── Right prompt panel ─────────────────────────────────────── */
.prompt-panel {
  background:     var(--surf);
  border-left:    1px solid var(--b0);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  position:       relative; /* needed for absolute lock overlay */
}

.pp-tabs { display: flex; border-bottom: 1px solid var(--b0); flex-shrink: 0; }
.pp-tab  { flex: 1; padding: 12px 8px 11px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--t2); font: 11px var(--ui); cursor: pointer; transition: .1s; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: -1px; letter-spacing: .01em; }
.pp-tab:hover              { color: var(--t1); }
.pp-tab .dot               { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pp-tab[data-p=fig].on     { color: var(--fig); border-bottom-color: var(--fig); }
.pp-tab[data-p=cld].on     { color: var(--cld); border-bottom-color: var(--cld); }
.pp-tab[data-p=cdx].on     { color: var(--cdx); border-bottom-color: var(--cdx); }
.pp-tab[data-p=fig] .dot   { background: var(--fig); }
.pp-tab[data-p=cld] .dot   { background: var(--cld); }
.pp-tab[data-p=cdx] .dot   { background: var(--cdx); }

.pp-pane    { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.pp-pane.on { display: flex; }

.pp-meta { padding: 8px 12px; border-bottom: 1px solid var(--b0); display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.vp-badge { font: 9px var(--mono); padding: 2px 6px; border-radius: 3px; background: var(--over); border: 1px solid var(--b1); color: var(--t2); white-space: nowrap; flex-shrink: 0; }

.ctx-row  { padding: 6px 10px; border-bottom: 1px solid var(--b0); display: flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--card); }
.ctx-lbl  { font: 9px var(--mono); color: var(--t2); white-space: nowrap; letter-spacing: .04em; flex-shrink: 0; }
.ctx-input { flex: 1; background: transparent; border: none; color: var(--t0); font: 11px var(--ui); outline: none; padding: 0; }
.ctx-input::placeholder { color: var(--t2); }
.ctx-clr  { font: 10px var(--mono); color: var(--t2); cursor: pointer; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; opacity: 0; }
.ctx-row:focus-within .ctx-clr { opacity: 1; }
.ctx-clr:hover { color: var(--t1); }

.capture-btn { background: rgba(157,124,255,.1); border: 1px solid rgba(157,124,255,.3); border-radius: var(--r); padding: 5px 11px; color: var(--purple); font: 11px var(--ui); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: .12s; flex-shrink: 0; }
.capture-btn:hover   { background: rgba(157,124,255,.18); }
.capture-btn.has-img { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); color: var(--ok); }

/* Vision drop overlay */
.vision-drop { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 30; background: rgba(7,8,14,.82); backdrop-filter: blur(6px); }
.vision-drop.show { display: flex; }
.vision-drop.over { outline: 2px dashed rgba(157,124,255,.5); outline-offset: -3px; background: rgba(157,124,255,.06); }
.vd-icon  { font-size: 36px; }
.vd-text  { font-size: 14px; color: var(--t0); font-weight: 600; }
.vd-sub   { font-size: 11px; color: var(--t2); font-family: var(--mono); text-align: center; line-height: 1.6; }
.vd-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: 1px solid var(--b1); border-radius: 5px; background: var(--elev); color: var(--t1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: .1s; }
.vd-close:hover { color: var(--t0); border-color: var(--b2); }
.vd-or    { font: 10px var(--mono); color: var(--t2); margin: 4px 0; }
.vd-pick  { background: var(--blue-a); border: 1px solid var(--blue-b); border-radius: var(--r); padding: 7px 16px; color: var(--blue); font: 11px var(--ui); cursor: pointer; transition: .12s; }
.vd-pick:hover { background: rgba(79,124,255,.2); }

/* Vision strip */
.vision-strip { display: none; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(52,211,153,.06); border-bottom: 1px solid rgba(52,211,153,.2); flex-shrink: 0; }
.vision-strip.show { display: flex; }
.vision-thumb { width: 42px; height: 30px; object-fit: cover; border-radius: 3px; border: 1px solid var(--b1); cursor: pointer; }
.vs-lbl  { font: 10px var(--mono); color: var(--ok); flex: 1; }
.vs-del  { font-size: 11px; color: var(--t2); cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: .1s; }
.vs-del:hover { color: var(--err); }

/* Prompt badges / pills */
.pp-badge     { font: 9px var(--mono); padding: 2px 8px; border-radius: 4px; border: 1px solid; letter-spacing: .05em; }
.pp-badge.fig { color: var(--fig); background: var(--fig-a); border-color: var(--fig-b); }
.pp-badge.cld { color: var(--cld); background: var(--cld-a); border-color: var(--cld-b); }
.pp-badge.cdx { color: var(--cdx); background: var(--cdx-a); border-color: var(--cdx-b); }

.pp-comp { font: 9px var(--mono); background: var(--over); border: 1px solid var(--b1); border-radius: 3px; padding: 1px 6px; color: var(--t1); margin-left: auto; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-ai-pill      { font: 9px var(--mono); padding: 1px 7px; border-radius: 3px; }
.pp-ai-pill.live { color: var(--ok); background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.25); }
.pp-ai-pill.tpl  { color: var(--t2); background: var(--card); border: 1px solid var(--b0); }

/* Prompt body */
.pp-body  { flex: 1; overflow-y: auto; padding: 12px; scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
.psec     { margin-bottom: 14px; }
.psec-lbl { font: 9px var(--mono); color: var(--t2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.psec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--b0); }
.pblock   { font: 10.5px var(--mono); line-height: 1.75; color: var(--t1); background: var(--card); border: 1px solid var(--b0); border-radius: var(--r); padding: 9px 11px; white-space: pre-wrap; word-break: break-word; }

/* Syntax highlighting in prompt blocks */
.pblock .k   { color: var(--blue); }
.pblock .v   { color: #e8b97a; }
.pblock .s   { color: #7ed98a; }
.pblock .c   { color: var(--t2); }
.pblock .fig { color: var(--fig); }
.pblock .cld { color: var(--cld); }
.pblock .cdx { color: var(--cdx); }

/* Prompt footer */
.pp-foot { padding: 10px; border-top: 1px solid var(--b0); display: flex; gap: 6px; flex-shrink: 0; }
.pp-btn  { flex: 1; height: 34px; padding: 0 14px; border-radius: var(--r); font: 12px var(--ui); font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: .12s; border: 1px solid; white-space: nowrap; }

.pp-btn.copy         { background: var(--card); border-color: var(--b1); color: var(--t1); }
.pp-btn.copy:hover   { border-color: var(--b2); color: var(--t0); }
.pp-btn.copy.done    { border-color: rgba(52,211,153,.4); color: var(--ok); }
.pp-btn.export-btn   { background: var(--card); border-color: var(--b1); color: var(--t2); font-size: 12px; }
.pp-btn.export-fig   { color: var(--fig); border-color: var(--fig-b); background: var(--fig-a); }
.pp-btn.export-fig:hover { background: rgba(157,124,255,.18); color: var(--fig); }
.pp-btn.export-cld   { color: var(--cld); border-color: var(--cld-b); background: var(--cld-a); }
.pp-btn.export-cld:hover { background: rgba(255,108,69,.18); color: var(--cld); }
.pp-btn.export-cdx   { color: var(--cdx); border-color: var(--cdx-b); background: var(--cdx-a); }
.pp-btn.export-cdx:hover { background: rgba(25,195,125,.18); color: var(--cdx); }
.pp-btn.export-btn.done { border-color: rgba(52,211,153,.4); color: var(--ok); background: rgba(52,211,153,.08); }
.pp-btn.gen-fig      { background: var(--fig-a); border-color: var(--fig-b); color: var(--fig); }
.pp-btn.gen-fig:hover { background: rgba(157,124,255,.18); }
.pp-btn.gen-cld      { background: var(--cld-a); border-color: var(--cld-b); color: var(--cld); }
.pp-btn.gen-cld:hover { background: rgba(255,108,69,.18); }
.pp-btn.gen-cdx      { background: var(--cdx-a); border-color: var(--cdx-b); color: var(--cdx); }
.pp-btn.gen-cdx:hover { background: rgba(25,195,125,.18); }
.pp-btn:disabled     { opacity: .4; cursor: not-allowed; }

.no-key   { font: 10px var(--mono); color: var(--t2); background: var(--card); border: 1px solid var(--b0); border-radius: var(--r); padding: 6px 10px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.no-key a { color: var(--blue); cursor: pointer; text-decoration: none; }
.no-key.hidden { display: none; }

/* Canvas panel empty state */
.canvas-panel-empty  { display: none; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 14px; padding: 28px 20px; text-align: center; }
.canvas-panel-icon   { font-size: 32px; opacity: .25; line-height: 1; }
.canvas-panel-title  { font-size: 13px; font-weight: 600; color: var(--t1); letter-spacing: -.01em; }
.canvas-panel-sub    { font-size: 11px; color: var(--t2); line-height: 1.65; max-width: 200px; }
.canvas-exit-btn     { margin-top: 6px; background: var(--card); border: 1px solid var(--b1); border-radius: var(--r); color: var(--t1); font: 11px var(--ui); padding: 6px 14px; cursor: pointer; transition: .12s; }
.canvas-exit-btn:hover { border-color: var(--b2); color: var(--t0); }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes spin         { to { transform: rotate(360deg); } }
@keyframes cursor-blink { 50% { opacity: 0; } }

.spin { display: inline-block; width: 11px; height: 11px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }

.streaming::after { content: '▌'; color: var(--blue); animation: cursor-blink 1s step-end infinite; }

/* ── Toast ───────────────────────────────────────────────────── */
#toast {
  position:   fixed;
  bottom:     20px;
  left:       50%;
  transform:  translateX(-50%) translateY(10px);
  background: var(--over);
  border:     1px solid var(--b1);
  border-radius: 8px;
  padding:    8px 16px;
  font:       11px var(--mono);
  color:      var(--t1);
  opacity:    0;
  transition: .18s;
  pointer-events: none;
  z-index:    999;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.ok   { border-color: rgba(52,211,153,.4); color: var(--ok); }
#toast.warn { border-color: rgba(245,158,11,.4);  color: var(--warn); }
#toast.err  { border-color: rgba(248,113,113,.4); color: var(--err); }

/* ── Paywall modal ───────────────────────────────────────────── */
.pw-modal {
  position:       relative;
  background:     var(--surf);
  border:         1px solid var(--b1);
  border-radius:  16px;
  width:          560px;
  max-width:      calc(100vw - 32px);
  padding:        36px 32px 28px;
  box-shadow:     0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(157,124,255,.08);
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* Close */
.pw-close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         28px;
  height:        28px;
  border-radius: 6px;
  border:        1px solid var(--b1);
  background:    transparent;
  color:         var(--t1);
  cursor:        pointer;
  font-size:     13px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    .1s;
}
.pw-close:hover { border-color: var(--b2); color: var(--t0); }

/* Hero */
.pw-hero       { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pw-hero-icon  { width: 52px; height: 52px; border-radius: 14px; background: var(--fig-a); border: 1px solid var(--fig-b); display: flex; align-items: center; justify-content: center; }
.pw-title      { font-size: 20px; font-weight: 700; color: var(--t0); letter-spacing: -.02em; margin: 0; }
.pw-sub        { font-size: 13px; color: var(--t1); line-height: 1.65; max-width: 380px; margin: 0; }

/* Billing toggle */
.pw-toggle-wrap  { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pw-toggle-lbl   { font: 12px var(--ui); color: var(--t1); }
.pw-save-badge   { font: 9px var(--mono); letter-spacing: .04em; color: var(--ok); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); border-radius: 3px; padding: 1px 5px; margin-left: 4px; }
.pw-toggle       { width: 36px; height: 20px; border-radius: 20px; background: var(--b1); border: none; padding: 2px; cursor: pointer; transition: background .2s; position: relative; flex-shrink: 0; }
.pw-toggle[aria-checked="true"] { background: var(--ok); }
.pw-toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; display: block; transition: transform .2s; }
.pw-toggle[aria-checked="true"] .pw-toggle-thumb { transform: translateX(16px); }

/* Plans grid */
.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pw-plan {
  background:    var(--card);
  border:        1px solid var(--b1);
  border-radius: 10px;
  padding:       20px;
  display:       flex;
  flex-direction: column;
  gap:           14px;
  position:      relative;
}

.pw-plan-team {
  border-color:  rgba(157,124,255,.4);
  background:    linear-gradient(160deg, rgba(157,124,255,.06) 0%, var(--card) 60%);
  box-shadow:    0 0 0 1px rgba(157,124,255,.15) inset;
}

.pw-plan-badge {
  position:      absolute;
  top:           -1px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--fig);
  color:         #fff;
  font:          8px var(--mono);
  letter-spacing: .08em;
  padding:       2px 9px;
  border-radius: 0 0 5px 5px;
  white-space:   nowrap;
}

.pw-plan-head { display: flex; flex-direction: column; gap: 4px; }
.pw-plan-name { font: 600 13px var(--ui); color: var(--t0); }
.pw-plan-price { display: flex; align-items: baseline; gap: 3px; }
.pw-price-amount { font: 700 28px var(--ui); color: var(--t0); letter-spacing: -.03em; }
.pw-price-period { font: 12px var(--ui); color: var(--t1); }
.pw-price-annual { font: 10px var(--mono); color: var(--t2); display: none; }
.pw-price-annual.show { display: block; }

/* Feature list */
.pw-features { list-style: none; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pw-features li { font: 11.5px var(--ui); color: var(--t1); display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; }
.pw-check { color: var(--ok); font-size: 11px; flex-shrink: 0; margin-top: 1px; }

/* CTAs */
.pw-cta {
  width:         100%;
  height:        38px;
  border-radius: var(--r);
  font:          600 12px var(--ui);
  cursor:        pointer;
  transition:    .15s;
  border:        none;
}
.pw-cta-pro  { background: var(--over); border: 1px solid var(--b2); color: var(--t0); }
.pw-cta-pro:hover  { background: var(--b0); border-color: var(--b2); }
.pw-cta-team { background: var(--fig); color: #fff; }
.pw-cta-team:hover { filter: brightness(1.1); }

.pw-cta-note { font: 10px var(--ui); color: var(--t2); text-align: center; margin: 0; }

/* Trust bar */
.pw-trust      { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pw-trust-item { font: 11px var(--ui); color: var(--t1); display: flex; align-items: center; gap: 5px; }
.pw-trust-dot  { color: var(--t2); font-size: 14px; }

/* Footer link */
.pw-already    { font: 11px var(--ui); color: var(--t2); text-align: center; margin: 0; }
.pw-key-link   { color: var(--blue); text-decoration: none; cursor: pointer; }
.pw-key-link:hover { text-decoration: underline; }

/* Licence-key input row (shown inside modal after clicking "Enter licence key") */
.pw-licence-row { display: none; flex-direction: column; gap: 8px; }
.pw-licence-row.show { display: flex; }
.pw-licence-input { background: var(--card); border: 1px solid var(--b1); border-radius: var(--r); padding: 9px 12px; color: var(--t0); font: 12px var(--mono); outline: none; transition: .12s; }
.pw-licence-input:focus { border-color: var(--b2); }
.pw-licence-submit { height: 36px; background: var(--blue-a); border: 1px solid var(--blue-b); border-radius: var(--r); color: var(--blue); font: 600 12px var(--ui); cursor: pointer; transition: .12s; }
.pw-licence-submit:hover { background: rgba(30,170,92,.18); }

/* ── Prompt lock overlay ─────────────────────────────────────── */
.pp-lock-overlay {
  display:         none;          /* shown via JS when !hasProAccess */
  position:        absolute;
  inset:           0;
  top:             41px;          /* sits just below the tabs bar */
  z-index:         20;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  background:      rgba(7, 8, 14, 0.55);
}
.pp-lock-overlay.show { display: flex; }

.pp-lock-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  padding:        28px 24px;
  text-align:     center;
  max-width:      240px;
}

.pp-lock-icon {
  width:           52px;
  height:          52px;
  border-radius:   14px;
  background:      var(--fig-a);
  border:          1px solid var(--fig-b);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   4px;
}

.pp-lock-title {
  font:           600 14px var(--ui);
  color:          var(--t0);
  letter-spacing: -.01em;
}

.pp-lock-sub {
  font:        11.5px var(--ui);
  color:       var(--t1);
  line-height: 1.6;
}

.pp-unlock-btn {
  margin-top:    6px;
  height:        38px;
  padding:       0 20px;
  border-radius: var(--r);
  background:    var(--fig);
  border:        none;
  color:         #fff;
  font:          600 12px var(--ui);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           7px;
  transition:    .15s;
  white-space:   nowrap;
}
.pp-unlock-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.pp-unlock-btn:active { transform: translateY(0); filter: brightness(.96); }

/* ── Editable prompt blocks ──────────────────────────────────── */
.pblock[contenteditable] {
  cursor:  text;
  outline: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.pblock[contenteditable]:hover {
  border-color: var(--b2);
  background:   var(--over);
}
.pblock[contenteditable]:focus {
  border-color: rgba(157,124,255,.5);
  background:   var(--over);
  box-shadow:   0 0 0 2px rgba(157,124,255,.1);
}

/* Editing section — label brightens */
.psec.editing .psec-lbl { color: var(--fig); }

/* Subtle "editable" hint on hover (shows before focus) */
.pblock[contenteditable]::after {
  content:       '✏';
  position:      absolute;
  top:           6px;
  right:         8px;
  font-size:     9px;
  color:         var(--t2);
  opacity:       0;
  pointer-events: none;
  transition:    opacity .12s;
}
.pblock[contenteditable] { position: relative; }
.pblock[contenteditable]:hover::after  { opacity: 1; }
.pblock[contenteditable]:focus::after  { opacity: 0; }

/* EDITED pill variant */
.pp-ai-pill.edited {
  color:      var(--fig);
  background: var(--fig-a);
  border:     1px solid var(--fig-b);
}

/* ═══════════════════════════════════════════════════════════════
   SOPHISTICATED PROMPT READER
   ═══════════════════════════════════════════════════════════════ */

/* ── Section card ────────────────────────────────────────────── */
.psec {
  margin-bottom:  10px;
  border:         1px solid var(--b0);
  border-radius:  8px;
  overflow:       hidden;
  background:     var(--card);
  transition:     border-color .15s;
}
.psec:hover               { border-color: var(--b1); }
.psec.editing             { border-color: rgba(157,124,255,.45); box-shadow: 0 0 0 2px rgba(157,124,255,.08); }
.psec.collapsed .pblock   { display: none; }

/* ── Section header ──────────────────────────────────────────── */
.psec-header {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding:      6px 10px 5px;
  background:   var(--over);
  border-bottom: 1px solid var(--b0);
  cursor:        pointer;
  user-select:   none;
  transition:    background .1s;
}
.psec-header:hover { background: var(--b0); }
.psec.collapsed .psec-header { border-bottom: none; }

.psec-lbl {
  font:          600 9px var(--mono);
  color:         var(--t1);
  letter-spacing: .07em;
  text-transform: uppercase;
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.psec.editing .psec-lbl { color: var(--fig); }

.psec-tokens {
  font:       9px var(--mono);
  color:      var(--t2);
  flex-shrink: 0;
  white-space: nowrap;
}

.psec-controls {
  display:    flex;
  gap:        2px;
  flex-shrink: 0;
  opacity:    0;
  transition: opacity .1s;
}
.psec:hover .psec-controls,
.psec.editing .psec-controls { opacity: 1; }

.psec-btn {
  width:         22px;
  height:        22px;
  border-radius: 4px;
  border:        1px solid transparent;
  background:    transparent;
  color:         var(--t2);
  font-size:     11px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    .1s;
  line-height:   1;
}
.psec-btn:hover {
  background:   var(--card);
  border-color: var(--b1);
  color:        var(--t0);
}
.psec-collapse-btn { transition: transform .15s, background .1s, color .1s; }

/* ── Prompt body ─────────────────────────────────────────────── */
.pblock {
  font:         10.5px var(--mono);
  line-height:  1.8;
  color:        var(--t1);
  padding:      10px 12px 12px;
  white-space:  pre-wrap;
  word-break:   break-word;
  outline:      none;
  min-height:   32px;
  cursor:       text;
  border:       none;
  background:   transparent;
  transition:   background .12s;
}
.pblock:focus { background: rgba(0,0,0,.15); }

/* ── Syntax highlight tokens ─────────────────────────────────── */
.syn-hex        { color: #4ade80; font-weight: 500; white-space: nowrap; }
.syn-swatch     {
  display:        inline-block;
  width:          10px; height: 10px;
  border-radius:  2px;
  margin-right:   3px;
  vertical-align: middle;
  box-shadow:     0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.4);
  flex-shrink:    0;
  position:       relative;
  top:            -1px;
}
.syn-placeholder {
  color:         var(--warn);
  background:    rgba(245,158,11,.1);
  border:        1px solid rgba(245,158,11,.3);
  border-radius: 3px;
  padding:       0 5px;
  font-size:     9px;
  letter-spacing: .03em;
  white-space:   nowrap;
  cursor:        text;
}
.syn-rgba       { color: #4ade80; }
.syn-var        { color: var(--blue); }
.syn-token      { color: rgba(79,124,255,.9); }
.syn-unit       { color: var(--fig); font-weight: 500; }
.syn-str        { color: #7ed98a; }
.syn-step       { color: var(--fig); font-weight: 700; display: block; margin-bottom: 2px; }
.syn-head       { color: var(--t0); font-weight: 600; display: block; margin: 6px 0 2px; }
.syn-subhead    { color: var(--t0); font-weight: 600; letter-spacing: .06em; display: block; margin: 8px 0 2px; font-size: 9px; }
.syn-rule       { color: var(--t2); display: block; }
.syn-comment    { color: var(--t2); font-style: italic; display: block; }
.syn-check      { color: var(--ok); display: block; }
.syn-bullet     { color: var(--t0); display: block; }
.syn-key        { color: var(--blue); }

/* ── Stats bar ───────────────────────────────────────────────── */
.pp-stats-bar {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       5px 12px;
  border-top:    1px solid var(--b0);
  font:          9px var(--mono);
  color:         var(--t2);
  flex-shrink:   0;
  background:    var(--card);
  flex-wrap:     wrap;
}
.pp-stats-bar span + span::before { content: '·'; margin-right: 12px; opacity: .4; }
.stats-warn   { color: var(--warn); }
.stats-ok     { color: var(--ok); }
.stats-hint   { margin-left: auto; opacity: .5; }

/* ── Section header contrast overrides ──────────────────────── */

/* Kill old psec-lbl separator line — not needed inside new card header */
.psec-header .psec-lbl::after { display: none; content: none; }

/* Stronger section card */
.psec {
  border-color: var(--b1);
}

/* Header: dark strip with left accent bar */
.psec-header {
  background:    var(--surf);
  border-bottom: 1px solid var(--b1);
  border-left:   3px solid var(--b2);
  padding-left:  9px;
}
.psec:hover  .psec-header { border-left-color: var(--blue); }
.psec.editing .psec-header { border-left-color: var(--fig); background: rgba(157,124,255,.06); }

/* Label: brighter and bolder */
.psec-header .psec-lbl {
  font:           700 9.5px var(--mono);
  color:          var(--t0);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom:  0;           /* reset old margin */
}
.psec.editing .psec-header .psec-lbl { color: var(--fig); }

/* Token count: right-aligned dim badge */
.psec-header .psec-tokens {
  font:           9px var(--mono);
  color:          var(--t2);
  background:     var(--over);
  border:         1px solid var(--b0);
  border-radius:  3px;
  padding:        1px 5px;
}

/* Controls always slightly visible, full on hover */
.psec-controls { opacity: .35; }
.psec:hover  .psec-controls,
.psec.editing .psec-controls { opacity: 1; }

/* Copy / collapse micro-buttons */
.psec-btn {
  font-size:   10px;
  border-color: var(--b1);
}
.psec-btn:hover { background: var(--over); border-color: var(--b2); color: var(--t0); }

/* Content block: slight indent to feel nested inside the card */
.pblock { padding-left: 14px; }

/* ── Lock overlay trial note ─────────────────────────────────── */
.pp-lock-trial {
  font:        10px var(--ui);
  color:       var(--t2);
  margin:      0;
  text-align:  center;
  margin-top:  -4px;
}

/* ── Hard lock: blur content at source, near-opaque overlay ─── */

/* Blur the actual prompt content so it's unreadable even if overlay is thin */
.prompt-panel.is-locked .pp-pane,
.prompt-panel.is-locked .ctx-row,
.prompt-panel.is-locked .vision-strip {
  filter:         blur(7px);
  pointer-events: none;
  user-select:    none;
}

/* Near-opaque overlay with strong blur */
.pp-lock-overlay {
  background:      rgba(7, 8, 14, 0.88) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  top:             41px !important;    /* just below the tabs */
}

/* Tabs row stays sharp and readable (Subscribe UI) */
.prompt-panel.is-locked .pp-tabs {
  opacity: 0.4;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   PROMPT LEARNING SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── Rating bar ──────────────────────────────────────────────── */
.pp-rate-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       5px 10px 4px;
  border-top:    1px solid var(--b0);
  background:    var(--card);
  flex-shrink:   0;
}
.rate-lbl {
  font:        9.5px var(--ui);
  color:       var(--t2);
  flex:        1;
  white-space: nowrap;
}
.rate-btn {
  width:         28px;
  height:        24px;
  border-radius: 5px;
  border:        1px solid var(--b1);
  background:    transparent;
  font-size:     13px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    .12s;
  line-height:   1;
}
.rate-btn:hover          { background: var(--over); border-color: var(--b2); transform: scale(1.1); }
.rate-btn.rate-up.active  { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); }
.rate-btn.rate-down.active { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }

.rate-memory {
  font:        9px var(--mono);
  color:       var(--ok);
  white-space: nowrap;
  margin-left: auto;
  opacity:     .8;
}

/* ── Improve button ──────────────────────────────────────────── */
.improve-btn {
  background:  rgba(250,204,21,.08) !important;
  border-color: rgba(250,204,21,.3) !important;
  color:       #fbbf24 !important;
  flex:        0.6 !important;
}
.improve-btn:hover { background: rgba(250,204,21,.16) !important; }
.improve-btn:disabled { opacity: .4; }

/* IMPROVED pill */
.pp-ai-pill.live[textContent="IMPROVED"],
.pp-ai-pill.live {
  /* uses existing .live styles — colour already yellow-green */
}

/* Shrink copy button when 3 buttons present */
.pp-foot:has(.improve-btn) .copy { flex: 1; }

/* ── Hide improve + rating until a prompt exists ─────────────── */
.pp-rate-bar   { display: none; }
.pp-rate-bar.has-prompt   { display: flex; }
.improve-btn   { display: none !important; }
.improve-btn.has-prompt   { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════
   SIMPLIFIED FOOTER — single row
   ═══════════════════════════════════════════════════════════════ */
.pp-foot {
  padding:     8px 10px;
  border-top:  1px solid var(--b0);
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
  background:  var(--surf);
  flex-wrap:   nowrap;
}

/* ⎘ Copy — compact icon-only */
.pp-btn.icon-only {
  flex:          0 0 32px;
  width:         32px;
  padding:       0;
  font-size:     14px;
  background:    var(--card);
  border-color:  var(--b1);
  color:         var(--t1);
  border-radius: var(--r);
}
.pp-btn.icon-only:hover { color: var(--t0); border-color: var(--b2); }

/* Learning group — hidden until generated, grows to fill space */
.pp-learn-group {
  display:     none;
  align-items: center;
  gap:         4px;
  flex:        1;
  min-width:   0;
}
.pp-learn-group.has-prompt { display: flex; }

/* Tiny thumbs inside the group */
.pp-learn-group .rate-btn {
  width:       26px;
  height:      26px;
  font-size:   12px;
  border-color: transparent;
  background:  transparent;
  flex-shrink: 0;
}
.pp-learn-group .rate-btn:hover { background: var(--over); border-color: var(--b1); }
.pp-learn-group .rate-btn.rate-up.active  { background: rgba(52,211,153,.12);  border-color: rgba(52,211,153,.3);  color: var(--ok); }
.pp-learn-group .rate-btn.rate-down.active{ background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.25); }

.pp-learn-group .rate-memory {
  font:        9px var(--mono);
  color:       var(--ok);
  opacity:     .7;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ✨ Improve — inside learning group */
.pp-learn-group .improve-btn {
  flex:          1;
  min-width:     0;
  height:        30px;
  padding:       0 10px;
  font-size:     11px;
  background:    rgba(250,204,21,.07)  !important;
  border-color:  rgba(250,204,21,.22)  !important;
  color:         #fbbf24               !important;
  border-radius: var(--r);
}
.pp-learn-group .improve-btn:hover { background: rgba(250,204,21,.14) !important; }
.pp-learn-group .improve-btn.has-prompt { display: flex; }

/* ⚡ Start fresh — primary CTA, always visible */
.pp-btn.primary-action {
  font-weight: 600;
}

/* no-key inline hint */
.pp-foot .no-key {
  font:        9px var(--ui);
  color:       var(--t2);
  white-space: nowrap;
  background:  none;
  border:      none;
  padding:     0;
  flex-shrink: 0;
}
.pp-foot .no-key a { color: var(--blue); cursor: pointer; }
.pp-foot .no-key.hidden { display: none; }

/* Override old rate bar and improve rules that conflict */
.pp-rate-bar         { display: none !important; }    /* old, replaced */
.improve-btn         { display: flex  !important; }   /* reset old hidden */
.improve-btn.has-prompt { display: flex !important; } /* keep */

/* ── Generate prompt tooltip ──────────────────────────────────── */
.gen-tooltip-wrap {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.gen-tooltip {
  position: fixed;
  width: 420px;
  background: var(--over);
  border: 1px solid var(--b2);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  /* Position set dynamically via JS */
  bottom: auto;
  top: auto;
  left: auto;
  right: auto;
}

/* Arrow */
.gen-tooltip::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 18px;
  width: 8px;
  height: 8px;
  background: var(--over);
  border-right: 1px solid var(--b2);
  border-bottom: 1px solid var(--b2);
  transform: rotate(45deg);
}

.gen-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.gen-tooltip-title {
  font: 700 12px var(--ui);
  color: var(--t0);
  letter-spacing: -.01em;
  margin-bottom: 7px;
}

.gen-tooltip-body {
  font: 11px/1.65 var(--ui);
  color: var(--t1);
  margin-bottom: 12px;
}

.gen-tooltip-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.gen-tooltip-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: 11px/1.5 var(--ui);
  color: var(--t1);
}

.gen-step-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(79,124,255,.15);
  border: 1px solid rgba(79,124,255,.3);
  color: var(--blue);
  font: 700 9px var(--mono);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.gen-tooltip-note {
  font: 9px var(--mono);
  color: var(--t2);
  letter-spacing: .04em;
  padding-top: 10px;
  border-top: 1px solid var(--b1);
}

/* Analyse button in tabs row */
.pp-tab-analyse {
  margin-left: auto !important;
  background: rgba(157,124,255,.1) !important;
  border: 1px solid rgba(157,124,255,.25) !important;
  color: var(--fig) !important;
  border-radius: 6px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}
.pp-tab-analyse:hover {
  background: rgba(157,124,255,.2) !important;
  border-color: rgba(157,124,255,.4) !important;
}
/* prevent it from getting the active tab underline */
.pp-tab-analyse::after { display: none !important; }

/* Analyse full-width button below tabs */
.pp-analyse-row {
  padding: 6px 10px;
  border-bottom: 1px solid var(--b0);
}
.pp-analyse-full-btn {
  width: 100%;
  height: 30px;
  background: rgba(157,124,255,.08);
  border: 1px solid rgba(157,124,255,.2);
  border-radius: 6px;
  color: var(--fig);
  font: 600 11px var(--ui);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: .15s;
  letter-spacing: .01em;
}
.pp-analyse-full-btn:hover {
  background: rgba(157,124,255,.16);
  border-color: rgba(157,124,255,.4);
}

/* Canvas preview button */
.canvas-preview-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: rgba(79,124,255,.1);
  border: 1px solid rgba(79,124,255,.25);
  border-radius: 6px;
  color: var(--blue);
  font: 600 11px var(--ui);
  cursor: pointer;
  transition: .15s;
  margin-top: 10px;
}
.canvas-preview-btn:hover {
  background: rgba(79,124,255,.2);
  border-color: rgba(79,124,255,.4);
}