/* ============================================================
   ShutterFlow — Global Design System  (v3, "Atelier")
   ------------------------------------------------------------
   Look ported + elevated from the client proposal
   (SHUTTERFLOW_PROPOSAL_FULL.html): warm paper · refined gold ·
   soft premium shadows · rounded hover-lift cards · dark elegant
   sidebar. RTL-first (Hebrew + Arabic).

   v3 goals (see DESIGN.md — the canonical design contract):
   · Higher polish: layered gradients, gold-tile icons, refined
     depth scale, hero login, bottom-sheet modals, section heads.
   · TRUE cross-platform / all-phones adaptation: iOS safe-area
     insets, no-zoom 16px inputs, Android/PWA theme, standalone
     display, mobile bottom tab-bar, fluid type, reduced-motion,
     high-contrast, coarse-pointer touch targets, feature @supports
     fallbacks.

   ⚠️ CONTRACT: every class name + CSS-var alias below is relied on
   by the controllers — never rename/remove, only refine + add.
   No hard-coded hex in HTML/JS; theme via --vars only.
   ============================================================ */

/* Fonts are <link>ed from each shell's <head> (preconnect + trimmed weights) —
   an @import here was undiscoverable until this whole stylesheet had parsed. */

/* Western-numeral guard [move #1, from DAWATI]: Noto Sans Arabic swaps ASCII
   digits for Arabic-Indic glyphs (٠١٢…) under lang="ar" via the 'locl' feature.
   Route digits + currency/percent punctuation through a system font that never
   substitutes, so prices/dates read the same in Hebrew and Arabic. */
@font-face {
  font-family: 'SF-Numerals';
  src: local('Segoe UI'), local('Arial'), local('Helvetica Neue'), local('Helvetica');
  unicode-range: U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D, U+20AA, U+003A;
}

:root {
  color-scheme: light;

  /* ── Ink + paper ─────────────────────────────────────── */
  --ink:          #1c1b1a;
  --ink-soft:     #56524d;
  --ink-dim:      #726c64;          /* AA 4.5:1 on paper/surface-2 (was #8b857c @3.42:1) */
  --paper:        #faf7f2;
  --card:         #ffffff;
  --surface-2:    #f4efe6;
  --surface-3:    #ece4d6;

  /* ── Gold (accent) ───────────────────────────────────── */
  --gold:         #c19a4b;
  --gold-deep:    #9c7a31;
  --gold-bright:  #d5b163;          /* gradient top-stop (was hardcoded) */
  --gold-hi:      #e7c98a;          /* gradient-text highlight */
  --gold-soft:    #f3ead6;
  --gold-ink:     #7d6227;          /* gold readable as small text: AA on card/paper/gold-soft */
  --gold-ring:    rgba(193, 154, 75, 0.28);
  --accent-rgb:   193, 154, 75;     /* raw RGB for rgba() tints (app themes) */

  /* ── Dark elegant (sidebar / accent panels) ──────────── */
  --dark:         #211f1d;
  --dark-2:       #2b2724;
  --dark-3:       #1a1816;
  --dark-grad:    linear-gradient(160deg, #262320 0%, #211f1d 45%, #1a1816 100%);

  --line:         #ece6db;
  --line-strong:  #ddd3c1;

  /* Brand primary — studio-overridable via applyBranding().
     Default = dark ink (elegant); gold is the fixed accent. */
  --primary:      #262320;
  --primary-dark: #1a1816;
  --primary-rgb:  38, 35, 32;
  --primary-ring: rgba(38, 35, 32, 0.18);

  /* ── Semantic (from proposal) ────────────────────────── */
  --success: #2f8f6b;  --success-bg: rgba(47, 143, 107, 0.12);
  --warning: #d99a2b;  --warning-bg: rgba(217, 154, 43, 0.14);
  --danger:  #c0524f;  --danger-bg:  rgba(192, 82, 79, 0.12);
  --error:   var(--danger);
  --info:    #7a4f8e;  --info-bg:    rgba(122, 79, 142, 0.12);
  --wa:      #25d366;  --wa-deep:    #128c7e;

  /* ── Aliases used across controllers / alerts ────────── */
  --text:         var(--ink);
  --text-muted:   var(--ink-soft);
  --text-dim:     var(--ink-dim);
  --text-inverse: #ffffff;
  --bg:           var(--paper);
  --surface:      var(--card);
  --bg-card:      var(--card);
  --glass:        rgba(250, 247, 242, 0.82);
  --border:       var(--line);
  --border-strong:var(--line-strong);
  --accent-gold:      var(--gold);
  --accent-gold-dark: var(--gold-deep);
  --accent-gold-bg:   var(--gold-soft);
  --primary-light:    var(--gold-soft);

  /* ── Calendar state accents ──────────────────────────── */
  --state-soft:       var(--warning);
  --state-confirmed:  var(--success);
  --state-production: var(--info);
  --state-cancelled:  var(--danger);

  /* ── Elevation / depth (layered = ambient + key light) ── */
  --shadow-sm:   0 1px 2px rgba(28,27,26,.04), 0 6px 22px -14px rgba(28, 27, 26, 0.26);
  --shadow-md:   0 2px 6px rgba(28,27,26,.05), 0 14px 36px -18px rgba(28, 27, 26, 0.30);
  --shadow-lg:   0 4px 12px rgba(28,27,26,.06), 0 22px 54px -24px rgba(28, 27, 26, 0.34);
  --shadow-xl:   0 8px 20px rgba(28,27,26,.08), 0 34px 74px -30px rgba(28, 27, 26, 0.42);
  --shadow-glow: 0 0 18px rgba(193, 154, 75, 0.28);
  --ring-focus:  0 0 0 3px var(--gold-ring);
  --gloss:       inset 0 1px 0 rgba(255, 255, 255, 0.14);   /* top inner highlight on dark/gold */
  --hairline:    inset 0 0 0 1px rgba(255, 255, 255, 0.55); /* fine light ring on cards */

  /* ── Radius ──────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* ── Fluid type scale (clamp — adapts phone → desktop) ── */
  --fs-xs:  0.76rem;
  --fs-sm:  0.86rem;
  --fs-base:1rem;
  --fs-lg:  clamp(1.04rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-xl:  clamp(1.2rem, 1.05rem + 0.9vw, 1.55rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.5vw, 2.1rem);

  /* ── Layout metrics ──────────────────────────────────── */
  --sidebar-w:  250px;
  --topbar-h:   64px;
  --tabbar-h:   62px;
  --content-max:1180px;

  /* ── Safe-area insets (iOS notch / home-indicator) ───── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ── Motion ──────────────────────────────────────────── */
  --transition:    160ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-md: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  font-size: 16px; direction: rtl; scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  font-family: 'SF-Numerals', 'Heebo', 'Assistant', 'Noto Sans Arabic', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  /* Atmospheric canvas — soft gold + violet glows over warm paper, fixed so
     it reads as a lit room, not a flat page. */
  background:
    radial-gradient(1100px 560px at 100% -6%, rgba(193, 154, 75, 0.07), transparent 55%),
    radial-gradient(900px 520px at -8% 108%, rgba(122, 79, 142, 0.045), transparent 55%),
    var(--paper);
  background-attachment: fixed;
  min-height: 100vh; min-height: 100dvh; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: 'SF-Numerals', 'Noto Sans Arabic', 'Heebo', 'Segoe UI', system-ui, Arial, sans-serif; }
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* Keyboard-only focus ring (accessible across every OS/browser) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::selection { background: var(--gold-ring); color: var(--ink); }

@keyframes viewEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes swalDot   { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes shimmer   { 100% { transform: translateX(-100%); } }

/* ── Small shared utilities (additive; safe to use anywhere) ─ */
.text-center { text-align: center; }
.text-gold-gradient {
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--surface-3); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.7s linear infinite; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: shimmer 1.3s infinite; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-deep); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow .ic { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold-deep); }
.panel-dark { background: var(--dark-grad); color: #f0ebe1; border-radius: var(--radius-xl); padding: 26px 28px; box-shadow: var(--shadow-lg); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.section-head h2, .page-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }

/* ============================================================
   APP LAYOUT
   ============================================================ */
#app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ── Sidebar (dark elegant · anchored RIGHT in RTL) ───────── */
#sidebar {
  width: var(--sidebar-w);
  /* layered: base charcoal gradient + top gold aura + faint conic sheen */
  background:
    radial-gradient(140% 60% at 100% 0%, rgba(193, 154, 75, 0.10), transparent 60%),
    linear-gradient(168deg, var(--dark) 0%, var(--dark-2) 52%, var(--dark-3) 100%);
  color: #e9e2d6;
  display: flex; flex-direction: column;
  position: fixed; top: 0; inset-inline-start: 0; bottom: 0; z-index: 100;   /* start = RIGHT in RTL */
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  transition: transform var(--transition-md);
  box-shadow: -2px 0 34px -18px rgba(0, 0, 0, 0.55);
}
/* gold hairline on the inner (content-facing) edge */
#sidebar::after { content: ""; position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--gold-ring), transparent 45%); opacity: .6; }
#sidebar-header { padding: 22px 18px 18px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 12px; }
#sidebar-header img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: contain; background: rgba(255, 255, 255, 0.06); padding: 3px; box-shadow: inset 0 0 0 1px rgba(193,154,75,.22); }
#sidebar-title { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: .2px; }
#sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 0; }
#sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
.nav-section-label { font-size: .64rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; padding: 14px 20px 5px; opacity: .9; }
.nav-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; margin: 3px 12px;
  color: #cfc7ba; font-size: .94rem; font-weight: 600;
  border: none; background: none; border-radius: var(--radius); cursor: pointer;
  width: calc(100% - 24px); text-align: start; position: relative;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-item:active { transform: scale(.98); }
.nav-item.active { background: linear-gradient(135deg, rgba(var(--accent-rgb),.26), rgba(var(--accent-rgb),.08)); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.38), 0 8px 20px -14px rgba(var(--accent-rgb),.5); }
.nav-item.active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: linear-gradient(var(--gold-hi), var(--gold-deep)); box-shadow: 0 0 10px var(--gold-ring); }
.nav-item.active [data-lucide] { color: var(--gold); }
.nav-item [data-lucide] { width: 19px; height: 19px; flex-shrink: 0; }

