/* Floor Plan Web Editor — Phase 1 (view + export)
   Light, professional real-estate-tool theme. */

:root {
  --bg:            #f4f5f7;
  --panel:         #ffffff;
  --ink:           #1d2330;
  --ink-soft:      #5b6473;
  --line:          #e2e5ea;
  --line-strong:   #c9ced6;
  --accent:        #2f6fed;
  --accent-ink:    #ffffff;
  --accent-soft:   #eaf1ff;
  /* Accent text/icons ON --accent-soft: plain --accent only reaches 4.01:1 there
     (below AA). This darker accent is 5.45:1 on soft, 6.18:1 on white. */
  --accent-strong: #1a56db;
  --danger:        #d4493a;
  --ok:            #1f9d63;
  /* --ok is tuned for dots/icons; as TEXT on white it is only ~3.1:1, below the
     WCAG AA 4.5:1 floor. Use this darker pair for green body text (~6.0:1). */
  --ok-ink:        #12704a;
  /* Secondary text. Defined here (was only ever an inline fallback) so every
     use meets WCAG AA 4.5:1 on --panel/--bg instead of the old #94a3b8 (~2.8:1). */
  --muted:         #5b6473;

  /* Plan rendering colors */
  --wall-outer:    #1d2330;
  --wall-inner:    #4a5260;
  --wall-railing:  #666666;
  --opening:       #ffffff;
  --window-pane:   #2f6fed;
  --door-arc:      #8a6d3b;
  --room-fill:     rgba(0,0,0,0);   /* no room fill — matches app-2D (source of truth) */
  --room-ink:      #2a3140;
  --area-ink:      #596372;
  --label-ink:     #2a3140;

  /* Furniture (editor-only 2D rendering) */
  --furn-fill:     rgba(120,134,156,0.14);
  --furn-stroke:   #6b7686;
  --furn-ink:      #4a5260;
  --furn-tick:     #9aa3b2;
  --furn-name:     #5b6473;

  --shadow: 0 1px 2px rgba(20,30,55,.06), 0 4px 16px rgba(20,30,55,.08);
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  /* This is a canvas editor, not a document — dragging to draw/move a wall must
     never start a text selection ("whole page selected" bug). Inputs re-enable
     selection below. */
  user-select: none;
  -webkit-user-select: none;
}
/* Editable fields stay selectable so the context-panel inputs work normally. */
input, textarea, select {
  user-select: text;
  -webkit-user-select: text;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  /* The floating bottom toolbar lives inside this header. Since <body> is a flex
     column, the header and <main> are flex items whose z-index applies: the 3D
     view (#threeWrap, z-index:5, in <main>) tied the old header z-index:5 and,
     being later in the DOM, painted OVER the toolbar — so "back to 2D" was
     unreachable in 3D. A stacking context above the 3D layer fixes it. */
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  display: block; object-fit: cover;
}
.brand-name { font-weight: 700; letter-spacing: .2px; }

