/* ============================================================
   Targetcom AR - Cyber-Precision Interface (editor)
   Dark-first theme · Plus Jakarta Sans · #E94560 primary
   Defaults to dark; toggled via <html data-theme="dark|light">.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0c1324;
  --surface: #131b30;
  --surface-low: #182238;
  --surface-container: #1e2a44;
  --surface-container-high: #263553;
  --on-surface: #f2f4fb;
  --on-muted: #a7b0c7;
  --outline: #67718c;
  --outline-faint: #232f4a;
  --outline-strong: #2f3d5e;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23a7b0c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --primary: #e94560;
  --primary-strong: #ff6b81;
  --on-primary: #ffffff;
  --primary-soft: rgba(255, 107, 129, 0.14);

  --secondary: #f2f4fb;
  --on-secondary: #0c1324;

  --error: #ffb4ab;
  --error-soft: rgba(255, 180, 171, 0.16);
  --success: #7dda9b;
  --success-soft: rgba(125, 218, 155, 0.16);
  --warning: #ffd77a;
  --warning-soft: rgba(255, 215, 122, 0.16);
  --warning-border: rgba(255, 215, 122, 0.35);

  --focus-ring: rgba(255, 107, 129, 0.3);
  --focus-ring-strong: rgba(255, 107, 129, 0.55);
  --primary-glow: rgba(233, 69, 96, 0.45);
  --scrim: rgba(4, 8, 18, 0.6);
  --scrim-soft: rgba(4, 8, 18, 0.5);
  --bar-bg: rgba(12, 19, 36, 0.94);
  --handle: rgba(255, 255, 255, 0.22);
  --switch-thumb-shadow: rgba(0, 0, 0, 0.4);

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-strong: rgba(255, 255, 255, 0.32);
  --glass-shadow: 0 8px 32px rgba(7, 13, 31, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --glass-input: rgba(255, 255, 255, 0.06);
  --glass-input-focus: rgba(255, 255, 255, 0.1);
  --glass-input-border: rgba(255, 255, 255, 0.18);
  --home-bg:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(201, 44, 86, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 178, 188, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(201, 44, 86, 0.08), transparent 50%),
    #0c1324;
  --home-brand-text: rgba(255, 255, 255, 0.85);
  --home-muted: rgba(255, 255, 255, 0.6);
  --home-thumb: linear-gradient(135deg, #171a2e, #2b2440);
  --home-thumb-text: rgba(255, 255, 255, 0.85);
  --btn-glass: rgba(255, 255, 255, 0.08);
  --btn-glass-hover: rgba(255, 255, 255, 0.14);
  --act-open: #60a5fa;
  --act-splash: #ff6b81;
  --act-share: #a78bfa;
  --act-delete: #f87171;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;

  --shadow-card: 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55);
  --glass: var(--surface);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fcf8ff;
  --surface: #ffffff;
  --surface-low: #f5f2ff;
  --surface-container: #efecff;
  --surface-container-high: #e9e6fc;
  --on-surface: #1a1a2a;
  --on-muted: #5a4042;
  --outline: #8e7071;
  --outline-faint: #ece7f4;
  --outline-strong: #e8e3f0;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235a4042' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --primary: #e94560;
  --primary-strong: #c81e45;
  --on-primary: #ffffff;
  --primary-soft: rgba(233, 69, 96, 0.1);

  --secondary: #1a1a2e;
  --on-secondary: #ffffff;

  --error: #ba1a1a;
  --error-soft: #ffdad6;
  --success: #006a42;
  --success-soft: rgba(0, 106, 66, 0.12);
  --warning: #7a4b00;
  --warning-soft: rgba(255, 226, 148, 0.35);
  --warning-border: rgba(255, 226, 148, 0.7);

  --focus-ring: rgba(233, 69, 96, 0.16);
  --focus-ring-strong: rgba(233, 69, 96, 0.4);
  --primary-glow: rgba(233, 69, 96, 0.28);
  --scrim: rgba(26, 26, 42, 0.4);
  --scrim-soft: rgba(26, 26, 42, 0.18);
  --bar-bg: rgba(252, 248, 255, 0.94);
  --handle: rgba(26, 26, 42, 0.18);
  --switch-thumb-shadow: rgba(26, 26, 42, 0.25);

  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(26, 26, 42, 0.12);
  --glass-border-strong: rgba(26, 26, 42, 0.22);
  --glass-shadow: 0 8px 32px rgba(26, 26, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-input: rgba(26, 26, 42, 0.05);
  --glass-input-focus: rgba(26, 26, 42, 0.07);
  --glass-input-border: rgba(26, 26, 42, 0.14);
  --home-bg:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(201, 44, 86, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 178, 188, 0.18), transparent 50%),
    #fcf8ff;
  --home-brand-text: rgba(26, 26, 42, 0.85);
  --home-muted: rgba(26, 26, 42, 0.6);
  --home-thumb: linear-gradient(135deg, #e8e6f5, #d6d1ef);
  --home-thumb-text: rgba(26, 26, 42, 0.85);
  --btn-glass: rgba(26, 26, 42, 0.06);
  --btn-glass-hover: rgba(26, 26, 42, 0.1);
  --act-open: #2563eb;
  --act-splash: #e94560;
  --act-share: #7c3aed;
  --act-delete: #dc2626;

  --shadow-card: 0 4px 18px rgba(26, 26, 42, 0.06);
  --shadow-modal: 0 16px 48px rgba(26, 26, 42, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
input, select, textarea, button { font-family: inherit; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--on-surface);
  overflow: hidden; user-select: none; -webkit-font-smoothing: antialiased;
}
#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

#header {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 58px; padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-faint);
  z-index: 30; gap: 12px; flex-wrap: wrap; row-gap: 8px;
}
.header-left { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.btn-back-dashboard {
  gap: 7px; color: var(--on-muted);
  border: none; background: transparent; box-shadow: none; padding: 9px 8px;
}
.btn-back-dashboard .back-arrow { width: 16px; height: 16px; flex: none; }
.btn-back-dashboard:hover { background: transparent; color: var(--on-surface); box-shadow: none; }

/* Dark/light toggle — high-fidelity port of "dark light mode toggle.html",
   scaled from 72x38 to 56x30. Checked == dark. */
.toggle-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.toggle-label {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  background: var(--surface-container-high);
  border-radius: 40px;
  cursor: pointer;
  transition: background 0.25s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.toggle-label::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--on-surface);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.2s;
  box-shadow: 0 4px 8px var(--switch-thumb-shadow);
}
.toggle-checkbox:checked + .toggle-label::after {
  transform: translateX(26px);
  background: var(--primary);
}
/* Thumb stays red in light mode too (unchecked == light). */
[data-theme="light"] .toggle-label::after { background: #e94560; }
.toggle-label .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  pointer-events: none;
  transition: opacity 0.2s, color 0.2s;
  z-index: 2;
}
.toggle-label .icon-sun { left: 7px; color: var(--on-muted); }
.toggle-label .icon-moon { right: 7px; color: var(--on-muted); }
.toggle-checkbox:checked + .toggle-label .icon-sun { opacity: 0.4; color: var(--on-muted); }
.toggle-checkbox:checked + .toggle-label .icon-moon { opacity: 1; color: var(--surface-container-high); }
.toggle-checkbox:not(:checked) + .toggle-label .icon-moon { opacity: 0.5; color: var(--on-muted); }
.toggle-checkbox:not(:checked) + .toggle-label .icon-sun { opacity: 1; color: var(--surface); }
.toggle-label:hover { filter: brightness(0.96); }
:root[data-theme="dark"] .toggle-label:hover { filter: brightness(1.08); }
.toggle-checkbox:focus-visible + .toggle-label { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }
.header-center { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.header-right { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; min-width: 0; justify-content: flex-end; }
.header-right .btn .caret { font-size: 9px; color: var(--on-muted); margin-left: 4px; }
.header-right .btn-group .dropdown { left: auto; right: 0; }
.header-right #btnPricing { background: transparent; border-color: transparent; color: var(--primary); font-weight: 700; }
.header-right #btnPricing:hover { background: var(--primary-soft); box-shadow: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-faint);
  background: var(--surface); color: var(--on-surface);
  box-shadow: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--surface-low); box-shadow: var(--shadow-card); }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
  box-shadow: none;
}
.btn-primary:hover { background: var(--primary-strong); }
.btn-icon { padding: 9px 12px; font-size: 16px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

/* Inline sprite icons (editor/icons.svg) — inherit color via currentColor. */
svg.ico { width: 16px; height: 16px; flex: none; vertical-align: -0.125em; }
.project-actions .p-action .ico { width: 14px; height: 14px; }
.project-dates .pdate .ico { width: 10px; height: 10px; opacity: 0.75; }
.project-dates .pdate.expiring .ico { opacity: 0.9; }
.project-new-icon .ico { width: 22px; height: 22px; }
.project-meta .ico { width: 13px; height: 13px; }
.section-title .ico { width: 14px; height: 14px; color: var(--primary); }
.btn-icon .ico { width: 16px; height: 16px; }
.obj-actions .ico { width: 14px; height: 14px; }
.scene-actions .ico { width: 13px; height: 13px; }
.empty-state .ico { width: 24px; height: 24px; }
.toggle-label .icon { width: 14px; height: 14px; }
.dropdown-item .icon .ico { width: 14px; height: 14px; }
.caret .ico { width: 9px; height: 9px; }
.bnd-prop-label .ico { width: 14px; height: 14px; color: var(--primary); flex: none; }
.branding-panel-title .ico { width: 16px; height: 16px; color: var(--primary); }

.btn-group { display: flex; align-items: center; gap: 6px; position: relative; }

.select-chip {
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-faint);
  background: var(--surface);
  color: var(--on-surface); cursor: pointer; white-space: nowrap;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.select-chip .caret { margin-left: 8px; font-size: 9px; color: var(--on-muted); }
.select-chip[aria-expanded="true"] { box-shadow: var(--shadow-card); background-color: var(--surface-low); }
.select-chip:hover { background-color: var(--surface-low); box-shadow: var(--shadow-card); }

.dropdown {
  display: none; position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 20px));
  max-height: min(560px, calc(100vh - 140px));
  max-height: min(560px, calc(100dvh - 140px));
  background: var(--surface);
  border: 1px solid var(--outline-faint);
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  z-index: 100; padding: 8px;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dropdown.open { display: block; }
.dropdown-label {
  font-size: 10px; font-weight: 700; color: var(--on-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 10px 6px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; font-family: var(--font); font-size: 13px; font-weight: 500;
  border: none; border-radius: 4px;
  background: none; color: var(--on-surface); cursor: pointer;
  text-align: left; transition: background 0.1s;
}
.dropdown-item:hover { background: var(--primary-soft); }
.dropdown-item .icon { font-size: 14px; width: 18px; text-align: center; }
.dropdown-item.selected { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.dropdown-item .tag {
  font-size: 9px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); padding: 2px 7px;
  border-radius: var(--radius-full); margin-left: auto; letter-spacing: 0.02em;
}
.dropdown-divider { height: 1px; background: var(--outline-faint); margin: 6px 0; }

#main { display: flex; flex: 1; overflow: hidden; }
#sidebar {
  width: 244px; background: var(--surface); border-right: 1px solid var(--outline-faint);
  display: flex; flex-direction: column; z-index: 20;
}
.project-name-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--outline-faint);
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.project-name-bar:hover { background: var(--surface-low); }
.project-name-bar::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 6px rgba(233,69,96,0.55);
}
.tab-bar { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--outline-faint); background: var(--surface); }
.tab {
  flex: 1; padding: 9px 0; font-family: var(--font); font-size: 12px; font-weight: 700;
  text-align: center; border: none; border-radius: var(--radius-full);
  background: transparent; color: var(--on-muted); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { background: var(--surface-low); }
.tab.active { color: var(--on-primary); background: var(--primary); }
.tab-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

#viewport { flex: 1; position: relative; background: var(--surface-low); overflow: hidden; }
#viewport canvas { display: block; width: 100% !important; height: 100% !important; }

#inspector {
  width: 288px; background: var(--surface); border-left: 1px solid var(--outline-faint);
  overflow-y: auto; z-index: 20;
}