/* ── Topbar ───────────────────────────────────────────────── */
#topbar {
  height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) 22px 0;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 50;
}
/* thin gold underline under the topbar for a "framed" feel */
#topbar::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-ring), transparent); }
#topbar-title { font-size: var(--fs-lg); font-weight: 800; flex: 1; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#main { flex: 1; margin-inline-start: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
#content { padding: 26px; padding-inline-start: max(26px, var(--safe-l)); padding-inline-end: max(26px, var(--safe-r)); flex: 1; max-width: var(--content-max); width: 100%; margin: 0 auto; }

.view { display: none; }
.view.active { display: block; animation: viewEnter var(--transition-md) both; }
.view-fullscreen { display: none; min-height: 100vh; min-height: 100dvh; }
.view-fullscreen.active { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: viewEnter var(--transition-md) both; }

/* ── Mobile bottom tab-bar (primary nav when sidebar collapses) ─
   Buttons carry `.nav-item[data-view]` so they reuse the existing
   click + active-sync wiring — no JS change needed. Hidden ≥861px. */
.tabbar { display: none; }
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(28,27,26,.35);
}
.tabbar .nav-item {
  flex-direction: column; gap: 3px; margin: 0; padding: 8px 2px 6px;
  width: auto; flex: 1; color: var(--ink-dim); font-size: .66rem; font-weight: 700;
  border-radius: 0; text-align: center; align-items: center; justify-content: center;
}
.tabbar .nav-item:hover { background: none; color: var(--ink); }
.tabbar .nav-item [data-lucide] { width: 22px; height: 22px; }
.tabbar .nav-item.active { background: none; box-shadow: none; color: var(--gold-ink); }
.tabbar .nav-item.active::before { inset-inline-start: 50%; top: 4px; transform: translateX(50%); width: 26px; height: 3px; }
.tabbar .nav-item.active [data-lucide] { color: var(--gold-deep); filter: drop-shadow(0 2px 5px var(--gold-ring)); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; min-height: 44px; border: 1px solid transparent; border-radius: 999px;
  font-size: .92rem; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; user-select: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), filter var(--transition), border-color var(--transition);
}
/* moving sheen that sweeps across filled buttons on hover */
.btn-primary::after, .btn-gold::after, .btn-danger::after, .btn-wa::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0; transition: none;
}
.btn-primary:hover::after, .btn-gold:hover::after, .btn-danger:hover::after, .btn-wa:hover::after {
  opacity: 1; inset-inline-start: 140%; transition: inset-inline-start .6s var(--ease-out), opacity .2s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn [data-lucide] { width: 17px; height: 17px; position: relative; z-index: 1; }
.btn > span, .btn { position: relative; }

.btn-primary   { background: linear-gradient(145deg, #35302b, var(--dark-3)); color: #fff; box-shadow: var(--shadow-md), var(--gloss); }
.btn-primary:hover { filter: brightness(1.14); transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--gloss); }
.btn-gold      { background: linear-gradient(145deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%); color: #3a2c0e; box-shadow: 0 14px 30px -12px var(--gold-ring), var(--gloss); }
.btn-gold:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-2px); box-shadow: 0 18px 38px -12px var(--gold-ring), var(--gloss); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: #fff; border-color: var(--gold); color: var(--gold-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-danger    { background: linear-gradient(145deg, #cf5d5a, var(--danger)); color: #fff; box-shadow: 0 12px 26px -14px rgba(192,82,79,.6), var(--gloss); }
.btn-danger:hover { filter: brightness(1.04); transform: translateY(-2px); }
.btn-ghost     { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-wa        { background: linear-gradient(145deg, #34e07a, var(--wa-deep)); color: #fff; box-shadow: 0 14px 30px -14px rgba(18,140,126,.6), var(--gloss); }
.btn-wa:hover  { filter: brightness(1.05); transform: translateY(-2px); }
.btn-block     { width: 100%; }
/* Icon buttons — tactile soft chips (defined bg + border + depth + gold hover),
   not hollow circles. Overrides .btn-ghost since it's later in source. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; min-width: 40px; min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-icon [data-lucide] { width: 18px; height: 18px; }
.btn-icon:hover { background: #fff; border-color: var(--gold); color: var(--gold-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-icon:active { transform: scale(0.92); }
/* danger affordance for delete icon buttons that opt in */
.btn-icon.btn-icon-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
/* icon buttons sitting on the dark sidebar / dark surfaces */
.btn-icon.on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #e9e2d6; box-shadow: none; }
.btn-icon.on-dark:hover { background: rgba(255,255,255,.14); border-color: var(--gold); color: #fff; }
.btn-sm        { padding: 7px 14px; min-height: 34px; font-size: .82rem; }
.btn-lg        { padding: 15px 28px; min-height: 54px; font-size: 1rem; }
/* loading state — label/icon hidden, centered spinner, non-interactive */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before { content: ""; position: absolute; top: 50%; inset-inline-start: 50%; width: 18px; height: 18px; margin-top: -9px; margin-inline-start: -9px; border: 2.5px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: spin .7s linear infinite; visibility: visible; z-index: 2; }
.btn-secondary.is-loading::before, .btn-ghost.is-loading::before { color: var(--gold-deep); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group  { margin-bottom: 16px; }
.form-label  { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.form-label .req, .req { color: var(--danger); margin-inline-start: 3px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 14px;
  background: #fdfbf7; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 16px; font-family: inherit;   /* 16px = no iOS focus-zoom */
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--gold); background: #fff; box-shadow: var(--ring-focus);
}
/* custom gold chevron on selects (app is RTL → arrow sits on the left/end) */
.form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c7a31' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 0.95rem center; padding-inline-end: 2.4rem;
}
.form-textarea { resize: vertical; min-height: 84px; }
.form-hint { font-size: .8rem; color: var(--ink-soft); margin-top: 5px; }
.form-error { font-size: .8rem; color: var(--danger); margin-top: 5px; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; background: var(--surface-3); border-radius: 999px; transition: var(--transition); }
.switch .slider::before { content: ""; position: absolute; width: 20px; height: 20px; inset-inline-start: 3px; top: 3px; background: #fff; border-radius: 50%; transition: var(--transition); box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); }
/* RTL: the knob starts at the RIGHT edge (inset-inline-start) — checked must
   travel LEFT. +20px pushed it out of the track (founder-reported broken toggle). */
html[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-20px); }

/* Native checkboxes/radios that remain (dense editors: required/location/M2M
   chips) follow the accent instead of default browser blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold-deep); }

/* ── App theme picker (Settings ▸ branding ▸ ערכת צבעים) ─── */
.theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-swatch { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); padding: 4px; cursor: pointer; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.theme-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sw, var(--gold)); }
.theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.theme-swatch.is-on { border-color: var(--sw, var(--gold)); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), transparent 120px),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm), var(--hairline); padding: 22px;
  transition: transform var(--transition-md), box-shadow var(--transition-md);
}
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-title  { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.card-grid   { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card-interactive { cursor: pointer; }
.card-interactive:hover, .kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--hairline); }
/* Staggered entrance for grids/lists — subtle depth on view enter */
.view.active .card-grid > * { animation: viewEnter var(--transition-md) both; }
.view.active .card-grid > *:nth-child(2) { animation-delay: 40ms; }
.view.active .card-grid > *:nth-child(3) { animation-delay: 80ms; }
.view.active .card-grid > *:nth-child(4) { animation-delay: 120ms; }
.view.active .card-grid > *:nth-child(5) { animation-delay: 160ms; }
.view.active .card-grid > *:nth-child(6) { animation-delay: 200ms; }

/* ── Dashboard KPI cards (glassmorphism stat treatment [move #3, DAWATI]) ── */
.kpi-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 15px; }
.kpi-card::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; inset-inline-start: -34px; bottom: -46px; background: radial-gradient(closest-side, var(--gold-ring), transparent 72%); filter: blur(16px); opacity: .7; pointer-events: none; z-index: 0; }
.kpi-card > * { position: relative; z-index: 1; }
.kpi-card > [data-lucide], .kpi-card > svg { width: 46px; height: 46px; padding: 11px; flex-shrink: 0; color: var(--gold-deep); background: linear-gradient(140deg, var(--gold-soft), #fff); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 6px 16px -10px var(--gold-ring); }
.kpi-value { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.85rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }

/* ── Badges ───────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.badge-neutral { background: var(--surface-3); color: var(--ink-soft); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--gold-deep); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-gold    { background: var(--gold-soft); color: var(--gold-ink); }

/* ── Table (horizontal-scroll on small screens, momentum) ─── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 480px; }
.table th, .table td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { font-weight: 700; color: var(--ink-soft); background: #faf6ee; position: sticky; top: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:nth-child(even) { background: #fcf9f3; }   /* zebra */
.table tbody tr:hover { background: var(--gold-soft); }
.table tbody tr:last-child td { border-bottom: none; }
mark.search-hl { background: var(--gold-soft); color: var(--gold-deep); border-radius: 3px; padding: 0 2px; }

/* ── Empty state ──────────────────────────────────────────── */
.empty-state { text-align: center; padding: 54px 20px; color: var(--ink-soft); }
.empty-state [data-lucide] { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--gold); opacity: .7; }
.empty-state h3 { font-size: 1.06rem; color: var(--ink); margin-bottom: 6px; font-weight: 700; }

/* ── Modal (centered on desktop, bottom-sheet on phones) ──── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(28, 27, 26, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 18px; animation: fadeIn var(--transition) both; }
.modal-overlay.active { display: flex; }
.modal { background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 540px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: viewEnter var(--transition-md) both; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.modal-title  { font-size: var(--fs-lg); font-weight: 800; }
.modal-body   { padding: 22px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-start; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ── Login / auth — dark hero + glass card [move #2, DAWATI/proposal] ── */
#view-login {
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b)); position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 460px at 82% -10%, rgba(193,154,75,.22), transparent 58%),
    radial-gradient(760px 420px at 6% 112%, rgba(193,154,75,.10), transparent 58%),
    linear-gradient(160deg, #262320 0%, #211f1d 45%, #1a1816 100%);
}
/* dot-lattice overlay */
#view-login::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
/* soft gold glow blob */
#view-login::after { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; bottom: -170px; inset-inline-end: -130px; background: radial-gradient(closest-side, rgba(193,154,75,.18), transparent 70%); filter: blur(30px); pointer-events: none; }
.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 28px;
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.62), var(--hairline);
  padding: 40px 32px 34px; overflow: hidden;
  animation: loginCardEnter .5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes loginCardEnter { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.auth-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--gold-hi), var(--gold), var(--gold-deep)); }
