/* =========================================================================
   Mockstack — App marketing photo builder
   Restrained dev-tool aesthetic. Dark, mono labels, indigo accent.
   ========================================================================= */

:root {
  /* surfaces */
  --bg:           #101114;
  --surface-1:    #1E1F24;   /* sidebar / cards */
  --surface-2:    #1B1C21;   /* inputs / controls */
  --surface-3:    #26272D;   /* raised / hover */
  --border:       rgba(255,255,255,.09);
  --border-2:     rgba(255,255,255,.16);

  /* text */
  --text:         #FAFAFA;
  --text-2:       #D4D4D8;
  --muted:        #A1A1AA;
  --muted-2:      #71717A;
  --muted-3:      #52525B;

  /* accent — indigo */
  --accent:       #D4AF37;
  --accent-hi:    #E8C766;
  --accent-lo:    #B8912B;
  --accent-soft:  rgba(212, 175, 55, 0.12);
  --accent-bord:  rgba(212, 175, 55, 0.35);

  /* semantic */
  --success:      #22C55E;
  --warn:         #F59E0B;
  --danger:       #EF4444;

  /* shadows / glow */
  --shadow:       0 1px 0 rgba(0,0,0,0.4), 0 8px 32px -12px rgba(0,0,0,0.6);
  --ring:         0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);

  /* metrics */
  --sidebar-w:    336px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle dot grid in the background — barely visible, dev-tool feel */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

/* ----- Layout -------------------------------------------------------------- */
/* !important: AdSense's full-width-responsive processing injects inline
   height:auto on ancestor containers, which would break the fixed-viewport
   app layout. Stylesheet !important outranks Google's plain inline style. */
.page { display: flex; flex-direction: column; height: 100vh !important; height: 100dvh !important; position: relative; z-index: 1; }
.app  { display: grid; grid-template-columns: var(--sidebar-w) 1fr; flex: 1; min-height: 0; min-width: 0; }

/* The app chrome starts at h2, so the document had no h1 and the heading
   outline began one level down. This carries the page title for screen
   readers and heading navigation without altering the layout. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----- Header bar ---------------------------------------------------------- */
/* viewport-fit=cover lets the layout reach the physical screen edges, so each
   edge is padded by the element against it. The inset then takes that
   element's colour instead of showing the page background as a stray strip. */
.appbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 4px; font: 700 16px/1 "Inter", sans-serif; letter-spacing: -0.025em; color: var(--text); }
.brand .dot { color: var(--accent); }
.brand .tag { font: 500 10px/1 "JetBrains Mono", monospace; color: var(--muted-2); padding: 4px 6px; background: var(--surface-2); border: 1px solid var(--border); margin-left: 8px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.saved-pill { font: 500 11px/1 "JetBrains Mono", monospace; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.saved-pill .ind { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.saved-pill.saving .ind { background: var(--warn); animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.appbar .spacer { flex: 1; }

/* ----- Top ad banner ------------------------------------------------------- */
.top-ad { background: var(--surface-1); border-bottom: 1px solid var(--border); padding: 8px 16px; }

/* ----- Ad slot common styling --------------------------------------------- */
/* No reserved height — slots start at label height and grow when an ad
   actually fills. (Reserving space caused a huge bar that shrank on no-fill.) */
.ad-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-slot .ad-label { color: var(--muted-2); font: 500 9px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; }
.ad-slot ins { display: block; }
.ad-test {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; min-height: 78px;
  border: 1px dashed var(--border-2); background: var(--surface-2);
  color: var(--muted); font-size: 11px; text-align: center; padding: 10px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(99,102,241,0.04) 8px, rgba(99,102,241,0.04) 16px);
}
.ad-test .ad-test-title { color: var(--text-2); font: 600 11px "JetBrains Mono", monospace; letter-spacing: 0.1em; }
.ad-test .ad-test-dim { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--muted-2); font-family: "JetBrains Mono", monospace; }

.footer-ad { background: var(--surface-1); border-top: 1px solid var(--border); padding: 8px 16px; }
.sidebar-ad { padding: 14px 18px; border-top: 1px solid var(--border); margin-top: auto; }

/* ----- Sidebar ------------------------------------------------------------- */
.sidebar { background: var(--surface-1); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column;
  padding-left: env(safe-area-inset-left, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0; }

.section { border-bottom: 1px solid var(--border); padding: 14px 14px; }

/* Small "Reset" affordance in a section heading */
.mini-reset {
  float: right; width: auto; margin: -2px 0 0;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2);
  padding: 3px 8px;
  font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.mini-reset:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }

/* Frameless options sit directly above "Body color"; without this the last
   .row inside collapses its margin and the two groups touch. */
#framelessOpts { margin-bottom: 10px; }
.section h2 {
  font: 600 10px/1 "JetBrains Mono", monospace;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  letter-spacing: 0.14em;
  display: flex; align-items: center; gap: 8px;
}
.section h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ----- Form rows ---------------------------------------------------------- */
.row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.row:last-child { margin-bottom: 0; }
.row label { flex: 0 0 76px; color: var(--muted); font-size: 12px; }
.row .control { flex: 1; }
.row .control-wide { flex: 1; min-width: 0; }

/* inputs */
input[type=text], input[type=number], select, textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 9px;
  font: 13px "Inter", sans-serif;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; min-height: 38px; font-family: inherit; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23A1A1AA' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; }

input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); cursor: pointer; flex: 0 0 auto; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 1px; }

