:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #e3e5e9;
  --line-strong: #d0d4da;
  --text: #16181d;
  --muted: #6b7280;
  --accent: #2f7d4f;
  --accent-soft: #e7f3ec;
  --danger: #d4383d;
  --stage: #4c4c50;
  --stage-2: #2b2b2e;
  --grid: #e8eaee;
  --panel-fill: #ffffff;
  --dim: #2f7d4f;
  --shadow: 0 1px 2px rgba(16, 18, 21, .06), 0 8px 24px rgba(16, 18, 21, .06);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --surface: #1e2126;
    --surface-2: #23262c;
    --line: #2e323a;
    --line-strong: #3a3f48;
    --text: #e8eaed;
    --muted: #9aa1ad;
    --accent: #4ade80;
    --accent-soft: #1c2f24;
    --danger: #f87171;
    --stage: #4c4c50;
    --stage-2: #2b2b2e;
    --grid: #262a31;
    --panel-fill: #1a1d21;
    --dim: #4ade80;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100%; }

/* ---------- top bar ---------- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { color: var(--accent); font-size: 18px; }

.name-input {
  font: 600 15px/1.2 inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  max-width: 230px;
}
.name-input:hover { border-color: var(--line); }
.name-input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

.status { color: var(--muted); font-size: 12px; white-space: nowrap; }
.status.busy { color: var(--accent); }

.viewtoggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
}
.vt {
  border: 0; background: transparent; color: var(--muted);
  font: 600 13px/1 inherit; padding: 7px 16px; border-radius: 6px; cursor: pointer;
}
.vt[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

.actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

button { font-family: inherit; }

.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); border-radius: 8px; cursor: pointer; font-size: 15px;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.primary {
  border: 0; background: var(--accent); color: #fff;
  font: 600 13px/1 inherit; padding: 9px 16px; border-radius: 8px; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .primary { color: #0b1410; } }
.primary:hover { filter: brightness(1.06); }

.ghost {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.ghost:hover { background: var(--surface-2); }

/* ---------- layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; }

.tools[hidden] { display: none; }
.tools {
  width: 68px; flex: none;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: stretch; padding: 8px 6px; gap: 2px;
}
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 0; background: transparent; color: var(--muted);
  font: 500 10px/1 inherit; padding: 9px 2px; border-radius: 8px; cursor: pointer;
}
.tool span { font-size: 17px; line-height: 1; }
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool.danger:hover { color: var(--danger); }
.tool-spacer { flex: 1; }

.stage {
  position: relative; flex: 1; min-width: 0;
  background: radial-gradient(125% 105% at 28% 18%, var(--stage) 0%, var(--stage-2) 78%);
}
/* The preview backdrop is the viewer's choice, independent of the UI theme. */
.stage[data-backdrop="light"] {
  --stage: #ffffff;
  --stage-2: #dde1e8;
  --dim-ink: #23272e;
  --dim-halo: rgba(255, 255, 255, .75);
  --dim-soft: rgba(35, 39, 46, .45);
}
.stage[data-backdrop="dark"] {
  --dim-ink: #ffffff;
  --dim-halo: rgba(0, 0, 0, .55);
  --dim-soft: rgba(255, 255, 255, .45);
}