.auth-logo { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; object-fit: contain; box-shadow: 0 14px 34px -12px rgba(0,0,0,.35), 0 0 0 1px var(--gold-ring); }
/* ShutterFlow wordmark logo (badge already carries name+corners) — bigger, no
   box/ring so the transparent rounded PNG floats with just a soft drop shadow. */
.auth-logo-lg { width: clamp(140px, 42vw, 172px); height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 16px 30px rgba(0,0,0,.42)); margin-bottom: 12px; }
/* visually-hidden but accessible (badge shows the wordmark, so the H1 is a11y-only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.auth-title { text-align: center; font-size: var(--fs-2xl); font-weight: 800; margin-bottom: 4px; letter-spacing: -.01em; }
.auth-sub   { text-align: center; color: var(--ink-soft); font-size: .92rem; margin-bottom: 24px; }
/* feature pills under the form */
.auth-pills { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.auth-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); font-size: .74rem; font-weight: 700; }
/* footer text sits on the dark hero → lighten it */
#view-login .vertex-footer { color: rgba(255,255,255,.55); margin-top: 18px; }

/* ── Language toggle ──────────────────────────────────────── */
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); font-size: .82rem; font-weight: 700; transition: all var(--transition); }
.lang-toggle:hover { border-color: var(--gold); color: var(--ink); }
.lang-toggle [data-lucide] { width: 16px; height: 16px; }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; min-height: 42px; border: none; background: none; color: var(--ink-soft); font-weight: 700; font-size: .9rem; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition); }
.tab svg { width: 15px; height: 15px; flex-shrink: 0; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--gold-deep); border-bottom-color: var(--gold); }

/* ── Editable list rows ───────────────────────────────────── */
.list-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.list-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .muted, .muted { color: var(--ink-soft); font-size: .82rem; }
/* POS package rows carry fixed-width discount/price controls (~318px) that
   overflow the bottom-sheet on narrow phones — let the controls wrap under the
   package name instead of scrolling out of view. */
@media (max-width: 560px) {
  .list-item[data-li] { flex-wrap: wrap; }
  .list-item[data-li] .grow { flex-basis: 100%; }
}
.row-actions { display: flex; gap: 6px; align-items: center; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-deep); font-size: .74rem; font-weight: 600; margin: 2px; }
.logo-preview { width: 74px; height: 74px; border-radius: var(--radius); object-fit: contain; border: 1px solid var(--line-strong); background: var(--surface-2); }

/* ── WhatsApp bubble preview ──────────────────────────────── */
.wa-preview { background: #e5ddd5; border-radius: var(--radius); padding: 16px; background-image: radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px); background-size: 14px 14px; }
.wa-bubble  { background: #dcf8c6; color: #111b21; border-radius: 12px; padding: 9px 13px; max-width: 88%; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-sm); font-size: .9rem; line-height: 1.5; }

/* ── Calendar (Shift-Manager look, premium palette) ───────── */
.cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-wd-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); background: var(--paper); z-index: 10; padding-bottom: 7px; }
.cal-wd { text-align: center; font-size: .74rem; font-weight: 700; color: var(--ink-soft); padding: 6px 0; text-transform: uppercase; letter-spacing: .04em; }
.cal-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.cal-cell { min-height: 90px; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px; background: var(--card); display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.cal-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cal-empty { background: transparent; border: none; box-shadow: none; }
.cal-day { align-self: flex-start; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.cal-day.today { background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); color: #fff; box-shadow: var(--shadow-glow); }
.cal-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-chip { width: 25px; height: 25px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cal-chip [data-lucide] { width: 14px; height: 14px; }
.cal-more { font-size: .72rem; color: var(--ink-soft); align-self: center; }
.st-soft      { background: var(--warning-bg); color: var(--gold-deep); box-shadow: 0 0 12px rgba(217,154,43,.18); }
.st-confirmed { background: var(--success-bg); color: var(--success); box-shadow: 0 0 12px rgba(47,143,107,.18); }
.st-prod      { background: var(--info-bg);    color: var(--info);    box-shadow: 0 0 12px rgba(122,79,142,.16); }
.st-delivered { background: var(--surface-3);  color: var(--ink-soft); }
.st-cancelled { background: var(--danger-bg);  color: var(--danger); }
.st-free      { background: var(--surface-2);  color: var(--ink-dim); }
.cal-blocked  { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--surface-3) 6px, var(--surface-3) 12px) !important; }
.cal-meet     { background: var(--info-bg); color: var(--info); box-shadow: 0 0 10px rgba(122,79,142,.14); }

/* ── Production stepper ───────────────────────────────────── */
.prod-card { margin-bottom: 14px; }
.prod-stage { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prod-stage:last-of-type { border-bottom: none; }
.prod-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all var(--transition); }
.prod-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.prod-check [data-lucide] { width: 15px; height: 15px; }
.prod-stage-label { font-weight: 700; min-width: 90px; }
.prod-stage-fields { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }

/* ============================================================
   VERTEX "POWERED BY" FOOTER
   ============================================================ */
/* Vertex "POWERED BY" footer — stacked column exactly like RentManager / Vertex
   Quote: label on top · logo (64px) in the middle · fixed slogan below. */
.vertex-footer { text-align: center; padding: 30px 20px 20px; margin-top: 8px; }
.vertex-footer .vertex-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.vertex-footer .vertex-logo-container { display: block; cursor: pointer; }
.vertex-footer .vertex-logo-container img { height: 64px; width: auto; display: block; margin: 0 auto; filter: grayscale(100%) opacity(.7); transition: filter .4s cubic-bezier(.175,.885,.32,1.275), transform .4s cubic-bezier(.175,.885,.32,1.275); }
.vertex-footer .vertex-logo-container:hover img { filter: grayscale(0%) opacity(1); transform: scale(1.05); }
.vertex-footer .vertex-slogan { font-size: 12px; font-weight: 500; letter-spacing: .5px; color: var(--ink-dim); margin-top: 12px; }
/* on dark surfaces (login hero + mini-site dark theme) keep the badge legible */
#view-login .vertex-footer .vertex-logo-container img,
body[data-site-bg="dark"] .vertex-footer .vertex-logo-container img { filter: none; opacity: .95; }
#view-login .vertex-footer .vertex-label, #view-login .vertex-footer .vertex-slogan,
body[data-site-bg="dark"] .vertex-footer .vertex-label, body[data-site-bg="dark"] .vertex-footer .vertex-slogan { color: rgba(255,255,255,.6); }

/* ============================================================
   MINI-SITE (site.html) — the client-facing showpiece
   ============================================================ */
.site-wrap { max-width: 600px; margin: 0 auto; padding: calc(22px + var(--safe-t)) max(16px, var(--safe-r)) calc(48px + var(--safe-b)) max(16px, var(--safe-l)); }

/* ── Hero ─────────────────────────────────────────────────── */
.site-hero { position: relative; margin-bottom: 22px; }
.site-cover {
  height: 208px; border-radius: var(--radius-xl);
  background-color: var(--dark-2);
  background-image: linear-gradient(180deg, rgba(28,27,26,.05), rgba(28,27,26,.55)), var(--dark-grad);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(193,154,75,.18);
  position: relative; overflow: hidden;
}
/* faint gold aura sweeping across the cover */
.site-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% -10%, rgba(193,154,75,.22), transparent 55%); }
.site-hero-body { position: relative; margin-top: -58px; text-align: center; padding: 0 8px; }
.site-logo  { width: 96px; height: 96px; border-radius: 24px; background: var(--card); border: 4px solid var(--card); box-shadow: var(--shadow-lg); margin: 0 auto 14px; object-fit: contain; position: relative; }
.site-logo::after { content: ""; position: absolute; inset: -4px; border-radius: 28px; box-shadow: 0 0 0 1px var(--gold-ring); pointer-events: none; }
.site-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.site-sub   { color: var(--ink-soft); margin: 4px auto 0; max-width: 42ch; }
.site-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.site-trust-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.site-trust-item [data-lucide] { width: 15px; height: 15px; color: var(--gold-deep); }