.color-combo { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; }
.color-combo input[type=text] { flex: 1; min-width: 0; font: 12px "JetBrains Mono", monospace; text-transform: uppercase; }
.color-combo input[type=text].invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

/* range slider */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--surface-3); border-radius: 0; }
input[type=range]::-moz-range-track { height: 3px; background: var(--surface-3); border-radius: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; background: var(--text); border: 2px solid var(--accent); border-radius: 50%; margin-top: -5px; cursor: grab; }
input[type=range]::-moz-range-thumb { width: 13px; height: 13px; background: var(--text); border: 2px solid var(--accent); border-radius: 50%; cursor: grab; }
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }

/* buttons */
button {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 3px; padding: 8px 12px;
  font: 600 12px "Inter", sans-serif; letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.06s;
}
button:hover { background: var(--accent-lo); border-color: var(--accent-lo); }
button:active { transform: translateY(1px); }
button.secondary { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-2); }
button.secondary:hover { background: var(--surface-3); border-color: var(--muted-3); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.ghost:hover { background: var(--surface-2); color: var(--text-2); border-color: var(--border-2); }
button.danger { background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
button.danger:hover { background: rgba(239,68,68,0.08); }

/* ----- Upload dropzone ---------------------------------------------------- */
.upload-zone {
  border: 1px dashed var(--border-2); border-radius: 4px; padding: 22px 16px;
  text-align: center; color: var(--muted); cursor: pointer;
  transition: all 0.15s;
  background: var(--surface-2);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,0.012) 12px, rgba(255,255,255,0.012) 24px);
}
.upload-zone:hover { border-color: var(--muted-3); color: var(--text-2); }
.upload-zone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.upload-zone.has-file { border-color: var(--success); border-style: solid; background: rgba(34,197,94,0.04); color: var(--text-2); }
.upload-zone .arrow { font-family: "JetBrains Mono", monospace; color: var(--muted-2); margin-right: 6px; }
.hint { color: var(--muted-2); font-size: 11px; margin-top: 6px; line-height: 1.45; }

/* ----- Frame recommend banner --------------------------------------------- */
.recommend {
  margin-top: 10px; padding: 8px 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-bord);
  border-radius: 3px; font-size: 11.5px; color: var(--text-2);
  display: none; align-items: center; gap: 8px;
}
.recommend.hidden { display: none; }
.recommend.show { display: flex; }
.recommend .text { flex: 1; }
.recommend .text b { color: var(--accent-hi); }
.recommend button { padding: 3px 10px; font-size: 10px; }

/* ----- Brand autopick banner ---------------------------------------------- */
.autopick {
  display: none; margin: 0 0 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--accent-soft), transparent);
  border: 1px solid var(--accent-bord); border-radius: 3px;
}
.autopick.show { display: block; }
.autopick .head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.autopick .head .pill { font: 600 9px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-hi); background: var(--surface-1); padding: 4px 6px; border: 1px solid var(--accent-bord); }
.autopick .head .desc { font-size: 11.5px; color: var(--text-2); }
.autopick .picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.autopick .autopick-section {
  grid-column: 1 / -1;
  font: 600 9px/1 "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  margin: 6px 0 -2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.autopick .autopick-section:first-child { margin-top: 0; }
.autopick .pick {
  position: relative;
  aspect-ratio: 1.2 / 1;
  border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
  overflow: hidden;
}
.autopick .pick:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.autopick .pick::after { content: attr(data-label); position: absolute; bottom: 3px; left: 4px; font: 500 8.5px "JetBrains Mono", monospace; color: rgba(255,255,255,0.8); text-shadow: 0 1px 2px rgba(0,0,0,0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.autopick .pick.dark-text::after { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.4); }

/* ----- Swatches ----------------------------------------------------------- */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.swatches.solid { grid-template-columns: repeat(6, 1fr); }
.swatches.gradient { grid-template-columns: repeat(6, 1fr); }
.swatches.mesh { grid-template-columns: repeat(4, 1fr); }
.swatch {
  position: relative;
  aspect-ratio: 1.2 / 1;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.08s, box-shadow 0.1s;
}
.swatch:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.swatch.active { outline: 1.5px solid var(--accent); outline-offset: 2px; }
.swatch .lbl {
  position: absolute; bottom: 3px; left: 4px;
  font: 500 8.5px "JetBrains Mono", monospace; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.78); text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}
.swatch.dark-text .lbl { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.4); }

/* ----- Watermark placement ------------------------------------------------ */
.wm-controls { margin-top: 10px; }
.wm-controls.hidden { display: none; }
.wm-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wm-label {
  font: 500 10px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.wm-anchor {
  display: grid; grid-template-columns: repeat(3, 22px); gap: 3px;
}
.wm-anchor button {
  width: 22px; height: 22px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 2px; position: relative;
}
.wm-anchor button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--border-2);
}
.wm-anchor button:hover { background: var(--surface-3); border-color: var(--border-2); }
.wm-anchor button.active { background: var(--accent-soft); border-color: var(--accent-bord); }
.wm-anchor button.active::after { background: var(--accent-hi); }

