are flex items whose z-index applies: the 3D view (#threeWrap, z-index:5, in

) 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 .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 { 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: 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); } .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 { 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; } /* 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: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; } /* ---- 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-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) { .btn.btn-primary span, .btn.btn-secondary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .btn.btn-secondary, .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; } .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 .pw-after { animation: pw-after 2.6s ease-in-out .35s infinite; transform-origin: center; } @keyframes pw-after { 0%,12% { opacity: 0; } 30%,72% { opacity: 1; } 92%,100% { opacity: 0; } } /* 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; } @media (prefers-reduced-motion: reduce) { .pw-card, .pw-benefits li, .ai-changes { animation: none !important; } .pw-demo-svg .pw-after { animation: none !important; opacity: 1; } .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; } }