/* ── Branding-load state: shimmer the hero until the studio's own
      logo/name/theme arrive, so VERTEX/ShutterFlow never flash on a
      white-label mini-site (or portal). Removed by site.js/portal.js. ── */
body[data-site-loading] .site-logo,
body[data-site-loading] .site-title {
  background-image: linear-gradient(90deg, var(--surface-2) 25%, rgba(0,0,0,.06) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite;
}
body[data-site-loading] .site-title { color: transparent; display: inline-block; min-width: 190px; min-height: 1.3em; border-radius: 9px; }
body[data-site-loading] .site-sub,
body[data-site-loading] .site-trust { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  body[data-site-loading] .site-logo, body[data-site-loading] .site-title { animation: none; }
}

/* ── Form sections ────────────────────────────────────────── */
#site-form-root .card { animation: viewEnter var(--transition-md) both; }
.site-section, .site-event-card { margin-bottom: 14px; }
.site-event-card { position: relative; overflow: hidden; }
.site-event-card::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold-hi), var(--gold), transparent); }
.site-section-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.site-section-head h2 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; }
.site-section-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--gold-soft), #fff); border: 1px solid var(--line); color: var(--gold-deep); }
.site-section-ic [data-lucide] { width: 20px; height: 20px; }
.site-event-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.02rem; }
.site-event-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); color: #fff; font-size: .82rem; font-weight: 800; box-shadow: var(--shadow-glow); }
.site-field-last { margin-bottom: 0; }

/* input with a leading icon (icon on the RTL start = right) */
.site-field { position: relative; }
.site-field > [data-lucide] { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gold-deep); pointer-events: none; z-index: 1; }
.site-field .form-input { padding-inline-start: 44px; }

/* ── Selectable package tiles ─────────────────────────────── */
.site-pkg-hint { margin: -2px 0 10px; }
.site-pkg { display: flex; align-items: center; gap: 12px; padding: 14px 15px; margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }
.site-pkg:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.site-pkg .pkg-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.site-pkg-tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all var(--transition); }
.site-pkg-tick [data-lucide] { width: 16px; height: 16px; }
.site-pkg .grow strong { display: block; font-weight: 700; }
.site-pkg .grow .muted { display: block; margin-top: 1px; }
.site-pkg:has(.pkg-check:checked) { border-color: var(--gold); background: #fffdf8; box-shadow: 0 12px 28px -18px var(--gold-ring); }
.site-pkg:has(.pkg-check:checked) .site-pkg-tick { background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); border-color: var(--gold-deep); color: #fff; }
/* fallback for engines without :has() — keep tick visible/tappable */
@supports not selector(:has(*)) { .site-pkg .site-pkg-tick { color: var(--gold-deep); border-color: var(--gold); } }

/* ── Add / submit ─────────────────────────────────────────── */
.site-add-btn { margin-bottom: 16px; border-style: dashed; }
.site-submit-btn { min-height: 56px; font-size: 1.04rem; }
.site-submit-hint { text-align: center; color: var(--ink-soft); font-size: .84rem; margin-top: 12px; }

/* ── Success ──────────────────────────────────────────────── */
.site-success { text-align: center; padding: 40px 26px; animation: viewEnter var(--transition-md) both; }
.site-success-badge { width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(140deg, var(--success), #1f6f52); box-shadow: 0 16px 34px -14px rgba(47,143,107,.6); animation: viewEnter var(--transition-md) both; }
.site-success-badge [data-lucide] { width: 36px; height: 36px; }
.site-success h3 { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 6px; }
.site-success p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto; }

/* ============================================================
   MINI-SITE SHOP (E.13 v2) — product cards → packages → cart
   ============================================================ */
.req { color: var(--gold-deep); margin-inline-start: 3px; font-weight: 800; }

/* staggered entrance for sections */
.reveal { animation: viewEnter var(--transition-md) both; }
.reveal:nth-child(2) { animation-delay: 60ms; }
.reveal:nth-child(3) { animation-delay: 120ms; }
.reveal:nth-child(4) { animation-delay: 180ms; }

/* ── Event-type product cards ─────────────────────────────── */
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shop-card {
  display: flex; flex-direction: column; padding: 0; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); background: var(--card); overflow: hidden; cursor: pointer;
  font: inherit; text-align: start; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.shop-card:hover, .shop-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 18px 38px -16px var(--gold-ring), var(--shadow-md); }
.shop-card:active { transform: translateY(-1px) scale(.99); }
.shop-card-img {
  display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: var(--surface-2); position: relative; transition: transform 500ms var(--ease-out);
}
.shop-card:hover .shop-card-img { transform: scale(1.045); }
.shop-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(28,27,26,.28)); }
.shop-card-img--icon { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--gold-soft), var(--surface-2)); }
.shop-card-img--icon [data-lucide] { width: 42px; height: 42px; color: var(--gold-deep); opacity: .85; }
.shop-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px 13px; position: relative; z-index: 1; background: var(--card); }
.shop-card-body strong { font-weight: 800; font-size: .98rem; letter-spacing: -.01em; }
.shop-card-body .muted { font-size: .76rem; }
.shop-card-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .8rem; font-weight: 800; color: var(--gold-deep); }
.shop-card-cta [data-lucide] { width: 15px; height: 15px; }

/* ── Configure sheet: image banner ────────────────────────── */
.modal-sheet { max-height: 88vh; display: flex; flex-direction: column; }
.modal-sheet .modal-body { overflow-y: auto; }
.cfg-banner {
  height: 128px; border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--dark-2);
  display: flex; align-items: flex-end; position: relative;
}
.cfg-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(28,27,26,.62)); }
.cfg-banner span { position: relative; color: #fff; font-weight: 800; font-size: 1.05rem; padding: 12px 15px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.cfg-banner--icon { background: var(--dark-grad); align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.cfg-banner--icon [data-lucide] { position: relative; width: 34px; height: 34px; color: var(--gold-hi); }
.cfg-banner--icon span { padding: 0 0 10px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Config sheet: grouped "details" card + icon labels ─────── */
.cfg-section { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.cfg-section .site-section-head { margin-bottom: 13px; }
.cfg-section .site-section-head h2, .cfg-subhead h2 { font-size: 1rem; }
.cfg-section .site-section-ic, .cfg-subhead .site-section-ic { width: 34px; height: 34px; border-radius: 10px; }
.cfg-section .site-section-ic [data-lucide], .cfg-subhead .site-section-ic [data-lucide] { width: 17px; height: 17px; }
.cfg-section .form-group:last-child { margin-bottom: 0; }
.cfg-section .form-label { display: flex; align-items: center; gap: 6px; }
.cfg-section .form-label svg { width: 15px; height: 15px; color: var(--gold-deep); flex-shrink: 0; }
.cfg-section .form-label .req { margin-inline-start: -2px; }
.cfg-subhead { margin: 4px 0 13px; }

/* ── Package cards (bulleted, selectable) ─────────────────── */
.pkg-cards { display: flex; flex-direction: column; gap: 10px; }
.pkg-card {
  position: relative; display: flex; gap: 12px; padding: 14px 15px; border: 1.5px solid var(--line);
  border-radius: var(--radius-lg); background: var(--card); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pkg-card:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pkg-card .pkg-check { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pkg-card-tick { flex-shrink: 0; width: 26px; height: 26px; margin-top: 2px; border-radius: 8px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all var(--transition); }
.pkg-card-tick [data-lucide] { width: 16px; height: 16px; }
.pkg-card-img { flex-shrink: 0; width: 62px; height: 62px; border-radius: var(--radius); background-size: cover; background-position: center; background-color: var(--surface-2); }
.pkg-card-body { flex: 1; min-width: 0; }
.pkg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pkg-card-head strong { font-weight: 800; }
.pkg-bullets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pkg-bullets li { display: flex; align-items: flex-start; gap: 7px; font-size: .84rem; color: var(--ink-soft); line-height: 1.45; }
.pkg-bullets li [data-lucide] { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--gold-deep); }
.pkg-card.is-on { border-color: var(--gold); background: #fffdf8; box-shadow: 0 12px 28px -18px var(--gold-ring); }
.pkg-card.is-on .pkg-card-tick { background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); border-color: var(--gold-deep); color: #fff; }

/* ── Cart review + total ──────────────────────────────────── */
.cart-line { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--line); animation: viewEnter var(--transition) both; }
.cart-line:last-of-type { border-bottom: none; }
.cart-line .muted { font-size: .8rem; margin-top: 2px; }
.cart-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--gold-soft); font-size: 1.02rem; }
.cart-total strong { font-weight: 800; color: var(--gold-deep); font-size: 1.12rem; }

/* ── Sticky cart bar ──────────────────────────────────────── */
.cart-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 600px; margin: 0 auto;
  padding: 12px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l));
  background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -14px 40px -18px rgba(28,27,26,.28);
  border-radius: 18px 18px 0 0;
  transform: translateY(110%); transition: transform 380ms var(--ease-out);
}
.cart-bar.active { transform: translateY(0); }
.cart-bar-info { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .9rem; color: var(--ink); min-width: 0; }
.cart-bar-info [data-lucide] { width: 20px; height: 20px; color: var(--gold-deep); flex-shrink: 0; }
.cart-bar-total { color: var(--gold-deep); font-weight: 800; white-space: nowrap; }
body:has(.cart-bar.active) .site-wrap { padding-bottom: calc(120px + var(--safe-b)); }