/* ----- Tabs --------------------------------------------------------------- */
.tab-row {
  display: flex; gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.tab-row button {
  flex: 1;
  background: transparent; color: var(--muted);
  border: none; padding: 5px 8px;
  font: 500 11px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 2px;
}
.tab-row button:hover { background: var(--surface-3); color: var(--text-2); }
.tab-row button.active { background: var(--bg); color: var(--text); }

/* ----- Slider row --------------------------------------------------------- */
.slider-row {
  display: grid; grid-template-columns: 76px 1fr 44px;
  gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.slider-row label { color: var(--muted); font-size: 12px; }
.slider-row .val { color: var(--text-2); font: 500 11px "JetBrains Mono", monospace; text-align: right; font-variant-numeric: tabular-nums; }

/* ----- Frame color swatches (no dropdown) --------------------------------- */
.frame-colors { display: flex; gap: 6px; align-items: center; flex: 1; }
.frame-colors .fc {
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 1.5px solid var(--border-2);
  transition: transform 0.08s;
}
.frame-colors .fc:hover { transform: scale(1.08); }
.frame-colors .fc.active { outline: 1.5px solid var(--accent); outline-offset: 2px; border-color: rgba(255,255,255,0.4); }
.frame-colors input[type=color] { margin-left: 4px; }

/* ----- Tilt angle presets ------------------------------------------------- */
.tilt-presets {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.tilt-presets .tp {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 500 9.5px "JetBrains Mono", monospace; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.1s;
}
.tilt-presets .tp:hover { background: var(--surface-3); color: var(--text-2); border-color: var(--border-2); }
.tilt-presets .tp.active { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-bord); }
.tilt-presets .tp svg { width: 22px; height: 22px; }
.tilt-custom-row { display: none; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }
.tilt-custom-row.show { display: block; }

/* ----- Toggle (checkbox) -------------------------------------------------- */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
/* Hide the native checkbox visually but keep it tied to the label so focus
   doesn't scroll the page to (0,0). Without position:relative on the parent,
   the absolutely-positioned input had no anchor and browsers would scroll-
   into-view on every click. */
.toggle input {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  margin: 0; padding: 0;
}
.toggle .tk {
  width: 28px; height: 16px; background: var(--surface-3); border: 1px solid var(--border-2);
  border-radius: 8px; position: relative; transition: background 0.15s, border-color 0.15s;
}
.toggle .tk::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; background: var(--muted); border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.toggle input:checked + .tk { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .tk::after { transform: translateX(12px); background: #fff; }
.toggle .tlabel { font-size: 12px; color: var(--text-2); }

/* ----- Action row -------------------------------------------------------- */
.action-row { display: flex; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.action-row button.primary { flex: 1; padding: 10px 14px; font-size: 13px; }
.action-row button.primary::before { content: "↓"; font-family: "JetBrains Mono", monospace; margin-right: 6px; font-weight: 700; }

/* ----- Preview area ------------------------------------------------------ */
.preview-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; gap: 14px;
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  /* dot-pattern surface */
  background: var(--bg);
  background-image:
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 16px 16px, 32px 32px;
  background-position: 0 0, 8px 8px;
  overflow: hidden;
  min-height: 0; min-width: 0;
  position: relative;
}
/* tiny crosshair tick marks at the corners — dev-tool detail */
.preview-area::before, .preview-area::after {
  content: "+"; position: absolute;
  font: 500 14px "JetBrains Mono", monospace; color: var(--muted-3);
  pointer-events: none;
}
.preview-area::before { top: 10px; left: 14px; }
.preview-area::after  { bottom: 10px; right: 14px; }

.canvas-wrap {
  background: #000;
  /* margin:auto on the canvas centers it AND stays scrollable when zoomed
     beyond the container (flex centering clips the top-left corner). */
  display: flex; overflow: auto;
  flex: 1; min-height: 0; min-width: 0; max-width: 100%;
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px -24px rgba(0,0,0,0.7);
}
.canvas-wrap canvas { display: block; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; touch-action: none; }
.canvas-wrap.zoomed canvas { max-width: none; max-height: none; }
/* Small toolbar button that matches the toolbar's monospace style */
.tb-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  font: 500 11px "JetBrains Mono", monospace; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 3px; cursor: pointer; line-height: 1;
}
.tb-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--text-2); }
/* Maximized preview: hide everything except the canvas + its export/toolbar strips */
body.maximized .sidebar,
body.maximized .top-ad,
body.maximized .footer-ad { display: none !important; }
body.maximized .app { grid-template-columns: 1fr !important; }
body.maximized .preview-area { padding: 16px; }

.toolbar { display: flex; gap: 14px; align-items: center; flex-shrink: 0; color: var(--muted); font: 500 11px "JetBrains Mono", monospace; letter-spacing: 0.06em; }
.toolbar .sep { color: var(--muted-3); }
.toolbar .info { color: var(--muted-2); }
.toolbar .info b { color: var(--text-2); font-weight: 500; }

/* ----- Modal -------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,10,11,0.82);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface-1); border: 1px solid var(--border-2);
  border-radius: 4px; padding: 24px;
  min-width: 360px; max-width: 90vw; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
}
.modal h3 { margin: 0 0 6px; font: 600 14px "Inter", sans-serif; color: var(--text); }
.modal .status { color: var(--muted); margin-bottom: 14px; font: 11px "JetBrains Mono", monospace; min-height: 16px; }
.modal .ad-slot { margin: 14px auto; max-width: 320px; min-height: 250px; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.export-scope { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.export-scope button {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2);
  padding: 10px 12px;
  font: 500 11px "JetBrains Mono", monospace;
  text-align: left;
}
.export-scope button:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }
.export-scope button:disabled {
  opacity: 0.45; cursor: not-allowed;
  border-color: var(--border); color: var(--muted-2); background: var(--surface-2);
}

/* ----- Export size picker ------------------------------------------------- */
.size-picker {
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 8px 10px 6px;
  margin-top: 2px;
}
.size-picker { text-align: left; }
.size-picker .sp-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
  padding-bottom: 7px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.size-picker .sp-presets { display: flex; gap: 4px; margin-left: auto; }
.size-picker .sp-presets button {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-2);
  padding: 3px 7px; margin: 0;
  font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; width: auto;
}
.size-picker .sp-presets button:hover { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); }
.size-picker .sp-group {
  font: 600 9px "JetBrains Mono", monospace;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3);
  margin: 8px 0 3px; padding-top: 7px; border-top: 1px solid var(--border);
}
.size-picker .sp-group:first-of-type { margin-top: 2px; padding-top: 0; border-top: 0; }
.size-picker .sp-row {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 2px; cursor: pointer;
  font: 500 11px "JetBrains Mono", monospace; color: var(--text-2);
}
.size-picker .sp-row:hover { color: var(--text); }
.size-picker .sp-row input {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; flex: 0 0 auto; margin: 0;
  border: 1px solid var(--border-2); background: var(--surface-1);
  border-radius: 3px; cursor: pointer; position: relative;
}
.size-picker .sp-row input:checked { background: var(--accent); border-color: var(--accent); }
.size-picker .sp-row input:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.size-picker .sp-name { flex: 1; text-align: left; }
.size-picker .sp-dim { color: var(--muted-2); }