.section { padding: 14px; border-bottom: 1px solid var(--outline-faint); }
.section-title {
  font-size: 12px; font-weight: 700; color: var(--on-surface);
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.section-title .badge-icon { font-size: 14px; line-height: 1; color: var(--primary); }
.sub-label { font-size: 10px; font-weight: 600; color: var(--on-muted); margin-bottom: 4px; letter-spacing: 0.02em; }

.obj-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; font-family: var(--font); font-size: 12px; font-weight: 500;
  border-radius: var(--radius); cursor: pointer; transition: background 0.12s;
}
.obj-row:hover { background: var(--surface-low); }
.obj-row.selected { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.obj-row .obj-icon { width: 16px; text-align: center; margin-right: 6px; }
.obj-row .obj-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-row .obj-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.1s; }
.obj-row:hover .obj-actions { opacity: 1; }
.obj-row .obj-actions button {
  background: none; border: none; cursor: pointer;
  padding: 2px; font-size: 12px; line-height: 1;
  opacity: 0.5; transition: opacity 0.1s;
}
.obj-row .obj-actions button:hover { opacity: 1; }

.input-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.input-group label { font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--on-muted); letter-spacing: 0.02em; }
.input-group > input,
.input-group .pw-wrap > input {
  width: 100%; height: 40px; padding: 0 12px;
  font-family: var(--font); font-size: 13px;
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  background: var(--surface); outline: none; color: var(--on-surface);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input-row { display: flex; gap: 8px; align-items: stretch; }
.input-row input {
  flex: 1 1 0; height: 34px; min-width: 44px; padding: 0 10px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  background: var(--surface-low); outline: none; color: var(--on-surface);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.input-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input-row input[type="number"]::-webkit-inner-spin-button,
.input-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-row input:hover { border-color: var(--outline-strong); }
.input-row input:focus,
.input-group > input:focus,
.input-group .pw-wrap > input:focus,
.color-row input[type="text"]:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.input-row .axis {
  flex: 0 0 18px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--on-muted);
}

/* Password visibility toggle (wraps an input + eye button) */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap > input { width: 100%; padding-right: 40px; }
.pw-wrap .pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--on-muted); border-radius: 8px; transition: color 0.15s ease, background 0.15s ease;
}
.pw-wrap .pw-toggle:hover { color: var(--on-surface); background: rgba(255,255,255,0.06); }
.pw-wrap .pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pw-wrap .pw-toggle .ico { width: 17px; height: 17px; }

/* 6-digit confirmation code boxes */
.verify-boxes { display: flex; gap: 8px; justify-content: center; margin: 6px 0 2px; }
.verify-box {
  width: 46px; height: 54px; text-align: center;
  font-family: var(--font); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--on-surface); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.verify-box:focus {
  border-color: var(--primary); background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.verify-timer {
  text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--on-muted); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.verify-timer.low { color: var(--error); }

.color-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.color-row input[type="color"] {
  width: 34px; height: 34px; border: 1px solid var(--outline-strong);
  border-radius: var(--radius-sm); padding: 2px; cursor: pointer; background: transparent;
}
.color-row input[type="text"] {
  flex: 1; height: 34px; padding: 0 10px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  background: var(--surface-low); outline: none; color: var(--on-surface);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.insp-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 30px; padding: 0 26px 0 10px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--on-surface); background-color: var(--surface-low);
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px;
  cursor: pointer; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.insp-select.insp-select-sm { height: 26px; font-size: 11px; padding: 0 22px 0 8px; background-position: right 7px center; background-size: 9px; }
.insp-select:hover { border-color: var(--outline); background-color: var(--surface); }
.insp-select:focus { border-color: var(--primary); background-color: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }
.insp-select option { color: var(--on-surface); background: var(--surface); }

/* ---------- Custom select (replaces native popup look) ---------- */
.es { position: relative; display: inline-block; vertical-align: middle; }
.es-native { display: none !important; }
.es-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 30px; padding: 0 9px 0 10px;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  color: var(--on-surface); background: var(--surface-low);
  border: 1px solid var(--outline-strong); border-radius: var(--radius-sm);
  cursor: pointer; outline: none; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.es-trigger:hover { border-color: var(--outline); background: var(--surface); }
.es.open .es-trigger, .es-trigger:focus-visible { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }
.es-sm .es-trigger { height: 26px; font-size: 11px; padding: 0 7px 0 8px; }
.es-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-caret { flex: none; width: 10px; height: 10px; color: var(--on-muted); transition: transform .18s ease, color .15s ease; }
.es.open .es-caret { transform: rotate(180deg); color: var(--primary); }
.es-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
  max-height: 240px; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--outline-strong);
  border-radius: 8px; box-shadow: var(--shadow-modal);
  z-index: 80; display: none;
}
.es.open .es-menu { display: block; }
.es-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--on-surface); background: none; border: none; border-radius: 4px;
  text-align: left; cursor: pointer; white-space: nowrap; transition: background .1s ease;
}
.es-item:hover, .es-item:focus-visible { background: var(--surface-low); outline: none; }
.es-item.selected { color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.es-check { margin-left: auto; width: 12px; height: 12px; opacity: 0; color: var(--primary); }
.es-item.selected .es-check { opacity: 1; }

input::placeholder { color: var(--on-muted); opacity: 0.7; }
input:focus-visible { outline: none; }
button:focus-visible { outline: 3px solid var(--focus-ring-strong); outline-offset: 2px; }

#objName:focus, #sceneName:focus,
#matColorText:focus, #lightColorText:focus, #chromaColorText:focus,
.search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="range"] {
  width: 100%; height: 5px; appearance: none;
  background: var(--surface-container-high); border-radius: var(--radius-full); outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px;
  border-radius: 50%; background: var(--primary); border: 3px solid var(--surface);
  box-shadow: 0 1px 5px var(--primary-glow); cursor: pointer;
}
.range-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--on-muted); }

.check-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-family: var(--font); font-size: 12px; color: var(--on-surface); cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer;
}

.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 20px; text-align: center;
  color: var(--on-muted); font-size: 12px;
}

.vp-toolbar {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-full); padding: 6px; box-shadow: var(--shadow-card);
  z-index: 10;
}
.vp-toolbar button {
  padding: 7px 13px; font-family: var(--font); font-size: 12px; font-weight: 700;
  border: none; border-radius: var(--radius-full); cursor: pointer;
  background: transparent; color: var(--on-muted); transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.vp-toolbar button:hover { background: var(--surface-low); }
.vp-toolbar button.active { background: var(--primary); color: var(--on-primary); }
.vp-toolbar .sep { width: 1px; background: var(--outline-faint); margin: 4px 2px; }

.vp-info {
  position: absolute; bottom: 14px; left: 14px;
  display: flex; gap: 12px; padding: 6px 14px;
  background: var(--surface); border: 1px solid var(--outline-faint);
  border-radius: var(--radius-full);
  font-size: 10px; font-family: var(--font); color: var(--on-muted);
  z-index: 10; pointer-events: none;
}
.vp-info span { font-weight: 700; color: var(--on-surface); }

.vp-camera {
  position: absolute; top: 14px; right: 14px;
  display: flex; gap: 4px;
  background: var(--surface); border: 1px solid var(--outline-faint);
  border-radius: var(--radius-full); padding: 6px; box-shadow: var(--shadow-card);
  z-index: 10;
}
.vp-camera button {
  padding: 5px 10px; font-family: var(--font); font-size: 11px; font-weight: 700;
  border: none; border-radius: var(--radius-full); cursor: pointer;
  background: transparent; color: var(--on-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.vp-camera button:hover { background: var(--surface-low); color: var(--primary); }

/* Mobile-only icon toggles that expand the transform / view-angle bars. */
.vp-toolbar-toggle, .vp-camera-toggle {
  display: none; position: absolute; top: 10px; z-index: 13;
  width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0;
  background: var(--surface); border: 1px solid var(--outline-faint);
  border-radius: var(--radius-full); box-shadow: var(--shadow-card);
  color: var(--on-surface); cursor: pointer; touch-action: manipulation;
  transition: transform 0.12s ease;
}
.vp-toolbar-toggle:active, .vp-camera-toggle:active { transform: scale(0.94); }

.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--surface); border-radius: var(--radius-xl);
  width: 480px; max-width: 90vw;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--outline-faint);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; font-family: var(--font); font-weight: 800; font-size: 16px; color: var(--on-surface);
  border-bottom: 1px solid var(--outline-faint);
}
.modal-body { padding: 22px; }
.modal-narrow { width: 420px; }
.modal-wide { width: 660px; }

.user-area {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--outline-faint);
}
.profile-btn { gap: 8px; }
.profile-btn .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #ff6b81, #e94560);
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none; box-shadow: 0 3px 10px rgba(233, 69, 96, 0.35);
}
.profile-btn .caret { font-size: 10px; color: var(--on-muted); }
.user-name {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--on-surface);
}
.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; padding: 8px;
  background: var(--surface); border: 1px solid var(--outline-strong);
  border-radius: 8px; box-shadow: var(--shadow-modal);
}
.profile-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--outline-faint);
}
.profile-menu-name { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; }
.profile-menu-sub { font-size: 11px; color: var(--on-muted); overflow: hidden; text-overflow: ellipsis; }
.profile-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; margin: 2px 0; font-family: var(--font);
  border: none; border-radius: 4px; background: transparent;
  font-size: 13px; color: var(--on-surface); cursor: pointer;
}
.profile-menu-item:hover { background: var(--primary-soft); }
.profile-menu-item.danger { color: var(--error); }
.profile-menu-item.danger:hover { background: var(--error-soft); }
.user-area:not(.hidden) + #btnSignIn { display: none; }
.auth-error { color: var(--error); font-size: 12px; min-height: 16px; margin: 6px 0 10px; line-height: 1.45; }
.auth-actions { display: flex; gap: 8px; margin-top: 8px; }
.auth-actions .btn { flex: 1; justify-content: center; }

.btn-danger { background: var(--error-soft); color: var(--error); border-color: transparent; }
.btn-danger:hover { background: var(--error-soft); color: var(--error); filter: brightness(1.08); }
.verify-banner {
  position: relative; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--warning-soft); color: var(--warning);
  font-family: var(--font); font-size: 13px;
  border-bottom: 1px solid var(--warning-border);
}
.verify-banner.hidden { display: none; }
.verify-banner .btn-primary { align-self: auto; }
#verifyStatus { font-size: 12px; color: var(--warning); }
.projects-empty { color: var(--on-muted); font-size: 12px; text-align: center; padding: 20px; }
.projects-loading { color: var(--on-muted); font-size: 12px; text-align: center; padding: 16px; }

.hidden { display: none !important; }
.mt-8 { margin-top: 8px; }

/* Full-screen AR holographic loading overlay shown while the editor launches. */
#editorLoading {
  position: fixed; inset: 0; z-index: 10000;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(201, 44, 86, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 178, 188, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(201, 44, 86, 0.08), transparent 50%),
    #0c1324;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow: hidden;
}
#editorLoading * { margin: 0; padding: 0; box-sizing: border-box; }
#editorLoading.hidden { display: none; }