/* ── Mini-site floating actions (WhatsApp contact + language) ── */
.site-fab { position: fixed; z-index: 60; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), bottom .3s var(--ease-out); }
.site-fab:active { transform: scale(.94); }
.site-fab [data-lucide] { width: 24px; height: 24px; }
.site-wa-fab { bottom: calc(20px + var(--safe-b)); inset-inline-start: 18px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, #34e07a, var(--wa-deep)); color: #fff; }
.site-wa-fab:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -12px rgba(18,140,126,.6); }
.site-wa-fab.raised { bottom: calc(96px + var(--safe-b)); }
.site-wa-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: waPulse 2.6s ease-out infinite; pointer-events: none; }
.site-lang-fab { top: calc(16px + var(--safe-t)); inset-inline-start: 16px; width: 44px; height: 44px; border-radius: 14px; background: rgba(20,18,16,.5); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }
.site-lang-fab:hover { transform: translateY(-2px); }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(52,224,122,.45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(52,224,122,0); } }

/* ── Default-artwork picker (Settings ▸ event types) ────────── */
.art-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.art-tile { aspect-ratio: 4 / 3; border-radius: 12px; border: 2px solid var(--line); background-color: var(--dark-2); background-size: cover; background-position: center; cursor: pointer; padding: 0; position: relative; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.art-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.art-tile.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ring); }
.art-tile.is-on::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.art-tile-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--surface-2); color: var(--ink-soft); font-size: .62rem; font-weight: 700; }
.art-tile-auto [data-lucide] { width: 18px; height: 18px; color: var(--gold-deep); }

/* ── Compact mini-site hero on phones (show the shop sooner) ── */
@media (max-width: 560px) {
  .site-cover { height: 150px; }
  .site-hero-body { margin-top: -46px; }
  .site-logo { width: 78px; height: 78px; border-radius: 20px; }
  .site-trust { margin-top: 12px; gap: 6px; }
  .site-trust-item { padding: 5px 10px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-wa-fab::after { animation: none; }
}

/* ── Portfolio gallery ────────────────────────────────────── */
.shop-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-gallery-item { aspect-ratio: 1; border-radius: var(--radius); background-size: cover; background-position: center; background-color: var(--surface-2); transition: transform var(--transition), box-shadow var(--transition); }
.shop-gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }
.site-about { color: var(--ink-soft); line-height: 1.75; white-space: pre-line; }

/* ── Client portal (portal.html, G.6) — premium client-facing tracking ────── */
.portal-wrap { max-width: 560px; margin: 0 auto; }
.portal-greet { font-size: var(--fs-lg); font-weight: 800; text-align: center; margin: 4px 0 20px; }
.portal-event { margin-bottom: 12px; padding: 15px 16px; }
.portal-event-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.portal-event-head strong { font-size: 1.02rem; }
.portal-progress { margin-top: 12px; }
.portal-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .82rem; font-weight: 700; margin-bottom: 6px; }
.portal-bar { height: 9px; border-radius: 999px; background: var(--surface-3, rgba(0,0,0,.07)); overflow: hidden; }
.portal-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-bright, #d5b163), var(--gold-deep)); transition: width .5s var(--ease-out); }
.portal-note { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; font-weight: 700; font-size: .86rem; }
.portal-note [data-lucide] { width: 17px; height: 17px; }
.portal-note-done { background: var(--gold-soft); color: var(--gold-deep); }
.portal-ics { margin-top: 12px; }
.portal-finance { margin-top: 18px; padding: 16px; }
.portal-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 700; }
.portal-balance strong { font-size: 1.15rem; color: var(--gold-deep); }
body[data-site-bg="dark"] .portal-greet { color: #f4efe6; }
body[data-site-bg="dark"] .portal-bar { background: rgba(255,255,255,.12); }
/* Section heads sit on the page bg — flip to light ink on the dark theme
   (portal AND mini-site share these classes). */
body[data-site-bg="dark"] .site-section-head h2 { color: #f4efe6; }
/* …but a section head INSIDE a light card (e.g. the portal finance card) must
   stay dark — cream-on-cream was the "font too light" the founder saw. */
body[data-site-bg="dark"] .card .site-section-head h2 { color: var(--ink); }
/* Empty state (e.g. portal "no events") sits directly on the dark page, not in a
   card — its default dark ink is invisible on charcoal. Lighten it. */
body[data-site-bg="dark"] .empty-state { color: #e8e2d6; }
body[data-site-bg="dark"] .empty-state h3 { color: #f4efe6; }

/* ── Studio-selected background themes ────────────────────── */
body[data-site-bg="gradient"] { background: linear-gradient(170deg, #fdf9f0 0%, var(--paper) 38%, #f4ead7 100%) fixed; }
body[data-site-bg="dark"] { background: var(--dark-grad) fixed; }
body[data-site-bg="dark"] .site-title, body[data-site-bg="dark"] .site-sub { color: #f4efe6; }
body[data-site-bg="dark"] .site-sub { opacity: .75; }
body[data-site-bg="dark"] .site-trust-item { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #e8e2d6; }
body[data-site-bg="dark"] .lang-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #e8e2d6; }
body[data-site-bg="dark"] .vertex-footer { color: #b9b2a6; }
body[data-site-bg="dark"] .cart-bar { background: rgba(33,31,29,.9); border-top-color: rgba(255,255,255,.12); }
body[data-site-bg="dark"] .cart-bar-info { color: #f4efe6; }

/* ── Checkout summary ─────────────────────────────────────── */
.co-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
.co-summary-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; font-size: .9rem; font-weight: 600; }
.co-summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--line-strong); font-weight: 800; color: var(--gold-deep); }
.co-consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 4px; color: var(--ink-soft); font-size: .82rem; line-height: 1.5; cursor: pointer; }
.co-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--gold); cursor: pointer; }
.co-consent a { color: var(--gold-ink); font-weight: 600; text-decoration: underline; }

/* ── Legal / policy pages (privacy · terms · accessibility statement) ── */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 12px; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.legal-head h1 { font-size: 1.45rem; font-weight: 800; }
.legal .card { padding: 26px 28px; }
.legal h2 { font-size: 1.06rem; color: var(--gold-ink); margin: 22px 0 8px; }
.legal .card > h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.78; font-size: .95rem; }
.legal ul { padding-inline-start: 20px; margin: 6px 0; }
.legal li { margin: 5px 0; }
.legal a { color: var(--gold-ink); font-weight: 600; }
.legal .legal-updated { color: var(--ink-dim); font-size: .84rem; margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }

/* Skip-to-content link — visible only on keyboard focus (WCAG 2.4.1) */
.skip-link { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 999;
  background: var(--gold-ink); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; font-size: .9rem; text-decoration: none; transition: top .15s ease; }
.skip-link:focus { top: 0; outline: 2px solid var(--ink); outline-offset: 2px; }

/* Footer legal links on public pages (mini-site + portal) */
.site-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 22px auto 4px; }
.site-legal-links a { color: var(--ink-dim); font-size: .82rem; font-weight: 500; text-decoration: none; }
.site-legal-links a:hover { color: var(--gold-ink); text-decoration: underline; }
body[data-site-bg="dark"] .site-legal-links a { color: rgba(255,255,255,.66); }
body[data-site-bg="dark"] .site-legal-links a:hover { color: var(--gold-hi); }

/* success badge pop */
@keyframes popIn { 0% { transform: scale(.35); opacity: 0; } 65% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.site-success-badge { animation: popIn 520ms var(--ease-out) both; }

/* ── Settings ▸ mini-site CMS editor ──────────────────────── */
.sc-bil { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.sc-gal-item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.sc-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-gal-item .btn-icon { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; background: rgba(255,255,255,.92); }

@media (max-width: 420px) {
  .shop-grid { gap: 10px; }
  .cfg-grid { grid-template-columns: 1fr; gap: 0; }
  .sc-bil { grid-template-columns: 1fr; }
}

/* ============================================================
   REFERENCE-PARITY COMPONENTS  (adopted from DAWATI / SolidFlow)
   Additive — controllers may use these; documented in DESIGN.md §11.
   ============================================================ */

/* ── Skeleton loaders [move #4, DAWATI] ───────────────────── */
@keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skeleton-block { display: flex; flex-direction: column; gap: 10px; }
.skeleton-line, .skeleton-circle {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite;
}
.skeleton-line { height: 14px; border-radius: 7px; }
.skeleton-line.short { width: 60%; } .skeleton-line.xshort { width: 35%; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }

/* ── Inline alert bars [move #9, DAWATI] ──────────────────── */
.alert-bar { padding: 12px 15px; border-radius: var(--radius); display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; line-height: 1.5; border: 1px solid transparent; }
.alert-bar [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-bar-success { background: var(--success-bg); border-color: rgba(47,143,107,.22); color: var(--success); }
.alert-bar-warning { background: var(--warning-bg); border-color: rgba(217,154,43,.22); color: var(--gold-deep); }
.alert-bar-danger  { background: var(--danger-bg);  border-color: rgba(192,82,79,.22);  color: var(--danger); }
.alert-bar-info    { background: var(--info-bg);    border-color: rgba(122,79,142,.22);  color: var(--info); }

/* ── Progress bar [move #10, DAWATI] ──────────────────────── */
.progress-bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 999px; transition: width 600ms var(--ease-out); }

/* ── Search input with leading icon [move #11, DAWATI/SolidFlow] ── */
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap .search-icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-dim); pointer-events: none; }
.search-input-wrap .form-input { padding-inline-start: 40px; }

/* ── Nav badge (counts, e.g. pending leads) [move #23, DAWATI] ── */
.nav-badge { margin-inline-start: auto; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; min-width: 18px; text-align: center; }
.tabbar .nav-item { position: relative; }
.tabbar .nav-badge { position: absolute; top: 5px; inset-inline-start: calc(50% + 8px); margin: 0; }

/* ── Segmented control (filter pills) ─────────────────────── */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button { border: none; background: none; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-soft); padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: all var(--transition); }
.segmented button.active { background: var(--card); color: var(--gold-deep); box-shadow: var(--shadow-sm); }

/* ============================================================
   SweetAlert2 overrides
   ============================================================ */
.swal-popup   { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; }
.swal-title   { font-size: 1.16rem !important; font-weight: 800 !important; color: var(--ink) !important; }
.swal-text    { color: var(--ink-soft) !important; font-size: .95rem !important; }
.swal-actions { gap: 10px !important; }
.swal-icon    { border: none !important; }

/* ============================================================
   RESPONSIVE / ADAPTIVE — all OS + all phones
   ============================================================ */

/* Tablet & below: sidebar becomes an off-canvas drawer;
   the bottom tab-bar takes over primary navigation. */
@media (max-width: 860px) {
  #sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
  #sidebar.open { transform: translateX(0); }
  html[dir="rtl"] #sidebar { transform: translateX(100%); }
  html[dir="rtl"] #sidebar.open { transform: translateX(0); }
  #main { margin-inline-start: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  #content { padding: 16px; padding-inline-start: max(16px, var(--safe-l)); padding-inline-end: max(16px, var(--safe-r)); }
  .tabbar { display: flex; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .card { padding: 18px; }
  .cal-cell { min-height: 64px; border-radius: 12px; }
}

/* Phones: single-column, bottom-sheet modals, compact chrome. */
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; padding-bottom: var(--safe-b); animation: sheetUp var(--transition-md) var(--ease-out) both; }
  .modal-header::before { content: ""; position: absolute; top: 7px; inset-inline: 0; margin: 0 auto; width: 40px; height: 4px; border-radius: 3px; background: var(--line-strong); }
  .modal-header { padding-top: 20px; }
  .modal-footer { position: sticky; bottom: 0; background: var(--card); }
  .modal-footer .btn { flex: 1; }
  .cal-wd-row { gap: 5px; }
  .cal-cells { gap: 5px; }
  .kpi-card { gap: 12px; }
  .btn { padding: 11px 16px; }
}