.backdrop-pick {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  display: flex; gap: 3px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.backdrop-pick button {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 7px;
}
.backdrop-pick button:hover { border-color: var(--muted); }
.backdrop-pick button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.stage-pane { position: absolute; inset: 0; }
.stage-pane[hidden] { display: none; }
#stage2d { background: var(--bg); }
#stage3d canvas { display: block; }

.dim-overlay { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.dim-line { stroke: var(--dim-ink); stroke-width: 1.1; opacity: .85; }
.dim-ext { stroke: var(--dim-soft); stroke-width: 1; }
.dim-head { fill: var(--dim-ink); opacity: .85; }
.dim-text {
  fill: var(--dim-ink); font: 500 13px/1 ui-sans-serif, system-ui, sans-serif;
  text-anchor: middle; paint-order: stroke;
  stroke: var(--dim-halo); stroke-width: 3px; stroke-linejoin: round;
}

.editor-svg { display: block; touch-action: none; user-select: none; }
.editor-svg .handle { cursor: grab; }
.editor-svg .obj { cursor: move; }

.stage-hint {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: rgba(20, 22, 26, .82); color: #fff; font-size: 12px;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.stage-hint.show { opacity: 1; }

.lid-btn[hidden] { display: none; }
.lid-btn {
  position: absolute; top: 14px; right: 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 600 12px/1 inherit; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.lid-btn:hover { background: var(--surface-2); }

.faces {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  /* A drawer cabinet has sixteen faces. This strip is centred with left:50% and
     no width, so it is shrink-to-fit - and shrink-to-fit cannot resolve below
     min-content, which means overflow-x alone does nothing. It overflows both
     sides of the stage, and the half that lands to the LEFT cannot be scrolled
     to at all: those tabs become unreachable. The max-width is what gives it a
     width small enough to scroll inside.
     width:max-content is not decoration. Shrink-to-fit measures the space from
     `left` to the right edge, which at left:50% is only HALF the stage - so
     without it a strip that would fit perfectly well when centred scrolls
     anyway. The phone rule below sets width back to auto, because there `left`
     and `right` are both given and the width must follow them. */
  width: max-content;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.face {
  border: 0; background: transparent; border-radius: 9px;
  font: 500 11px/1.2 inherit; padding: 5px 7px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 52px;
  transition: background .12s ease;
  /* Inside the scroll container above, flexible tabs would be squeezed to
     min-width instead of scrolling. Mirrors the phone rule. */
  flex: none;
}
.face-ico {
  position: relative;
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--text); opacity: .68;
  transition: opacity .12s ease, color .12s ease;
}
.face-ico svg { display: block; width: 26px; height: 26px; }
.face:hover { background: var(--surface-2); }
.face:hover .face-ico { opacity: 1; }
.face[aria-pressed="true"] { background: var(--accent-soft); }
.face[aria-pressed="true"] .face-ico { color: var(--accent); opacity: 1; }
.face-label { color: var(--muted); }
.face[aria-pressed="true"] .face-label { color: var(--accent); font-weight: 600; }
.face-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 6px; }
.face .badge {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: var(--surface); border-radius: 999px;
  font-size: 9px; font-weight: 700; padding: 0 4px; line-height: 13px;
}

/* ---------- inspector ---------- */
.inspector {
  width: 296px; flex: none; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 12px 14px 40px;
}
.insp-title { font: 600 13px/1 inherit; color: var(--muted); margin: 4px 0 12px; letter-spacing: .02em; }

.group { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.group > summary {
  list-style: none; cursor: pointer; padding: 11px 12px;
  font: 600 13px/1 inherit; display: flex; justify-content: space-between; align-items: center;
  background: var(--surface-2);
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::after { content: "⌄"; color: var(--muted); transition: transform .15s; }
.group[open] > summary::after { transform: rotate(180deg); }
.group-body { padding: 12px; display: grid; gap: 12px; }

.field { display: grid; gap: 6px; }
.field > label { font-size: 12px; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { min-width: 0; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 7px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; min-height: 58px; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.num { display: flex; align-items: center; gap: 6px; }
.num input { text-align: right; }
.num .unit { font-size: 11px; color: var(--muted); }

.seg { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button {
  flex: 1; border: 0; background: var(--surface); color: var(--muted);
  font: 500 12px/1 inherit; padding: 8px 4px; cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.card {
  border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  padding: 6px 5px 7px; cursor: pointer; text-align: center;
  font: 500 10.5px/1.25 inherit; color: var(--muted);
  min-width: 0;
}
.card .art {
  display: block; border-radius: 7px; background: var(--surface-2);
  padding: 3px 2px; margin-bottom: 7px;
}
.card svg { display: block; width: 100%; height: 46px; }
.card:hover { border-color: var(--muted); }
.card[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.card[aria-pressed="true"] .art { background: var(--accent-soft); }

.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.18); flex: none; }

.hint, .muted { color: var(--muted); font-size: 12px; }
.hint { margin: -4px 0 0; }
.warn { color: var(--danger); font-size: 12px; }

.tick-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }

.stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.stat b { color: var(--text); font-weight: 600; }

.link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- popovers ---------- */
.popover {
  position: fixed; z-index: 40; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px; max-width: 320px;
}
.popover[hidden] { display: none; }
.pop-title { font: 600 13px/1 inherit; margin: 2px 4px 10px; }
.shape-list { display: grid; gap: 2px; min-width: 160px; }
.shape-list button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 8px 9px; border-radius: 7px; cursor: pointer; text-align: left;
}
.shape-list button:hover { background: var(--surface-2); }
.pattern-list { min-width: 220px; }
.pattern-list .pattern-thumb { flex: 0 0 48px; display: block; }
.pattern-list .pattern-thumb svg { display: block; width: 48px; height: 30px; }
.pattern-list small { color: var(--muted); font-size: 11px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 240px; overflow-y: auto; }
.emoji-grid button { border: 0; background: transparent; font-size: 20px; padding: 4px; border-radius: 6px; cursor: pointer; }
.emoji-grid button:hover { background: var(--surface-2); }
.drop {
  border: 1.5px dashed var(--line-strong); border-radius: 9px;
  padding: 22px 16px; text-align: center; color: var(--muted); font-size: 12px;
}
.drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- dialogs ---------- */
.dlg { border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: 480px; width: calc(100% - 32px); }
.dlg::backdrop { background: rgba(10, 12, 15, .5); }
.dlg-body { padding: 20px; display: grid; gap: 14px; }
.dlg h2 { margin: 0; font-size: 17px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.layer-key { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.layer-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.note { font-size: 12px; color: var(--accent); margin: 0; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.steps li { color: var(--text); }
.steps li span { color: var(--muted); }

@media (max-width: 900px) {
  .inspector { width: 250px; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .name-input { max-width: 130px; }
}

/* ---- saved designs ------------------------------------------------------ */
/* A list of things you made, not a control panel: the name leads, the date
   trails behind it quietly, and the delete stays out of the way until the row
   is under the pointer. */
.row-actions { display: flex; gap: 6px; }
.row-actions .wide { flex: 1; }

.design-list {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.design {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
}
.design:hover { border-color: var(--line-strong); }
.design.open { border-color: var(--accent); background: var(--accent-soft); }

.design-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 4px 7px 9px; text-align: left; font: inherit; color: inherit;
}
.design-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.design-when { font-size: 11px; color: var(--muted); }

.design .icon-btn { opacity: 0; margin-right: 4px; }
.design:hover .icon-btn, .design .icon-btn:focus-visible { opacity: 1; }

.warn-line {
  margin: 0; font-size: 12px; color: var(--danger);
}

/* ---- save dialog -------------------------------------------------------- */
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.name-field {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1.5px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.name-field:focus { outline: none; border-color: var(--accent); }

/* The gallery can hold a lot of rows; the dialog scrolls rather than growing
   past the bottom of the screen. */
#filesDlg .design-list { max-height: 46vh; overflow-y: auto; }

/* ---- three actions, three weights --------------------------------------- */
/* Export, Save and the gallery are not equal, so they must not look equal.
   Export is the finish line and keeps the filled accent. Save is the same
   family one step down - clearly related, clearly not the main event. The
   gallery is navigation rather than an action, so it stays quietest of all.
   One hue throughout: a second colour here would be three shouting at once. */
.soft {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.soft:hover { filter: brightness(0.97); }

.quiet { display: inline-flex; align-items: center; gap: 6px; }
.quiet svg { width: 14px; height: 14px; opacity: 0.75; }

/* ---- three actions, three weights --------------------------------------- */
/* Export, Save and the gallery are not equal, so they must not look equal.
   Export is the finish line and keeps the filled accent. Save is the same
   family one step down. The gallery is navigation rather than an action, so it
   stays quietest. One hue throughout: a second colour would be three shouting
   at once. */
.soft {
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.soft:hover { filter: brightness(0.97); }

.quiet { display: inline-flex; align-items: center; gap: 6px; }
.quiet svg { width: 14px; height: 14px; opacity: 0.75; }

/* ---------- phone ---------- */
/* The side-by-side layout stops working well below 640px: the stage collapses
   to a sliver and the top bar's three columns run off the edge. So stack it -
   preview on top at the full width of the screen, settings in a scrolling
   panel underneath - and give the top bar two rows so nothing collides.
   Nothing here touches the tablet (900px) or desktop layout. */
@media (max-width: 640px) {
  /* top bar: brand and view tabs share row one, the buttons take row two. */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand   mid"
      "actions actions";
    gap: 6px 8px;
    padding: 6px 10px;
  }
  .brand { grid-area: brand; gap: 6px; }
  .midbar, .topbar > .viewtoggle { grid-area: mid; }
  .actions { grid-area: actions; flex-wrap: wrap; row-gap: 6px; gap: 6px; }

  .logo { font-size: 16px; }
  /* 16px, not 14. Safari zooms the whole page when a field under 16px takes
     focus, and the layout that was just fitted into 375px is then wider than
     the screen. This field is written with no type attribute, so the
     input[type=text] rule that carries 16px never reached it. */
  .name-input { flex: 1 1 auto; min-width: 0; max-width: none; font-size: 16px; }
  /* The autosave indicator - Saving... / Saved. Dropped on a phone for room,
     and that is a real loss rather than a duplicate of the Save button: Save
     only opens the dialog and never reports autosave state. The top bar is
     already two rows tall here, so the room wins. */
  .status { display: none; }

  .vt { padding: 9px 10px; font-size: 12px; }

  /* The size readout is information, not a button; it gets its own quiet line
     rather than fighting the buttons for horizontal room. */
  .actions > #sizeReadout { flex: 1 0 100%; order: -1; font-size: 11.5px; }

  .icon-btn { width: 38px; height: 38px; font-size: 16px; }
  .primary, .ghost, .soft { padding: 11px 14px; }

  /* Icon only - the label "Reka bentuk saya" is the widest thing in the row
     and the folder icon carries the same meaning. */
  #filesBtn {
    width: 38px; height: 38px; padding: 0;
    justify-content: center; font-size: 0;
  }
  #filesBtn svg { width: 18px; height: 18px; }

  /* ---- stacked layout ---- */
  .layout { flex-direction: column; }

  /* The tool rail becomes a strip across the top of the preview. */
  .tools {
    width: auto; flex: none; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 4px 6px; gap: 2px; overflow-x: auto;
  }
  /* Seven tools have to fit a 390 px phone without hiding Delete off the end. */
  .tool { flex: none; min-width: 48px; padding: 7px 2px; }
  .tool-spacer { flex: 1 0 8px; }

  .stage {
    flex: 5 1 0;
    min-height: 240px;
    /* dimension arrows are drawn outside the drawing box; on a phone the
       settings panel is directly below them, so clip. */
    overflow: hidden;
  }

  /* The face picker is wider than a phone; let it scroll inside the stage
     rather than pushing the page sideways. */
  .faces {
    left: 8px; right: 8px; transform: none;
    /* width back to auto: left and right both given, so the width follows them.
       Leaving the base rule's max-content here would make the strip 700-odd px
       wide inside a 375 px phone and drag the page sideways. */
    width: auto;
    max-width: none; justify-content: flex-start;
    overflow-x: auto; border-radius: 10px;
  }
  /* Compact enough that a lidded box's seven faces still fit without a
     sideways scroll inside the strip. */
  .face { flex: none; min-width: 44px; padding: 5px 4px 6px; gap: 4px; font-size: 10px; }
  .face-ico { width: 24px; height: 24px; }
  .face-ico svg { width: 22px; height: 22px; }
  .face-sep { margin: 4px 3px; }
  /* Bottom-centre puts the hint straight over the box and its dimension
     labels once the stage is only phone-wide, so it moves to the top left,
     under the backdrop picker and clear of the lid button. */
  .stage-hint {
    top: 56px; bottom: auto; left: 8px; transform: none;
    max-width: calc(100% - 16px); font-size: 11px; padding: 5px 10px;
  }

  .inspector {
    flex: 4 1 0;
    width: auto;
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 10px 12px 28px;
    -webkit-overflow-scrolling: touch;
  }
  .insp-title { margin: 2px 0 8px; }

  /* ---- finger-sized controls ---- */
  .group > summary { padding: 14px 12px; }
  input[type="text"], input[type="number"], select, textarea {
    /* 16px also stops iOS zooming the page when a field takes focus. */
    font-size: 16px; padding: 10px 11px;
  }
  .seg button { padding: 12px 4px; font-size: 13px; }
  .cat-tabs button { padding: 9px 13px; }
  .face-opt { min-height: 48px; }
  input[type="range"] { height: 28px; }

  /* The popover is placed to the right of its tool button, which worked while
     the tools were a left-hand rail; in a top strip it lands off the screen.
     On a phone it becomes a sheet across the bottom instead - the inline
     left/top the script writes have to be overridden for that. */
  .popover {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: 8px;
    max-width: none;
    max-height: 55vh;
    overflow-y: auto;
  }
  .emoji-grid { max-height: none; }
  .emoji-grid button { font-size: 22px; padding: 6px 2px; }
  .shape-list button { padding: 11px 9px; }

  /* ---- dialogs ---- */
  /* A row of four or five export buttons is wider than the screen, so the row
     wraps into pairs instead of pushing the primary action off the edge. */
  .dlg-body { padding: 16px; gap: 12px; }
  .dlg-actions { flex-wrap: wrap; gap: 8px; }
  .dlg-actions button { flex: 1 1 42%; min-width: 0; }
  .dlg-actions .ghost.wide { padding: 11px 12px; }
  .layer-key { flex-wrap: wrap; gap: 6px 14px; }
  #filesDlg .design-list { max-height: 40vh; }
}