.title-block { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.plan-title {
  font-size: 15px; font-weight: 600; margin: 0;
  max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-subtitle { font-size: 12px; color: var(--ink-soft); }

.spacer { flex: 1 1 auto; }

/* Floating bottom toolbar — out of the top header's flow, centered over the
   canvas. flex-wrap keeps every control reachable on narrow/mobile screens. */
.toolbar {
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
  max-width: calc(100vw - 20px);
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .20);
}
.tool-group {
  display: flex; align-items: center; gap: 4px;
  padding: 3px; border: 1px solid var(--line); border-radius: 8px;
  background: #fbfcfe;
}
/* Scoped hide rule (matches every other .component.hidden below) so toggling
   `hidden` on a tool group — e.g. the AI group when the share lacks features.ai
   — actually collapses it; the bare `.hidden` class has no generic rule. */
.tool-group.hidden { display: none; }

/* Read-only client share (Model A): a share-token link is view + PDF export
   only. Hide every editing affordance (tools, snap, history, save); keep view
   switch, zoom, measurements display, export, language + help. */
body.read-only .toolrail,
body.read-only .canvas-snap,
body.read-only .history-group,
body.read-only #saveBtn,
body.read-only #shareBtn,
body.read-only #emailBtn,
body.read-only #planSettingsBtn,
body.read-only #planSettings,
body.read-only #capture3dBtn,
body.read-only .three-capture { display: none !important; }
/* Viewer delivery uses the owner's stored document; editing badges do not
   describe the recipient's actions. Permission checks remain server-side. */
body.read-only .prem-host.is-prem::after,
body.read-only .btn.is-locked::after,
body.read-only .tool.is-locked::after { content: none !important; display: none !important; }

/* ---- Multi-floor switcher (bottom-left of the canvas) ---- */
.floor-bar {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
  max-width: calc(100% - 24px);
}
.floor-tabs { display: flex; gap: 2px; overflow-x: auto; }
.floor-tab {
  border: 1px solid transparent; background: transparent; color: var(--ink-soft);
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px;
  cursor: pointer; white-space: nowrap; min-height: 30px;
}
.floor-tab:hover { background: var(--bg); color: var(--ink); }
.floor-tab.is-active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft); }
.floor-add, .floor-more {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.floor-add:hover, .floor-more:hover { border-color: var(--accent); color: var(--accent); }
.floor-menu {
  position: fixed; z-index: 40; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 4px; min-width: 150px;
  display: flex; flex-direction: column;
}
.floor-menu-item {
  border: none; background: transparent; text-align: left; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.floor-menu-item:hover { background: var(--bg); }
.floor-menu-item.is-danger { color: var(--danger); }
body.read-only .floor-bar { display: none !important; }

/* Save-chip states (distinct 'Ready' meanings) */
#saveState.is-saved { color: var(--ok); }
#saveState.is-blocked { color: var(--danger); font-weight: 600; }
.group-label {
  font-size: 11px; color: var(--ink-soft); padding: 0 6px;
  text-transform: uppercase; letter-spacing: .4px;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 7px 14px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .04s;
  user-select: none;
}
.btn:hover  { background: #f0f2f6; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-icon {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; font-size: 17px;
  border-color: transparent; background: transparent;
}
.btn-icon:hover { background: #eef1f6; }

.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.btn-primary:hover { background: #2660d8; }
.btn-secondary { background: var(--panel); }

.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn-secondary.is-busy::after { border-color: rgba(0,0,0,.25); border-top-color: var(--accent); }

/* Export file-format picker (pdf/png/jpg) — styled as a secondary button. */
.export-format { cursor: pointer; padding-right: 8px; }

/* ---------- Stage / canvas ---------- */
.stage { position: relative; flex: 1 1 auto; min-height: 0; }
.canvas-wrap {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  cursor: grab;
  overflow: hidden;
}
.canvas-wrap.dragging { cursor: grabbing; }
/* translateZ(0) promotes the SVG to its own GPU layer so the whole layer
   re-rasterizes on every pan/zoom — without it, transforming #viewport leaves
   repaint trails (ghosted walls / stacked labels) in WebKit & some Chrome. */
.plan-svg { width: 100%; height: 100%; display: block; transform: translateZ(0); }
/* Promote the pan/zoom group too: its transform becomes a compositor op,
   not a re-raster, eliminating the smearing during continuous gestures. */
#viewport { will-change: transform; }

/* SVG primitives (also set inline by app.js where dynamic) */
.wall-outer  { stroke: var(--wall-outer);  fill: var(--wall-outer);  }
.wall-inner  { stroke: var(--wall-inner);  fill: var(--wall-inner);  }
.wall-railing{ stroke: var(--wall-railing); stroke-dasharray: 6 3; fill: none; vector-effect: non-scaling-stroke; }
.opening-gap { stroke: var(--opening); }
.window-pane { stroke: var(--window-pane); }
.window-cap  { stroke: var(--wall-outer); }   /* window symbol end caps (matches app) */
.door-arc    { stroke: var(--door-arc); fill: none; }
.room-poly   { fill: var(--room-fill); stroke: none; }
.room-name   { fill: var(--room-ink); font-weight: 600; }
.room-area   { fill: var(--area-ink); font-weight: 700; }  /* readable informative text on the drawing surface */
.free-label  { fill: var(--label-ink); }

/* Furniture (editor-only — top-down sprites drawn BELOW the walls, like the
   app; sprite fills/strokes are inline (per-item tintHex), not classed) */
.furn-rect   { fill: var(--furn-fill); stroke: var(--furn-stroke); stroke-width: 1.5;
               vector-effect: non-scaling-stroke; }
.furn-tick   { stroke: var(--furn-tick); stroke-width: 2;
               vector-effect: non-scaling-stroke; stroke-linecap: round; }
.furn-abbr   { fill: var(--furn-ink); font-weight: 700; }
.furn-name   { fill: var(--furn-name); font-weight: 500; }

/* ---------- Overlay (loading / error) ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: rgba(244,245,247,.72); backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }
.overlay-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 30px; text-align: center; max-width: 380px;
}
.overlay-card p { margin: 14px 0 0; color: var(--ink-soft); }
.overlay-card.is-error p { color: var(--ink); }
.overlay-card .err-title { font-weight: 700; font-size: 16px; color: var(--danger); margin: 0; }
.spinner {
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.overlay-card.is-error .spinner { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Status bar ---------- */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 16px; background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft);
  flex: 0 0 auto;
}
.status-right { display: flex; align-items: center; gap: 8px; }
.dot { opacity: .5; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 54px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 50; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok   { background: var(--ok); }
.toast.err  { background: var(--danger); }

@media (max-width: 720px) {
  .plan-title { max-width: 26vw; }
  .brand-name { display: none; }
  .context-panel { width: 200px; }
  /* On a phone the floating toolbar and the 3D orbit/export controls both sit at
     the bottom and collided (toolbar clipped, "back to 2D" unreachable). Move the
     3D controls to the top of the canvas and tighten the toolbar so both fit. */
  .three-controls { flex-wrap: wrap; }
  .toolbar { bottom: 8px; gap: 6px; padding: 6px 8px; max-width: calc(100vw - 12px); }
}

/* ===========================================================================
   Phase 2 — editing tools, context panel, selection overlay
   =========================================================================== */

/* Active tool highlight in the toolbar. */
.btn-icon.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.btn-icon.is-active:hover { background: var(--accent-soft); }

/* Unsaved-changes indicator on the Save button. */
.dirty-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: middle;
}
.dirty-dot.hidden { display: none; }
.btn.is-dirty { border-color: var(--accent); }

/* Cursor hints by tool. */
.canvas-wrap.tool-crosshair { cursor: crosshair; }
.canvas-wrap.space-pan { cursor: grab; }
.canvas-wrap.editing-drag { cursor: grabbing; }

/* ---- Context panel (floating, top-right of the stage) ---- */
.context-panel {
  position: absolute; top: 14px; right: 14px; z-index: 8;
  width: 248px; max-height: calc(100% - 28px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; font-size: 13px;
}
.context-panel.hidden { display: none; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: -2px 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.panel-title { font-weight: 700; font-size: 14px; }
.panel-del {
  width: 28px; height: 28px; font-size: 14px;
  border-color: transparent; background: transparent; color: var(--danger);
}
.panel-del:hover { background: #fdecea; }

.panel-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 8px 0;
}
.panel-row label { color: var(--ink-soft); flex: 0 0 auto; }
.panel-input {
  font: inherit; font-size: 13px; flex: 1 1 auto; min-width: 0;
  max-width: 132px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 5px 8px; background: #fff; color: var(--ink);
}
.panel-input:focus { outline: none; border-color: var(--accent); }
select.panel-input { cursor: pointer; }
/* Read-only value (e.g. a symbol's type name) — right-aligned like the inputs. */
.panel-static { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--ink); font-weight: 600; }
.panel-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---- Selection / handle overlay (drawn inside the pan/zoom transform) ---- */
.editor-overlay { pointer-events: none; }

.ov-sel-wall  { stroke: var(--accent); stroke-width: 3; fill: none; opacity: .9; }
.ov-sel-room  { stroke: var(--accent); stroke-width: 2; fill: rgba(47,111,237,0.08);
                stroke-dasharray: 6 4; }
.ov-sel-ring  { stroke: var(--accent); stroke-width: 2; fill: none; }
.ov-handle    { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.ov-snap      { fill: var(--ok); stroke: #fff; stroke-width: 2; }
.ov-preview   { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 4; fill: none; }
.ov-ghost     { stroke: var(--accent); stroke-width: 6; opacity: .5; stroke-linecap: round; }
.ov-sel-furn  { stroke: var(--accent); stroke-width: 2.5; fill: rgba(47,111,237,0.08); }
/* Live dimension label (length in metres while drawing / on a selected wall). */
.ov-dim {
  fill: var(--accent); font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; pointer-events: none; user-select: none;
}
/* Smart-alignment guide line (Figma-style), shown while dragging furniture. */
.ov-guide {
  stroke: #ff2d9b; stroke-width: 1; stroke-dasharray: 5 4; opacity: .9;
  vector-effect: non-scaling-stroke; pointer-events: none;
}
/* Measure tool (purple): dashed segment, endpoint dots, distance label. */
.ov-measure     { stroke: #a855f7; stroke-width: 2; stroke-dasharray: 6 3; fill: none; }
.ov-measure-dot { fill: #a855f7; stroke: #fff; stroke-width: 1.5; }
.ov-measure-dim { fill: #a855f7; }

/* ---- Keyboard shortcuts overlay ---- */
.help-modal {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px);
}
.help-modal.hidden { display: none; }
.help-card {
  position: relative; background: var(--panel, #fff); color: var(--text, #0f172a);
  border-radius: 14px; padding: 22px 26px; min-width: min(320px, calc(100vw - 32px)); max-width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid var(--border, #e2e8f0);
}
.help-card h2 { margin: 0 0 14px; font-size: 17px; }
.help-card h3 {
  margin: 14px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted);
}
.help-list { display: flex; flex-direction: column; gap: 4px; }
.help-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.help-row kbd {
  flex: 0 0 auto; min-width: 46px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 3px 7px; border-radius: 6px; background: var(--bg, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0); box-shadow: 0 1px 0 var(--border, #e2e8f0);
}
.help-close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted);
}
.help-close:hover { color: var(--text, #0f172a); }
.lang-group .btn-seg { min-width: 30px; }

/* All-walls measurement labels (toggled by the measurements button). Font is
   world-sized so it scales with the plan; white halo keeps it readable. */
.dim-label {
  fill: #475569; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  paint-order: stroke; stroke: #ffffff; stroke-linejoin: round;
  pointer-events: none; user-select: none;
}

/* Instant custom tooltip for the (cryptic) toolbar icons. */
.ui-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #0f172a; color: #fff; border-radius: 8px;
  padding: 7px 10px; max-width: 240px;
  box-shadow: 0 10px 26px rgba(0,0,0,.30);
  font-size: 12px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px;
}
.ui-tip.hidden { display: none; }
.ui-tip-name { font-weight: 700; }
.ui-tip-desc { opacity: .82; }
.ov-furn-ghost{ stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4;
                fill: rgba(47,111,237,0.06); opacity: .85; }

/* ---- Furniture VARIANT library (popover under the toolbar button) ---- */
.furniture-palette {
  position: fixed; z-index: 30;
  width: 340px; max-width: calc(100vw - 16px);
  max-height: min(66vh, 560px); overflow-y: auto;
  padding: 10px 12px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.furniture-palette.hidden { display: none; }

.furn-group-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); margin: 10px 2px 6px;
}
.furn-group-head:first-child { margin-top: 2px; }
.furn-group-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px;
}
.furn-var-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.furn-var-main {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; padding: 8px 4px 6px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel); color: var(--ink); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.furn-var-main:hover { background: #f0f2f6; border-color: var(--accent); }
.furn-var-prev { height: 50px; display: grid; place-items: center; }
.furn-var-name {
  font-size: 11.5px; font-weight: 600; line-height: 1.1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.furn-var-size { font-size: 9.5px; color: var(--ink-soft); }
.furn-var-tints { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.furn-tint-dot {
  width: 14px; height: 14px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.25); box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset;
}
.furn-tint-dot:hover { transform: scale(1.18); }

/* ---------- 2D / 3D view switch ---------- */
.btn-seg {
  min-width: 38px; height: 34px; padding: 0 10px;
  font-size: 12px; font-weight: 700;
  border-color: transparent; background: transparent; color: var(--ink-soft);
}
.btn-seg:hover { background: #eef1f6; }
.btn-seg.is-active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-soft);
}

/* ---------- 3D dollhouse view ---------- */
.three-wrap {
  position: absolute; inset: 0; z-index: 5;
  background:
    radial-gradient(120% 120% at 50% 0%, #fbfcfe 0%, #eef1f6 55%, #e4e8ef 100%);
  overflow: hidden;
}
.three-wrap.hidden { display: none; }
.three-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.three-canvas:active { cursor: grabbing; }
.three-controls {
  /* Sit at the TOP of the 3D canvas (below the header bar) so the "Export with
     this 3D angle" button never collides with the bottom editing toolbar. */
  position: absolute; left: 0; right: 0; top: 66px; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
.three-controls .btn { pointer-events: auto; }
.three-hint {
  font-size: 12px; color: var(--ink-soft);
  background: rgba(255,255,255,.78); padding: 5px 10px; border-radius: 999px;
  box-shadow: var(--shadow); backdrop-filter: blur(4px);
}
.three-badge {
  flex: 0 0 auto;
  z-index: 7; font-size: 12px; font-weight: 700; color: var(--ok);
  background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 999px;
  box-shadow: var(--shadow);
}
.three-badge.hidden { display: none; }

/* ===========================================================================
   Account mode — premium sign-in + "My plans" picker (SVG icons + motion)
   =========================================================================== */
.account-view {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px 18px; overflow-y: auto;
  /* Soft brand-tinted mesh so it never reads as a blank form. */
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(47,111,237,.10), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(47,111,237,.08), transparent 50%),
    var(--bg);
}
.account-card {
  position: relative; width: 100%; max-width: 408px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20,30,55,.05), 0 18px 50px rgba(20,30,55,.13);
  padding: 30px 32px 26px;
  overflow: hidden;
}
/* Accent hairline along the top edge. */
.account-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #6f9bff);
}
.account-card-wide { max-width: 588px; }

.account-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.account-badge {
  width: 46px; height: 46px; border-radius: 13px;
  overflow: hidden; display: block;
  box-shadow: 0 6px 16px rgba(47,111,237,.35);
}
.account-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-badge svg { width: 26px; height: 26px; }
.account-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; color: var(--ink); }
.account-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.account-sub { margin: 0 0 20px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
/* Owner-bound link gate: why sign-in is required before the plan shows. */
.token-gate-note {
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #3b82f6) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 25%, transparent);
  color: var(--ink);
}

.account-field { display: block; margin-bottom: 13px; }
.account-flabel {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 5px 2px;
}
.account-input {
  font: inherit; font-size: 15px; width: 100%; height: 48px;
  border: 1.5px solid var(--line-strong); border-radius: 12px;
  padding: 0 15px; background: #fff; color: var(--ink);
  transition: border-color .14s, box-shadow .14s;
}
.account-input::placeholder { color: #737d8c; }
.account-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(47,111,237,.14);
}
.account-error {
  margin: 4px 0 12px; padding: 11px 13px; border-radius: 10px;
  background: #fdece9; border: 1px solid #f6cfc9;
  color: var(--danger); font-size: 13px; line-height: 1.45;
}
.account-cta {
  width: 100%; height: 50px; font-size: 15.5px; font-weight: 700; margin-top: 4px;
  color: #fff; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(150deg, var(--accent), #4f84ff);
  box-shadow: 0 8px 20px rgba(47,111,237,.30);
  transition: transform .06s, box-shadow .16s, filter .16s;
}
.account-cta:hover { filter: brightness(1.05); box-shadow: 0 10px 26px rgba(47,111,237,.38); }
.account-cta:active { transform: translateY(1px); }
/* "or" divider between email + Apple */
.account-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: #9aa3b2; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.account-or::before, .account-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
/* Sign in with Apple — black button per Apple HIG. */
.account-apple {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; cursor: pointer;
  border: none; border-radius: 12px; font: inherit; font-size: 15.5px; font-weight: 600;
  background: #000; color: #fff;
  transition: transform .06s, box-shadow .16s, opacity .16s;
}
.account-apple svg { margin-top: -2px; }
.account-apple:hover { box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.account-apple:active { transform: translateY(1px); }
.account-apple:disabled { opacity: .6; cursor: default; }
:root[data-theme="dark"] .account-apple, .account-apple { color: #fff; }

.account-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 16px 0 0; color: var(--ink-soft); font-size: 12.5px;
}
.account-premium-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(150deg, #ffb300, #ff8a00);
  box-shadow: 0 0 0 3px rgba(255,160,0,.16);
}

/* ---- Plans picker ---- */
.account-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 4px;
}
.account-head-txt { min-width: 0; }
.account-head .account-sub { margin-bottom: 8px; }
.account-logout {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 600;
  color: var(--ink-soft);
}
.account-logout svg { width: 17px; height: 17px; }
.account-logout:hover { color: var(--ink); }

.account-plans {
  margin-top: 12px; display: flex; flex-direction: column; gap: 9px;
  max-height: min(60vh, 520px); overflow-y: auto;
  padding: 2px; margin-left: -2px; margin-right: -2px;
}
.account-loading { display: grid; place-items: center; padding: 34px 0; }

.account-plan {
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  transition: transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .13s, background .13s;
}
.account-plan:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 8px 22px rgba(20,30,55,.10);
}
.account-plan:active { transform: translateY(0); }
/* The clickable "open this plan" region — fills the row, leaving space for actions. */
.account-plan-main {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
  text-align: left; font: inherit; padding: 12px 4px 12px 14px; cursor: pointer;
  background: none; border: 0; border-radius: 13px; color: inherit;
}
.account-plan-main.is-editing { cursor: default; }
.account-plan-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Per-plan action buttons (duplicate / delete). Muted until the row is hovered. */
.account-plan-actions {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding-right: 8px; opacity: .55; transition: opacity .13s;
}
.account-plan:hover .account-plan-actions,
.account-plan:focus-within .account-plan-actions { opacity: 1; }
.account-plan-act {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--ink-soft);
  cursor: pointer; transition: background .13s, color .13s;
}
.account-plan-act svg { width: 18px; height: 18px; display: block; }
.account-plan-act:hover { background: var(--accent-soft); color: var(--accent); }
.account-plan-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-plan-act-danger:hover { background: #fdecea; color: var(--danger); }
.account-plan-out { opacity: 0; transform: translateX(12px); transition: opacity .18s, transform .18s; }
.account-plan-thumb {
  flex: 0 0 auto; width: 52px; height: 44px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  overflow: hidden;
}
.account-plan-thumb svg { width: 24px; height: 24px; }
.account-plan-thumb.has-mini { background: #f6f8fd; padding: 5px; }
.account-plan-thumb .plan-mini { width: 100%; height: 100%; color: var(--wall-inner); }
.account-plan-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.account-plan-name {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-plan-meta { color: var(--ink-soft); font-size: 12px; }
.account-plan-open { flex: 0 0 auto; color: var(--line-strong); transition: color .13s, transform .13s; }
.account-plan-open svg { width: 18px; height: 18px; display: block; }
.account-plan:hover .account-plan-open { color: var(--accent); transform: translateX(2px); }

.account-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-soft); font-size: 14px; text-align: center; padding: 30px 10px;
}
.account-empty-icon { color: var(--line-strong); }
.account-empty-icon svg { width: 46px; height: 46px; }
.account-empty p { margin: 0; max-width: 320px; line-height: 1.5; }

/* ---- Motion ---- */
@keyframes account-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.account-rise { animation: account-rise .42s cubic-bezier(.2,.75,.3,1) both; }
@keyframes account-plan-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.account-plan-in { animation: account-plan-in .38s cubic-bezier(.2,.75,.3,1) both; }
@keyframes account-shake {
  10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); }
}
.account-shake { animation: account-shake .5s cubic-bezier(.36,.07,.19,.97) both; }

@media (prefers-reduced-motion: reduce) {
  .account-rise, .account-plan-in, .account-shake { animation: none; }
  .account-plan:hover { transform: none; }
}

@media (max-width: 560px) {
  .account-logout span { display: none; }
  .account-logout { padding: 0 11px; }
  .account-card { padding: 26px 22px 22px; }
}

/* A small dot on Export PDF when a 3D angle is queued for inclusion. */
.btn-primary.has-3d { position: relative; }
.btn-primary.has-3d::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--panel);
}

/* ---------------------------------------------------------------------------
   AI assistant panel — "talk to your plan".
   Floating card anchored bottom-right of the canvas; the assistant proposes
   edit operations which the editor applies as ONE undoable step.
   --------------------------------------------------------------------------- */
.btn-ai { color: var(--accent); font-size: 15px; }
.btn-ai.is-active { background: var(--accent-soft); }

.ai-panel {
  position: absolute; right: 16px; bottom: 16px; z-index: 40;
  width: 340px; max-width: calc(100vw - 32px);
  max-height: min(64vh, 560px);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(20,30,55,.06), 0 18px 44px rgba(20,30,55,.16);
  overflow: hidden;
}
.ai-panel.hidden { display: none; }

.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--accent-soft), transparent);
}
.ai-title { font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .2px; }
.ai-close {
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink-soft);
  padding: 2px 4px; border-radius: 6px;
}
.ai-close:hover { background: #eef1f6; color: var(--ink); }

.ai-log {
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; line-height: 1.5;
}
.ai-msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.ai-msg-bot  { align-self: flex-start; background: #f2f4f8; color: var(--ink); border-bottom-left-radius: 4px; }
.ai-msg-err  { align-self: flex-start; background: #fdecea; color: var(--danger); }
.ai-msg-note { align-self: flex-start; font-size: 11.5px; color: var(--ink-soft); background: transparent; padding: 0 2px; }
.ai-hint { color: var(--ink-soft); font-size: 12px; padding: 2px; }

.ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; }
.ai-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
  display: inline-block; animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-typing i:nth-child(2) { animation-delay: .18s; }
.ai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes aiBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing i { animation: none; opacity: .55; } }

.ai-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--panel); }
.ai-input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: 13px; color: var(--ink);
  background: #fbfcfe;
}
.ai-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.ai-send {
  flex: 0 0 auto; width: 36px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; cursor: pointer;
}
.ai-send:hover { background: #2660d8; }
.ai-send:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  .ai-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 56vh; }
}