/* Very small phones */
@media (max-width: 360px) {
  #content { padding: 12px; }
  .tabbar .nav-item { font-size: 0; gap: 0; }   /* icon-only on tiny screens */
  .tabbar .nav-item [data-lucide] { width: 23px; height: 23px; }
}

/* Landscape phones / short viewports — reclaim vertical space */
@media (max-height: 480px) and (orientation: landscape) {
  #view-login { justify-content: flex-start; }
  .auth-card { padding: 24px 26px; }
  .empty-state { padding: 28px 20px; }
}

/* Desktop-only: hide the mobile menu button */
@media (min-width: 861px) { #menu-toggle { display: none; } }

#sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(28, 27, 26, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 90; }
#sidebar-backdrop.active { display: block; animation: fadeIn var(--transition) both; }

/* Coarse pointer (touch): guarantee comfortable hit targets */
@media (pointer: coarse) {
  .btn-icon { min-width: 44px; min-height: 44px; }
  .cal-chip { width: 28px; height: 28px; }
  .tab { padding-block: 13px; }
}

/* Installed PWA / standalone: the OS chrome is gone — lean on safe-area */
@media (display-mode: standalone) {
  #topbar { padding-top: calc(var(--safe-t) + 2px); }
}

/* Respect reduced-motion (accessibility, battery) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .card:hover, .list-item:hover, .cal-cell:hover, .btn:hover { transform: none; }
}

/* High-contrast preference — firm up borders */
@media (prefers-contrast: more) {
  :root { --line: #cdbf9f; --line-strong: #b8a678; --ink-soft: #46433f; }
  .btn, .card, .form-input, .form-select, .form-textarea { border-width: 1.5px; }
}

/* Feature fallbacks for older engines */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #topbar, .tabbar { background: var(--paper); }
}
@supports not (height: 100dvh) {
  #app-shell, .view-fullscreen { min-height: 100vh; }
}

/* ============================================================
   LEAD CLIENT-NOTE (leads inbox) — note the client typed at checkout.
   Additive; documented in DESIGN.md §5.
   ============================================================ */
.lead-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 10px; padding: 11px 14px;
  background: linear-gradient(140deg, var(--gold-soft), #fffdf8);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.lead-note [data-lucide] { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--gold-deep); }
.lead-note strong { display: block; font-size: .74rem; font-weight: 800; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.lead-note p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; white-space: pre-line; word-break: break-word; }

/* Mobile-parity details [moves #14, DAWATI]: kill the 300ms tap delay,
   wrap long Arabic/Hebrew in cells, and keep SweetAlert inside the screen. */
@media (max-width: 860px) {
  button, a, .btn, .btn-icon, .nav-item, .tab, .list-item, .site-pkg { touch-action: manipulation; }
  .table td, .table th { word-break: break-word; overflow-wrap: anywhere; }
  .swal2-popup { width: calc(100vw - 24px) !important; max-width: 420px !important; box-sizing: border-box !important; }
}

/* ============================================================
   v3.4 "Atelier · Alive" — expressive motion pass (WOW layer).
   All additive: entrance choreography, luxury glints, tactile
   micro-interactions. Every animation is transform/opacity only
   (GPU-friendly) and fully neutralised by the global
   prefers-reduced-motion rule above. Documented in DESIGN.md §11.
   ============================================================ */

/* ── Studio-font hook (mini-site CMS font picker) ─────────────
   site.js applyFont() sets --font-body on <html>; consume it here.
   SF-Numerals stays FIRST (Arabic-digit guard). Falls back to the
   exact original stacks when --font-body is unset (app pages). */
body { font-family: 'SF-Numerals', var(--font-body, 'Heebo'), 'Assistant', 'Noto Sans Arabic', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; }
html[lang="ar"] body { font-family: 'SF-Numerals', var(--font-body, 'Noto Sans Arabic'), 'Heebo', 'Segoe UI', system-ui, Arial, sans-serif; }

/* ── Mini-site hero: entrance choreography ────────────────── */
@keyframes heroCoverIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes heroPop { 0% { opacity: 0; transform: translateY(14px) scale(.85); } 60% { opacity: 1; transform: translateY(-2px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.site-hero .site-cover  { animation: heroCoverIn 640ms var(--ease-out) both; }
.site-hero .site-logo   { animation: heroPop 620ms var(--ease-out) 140ms both; }
.site-hero .site-title  { animation: viewEnter var(--transition-md) 260ms both; }
.site-hero .site-sub    { animation: viewEnter var(--transition-md) 340ms both; }
.site-hero .site-trust .site-trust-item { animation: viewEnter var(--transition-md) both; }
.site-hero .site-trust .site-trust-item:nth-child(1) { animation-delay: 430ms; }
.site-hero .site-trust .site-trust-item:nth-child(2) { animation-delay: 500ms; }
.site-hero .site-trust .site-trust-item:nth-child(3) { animation-delay: 570ms; }
.site-trust-item { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.site-trust-item:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-md); }

/* luxury glint sweeping across the hero cover every few seconds */
@keyframes coverGlint { 0% { inset-inline-start: -70%; opacity: 0; } 6% { opacity: 1; } 30% { inset-inline-start: 150%; opacity: 0; } 100% { inset-inline-start: 150%; opacity: 0; } }
.site-cover::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; inset-inline-start: -70%; width: 45%;
  transform: skewX(-16deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: coverGlint 7s ease-in-out 1.4s infinite;
}

/* ── Shop cards: staggered entrance + playful hover ───────── */
.shop-grid .shop-card { animation: viewEnter var(--transition-md) both; }
.shop-grid .shop-card:nth-child(2) { animation-delay: 50ms; }
.shop-grid .shop-card:nth-child(3) { animation-delay: 100ms; }
.shop-grid .shop-card:nth-child(4) { animation-delay: 150ms; }
.shop-grid .shop-card:nth-child(5) { animation-delay: 200ms; }
.shop-grid .shop-card:nth-child(6) { animation-delay: 250ms; }
.shop-grid .shop-card:nth-child(7) { animation-delay: 300ms; }
.shop-grid .shop-card:nth-child(8) { animation-delay: 350ms; }
.shop-card-cta [data-lucide] { transition: transform var(--transition-md); }
.shop-card:hover .shop-card-cta [data-lucide] { transform: rotate(90deg); }
/* glossy shine sweeping over the product image on hover */
.shop-card-img::before {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -70%; width: 50%; z-index: 1;
  transform: skewX(-18deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  opacity: 0; transition: inset-inline-start .55s var(--ease-out), opacity .2s;
}
.shop-card:hover .shop-card-img::before { inset-inline-start: 150%; opacity: 1; }

/* ── Package tick pop when selected ───────────────────────── */
@keyframes tickPop { 0% { transform: scale(.3); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.pkg-card.is-on .pkg-card-tick { animation: tickPop 300ms var(--ease-out); }
.pkg-card:active { transform: scale(.99); }

/* ── Cart bar: springy entrance + gold hairline + bag swing ── */
.cart-bar { transition: transform 560ms cubic-bezier(.28, 1.3, .5, 1); }
.cart-bar::before { content: ""; position: absolute; top: 0; inset-inline: 14%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .75; }
@keyframes bagSwing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-13deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }
.cart-bar.active .cart-bar-info [data-lucide] { animation: bagSwing .75s var(--ease-out) .5s; }

/* ── Success: gold confetti burst + ring ripple ───────────── */
.site-success { overflow: hidden; }
.site-success::before {
  content: ""; position: absolute; top: 74px; inset-inline-start: calc(50% - 4px);
  width: 7px; height: 11px; border-radius: 2px; background: var(--gold); pointer-events: none;
  box-shadow:
    -74px -34px 0 var(--gold-hi), 62px -46px 0 var(--gold-deep), -118px 8px 0 var(--success),
    118px -6px 0 var(--gold), -40px -70px 0 var(--gold-deep), 44px -78px 0 var(--gold-hi),
    -150px -40px 0 var(--gold), 148px -44px 0 var(--gold-hi), -96px -78px 0 var(--gold),
    96px -84px 0 var(--success), 0 -96px 0 var(--gold-deep), 170px 16px 0 var(--gold-soft), -170px 20px 0 var(--gold-soft);
  animation: confettiBurst 1.5s var(--ease-out) .18s both;
}
@keyframes confettiBurst {
  0% { transform: translateY(6px) scale(.25) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(30px) scale(1.15) rotate(160deg); opacity: 0; }
}
.site-success-badge { position: relative; }
.site-success-badge::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; animation: ringRipple 950ms var(--ease-out) .25s both; }
@keyframes ringRipple { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }

/* ── Scroll-driven reveals (progressive enhancement) ──────── */
@supports (animation-timeline: view()) {
  #site-form-root .site-section.reveal, .shop-gallery-item {
    animation-name: viewEnter; animation-duration: auto; animation-timing-function: linear;
    animation-delay: 0s; animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 40%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #site-form-root .site-section.reveal, .shop-gallery-item { animation: none !important; }
}

/* ── Portfolio gallery: gold ring on hover ────────────────── */
.shop-gallery-item:hover { box-shadow: var(--shadow-md), inset 0 0 0 2px var(--gold-ring); }

/* ── Gold CTA: idle sheen draws the eye to the main action ── */
@keyframes goldIdleSheen { 0%, 72% { inset-inline-start: -60%; opacity: 0; } 78% { opacity: .9; } 94%, 100% { inset-inline-start: 140%; opacity: 0; } }
.btn-gold.btn-block::after { animation: goldIdleSheen 5.4s ease-in-out 2s infinite; }
.btn-gold.btn-block:hover::after { animation: none; }

/* ── Login hero: drifting glow + liquid-gold accent bar ───── */
@keyframes blobDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-36px, -30px) scale(1.12); } }
#view-login::after { animation: blobDrift 9s ease-in-out infinite alternate; }
@keyframes goldFlow { to { background-position: -300% 0; } }
.auth-card::before { background: linear-gradient(90deg, var(--gold-hi), var(--gold), var(--gold-deep), var(--gold), var(--gold-hi)); background-size: 300% 100%; animation: goldFlow 8s linear infinite; }

/* ── App micro-delights ───────────────────────────────────── */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.empty-state [data-lucide] { animation: floatY 3.4s ease-in-out infinite; }
.kpi-card > [data-lucide], .kpi-card > svg { transition: transform var(--transition-md); }
.kpi-card:hover > [data-lucide], .kpi-card:hover > svg { transform: rotate(-5deg) scale(1.08); }

/* ── Bottom-sheet: gentle spring on phones ────────────────── */
@keyframes sheetSpring { 0% { transform: translateY(100%); } 70% { transform: translateY(-1.5%); } 100% { transform: translateY(0); } }
@media (max-width: 560px) {
  .modal { animation: sheetSpring 420ms var(--ease-out) both; }
}

/* ============================================================
   v3.5 "Atelier · Week" — WEEKLY CALENDAR (.calw-*)
   Visual reference: Shift Manager renderMatrix() (sticky day
   headers, glowing "today" pill, rounded state-glow cells) —
   rebuilt in Vanilla CSS on the Atelier palette. 7 RTL columns
   (Sunday = rightmost); stacked day-waterfall on phones.
   Additive block — documented in DESIGN.md §5 + §11.
   ============================================================ */
.calw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; align-items: stretch; }
.calw-col {
  display: flex; flex-direction: column; gap: 7px; min-height: 340px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 7px; box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.calw-col:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.calw-head { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 12px; background: var(--surface-2); transition: background var(--transition); }
.calw-dow  { font-size: .78rem; font-weight: 800; color: var(--ink-soft); letter-spacing: .03em; }
.calw-dnum { font-size: .72rem; font-weight: 600; color: var(--ink-dim); }
/* today = glowing gold pill (SH "today" look, Atelier gold) */
.calw-col.is-today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-ring), var(--shadow-md); }
.calw-col.is-today .calw-head { background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); box-shadow: var(--shadow-glow); }
.calw-col.is-today .calw-dow, .calw-col.is-today .calw-dnum { color: #fff; }
.calw-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* event / meeting chip — time + type icon + client name, tinted by .st-* / .cal-meet */
.calw-ev {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border: none; font: inherit; text-align: start; cursor: pointer;
  padding: 7px 8px; min-height: 34px; border-radius: 10px;
  font-size: .78rem; font-weight: 700; line-height: 1.25;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.calw-ev:hover { transform: translateY(-1px); filter: saturate(1.15) brightness(1.02); box-shadow: var(--shadow-md); }
.calw-ev:active { transform: scale(.97); }
.calw-ev [data-lucide], .calw-ev svg { width: 14px; height: 14px; flex-shrink: 0; }
.calw-ev-time { font-size: .68rem; font-weight: 800; opacity: .85; flex-shrink: 0; min-width: 30px; }
.calw-ev-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* "+N more" pill */
.calw-more { align-self: center; border: none; background: var(--surface-2); color: var(--ink-soft); font: inherit; font-size: .74rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background var(--transition), color var(--transition); }
.calw-more:hover { background: var(--gold-soft); color: var(--gold-deep); }
/* empty-day affordance — dashed "+" (SH empty-cell plus) */
.calw-empty-hint { border: 1.5px dashed var(--line); border-radius: 10px; min-height: 38px; flex: 1; max-height: 74px; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); opacity: .55; transition: opacity var(--transition), border-color var(--transition), color var(--transition); }
.calw-empty-hint [data-lucide], .calw-empty-hint svg { width: 17px; height: 17px; }
.calw-col:hover .calw-empty-hint { opacity: 1; border-color: var(--gold); color: var(--gold-deep); }
/* staggered column entrance (quiet, transform/opacity only) */
.calw-grid .calw-col { animation: viewEnter var(--transition-md) both; }
.calw-grid .calw-col:nth-child(2) { animation-delay: 30ms; }
.calw-grid .calw-col:nth-child(3) { animation-delay: 60ms; }
.calw-grid .calw-col:nth-child(4) { animation-delay: 90ms; }
.calw-grid .calw-col:nth-child(5) { animation-delay: 120ms; }
.calw-grid .calw-col:nth-child(6) { animation-delay: 150ms; }
.calw-grid .calw-col:nth-child(7) { animation-delay: 180ms; }

/* Tablet: 7 columns get tight — compact chips */
@media (max-width: 1060px) and (min-width: 861px) {
  .calw-ev-time { display: none; }
  .calw-col { padding: 5px; }
}
/* Phones/tablets ≤860px: stacked day waterfall (chosen over horizontal
   scroll — better for touch data-entry, zero unintended overflow) */
@media (max-width: 860px) {
  .calw-grid { grid-template-columns: 1fr; gap: 10px; }
  .calw-col { min-height: 0; }
  .calw-head { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; }
  .calw-dow { font-size: .84rem; }
  .calw-dnum { font-size: .8rem; }
  .calw-ev { min-height: 44px; font-size: .86rem; padding: 9px 11px; }
  .calw-ev [data-lucide], .calw-ev svg { width: 16px; height: 16px; }
  .calw-ev-time { font-size: .76rem; min-width: 36px; }
  .calw-empty-hint { min-height: 30px; max-height: 30px; }
}
/* Touch: comfortable hit targets on every pointer:coarse device */
@media (pointer: coarse) {
  .calw-ev { min-height: 44px; }
  .calw-more { min-height: 36px; }
}
/* Reduced motion: neutralise week-view lifts (durations already killed) */
@media (prefers-reduced-motion: reduce) {
  .calw-col:hover, .calw-ev:hover { transform: none; }
  .calw-grid .calw-col { animation: none; }
}

/* ── UX-B polish (additive): clickable KPIs + card-title icons ── */
.kpi-card.card-interactive:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.card-title [data-lucide], .card-title svg { width: 19px; height: 19px; vertical-align: -3px; color: var(--gold-deep); }

/* ══ APP ACCENT THEMES (Settings ▸ branding ▸ ערכת צבעים, 03/07/2026) ══
   body[data-app-theme] re-tints the gold accent FAMILY only — paper, ink and
   the charcoal sidebar stay. Default (gold) = attribute absent. The picker +
   persistence live in settings.js (APP_THEMES); applied at login in main.js. */
body[data-app-theme="emerald"]  { --gold:#2f9e6e; --gold-deep:#227a52; --gold-bright:#4dbb8a; --gold-hi:#a4e3c4; --gold-soft:#e4f4ec; --gold-ring:rgba(47,158,110,.28);  --accent-rgb:47,158,110;  --shadow-glow:0 0 18px rgba(47,158,110,.28); }
body[data-app-theme="ocean"]    { --gold:#3d7fc9; --gold-deep:#2b5f9e; --gold-bright:#5f9ad9; --gold-hi:#b3d0ef; --gold-soft:#e6eef8; --gold-ring:rgba(61,127,201,.28);  --accent-rgb:61,127,201;  --shadow-glow:0 0 18px rgba(61,127,201,.28); }
body[data-app-theme="rose"]     { --gold:#c05a72; --gold-deep:#9c3f55; --gold-bright:#d67c90; --gold-hi:#f0bcc8; --gold-soft:#f9e8ec; --gold-ring:rgba(192,90,114,.28);  --accent-rgb:192,90,114;  --shadow-glow:0 0 18px rgba(192,90,114,.28); }
body[data-app-theme="violet"]   { --gold:#7d5fc0; --gold-deep:#5f449c; --gold-bright:#9a7fd4; --gold-hi:#cfc0ec; --gold-soft:#efe9f8; --gold-ring:rgba(125,95,192,.28);  --accent-rgb:125,95,192;  --shadow-glow:0 0 18px rgba(125,95,192,.28); }
body[data-app-theme="graphite"] { --gold:#667180; --gold-deep:#4b545f; --gold-bright:#8892a0; --gold-hi:#c3cad3; --gold-soft:#ebeef1; --gold-ring:rgba(102,113,128,.28); --accent-rgb:102,113,128; --shadow-glow:0 0 18px rgba(102,113,128,.28); }

/* ══════════════════════════════════════════════════════════════
   EVENT MODAL "Atelier" (v3.15) — .evm-* readable layout for the
   calendar event details (founder: "לסדר כך שיראה נוח לעיין").
   Additive only; reuses tokens. RTL-safe via logical properties.
   ══════════════════════════════════════════════════════════════ */
.evm .modal-body { display: flex; flex-direction: column; gap: 14px; }

.evm-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold-soft), var(--surface, #fff));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.evm-ic {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb, 193,154,75), .55);
}
.evm-ic svg { width: 22px; height: 22px; }
.evm-type { font-weight: 800; font-size: 1.06rem; letter-spacing: .01em; }
.evm-when { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: .86rem; margin-top: 2px; }
.evm-when svg { width: 14px; height: 14px; }

.evm-client {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--surface, #fff); border: 1px solid var(--border);
}
.evm-avatar {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-deep);
  font-weight: 800; font-size: 1rem;
}

.evm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.evm-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--surface, #fff); border: 1px solid var(--border);
  min-width: 0;
}
.evm-cell-label { font-size: .74rem; color: var(--ink-dim); }
.evm-cell-val { font-weight: 600; font-size: .92rem; overflow-wrap: break-word; }

.evm-sec {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; color: var(--gold-deep);
  letter-spacing: .04em; margin-bottom: -6px;
}
.evm-sec svg { width: 15px; height: 15px; }

.evm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.evm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: .82rem;
  background: var(--gold-soft); color: var(--ink);
  border: 1px solid var(--border);
}
.evm-chip svg { width: 13px; height: 13px; color: var(--gold-deep); }

.evm-pkgs { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.evm-pkg {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface, #fff);
}
.evm-pkg + .evm-pkg { border-top: 1px solid var(--border); }
.evm-pkg-price { font-weight: 700; white-space: nowrap; }
.evm-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 12px; border-top: 1px solid var(--border);
  background: linear-gradient(135deg, var(--gold-soft), transparent);
  font-size: 1.02rem;
}
.evm-total strong { color: var(--gold-deep); font-size: 1.08rem; }

/* ── Production board v2 (list + client accordions, v3.16) ──── */
.prod-controls { margin-bottom: 14px; }
.prod-controls .search-input-wrap { margin-bottom: 10px; }
.prod-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prod-list { display: flex; flex-direction: column; gap: 8px; }
.prod-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.prod-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 4px 14px -6px rgba(0,0,0,.12)); border-color: var(--gold); }
.prod-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.prod-row.is-done { opacity: .78; }
.prod-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.prod-row-main .muted { font-size: .84rem; }
.prod-row-stage { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.prod-mini-bar { width: 96px; height: 5px; border-radius: 999px; background: var(--gold-soft); overflow: hidden; }
.prod-mini-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.prod-row-chev { width: 17px; height: 17px; color: var(--ink-dim); flex: 0 0 auto; }
[dir="rtl"] .prod-row-chev { transform: none; }

.prod-acc { border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff); margin-top: 8px; overflow: hidden; }
.prod-acc-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: start;
}
.prod-acc-head:hover { background: var(--gold-soft); }
.prod-acc-chev { width: 16px; height: 16px; color: var(--ink-dim); transition: transform .18s ease; flex: 0 0 auto; }
.prod-acc.open .prod-acc-chev { transform: rotate(180deg); }
.prod-acc.open > .prod-acc-head { border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--gold-soft), transparent); }
.prod-acc-body { padding: 12px; }

@media (max-width: 640px) {
  .prod-row { flex-wrap: wrap; }
  .prod-row-stage { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .prod-row, .prod-acc-chev { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Venue on scanning surfaces (v3.21)
   The shoot's location is a studio custom field, so it used to live only inside
   the full event modal — the dashboard, month/week/list calendar and day sheet
   all left the photographer with no idea where to drive. Additive only.
   ══════════════════════════════════════════════════════════════ */
/* Inline venue for list rows: dashboard shoots, calendar day sheet. */
.ev-where { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ev-where [data-lucide], .ev-where svg { width: 12px; height: 12px; opacity: .8; flex-shrink: 0; }

/* Week chip: venue wraps onto its own line under the client name. */
.calw-ev { flex-wrap: wrap; }
.calw-ev-where {
  flex-basis: 100%; display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: .68rem; font-weight: 600; opacity: .78;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calw-ev-where [data-lucide], .calw-ev-where svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Tablet keeps 7 tight columns (time is already hidden there) — no room. */
@media (max-width: 1060px) and (min-width: 861px) { .calw-ev-where { display: none; } }
/* Stacked waterfall on phones is full-width, so the venue reads comfortably. */
@media (max-width: 860px) { .calw-ev-where { font-size: .76rem; } }