/* Simple pixelated reveal: the editor appears left->right in chunky pixel bands. */
#editorLoading.editor-closing {
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  animation: editorReveal 0.9s steps(16, end) forwards;
}
@keyframes editorReveal {
  to { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
}

#editorLoading .loader-container {
  max-width: 520px; width: 100%;
  padding: 2.5rem 2rem 2.8rem;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
#editorLoading .ar-scene {
  position: relative; width: 350px; height: 350px; margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: center; perspective: 800px;
}
#editorLoading .holo-grid {
  position: absolute; bottom: 50px; width: 260px; height: 130px;
  background: repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(230,0,0,0.06) 12px, rgba(230,0,0,0.06) 13px),
              repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(230,0,0,0.06) 12px, rgba(230,0,0,0.06) 13px);
  transform: rotateX(60deg) translateY(20px);
  border: 1px solid rgba(230,0,0,0.2);
  animation: gridPulse 4s ease-in-out infinite alternate; z-index: 0; pointer-events: none;
}
#editorLoading .orbit-ring {
  position: absolute; border-radius: 50%; z-index: 1; pointer-events: none;
  transform-style: preserve-3d; border: 1px solid rgba(230,0,0,0.15);
}
#editorLoading .orbit-ring-1 { width: 220px; height: 220px; animation: spinOrbit 12s linear infinite; border-top: 2px solid #e60000; border-bottom: 2px solid rgba(230,0,0,0.05); }
#editorLoading .orbit-ring-2 { width: 280px; height: 280px; animation: spinOrbit 18s linear infinite reverse; border: 1px dashed rgba(230,0,0,0.1); border-top: 2px solid #ff6666; }
#editorLoading .orbit-ring-3 { width: 180px; height: 180px; animation: spinOrbit 8s linear infinite; border: 2px dotted rgba(230,0,0,0.1); }
#editorLoading .cube-container {
  position: relative; width: 140px; height: 140px; transform-style: preserve-3d; z-index: 10;
}
#editorLoading .cube-face {
  position: absolute; width: 140px; height: 140px; border-radius: 18px;
  border: 1px solid rgba(255,90,90,0.4);
  background: linear-gradient(135deg, rgba(230,0,0,0.22), rgba(230,0,0,0.05));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 24px rgba(230,0,0,0.22), inset 0 0 26px rgba(255,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
}
#editorLoading .cube-text {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.2rem;
  color: rgba(255,190,190,0.95); text-shadow: 0 0 14px rgba(255,60,60,0.6);
  letter-spacing: 2px; opacity: 0.95;
}
#editorLoading .front  { transform: translateZ(70px); }
#editorLoading .back   { transform: rotateY(180deg) translateZ(70px); }
#editorLoading .left   { transform: rotateY(-90deg) translateZ(70px); }
#editorLoading .right  { transform: rotateY(90deg) translateZ(70px); }
#editorLoading .top    { transform: rotateX(90deg) translateZ(70px); }
#editorLoading .bottom { transform: rotateX(-90deg) translateZ(70px); }
#editorLoading .scan-line {
  position: absolute; width: 100%; height: 6px;
  background: linear-gradient(90deg, transparent, #e60000, transparent);
  filter: blur(4px); opacity: 0.7; animation: scanCube 3s linear infinite; pointer-events: none;
}
#editorLoading .light-stream-container {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;
  pointer-events: none; transform-style: preserve-3d;
}
#editorLoading .light-stream {
  position: absolute; width: 2px; height: 150px;
  background: linear-gradient(to top, #e60000, transparent);
  opacity: 0; border-radius: 50%; filter: blur(2px);
  animation: shootLight 4s linear infinite; transform-origin: bottom center;
}
#editorLoading .ls-1  { left: 50%; bottom: 50%; animation-delay: 0s; }
#editorLoading .ls-2  { left: 50%; bottom: 50%; animation-delay: 0.3s; }
#editorLoading .ls-3  { left: 50%; bottom: 50%; animation-delay: 0.6s; }
#editorLoading .ls-4  { left: 50%; bottom: 50%; animation-delay: 0.9s; }
#editorLoading .ls-5  { left: 50%; bottom: 50%; animation-delay: 1.2s; }
#editorLoading .ls-6  { left: 50%; bottom: 50%; animation-delay: 1.5s; }
#editorLoading .ls-7  { left: 50%; bottom: 50%; animation-delay: 1.8s; }
#editorLoading .ls-8  { left: 50%; bottom: 50%; animation-delay: 2.1s; }
#editorLoading .ls-9  { left: 50%; bottom: 50%; animation-delay: 2.4s; }
#editorLoading .ls-10 { left: 50%; bottom: 50%; animation-delay: 2.7s; }
#editorLoading .ls-11 { left: 50%; bottom: 50%; animation-delay: 3.0s; }
#editorLoading .ls-12 { left: 50%; bottom: 50%; animation-delay: 3.3s; }
#editorLoading .float-object {
  position: absolute; pointer-events: none; z-index: 2;
  animation: magicEmit 6s cubic-bezier(0.2,0.8,0.2,1) infinite;
  filter: drop-shadow(0 0 6px rgba(230,0,0,0.6));
}
#editorLoading .sparkle { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
#editorLoading .diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
#editorLoading .cross   { clip-path: polygon(20% 0%, 80% 0%, 80% 20%, 100% 20%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0% 80%, 0% 20%, 20% 20%); }
#editorLoading .dot     { border-radius: 50%; }
#editorLoading .obj-1  { width: 20px; height: 20px; background: #e60000; top: 45%; left: 45%; animation-delay: 0s; }
#editorLoading .obj-2  { width: 8px; height: 8px; background: #ff9999; top: 55%; left: 55%; animation-delay: 0.6s; }
#editorLoading .obj-3  { width: 24px; height: 24px; border: 2px solid #ff6666; background: transparent; top: 35%; left: 50%; animation-delay: 1.2s; }
#editorLoading .obj-4  { width: 6px; height: 6px; background: #ffcccc; top: 60%; left: 40%; animation-delay: 1.8s; }
#editorLoading .obj-5  { width: 14px; height: 14px; background: #ff3333; top: 40%; left: 60%; animation-delay: 2.4s; }
#editorLoading .obj-6  { width: 4px; height: 4px; background: #ffffff; top: 50%; left: 35%; animation-delay: 3.0s; }
#editorLoading .obj-7  { width: 18px; height: 18px; border: 1px solid #e60000; background: transparent; top: 65%; left: 50%; animation-delay: 3.6s; }
#editorLoading .obj-8  { width: 12px; height: 12px; background: #e60000; top: 30%; left: 40%; animation-delay: 0.3s; }
#editorLoading .obj-9  { width: 6px; height: 6px; background: #ffffff; top: 70%; left: 60%; animation-delay: 4.2s; }
#editorLoading .obj-10 { width: 16px; height: 16px; border: 1.5px solid #ff9999; background: transparent; top: 45%; left: 65%; animation-delay: 2.0s; }
#editorLoading .obj-11 { width: 10px; height: 10px; background: #e60000; top: 55%; left: 30%; animation-delay: 0.9s; }
#editorLoading .obj-12 { width: 5px; height: 5px; background: #ff9999; top: 35%; left: 35%; animation-delay: 4.8s; }
#editorLoading .obj-13 { width: 22px; height: 22px; background: transparent; border: 1.5px solid #e60000; top: 55%; left: 60%; animation-delay: 1.5s; }
#editorLoading .obj-1  { --tx: -140px; --ty: -130px; }
#editorLoading .obj-2  { --tx: 120px; --ty: -90px; }
#editorLoading .obj-3  { --tx: -90px; --ty: 150px; }
#editorLoading .obj-4  { --tx: 150px; --ty: 100px; }
#editorLoading .obj-5  { --tx: -160px; --ty: 30px; }
#editorLoading .obj-6  { --tx: 50px; --ty: -160px; }
#editorLoading .obj-7  { --tx: 110px; --ty: 140px; }
#editorLoading .obj-8  { --tx: -70px; --ty: -150px; }
#editorLoading .obj-9  { --tx: 160px; --ty: -50px; }
#editorLoading .obj-10 { --tx: -100px; --ty: -60px; }
#editorLoading .obj-11 { --tx: 140px; --ty: 50px; }
#editorLoading .obj-12 { --tx: -50px; --ty: 160px; }
#editorLoading .obj-13 { --tx: -120px; --ty: 100px; }

/* Particles: ambient dots drifting near the cube + sparks flying out of it. */
#editorLoading .particle {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  background: radial-gradient(circle, #ff9a9a, rgba(255,60,60,0.15));
  box-shadow: 0 0 8px rgba(255,60,60,0.8);
  pointer-events: none; z-index: 15;
}
#editorLoading .particle.ambient {
  width: 5px; height: 5px; opacity: 0;
  animation: particleDrift var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes particleDrift {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.9; }
  50%  { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0.6; }
  80%  { opacity: 0.9; }
  100% { transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(0.4); opacity: 0; }
}
#editorLoading .particle.emit {
  width: 7px; height: 7px; opacity: 0;
  animation: particleEmit var(--dur) ease-out var(--delay) infinite;
}
@keyframes particleEmit {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) scale(0.1); opacity: 0; }
}
@keyframes spinOrbit { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }
@keyframes scanCube { 0% { top: -10%; opacity: 0; } 20% { opacity: 0.7; } 80% { opacity: 0.7; } 100% { top: 110%; opacity: 0; } }
@keyframes gridPulse { 0% { opacity: 0.4; transform: rotateX(60deg) translateY(20px) scaleY(1); } 100% { opacity: 0.8; transform: rotateX(60deg) translateY(20px) scaleY(1.05); } }
@keyframes shootLight { 0% { opacity: 0; transform: rotate(var(--rot)) scaleY(0.5); } 20% { opacity: 0.8; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: rotate(var(--rot)) scaleY(2) translateY(-150px); } }
@keyframes magicEmit { 0% { opacity: 0; transform: translate(0,0) scale(0); } 15% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); } }

#editorLoading .loading-text {
  margin-top: 0.5rem; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; color: #ffffff;
  display: flex; align-items: center; gap: 0.1rem;
}
#editorLoading .loading-text span { display: inline-block; animation: dotPulse 1.8s infinite; color: #e60000; }
#editorLoading .loading-text span:nth-child(2) { animation-delay: 0.15s; }
#editorLoading .loading-text span:nth-child(3) { animation-delay: 0.3s; }
#editorLoading .loading-text .label { font-weight: 600; letter-spacing: 0.06em; margin-right: 0.2rem; color: #ffffff; }
#editorLoading .progress-track {
  width: 200px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 9999px;
  margin-top: 1.5rem; overflow: hidden; box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
#editorLoading .progress-bar {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #e60000, #ff9999, #e60000);
  border-radius: 9999px;
  box-shadow: 0 0 15px rgba(230,0,0,0.4);
  transition: width 0.08s linear;
}
#editorLoading .status-badge {
  margin-top: 1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #dddddd;
  background: rgba(230,0,0,0.1); padding: 0.35rem 1rem; border-radius: 9999px;
  border: 1px solid rgba(230,0,0,0.15);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