/* ---- Plan check panel (reuses .ai-panel chrome, anchored bottom-left) ---- */
.check-panel { left: 16px; right: auto; }
.check-issue {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: #f7f9fc; border: 1px solid var(--line); font-size: 12.5px; line-height: 1.45;
}
.check-issue:hover { background: #eef3fb; border-color: var(--line-strong); }
.check-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.check-dot.error   { background: var(--danger); }
.check-dot.warning { background: #e0a11b; }
.check-dot.info    { background: var(--accent); }
.check-ok { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; font-size: 13px; padding: 6px 2px; }
.check-detail { margin-left: auto; padding-left: 8px; color: var(--ink-soft); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.check-rules { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.check-rules-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 5px; }
.check-rule { font-size: 12px; color: var(--ink-soft); line-height: 1.5; padding-left: 16px; position: relative; }
.check-rule::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

.import-tips { margin: 4px 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.import-tips li { font-size: 13px; line-height: 1.45; color: var(--ink); }

/* ---- Photo-import overlay ---- */
.import-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(20, 26, 40, .45); backdrop-filter: blur(2px);
}
.import-overlay.hidden { display: none; }
.import-card {
  background: var(--panel); border-radius: 16px; padding: 26px 30px;
  box-shadow: 0 20px 50px rgba(15,23,42,.3); text-align: center; max-width: 340px;
}
.import-card p { margin: 14px 0 0; font-size: 13.5px; color: var(--ink); }
.import-spinner {
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .import-spinner { animation-duration: 2.4s; } }

/* Drop-anywhere affordance while dragging a plan image over the canvas. */
body.dropping .canvas-wrap { outline: 3px dashed var(--accent); outline-offset: -10px; }

/* ---- Web-direct subscription (Paddle) UI ---- */
.sub-plans { display: grid; gap: 12px; margin: 6px 0 4px; }
.sub-plan {
  position: relative; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--panel);
  font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .05s;
}
.sub-plan:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47,111,237,.14); }
.sub-plan:active { transform: translateY(1px); }
.sub-plan-year { border-color: var(--accent); }
.sub-plan-name { font-weight: 700; font-size: 15.5px; }
.sub-plan-price { font-weight: 700; font-size: 15.5px; color: var(--accent); white-space: nowrap; }
.sub-plan-badge {
  position: absolute; top: -9px; left: 16px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.account-linkbtn {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600;
}
.account-linkbtn:hover { text-decoration: underline; }
/* Compact, right-aligned variant — the "Forgot password?" link under the field. */
.account-linkbtn-sm { width: auto; margin: -2px 0 6px auto; padding: 4px 2px; font-size: 12.5px; }
.account-newplan { margin: 0; white-space: nowrap; }
.account-empty .account-cta { margin-top: 16px; display: inline-block; width: auto; padding: 10px 22px; }

/* Paywall modal shown over the editor when a FREE prospect hits a value-action. */
/* Shared modal scrim for ALL centered dialogs (paywall, template gallery, email).
   Identity comes from each dialog's own data-testid + card class, NOT this scrim —
   so tests never confuse the paywall with the template gallery. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20, 26, 40, .5); backdrop-filter: blur(3px);
  animation: fpe-fade .18s ease both;
  overflow-y: auto;   /* never clip a tall card on short/mobile viewports */
}
@keyframes fpe-fade { from { opacity: 0; } to { opacity: 1; } }
.paywall-card {
  position: relative;
  background: var(--panel); border-radius: 20px; padding: 30px 30px 26px;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px); overflow-y: auto;   /* scroll inside if needed */
  box-shadow: 0 24px 60px rgba(15, 23, 42, .34);
  border: 1px solid var(--line);
}
.paywall-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--accent-soft); color: var(--ink);
  cursor: pointer; font-size: 14px; line-height: 30px; text-align: center;
  transition: background .15s;
}
.paywall-x:hover { background: var(--line); }

/* Onboarding — value-first start screen for a fresh free prospect. */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20, 26, 40, .5); backdrop-filter: blur(3px);
  animation: fpe-fade .18s ease both;
}
.onboard-panel {
  position: relative;
  background: var(--panel); border-radius: 22px; padding: 32px 30px 28px;
  width: 100%; max-width: 580px;
  box-shadow: 0 26px 64px rgba(15, 23, 42, .36);
  border: 1px solid var(--line);
}
.onboard-x {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--accent-soft); color: var(--ink);
  cursor: pointer; font-size: 14px; line-height: 30px; text-align: center; transition: background .15s;
}
.onboard-x:hover { background: var(--line); }
.onboard-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--ink); }
.onboard-sub { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .onboard-grid { grid-template-columns: 1fr; } }
.onboard-card {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 16px 16px; border-radius: 15px;
  border: 1.5px solid var(--line); background: var(--panel);
  font: inherit; color: var(--ink); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.onboard-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(47, 111, 237, .16); transform: translateY(-1px); }
