/* 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;
  --danger:        #d4493a;
  --ok:            #1f9d63;

  /* 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:      #6b7280;
  --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);
  z-index: 5;
  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 .edit-group,
body.read-only .snap-group,
body.read-only .history-group,
body.read-only #saveBtn { display: none !important; }
.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: #ff9500; font-weight: 700; }  /* orange, matches the app */
.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 { bottom: auto; top: 12px; 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);
}
.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: 320px; max-width: 460px;
  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, #64748b);
}
.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, #94a3b8);
}
.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 {
  position: absolute; left: 0; right: 0; bottom: 16px; 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 {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  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; }

.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: #aab2c0; }
.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: 14px; width: 100%; text-align: left;
  font: inherit; padding: 12px 14px; cursor: pointer;
  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); }
.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; }

/* ---- 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; }
.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. */
.paywall-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;
}
@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;
  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; }