.progress {
  height: 2px; background: var(--surface-3); border-radius: 0;
  overflow: hidden; position: relative;
  margin: 0 auto 10px; width: 200px;
}
.progress::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 40%;
  background: var(--accent);
  animation: prog 1.2s ease-in-out infinite;
}
@keyframes prog { 0% { left: -40%; } 100% { left: 100%; } }

/* ----- Tooltip / kbd hints ------------------------------------------------ */
kbd { font: 500 10px "JetBrains Mono", monospace; background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 2px; color: var(--text-2); }

/* ----- Device-type pills (Phone / Tablet) --------------------------------- */
.device-pills {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.device-pills button {
  background: transparent; color: var(--muted);
  border: none; padding: 9px 8px;
  font: 500 11px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  cursor: pointer; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.1s, color 0.1s;
}
.device-pills button svg { width: 18px; height: 18px; opacity: 0.85; }
.device-pills button:hover { background: var(--surface-3); color: var(--text-2); }
.device-pills button.active { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-bord); }
.device-pills button.active svg { opacity: 1; color: var(--accent-hi); }

/* ----- Layout pills (Single / Duo / Trio) --------------------------------- */
.layout-pills {
  display: flex; gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.layout-pills button {
  flex: 1;
  background: transparent; color: var(--muted);
  border: none; padding: 7px 4px 6px;
  font: 500 9.5px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.layout-pills button svg { width: 22px; height: 16px; }
.layout-pills button:hover { background: var(--surface-3); color: var(--text-2); }
.layout-pills button.active { background: var(--bg); color: var(--text); }

/* ----- Screenshot slots --------------------------------------------------- */
.slots { display: flex; flex-direction: column; gap: 6px; }
.slot {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 8px 8px 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  min-height: 56px;
}
.slot:hover { border-color: var(--border-2); }
.slot.empty {
  border-style: dashed; background: transparent;
  color: var(--muted);
  justify-content: center;
  padding: 16px 10px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,0.012) 12px, rgba(255,255,255,0.012) 24px);
}
.slot.empty:hover { border-color: var(--accent); background-color: var(--accent-soft); color: var(--accent-hi); }
.slot.empty .lbl { font: 500 11.5px "Inter", sans-serif; }
.slot.empty .lbl::before { content: "+ "; color: var(--muted-2); }
.slot.empty:hover .lbl::before { color: var(--accent-hi); }
.slot .thumb {
  width: 26px; height: 40px;
  background: var(--bg);
  border-radius: 2px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--border);
}
.slot .info { flex: 1; min-width: 0; }
.slot .info .name {
  font: 500 11.5px/1.3 "Inter", sans-serif; color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.slot .info .dim {
  font: 500 10px/1.3 "JetBrains Mono", monospace; color: var(--muted);
}
.slot .x {
  background: transparent; color: var(--muted-2);
  border: none; padding: 7px 10px;
  font: 600 19px/1 "JetBrains Mono", monospace;
  cursor: pointer; flex: 0 0 auto;
  border-radius: 2px;
}
.slot .x:hover { color: var(--danger); background: rgba(239,68,68,0.08); }
.slot.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hi); }
.slot .ix {
  font: 500 9px "JetBrains Mono", monospace;
  color: var(--muted-2);
  padding: 2px 5px;
  background: var(--bg);
  border-radius: 2px;
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}
.slot .mv {
  background: transparent; color: var(--muted-2);
  border: none; padding: 7px 8px;
  font: 600 15px/1 "JetBrains Mono", monospace;
  cursor: pointer; flex: 0 0 auto;
  border-radius: 2px;
}
.slot .warn { color: #E8A33D; }
.slot .fit-row {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.slot .fit-row .lbl {
  font: 500 10px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-right: 4px;
}
.slot .fit-row button {
  background: var(--surface-3); color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  border-radius: 2px;
}
.slot .fit-row button:hover { border-color: var(--border-2); color: var(--text-2); }
.slot .fit-row button.active { background: var(--accent-soft); color: var(--accent-hi); border-color: var(--accent-bord); }
.slot .mv:hover:not(:disabled) { color: var(--accent-hi); background: var(--accent-soft); }
.slot .mv:disabled { opacity: 0.25; cursor: default; }

/* ----- Screens ------------------------------------------------------------ */
.screens-list { display: flex; flex-direction: column; gap: 6px; }
.screen {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.screen:hover { border-color: var(--accent); }
.screen.active { border-color: var(--accent); background: var(--accent-soft); }
.screen .nn {
  font: 500 10px "JetBrains Mono", monospace;
  color: var(--muted-2);
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}
.screen.active .nn { color: var(--accent-hi); }
.screen .thumb {
  width: 26px; height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  flex: 0 0 auto;
  overflow: hidden;
}
.screen .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.screen .sname {
  flex: 1; min-width: 0;
  font: 500 11.5px/1.3 "Inter", sans-serif; color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 4px 0;
}
.screen.active .sname { color: var(--accent-hi); }
.screen .name {
  flex: 1; min-width: 0; width: 100%;
  background: var(--bg); border: none;
  font: 500 11.5px "Inter", sans-serif; color: var(--text);
  padding: 4px 4px;
  border-radius: 2px;
  outline: 1px solid var(--border-2);
}
.screen .mv, .screen .x {
  background: transparent; color: var(--muted-2);
  border: none; padding: 8px 8px;
  min-width: 32px; min-height: 32px;
  font: 600 15px/1 "JetBrains Mono", monospace;
  cursor: pointer; flex: 0 0 auto;
  border-radius: 2px;
}
.screen .x { font-size: 19px; }
.screen .mv:hover:not(:disabled) { color: var(--accent-hi); background: var(--accent-soft); }
.screen .x:hover:not(:disabled) { color: var(--danger); background: rgba(239,68,68,0.08); }
.screen .mv:disabled, .screen .x:disabled { opacity: 0.25; cursor: default; }
.screens-actions { display: flex; gap: 8px; margin-top: 8px; }
.screens-actions button { flex: 1; }

/* ----- Review modal -------------------------------------------------------- */
.modal.review {
  max-width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The grid is the scroll region — header, drop zone, and actions stay pinned. */
.review-grid, .library-grid { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.review-card img {
  width: 100%; display: block;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
}
.review-card .cap {
  margin-top: 6px;
  font: 500 10px/1.4 "JetBrains Mono", monospace;
  color: var(--text-2);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card .cap .nn { color: var(--accent-hi); }
.review-card .cap .dim { color: var(--muted-2); }

/* ----- Screenshot library --------------------------------------------------- */
.lib-drop {
  border: 1px dashed var(--border-2);
  border-radius: 4px;
  padding: 18px 16px;
  margin-top: 4px;
  font: 500 11.5px "Inter", sans-serif;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,0.012) 12px, rgba(255,255,255,0.012) 24px);
}
.lib-drop:hover, .lib-drop.drag {
  border-color: var(--accent);
  background-color: var(--accent-soft);
  color: var(--accent-hi);
}
.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.lib-card .shot {
  aspect-ratio: 9 / 16;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}
.lib-card .shot:hover { border-color: var(--accent); }
.lib-card .shot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lib-card .cap {
  margin-top: 6px;
  font: 500 10px/1.4 "JetBrains Mono", monospace;
  color: var(--text-2);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-card .assign { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.lib-card .assign button {
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
  padding: 5px 7px;
  font: 500 10px/1 "JetBrains Mono", monospace;
  border-radius: 2px;
}
.lib-card .assign button:hover { border-color: var(--accent); color: var(--accent-hi); }
.lib-card .assign button.used { background: var(--accent); color: #fff; border-color: var(--accent); }
.lib-card .assign button.used:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.lib-card .assign .x { margin-left: auto; font-size: 14px; padding: 4px 8px; }
.lib-card .assign .x:hover { color: var(--danger); border-color: var(--danger); }

/* ----- Templates ---------------------------------------------------------- */
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.template { cursor: pointer; }
.template .thumb {
  aspect-ratio: 9 / 16;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color 0.12s, transform 0.08s;
  background: #18181C;
}
.template:hover .thumb { border-color: var(--border-2); }
.template.active .thumb { outline: 1.5px solid var(--accent); outline-offset: 1.5px; border-color: var(--accent); }
.template .ph {
  position: absolute;
  background: #1a1a1a;
  border-radius: 6%/3%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  border: 0.5px solid rgba(255,255,255,0.08);
  transform-origin: center;
}
.template .ph::after {
  content: ""; position: absolute; inset: 6% 8%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
  border-radius: 2%;
}
.template .tx {
  position: absolute;
  height: 7%;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.88;
}
.template .tx.sub { height: 4%; opacity: 0.55; }
.template .lbl {
  font: 500 10px "JetBrains Mono", monospace;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 5px;
  text-align: center;
}
.template:hover .lbl { color: var(--text-2); }
.template.active .lbl { color: var(--accent-hi); }

/* ----- Dual export buttons row ------------------------------------------- */
.action-row.dual { gap: 6px; }
.action-row.dual button { font-size: 12px; padding: 10px 10px; }
.action-row.dual button.zip { flex: 0 0 auto; padding: 10px 12px; }
.action-row.dual button.zip::before { content: "⎗"; font: 700 14px "JetBrains Mono", monospace; margin-right: 4px; }

/* Export all progress list */
.bulk-progress { margin: 12px auto; max-width: 280px; }
.bulk-progress .step { display: flex; align-items: center; gap: 8px; padding: 5px 0; font: 11px "JetBrains Mono", monospace; color: var(--muted); border-top: 1px dashed var(--border); }
.bulk-progress .step:first-child { border-top: 0; }
.bulk-progress .step .ix { width: 16px; height: 16px; border: 1px solid var(--border-2); border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.bulk-progress .step.active { color: var(--text); }
.bulk-progress .step.active .ix { border-color: var(--accent); color: var(--accent); }
.bulk-progress .step.done .ix { background: var(--success); border-color: var(--success); color: #0A0A0B; }
.bulk-progress .step.done .ix::after { content: "✓"; font-weight: 700; }
.bulk-progress .step.done .ix > * { display: none; }
.bulk-progress .step .name { flex: 1; text-align: left; }
.bulk-progress .step .dim { color: var(--muted-2); font-size: 10px; }

/* ----- Stickers ----------------------------------------------------------- */
.sticker-add-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.sticker-add-row button {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  padding: 8px 4px; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 500 9.5px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: all 0.1s;
}
.sticker-add-row button:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.sticker-add-row button svg { width: 22px; height: 22px; opacity: 0.85; }
.sticker-add-row button:hover svg { opacity: 1; }

.sticker-list { display: flex; flex-direction: column; gap: 6px; }
.sticker-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 12px;
  transition: border-color 0.1s, background 0.1s;
}
.sticker-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.sticker-item .head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font: 600 10px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
  cursor: pointer;
}
.sticker-item.selected .head { color: var(--accent-hi); }
.sticker-item .head .kind { flex: 1; }
.sticker-item .head .x {
  background: transparent; border: none;
  color: var(--muted-2); padding: 2px 6px; font: 600 14px "JetBrains Mono", monospace;
  cursor: pointer; border-radius: 2px;
}
.sticker-item .head .x:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
.sticker-item .head .preview {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border-radius: 2px;
  flex: 0 0 auto;
}
.sticker-item .head .preview svg { width: 16px; height: 16px; }
.sticker-item .body { display: none; }
.sticker-item.selected .body { display: block; }
.sticker-item .body .row { margin-bottom: 8px; }
.sticker-item .body .row:last-child { margin-bottom: 0; }
.sticker-empty {
  text-align: center; color: var(--muted-2);
  font: 11px "JetBrains Mono", monospace;
  padding: 10px 8px;
  border: 1px dashed var(--border);
  border-radius: 3px;
}

/* canvas-wrap becomes interactive when stickers exist */
.canvas-wrap canvas { cursor: default; }
.canvas-wrap.has-stickers canvas { cursor: grab; }
.canvas-wrap.has-stickers canvas:active { cursor: grabbing; }

/* ----- Appbar buttons (undo/redo/save-comp) ------------------------------- */
.appbtn {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px 8px;
  font: 500 11px/1 "JetBrains Mono", monospace;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: 0.04em;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.appbtn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.appbtn:disabled { color: var(--muted-3); cursor: not-allowed; opacity: 0.6; }
.appbtn .ico { font: 600 14px/1 "JetBrains Mono", monospace; }
.appbtn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.appbtn.primary:hover { background: var(--accent-lo); border-color: var(--accent-lo); }
.appbar-group { display: flex; gap: 4px; align-items: center; }
.appbar-divider { width: 1px; height: 22px; background: var(--border); }

/* ----- Comps -------------------------------------------------------------- */
.comps-empty {
  text-align: center;
  font: 12px "JetBrains Mono", monospace;
  color: var(--muted-2);
  padding: 12px 8px;
  border: 1px dashed var(--border);
  border-radius: 3px;
}
.comps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comp { cursor: pointer; position: relative; }
.comp .thumb {
  aspect-ratio: 9 / 16;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 2px;
  position: relative; overflow: hidden;
  transition: border-color 0.12s;
}
.comp:hover .thumb { border-color: var(--border-2); }
.comp.active .thumb { outline: 1.5px solid var(--accent); outline-offset: 1.5px; border-color: var(--accent); }
.comp .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.comp .row {
  display: flex; align-items: center; gap: 4px;
  margin-top: 5px;
}
.comp .name {
  flex: 1;
  background: transparent; border: none;
  color: var(--muted); text-align: center;
  font: 500 10px "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 4px;
  border-radius: 2px;
  outline: none;
  min-width: 0;
}
.comp:hover .name { color: var(--text-2); }
.comp.active .name { color: var(--accent-hi); }
.comp .name:focus { background: var(--surface-2); color: var(--text); }
.comp .x {
  background: transparent; border: none; padding: 1px 4px;
  color: var(--muted-3); font: 600 13px/1 "JetBrains Mono", monospace;
  cursor: pointer; border-radius: 2px;
  opacity: 0; transition: opacity 0.1s, color 0.1s;
}
.comp:hover .x { opacity: 1; }
.comp .x:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

/* ----- Sheet handle (mobile bottom-sheet UI) ------------------------------ */
.sheet-handle { display: none; }
.sheet-backdrop { display: none; }

/* ----- Mobile breakpoint -------------------------------------------------- */
@media (max-width: 820px) {
  /* The tool is an app screen, not a document: the page itself must never
     scroll. This also kills iOS pull-to-refresh grabbing sheet drags. */
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* App becomes positioned shell so the sidebar can absolutely-position as a sheet */
  .app {
    display: block;
    position: relative;
    flex: 1;
    overflow: hidden;
  }

  /* Canvas + toolbar full-bleed */
  .preview-area {
    position: absolute;
    inset: 0;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  /* Sidebar becomes a bottom sheet. dvh, not vh: on iOS, vh is the LARGE
     viewport (URL bar collapsed), so a vh-sized sheet overflows its
     container and slides under the appbar whenever the URL bar is showing.
     The 100% cap pins the sheet inside .app no matter what. */
  .sidebar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 88vh;
    height: 88dvh;
    max-height: 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    transform: translateY(calc(100% - 88px - env(safe-area-inset-bottom)));
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 20;
    box-shadow: 0 -10px 36px rgba(0,0,0,0.4);
    overscroll-behavior: contain; /* sheet scroll must never chain to the page (iOS pull-to-refresh) */
  }
  .sidebar.open { transform: translateY(0); }

  /* Handle bar at top of sheet */
  .sheet-handle {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 14px;
    background: var(--surface-1);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    cursor: pointer;
    user-select: none;
    touch-action: none; /* keep pointer events alive during drag — else the browser turns the gesture into a scroll */
    -webkit-tap-highlight-color: transparent;
    position: sticky; top: 0; z-index: 5;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sheet-handle::before {
    content: ""; position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--border-2);
    border-radius: 2px;
  }
  .sheet-handle .info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-top: 4px; }
  .sheet-handle .info .title {
    font: 600 14px/1.1 "Inter", sans-serif; color: var(--text);
    letter-spacing: -0.015em;
  }
  .sheet-handle .info .meta {
    font: 500 11px/1.2 "JetBrains Mono", monospace; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Explicit open / hide buttons — swap with sheet state */
  .sheet-open-btn, .sheet-done-btn {
    display: none;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 3px;
    font: 600 13px/1 "Inter", sans-serif;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-open-btn { background: var(--accent); color: #fff; border: none; }
  .sheet-done-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-2); }
  .sidebar:not(.open) .sheet-open-btn { display: block; }
  .sidebar.open .sheet-done-btn { display: block; }

  /* Backdrop that closes the sheet when tapped */
  .sheet-backdrop {
    display: block;
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
  }
  .sheet-backdrop.show { opacity: 1; pointer-events: auto; }

  .top-ad, .footer-ad { padding: 6px 12px; }
  .top-ad .ad-slot, .footer-ad .ad-slot { padding: 6px; }
  .footer-ad { display: none; }
  /* iOS auto-zoom guard */
  input[type=text], input[type=number], select, textarea { font-size: 16px; }
  .row label, .slider-row label { font-size: 13px; }
  .modal { min-width: 0; width: calc(100vw - 32px); padding: 18px; }
  .modal .ad-slot { max-width: 100%; min-height: 250px; }

  /* Appbar tightening on mobile */
  .appbar { gap: 8px; padding: 8px 12px; }
  .appbar-group { gap: 2px; }
  .appbar-divider { display: none; }
  .appbtn span:last-child { display: none; } /* show ico only */
  .appbtn .ico { font-size: 16px; }
  .appbtn { padding: 8px 9px; }
  .saved-pill { font-size: 10px; }
}
@media (max-width: 420px) {
  .top-ad { display: none; }
  .brand .tag { display: none; }
  .sidebar { height: 92vh; height: 92dvh; max-height: 100%; }
  .sheet-handle .info .meta { display: none; }
}

/* Collapse AdSense units Google reports as unfilled — no dead reserved space. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ===================== MOBILE FIXES (tool) ================================ */
@media (max-width: 820px) {
  /* One row, scrollable — the toolbar previously wrapped into a mess. */
  .toolbar { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .toolbar .info, .toolbar .tb-btn { white-space: nowrap; flex: 0 0 auto; }
  /* iOS zooms the whole viewport when a focused field is under 16px. */
  input[type=text], input[type=number], select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  /* Keep the save indicator dot, drop the label — appbar space is scarce. */
  .saved-pill #savedText { display: none; }
}

/* One-click text colours, sitting under the colour picker. */
.text-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; flex: 1; }
.text-swatches .tsw {
  aspect-ratio: 1; padding: 0; cursor: pointer; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.14);
}
.text-swatches .tsw:hover { border-color: var(--muted); }
.text-swatches .tsw.active { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 3px var(--accent); }

/* ---- Revision 4 status bar ---------------------------------------------- */
.ms-status {
  display: flex; align-items: center; gap: 16px; flex: 0 0 auto;
  padding: 8px 16px; background: var(--surface-1);
  border-top: 1px solid var(--border);
}
.ms-status .ok { font: 500 9.5px "JetBrains Mono", monospace; color: #4CAF7D; }
.ms-status .sp { flex: 1; }
.ms-status .meta { font: 500 9.5px "JetBrains Mono", monospace; color: var(--muted-2); letter-spacing: .06em; }

/* ---- Revision 4: right rail on desktop ----------------------------------- */
@media (min-width: 821px) {
  .app { grid-template-columns: 236px 1fr 254px; }
  .right-rail {
    border-right: 0; border-left: 1px solid var(--border);
    overflow-y: auto; display: flex; flex-direction: column;
  }
}
@media (max-width: 820px) {
  .right-rail { display: none; }
}

/* ---- Narrow rail (Revision 4 moved the sidebar to 236px) -----------------
   The old 336px rail could fit a name printed inside each 44px swatch. At
   26px the label was unreadable and overflowed its tile, so the name moves
   to a caption under the grid, driven by hover and selection. Every swatch
   already carries the same name in its title attribute. */
.swatch .lbl { display: none; }
.sw-caption {
  margin: 7px 0 0; min-height: 13px;
  font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: .04em; color: var(--muted-2);
}
.sw-caption b { color: var(--text-2); font-weight: 500; }

/* Labels and controls have to share 199px, so the label column narrows and
   every control is allowed to shrink below its intrinsic content width. */
.row label { flex: 0 0 62px; font-size: 11.5px; }
.row .control, .row .control-wide { min-width: 0; }
.sidebar select, .sidebar input[type="text"] {
  min-width: 0; width: 100%;
  text-overflow: ellipsis;
}
/* The two widest selects read better with the label above them. */
.row.stack { display: block; }
.row.stack label { display: block; flex: none; margin-bottom: 5px; }

/* Swatch tiles: slightly taller now they carry no text, so the colour reads. */
.swatch { aspect-ratio: 1.35 / 1; }

/* ---- Revision 5: design parity ------------------------------------------ */
.appbtn.gold { border-color: rgba(212,175,55,.45); color: var(--accent, #D4AF37); }
.appbtn.gold:hover { border-color: #D4AF37; color: #E8C766; }

.noise-row {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--surface-3, #26272D); border: 1px solid transparent; border-radius: 6px;
  padding: 8px 11px; cursor: pointer; color: var(--text, #fff);
  font: 500 11.5px "Inter", sans-serif;
}
.noise-row .tag { font: 600 10px "JetBrains Mono", monospace; color: rgba(255,255,255,.5); }
.noise-row.on { border-color: rgba(212,175,55,.45); }
.noise-row.on .tag { color: #D4AF37; }

.fontup {
  border: 1px dashed rgba(212,175,55,.45); border-radius: 5px; background: none;
  color: #D4AF37; font: 600 10.5px "Inter", sans-serif; padding: 6px 10px; cursor: pointer;
}
.fontup:hover { border-color: #D4AF37; color: #E8C766; }

.locale-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.loc-chip {
  position: relative; background: var(--surface-3, #26272D); color: rgba(255,255,255,.75);
  font: 600 10.5px "JetBrains Mono", monospace; padding: 6px 10px; border: 0;
  border-radius: 5px; cursor: pointer;
}
.loc-chip.on { background: #D4AF37; color: #17181C; }
.loc-chip.add { border: 1px dashed rgba(255,255,255,.2); background: none; color: rgba(255,255,255,.5); }
.loc-chip .x { margin-left: 6px; opacity: .6; }
.loc-chip .x:hover { opacity: 1; }
.loc-new {
  width: 52px; background: var(--surface-3, #26272D); border: 1px solid rgba(212,175,55,.45);
  border-radius: 5px; color: #fff; font: 600 10.5px "JetBrains Mono", monospace; padding: 6px 8px;
}

.statusbar {
  display: flex; align-items: center; gap: 16px; padding: 9px 20px;
  background: var(--surface-1, #1E1F24); border-top: 1px solid rgba(255,255,255,.07);
}
.statusbar .ok { font: 500 9.5px "JetBrains Mono", monospace; color: #4CAF7D; }
.statusbar .note { font: 500 9.5px "JetBrains Mono", monospace; color: rgba(255,255,255,.35); letter-spacing: .04em; }
.statusbar .sp { flex: 1; }

.sp-ov {
  border: 0; background: none; cursor: pointer; padding: 2px 5px; border-radius: 3px;
  font: 700 9.5px "JetBrains Mono", monospace; color: rgba(255,255,255,.35);
}
.sp-ov:hover { color: #fff; background: rgba(255,255,255,.08); }
.sp-ov.set { color: #D4AF37; }
.sp-ovrow { display: flex; flex-direction: column; gap: 5px; padding: 2px 0 8px 24px; }
.sp-ovrow input {
  background: var(--surface-3, #26272D); border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; color: #fff; font: 400 11.5px "Inter", sans-serif; padding: 6px 8px;
}

.section.flash { animation: msSecFlash 1.5s ease; }
@keyframes msSecFlash {
  0%, 60% { box-shadow: inset 0 0 0 1px rgba(212,175,55,.6); }
  100% { box-shadow: none; }
}