.onboard-card:active { transform: translateY(0); }
.onboard-ic { font-size: 24px; line-height: 1.1; flex: 0 0 auto; }
.onboard-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.onboard-t { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.onboard-s { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.onboard-prem {
  font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 1px 7px; border-radius: 999px;
}

/* Email-to-client dialog reuses the paywall card; just the multiline note. */
.em-textarea { resize: vertical; min-height: 64px; font: inherit; line-height: 1.45; }

/* ---- Conversion paywall (benefits + recommended plan + trust) ---- */
.pay-card { max-width: 440px; padding: 30px 30px 24px; text-align: left; }
.pay-card .account-title { text-align: left; }
.pay-card .account-sub { text-align: left; margin-bottom: 16px; }
.pay-benefits {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; gap: 9px;
}
.pay-benefits li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.4; color: var(--ink);
}
.pay-chk {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
  color: var(--accent);
  background: var(--accent-soft); border-radius: 50%; padding: 2px;
}
.pay-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.pay-plan {
  position: relative; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--panel);
  font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.pay-plan:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47,111,237,.14); }
.pay-plan:active { transform: translateY(1px); }
.pay-plan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay-plan-best { border-color: var(--accent); background: var(--accent-soft); padding-top: 24px; }
.pay-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
}
.pay-plan-name { font-weight: 600; font-size: 13px; color: var(--ink-soft); }
.pay-plan-price { font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
.pay-plan-best .pay-plan-price { color: var(--accent); }
.pay-plan-permo { font-size: 11.5px; color: var(--ink-soft); min-height: 15px; }
.pay-plan.is-loading { pointer-events: none; opacity: .6; }
.pay-plan.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.pay-trust {
  margin: 14px 0 0; text-align: center;
  font-size: 11.5px; color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) { .pay-plan.is-loading::after { animation-duration: 2.4s; } }

/* ==========================================================================
   DESKTOP APP SHELL v2 — top bar / left rail / canvas / right sidebar / status
   Appended last so it overrides the legacy floating-toolbar rules. Design:
   neutral canvas, slate ink, one blue accent, crisp 1px borders, 8px rhythm.
   ========================================================================== */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.ic use, .ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- A. Top app bar ---------- */
.appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 52px; padding: 0 12px 0 14px; flex: 0 0 auto;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 40;
}
.appbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.appbar-right { display: flex; align-items: center; gap: 8px; }
.appbar .brand { text-decoration: none; color: inherit; }
.appbar .brand-name { font-size: 14px; }
.proj { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.plan-title {
  font-weight: 600; font-size: 14px; color: var(--ink);
  max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 6px; padding: 3px 6px; margin: -3px 0;
}
.plan-title[contenteditable="true"]:hover { background: var(--bg); }
.plan-title[contenteditable="true"]:focus { outline: 2px solid var(--accent); background: #fff; }
.save-state { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.save-state.is-saving { color: var(--accent); }
.save-state.is-dirty { color: #9a6410; }
.plan-subtitle { display: none; }
.ab-group { display: flex; align-items: center; gap: 4px; }
.export-cluster { padding: 0 4px 0 8px; margin-left: 4px; border-left: 1px solid var(--line); }
.select-compact {
  height: 34px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px;
  padding: 0 6px; cursor: pointer;
}
.select-compact:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Account/settings menu */
.acct-wrap { position: relative; }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 232px; padding: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.acct-menu.hidden { display: none; }
.menu-section { padding: 6px 6px 8px; }
.menu-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.lang-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.menu-select {
  width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface, #fff); color: var(--ink); font: inherit; font-size: 13px;
}
.menu-select:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.menu-hint { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; color: var(--ink-soft); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--bg); }
.menu-item .ic { width: 17px; height: 17px; color: var(--ink-soft); }

/* Buttons (shared with paywall/account) — appbar sizing */
.btn { height: 34px; }
/* Furniture/symbol variant cards reuse .btn for hover/focus states but are tall
   content cards (preview + name + size), NOT appbar-height controls — the fixed
   34px would clip them and collide the next category header. */
.furn-var-main.btn { height: auto; }
.btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.btn.btn-secondary, .btn.btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; font-weight: 600; }
.btn .ic { width: 17px; height: 17px; }
.btn-icon .ic { width: 19px; height: 19px; }

/* ---------- Workspace row ---------- */
.workspace { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }

/* ---------- B. Left tool rail ---------- */
.toolrail {
  flex: 0 0 auto; width: 60px; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
  position: relative; z-index: 30;
}
.rail-scroll {
  flex: 1 1 auto; min-height: 0;                 /* allow the flex child to shrink so overflow-y actually scrolls */
  overflow-y: auto; overflow-x: hidden;
  padding: 8px 8px 4px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
  /* Visible scroll affordance: a soft shadow appears at the top/bottom edge ONLY
     when there is more tool content to scroll toward (pure-CSS, no JS). */
  background:
    linear-gradient(var(--panel) 30%, rgba(255,255,255,0)) 0 0 / 100% 16px no-repeat,
    linear-gradient(rgba(255,255,255,0), var(--panel) 70%) 0 100% / 100% 16px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(15,23,42,.22), rgba(15,23,42,0)) 0 0 / 100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(15,23,42,.22), rgba(15,23,42,0)) 0 100% / 100% 10px no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.tool {
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--ink-soft); cursor: pointer; font: inherit;
  transition: background .12s, color .12s;
}
.tool > .ic { margin: 0 auto; }
.tool-label { display: none; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.tool:hover { background: var(--bg); color: var(--ink); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tool.is-active { background: var(--accent-soft); color: var(--accent); }
.tool.is-active .tool-label { color: var(--accent); font-weight: 600; }
.tool-danger:hover { background: #fdecea; color: var(--danger); }
.tool-ai { color: #7c4dff; }
.tool-ai:hover { background: #f0ecff; color: #6a3df0; }
.tool-ai.is-active { background: #ece6ff; color: #6a3df0; }
.tool:disabled { opacity: .4; cursor: not-allowed; }
/* Expanded rail (labels shown) */
.toolrail.is-expanded { width: 188px; }
.toolrail.is-expanded .tool { width: 100%; justify-content: flex-start; padding: 0 12px; }
.toolrail.is-expanded .tool > .ic { margin: 0; }
.toolrail.is-expanded .tool-label { display: inline; }
.rail-toggle {
  flex: 0 0 auto; height: 40px; margin: 4px 8px 8px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rail-toggle:hover { background: var(--bg); color: var(--ink); }
.toolrail.is-expanded .rail-toggle .ic { transform: rotate(45deg); }

/* Premium badge (shown before click for free prospects) */
.prem-host { position: relative; }
.prem-host.is-prem::after {
  content: "PRO"; position: absolute; top: 3px; right: 3px;
  font-size: 8px; font-weight: 800; letter-spacing: .03em; line-height: 1;
  padding: 2px 3px; border-radius: 4px; color: #fff; background: #7c4dff;
  pointer-events: none;
}
.toolrail.is-expanded .prem-host.is-prem::after { top: 50%; right: 12px; transform: translateY(-50%); }
.btn.prem-host.is-prem::after, .empty-act.prem-host.is-prem::after { top: 2px; right: 2px; }

/* ---------- C. Canvas area ---------- */
.canvas-area { flex: 1 1 auto; min-width: 0; position: relative; background: var(--bg); overflow: hidden; }
.canvas-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.canvas-cluster {
  position: absolute; top: 12px; right: 12px; z-index: 12;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.seg {
  display: inline-flex; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; box-shadow: var(--shadow); gap: 2px;
}
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg-btn .ic { width: 17px; height: 17px; }
.seg-btn:hover { background: var(--bg); color: var(--ink); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-btn.is-active { background: var(--accent-soft); color: var(--accent-strong); }
.zoom-seg .seg-btn { min-width: 34px; padding: 0; }
.canvas-snap {
  position: absolute; top: 12px; left: 12px; z-index: 12;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px 6px 4px 10px; box-shadow: var(--shadow);
}
.canvas-snap.hidden { display: none; }
.snap-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }

/* Empty state */
.empty-state { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; pointer-events: none; }
.empty-state.hidden { display: none; }
.empty-card {
  pointer-events: auto; text-align: center; max-width: 460px; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px; box-shadow: var(--shadow);
}
.empty-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--ink); }
.empty-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.empty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.empty-act {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.empty-act .ic { width: 22px; height: 22px; color: var(--accent); }
.empty-act:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47,111,237,.14); transform: translateY(-1px); }

/* Tool hint */
.tool-hint {
  position: absolute; bottom: 12px; left: 12px; z-index: 11;
  max-width: 60%; padding: 7px 12px; font-size: 12.5px; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
}
.tool-hint.hidden { display: none; }

/* ---------- D. Right contextual sidebar ---------- */
.sidebar {
  flex: 0 0 auto; width: 340px; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
  position: relative; z-index: 25;
}
.sidebar.hidden { display: none; }
.side-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.side-panel.hidden { display: none; }
.side-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line);
}
.side-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.side-close {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; color: var(--ink-soft); cursor: pointer;
}
.side-close:hover { background: var(--bg); color: var(--ink); }
.side-close .ic { width: 18px; height: 18px; }
.side-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }

/* AI composer inside the sidebar */
.side-panel .ai-form { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.side-panel .ai-input {
  flex: 1 1 auto; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px;
}
.side-panel .ai-input:focus { outline: none; border-color: var(--accent); }
.side-panel .ai-send {
  flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer;
}
.side-panel .ai-send .ic { width: 18px; height: 18px; }
.side-panel .ai-log { display: flex; flex-direction: column; gap: 10px; }

/* ---------- E. Status bar ---------- */
.statusbar {
  flex: 0 0 auto; height: 30px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--panel); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft);
}
.status-tool { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-right { display: flex; align-items: center; gap: 12px; }
.status-chip { color: var(--ink-soft); white-space: nowrap; }
.status-chip.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .plan-title { max-width: 22vw; } }
@media (max-width: 1024px) {
  .appbar .btn.btn-primary span, .appbar .btn.btn-secondary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .appbar .btn.btn-secondary, .appbar .btn.btn-primary { padding: 0; width: 34px; justify-content: center; }
  .sidebar { width: 300px; }
}
@media (max-width: 860px) {
  .sidebar { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 86vw); z-index: 55; box-shadow: -8px 0 30px rgba(15,23,42,.16); }
}
@media (max-width: 760px) {
  .appbar { height: 48px; padding: 0 8px; gap: 8px; }
  /* Keep the first-plan choices between the fixed view and floor controls.
     Short viewports scroll the card rather than cover its heading/actions. */
  .empty-state { padding: 112px 16px 64px; }
  .empty-card { max-height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 16px; }
  .proj { padding-left: 8px; }
  .plan-title { max-width: 34vw; }
  .export-cluster { padding-left: 4px; margin-left: 0; }
  .select-compact { display: none; }
  /* Tool rail becomes a bottom toolbar */
  .workspace { flex-direction: column; }
  .toolrail {
    order: 3; width: 100%; height: 60px; flex-direction: row;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .rail-scroll { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 2px; background: none; }
  .rail-group { flex-direction: row; }
  .rail-sep { width: 1px; height: 28px; margin: 0 6px; }
  .toolrail.is-expanded { width: 100%; }
  .toolrail.is-expanded .tool { width: 44px; padding: 0; justify-content: center; }
  .toolrail.is-expanded .tool-label { display: none; }
  .rail-toggle { display: none; }
  .canvas-area { order: 1; }
  .sidebar { top: 48px; bottom: 60px; }
}
@media (max-width: 480px) {
  .empty-actions { grid-template-columns: 1fr; }
  /* Reclaim the crowded app bar: drop the (truncated) plan title but keep the
     save-state chip, which is the useful live feedback on a phone. */
  .plan-title { display: none; }
  .sidebar { width: 100vw; max-width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .empty-act, .tool, .seg-btn { transition: none; } }

/* ---- Template gallery + tooltip shortcut + empty validation ---- */
.tpl-modal { max-width: 720px; }
.tpl-modal .account-title { text-align: left; margin-bottom: 16px; }
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: 1fr 1fr; } }
.tpl-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 10px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .05s;
}
.tpl-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47,111,237,.14); transform: translateY(-1px); }
.tpl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-thumb {
  display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
}
.tpl-thumb svg { width: 100%; height: 100%; display: block; }
.tpl-name { font-weight: 600; font-size: 13.5px; }
.tpl-meta { font-size: 12px; color: var(--ink-soft); }
.tpl-card.is-loading { pointer-events: none; opacity: .6; }
.tpl-card.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