@keyframes loadProgress { 0% { width: 2%; } 100% { width: 98%; } }
@keyframes dotPulse { 0%,20% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } 80%,100% { opacity: 0.2; transform: translateY(0); } }
#editorLoading .watermark {
  position: fixed; bottom: 44px; right: 25px; z-index: 999; pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(233, 69, 96, 0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
#editorLoading .watermark .home-brand { margin: 0; }
#editorLoading .watermark-sub {
  position: fixed; bottom: 24px; right: 25px; z-index: 999; pointer-events: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.72rem;
  letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 12px rgba(230,0,0,0.4);
}
@media (max-width: 480px) {
  #editorLoading .ar-scene { width: 280px; height: 280px; }
  #editorLoading .cube-container { width: 110px; height: 110px; }
  #editorLoading .cube-face { width: 110px; height: 110px; }
  #editorLoading .front  { transform: translateZ(55px); }
  #editorLoading .back   { transform: rotateY(180deg) translateZ(55px); }
  #editorLoading .left   { transform: rotateY(-90deg) translateZ(55px); }
  #editorLoading .right  { transform: rotateY(90deg) translateZ(55px); }
  #editorLoading .top    { transform: rotateX(90deg) translateZ(55px); }
  #editorLoading .bottom { transform: rotateX(-90deg) translateZ(55px); }
  #editorLoading .cube-text { font-size: 1rem; }
  #editorLoading .orbit-ring-1 { width: 180px; height: 180px; }
  #editorLoading .orbit-ring-2 { width: 230px; height: 230px; }
  #editorLoading .orbit-ring-3 { width: 140px; height: 140px; }
  #editorLoading .light-stream { height: 100px; }
  #editorLoading .loading-text { font-size: 1.1rem; }
  #editorLoading .progress-track { width: 160px; }
  #editorLoading .holo-grid { width: 200px; height: 100px; bottom: 40px; }
}

/* Inline / generated UI components keyed by id used inside editor.js */
#linkUrl { background: transparent; }

/* --- Fixed build-progress bar (Publish / Save to Cloud) --- */
#buildProgressBarWrap {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 10001;
  display: none; pointer-events: none;
}
#buildProgressBarWrap.on { display: block; }
#buildProgressBarTrack {
  width: 100%; height: 100%; background: rgba(233,69,96,0.15);
}
#buildProgressBarFill {
  height: 100%; width: 0%; border-radius: 0 9999px 9999px 0;
  background: linear-gradient(90deg, #e94560, #ff6b81);
}
#buildProgressBarFill.busy {
  width: 100% !important;
  background: linear-gradient(90deg, #e94560, #ff6b81, #ff8fa3, #e94560);
  background-size: 200% 100%;
  animation: progressShimmer 1.2s ease-in-out infinite;
}
@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Responsive layout — panels collapse into edge drawers on
   narrow windows so the 3D viewport always keeps its space.
   ============================================================ */
body.panel-side-off #sidebar { display: none; }
body.panel-insp-off #inspector { display: none; }
.btn-icon.active { background: var(--primary-soft); color: var(--primary); }
.modal-overlay { overscroll-behavior: contain; }
.btn, .btn-icon { touch-action: manipulation; }

@media (max-width: 1700px) {
  #header { flex-wrap: wrap; height: auto; padding: 8px 14px; row-gap: 8px; }
  #header .header-left { order: 1; }
  #header .header-right { order: 2; margin-left: auto; }
  #header .header-center { order: 3; flex: 1 1 100%; justify-content: center; }
  .btn { padding: 8px 13px; }
  .btn-icon { padding: 8px 11px; }
}
@media (max-width: 1280px) {
  .btn-back-dashboard { font-size: 12px; padding: 8px 12px; }
  .user-name { display: none; }
}
@media (max-width: 1180px) {
  #sidebar,
  #inspector {
    position: fixed; top: var(--drawer-top, 58px); bottom: 0; z-index: 45;
    width: min(300px, 86vw);
    box-shadow: var(--shadow-modal);
    transition: transform 0.22s ease; will-change: transform;
  }
  #sidebar { left: 0; transform: translateX(-102%); }
  body.panel-side-open #sidebar { transform: translateX(0); }
  #inspector { right: 0; transform: translateX(102%); }
  body.panel-insp-open #inspector { transform: translateX(0); }
  body.panel-side-open #viewport::before,
  body.panel-insp-open #viewport::before {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: var(--scrim-soft);
  }
}
@media (max-width: 640px) {
  #header { padding: 8px 10px; }
  .header-center { overflow-x: auto; scrollbar-width: none; }
  .header-center::-webkit-scrollbar { display: none; }
  .btn { padding: 7px 11px; font-size: 12px; }
  .btn-icon { padding: 7px 9px; }
}
@media (max-width: 480px) {
  #sidebar, #inspector { width: min(280px, 92vw); }
}

@media (prefers-reduced-motion: reduce) {
  #editorLoading .ar-scene,
  #editorLoading .cube-container,
  #editorLoading .orbit-ring-1,
  #editorLoading .orbit-ring-2,
  #editorLoading .orbit-ring-3,
  #editorLoading .light-stream,
  #editorLoading .holo-grid,
  #editorLoading .progress-bar,
  #editorLoading .status-badge {
    animation: none !important; transition: none !important;
  }
  #buildProgressBarFill.busy { animation: none !important; }
  #sidebar, #inspector { transition: none !important; }
}

/* ============================================================
   Mobile editing — bottom action bar + slide-up property sheets.
   Applies below 820px; the 821-1180px edge drawers still apply.
   ============================================================ */
html, body { overscroll-behavior: none; }
#mbBar { display: none; }
#btnSheetClose { display: none; }

@media (max-width: 820px) {
  #app { height: 100dvh; }
  #header { min-height: 52px; padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  #header .header-center { display: none; }
  #header .header-left { display: flex; flex: none; }
  #header .header-right { display: flex; flex: 1; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; margin-right: -10px; }
  #header .header-right > :last-child { margin-right: 10px; }
  #header .header-right::-webkit-scrollbar { display: none; }
  #header #userArea, #header #btnSignIn, #header #btnClear { display: none; }

  /* Reserve room above the action bar for the 3D viewport. */
  :root { --mb-h: 60px; }
  #main { padding-bottom: calc(var(--mb-h) + env(safe-area-inset-bottom)); }

  /* Bottom action bar. */
  #mbBar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
    background: var(--bar-bg);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--outline-faint);
    box-shadow: 0 -8px 24px rgba(26, 26, 42, 0.10);
  }
  .mb-rows { display: flex; flex-direction: column; gap: 6px; }
  .mb-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  /* Edge-to-edge scroll: end margins travel with the content, so buttons
     rest inset but bleed cleanly to the screen edges while scrolling. */
  .mb-row > :first-child { margin-left: 10px; }
  .mb-row > :last-child { margin-right: 10px; }
  .mb-row::-webkit-scrollbar { display: none; }
  .mb-row .btn { flex: none; padding: 9px 12px; font-size: 12px; min-height: 44px; }
  #btnMbAdd { flex: none; }
  .mb-spacer { flex: 1; }
  .mb-seg {
    display: flex; flex: 1; gap: 3px;
    background: var(--surface-container, #ece7f4);
    border-radius: var(--radius-full); padding: 3px;
  }
  .mb-seg button {
    flex: 1; padding: 7px 4px; font-family: var(--font); font-size: 11px; font-weight: 700;
    border: none; border-radius: var(--radius-full); background: transparent;
    color: var(--on-muted); cursor: pointer; min-height: 34px; touch-action: manipulation;
  }
  .mb-seg button.active { background: var(--primary); color: var(--on-primary); }

  /* Panels become bottom sheets. */
  #sidebar, #inspector {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-width: none;
    height: min(78vh, 640px);
    border-radius: 22px 22px 0 0; border: none;
    box-shadow: var(--shadow-modal);
    transform: translateY(102%);
  }
  body.panel-side-open #sidebar,
  body.panel-insp-open #inspector { transform: translateY(0); }
  #sidebar::before, #inspector::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 5px; border-radius: 9999px;
    background: var(--handle);
  }

  /* Clear close button shown while a sheet is open. */
  #btnSheetClose {
    display: none; position: fixed; right: 12px; z-index: 60;
    bottom: calc(min(78vh, 640px) + 10px);
    width: 34px; height: 34px; align-items: center; justify-content: center;
    border: 1px solid var(--outline-faint); border-radius: 50%;
    background: var(--surface); color: var(--on-surface);
    box-shadow: var(--shadow-card); font-size: 14px; cursor: pointer;
  }
  body.panel-side-open #btnSheetClose,
  body.panel-insp-open #btnSheetClose { display: inline-flex; }

  /* Viewport overlays that collide with the bar or crowd the top. */
  #vpInfo { display: none; }
  #viewport canvas { touch-action: none; }

  /* Collapse transform + view-angle bars into a single icon each; expand on tap. */
  .vp-toolbar-toggle { display: inline-flex; left: 10px; }
  .vp-camera-toggle { display: inline-flex; right: 10px; }
  .vp-toolbar, .vp-camera {
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    top: 58px; min-width: 172px; width: max-content; max-width: min(300px, 82vw);
    border-radius: var(--radius-md); padding: 8px;
    background: var(--surface);
    border: 1px solid var(--outline-faint);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    max-height: min(60vh, 460px); overflow-y: auto;
  }
  .vp-toolbar { left: 10px; }
  .vp-camera { right: 10px; }
  body.vp-toolbar-open .vp-toolbar,
  body.vp-camera-open .vp-camera { display: flex; }
  .vp-toolbar > .sep, .vp-camera > .sep { width: auto; height: 1px; margin: 5px 8px; align-self: stretch; }
  body.vp-toolbar-open .vp-toolbar button,
  body.vp-camera-open .vp-camera button {
    display: inline-flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 0 14px;
    font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap;
    border-radius: var(--radius-sm);
  }
  body.vp-toolbar-open .vp-toolbar button .ico,
  body.vp-camera-open .vp-camera button .ico { width: 16px; height: 16px; flex: none; }

  /* Add-object menu opens as a centered popover clear of the bar. */
  .dropdown {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
    min-width: 280px; width: 92vw; max-width: calc(100vw - 20px);
    max-height: 62vh; max-height: calc(100dvh - 160px); overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
  }
  /* File menu: override the desktop right-anchor (line ~235) so it centers
     like the Add menu instead of being pushed off the left edge. */
  .header-right .btn-group .dropdown { left: 50%; right: auto; }

  /* Dialogs scroll and fit the phone viewport. */
  .modal { max-width: 94vw; max-height: 92dvh; overflow-y: auto; }
  .modal-body { padding: 16px; }
  .home-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
  .home-grid-head { flex-wrap: wrap; }
  .home-grid-head h2 { width: 100%; }
  .home-grid-title { width: 100%; }
  .home-grid-actions { width: 100%; justify-content: space-between; }
  .home-grid-actions .btn { min-height: 44px; }
}

/* ============================================================
   Home / Projects dashboard (auth gate + project grid)
   Follows the current theme (dark by default).
   ============================================================ */
#homeScreen {
  position: fixed; inset: 0; z-index: 80;
  background: var(--home-bg);
  color: var(--on-surface);
  overflow-y: auto;
}
#homeScreen.hidden { display: none; }
.home-shell { position: relative; max-width: 1060px; margin: 0 auto; padding: 26px 20px 120px; }
.home-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 16px; padding: 10px max(16px, calc((100vw - 1060px) / 2 + 20px)); background: var(--surface-low); border: 1px solid var(--outline-faint); border-radius: 12px; }
.home-user-side { display: flex; align-items: center; gap: 10px; }
.home-theme { position: absolute; top: 22px; left: 22px; display: flex; gap: 8px; z-index: 5; }
.home-pricing { position: absolute; top: 22px; right: 22px; z-index: 5; }
.home-pricing #btnHomePricing { background: transparent; border-color: transparent; color: var(--primary); font-weight: 700; }
.home-pricing #btnHomePricing:hover { background: var(--primary-soft); box-shadow: none; }
.home-brand { display: flex; align-items: flex-start; width: fit-content; margin: 0 auto 18px; }
.home-brand-logo { height: 30px; width: auto; display: block; }
/* Mobile: move the language + theme controls into their own top bar ABOVE the
   logo instead of overlapping it (they were absolutely positioned top-left). */
@media (max-width: 820px) {
  .home-theme {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    justify-content: center;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--outline-faint);
  }
  .home-pricing {
    position: static;
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
  }
  .home-shell { padding-top: 18px; }
}
.home-user-name { font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--home-brand-text); }
#homeAuth {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 120px); padding: 20px 0;
}
.home-auth-card {
  width: 100%; max-width: 400px; margin: 0 auto; padding: 28px 26px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border); border-top-color: var(--glass-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  color: var(--on-surface);
}
.home-auth-title { font-family: var(--font); font-size: 20px; font-weight: 800; margin-bottom: 4px; color: var(--on-surface); text-align: center; }
.home-auth-sub { font-size: 13px; color: var(--home-muted); line-height: 1.5; margin: 0 0 16px; }
.home-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-grid-head h2 { font-family: var(--font); font-size: 17px; font-weight: 800; color: var(--on-surface); margin: 0; }
.home-grid-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-plan-badge {
  font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: var(--radius-full); cursor: pointer;
  border: 1px solid var(--success); background: var(--success-soft); color: var(--success);
  white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.home-plan-badge:hover { background: var(--success-soft); color: var(--success); border-color: var(--success); filter: brightness(1.08); }
.home-plan-badge.free { color: var(--success); }
.home-plan-badge.premium { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.home-status { font-size: 12px; color: var(--home-muted); margin-bottom: 10px; }
.home-note {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  font-size: 13px; line-height: 1.5;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid var(--primary); border-radius: var(--radius);
  padding: 14px 16px;
}
.home-note-text { flex: 1 1 260px; min-width: 0; }
.home-note .btn { flex: 0 0 auto; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.home-storage-stat {
  position: fixed; bottom: 18px; left: 18px; z-index: 90;
  width: 230px; padding: 12px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border); border-top-color: var(--glass-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  color: var(--on-surface);
}
.home-storage-stat.hidden { display: none; }
.home-storage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-storage-label { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--home-muted); }
.home-storage-text { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--on-surface); }
.home-storage-bar { height: 6px; margin-top: 8px; border-radius: 9999px; background: var(--outline-faint); overflow: hidden; }
.home-storage-fill { height: 100%; width: 0%; border-radius: 9999px; background: var(--primary); transition: width 0.3s ease; }
.project-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-modal); }
.project-thumb {
  position: relative; width: 100%; height: 170px; flex: none;
  background: var(--home-thumb); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-thumb-icon { width: 60px; height: 60px; opacity: 0.9; }
.project-info {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.3rem; padding: 1.2rem 1.2rem 1rem;
}
.project-name {
  font-family: var(--font); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--on-surface); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-meta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 0.75rem; color: var(--on-muted); margin-bottom: 0.55rem;
}
.project-meta i { font-size: 0.7rem; }
.project-dates {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 12px; margin-bottom: 0.9rem;
}
.project-dates .pdate {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: var(--on-muted);
}
.project-dates .pdate i { font-size: 0.62rem; color: var(--on-muted); opacity: 0.75; }
.project-dates .pdate.expiring { color: var(--warning); font-weight: 700; }
.project-dates .pdate.expiring i { color: var(--warning); opacity: 0.9; }
.project-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.25rem 1.1rem;
  padding: 0.85rem 0.6rem 0.7rem;
  border-top: 1px solid var(--outline-faint);
}
.project-actions .p-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 500;
  background: none; border: none; cursor: pointer;
  padding: 0.4rem 0.6rem; min-height: 44px;
  opacity: 0.85; transition: color 0.15s, opacity 0.15s, filter 0.15s;
}
.project-actions .p-action i { font-size: 0.9rem; }
.project-actions .p-action:hover { opacity: 1; filter: brightness(1.18); }
.project-actions .p-action:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }
.p-action-open { color: var(--act-open); }
.p-action-splash { color: var(--act-splash); }
.p-action-share { color: var(--act-share); }
.p-action-delete { color: var(--act-delete); }

/* "add project" card — empty dashed area with a centered + button. */
.project-card.project-new {
  align-items: center; justify-content: center; text-align: center; cursor: pointer;
  border: 2px dashed var(--outline);
  background: transparent; box-shadow: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.project-card.project-new:hover { border-color: var(--primary); transform: translateY(-2px); }
.project-card.project-new.disabled { cursor: not-allowed; opacity: 0.6; }
.project-card.project-new.disabled:hover { transform: none; border-color: var(--outline); }
.project-new-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 16px; color: var(--on-muted);
}
.project-new-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  background: var(--primary-soft); color: var(--primary);
  border: 1.5px solid var(--primary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.project-card.project-new:not(.disabled):hover .project-new-icon { background: var(--primary); color: var(--on-primary); transform: scale(1.06); }
.project-new-label { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--on-muted); }
.project-new-sub { font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--on-muted); text-align: center; line-height: 1.5; max-width: 220px; }
.project-sample { cursor: pointer; border: 1.5px solid var(--primary-soft); }
.project-sample:hover { border-color: var(--primary); }
.project-sample .project-thumb img { object-position: center 20%; }
.project-sample-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; }
.project-sample-actions .btn { width: 100%; justify-content: center; min-height: 36px; }

/* Section heading for grouped cards (e.g. "Recently opened"). */
.home-subhead {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-muted);
  margin-top: 10px; padding-top: 6px;
}
.home-subhead i { font-size: 12px; color: var(--primary); }

/* Normalize every header action button to one height. */
.home-grid-actions .btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }

/* Theme-aware overrides for shared controls rendered inside the home screen. */
#homeScreen .btn {
  background: var(--btn-glass);
  border-color: var(--glass-border);
  color: var(--on-surface);
}
#homeScreen .btn:hover { background: var(--btn-glass-hover); box-shadow: none; }
#homeScreen .btn-primary {
  background: linear-gradient(135deg, #ff6b81, var(--primary));
  border-color: transparent; color: #ffffff;
}
#homeScreen .btn-primary:hover { background: linear-gradient(135deg, #ff6b81, var(--primary-strong)); }
#homeScreen .btn-danger { background: var(--error-soft); color: var(--error); }
#homeScreen .input-group label { color: var(--home-muted); }
#homeScreen .input-group { gap: 6px; margin-bottom: 14px; }
#homeScreen .input-group > input,
#homeScreen .input-group .pw-wrap > input {
  height: 44px;
  background: var(--glass-input);
  border: 1px solid var(--glass-input-border);
  color: var(--on-surface);
}
#homeScreen .input-group > input::placeholder,
#homeScreen .input-group .pw-wrap > input::placeholder { color: var(--on-muted); }
#homeScreen .input-group > input:focus,
#homeScreen .input-group .pw-wrap > input:focus {
  border-color: var(--primary);
  background: var(--glass-input-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
#homeScreen .auth-error { color: var(--error); }
#homeScreen .home-auth-sub { color: var(--home-muted); }

/* ============================================================
   Edit Splash popup (viewer loading screen) — reference style
   Two-column: properties on the left, phone preview on the right.
   ============================================================ */
.modal-branding {
  width: 1000px; max-width: 96vw;
  height: min(84vh, 780px);
}
.modal-branding .modal-body { padding: 0; height: 100%; }

.branding-panel { display: flex; height: 100%; min-height: 0; position: relative; }

/* ----- LEFT: PROPERTIES ----- */
.branding-props {
  flex: 0 0 44%; min-width: min(300px, 100%); max-width: 440px;
  padding: 1.5rem 1.4rem; overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--outline-faint);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.branding-props::-webkit-scrollbar { width: 4px; }
.branding-props::-webkit-scrollbar-track { background: transparent; }
.branding-props::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

.branding-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--outline-faint);
}
.branding-panel-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font); font-size: 1.15rem; font-weight: 800; color: var(--on-surface);
}
.branding-panel-title i { color: var(--primary); }
.branding-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--on-muted);
  border: 1px solid var(--outline-faint); border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: color 0.2s, transform 0.1s, background 0.2s;
}
.branding-close:hover { color: var(--error); transform: rotate(90deg); background: var(--error-soft); }

.bnd-row { display: flex; flex-direction: column; gap: 7px; }
.bnd-row-switch { flex-direction: row; align-items: center; gap: 12px; }

.bnd-prop { display: flex; flex-direction: column; gap: 0.4rem; }

/* Dim and block all controls when the custom loading screen toggle is off. */
.branding-props :disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.branding-props .bnd-logo-row:has(:disabled) .bnd-logo-preview {
  opacity: 0.45;
  cursor: not-allowed;
}

.bnd-prop-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-muted);
}
.bnd-prop-label i { font-size: 0.68rem; color: var(--primary); width: 14px; text-align: center; }
.bnd-field-label { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--on-surface); letter-spacing: 0.02em; }
.bnd-field-hint { font-size: 11px; line-height: 1.45; color: var(--on-muted); }
.bnd-plan-note {
  font-size: 11px; line-height: 1.45; color: var(--warning);
  background: var(--warning-soft); border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 0.8rem;
}

.bnd-input {
  width: 100%; height: 42px; padding: 0 13px;
  font-family: var(--font); font-size: 14px; color: var(--on-surface);
  border: 1px solid var(--outline-faint); border-radius: var(--radius-sm);
  background: var(--surface-low); outline: none;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.bnd-input { height: auto; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.bnd-input:focus, .bnd-input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
select.bnd-input {
  cursor: pointer; padding-right: 34px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
}
select.bnd-input:hover { border-color: var(--outline); background-color: var(--surface); }
select.bnd-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
select.bnd-input option, .insp-select option { color: var(--on-surface); background: var(--surface); }

/* Color rows (swatch + hex field) */
.bnd-color-row {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--outline-faint); border-radius: var(--radius-sm);
  background: var(--surface-low); padding: 5px;
}
.bnd-color-row:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.bnd-color-row input[type="color"] {
  width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--outline-faint); background: transparent;
}
.bnd-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bnd-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
.bnd-hex-interactive {
  flex: 1; min-width: 0; height: 34px; padding: 0 8px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-surface);
  border: none; outline: none; background: transparent;
}
.bnd-hex {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-surface);
  border: none; outline: none; background: transparent;
}

/* Gradient rows */
.bnd-grad-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.bnd-grad-row input[type="color"] {
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--outline-faint); background: transparent;
}
.bnd-grad-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bnd-grad-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
.bnd-grad-arrow { font-size: 0.7rem; color: var(--on-muted); }
.bnd-angle-row { margin-top: 0.15rem; }
.bnd-angle {
  width: 64px; height: 34px; padding: 0 8px; text-align: center;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--on-surface);
  border: 1px solid var(--outline-faint); border-radius: var(--radius-sm); background: var(--surface-low); outline: none;
  appearance: textfield; -moz-appearance: textfield;
}
.bnd-angle::-webkit-outer-spin-button, .bnd-angle::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bnd-angle:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Range row */
.bnd-range-row { display: flex; align-items: center; gap: 0.7rem; }
.bnd-range-row input[type="range"] {
  flex: 1; min-width: 0; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: var(--outline-faint); border-radius: 9999px; cursor: pointer;
}
.bnd-range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--primary), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bnd-range-row input[type="range"]::-moz-range-track {
  height: 6px; background: var(--outline-faint); border-radius: 9999px;
}
.bnd-range-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--primary), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.bnd-size-val { font-size: 0.78rem; font-weight: 700; color: var(--on-muted); font-variant-numeric: tabular-nums; min-width: 34px; }