.ui-tip-kbd {
  display: inline-block; margin-left: 7px; padding: 1px 5px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; color: #cbd5e1;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
}
.check-empty { padding: 6px 2px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ===================================================================
   CONTEXTUAL PAYWALL — restrained motion (180–300ms), reduced-motion safe
   =================================================================== */
.pw-card { animation: pw-in .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pw-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
.pw-title { margin-bottom: 4px; }

/* before / after demonstration */
.pw-demo {
  position: relative; margin: 14px 0 4px; padding: 12px 10px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pw-demo-svg { width: 100%; max-width: 260px; height: auto; display: block; }
.pw-demo-cap { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.pw-demo-svg { max-width: 320px; border-radius: 8px; overflow: hidden; }
/* The buyer's own first sheet (export paywall): paper white in both themes. */
.pw-plan-preview { width: 100%; max-width: 420px; height: auto; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
/* The divider (and the clip that reveals the "after" side) sweeps back and
   forth across the plan: 10%..90% of the width, 5.2 s, both ways. */
.pw-demo-svg .pw-clip    { transform: translateX(50%); animation: pw-sweep 5.2s ease-in-out infinite; }
.pw-demo-svg .pw-divider { transform: translateX(50%); animation: pw-sweep 5.2s ease-in-out infinite; }
@keyframes pw-sweep { 0% { transform: translateX(50%); } 25% { transform: translateX(88%); } 50% { transform: translateX(50%); } 75% { transform: translateX(12%); } 100% { transform: translateX(50%); } }

/* benefits stagger (the context-matched benefit is first) */
.pw-benefits li { animation: pw-benefit .24s ease both; animation-delay: calc(.06s * var(--i, 0) + .1s); }
@keyframes pw-benefit { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* plan selection + checkout states */
.pay-plan { transition: border-color .18s, box-shadow .18s, transform .18s; }
.pay-plan:hover { transform: translateY(-1px); }
.pay-plan.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw-card.pw-unlocked { animation: pw-unlock .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pw-unlock { 0% { transform: none; } 35% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(22,163,74,.18); } 100% { transform: scale(1); box-shadow: none; } }

/* ---- AI locked state ---------------------------------------------------- */
.ai-lock-notice {
  margin: 8px 12px 10px; padding: 12px; border-radius: 12px;
  background: linear-gradient(180deg, #f6f4ff, #eef2ff);
  border: 1px solid #d9d6f5; display: flex; flex-direction: column; gap: 9px;
}
.ai-lock-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.ai-lock-cta { width: 100%; justify-content: center; }
.side-panel.is-locked .ai-input { background: var(--bg); color: var(--ink-soft); cursor: not-allowed; }
.side-panel.is-locked .ai-send { opacity: .45; cursor: not-allowed; }

/* premium marker on locked controls */
.tool.is-locked::after, .btn.is-locked::after {
  content: "PRO"; position: absolute; top: 2px; right: 2px;
  font-size: 8px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: #7c4dff; border-radius: 4px; padding: 1px 3px; line-height: 1.2;
}
.tool.is-locked, .btn.is-locked { position: relative; }

/* ---- AI change cards ---------------------------------------------------- */
.ai-changes {
  margin: 8px 0; padding: 10px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  animation: pw-benefit .22s ease both;
}
.ai-changes-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.ai-change { font-size: 12.5px; line-height: 1.4; padding-left: 18px; position: relative; color: var(--ink); }
.ai-change::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ai-change-add::before { content: "+"; color: #16a34a; }
.ai-change-delete::before { content: "−"; color: var(--danger); }
.ai-change-move::before { content: "→"; color: var(--accent); }
.ai-change-edit::before { content: "•"; color: var(--accent); }
.ai-change-skip { color: var(--ink-soft); font-style: italic; }
.ai-change-skip::before { content: "!"; color: #b58a3c; }
.ai-undo {
  margin-top: 4px; align-self: flex-start; padding: 6px 11px; min-height: 32px;
  font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
}
.ai-undo:hover:not(:disabled) { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.ai-undo:disabled { opacity: .55; cursor: default; }

/* ---- AI apply animation: a soft pulse over each changed region on canvas ---- */
.ai-fx-layer { pointer-events: none; }
.ai-fx {
  fill: none;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;   /* constant on-screen weight at any zoom */
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-fx-pulse 1.35s cubic-bezier(.22,.61,.36,1) forwards;
}
.ai-fx-add    { stroke: #16a34a; fill: rgba(22,163,74,.14); }
.ai-fx-delete { stroke: var(--danger, #d4493a); fill: rgba(212,73,58,.14); }
.ai-fx-move   { stroke: var(--accent, #2f6fed); fill: rgba(47,111,237,.12); }
.ai-fx-edit   { stroke: var(--accent, #2f6fed); fill: rgba(47,111,237,.12); }
@keyframes ai-fx-pulse {
  0%   { opacity: 0;   transform: scale(.86); }
  22%  { opacity: 1;   transform: scale(1.04); }
  45%  { opacity: .95; transform: scale(1); }
  70%  { opacity: .7;  transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.01); }
}
@keyframes ai-fx-fade { 0% { opacity: .9; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ai-fx { animation: ai-fx-fade .5s linear forwards; }
  .pw-card, .pw-benefits li, .ai-changes { animation: none !important; }
  .pw-demo-svg .pw-clip, .pw-demo-svg .pw-divider { animation: none !important; transform: translateX(50%); }
  .pay-plan:hover { transform: none; }
  .pw-card.pw-unlocked { animation: none !important; }
}

/* ---- Getting-started checklist (docked in the canvas, non-blocking) ------ */
.ob-checklist {
  position: absolute; left: 16px; bottom: 16px; z-index: 24;
  width: min(300px, calc(100% - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,.13);
  padding: 12px 12px 8px; animation: pw-benefit .24s ease both;
}
.ob-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ob-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); flex: 1 1 auto; }
.ob-count { font-size: 11.5px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.ob-x {
  width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
  border: 0; background: none; color: var(--ink-soft); border-radius: 8px; font-size: 13px;
}
.ob-x:hover { background: var(--bg); color: var(--ink); }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-step-btn {
  width: 100%; display: flex; align-items: flex-start; gap: 9px; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: inherit; color: var(--ink); min-height: 40px;
}
.ob-step-btn:hover:not(:disabled) { background: var(--bg); }
.ob-step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ob-check {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.ob-step.is-done .ob-check { background: #16a34a; border-color: #16a34a; }
.ob-step.is-done .ob-step-label { text-decoration: line-through; color: var(--ink-soft); }
.ob-step-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-step-label { font-size: 12.5px; font-weight: 600; }
.ob-step-hint { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }
.ob-prem {
  font-size: 8.5px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
  color: #fff; background: #7c4dff; border-radius: 4px; padding: 1px 4px;
}
@media (max-width: 760px) {
  .ob-checklist { left: 8px; right: 8px; bottom: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ob-checklist { animation: none !important; } }

/* ---- Email verification screen ------------------------------------------ */
.verify-code-input {
  font: 700 26px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .5em; text-align: center; text-indent: .5em; /* optically center digits */
}
.account-linkbtn-inline {
  display: inline; margin: 0; padding: 0; font-size: inherit; font-weight: 700;
}
.account-linkbtn-inline:disabled { color: var(--ink-soft); cursor: default; text-decoration: none; }

/* ---- Danger actions (delete account) ------------------------------------ */
.menu-item-danger { color: var(--danger); }
.menu-item-danger .ic { color: var(--danger); }
.menu-item-danger:hover { background: #fdecea; }
.account-cta-danger { background: var(--danger); }
.account-cta-danger:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(220,38,38,.3); }
.account-cta-danger:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; }

/* ---- Touch targets (WCAG 2.5.8) ----------------------------------------- */
/* On coarse pointers (touch), interactive controls that are visually compact on
   desktop are enlarged to a >=44px hit area so they're reliably tappable. The
   glyph/label keeps its size; only the target grows. Desktop (fine pointer) is
   untouched so the dense app-shell layout is preserved. */
@media (pointer: coarse) {
  .btn,
  .btn-icon,
  .btn-seg,
  .select-compact,
  .tool,
  .seg-btn,
  .menu-item,
  .panel-del {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-icon,
  .panel-del { width: 44px; height: 44px; }
  .lang-group .btn-seg { min-width: 44px; }
}

/* ---- Billing / subscription card (account view) ------------------------- */
.billing-card {
  margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel);
}
.billing-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted); }
.billing-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.billing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.billing-label { font-size: 14px; color: var(--ink); font-weight: 600; }
.billing-hint { font-size: 12.5px; color: var(--ink-soft); }
.billing-manage {
  margin-left: auto; padding: 6px 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); color: var(--accent-strong);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.billing-manage:hover { background: var(--accent-soft); border-color: var(--accent); }
.billing-manage:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.billing-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
/* Paywall "you already subscribe" caution + account-deletion billing warning. */
.pw-warn, .account-warn {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #fff6e6; border: 1px solid #f0d38a; color: #6b4e07;
}
@media (prefers-color-scheme: dark) {
  .pw-warn, .account-warn { background: rgba(240,211,138,.12); border-color: rgba(240,211,138,.4); color: #e8c874; }
}

/* Blocked-save restore bar --------------------------------------------------
   Persistent by design (unlike .toast): a refused write is a decision the user
   has to make, not a transient notice. */
.restore-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 9000; display: flex; align-items: center; gap: 12px;
  max-width: min(680px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px; border-radius: 10px;
  background: #7f1d1d; color: #fff;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
.restore-bar-btn {
  flex: none; padding: 6px 12px; border: 0; border-radius: 7px;
  background: #fff; color: #7f1d1d; font: inherit; font-weight: 600; cursor: pointer;
}
.restore-bar-btn:hover { background: #f3f4f6; }
.restore-bar-close {
  flex: none; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.restore-bar-close:hover { background: rgba(255, 255, 255, .18); }

/* Footer save slot: derived from the same value as the header chip. */
.status-save { margin-left: 12px; opacity: .75; white-space: nowrap; }
.status-save.is-saving { opacity: 1; }
.status-save.is-dirty { color: #b45309; opacity: 1; }
.status-save.is-blocked { color: #b91c1c; opacity: 1; }
/* A field whose value was refused: keep the old value, show it was rejected. */
.panel-input.is-invalid { border-color: #dc2626; background: #fef2f2; }

/* Version history dialog ---------------------------------------------------- */
.version-dlg {
  position: fixed; inset: 0; z-index: 9100; display: flex;
  align-items: center; justify-content: center; background: rgba(15, 23, 42, .45);
}
.version-card {
  width: min(520px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  padding: 18px 20px; border-radius: 12px; background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.version-card h3 { margin: 0 0 12px; font-size: 15px; }
.floor-name-dialog { width:min(360px,calc(100vw - 40px)); border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--panel); color:var(--ink); box-shadow:0 20px 50px rgba(15,23,42,.2); }
.floor-name-dialog::backdrop { background:rgba(15,23,42,.35); }
.floor-name-dialog form { display:grid; gap:14px; }
.floor-name-dialog label { font-weight:600; }
.floor-name-dialog input { width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--panel); color:var(--ink); }
.floor-name-actions { display:flex; justify-content:flex-end; gap:8px; }
.version-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #eef0f3; font-size: 13px;
}
.version-row:last-child { border-bottom: 0; }
.version-restore {
  flex: none; padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 7px;
  background: #fff; font: inherit; cursor: pointer;
}
.version-restore:hover:not(:disabled) { background: #f3f4f6; }
.version-restore:disabled { opacity: .5; cursor: default; }
.version-actions { margin-top: 14px; text-align: right; }
.version-close {
  padding: 6px 14px; border: 0; border-radius: 7px;
  background: #111827; color: #fff; font: inherit; cursor: pointer;
}

/* Validator: findings grouped by code, occurrences indented under the header. */
.check-group { font-weight: 600; }
.check-group.is-expandable { cursor: pointer; }
.check-group.is-expandable:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.check-group[aria-expanded="false"] + .check-sub { display: none; }
.check-sub { margin: 0 0 6px 18px; border-left: 2px solid #eef0f3; padding-left: 8px; }
.check-occurrence { font-weight: 400; font-size: 12px; cursor: pointer; }
.check-occurrence:hover { background: #f6f7f9; }
.check-occurrence:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

/* Furniture library: search + the category the place tool is armed with. */
.furn-search {
  width: calc(100% - 16px); margin: 8px; padding: 7px 10px;
  border: 1px solid #d8dbe0; border-radius: 8px; font: inherit; font-size: 13px;
}
.furn-search:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
.furn-empty { padding: 12px; color: #6b7280; font-size: 13px; }
.furn-var-card.is-active .furn-var-main { border-color: #2563eb; background: #eff6ff; }

/* A destructive-edit warning, distinct from the blocked-save bar: this one is
   telling you what an edit DID, not refusing it. */
.restore-bar-warn { background: #8a5a00; }
.restore-bar-btn-ghost { background: transparent; border: 1px solid currentColor; opacity: .85; }
/* ---- Photo-import review (non-destructive draft -> explicit Apply) ---- */
/* The card is wider than the standard 420px dialog: the whole point is to
   compare the detected geometry against the source photo side by side. */
.ir-card { max-width: 640px; text-align: left; }

.ir-preview {
  position: relative; margin: 12px 0 6px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #fbfcfe;
  display: grid; place-items: center; min-height: 180px;
  /* An explicit, content-independent track. Without it the column sizes to the
     image's INTRINSIC width, so a small source collapses the whole preview to a
     couple of pixels — which also makes the scale calibration undefined, since
     it measures clicks against the rendered SVG. */
  width: 100%; grid-template-columns: minmax(0, 1fr);
}
.ir-preview img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; }
/* The detection sits ON the photo so a wrong scale or rotation is obvious. */
.ir-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; transition: opacity .12s linear;
}
.ir-overlay .draft-thumb, .ir-preview > .draft-thumb { width: 100%; height: 100%; }

.draft-thumb .dt-room { fill: rgba(47, 111, 237, .10); stroke: none; }
.draft-thumb .dt-wall { stroke: #1d2330; stroke-linecap: round; }
.draft-thumb .dt-door { stroke: #2f6fed; stroke-width: 3; stroke-linecap: round; }
.draft-thumb .dt-win  { stroke: #129d6e; stroke-width: 3; stroke-linecap: round; }

.ir-slider { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.ir-slider input { flex: 1; }

.ir-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ir-stat {
  flex: 1 1 88px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 10px; background: #f7f9fc; border: 1px solid var(--line);
}
.ir-stat-v { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ir-stat-k { font-size: 11px; color: var(--ink-soft); }

/* Blocked is a statement of fact with reasons, not a red toast that still lets
   the user apply the result anyway. */
.ir-blocked {
  margin: 10px 0; padding: 10px 12px; border-radius: 10px;
  background: #fdf1ef; border: 1px solid var(--danger); color: var(--ink);
}
.ir-blocked strong { display: block; font-size: 13.5px; margin-bottom: 3px; color: var(--danger); }
.ir-blocked p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; }
.ir-blocked ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; }

.ir-notes { margin: 8px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); font-style: italic; }
.ir-warn {
  margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: #fff8e6; border: 1px solid #e0a11b; color: var(--ink);
}

.ir-issues { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 190px; overflow-y: auto; }
/* Rows are only interactive when a target exists to select — the import draft
   is not in the editor, so its rows are plain text. */
.check-issue { cursor: default; }
.check-issue.is-clickable { cursor: pointer; }
.ir-clean { margin: 0; font-size: 12.5px; color: var(--ok-ink); }

.ir-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ir-actions .account-cta { flex: 1 1 180px; margin: 0; }
.ir-actions .btn.ghost { flex: 0 1 auto; }
.ir-actions .account-cta[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 560px) {
  .ir-card { max-width: 100%; }
  .ir-stat { flex: 1 1 calc(50% - 8px); }
  .ir-actions .account-cta { flex: 1 1 100%; }
}

/* ---- Import review: measured quality, scale estimate, calibration ---- */
/* Replaces the single "recognition: medium" chip. A user who reads
   "Scale: low" knows what to fix; a bare aggregate tells them nothing. */
.ir-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ir-part {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 8px; border-radius: 8px; background: #f7f9fc; border: 1px solid var(--line);
  font-size: 11.5px;
}
.ir-part-k { color: var(--ink-soft); }
.ir-part-v { font-weight: 700; }
.ir-part-v.is-hi  { color: var(--ok-ink); }
.ir-part-v.is-mid { color: #8a6410; }
.ir-part-v.is-lo  { color: var(--danger); }

.ir-scalewarn {
  margin: 8px 0; padding: 10px 12px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #e0a11b;
}
.ir-scalewarn strong { display: block; font-size: 13px; margin-bottom: 3px; }
.ir-scalewarn p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; }
.ir-scalewarn .btn { margin: 0; }

/* While picking the two calibration points the preview is the target, so the
   overlay must not swallow the clicks. */
.ir-preview.is-calibrating { cursor: crosshair; }
.ir-preview.is-calibrating .ir-overlay { pointer-events: none; }
.ir-cal-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 6px 10px; font-size: 12px; text-align: center;
  background: rgba(29, 35, 48, .82); color: #fff;
}
.ir-cal-dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; z-index: 3;
  border-radius: 50%; background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--accent); pointer-events: none;
}

/* A description of what was PRODUCED, not of what the model meant to do. */
.ir-summary { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ir-summary li { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.ir-notes span { font-style: normal; font-weight: 600; color: var(--ink); }

/* Numbered rooms: throwaway labels so the user can point at one while
   describing what is wrong ("room 3 is really part of 2"). */
.draft-thumb .dt-numbg { fill: #fff; stroke: #1d2330; stroke-width: 1.5; }
.draft-thumb .dt-num { fill: #1d2330; text-anchor: middle; font-weight: 700; font-family: inherit; }

/* One correction round. */
.ir-refine { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #f7f9fc; border: 1px solid var(--line); }
.ir-refine label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ir-refine-hint { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.ir-refine textarea {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff;
}
.ir-refine .btn { margin-top: 8px; }
.ir-refine .btn.is-busy { opacity: .6; pointer-events: none; }
.ir-refined { margin: 10px 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  background: #eef7f2; border: 1px solid var(--ok); color: var(--ink); }

/* Picking the wall to measure. */
.ir-preview.is-calibrating svg.draft-thumb { pointer-events: auto; cursor: crosshair; }
.ir-preview.is-calibrating .dt-wall { stroke: #2f6fed; }
.ir-preview.is-calibrating .dt-wall:hover { stroke: #1a56db; }
.draft-thumb .dt-wall.is-picked { stroke: #d4493a; }

/* ---- Phone header ------------------------------------------------------
   At 375 px "‹ My plans" wrapped onto two lines and sat on top of the undo
   arrows, and "All changes saved" ran underneath the Save button. Nothing in
   that cluster needs words on a phone: the arrow is the back affordance, the
   dirty dot on Save is the save state, and the title keeps its ellipsis. */
@media (max-width: 560px) {
  #backToPlans { white-space: nowrap; padding: 6px 9px; font-size: 13px; }
  .appbar-left { gap: 8px; }
  .proj { gap: 6px; padding-left: 8px; }
  .plan-title { max-width: 22vw; }
  .save-state { display: none; }
  /* Seven controls on the right do not fit beside the back button, and the
     overflow landed ON it. Email-to-client and the share link are secondary on
     a phone; the four that remain (undo, redo, save, export) fit. */
  #emailBtn, #shareBtn { display: none; }
  .appbar-right { gap: 4px; flex-shrink: 0; }
  .appbar-left { overflow: hidden; }
}

/* ---- "Name this plan" prompt (export) ---------------------------------- */
.name-card {
  width: min(440px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px;
}
.name-card .modal-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--ink); }
.name-card .account-sub { margin: 0 0 14px; }
.name-card .account-input { width: 100%; box-sizing: border-box; }
.name-card .account-input.is-invalid { border-color: #c0392b; outline: 2px solid rgba(192, 57, 43, .25); }
.name-card .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }

/* ---- Plan settings popover (country + area standard, beside Export) ---- */
.plan-settings {
  position: absolute; top: 56px; right: 190px; z-index: 45; width: 320px;
  max-height: calc(100dvh - 80px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 14px 12px;
}
.plan-settings.hidden { display: none; }
.plan-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.plan-settings .menu-section { padding: 8px 0; }
.plan-settings-preview { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.document-3d-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.document-3d-row[hidden] { display:none; }
.document-3d-row .btn { font-size:12px; padding:4px 8px; }
.document-3d-row .document-remember { margin:6px 0; }
@media (max-width: 720px) { .plan-settings { right: 8px; left: 8px; width: auto; } }

/* ---- Plan list: search + sort + inline rename ---- */
.account-tools { display: flex; gap: 8px; margin: 0 0 10px; }
.account-search { flex: 1; min-width: 0; }
.account-sort { width: auto; }
.account-plan-rename { font: inherit; font-weight: 600; width: 100%; padding: 2px 6px; }

/* A finger on the canvas is drawing, not scrolling. Without this the browser
   claims the gesture as a scroll after a few pixels and fires pointercancel —
   the room tool never saw a pointerup, so a touch drew nothing. */
.canvas-wrap { touch-action: none; }

/* Korean breaks at spaces, not mid-word — see the note in landing.css. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
:lang(zh) { overflow-wrap: break-word; }

/* AI proposals stay separate from applied change cards. */
.ai-proposal { padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 9px; background: var(--panel); }
.ai-preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-preview-pair figure { margin: 0; min-width: 0; }
.ai-preview-pair figcaption { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.ai-preview-plan { display: block; width: 100%; height: 150px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.ai-preview-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-preview-actions button { min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.ai-preview-accept { background: var(--accent); color: var(--accent-ink); }
.ai-preview-actions button:disabled { opacity: .55; cursor: default; }

.ai-preview-loss { margin: 0; padding: 8px; border-left: 3px solid var(--danger); color: var(--ink); font-size: 12px; }

.document-options summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.document-options[open] summary { margin-bottom: 6px; }

/* Export: which document (one-page plan or plan set), with what each is for. */
.doc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.doc-choice { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); color: inherit; cursor: pointer; font: inherit; }
.doc-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.doc-choice-title { font-weight: 700; font-size: 14px; }
.doc-choice-sub { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 520px) { .doc-choices { grid-template-columns: 1fr; } }

/* Direct 3D editing shares the existing inspector and history controls. */
.three-edit-tools {position:absolute;left:12px;top:12px;right:154px;z-index:13;display:flex;align-items:center;gap:6px;flex-wrap:wrap;pointer-events:none;}
.three-edit-tools .btn,.three-selection-actions .btn {pointer-events:auto;min-height:44px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);}
.three-edit-tools .btn[aria-pressed="true"] {background:var(--accent-soft);border-color:var(--accent);}
.three-edit-hint {flex-basis:100%;font-size:12px;color:var(--ink-soft);background:var(--panel);padding:5px 8px;border-radius:6px;width:fit-content;}
.three-selection-actions {position:absolute;right:12px;bottom:76px;z-index:13;display:flex;gap:6px;flex-wrap:wrap;}
.three-edit-tools.hidden,.three-selection-actions.hidden,.three-edit-tools .btn.hidden,.three-selection-actions .btn.hidden {display:none;}
.three-canvas {touch-action:none;}
.three-canvas.three-dragging {cursor:grabbing;}
body.view-three .three-controls {top:auto;bottom:12px;justify-content:flex-end;padding:0 12px;}
body.view-three .three-controls .three-hint {display:none;}
body.view-three #snapBar {display:none;}
body.read-only .three-edit-tools,body.read-only .three-selection-actions {display:none!important;}
@media(max-width:700px){
 .three-edit-tools {right:146px;left:8px;top:8px;gap:4px;}
 .three-edit-tools .btn {font-size:12px;padding:6px 8px;}
 .three-edit-hint {max-width:100%;font-size:11px;}
 .three-selection-actions {right:8px;bottom:96px;gap:4px;}
 body.view-three .three-controls {bottom:48px;}
}

.panel-head .panel-title {margin-right:auto;}
.panel-close {font-size:24px;min-width:44px;min-height:44px;}
@media(max-width:1024px) {
 body.view-three .sidebar.properties-open {top:auto;bottom:60px;width:100%;max-height:34vh;overflow-y:auto;box-shadow:0 -4px 24px rgba(15,23,42,.12);}
 body.view-three .sidebar.properties-open .side-panel {flex:none;}
 body.view-three .sidebar.properties-open .panel-head {position:sticky;top:0;z-index:1;background:var(--panel);}
 body.view-three .three-selection-actions {top:165px;bottom:auto;}
}

/* A menu item can be withheld for this account (e.g. no web subscription). */
.menu-item[hidden] { display: none; }

/* UI/UX: readable actions and content-sized properties, across pointer/touch. */
.rail-tabs { display: none; }
.rail-heading { display: none; color: var(--ink-soft); font-size: 11px; font-weight: 650; padding: 8px 12px 3px; }
.toolrail.is-expanded .rail-heading { display: block; }
#measureBtn.is-active { background: transparent; color: var(--accent-strong); }
#measureBtn.is-active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); position: absolute; right: 5px; bottom: 5px; }
.tool.is-active, .tool.is-active .tool-label { color: var(--accent-strong); }
.panel-more { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.panel-more summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink-soft); }
.panel-input { min-height: 36px; }
.panel-row { min-height: 42px; gap: 12px; }
.panel-row label { cursor: pointer; }
.panel-head { gap: 4px; }
.panel-head .panel-title { min-width: 0; overflow-wrap: anywhere; }
.panel-del { min-width: 44px; min-height: 44px; }
.palette-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.palette-head .side-close { font-size: 24px; width: 44px; height: 44px; }
.furn-var-prev { height: 70px; }
.appbar-right { flex-shrink: 0; }
.proj { flex: 1 1 auto; overflow: hidden; }
.plan-title { min-width: 0; flex: 1 1 auto; }
.save-state { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
  .appbar { gap: 8px; }
  .appbar-left { gap: 8px; flex: 1 1 auto; }
  .appbar .brand-name { display: none; }
  .proj { padding-left: 8px; gap: 6px; }
  .save-state { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { width: 280px; }
}
@media (max-width: 760px) {
  body { height: 100dvh; }
  .toolrail { height: 102px; flex-direction: column; }
  .rail-tabs { display: flex; padding: 4px 8px 0; gap: 4px; flex: 0 0 36px; }
  .rail-tab { flex: 1; min-width: 0; border: 0; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: transparent; padding: 6px 4px; }
  .rail-tab[aria-pressed="true"] { color: var(--accent-strong); background: var(--accent-soft); }
  .rail-tab:focus-visible { outline: 2px solid var(--accent); }
  .rail-scroll { flex: 1; padding: 4px 8px; scrollbar-width: thin; gap: 4px; }
  .rail-sep, .toolrail.is-expanded .rail-heading { display: none; }
  .rail-group { flex: 0 0 auto; gap: 4px; }
  .rail-group.mobile-inactive { display: none; }
  .tool, .toolrail.is-expanded .tool { width: 64px; height: 54px; flex: 0 0 64px; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 2px; }
  .tool > .ic, .toolrail.is-expanded .tool > .ic { margin: 0; width: 19px; height: 19px; }
  .tool-label, .toolrail.is-expanded .tool-label { display: block; font-size: 10px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
  .sidebar { top: auto; bottom: 132px; right: 0; left: 0; width: 100%; max-width: 100%; max-height: 48dvh; border: 1px solid var(--line); border-radius: 16px 16px 0 0; }
  .sidebar.properties-open, body.view-three .sidebar.properties-open { top: auto; bottom: 132px; width: 100%; max-height: 40dvh; overflow-y: auto; box-shadow: 0 -4px 20px rgba(15,23,42,.10); }
  .sidebar.properties-open .side-panel { flex: none; padding-bottom: 8px; }
  .sidebar.properties-open .panel-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  .panel-input { min-height: 44px; font-size: 16px; }
  .panel-row { min-height: 48px; }
  .panel-row label { flex: 1; }
  .panel-check { width: 22px; height: 22px; }
  .appbar-left { flex: 1 1 auto; }
  .proj { border: 0; padding: 0; }
  .save-state { max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
  .appbar-right { gap: 4px; }
  .appbar .btn { height: 44px; }
  .appbar .btn-icon, .appbar .btn.btn-secondary, .appbar .btn.btn-primary { width: 44px; }
  .sidebar:not(.properties-open) { bottom: 132px; }
}

/* Keep the 3D delivery action readable: app-bar icon sizing does not apply here. */
.three-controls .btn.btn-primary { width: auto; height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; max-width: 100%; }
@media (max-width: 760px) {
  body.view-three .three-controls { bottom: 12px; left: 8px; right: 8px; padding: 0; }
  .three-controls .btn.btn-primary { font-size: 13px; }
  .palette-head { position: sticky; top: -10px; z-index: 2; background: var(--panel); }
  .sidebar.properties-open, body.view-three .sidebar.properties-open { bottom: calc(132px + var(--keyboard-inset, 0px)); max-height: max(100px, min(40dvh, calc(var(--visual-height, 100dvh) - 190px))); }
}

/* On phones, keep save feedback distinct from counts without wrapping the footer. */
@media (max-width: 760px) {
  .statusbar { gap: 8px; padding-inline: 8px; }
  #statusText { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #saveStateFoot { margin-left: 0; max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-right { min-width: 0; flex: 1 1 auto; max-width: 52%; gap: 8px; }
  #phaseLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #zoomLabel { flex-shrink: 0; }
}

@media (max-width: 1024px) {
  body.view-three .canvas-area.has-inspector .three-wrap { bottom: calc(var(--inspector-height, 0px) + 30px); }
  body.view-three .canvas-area.has-inspector .three-controls { display: none; }
}

@media (max-width: 760px) {
  .appbar:has(#backToPlans) .brand { display: none; }
  #backToPlans { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; font-size: 0; }
  #backToPlans::before { content: "‹"; font-size: 28px; line-height: 1; }
}

/* The 2D canvas must not show through when 3D reserves inspector space. */
body.view-three .canvas-wrap { visibility: hidden; }
@media (max-width: 1024px) {
  body.view-three .canvas-area.has-inspector .three-selection-actions { top: auto; bottom: 8px; }
  body.view-three .canvas-area.has-inspector #threeEditHint { display: none; }
}
@media (min-width: 761px) {
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .toolrail.is-expanded .rail-heading { grid-column: 1 / -1; padding: 5px 8px 3px; }
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) .tool { width: auto; min-height: 50px; height: auto; padding: 4px; flex-direction: column; gap: 3px; justify-content: center; }
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) .tool-label { white-space: normal; text-align: center; font-size: 11px; line-height: 14px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .appbar:has(#backToPlans) .brand { display: none; }
  .appbar-left { min-width: 160px; }
  .appbar-left .proj { flex: 1 1 auto; min-width: 0; }
  #saveState { display: none; } /* full save feedback remains in the footer */
  .export-cluster .select-compact { width: 105px; min-width: 0; }
}

.mobile-export-format { display: none; }
@media (max-width: 760px) {
  .mobile-export-format:not([hidden]) { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .mobile-export-format .menu-select { min-height: 44px; font-size: 16px; }
  .ai-input, .furn-search { font-size: 16px; min-height: 44px; }
  .side-panel .ai-send { width: 44px; height: 44px; }
}

/* Author display rules must respect catalogue filtering. */
.furniture-palette [hidden] { display: none !important; }


/* Selection identity and the few actions people use most often. */
.panel-heading { flex: 1 1 auto; min-width: 0; }
.panel-heading .panel-title { margin: 0; }
.panel-subject { margin-top: 3px; font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-subject[hidden] { display: none; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.panel-action { flex: 1 1 auto; min-height: 44px; padding: 7px 8px;
  white-space: normal; font-size: 12px; line-height: 1.3; }
.panel-action-danger { color: #b63a2e; }
.panel-action-danger:hover { background: #fdecea; }
/* 3D already has a visible selection-action row; do not duplicate it. */
body.view-three .panel-2d-action { display: none; }
body.view-three .panel-actions[data-kind="wall"],
body.view-three .panel-actions[data-kind="window"],
body.view-three .panel-actions[data-kind="furniture"] { display: none; }

/* In account plans, navigation and the project name take precedence over
   repeated branding/status when translated labels are long. */
.appbar:has(#backToPlans) .brand { display: none; }
#backToPlans { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 761px) {
  .appbar:has(#backToPlans) .appbar-left { flex: 1 1 auto; }
  .appbar:has(#backToPlans) .proj { flex: 1 1 auto; }
  .appbar:has(#backToPlans) .appbar-right { flex-shrink: 0; }
}
@media (min-width: 761px) and (max-width: 1440px) {
  .appbar:has(#backToPlans) #saveState { display: none; }
}

#contextPanel { padding: 12px 14px; box-sizing: border-box; }

@media (max-width: 760px) {
  #contextPanel { padding: 8px 14px; }
  #contextPanel .panel-head { margin-bottom: 6px; }
  #contextPanel .panel-actions { margin-bottom: 8px; }
  #contextPanel .panel-row { min-height: 44px; margin: 4px 0; }
  #contextPanel .panel-more { margin-top: 6px; }
  #contextPanel .panel-more summary { min-height: 44px; box-sizing: border-box; }
}


/* Desktop workspace: a stable list of daily tools, with secondary sections. */
.ai-example { max-width: 100%; border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; color: var(--ink); background: var(--panel); font: inherit;
  font-size: 12px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ai-example:hover { background: var(--accent-soft); }
.ai-example:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 761px) {
  .toolrail.is-expanded { width: 176px; }
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) { display: flex; flex-direction: column; gap: 2px; }
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) .tool { width: 100%; min-height: 36px; height: auto;
    flex-direction: row; justify-content: flex-start; gap: 10px; padding: 7px 12px; }
  .toolrail.is-expanded .rail-group:not([data-rail-group="select"]) .tool-label { text-align: left; white-space: normal;
    font-size: 12px; line-height: 18px; }
  .toolrail.is-expanded .rail-heading { padding: 8px 12px 4px; }
  .rail-scroll > .rail-sep { display: none; }
  .rail-section { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
  .rail-section summary { list-style: none; min-height: 36px; display: flex;
    align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px;
    font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
  .rail-section summary::-webkit-details-marker { display: none; }
  .rail-section summary::after { content: "⌄"; font-size: 16px; }
  .rail-section[open] summary::after { content: "⌃"; }
  .rail-section summary:hover { background: var(--bg); }
  .rail-section summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .toolrail:not(.is-expanded) .rail-section summary { font-size: 0; justify-content: center; }
  .toolrail .tool-ai { color: var(--ink-soft); }
}
@media (max-width: 760px) {
  .rail-section { display: contents; }
  .rail-section > summary { display: none; }
}

/* A single named delivery entry replaces scattered header icons. */
.delivery-wrap { position: relative; }
.delivery-wrap .acct-menu { min-width: 240px; }
.account-no-match { margin: 24px 8px; color: var(--ink-soft); text-align: center; }
body.read-only .delivery-wrap { display: none; }
@media (max-width: 760px) {
  .delivery-wrap { display: none; }
  .document-button span { display: none; }
  .document-button { padding: 0; width: 34px; }
}

.document-remember { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12px; line-height: 18px; color: var(--ink-soft); }
.document-remember input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); }


/* Project work starts in a desktop library, rather than a login-sized modal. */
.account-view:has(.account-library) { background: var(--bg); }
.account-library::before { display: none; }
.account-library { border-radius: 10px; box-shadow: none; }
.account-library .account-head-txt { flex: 1; }
.account-library .account-sub { margin-bottom: 0; }
.account-library .account-newplan { flex: 0 0 auto; width: auto; padding: 0 18px; height: 40px; margin: 0; background: var(--accent); box-shadow: none; border-radius: 7px; }
.account-library .account-logout { border-radius: 7px; }
.account-library .account-plan { border-radius: 8px; animation: none; }
.account-library .account-plan:hover { transform: none; box-shadow: none; border-color: var(--line-strong); background: var(--bg); }
.account-library .account-plan-main { border-radius: 7px; padding: 12px 14px; }
.account-library .account-plan-thumb { width: 72px; height: 56px; border-radius: 5px; }
.account-library .account-plan-meta { line-height: 1.5; }
.account-plan-menu { position: relative; margin-right: 10px; flex: 0 0 auto; }
.account-plan-menu > summary { list-style: none; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; font-size: 24px; border-radius: 6px; color: var(--ink-soft); }
.account-plan-menu > summary::-webkit-details-marker { display: none; }
.account-plan-menu > summary:hover, .account-plan-menu[open] > summary { background: var(--accent-soft); color: var(--ink); }
.account-plan-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-plan-menu .account-plan-actions { position: absolute; right: 0; top: 100%; z-index: 3; display: flex; flex-direction: column; align-items: stretch; min-width: 170px; opacity: 1; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); box-shadow: var(--shadow); }
.account-plan-menu .account-plan-act { width: auto; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 10px; height: 40px; white-space: nowrap; color: var(--ink); }
.library-billing { margin: 16px 0 4px; color: var(--ink-soft); font-size: 13px; }
.library-billing > summary { cursor: pointer; width: fit-content; padding: 6px 0; }
.library-billing .billing-card { margin-top: 4px; }
.empty-card { border-radius: 10px; box-shadow: none; }
.empty-primary .empty-act { min-height: 94px; border-radius: 8px; }
.empty-secondary { margin-top: 14px; }
.empty-secondary .empty-act { flex-direction: row; justify-content: center; font-size: 12px; padding: 9px 4px; border: none; background: none; min-height: 40px; }
.empty-secondary .empty-act .ic { width: 16px; height: 16px; color: var(--ink-soft); }
.empty-act:hover { transform: none; box-shadow: none; background: var(--bg); }
@media (min-width: 760px) {
  .account-view:has(.account-library) { padding: 36px 44px; align-items: start; }
  .account-library { max-width: 1120px; min-height: calc(100dvh - 72px); padding: 32px; }
  .account-library .account-head { align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .account-library .account-title { font-size: 26px; }
  .account-library .account-plans { max-height: none; overflow: visible; gap: 10px; margin-top: 24px; }
  .account-library .account-tools { margin-bottom: 12px; }
  .account-library .account-search { max-width: 440px; height: 40px; border-width: 1px; border-radius: 7px; }
  .account-library .account-sort { margin-left: auto; border-radius: 7px; }
}

/* Subscription indicators communicate availability without adding loud colours. */
.prem-host.is-prem::after { color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); }
.account-plan:nth-last-child(-n+2) .account-plan-actions { top: auto; bottom: 100%; }

/* Full-page account screens replace the editor, including older browsers. */
body.account-open > .appbar, body.account-open > .workspace, body.account-open > .statusbar { visibility: hidden; }

/* Document-only content must stay hidden when the current sheet does not use it. */
#planSettings [hidden] { display: none !important; }

/* One-plan purchase card: a distinct, full-width option under the two subscriptions. */
.pay-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; color: var(--muted, #6b7280); font-size: 13px; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #e5e7eb); }
.pay-plan-single { width: 100%; text-align: left; }
.pay-plan-single .pay-plan-price small { font-size: 12px; font-weight: 500; opacity: .75; }
.pay-plan-single .pay-plan-permo { white-space: normal; }

/* Keep Import and Check plan available even on short desktop displays. */
.rail-priority { flex: 0 0 auto; padding: 6px 8px 2px; border-top: 1px solid var(--line); }
.rail-priority[hidden] { display: none; }