/* Logo uploader */
.bnd-logo-row { display: flex; gap: 14px; align-items: center; }
.bnd-logo-actions { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.btn-bnd-logo { min-height: 40px; padding: 8px 16px; font-size: 13px; font-weight: 700; }
.btn-bnd-logo.btn-primary {
  background: linear-gradient(135deg, #ff6b81, var(--primary));
  border-color: transparent;
}
.btn-bnd-logo.btn-primary:hover {
  background: linear-gradient(135deg, #ff6b81, var(--primary-strong));
}
.btn-bnd-logo.btn-danger { border-color: var(--error); }
.bnd-logo-preview {
  width: 56px; height: 56px; flex: none; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--outline); background-color: var(--surface-low);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease;
}
.bnd-logo-preview .bnd-logo-ph { color: var(--on-muted); opacity: 0.6; font-size: 1.1rem; }
.bnd-logo-preview.has-img { border-style: solid; border-color: var(--primary); background-color: #fff; }
.bnd-logo-preview.has-img .bnd-logo-ph { display: none; }

/* Switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .switch-track { position: absolute; inset: 0; border-radius: 9999px; background: var(--outline-faint); transition: background 0.2s ease; }
.switch .switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px var(--switch-thumb-shadow); transition: transform 0.2s ease;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--focus-ring); }

/* Actions (Apply / Reset pills) */
.branding-actions { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.branding-actions .btn { flex: 1; justify-content: center; min-height: 42px; }

/* ----- RIGHT: PREVIEW ----- */
.branding-preview-panel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 1.5rem; min-height: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, var(--primary-soft), transparent 60%),
    var(--surface-low);
}
.branding-preview-label {
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--on-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Phone preview = miniature of the viewer splash screen.
   Sized by height so it never overflows the panel; the inner card uses
   container-query units so every element stays proportional to the viewer's
   390px reference width. --fit is set by JS as an extra shrink factor when
   content would overflow. */
.phone-frame {
  position: relative; height: min(100%, 560px); aspect-ratio: 9 / 19;
  max-width: 240px; flex: 0 1 auto; min-height: 0;
  border-radius: 36px; padding: 14px 12px 16px;
  background: linear-gradient(160deg, #26283d, #12131f);
  box-shadow: 0 22px 56px rgba(20, 20, 40, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.07);
  display: flex; flex-direction: column;
}
.phone-notch {
  width: 92px; height: 22px; margin: -3px auto 10px; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #0a0b12; border-radius: 0 0 14px 14px;
}
.phone-notch .phone-camera { width: 10px; height: 10px; border-radius: 50%; background: #1a2538; border: 1px solid #334155; }
.phone-notch .phone-speaker { width: 30px; height: 5px; border-radius: 9999px; background: #1a2538; }
.phone-home {
  width: 90px; height: 4px; margin: 8px auto 0; flex: none; border-radius: 9999px; background: rgba(255, 255, 255, 0.25);
}
.bnd-preview {
  position: relative; flex: 1; min-height: 0; border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
  --bnd-accent: #e94560;
  /* Matches the viewer body::before drifting gradients over the dark base. */
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(201, 44, 86, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 178, 188, 0.08), transparent 50%),
    #070d1c;
  transition: background 0.15s ease;
}
.bnd-preview-card {
  --ts: 30; --fit: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(16 / 390 * 100cqw * var(--fit));
  width: calc(100% - 2 * 24 / 390 * 100cqw);
  max-height: calc(100% - 8px);
  box-sizing: border-box;
  padding: calc(44 / 390 * 100cqw * var(--fit)) calc(40 / 390 * 100cqw * var(--fit));
  /* Glass card identical to the viewer .start-card. */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-radius: calc(32 / 390 * 100cqw);
  box-shadow: 0 8px 32px rgba(7, 13, 31, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #ffffff; text-align: center; overflow: hidden;
  transition: color 0.15s ease;
}
.bnd-preview-logo {
  display: none; flex: none;
  width: calc(88 / 390 * 100cqw * var(--fit));
  height: calc(88 / 390 * 100cqw * var(--fit));
  border-radius: calc(20 / 390 * 100cqw);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: drop-shadow(0 0 calc(22 / 390 * 100cqw) rgba(233, 69, 96, 0.45));
}
.bnd-preview-logo.has-img { display: block; }
/* Default placeholder matching the viewer's mini-cube face. */
.bnd-preview-cube {
  flex: none;
  width: calc(64 / 390 * 100cqw * var(--fit));
  height: calc(64 / 390 * 100cqw * var(--fit));
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 90, 90, 0.4);
  border-radius: calc(6 / 390 * 100cqw + 1px);
  background: linear-gradient(135deg, rgba(230, 0, 0, 0.22), rgba(230, 0, 0, 0.05));
  box-shadow: 0 0 calc(18 / 390 * 100cqw) rgba(230, 0, 0, 0.18), inset 0 0 calc(20 / 390 * 100cqw) rgba(255, 0, 0, 0.08);
  font-family: var(--font); font-weight: 800;
  font-size: calc(16 / 390 * 100cqw * var(--fit)); letter-spacing: 0.02em;
  color: rgba(255, 190, 190, 0.95); text-shadow: 0 0 calc(10 / 390 * 100cqw) rgba(255, 60, 60, 0.6);
}
.bnd-preview-title {
  font-family: var(--font);
  font-size: calc(var(--ts) / 390 * 100cqw * var(--fit));
  font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 1.15; max-width: 100%; overflow-wrap: break-word;
  /* Same gradient text as the viewer .start-title. */
  background: linear-gradient(135deg, var(--bnd-accent), #ffffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 calc(14 / 390 * 100cqw) rgba(233, 69, 96, 0.55));
}
.bnd-preview-sub {
  font-size: calc(14 / 390 * 100cqw * var(--fit));
  font-weight: 500; color: inherit; opacity: 0.75; line-height: 1.6;
  max-width: calc(320 / 390 * 100cqw);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bnd-preview-btn {
  font-family: var(--font);
  font-size: calc(16 / 390 * 100cqw * var(--fit));
  font-weight: 800; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
  padding: calc(14 / 390 * 100cqw * var(--fit)) calc(34 / 390 * 100cqw * var(--fit));
  min-width: calc(240 / 390 * 100cqw * var(--fit));
  border-radius: var(--radius-full);
  /* Viewer default button gradient (only overridden by JS when the user changes it). */
  background: linear-gradient(135deg, #ff6b81, var(--bnd-accent));
  color: #fff;
  box-shadow: 0 6px calc(20 / 390 * 100cqw) rgba(233, 69, 96, 0.35);
}
/* Miniature of the viewer's bottom-right watermark badge (real logo + AR). */
.bnd-preview-watermark {
  position: absolute; right: calc(14 / 390 * 100cqw); bottom: calc(12 / 390 * 100cqw);
  display: flex; align-items: flex-start; line-height: 1; pointer-events: none;
  filter: drop-shadow(0 0 calc(7 / 390 * 100cqw) rgba(233, 69, 96, 0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}
.bnd-preview-watermark .bnd-wm-logo {
  height: calc(30 / 390 * 100cqw); width: auto; display: block;
}

@media (max-width: 760px) {
  .modal-branding { height: 92dvh; max-height: 92dvh; }
  .branding-panel { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* Sticky floating close: keeps an order before the preview and overlays it
     via a negative bottom margin, so it stays reachable while scrolling. */
  .branding-close { order: -2; position: sticky; top: 10px; right: auto; align-self: flex-end; flex: none; width: 44px; height: 44px; margin: 10px 10px -44px 0; z-index: 6; }
  /* Preview sits on top at a readable size; options flow below in the same scroll. */
  .branding-preview-panel { order: -1; flex: none; padding: 1rem; min-height: 0; }
  .branding-props { flex: 0 0 auto; width: auto; max-width: none; min-width: 0; border-right: none; border-top: 1px solid var(--outline-faint); overflow: visible; }
  .phone-frame { width: min(80vw, 300px, calc(68dvh * 9 / 19)); height: auto; aspect-ratio: 9 / 19; border-radius: 28px; padding: 10px 10px 12px; }
  .bnd-preview { border-radius: 18px; }
  .phone-notch { margin: -2px auto 8px; }
}

/* ============================================================
   Upgrade dialog (plan tiers)
   Inspired by references-of-style "guide dialogs":
   equal-corner cards (1.25rem), hover lift, pill CTA buttons,
   strong type hierarchy (name 700 / price 800 / perks muted).
   ============================================================ */
#upgradeDialog .modal-wide {
  width: 100vw; max-width: 100vw;
  height: 100vh; max-height: 100vh;
  height: 100dvh; max-height: 100dvh;
  border: 0; border-radius: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
#upgradeDialog .modal-header { flex: none; }
#upgradeDialog .modal-body {
  padding: 22px 26px; overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
}
/* Constrain inner content so ultrawide screens don't stretch cards edge-to-edge. */
#upgradeDialog .billing-tabs,
#upgradeDialog #upgradeMsg,
#upgradeDialog #upgradePlans,
#upgradeDialog #lifetimeBanner,
#upgradeDialog #upgradeNote {
  max-width: 1160px; margin-left: auto; margin-right: auto;
}
.upgrade-msg { font-size: 0.87rem; color: var(--on-muted); line-height: 1.65; margin-bottom: 1.1rem; }
.upgrade-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem;
  margin-top: 4px; padding-top: 12px;
}
/* Per-plan accent colors — same palette as the admin dashboard (user2001). */
.plan-card { --plan-accent: var(--primary); --plan-soft: var(--primary-soft); }
.plan-card[data-plan="free"] { --plan-accent: #8d9ab7; --plan-soft: rgba(141, 154, 183, 0.16); }
.plan-card[data-plan="p25"]  { --plan-accent: #3b9dff; --plan-soft: rgba(59, 157, 255, 0.16); }
.plan-card[data-plan="p50"]  { --plan-accent: #a06bff; --plan-soft: rgba(160, 107, 255, 0.16); }
.plan-card[data-plan="p100"] { --plan-accent: #f0b13e; --plan-soft: rgba(240, 177, 62, 0.16); }
:root[data-theme="light"] .plan-card[data-plan="free"] { --plan-accent: #64748b; --plan-soft: rgba(100, 116, 139, 0.14); }
:root[data-theme="light"] .plan-card[data-plan="p25"]  { --plan-accent: #1d6fd6; --plan-soft: rgba(29, 111, 214, 0.14); }
:root[data-theme="light"] .plan-card[data-plan="p50"]  { --plan-accent: #7a3fd6; --plan-soft: rgba(122, 63, 214, 0.14); }
:root[data-theme="light"] .plan-card[data-plan="p100"] { --plan-accent: #a97400; --plan-soft: rgba(169, 116, 0, 0.14); }
.plan-card {
  position: relative; overflow: visible;
  display: flex; flex-direction: column;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--outline-faint); border-radius: var(--radius-md);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.25s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: var(--plan-accent, var(--primary));
}
/* Most popular: gradient wash + top ribbon. Current plan: soft tint. */
.plan-card.popular {
  border-color: var(--plan-accent);
  background: linear-gradient(180deg, var(--surface) 0%, var(--plan-soft) 100%);
}
.plan-card.current {
  border-color: var(--plan-accent);
  background: var(--plan-soft);
}
.badge-ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--plan-accent); color: #ffffff;
  font-size: 0.65rem; font-weight: 800; padding: 4px 14px;
  border-radius: var(--radius-full); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.badge-ribbon.is-current {
  background: var(--surface); color: var(--plan-accent);
  border: 1px solid var(--plan-accent);
}
/* Card header: accent dot + name, then the plan tagline. */
.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-header::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--plan-accent); flex: none;
}
.card-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); }
.plan-desc {
  color: var(--on-muted); font-size: 0.85rem; line-height: 1.5; font-weight: 500;
  margin-bottom: 20px; min-height: 40px;
}
/* Price: big accent amount + DT + /mo|/yr + struck year price. */
.price-container { margin-bottom: 8px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
.price-container .amount {
  font-size: 2rem; font-weight: 800; color: var(--plan-accent);
  line-height: 1; letter-spacing: -0.02em;
  animation: price-in 0.25s ease;
}
.price-container .currency { font-size: 1rem; font-weight: 700; color: var(--plan-accent); margin-left: 2px; }
.price-container .period { font-size: 0.9rem; color: var(--on-muted); font-weight: 600; margin-left: 2px; }
.price-container .original-price { font-size: 0.85rem; color: var(--on-muted); text-decoration: line-through; font-weight: 500; margin-left: 6px; }
.billing-note { font-size: 0.75rem; color: var(--on-muted); margin-bottom: 20px; line-height: 1.4; font-weight: 500; min-height: 32px; }
/* CTA before the features; solid accent for Pro/Business, quiet otherwise. */
.cta-btn {
  width: 100%; padding: 12px 16px; margin: auto 0 24px;
  border-radius: var(--radius-full); border: none;
  font-family: var(--font); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em;
  cursor: pointer; display: flex; justify-content: center; align-items: center;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.cta-btn:active { transform: scale(0.97); }
.cta-btn.primary { background: var(--plan-accent); color: #ffffff; }
.cta-btn.primary:hover { filter: brightness(1.1); }
.cta-btn.secondary { background: var(--surface-container); color: var(--on-surface); border: 1px solid var(--outline-faint); }
.cta-btn.secondary:hover { background: var(--surface-container-high); }
.cta-btn:disabled { opacity: 0.55; cursor: default; }
.cta-btn.crypto {
  position: relative;
  background: transparent; color: var(--plan-accent, var(--primary));
  border: 1px solid var(--plan-accent, var(--primary));
  margin: -4px 0 24px;
}
.cta-btn.crypto:hover { background: var(--plan-soft, var(--primary-soft)); }
/* Save-% corner ribbon overlapping the crypto button's top-right edge. */
.crypto-save {
  position: absolute; top: -11px; right: 10px;
  background: var(--primary); color: #ffffff;
  border: 1px solid var(--primary);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
.crypto-price { font-size: 0.78rem; font-weight: 700; color: var(--plan-accent, var(--primary)); margin: -4px 0 12px; }
.crypto-price s { color: var(--on-muted); font-weight: 500; margin-left: 4px; }
.crypto-net { font-size: 0.8rem; color: var(--on-muted); margin: 4px 0 10px; }
.crypto-net strong { color: var(--on-surface); }
.crypto-qr { display: block; width: min(240px, 100%); height: auto; margin: 0 auto 10px; border-radius: 12px; border: 1px solid var(--outline-faint); background: #fff; }
.crypto-addr-box { background: var(--surface-container); border: 1px solid var(--outline-faint); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.crypto-addr-box code { font-size: 0.78rem; }
/* Features with dimmed excluded rows. */
.features-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.features-list li {
  position: relative; padding-inline-start: 16px;
  font-size: 0.8rem; line-height: 1.4; font-weight: 500; color: var(--on-surface);
  display: flex; align-items: center;
}
.features-list li::before {
  content: "✓"; position: absolute; inset-inline-start: 0;
  font-size: 0.8rem; font-weight: 800; line-height: 1.4;
  color: var(--plan-accent); flex: none;
}
.features-list li.disabled { color: var(--on-muted); opacity: 0.55; }
.features-list li.disabled::before { content: "✕"; background: none; color: var(--on-muted); }
@keyframes price-in { from { opacity: 0; transform: translateY(4px); } }
.plan-card .p-feature {
  align-self: flex-start; font-size: 10px; font-weight: 700; margin: 10px 0 0;
  padding: 2px 8px; border-radius: var(--radius-full); background: var(--success-soft); color: var(--success);
}
.upgrade-note { margin-top: 1.1rem; font-size: 0.78rem; line-height: 1.6; color: var(--on-muted); }

/* --- Billing period tabs (Monthly / Annual) --- */
.billing-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 auto 1.1rem;
  width: fit-content;
  background: var(--surface-container);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-full);
  padding: 4px;
}
/* Sliding active-tab indicator: JS glides + resizes it onto the active tab
   (positionBillingPill), so Monthly <-> Annual morphs instead of snapping. */
.billing-pill {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  background: var(--primary); border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(233, 69, 96, 0.3);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), width 0.38s cubic-bezier(0.32, 0.72, 0, 1), height 0.25s ease;
  pointer-events: none;
}
.billing-tab {
  position: relative; z-index: 1;
  display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  color: var(--on-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 36px;
  box-sizing: border-box;
  cursor: pointer;
  transition: color .15s ease;
}
.billing-tab:hover { color: var(--on-surface); }
.billing-tab.is-active { background: transparent; color: #fff; }
.save-badge {
  background: var(--primary-soft); color: var(--primary);
  font-size: 0.7rem; font-weight: 800; padding: 4px 10px;
  border-radius: var(--radius-full); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.billing-tab.is-active .save-badge { background: rgba(255,255,255,0.2); color: #fff; }
/* Lifetime offer banner: black surface, corner sale ribbon, content offset right. */
.lifetime-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  margin-top: 1.5rem; padding: 32px 40px 32px 104px;
  background: #000000;
  border: 1px solid var(--outline-faint); border-radius: var(--radius-md);
  position: relative; overflow: hidden;
  animation: lb-breathe 3.5s ease-in-out infinite;
}
/* Breathing + warping dot-grid pattern over the black surface. */
.lifetime-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.22) 1.2px, transparent 1.8px);
  background-size: 20px 20px;
  animation: lb-dots 4s ease-in-out infinite;
}
@keyframes lb-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(233,69,96,0.5), 0 0 28px rgba(233,69,96,0.22), 0 0 90px rgba(233,69,96,0.10); }
  50% { box-shadow: 0 0 0 2px rgba(255,107,129,0.9), 0 0 60px rgba(233,69,96,0.45), 0 0 130px rgba(233,69,96,0.22); }
}
@keyframes lb-dots {
  0%, 100% { opacity: 0.4; transform: scale(1) translate(0, 0); }
  25% { opacity: 1; transform: scale(1.06) translate(-6px, 4px); }
  50% { opacity: 0.55; transform: scale(1.02) translate(5px, -5px); }
  75% { opacity: 1; transform: scale(1.06) translate(4px, 5px); }
}
/* Centered pricing dialog title + footnote. The title is absolutely centered
   (out of flow), so the header packs its remaining button to the right. */
#upgradeDialog .modal-header { position: relative; justify-content: flex-end; }
#upgradeDialogTitle {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
#upgradeDialog .upgrade-note { text-align: center; }
.sale-ribbon {
  position: absolute; top: 28px; left: -45px;
  background: #d92d20; color: #ffffff;
  padding: 6px 40px; font-size: 0.7rem; font-weight: 800;
  transform: rotate(-45deg); letter-spacing: 2px; text-transform: uppercase;
  white-space: nowrap;
}
.lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lb-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; }
.lb-perks { display: flex; flex-wrap: wrap; font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.65); max-width: 480px; }
.lb-perks span + span::before { content: "·"; margin: 0 8px; }
.lb-price { display: flex; flex-direction: column; align-items: flex-end; min-width: 140px; font-size: 2.25rem; font-weight: 800; color: #ffffff; line-height: 1; letter-spacing: -0.02em; }
.lb-price s { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.lb-price small { font-size: 0.8rem; color: rgba(255,255,255,0.55); font-weight: 500; margin-top: 4px; }
.lifetime-banner .btn { flex: none; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #ffffff; }
@media (max-width: 760px) {
  .lifetime-banner { flex-direction: column; align-items: stretch; text-align: center; gap: 18px; padding: 52px 24px 32px; }
  .lb-main { align-items: center; }
  .lb-price { align-items: center; }
  .lb-perks { justify-content: center; }
  .lifetime-banner .btn { align-self: center; width: 100%; max-width: 280px; }
}
@media (max-width: 560px) {
  #upgradeDialog .modal-wide { width: 100vw; max-width: 100vw; }
  #upgradeDialog .modal-body { padding: 16px 14px 24px; }
  .upgrade-plans { grid-template-columns: 1fr; gap: 0.9rem; }
  .plan-card { padding: 1.4rem 1.2rem 1.2rem; }
  .plan-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card { transition: none !important; }
  .price-container .amount { animation: none; }
  .lifetime-banner, .lifetime-banner::after { animation: none; }
  .billing-pill { transition: none; }
}
.home-grid-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-skip-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--glass-border); }
.home-skip-row .btn { width: 100%; }

/* Auth card composition (home gate): clear primary CTA, text-link toggle, ghost skip. */
#homeAuth .btn-block { width: 100%; justify-content: center; }
#homeAuth .btn-primary { min-height: 46px; font-size: 14px; }
#homeAuth .btn-primary:disabled { opacity: 0.7; cursor: progress; }
.auth-toggle-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 12px; padding: 8px 10px;
  font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--primary);
  background: none; border: none; cursor: pointer;
  transition: color 0.15s ease;
}
.auth-toggle-link:hover { color: var(--on-surface); text-decoration: underline; }
.auth-toggle-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
#homeAuth .btn-ghost {
  width: 100%; justify-content: center;
  background: transparent; border-color: var(--glass-border); color: var(--on-surface);
}
#homeAuth .btn-ghost:hover { background: var(--btn-glass); color: var(--on-surface); box-shadow: none; }

/* Account settings dialog */
.acct-danger-zone {
  border: 1px solid var(--error-soft, rgba(233, 69, 96, 0.3));
  border-radius: 10px;
  padding: 12px;
  margin-top: 4px;
}
.acct-danger-title { font-weight: 600; color: var(--error, #e94560); font-size: 13px; }
.acct-danger-sub { font-size: 12px; color: var(--on-muted, #999); margin: 4px 0 8px; }
.acct-delete-btn { background: var(--error-soft, rgba(233, 69, 96, 0.15)); color: var(--error, #e94560); border-color: var(--error-soft, rgba(233, 69, 96, 0.3)); }
.acct-delete-btn:hover { background: var(--error, #e94560); color: #fff; }

/* Dashboard card meta row (share state + views) */
.proj-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--on-muted, #999);
  margin-top: 4px;
}
.proj-card-views { display: inline-flex; align-items: center; gap: 3px; }
.proj-card-shared { color: var(--success, #4ade80); }
/* --- Opening-project progress overlay --- */
#openProgress {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: all;
}
#openProgress.hidden { display: none; }
#openProgress .op-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 14px;
  background: var(--surface, #141a2a); border: 1px solid var(--outline-faint, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-modal, 0 18px 50px rgba(0,0,0,0.5));
}
#openProgress .op-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(233, 69, 96, 0.25); border-top-color: #e94560;
  animation: op-spin 0.8s linear infinite;
}
#openProgress .op-label { font-size: 13px; color: var(--text, #e8ecf5); }
@keyframes op-spin { to { transform: rotate(360deg); } }

/* --- Save-to-cloud progress overlay --- */
#saveProgress {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 22, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: all;
}
#saveProgress.hidden { display: none; }
#saveProgress .sp-card {
  width: 320px; max-width: calc(100vw - 40px);
  padding: 18px 20px; border-radius: 14px;
  background: var(--surface, #141a2a);
  border: 1px solid var(--outline-faint, rgba(255, 255, 255, 0.12));
  box-shadow: var(--shadow-modal, 0 18px 50px rgba(0, 0, 0, 0.5));
}
#saveProgress .sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#saveProgress .sp-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(233, 69, 96, 0.25); border-top-color: #e94560;
  animation: op-spin 0.8s linear infinite;
  flex: none;
}
#saveProgress .sp-title { font-size: 14px; font-weight: 700; color: var(--text, #e8ecf5); }
#saveProgress .sp-label { font-size: 12px; color: var(--on-muted, #999); margin-bottom: 8px; min-height: 15px; }
#saveProgress .sp-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
#saveProgress .sp-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #e94560, #ff6b81);
  transition: width 0.25s ease;
}
#saveProgress .sp-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
#saveProgress .sp-stage { font-size: 11px; color: var(--on-muted, #999); }
#saveProgress .sp-pct { font-size: 11px; font-weight: 700; color: var(--text, #e8ecf5); font-variant-numeric: tabular-nums; }
#saveProgress .sp-card.done .sp-spinner { border-top-color: var(--success, #4ade80); }
#saveProgress .sp-card.done .sp-fill { background: linear-gradient(90deg, #2bbd74, var(--success, #4ade80)); }

/* --- Onboarding: welcome guide + coach marks --- */
.modal-guide { width: 560px; position: relative; max-height: 92vh; display: flex; flex-direction: column; border-radius: 1.6rem; }
.modal-guide .guide-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: transparent; border: 0; color: var(--on-muted); cursor: pointer; padding: 6px; border-radius: 8px;
}
.modal-guide .guide-close:hover { color: var(--on-surface); background: rgba(255,255,255,0.06); }

.guide-slides { position: relative; min-height: 360px; overflow: hidden; overflow-y: auto; }
.guide-slide {
  display: none; padding: 30px 32px 8px;
  animation: guideFade 0.25s ease;
}
.guide-slide.on { display: block; }
@keyframes guideFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.guide-hero { text-align: center; }
.guide-logo { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.guide-logo img { height: 34px; }
.guide-hero h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 6px 0 8px; color: var(--on-surface); text-wrap: balance; }
.guide-lead { font-size: 0.87rem; color: var(--on-muted); max-width: 420px; margin: 0 auto 18px; line-height: 1.65; text-wrap: pretty; }

.guide-steps-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.guide-step-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 11px; font-size: 12px; font-weight: 600;
  background: var(--surface-low, #141a2a); color: var(--on-surface);
  border: 1px solid var(--outline-faint, rgba(255,255,255,0.1));
}
.guide-step-chip .ico { width: 15px; height: 15px; color: var(--primary, #e94560); }
.guide-arrow { width: 13px; height: 13px; color: var(--on-muted); transform: rotate(-90deg); }

.guide-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: 2px 0 16px; color: var(--on-surface); text-align: center; text-wrap: balance; }
/* App screenshot inside the guide slides */
.guide-shot {
  margin: 2px 0 4px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--outline-faint, rgba(255,255,255,0.12));
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  background: var(--surface-low, #141a2a);
}
.guide-shot img { display: block; width: 100%; height: auto; }
.guide-title:first-child { margin-top: 14px; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.guide-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.87rem; color: var(--on-muted); line-height: 1.65; }
.guide-list strong { color: var(--on-surface); }
.guide-num {
  flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary, #e94560); color: #fff;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}

.guide-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.guide-card-mini {
  background: var(--surface-low, #141a2a); border: 1px solid var(--outline-faint, rgba(255,255,255,0.1));
  border-radius: 14px; padding: 14px;
}
.guide-card-mini strong { display: block; font-size: 13px; color: var(--primary, #e94560); margin-bottom: 6px; }
.guide-card-mini p { font-size: 12px; color: var(--on-muted); line-height: 1.5; margin: 0; }

.guide-actions-final { display: flex; gap: 10px; justify-content: center; margin: 4px 0 10px; }
.guide-skip-hint { text-align: center; font-size: 11.5px; color: var(--on-muted); margin: 0 0 14px; line-height: 1.5; }

.guide-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px 18px; border-top: 1px solid var(--outline-faint, rgba(255,255,255,0.08));
}
.guide-dots { display: flex; gap: 6px; }
.guide-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--outline-strong, rgba(255,255,255,0.25)); transition: background 0.2s; }
.guide-dots span.on { background: var(--primary, #e94560); }
.guide-nav { display: flex; gap: 8px; }

/* Coach-mark layer */
#onbLayer { position: fixed; inset: 0; z-index: 190; pointer-events: none; }
#onbLayer.hidden { display: none; }
#onbSpot {
  position: fixed; z-index: 1; pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 8, 16, 0.62);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}
#onbSpot.on { opacity: 1; }
/* Pulsing highlight ring so the featured control pops out of the dimmed UI. */
#onbSpot.on::after {
  content: ""; position: absolute; inset: -5px; border-radius: 18px;
  border: 2px solid var(--primary, #e94560);
  box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.22), 0 0 26px rgba(233, 69, 96, 0.5);
  animation: onbPulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes onbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.025); }
}
#onbBubble {
  position: fixed; z-index: 2; max-width: 320px;
  background: var(--surface, #141a2a); color: var(--on-surface);
  border: 1px solid var(--outline-faint, rgba(255,255,255,0.12));
  border-radius: 1.6rem; padding: 14px 16px 12px;
  box-shadow: var(--shadow-modal, 0 18px 50px rgba(0,0,0,0.55));
  pointer-events: all;
  transition: top 0.25s ease, left 0.25s ease, opacity 0.2s ease;
  opacity: 0;
}
#onbBubble.on { opacity: 1; }
#onbBubble h4 { margin: 0 0 5px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
#onbBubble p { margin: 0 0 12px; font-size: 0.87rem; color: var(--on-muted); line-height: 1.65; text-wrap: pretty; }
#onbBubble.onb-center {
  left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); opacity: 1;
  max-width: 420px; text-align: center;
}
.onb-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.onb-skip { background: transparent; border: 1px solid var(--on-muted); color: var(--on-muted); font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-full); white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.onb-skip:hover { background: var(--surface-low); color: var(--on-surface); }
.onb-skip:active { transform: scale(0.97); }
.onb-help {
  position: fixed; right: 26px; bottom: 26px; z-index: 150;
  width: clamp(44px, 12vw, 52px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  background: var(--surface, #141a2a); color: var(--primary, #e94560);
  border: 1px solid var(--outline-faint, rgba(255,255,255,0.14));
  box-shadow: 0 2px 10px rgba(0,0,0,0.28); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.onb-help .ico { width: 48%; height: 48%; }
.onb-help:hover { transform: scale(1.06); }
/* Dashboard help button — bottom-right corner of the home screen, mirrors
   .onb-help; reopens the welcome guide. Sits under dialogs (homeScreen is a
   stacking context, dialogs are z-200 inside it). */
.home-help {
  position: fixed; right: 26px; bottom: 24px; z-index: 5;
  width: clamp(44px, 12vw, 52px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
  background: var(--surface, #141a2a); color: var(--primary, #e94560);
  border: 1px solid var(--outline-faint, rgba(255,255,255,0.14));
  box-shadow: 0 2px 10px rgba(0,0,0,0.28); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.home-help .ico { width: 48%; height: 48%; }
.home-help:hover { transform: scale(1.06); }
@media (max-width: 820px) {
  .onb-help { bottom: calc(var(--mb-h, 60px) + env(safe-area-inset-bottom) + 78px); right: 14px; }
  .guide-cards-row { grid-template-columns: 1fr; }
  .guide-slide { padding: 24px 20px 6px; }
  .guide-footer { padding: 12px 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-slide,
  #onbSpot,
  #onbSpot.on::after,
  #onbBubble,
  .onb-help {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Welcome screen — simple splash shown before entering editor.
   Sits under the loading overlay (z 10000) but above home (z 80).
   ============================================================ */
#welcomeScreen {
  position: fixed; inset: 0; z-index: 11000;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 18px;
  padding: 0 20px clamp(70px, 14vh, 150px);
  background: var(--home-bg);
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.welcome-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.welcome-copy {
  position: relative; z-index: 1;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.welcome-copy-title {
  font-family: var(--font); font-size: clamp(22px, 4.5vw, 34px); font-weight: 800;
  letter-spacing: 0.02em; line-height: 1.2; margin: 0 0 6px;
  color: #ffffff; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}
.welcome-copy-sub {
  margin: 0;
  font-size: clamp(12px, 2vw, 14px); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}
.welcome-cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  border: 1px solid rgba(232, 59, 59, 0.55);
  border-radius: 999px;
  background: rgba(232, 59, 59, 0.12);
  font-family: var(--font);
  font-size: 0.85rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease;
}
.welcome-cta:hover {
  color: #ffffff;
  border-color: #e83b3b;
  background: rgba(232, 59, 59, 0.22);
}
.welcome-cta:active { transform: scale(0.97); }
.welcome-cta svg {
  width: 14px; height: 14px;
  color: rgba(232, 59, 59, 0.7);
  transition: transform 0.25s ease, color 0.25s ease;
}
.welcome-cta:hover svg { transform: translateX(6px); color: #e83b3b; }
/* Keep the label above the animated beam layer. */
.welcome-cta span,
.welcome-cta svg {
  position: relative; z-index: 1;
}
.welcome-cta span { color: #ffffff; }
.welcome-cta:hover span { color: #ffffff; }
.welcome-cta::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--stroke-angle), transparent 0deg, transparent 250deg, #ff3d3d 300deg, #ffb3b3 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: stroke-spin 2s linear infinite;
  pointer-events: none;
}
@property --stroke-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes stroke-spin {
  to { --stroke-angle: 360deg; }
}
/* Red label reads on the video in both themes, so no light override. */
/* If the masked-beam technique is unsupported, drop the beam so it can
   never cover the label - the hairline border still shows. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .welcome-cta::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-cta::before { animation: none; }
}
#welcomeScreen.hidden { display: none; }
#welcomeScreen.leaving { opacity: 0; pointer-events: none; }
/* Pixel-scan exit: canvas takes over fullscreen while dissolving. */
#welcomeScan {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
  pointer-events: none;
}
#welcomeScreen.scanning { pointer-events: none; background: transparent; }
#welcomeScreen.scanning #welcomeScan { display: block; }
#welcomeScreen.scanning .welcome-cta { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
#welcomeScreen.scanning .welcome-copy { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
/* Parked while welcoming: the loading overlay waits behind the welcome. */
body.welcoming #editorLoading { display: none; }
.welcome-card {
  width: 100%; max-width: 420px; margin: 0 auto; padding: 34px 30px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border); border-top-color: var(--glass-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  color: var(--on-surface);
  animation: guideFade 0.3s ease;
}
.welcome-brand { display: flex; justify-content: center; margin-bottom: 18px; }
.welcome-logo { height: 32px; width: auto; display: block; }
.welcome-title {
  font-family: var(--font); font-size: 22px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 8px;
  color: var(--on-surface); text-wrap: balance;
}
.welcome-sub {
  font-size: 13.5px; color: var(--home-muted); line-height: 1.6;
  margin: 0 0 22px; text-wrap: pretty;
}
.welcome-enter { width: 100%; justify-content: center; min-height: 46px; font-size: 14px; }
.welcome-hint { margin-top: 12px; font-size: 11.5px; color: var(--home-muted); }
@media (max-width: 480px) {
  .welcome-card { padding: 28px 22px; }
  .welcome-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  #welcomeScreen { transition: none; }
  .welcome-card { animation: none; }
}