/* Global reset: border-box everywhere + drop the UA body margin (the studio shell
   fills the viewport, and centered legacy pages don't need the 8px gutter). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
/* Gradient set via background-IMAGE (longhand) so it never resets background-color to transparent.
   The macOS elastic overscroll strip is filled by the solid background-color only (a fixed image is
   clipped to the viewport), so background-color is what keeps that strip from rubber-banding white. */
html, body {
  min-height: 100%;
  /* Kill the macOS elastic overscroll entirely: no rubber-band strip is revealed, so nothing can
     flash white (nor need a gutter colour). The studio is already a fixed 100vh, non-scrolling shell. */
  overscroll-behavior: none;
  background-image: linear-gradient(180deg, var(--app-panel) 0%, var(--app-panel-2) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--app-panel-2);
}

/* ============================================================================
   4Brik APP DESIGN SYSTEM - "studio créatif immersif" (4BRIK-37).
   Autonomous token layer for the client space + builder shell. INDEPENDENT
   from the back-office --ds-* system: its own primitives, palettes and fonts.

   Layers (only the SEMANTIC layer --app-* is consumed by components):
     fonts · primitives · semantic (dark-first) · schemes (light/dark/auto) · palettes
   Axes are orthogonal: [data-app-scheme] (light/dark/auto) and
   [data-app-palette] (accent catalogue) remap the same semantic roles.

   DS-0 scope: tokens ONLY. No `color-scheme`, no rules on body/components yet,
   so the existing sober `.cs`/`.auth` pages are untouched until the shell (INC-1)
   scopes and consumes these tokens. The AI accent (--app-ai) is fixed and never
   follows the palette.
   ============================================================================ */

/* ---- Fonts (self-hosted woff2 already in assets/fonts/, shared catalogue) ---- */
@font-face{ font-family:"Cabinet Grotesk"; src:url("../fonts/cabinet-grotesk/cabinet-grotesk-m7Kp7-p.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Satoshi"; src:url("../fonts/satoshi/satoshi-q0hK3j7.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("../fonts/jetbrains-mono/jetbrains-mono-qI6BF9f.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }

/* ---- Primitives (abstract scales; renamed roles map onto these) ---- */
:root{
  /* warm neutral ramp (darkroom studio → warm paper) */
  --app-warm-950:#060504; --app-warm-900:#0B0A09; --app-warm-850:#131210;
  --app-warm-800:#1A1815; --app-warm-750:#222019; --app-warm-700:#2E2B24;
  --app-warm-650:#221F19; --app-warm-500:#6E695E; --app-warm-400:#A39C8E;
  --app-warm-300:#D8D2C4; --app-warm-200:#E7E1D3; --app-warm-150:#ECE7DA;
  --app-warm-100:#F6F2E9; --app-paper:#FBF8F1; --app-white:#FFFFFF;
  --app-ink-900:#211E17; --app-ink-600:#6B6455; --app-ink-400:#A79F8D;

  /* AI accent = the app accent (brand). No violet anywhere in the app UI (buttons, icons,
     text): the AI affordances follow the chosen palette like everything else. Late-bound
     var() so palette changes flow through. */
  --app-ai:var(--app-brand); --app-ai-2:var(--app-brand-hover); --app-ai-weak:var(--app-brand-weak);
  --app-ai-ink:var(--app-brand-ink);

  /* semantic status hues */
  --app-good:#5FB98A; --app-warn:#E0A23A; --app-crit:#E5674E; --app-info:#4C8DF0;

  /* typographic scale */
  --app-text-xs:.72rem; --app-text-sm:.82rem; --app-text-base:.9rem;
  --app-text-md:1rem; --app-text-lg:1.15rem; --app-text-xl:1.4rem;
  --app-text-2xl:1.9rem; --app-text-3xl:2.4rem;

  /* spacing scale */
  --app-space-1:.25rem; --app-space-2:.5rem; --app-space-3:.75rem;
  --app-space-4:1rem; --app-space-5:1.5rem; --app-space-6:2rem; --app-space-8:3rem;

  /* radii, shadows, motion, z-index */
  --app-r-sm:4px; --app-r-md:6px; --app-r-lg:9px; --app-r-pill:999px;
  --app-shadow-panel:0 16px 44px -16px rgba(0,0,0,.72);
  --app-shadow-win:0 30px 70px -18px rgba(0,0,0,.8);
  --app-shadow-artboard:0 2px 6px rgba(0,0,0,.5), 0 18px 40px -8px rgba(0,0,0,.6), 0 48px 110px -30px rgba(0,0,0,.75);
  --app-dur-fast:.12s; --app-dur-base:.18s; --app-dur-slow:.3s;
  --app-ease:cubic-bezier(.2,.8,.3,1);
  --app-z-panel:20; --app-z-tools:30; --app-z-status:40; --app-z-menu:60;
  --app-z-scrim:90; --app-z-window:95; --app-z-toast:120;

  /* fonts */
  --app-font-display:"Cabinet Grotesk","Satoshi",system-ui,sans-serif;
  --app-font-sans:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --app-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

/* ---- Semantic roles (dark-first defaults; the ONLY layer components consume) ---- */
:root{
  --app-workspace:var(--app-warm-950);
  --app-ground:var(--app-warm-900);
  --app-panel:var(--app-warm-800);
  --app-panel-2:var(--app-warm-850);
  --app-control:var(--app-warm-750);
  --app-control-hover:#2C2921;
  --app-line:var(--app-warm-700);
  --app-line-soft:var(--app-warm-650);
  --app-text:#F2EEE6;
  --app-text-muted:var(--app-warm-400);
  --app-text-faint:var(--app-warm-500);
  --app-artboard:var(--app-white);
  --app-overlay:color-mix(in srgb, var(--app-warm-950) 34%, transparent);
  --app-focus:var(--app-brand);
  /* brand role = current palette (defaults to amber below) */
  --app-brand:#F5B841; --app-brand-hover:#FFCB5C; --app-brand-ink:#241A06; --app-brand-weak:rgba(245,184,65,.14);
  /* status roles (from primitives, scheme-stable) */
  --app-state-good:var(--app-good); --app-state-warn:var(--app-warn); --app-state-crit:var(--app-crit);
  /* Builder hover frame colours, one per level (section / container / block). */
  --app-ov-sec:var(--app-brand); --app-ov-cnt:var(--app-info); --app-ov-blk:var(--app-good);
  --app-st-sec:#F0E4CB;   --app-st-sec-2:#E2D0AC;   --app-st-sec-ink:#2A2419;
  --app-st-cnt:#C7D9B2;   --app-st-cnt-2:#A8C08E;   --app-st-cnt-ink:#2A2419;
  --app-st-blk:#443F35;   --app-st-blk-2:#302C25;   --app-st-blk-ink:#F2EEE6;
  --app-st-global:var(--app-brand);
  --app-st-global-2:color-mix(in srgb, var(--app-brand) 88%, #000);
  --app-st-global-ink:var(--app-brand-ink);
}

/* ---- Schemes: light overrides (auto = OS light + explicit toggle) ---- */
@media (prefers-color-scheme:light){
  :root:not([data-app-scheme]){
    --app-workspace:var(--app-warm-200); --app-ground:var(--app-warm-100);
    --app-panel:var(--app-white); --app-panel-2:var(--app-paper);
    --app-control:#F2EEE4; --app-control-hover:#E9E3D5;
    --app-line:var(--app-warm-300); --app-line-soft:var(--app-warm-150);
    --app-text:var(--app-ink-900); --app-text-muted:var(--app-ink-600); --app-text-faint:var(--app-ink-400);
    --app-shadow-panel:0 14px 40px -18px rgba(60,50,20,.4);
    --app-shadow-win:0 26px 60px -20px rgba(60,50,20,.45);
    --app-shadow-artboard:0 2px 6px rgba(60,50,20,.28), 0 18px 40px -8px rgba(60,50,20,.34), 0 48px 110px -30px rgba(60,50,20,.42);
  }
}
[data-app-scheme="light"]{
  --app-workspace:var(--app-warm-200); --app-ground:var(--app-warm-100);
  --app-panel:var(--app-white); --app-panel-2:var(--app-paper);
  --app-control:#F2EEE4; --app-control-hover:#E9E3D5;
  --app-line:var(--app-warm-300); --app-line-soft:var(--app-warm-150);
  --app-text:var(--app-ink-900); --app-text-muted:var(--app-ink-600); --app-text-faint:var(--app-ink-400);
  --app-shadow-panel:0 14px 40px -18px rgba(60,50,20,.4);
  --app-shadow-win:0 26px 60px -20px rgba(60,50,20,.45);
  --app-shadow-artboard:0 2px 6px rgba(60,50,20,.28), 0 18px 40px -8px rgba(60,50,20,.34), 0 48px 110px -30px rgba(60,50,20,.42);
}
/* [data-app-scheme="dark"] == the :root defaults above (explicit dark override) */

/* ---- Palettes: accent catalogue (amber default). Scheme & palette are orthogonal. ---- */
/* dark accents */
[data-app-palette="amber"]     { --app-brand:#F5B841; --app-brand-hover:#FFCB5C; --app-brand-ink:#241A06; --app-brand-weak:rgba(245,184,65,.14); }
[data-app-palette="terracotta"]{ --app-brand:#EC7A52; --app-brand-hover:#FF9169; --app-brand-ink:#2A1206; --app-brand-weak:rgba(236,122,82,.15); }
[data-app-palette="sage"]      { --app-brand:#7CC79A; --app-brand-hover:#98DCB4; --app-brand-ink:#082110; --app-brand-weak:rgba(124,199,154,.15); }
[data-app-palette="teal"]      { --app-brand:#3FC9C2; --app-brand-hover:#5FE0D9; --app-brand-ink:#042220; --app-brand-weak:rgba(63,201,194,.15); }
[data-app-palette="magenta"]   { --app-brand:#F0699C; --app-brand-hover:#FF88B4; --app-brand-ink:#2A0716; --app-brand-weak:rgba(240,105,156,.16); }
/* light accents (explicit toggle) */
[data-app-scheme="light"][data-app-palette="amber"]     { --app-brand:#A5720C; --app-brand-hover:#8C6109; --app-brand-ink:#fff; --app-brand-weak:rgba(165,114,12,.12); }
[data-app-scheme="light"][data-app-palette="terracotta"]{ --app-brand:#BC4E2A; --app-brand-hover:#A2411F; --app-brand-ink:#fff; --app-brand-weak:rgba(188,78,42,.12); }
[data-app-scheme="light"][data-app-palette="sage"]      { --app-brand:#358056; --app-brand-hover:#2B6C48; --app-brand-ink:#fff; --app-brand-weak:rgba(53,128,86,.12); }
[data-app-scheme="light"][data-app-palette="teal"]      { --app-brand:#137F79; --app-brand-hover:#0E6C67; --app-brand-ink:#fff; --app-brand-weak:rgba(19,127,121,.12); }
[data-app-scheme="light"][data-app-palette="magenta"]   { --app-brand:#BB2F63; --app-brand-hover:#A02753; --app-brand-ink:#fff; --app-brand-weak:rgba(187,47,99,.12); }
/* light accents (auto = OS light, no explicit toggle) */
@media (prefers-color-scheme:light){
  [data-app-palette="amber"]:not([data-app-scheme])     { --app-brand:#A5720C; --app-brand-hover:#8C6109; --app-brand-ink:#fff; --app-brand-weak:rgba(165,114,12,.12); }
  [data-app-palette="terracotta"]:not([data-app-scheme]){ --app-brand:#BC4E2A; --app-brand-hover:#A2411F; --app-brand-ink:#fff; --app-brand-weak:rgba(188,78,42,.12); }
  [data-app-palette="sage"]:not([data-app-scheme])      { --app-brand:#358056; --app-brand-hover:#2B6C48; --app-brand-ink:#fff; --app-brand-weak:rgba(53,128,86,.12); }
  [data-app-palette="teal"]:not([data-app-scheme])      { --app-brand:#137F79; --app-brand-hover:#0E6C67; --app-brand-ink:#fff; --app-brand-weak:rgba(19,127,121,.12); }
  [data-app-palette="magenta"]:not([data-app-scheme])   { --app-brand:#BB2F63; --app-brand-hover:#A02753; --app-brand-ink:#fff; --app-brand-weak:rgba(187,47,99,.12); }
}

/*
 * Client-space + authentication chrome - deliberately sober and neutral.
 * SUPERSEDED PROGRESSIVELY by the --app-* design system above as the studio
 * shell is rolled out (INC-1+). Scoped under `.cs` (client space) and `.auth`
 * (pre-auth) so nothing leaks into the builder canvas or tenant themes.
 */
.cs, .auth {
    --cs-max-width: 1180px;
    --cs-fg: #111827;
    --cs-muted: #6b7280;
    --cs-bg: #ffffff;
    --cs-bg-alt: #f9fafb;
    --cs-border: #e5e7eb;
    --cs-accent: #1d4ed8;

    color: var(--cs-fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/* Client-space header ------------------------------------------------------ */
.cs-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-bg);
}
.cs-logo { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.cs-nav { display: flex; gap: 0.9rem; flex-wrap: wrap; flex: 1; }
.cs-nav a { text-decoration: none; color: var(--cs-muted); }
.cs-nav a:hover { color: var(--cs-fg); }
.cs-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.cs-actions a { text-decoration: none; color: var(--cs-muted); }
.cs-actions a:hover { color: var(--cs-fg); }

.cs-main {
    max-width: var(--cs-max-width);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

.cs-footer {
    border-top: 1px solid var(--cs-border);
    max-width: var(--cs-max-width);
    margin: 2rem auto 0;
    padding: 1.5rem 1.25rem;
}
.cs-footer__rights { color: var(--cs-muted); margin: 0; font-size: 0.9rem; }

/* Impersonation banner (shared) ------------------------------------------- */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.9rem;
}
.impersonation-banner form { margin: 0; }

/* Pre-auth chrome ---------------------------------------------------------- */
.auth-header {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.25rem 0;
}
.auth-logo { font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.auth-main {
    max-width: 28rem;
    margin: 2rem auto;
    padding: 0 1.25rem;
}
.auth-footer {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.auth-footer__rights { color: var(--cs-muted); margin: 0; font-size: 0.85rem; }
.auth-footer__back { margin: 0 0 0.5rem; }
.auth-footer__back a { color: var(--cs-muted); text-decoration: none; }
.auth-footer__back a:hover { color: var(--cs-fg); }
.auth-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.auth-links a { color: var(--cs-accent); text-decoration: none; }

/* Forms (theme classes + raw controls) ------------------------------------ */
.cs .field,
.auth .field { margin: 0 0 1rem; }
.cs .field__label:where(:not(.builder-block__preview *)),
.auth .field__label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.92rem; }
.cs .field__help:where(:not(.builder-block__preview *)),
.auth .field__help { display: block; margin-top: 0.3rem; color: var(--cs-muted); font-size: 0.85rem; }
.cs .field__errors:where(:not(.builder-block__preview *)),
.auth .field__errors { list-style: none; margin: 0.35rem 0 0; padding: 0; color: #b91c1c; font-size: 0.88rem; }
.cs .field__error:where(:not(.builder-block__preview *)),
.auth .field__error { display: flex; align-items: flex-start; gap: 0.3rem; }
.cs .field__error-icon:where(:not(.builder-block__preview *)),
.auth .field__error-icon { width: 1em; height: 1em; flex: none; margin-top: 0.12em; }

/* Controls: theme class + raw inputs inside the chrome. NOT gated on being inside a <form>: every
   input/select/textarea in the app or auth surfaces gets the same DS chrome, including controls
   rendered outside a form (Live components, standalone fields). Same scope as the size rule below. */
.cs .field__control:where(:not(.builder-block__preview *)), .auth .field__control,
.cs input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):where(:not(.builder-block__preview *)),
.auth input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
.cs select:where(:not(.builder-block__preview *)), .auth select,
.cs textarea:where(:not(.builder-block__preview *)), .auth textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    font: inherit;
    color: var(--cs-fg);
    background: var(--cs-bg);
}
.cs .field__control:focus:where(:not(.builder-block__preview *)), .auth .field__control:focus,
.cs input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):focus:where(:not(.builder-block__preview *)),
.auth input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):focus,
.cs select:focus:where(:not(.builder-block__preview *)), .auth select:focus,
.cs textarea:focus:where(:not(.builder-block__preview *)), .auth textarea:focus {
    outline: none;
    border-color: var(--cs-border);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
/* SINGLE control metric for the whole app, context-free: every input/select/textarea and the custom
   select trigger renders identically everywhere (window, properties panel, content, form or not).
   No per-container override lives anywhere else - this is the one source of truth for control size. */
.cs :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea, .builder-dd__trigger):where(:not(.builder-block__preview *)) {
    font-size: 12.5px;
    line-height: 1.45;
    padding: 6px 9px;
    min-height: 34px;
    border-radius: var(--app-r-sm);
}
/* Date inputs: replace the browser's native calendar picker indicator with a custom calendar glyph
   (context-free, applies everywhere a date field appears in the app). */
.cs input[type=date]::-webkit-calendar-picker-indicator,
.cs input[type=datetime-local]::-webkit-calendar-picker-indicator:where(:not(.builder-block__preview *)) {
    cursor: pointer;
    opacity: 0.85;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.cs input[type=date]::-webkit-calendar-picker-indicator:hover:where(:not(.builder-block__preview *)),
.cs input[type=datetime-local]::-webkit-calendar-picker-indicator:hover:where(:not(.builder-block__preview *)) { opacity: 1; }
/* Invalid control state (live validation, customer--form-validate): red border + red ring, even on
   focus. !important is deliberate - it must beat the high-specificity base focus ring. */
.cs .is-invalid,
.cs .is-invalid:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18) !important;
}
/* Checkbox/radio: control THEN inline label, one option per line. */
.cs .field--check, .auth .field--check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0 0 0.4rem; }
.cs .field--check .field__check:where(:not(.builder-block__preview *)), .auth .field--check .field__check { width: auto; flex: none; margin: 0; }
.cs .field__check-label:where(:not(.builder-block__preview *)), .auth .field__check-label { margin: 0; font-weight: 400; white-space: nowrap; }
/* A checkbox's help text drops to its own line (not glued after the label) and stays small. */
.cs .field--check .field__help, .auth .field--check .field__help { flex-basis: 100%; margin: 0; font-size: 0.72rem; }

/* Buttons */
.cs .btn:not(.as-btn), .auth .btn:not(.as-btn),
.cs form button:not([type=button]):not(.as-btn):not(.builder-add__brick):where(:not(.builder-block__preview *)), .auth form button:not([type=button]):not(.as-btn):not(.builder-add__brick),
.cs form input[type=submit]:not(.as-btn):where(:not(.builder-block__preview *)), .auth form input[type=submit]:not(.as-btn) {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: 8px;
    background: var(--cs-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.cs .btn:not(.as-btn):hover:where(:not(.builder-block__preview *)), .auth .btn:not(.as-btn):hover,
.cs form button:not([type=button]):not(.as-btn):not(.builder-add__brick):hover:where(:not(.builder-block__preview *)), .auth form button:not([type=button]):not(.as-btn):not(.builder-add__brick):hover { opacity: 0.92; }

/* Studio pre-auth overrides (never the admin/Bootstrap auth): tighter field rhythm aligned on the
   BO design system, full-width submit, and smaller centered secondary links. Placed after the base
   form rules so equal-specificity selectors win by source order. */
.auth--studio form { display: flex; flex-direction: column; gap: 0.7rem; }
.auth--studio .auth-form { gap: 0.7rem; max-width: none; }
.auth--studio .field { margin: 0; }
.auth--studio .btn:not(.as-btn),
.auth--studio form button:not([type=button]):not(.as-btn),
.auth--studio form input[type=submit]:not(.as-btn) { display: block; width: 100%; margin-top: 0.25rem; }
.auth--studio .auth-links { justify-content: center; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: var(--app-text-sm); }
/* Studio auth help/intro copy (e.g. reset-password instructions): muted grey, smaller than the body. */
.auth-card--studio p:not(.auth-links) { color: var(--app-text-muted); font-size: var(--app-text-sm); text-align: center; margin: 0 0 1rem; }

/* Flash / alert messages */
.cs .alert, .auth .alert { padding: 0.6rem 0.8rem; border-radius: 8px; margin: 0 0 1rem; font-size: 0.92rem; }
.cs .alert ul, .auth .alert ul { margin: 0; padding-left: 1.1rem; }
.cs .alert-danger, .auth .alert-danger { background: #fef2f2; color: #b91c1c; }
.cs .alert-success, .auth .alert-success { background: #f0fdf4; color: #166534; }

/* Content: sections, cards, tables, badges (billing, cart, …) -------------- */
.cs-section { display: flex; flex-direction: column; gap: 1.25rem; }
.cs-section > h1 { margin: 0; font-size: 1.5rem; }
.cs-card {
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.cs-card > h2 { margin: 0 0 1rem; font-size: 1.05rem; }
.cs-empty { color: var(--cs-muted); margin: 0; }

.cs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cs-table th, .cs-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cs-border); }
.cs-table th { color: var(--cs-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table td { font-variant-numeric: tabular-nums; }

/* Status pill (subscription + invoice states) */
.billing-status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--cs-bg-alt); color: var(--cs-muted); }
.billing-status--active, .billing-status--trialing, .billing-status--paid { background: #f0fdf4; color: #166534; }
.billing-status--past_due, .billing-status--open, .billing-status--unpaid { background: #fffbeb; color: #92400e; }
.billing-status--canceled, .billing-status--void, .billing-status--uncollectible,
.billing-status--incomplete, .billing-status--incomplete_expired, .billing-status--draft { background: #fef2f2; color: #b91c1c; }

/* Billing summary */
.billing-summary__grid { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0; align-items: baseline; }
.billing-summary__grid dt { color: var(--cs-muted); }
.billing-summary__grid dd { margin: 0; font-weight: 600; }
.billing-notice { margin: 1rem 0 0; color: #92400e; background: #fef3c7; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.9rem; }

/* Cart */
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 2rem 1rem; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: flex; align-items: center; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--cs-border); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__label { flex: 1; }
.cart-line__price { color: var(--cs-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line form { margin: 0; }
.cart-totals { margin-top: 1rem; border-top: 1px solid var(--cs-border); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cart-total__line { display: flex; justify-content: space-between; margin: 0; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.cart-total__discount { color: #166534; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.4rem 0 0; font-size: 1.15rem; border-top: 1px solid var(--cs-border); padding-top: 1rem; }
.cart-promo-form { display: flex; gap: 0.5rem; align-items: center; }
.cart-promo-form input { max-width: 12rem; }

/* Cart forms must not inherit the studio blanket two-column grid (form{display:grid 1fr 1fr}):
   the promo form stacks (code field, then Apply just below at its natural size) and the checkout
   form aligns its button to the right at its natural size. Higher specificity than that grid rule. */
.as-window__body .cs-main.platform form.cart-promo-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.as-window__body .cs-main.platform form.cart-checkout { display: flex; justify-content: flex-end; }
.as-window__body .cs-main.platform form.cart-promo-form > .btn,
.as-window__body .cs-main.platform form.cart-checkout > .btn { width: auto; flex: 0 0 auto; }

/* Ghost button variant (secondary actions: remove, cancel) */
.cs .btn.btn--ghost {
    background: transparent;
    color: var(--cs-accent);
    border: 1px solid var(--cs-border);
    padding: 0.4rem 0.85rem;
}
.cs .btn.btn--ghost:hover:where(:not(.builder-block__preview *)) { background: var(--cs-bg-alt); opacity: 1; }

/* Domain status pills (custom domain pipeline) */
.billing-status--dns_ok { background: #eff6ff; color: #1d4ed8; }
.billing-status--pending_dns { background: #fffbeb; color: #92400e; }
.billing-status--failed { background: #fef2f2; color: #b91c1c; }

/* Domains page */
.badge { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--cs-bg-alt); color: var(--cs-muted); font-size: 0.72rem; font-weight: 600; }
.text-danger { color: #b91c1c; }
.domain-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.domain-actions form { margin: 0; }
.domain-instructions td { background: var(--cs-bg-alt); }
.domain-instructions p { margin: 0 0 0.5rem; color: var(--cs-muted); }
.domain-instructions pre { margin: 0; padding: 0.6rem 0.75rem; background: #0f172a; color: #e2e8f0; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; }
.domain-add form { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.domain-add .field { margin: 0; flex: 1; min-width: 16rem; }

/* Cart badge in the header */
.cs-cart, .cs-bell { position: relative; }
.cs-cart__badge, .cs-bell__badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--cs-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.1rem;
}

/* Notifications */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif { padding: 0.75rem 0; border-bottom: 1px solid var(--cs-border); }
.notif:last-child { border-bottom: 0; }
.notif--unread { background: color-mix(in srgb, var(--cs-accent) 8%, transparent); border-radius: var(--app-r-sm); padding: 0.75rem; }
.notif__type { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cs-muted); }
.notif__title { display: block; font-weight: 600; color: var(--cs-fg); text-decoration: none; }
.notif__body { margin: 0.25rem 0 0; color: var(--cs-muted); font-size: 0.9rem; }
.notif__date { display: block; margin-top: 0.25rem; color: var(--cs-muted); font-size: 0.8rem; }
.notif-prefs .field--check { margin: 0 0 0.5rem; }
.notif-prefs .btn { grid-column: 1 / -1; justify-self: end; width: auto; }
.notif__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.notif__actions form { margin: 0; }

/* Elements introduced with the cart / billing / notifications flows. */
.cs .cs-help, .auth .cs-help { color: var(--cs-muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
.cs .cs-error, .auth .cs-error { color: #b91c1c; font-size: 0.9rem; margin: 0.5rem 0 0; }
.cs .cart-summary, .auth .cart-summary { border: 1px solid var(--cs-border); border-radius: 8px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.cs .cart-summary > h2, .auth .cart-summary > h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.cs .cart-checkout, .auth .cart-checkout { margin-top: 1rem; }
.cs .billing-pending, .auth .billing-pending { background: color-mix(in srgb, var(--cs-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cs-accent) 35%, var(--cs-border)); border-radius: var(--app-r-md); padding: 0.8rem 0.95rem; }
/* Auth forms (login, 2FA): stacked fields, comfortable width. */
.auth .auth-form { display: flex; flex-direction: column; gap: 1rem; max-width: 26rem; }

/* ==========================================================================
   Functional client-space pages (builder admin, bricks, team, e-mails, shop,
   agenda, réservations, newsletter…). These pages render bare markup directly
   in `platform_body`; the rules below give them the same sober, carded look as
   the already-structured pages (domain, billing, cart). Scoped to `.cs-main`:
   the block-editor canvas uses `.builder-block__*` div markup - no bare
   <section>/<ul>/<table> - so these generic element rules never reach it.
   ========================================================================== */

/* Headings, text rhythm & inline elements on loose pages */
.cs-main.platform > h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.cs-main.platform > h2 { margin: 1.75rem 0 1rem; font-size: 1.2rem; }
.cs-main.platform > p { margin: 0 0 1rem; }
.cs-main.platform a:not(.btn):not(.as-btn):not(.cs-logo) { color: var(--cs-accent); text-decoration: none; }
.cs-main.platform a:not(.btn):not(.as-btn):not(.cs-logo):hover { text-decoration: underline; }
.cs-main.platform code {
    background: var(--cs-bg-alt); border: 1px solid var(--cs-border);
    border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.85em;
}

/* Loose functional sections become cards (exclude the .cs-section flex wrapper
   and alert banners, which are styled on their own). */
.cs-main.platform > section:not(.cs-section):not(.alert) {
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.cs-main.platform section > h2 { margin: 0 0 1rem; font-size: 1.05rem; }

/* Tables on functional pages without an explicit .cs-table class */
.cs-main.platform table {
    width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0.5rem 0 0;
}
.cs-main.platform table th, .cs-main.platform table td {
    text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--cs-border); vertical-align: top;
}
.cs-main.platform table th {
    color: var(--cs-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.cs-main.platform table tbody tr:last-child td { border-bottom: 0; }
.cs-main.platform td form { display: inline; margin: 0; }
.cs-main.platform td form + form { margin-left: 0.4rem; }

/* Class-less lists (team members, agenda/booking/shop items) → tidy rows */
.cs-main.platform section:not(.alert) ul:not([class]) { list-style: none; margin: 0 0 1rem; padding: 0; }
.cs-main.platform section:not(.alert) ul:not([class]) > li {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.6rem 0; border-bottom: 1px solid var(--cs-border);
}
.cs-main.platform section:not(.alert) ul:not([class]) > li:last-child { border-bottom: 0; }
.cs-main.platform section:not(.alert) ul:not([class]) > li form { margin: 0 0 0 auto; }

/* Builder: page header, publish bar, versions ----------------------------- */
.builder-page-header { margin: 0 0 1.5rem; }
.builder-page-header h1 { margin: 0.25rem 0; font-size: 1.5rem; }
.builder-page-header > p { margin: 0.25rem 0; color: var(--cs-muted); }
.builder-publish { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }
.builder-publish form { margin: 0; }
.builder-versions__list { list-style: none; margin: 0; padding: 0; }
.builder-versions__item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0; border-bottom: 1px solid var(--cs-border); }
.builder-versions__item:last-child { border-bottom: 0; }
.builder-versions__item form { margin: 0 0 0 auto; }
.builder-versions__empty { color: var(--cs-muted); padding: 0.5rem 0; }

/* Paginated-list table (design system for every paginated list of the app). No header row. Each
   <tr> reproduces the former card row: 1px border + 10px radius + panel background, with vertical
   spacing between rows via border-spacing. Column helpers: __state = centered, __actions = right,
   __title = the single flexible column (ellipsis). */
.builder-list { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
/* Column sizing lives on the <td>; the <td> carries no visual (no padding/border/vertical-align).
   Scoped under .cs-main.platform to beat the generic `.cs-main.platform table td` rule. */
.cs-main.platform .builder-list td { padding: 0; border-bottom: 0; vertical-align: middle; }
.builder-list__c-meta, .builder-list__c-state, .builder-list__c-actions { width: 1%; white-space: nowrap; }
.builder-list__c-title { width: 100%; }
/* The inner full-width flex div carries the card look (bg + borders) so a row can have rounded ends
   that a <tr> can't: the first cell rounds/borders its left, the last its right, the middle only
   top/bottom - together they read as one continuous card. Row spacing = a shared margin-bottom;
   height:100% keeps every cell of a row the same height. Alignment is pure flex (no vertical-align). */
.builder-list__cell { display: flex; align-items: center; min-width: 0; height: 55px; margin-bottom: 0.5rem;
  padding: 0 0.9rem; background: var(--cs-bg);
  border-top: 1px solid var(--cs-border); border-bottom: 1px solid var(--cs-border); }
.builder-list td:first-child .builder-list__cell { border-left: 1px solid var(--cs-border);
  border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.builder-list td:last-child .builder-list__cell { border-right: 1px solid var(--cs-border);
  border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.builder-list__cell--title { gap: 0.5rem; }
.builder-list__ico { flex: none; display: flex; align-items: center; color: var(--cs-accent); }
.builder-list__ico svg { display: block; }
.builder-list__cell--title a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; font-weight: 600; }
.builder-list__cell--title a:hover { color: var(--cs-accent); }
.builder-list__cell--meta { color: var(--cs-muted); font-family: var(--app-font-mono); font-size: 0.85em; }
.builder-list__cell--state { justify-content: center; }
.builder-list__cell--actions { justify-content: flex-end; }
.cs-main.platform .builder-list__cell--actions form { display: flex; justify-content: flex-end; width: 100%; margin: 0; }

/* Builder: pages list ----------------------------------------------------- */
.builder-page-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.builder-page-list > li {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap;
    padding: 0.7rem 0.9rem; margin: 0 0 0.5rem;
    border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cs-bg);
}
.builder-page-list > li > a:first-child { font-weight: 600; }
.builder-page-list > li form { margin: 0 0 0 auto; }
/* Article/category/tag names: take the free space and truncate with an ellipsis (full name via the
   title attribute) instead of pushing the badge/actions off to the right. */
.builder-page-list__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Row main column: name on top, small muted meta (author, publication date) underneath. Takes the
   free space and keeps the badge/actions to the right; min-width:0 lets the name ellipsis work. */
.builder-page-list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
/* Keep the badge/actions at their natural size: only the name column absorbs a long title and
   truncates, instead of the buttons being squeezed/deformed. */
.builder-page-list > li > .badge,
.builder-page-list > li > .as-btn,
.builder-page-list > li > form { flex: 0 0 auto; }
.builder-page-list__main .builder-page-list__name { flex: 0 0 auto; }
.builder-page-list__meta { font-size: 0.78rem; color: var(--cs-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-page-list .builder-empty { color: var(--cs-muted); }

/* Paginated list wrapper: positioning context for the scoped studio loader (shown over the search +
   list during every live search/pagination request), which is position:absolute; inset:0. */
.builder-list-wrap { position: relative; }
.builder-list-wrap .app-loader { border-radius: var(--app-r-sm); }

/* SEO score widget (Yoast-style): the SEO form on the left, the live analysis panel on the right. */
.cs .seo-score-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cs .seo-score-layout__form { min-width: 0; }
.cs .seo-score__panel { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: var(--app-r-sm); position: sticky; top: 0; }
.cs .seo-score__head { display: flex; align-items: center; gap: 12px; }
.cs .seo-score__gauge { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.cs .seo-score__gauge--good { background: #2fbf71; }
.cs .seo-score__gauge--ok { background: #e0a800; }
.cs .seo-score__gauge--bad { background: #e5534b; }
.cs .seo-score__headmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs .seo-score__title { font-weight: 700; font-size: 12.5px; }
.cs .seo-score__rating { font-size: 11px; }
.cs .seo-score__rating--good { color: #2fbf71; }
.cs .seo-score__rating--ok { color: #e0a800; }
.cs .seo-score__rating--bad { color: #e5534b; }
.cs .seo-serp { padding: 10px 12px; background: color-mix(in srgb, var(--cs-fg) 4%, transparent); border: 1px solid var(--cs-border); border-radius: var(--app-r-sm); }
.cs .seo-serp__label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); margin-bottom: 6px; }
.cs .seo-serp__title { font-size: 14px; line-height: 1.3; color: #8ab4f8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .seo-serp__url { font-size: 11.5px; color: #3fbf71; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .seo-serp__desc { font-size: 11.5px; color: var(--cs-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs .seo-score__group { display: flex; flex-direction: column; gap: 6px; }
.cs .seo-score__grouptitle { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); }
.cs .seo-score__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cs .seo-check { display: flex; align-items: flex-start; gap: 8px; }
.cs .seo-check__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 3px; }
.cs .seo-check--good .seo-check__dot { background: #2fbf71; }
.cs .seo-check--ok .seo-check__dot { background: #e0a800; }
.cs .seo-check--bad .seo-check__dot { background: #e5534b; }
.cs .seo-check__msg { font-size: 11.5px; line-height: 1.4; color: var(--cs-muted); }
.cs .seo-score__locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 4px; color: var(--cs-muted); }
.cs .seo-score__locked svg { color: var(--app-brand); }
.cs .seo-score__locked-title { font-weight: 700; font-size: 12.5px; color: var(--cs-fg); }
.cs .seo-score__locked-text { font-size: 11.5px; line-height: 1.4; margin: 0 0 4px; }
@media (max-width: 1024px) { .cs .seo-score-layout { grid-template-columns: 1fr; } .cs .seo-score__panel { position: static; } }

/* SEO reference guide (help page). */
.cs .seo-guide__intro { color: var(--cs-muted); font-size: 13px; margin: 0 0 0.5rem; max-width: 70ch; }
.cs .seo-guide { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 8px 24px; margin: 0; max-width: 80ch; }
.cs .seo-guide dt { font-weight: 700; font-size: 12.5px; }
.cs .seo-guide dd { margin: 0; font-size: 12.5px; color: var(--cs-muted); line-height: 1.45; }
@media (max-width: 720px) { .cs .seo-guide { grid-template-columns: 1fr; gap: 2px 0; } .cs .seo-guide dd { margin-bottom: 0.6rem; } }

/* Article list search + pager (BlogArticleList live component). */
.builder-article-list__search { margin-bottom: 0.75rem; }
.builder-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 0.5rem 0 1.5rem; }
.builder-pager[hidden] { display: none; }
.builder-pager__status { font-size: 0.85rem; color: var(--cs-muted); }

/* Builder: assistant & design panels -------------------------------------- */
.builder-assistant, .builder-design {
    background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: 12px;
    padding: 1.25rem 1.5rem; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.builder-design__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.builder-design__actions button {
    display: inline-block; padding: 0.6rem 1.1rem; border: 0; border-radius: 8px;
    background: var(--cs-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.builder-design__actions button[type=button] {
    background: var(--cs-bg-alt); color: var(--cs-accent); border: 1px solid var(--cs-border);
}
.builder-design__actions button:hover { opacity: 0.92; }

/* Builder: home intro + onboarding checklist ------------------------------ */
.builder-intro { margin: 0 0 1.5rem; }
.builder-intro h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.onboarding ol { margin: 0.5rem 0 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.onboarding > a { display: inline-block; margin-right: 0.6rem; }
.onboarding form { display: inline; }

/* Bricks catalogue → grouped, sellable card grid -------------------------- */
.bricks-hero { margin: 0 0 1.25rem; }
.bricks-hero__intro { margin: 0.25rem 0 0; color: var(--cs-muted); max-width: 60ch; }

.bricks-group { margin: 0 0 1.75rem; }
.bricks-group:last-child { margin-bottom: 0; }
.bricks-group__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem;
    margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--cs-border); }
.bricks-group__title { margin: 0; font-weight: 700; }
.bricks-group__hint { margin: 0; color: var(--cs-muted); }

.bricks { list-style: none; margin: 0; padding: 0; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.85rem; }
.bricks .brick {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 1rem 1.1rem; border: 1px solid var(--cs-border); border-radius: 12px;
    background: var(--cs-bg); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
/* Premium = the sellable tier: a warmer accent ring so those cards stand out. */
.bricks .brick--premium { border-color: color-mix(in srgb, var(--cs-accent) 32%, var(--cs-border));
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 0 0 1px color-mix(in srgb, var(--cs-accent) 10%, transparent); }
.bricks .brick.is-locked { background: var(--cs-bg-alt); }

.brick__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.brick__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
    background: var(--cs-bg-alt); color: var(--cs-fg); }
.brick__icon svg { display: block; width: 22px; height: 22px; }
.brick__icon--premium { background: color-mix(in srgb, var(--cs-accent) 14%, transparent); color: var(--cs-accent); }

.brick__title { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-weight: 650; min-width: 0; }
.brick__title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brick-lock { color: var(--cs-muted); flex: none; }
.brick__desc { margin: 0; color: var(--cs-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Footer pinned to the bottom so cards of unequal text length still line up (no holes). */
.brick__foot { margin-top: auto; padding-top: 0.35rem; display: flex; flex-direction: column; gap: 0.5rem; }
.brick__actions { display: flex; gap: 0.5rem; }
.brick__actions form { margin: 0; flex: 1; }
.brick__foot .btn { width: 100%; }
/* Brick action forms are single-button POSTs, not settings forms: opt them out of the
   two-column window form grid so their button keeps full width. */
.as-window__body .cs-main.platform .brick__foot form,
.as-content .cs-main.platform .brick__foot form { display: block; }
/* Brick + group titles are real headings, NOT the compact uppercase separators that the window
   applies to every h2/h3 in a settings form: drop the border-top / padding / faint uppercase look. */
.as-window__body .cs-main.platform .brick__title,
.as-content .cs-main.platform .brick__title {
    margin: 0; padding-top: 0; border-top: 0; text-transform: none; letter-spacing: normal;
    font-size: 0.9rem; font-weight: 650; color: var(--cs-fg);
}
.as-window__body .cs-main.platform .bricks-group__title,
.as-content .cs-main.platform .bricks-group__title {
    margin: 0; padding-top: 0; border-top: 0; text-transform: none; letter-spacing: normal;
    font-size: 0.92rem; font-weight: 700; color: var(--cs-fg);
}

.brick-tier { display: inline-flex; align-self: flex-start; padding: 0.12rem 0.55rem; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--cs-bg-alt); color: var(--cs-muted); }
.brick-tier--premium { background: color-mix(in srgb, var(--cs-accent) 14%, transparent); color: var(--cs-accent); }

.brick-price { margin: 0; display: flex; align-items: baseline; gap: 0.3rem; }
.brick-price strong { color: var(--cs-fg); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.brick-price__per { color: var(--cs-muted); font-size: 0.82rem; }
.brick-in-cart { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--cs-accent); font-weight: 700; }
.brick-state { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cs-muted); font-weight: 600; }
.brick-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.brick-state--on { color: var(--cs-accent); }
.brick-locked { margin: 0; color: var(--cs-muted); }

/* Brick purchase confirmation page ---------------------------------------- */
.brick-purchase__summary { background: var(--cs-bg-alt); border: 1px solid var(--cs-border); border-radius: 12px; padding: 1.1rem 1.25rem; margin: 0 0 1.25rem; }
.brick-purchase__summary h2 { margin: 0 0 0.5rem; }
.brick-purchase__note { color: var(--cs-muted); font-size: 0.9rem; }
.brick-purchase form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Form collections (shop product images/variants, bookable images) -------- */
.product-images, .product-variants, .bookable-images {
    margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cs-bg-alt);
}
.product-images > label, .product-variants > label, .bookable-images > label {
    display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem;
}
.product-variant-row,
.product-images [data-collection-item], .bookable-images [data-collection-item] {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; flex-wrap: wrap;
}
.product-images button, .product-variants button, .bookable-images button {
    padding: 0.4rem 0.8rem; border: 1px solid var(--cs-border); border-radius: 8px;
    background: var(--cs-bg); color: var(--cs-accent); font: inherit; cursor: pointer;
}
.product-images [data-collection-item] button,
.product-variants [data-collection-item] button,
.bookable-images [data-collection-item] button { padding: 0.2rem 0.6rem; }

/* Blog/SEO client forms: single-value collections (article tags, custom SEO tags) shown as stacked
   rows, each with its inline remove button aligned (same height) to the field. */
.cs-main.platform [data-customer--form-collection-target="container"] { display: flex; flex-direction: column; margin: 0 0 0.6rem; }
.cs-main.platform [data-collection-item] { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0; }
.cs-main.platform [data-collection-item] + [data-collection-item] { border-top: 1px solid var(--cs-border); }
.cs-main.platform [data-collection-item] > :first-child { flex: 1 1 auto; min-width: 0; }
.cs-main.platform [data-collection-item] > .as-btn { flex: none; align-self: stretch; }
/* A collection field that carries its own remove button (custom SEO tag "name" field): lay the input
   and the button on one line (label above), so the button sits BESIDE the input, not under it. */
.cs-main.platform [data-collection-item] .field:has(> .as-btn) { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; align-items: stretch; }
.cs-main.platform [data-collection-item] .field:has(> .as-btn) > .field__label { grid-column: 1 / -1; }

/* Article editor AI assistant block: the "Général" section heading right below carries the separator,
   so the block itself must NOT add a second one (no bottom border). */
.cs-main.platform .builder-blog-assistant { margin: 0; }

/* Collection add button (tags, custom tags): separated from the rows above and the field below. */
.cs [data-customer--form-collection-target="container"] + .as-btn { margin-top: 0.5rem; }

/* Media field action row (Upload / Library): a real button row, not glued, full width. */
.cs .media-field__actions { display: flex; gap: 0.5rem; }
.cs .media-field__actions .as-btn { flex: 1 1 0; justify-content: center; }

/* Trix rich-text editor, themed to the studio DS (dark). The toolbar icons are black SVGs set as a
   background-image on ::before; they are recoloured by inverting ONLY ::before (never resize
   .trix-button, which deforms the icon). */
.cs trix-editor.as-trix { display: block; background: var(--cs-bg); border: 1px solid var(--cs-border); border-radius: var(--app-r-sm); padding: 8px 10px; min-height: 120px; color: var(--cs-fg); }
.cs trix-editor.as-trix:focus { outline: none; border-color: var(--cs-border); box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15); }
.cs trix-toolbar:where(:not(.builder-block__preview *)) { margin-bottom: 6px; }
.cs trix-toolbar .trix-button-group:where(:not(.builder-block__preview *)) { border: 1px solid var(--cs-border); background: var(--cs-bg); border-radius: var(--app-r-sm); }
.cs trix-toolbar .trix-button:where(:not(.builder-block__preview *)) { background: transparent; border-bottom: none; color: var(--cs-fg); }
.cs trix-toolbar .trix-button:not(:first-child):where(:not(.builder-block__preview *)) { border-left: 1px solid var(--cs-border); }
.cs trix-toolbar .trix-button.trix-active:where(:not(.builder-block__preview *)) { background: var(--app-control); }
.cs trix-toolbar .trix-button--icon::before:where(:not(.builder-block__preview *)) { filter: invert(0.92); }
.cs trix-editor.as-trix a { color: var(--app-brand); }

/* Media field (builder blocks + shop images) ------------------------------ */
.media-field { display: flex; flex-direction: column; gap: 0.5rem; }
/* Preview image fills its column (no fixed cap): the module is sized by its column, not the image. */
.cs .media-field__preview { width: 100%; max-height: 220px; object-fit: cover; display: block; border: 1px solid var(--cs-border); border-radius: 8px; }
/* Media library picker (customer--media-field): paginated grid with the studio loader shown during
   each fetch (open / page change / upload). The wrap is the loader's positioning context. */
.cs .media-field__librarywrap { position: relative; min-height: 48px; }
.cs .media-field__librarywrap .app-loader { border-radius: var(--app-r-sm); }
.cs .media-field__library { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.cs .media-field__tile { padding: 0; aspect-ratio: 1; border: 1px solid var(--cs-border); border-radius: var(--app-r-sm); overflow: hidden; background: none; cursor: pointer; }
.cs .media-field__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs .media-field__tile:hover { border-color: var(--app-brand); }
.cs .media-field__empty { grid-column: 1 / -1; text-align: center; color: var(--cs-muted); font-size: 12px; margin: 6px 0; }
.cs .media-field__pager { margin-top: 8px; }
/* Generated UI wrapper (built by customer--media-field): carries the vertical rhythm between
   preview, buttons and the media grid (the gap used to live on .media-field itself). */
.media-field__ui { display: flex; flex-direction: column; gap: 0.5rem; }
.media-field button:not(.as-btn) {
    align-self: flex-start; padding: 0.4rem 0.8rem; border: 1px solid var(--cs-border);
    border-radius: 8px; background: var(--cs-bg); color: var(--cs-accent); font: inherit; cursor: pointer;
}

/* File inputs: replace the raw native "browse" button --------------------- */
.cs input[type=file] { padding: 0.4rem; }
.cs input[type=file]::file-selector-button:where(:not(.builder-block__preview *)) {
    margin-right: 0.75rem; padding: 0.45rem 0.9rem; border: 1px solid var(--cs-border);
    border-radius: 8px; background: var(--cs-bg-alt); color: var(--cs-accent);
    font: inherit; font-weight: 600; cursor: pointer;
}
.cs input[type=file]::file-selector-button:hover:where(:not(.builder-block__preview *)) { background: var(--cs-border); }

/* Warning alert variant (inactive brick notices, etc.) -------------------- */
.cs .alert-warning, .auth .alert-warning { background: #fffbeb; color: #92400e; }

/* Pre-auth page content (register, reset, invitation): headings, intro & links. */
.auth-main.platform h1 { margin: 0 0 1rem; font-size: 1.4rem; }
.auth-main.platform > p { margin: 0 0 1rem; color: var(--cs-muted); }
.auth-main.platform a:not(.btn) { color: var(--cs-accent); text-decoration: none; }
.auth-main.platform a:not(.btn):hover { text-decoration: underline; }
.auth-main.platform form + a { display: inline-block; margin-top: 1rem; }
/* Builder - retours visuels de génération d'image (overlay bloquant +
   placeholders) et contrôle de la voix de l'assistant. Portée limitée à ces
   composants ; le reste du builder n'est pas restylé ici. */

/* Overlay bloquant plein écran pendant la génération d'un média : capte les
   clics → aucune action possible tant qu'une image est en cours. */
/* The image-generation overlay reuses the .app-loader look (cube + glass backdrop); it only needs
   to sit absolute over the editor (below the chrome) and keep room for the cancel button. */
.builder-overlay {
    position: absolute;
    z-index: var(--app-z-window);
}

.builder-overlay__box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    color: #111827;
    font-size: 0.95rem;
}

/* Bouton d'annulation de la génération d'image (dans l'overlay). */
.builder-overlay__cancel {
    margin-left: 0.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #b91c1c;
    font-size: 0.85rem;
    cursor: pointer;
}

.builder-overlay__cancel:hover {
    background: #fef2f2;
}

/* Spinner générique (overlay + tuiles). */
.builder-overlay__spinner,
.builder-generating__spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(17, 24, 39, 0.2);
    border-top-color: #111827;
    border-radius: 50%;
    animation: builder-spin 0.8s linear infinite;
}

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

/* Une tuile « image en cours de génération » par média attendu. */
.builder-generating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.builder-generating__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 160px;
    height: 120px;
    padding: 0.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.8rem;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
    background-size: 400% 100%;
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
    animation: builder-shimmer 1.4s ease infinite;
}

@keyframes builder-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Indicateur « l'assistant répond… » et boutons voix. */
.builder-chat__responding {
    margin: 0.25rem 0;
    color: #6b7280;
    font-style: italic;
}

.builder-chat__speaker,
.builder-chat__mic {
    cursor: pointer;
}

/* Chat thread = classic bubbles: assistant on the left, user on the right, each
   next to its avatar (assistant photo / user initial). */
.builder-chat__msg { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 0.6rem; }
.builder-chat__msg--user { flex-direction: row-reverse; }
.builder-chat__avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; flex: none; }
.builder-chat__avatar--user { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; }
.builder-chat__col { display: flex; flex-direction: column; gap: 3px; max-width: 80%; min-width: 0; }
.builder-chat__msg--assistant .builder-chat__col { align-items: flex-start; }
.builder-chat__msg--user .builder-chat__col { align-items: flex-end; }
.builder-chat__bubble { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 12px; }
.builder-chat__msg--assistant .builder-chat__bubble { border-bottom-left-radius: 4px; }
.builder-chat__msg--user .builder-chat__bubble { border-bottom-right-radius: 4px; }
.builder-chat__meta { display: flex; gap: 0.4rem; align-items: baseline; font-size: 10px; padding: 0 4px; }
.builder-chat__date { font-size: 9.5px; }
.builder-chat__author { font-weight: 600; }
.builder-chat__date { font-variant-numeric: tabular-nums; }

/* Message dicté qui vient d'être envoyé : affiché en attente de la réponse IA. */
.builder-chat__form input.is-dictated {
    font-style: italic;
    opacity: 0.55;
}

/* Boutons désactivés (dictée en cours / réponse de l'IA). */
.builder-chat__form button:disabled,
.builder-chat__form input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Modale de confirmation (ex. suppression de bloc) - rendue par le LiveComponent. */
.builder-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.55);
}

.builder-modal__box {
    max-width: 420px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    color: #111827;
}

.builder-modal__message {
    margin: 0 0 1rem;
}

.builder-modal__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
/* Buttons sharing a row fill the full width (equal split), label centred. */
.builder-modal__actions > button { flex: 1 1 0; justify-content: center; }

/* AI generator: the Generate button belongs to the brief textarea just above it, so it is grouped
   tight to it (not the full action-row gap used to separate a submit row from a whole form). */
/* AI generator (brief + Generate): the button belongs to the textarea above it, so it hugs it
   (tight brief field, no action-row top gap) everywhere the block appears. The :not() lifts the
   specificity above the window field-rhythm rule so this wins. */
.cs .builder-ai-gen .field:not(.field--check) { margin-bottom: 0.35rem; }
.cs .builder-ai-gen .builder-modal__actions { margin-top: 0; }

/* Client-form section headings: small uppercase grey label with a top separator (band above). The
   subsection is the same, one step smaller. */
.cs .builder-settings__section { margin: 1.4rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--cs-border); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-text-faint); }
.cs .builder-settings__subsection { margin: 1rem 0 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--cs-border); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-text-faint); }
.as-window__body .cs .builder-settings__section { margin-top: 1.6rem; font-size: 11px; }
.as-window__body .cs .builder-settings__subsection { margin-top: 1.2rem; font-size: 10px; }
/* DS-wide: every studio window's content headings adopt the section title + separator look
   (uppercase, faint, top rule), so all windows get consistent titles/separators without a
   per-template class. The first heading of a window drops its top rule (nothing to separate from).
   Blog/article already carry .builder-settings__section, so this leaves them unchanged. */
.as-window__body .cs-main.platform h2 { margin: 1.6rem 0 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--cs-border); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-text-faint); }
.as-window__body .cs-main.platform h3 { margin: 1.2rem 0 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--cs-border); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-text-faint); }
.as-window__body .cs-main.platform > :is(h2, h3):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Same rule for a section title that opens a card/section (not just a direct child of the page):
   no floating top divider / extra top spacing above the first heading of a .cs-card / .cs-section. */
.as-window__body .cs-main.platform :is(.cs-card, .cs-section) > :is(h2, h3):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* The assistant heading is the first block of the editor: no top separator/space (it separates
   from nothing); the block is delimited by its own bottom border, above the form. */
.cs .builder-blog-assistant .builder-settings__section { margin-top: 0; padding-top: 0; border-top: 0; }
/* Article editor: the first section header of each column (main = Général, sidebar = Assistant IA)
   has nothing above it to separate from, so it drops the top rule + top space. Subsequent headers
   (Contenu, Publication, Images) keep their divider. Specificity beats the window-wide h2 rule. */
.as-window__body .cs-main.platform .article-editor__main > .builder-settings__section:first-child,
.as-window__body .cs-main.platform .article-editor__side .builder-blog-assistant .builder-settings__section { margin-top: 0; padding-top: 0; border-top: 0; }

/* Shared confirmation modal (customer--confirm) for destructive actions outside the builder
   LiveComponent. Real in-app modal - never a native confirm(). */
.as-confirm[hidden] { display: none; }
.as-confirm {
    position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
}
.as-confirm__scrim { position: absolute; inset: 0; background: var(--app-overlay, rgba(6, 5, 4, 0.5)); backdrop-filter: blur(3px); }
.as-confirm__box {
    position: relative; z-index: 1; width: min(420px, 90vw); padding: 20px; border-radius: var(--app-r-lg);
    background: var(--app-panel); color: var(--app-text); border: 1px solid var(--app-line); box-shadow: var(--app-shadow-win);
}
.as-confirm__message { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.as-confirm__actions { display: flex; gap: 8px; }
.as-confirm__actions > .as-btn { flex: 1 1 0; justify-content: center; }
.as-confirm__yes { background: var(--app-brand) !important; border-color: var(--app-brand) !important; color: var(--app-brand-ink) !important; }

/* Brick/service documentation modal (Insertion menu). */
.as-docmodal[hidden] { display: none; }
.as-docmodal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.as-docmodal__scrim { position: absolute; inset: 0; background: var(--app-overlay, rgba(6, 5, 4, 0.5)); backdrop-filter: blur(3px); }
.as-docmodal__box { position: relative; z-index: 1; width: min(440px, 92vw); padding: 22px 24px 24px; border-radius: var(--app-r-lg);
    background: var(--app-panel); color: var(--app-text); border: 1px solid var(--app-line); box-shadow: var(--app-shadow-win); }
.as-docmodal__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: var(--app-r-sm); color: var(--app-text-muted); cursor: pointer; }
.as-docmodal__close:hover { background: var(--app-control); color: var(--app-text); }
.as-docmodal__close svg { width: 16px; height: 16px; }
.as-docmodal__title { margin: 0 34px 4px 0; font-size: 16px; font-weight: 700; }
.as-docmodal__price { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--app-brand); }
.as-docmodal__desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--app-text-muted); }
.as-docmodal__foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.as-docmodal__cta, .as-docmodal__deact { justify-content: center; }
.as-docmodal__warn { width: 46px; height: 46px; margin: 0 0 12px; display: grid; place-items: center; border-radius: 50%;
    background: var(--app-brand-weak); color: var(--app-brand); }
.as-docmodal__warn svg { width: 26px; height: 26px; }
.as-docmodal form { margin: 0; }

/* Keyboard-shortcuts help modal (Aide → Raccourcis). */
.as-shortcuts[hidden] { display: none; }
.as-shortcuts { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.as-shortcuts__scrim { position: absolute; inset: 0; background: var(--app-overlay, rgba(6, 5, 4, 0.5)); backdrop-filter: blur(3px); }
.as-shortcuts__box { position: relative; z-index: 1; width: min(860px, 92vw); max-height: min(82vh, 760px); display: flex; flex-direction: column;
    padding: 18px 20px 20px; border-radius: var(--app-r-lg);
    background: var(--app-panel); color: var(--app-text); border: 1px solid var(--app-line); box-shadow: var(--app-shadow-win); }
.as-shortcuts__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.as-shortcuts__title { margin: 0; font-size: 14px; font-weight: 700; }
.as-shortcuts__list { margin: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.as-shortcuts__cols { columns: 250px 3; column-gap: 22px; }
.as-shortcuts__cat { break-inside: avoid; margin: 0 0 12px; }
.as-shortcuts__catname { margin: 0 0 4px; padding: 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--app-text-2); }
.as-shortcuts__rows { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.as-shortcuts__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 8px; border-radius: var(--app-r-sm); }
.as-shortcuts__row:nth-child(odd) { background: var(--app-control); }
.as-shortcuts__row dt { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--app-text); }
.as-shortcuts__row dd { margin: 0; }
.as-shortcuts__row kbd { display: inline-block; min-width: 20px; text-align: center; padding: 2px 7px; font-family: var(--app-font-mono);
    font-size: 11px; color: var(--app-text); background: var(--app-panel-2); border: 1px solid var(--app-line); border-radius: 6px; box-shadow: 0 1px 0 var(--app-line); }
/*
 * Design-system skin for the Tom Select dropdowns (country + phone dialing-code selectors) on the
 * customer + tenant surfaces. Tom Select imports its own light default theme; we override it with
 * the page tokens (--cs-*) so the control and dropdown match the surrounding form fields in any
 * theme (never the light hardcoded default). `!important` wins over the imported default theme.
 * (The back office has its own EA-based skin in admin.css.)
 */

/* The field box (bg, border, radius) lives on the WRAPPER; the inner control stays transparent.
 * The shorthand `background` also clears any Bootstrap `.form-select` chevron image copied onto
 * the wrapper (fixes the double chevron). */
.ts-wrapper.ts-wrapper {
    height: 30px !important;
    min-height: 30px !important;
    background: var(--cs-bg) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--app-r-sm) !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: var(--app-font-sans);
    transition: border-color 0.14s, box-shadow 0.14s;
}
/* Focus: exactly EA's input focus - border tint + its (empty) shadow, NO extra ring. */
.ts-wrapper.ts-wrapper.focus {
    border-color: var(--cs-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}
.ts-wrapper.ts-wrapper.disabled {
    background: var(--cs-bg-alt) !important;
    opacity: 1 !important;
}

.ts-wrapper.ts-wrapper .ts-control {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 1.75rem 0 0.5rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    color: var(--cs-fg) !important;
    font-size: var(--app-text-sm) !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}
.ts-wrapper.ts-wrapper .ts-control > .item,
.ts-wrapper.ts-wrapper .ts-control > input {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
    color: var(--cs-fg) !important;
}
.ts-wrapper.ts-wrapper .ts-control > input::placeholder {
    color: var(--cs-muted) !important;
}

/* Single chevron (Tom Select's ::after), muted colour. */
.ts-wrapper.ts-wrapper.single .ts-control:after {
    border-color: var(--cs-muted) transparent transparent !important;
    right: 0.65rem !important;
}
.ts-wrapper.ts-wrapper.single.dropdown-active .ts-control:after {
    border-color: transparent transparent var(--cs-muted) !important;
}

/* ---- Dropdown panel : EA autocomplete look ---- */
.ts-dropdown.ts-dropdown {
    background: var(--cs-bg) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--app-r-sm) !important;
    box-shadow: var(--app-shadow-panel) !important;
    color: var(--cs-fg) !important;
    font-size: var(--app-text-sm) !important;
    margin-top: 4px !important;
    padding: 4px !important;
    overflow: hidden !important;
}
.ts-dropdown.ts-dropdown .ts-dropdown-content {
    padding: 0 !important;
}
.ts-dropdown.ts-dropdown .option {
    border-radius: 6px !important;
    padding: 0.4rem 0.5rem !important;
    color: var(--cs-fg) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}
/* Hover/active = EA's own neutral autocomplete highlight (never a brand-blue block). */
.ts-dropdown.ts-dropdown .option.active {
    background: var(--cs-bg-alt) !important;
    color: var(--cs-fg) !important;
}
.ts-dropdown.ts-dropdown .option[aria-selected="true"] {
    font-weight: 600 !important;
}
/* Hide the disabled separator Symfony inserts between preferred and all countries. */
.ts-dropdown.ts-dropdown .option[aria-disabled="true"] {
    display: none !important;
}

/* ---- Flag + label row inside an option / selected item ---- */
.cp-opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.cp-opt .fi {
    flex: 0 0 auto;
    width: 1.33em;
    height: 1em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.cp-opt > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Phone widget : a self-contained row where the dialing-code stays glued to the number on ONE
 * line at any width, and only the number grows. Robust to the two markups this widget ships in:
 *   - tenant sites   : .js-phone > .ts-wrapper (dial code) + .js-phone > input.js-phone-number
 *   - EasyAdmin/misd : .js-phone.input-group > <div>…ts-wrapper</div> + empty .flex-fill spacers
 *                      + <div>…input.js-phone-number</div>
 */
.js-phone {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100%;
}
/* Empty Bootstrap spacers the EA/misd input-group theme injects between the two fields. */
.js-phone > .flex-fill {
    display: none !important;
}
/* EA wraps each sub-field in form-group/form-widget: strip their spacing/box so the row stays clean. */
.js-phone .form-group,
.js-phone .form-widget {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    width: auto !important;
}
/* Dial-code selector: fixed compact width, never grows nor shrinks (nested or direct child). */
.js-phone .ts-wrapper.ts-wrapper {
    width: 6.75rem !important;
    min-width: 0 !important;
    max-width: none !important;
}
.js-phone > .ts-wrapper,
.js-phone > *:has(.js-phone-country) {
    flex: 0 0 auto !important;
}
/* Number input: takes all the remaining space, keeps its own rounded corners inside the input-group. */
.js-phone > .js-phone-number,
.js-phone > *:has(.js-phone-number) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.js-phone .js-phone-number {
    width: 100% !important;
    border-radius: var(--app-r-sm) !important;
}

/* ============================================================================
   APP STUDIO SHELL (4BRIK-37 · INC-1) - desktop-software chrome for the client
   space + builder. Scoped under `.app-studio`, consumes ONLY the --app-* tokens
   (never the legacy --cs-*), so it cannot leak into `.cs`/`.auth` or tenant themes.
   Ported from the validated DA mockup (studio créatif immersif).
   ============================================================================ */
.app-studio{
  height:100vh; display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:var(--app-workspace); color:var(--app-text);
  font-family:var(--app-font-sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.app-studio *{ box-sizing:border-box; }
.app-studio ::selection{ background:var(--app-brand-weak); }
/* Themed scrollbars: transparent track so the scrolled element's own background
   shows through (never the browser's white), with a discreet translucent thumb.
   Studio surfaces derive from --app-text; the rendered page (.cs) from --cs-fg. */
.app-studio, .app-studio *{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--app-text) 26%, transparent) transparent; }
.app-studio::-webkit-scrollbar, .app-studio *::-webkit-scrollbar{ width:10px; height:10px; }
.app-studio::-webkit-scrollbar-track, .app-studio *::-webkit-scrollbar-track{ background:transparent; }
.app-studio::-webkit-scrollbar-corner, .app-studio *::-webkit-scrollbar-corner{ background:transparent; }
.app-studio::-webkit-scrollbar-thumb, .app-studio *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--app-text) 24%, transparent); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box; }
.app-studio::-webkit-scrollbar-thumb:hover, .app-studio *::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb, var(--app-text) 40%, transparent); }
.cs, .cs *:where(:not(.builder-block__preview *)){ scrollbar-color:color-mix(in srgb, var(--cs-fg) 26%, transparent) transparent; }
.cs::-webkit-scrollbar-thumb, .cs *::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--cs-fg) 24%, transparent); }
.cs::-webkit-scrollbar-thumb:hover, .cs *::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--cs-fg) 40%, transparent); }
/* Keyboard accessibility: visible focus on every interactive shell control. */
.app-studio :is(.as-menu, .as-iconbtn, .as-mi, .as-tool, .as-btn, .as-avatar, .as-window__close) :focus-visible,
.app-studio :is(.as-menu, .as-iconbtn, .as-mi, .as-tool, .as-btn, .as-avatar, .as-window__close):focus-visible,
.auth--studio a:focus-visible, .auth--studio button:focus-visible{
  outline:2px solid var(--app-focus); outline-offset:2px; border-radius:var(--app-r-sm);
}

/* ---- Menu bar ---- */
.as-menubar{
  height:44px; flex:0 0 44px; display:flex; align-items:stretch; gap:2px;
  background:linear-gradient(180deg,var(--app-panel),var(--app-panel-2));
  border-bottom:1px solid var(--app-line); padding-inline:10px;
  /* Above the modal window (z-window): .as-workspace has no stacking context of its own, so the
     window would otherwise outrank the menubar and hide its dropdowns behind the modal. */
  position:relative; z-index:calc(var(--app-z-window) + 5);
}
.as-brand{ display:flex; align-items:center; gap:9px; padding-right:14px; margin-right:6px;
  border-right:1px solid var(--app-line-soft); text-decoration:none; color:inherit; }
.as-brand__cube{ width:22px; height:22px; display:block; }
.as-brand__name{ font-family:var(--app-font-display); font-weight:700; font-size:14.5px; letter-spacing:.2px; }
.as-brand__name b{ color:var(--app-brand); font-weight:800; }
.as-menus{ display:flex; align-items:stretch; }
.as-menu{ background:none; border:0; padding:0 11px; font-size:12.5px; cursor:pointer;
  color:var(--app-text-muted); border-radius:var(--app-r-sm); margin:6px 0;
  transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.as-menu:hover,.as-menu[aria-expanded="true"]{ background:var(--app-control); color:var(--app-text); }
.as-menubar__spacer{ flex:1; }
.as-menubar__right{ display:flex; align-items:center; gap:10px; }
.as-doc{ display:flex; align-items:center; gap:7px; font-family:var(--app-font-mono); font-size:11px;
  color:var(--app-text-muted); background:var(--app-panel-2); border:1px solid var(--app-line-soft);
  padding:4px 10px; border-radius:var(--app-r-pill); }
.as-doc__dot{ width:6px;height:6px;border-radius:50%;background:var(--app-state-good); }
.as-iconbtn{ width:30px;height:30px; display:grid;place-items:center; border:1px solid transparent;
  background:none; border-radius:var(--app-r-sm); cursor:pointer; color:var(--app-text-muted);
  transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.as-iconbtn:hover{ background:var(--app-control); color:var(--app-text); }
.as-iconbtn svg{ width:19px;height:19px; }
.as-avatar{ width:28px;height:28px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--app-brand),var(--app-ai));
  display:grid;place-items:center; color:#160f02; font-weight:700; font-size:11.5px;
  cursor:pointer; text-decoration:none; border:0; }

/* palette dots */
.as-pal{ display:flex; align-items:center; gap:6px; padding:0 8px; margin-right:2px;
  border-right:1px solid var(--app-line-soft); }
.as-pal__dot{ width:15px;height:15px;border-radius:50%; padding:0; cursor:pointer; background:var(--_c);
  border:1.5px solid rgba(255,255,255,.14); transition:transform var(--app-dur-fast),box-shadow var(--app-dur-fast); }
.as-pal__dot:hover{ transform:scale(1.15); }
.as-pal__dot[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--app-panel),0 0 0 3.5px var(--_c); }
.as-pal__dot:focus-visible{ outline:2px solid var(--_c); outline-offset:2px; }

/* Language switcher (FR/EN): a compact segmented toggle in the menubar. */
.as-lang{ display:flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--app-line); border-radius:999px; }
.as-lang__form{ margin:0; display:flex; }
.as-lang__btn{ border:0; background:none; cursor:pointer; padding:2px 8px; border-radius:999px; font-family:var(--app-font-mono);
  font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--app-text-muted);
  transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.as-lang__btn:hover{ color:var(--app-text); }
.as-lang__btn.is-on{ background:var(--app-brand); color:var(--app-brand-ink); }

/* dropdowns */
.as-dropdown{ position:absolute; top:40px; min-width:230px; background:var(--app-panel);
  border:1px solid var(--app-line); border-radius:var(--app-r-md); box-shadow:var(--app-shadow-panel);
  padding:6px; display:none; z-index:calc(var(--app-z-menu) + 20); }
.as-dropdown.is-open{ display:block; animation:as-pop var(--app-dur-fast) ease; }
@keyframes as-pop{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.as-mi{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none;
  border:0; padding:7px 9px; border-radius:var(--app-r-sm); font-size:12.5px; cursor:pointer;
  color:var(--app-text); text-decoration:none; font-family:inherit; }
.as-mi:hover{ background:var(--app-brand-weak); }
.as-mi svg{ width:15px;height:15px; color:var(--app-text-muted); flex:0 0 auto; }
.as-mi__kbd{ margin-left:auto; font-family:var(--app-font-mono); font-size:10.5px; color:var(--app-text-faint); }
.as-mi--ai:hover{ background:var(--app-ai-weak); } .as-mi--ai svg{ color:var(--app-ai); }
.as-mi__key{ margin-left:auto; padding-left:14px; color:var(--app-text-faint); font-weight:500;
  font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto; }
.builder-add__tip .as-mi__key, .builder-tip .as-mi__key{ margin-left:8px; padding-left:0;
  color:color-mix(in srgb, currentColor 55%, transparent); }
/* Disabled menu item: present for mockup fidelity but no backend yet - greyed, no action, never a
   fake working control. */
.as-mi--off{ opacity:.4; cursor:default; pointer-events:none; }
/* Domain chip in the menubar (green dot + site). */
.as-doc-chip{ display:flex; align-items:center; gap:7px; font-family:var(--app-font-mono); font-size:11px;
  color:var(--app-text-muted); background:var(--app-panel-2); border:1px solid var(--app-line-soft);
  padding:4px 10px; border-radius:100px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; transition:color var(--app-dur-fast), border-color var(--app-dur-fast); }
/* Clickable (opens the live site in a new tab): no underline, just a discreet hover. */
a.as-doc-chip:hover{ color:var(--app-text); border-color:var(--app-line); }
.as-doc-chip__dot{ width:6px; height:6px; border-radius:50%; background:var(--app-state-good); flex:none; }
.as-mi-sep{ height:1px; background:var(--app-line-soft); margin:5px 6px; }
.as-mi-label{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--app-text-faint);
  padding:6px 9px 3px; }
.as-dropdown--notifs{ min-width:300px; }
.as-notif{ align-items:center; padding:9px 10px; }
.as-notif + .as-notif{ margin-top:3px; }
.as-notif svg{ flex:0 0 30px; width:30px; height:30px; padding:7px; border-radius:50%;
  background:var(--app-control); color:var(--app-text-muted); box-sizing:border-box; }
.as-notif__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.as-notif__txt > span:first-child{ overflow:hidden; text-overflow:ellipsis; }
.as-notif__time{ color:var(--app-text-faint); font-size:10.5px; }
.as-notif--unread{ background:var(--app-brand-weak); }
.as-notif--unread svg{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-notif-all{ justify-content:center; color:var(--app-brand); font-weight:600; }

/* ---- Workspace ---- */
.as-workspace{ flex:1; position:relative; overflow:auto;
  /* Transparent base so the app grid backdrop (on .app-studio) shows through here
     and in the builder canvas; only the subtle brand glow sits on top. */
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--app-brand) 6%, transparent), transparent 60%);
}
.as-workspace__grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1;
  --_grid:color-mix(in srgb, var(--app-text) 18%, transparent);
  background-image:linear-gradient(var(--_grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--_grid) 1px,transparent 1px);
  background-size:34px 34px; mask-image:radial-gradient(circle at 50% 42%,#000,transparent 82%); }
/* Empty-workspace welcome: centred, in the grid colour, behind the modal (scrim covers it when a
   modal is open); once nothing is open it is what remains on screen. */
.as-welcome{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; }
.as-welcome__title{ margin:0; font-family:var(--app-font-mono); font-size:1.5rem; font-weight:700;
  color:var(--app-text-faint); }
.as-welcome__list{ list-style:disc; margin:0; padding:0 0 0 1.3em; display:inline-block; text-align:left;
  font-family:var(--app-font-mono); color:var(--app-text-faint); font-size:.92rem; }
.as-welcome__list li{ padding:2px 0; }
.as-welcome__list li::marker{ color:var(--app-text-faint); }
.as-welcome__list a{ color:var(--app-text-faint); text-decoration:underline; text-underline-offset:2px; }
/* In-chrome error page (PlatformExceptionListener, signed-in client): centred on the studio backdrop. */
.as-error{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; text-align:center; padding:24px; }
.as-error__code{ margin:0; font-family:var(--app-font-mono); font-size:4rem; font-weight:800; line-height:1;
  color:var(--app-brand); }
.as-error__msg{ margin:0; max-width:34rem; color:var(--app-text-muted); font-size:1rem; }
.as-error .as-btn{ margin-top:6px; }
/* Generic content surface (client-space pages render here until INC-2/3 turn them into windows). */
.as-content{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:2rem 1.5rem 3rem; }
/* With JS active the shell adopts this server-rendered content into the feature window on connect;
   hide it until then so the full-width block never flashes before it snaps into the 600px modal.
   No-JS keeps it visible (the marker is set before paint, cf client_base anti-FOUC script). */
html.js .as-content{ display:none; }
/* Transitional: not-yet-converted legacy pages keep their `.cs` styling on a light
   "document" surface so they stay readable on the dark workspace. */
.as-content > .cs{ background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-panel); overflow:hidden; font-family:var(--app-font-sans); }
.as-content > .cs .cs-main{ margin:0; }

/* Notification / cart count badge on menubar icon buttons */
.as-badge{ position:absolute; top:0; right:0; min-width:15px; height:15px; padding:0 3px;
  border-radius:var(--app-r-pill); background:var(--app-brand); color:var(--app-brand-ink);
  font-family:var(--app-font-sans); font-size:9px; font-weight:700; line-height:15px; text-align:center; }

/* ---- Status bar ---- */
.as-statusbar{ height:32px; flex:0 0 32px; display:flex; align-items:center; gap:14px; padding-inline:12px;
  background:var(--app-panel-2); border-top:1px solid var(--app-line); font-family:var(--app-font-mono);
  font-size:11px; color:var(--app-text-muted); z-index:var(--app-z-status); position:relative; }
.as-statusbar__sep{ width:1px; height:15px; background:var(--app-line); }
.as-statusbar__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
/* ---- Builder statusbar: breakpoint switch + zoom + save state + counts + publish ---- */
.as-statusbar__bp{ display:flex; align-items:center; gap:2px; }
.as-statusbar__bp .as-iconbtn{ width:26px; height:26px; }
.as-statusbar__bp .as-iconbtn svg{ width:16px; height:16px; }
.as-statusbar__bp .as-iconbtn.is-on{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-statusbar__zoom{ display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.as-statusbar__save{ display:flex; align-items:center; gap:6px; color:var(--app-state-good); }
.as-statusbar__save-dot{ width:6px; height:6px; border-radius:50%; background:var(--app-state-good); }
.as-statusbar__count{ font-variant-numeric:tabular-nums; }
.as-statusbar .as-builder__actions{ display:flex; align-items:center; gap:8px; }
.as-statusbar .as-builder__actions form{ margin:0; }
/* History popover opens UPWARD from the statusbar (it sits at the bottom of the screen). */
.as-statusbar .as-builder__history-panel{ top:auto; bottom:calc(100% + 6px); }
/* Artboard = the page-blocks preview; breakpoints/zoom (statusbar) drive its width/scale. The
   floating panels (palette, chat) sit outside it and are unaffected. */
/* The artboard is the single "sheet": its width follows the active breakpoint and its scale the
   zoom, both driven by CSS vars set on .app-studio by customer--canvas (morph-proof). */
.as-artboard{ margin:0 auto; width:100%; max-width:var(--as-artboard-w, 1280px);
  /* Individual translate/scale props, not the `transform` shorthand: a stuck CSS transition on
     `transform` was freezing the shorthand's value. Pan is instant (no transition on translate);
     only zoom eases. */
  translate:var(--as-pan-x, 0px) var(--as-pan-y, 0px); scale:var(--as-artboard-scale, 1); transform-origin:top center;
  transition:max-width var(--app-dur-base) var(--app-ease), scale var(--app-dur-base) var(--app-ease); }
.as-artboard-label{ display:flex; align-items:center; gap:8px; justify-content:center; margin:0 0 12px;
  font-family:var(--app-font-mono); font-size:11px; color:var(--app-text-muted); }
.as-artboard-label__page{ color:var(--app-text); }
.as-artboard-label__dot{ color:var(--app-text-faint); }
.as-artboard-label__status{ margin-left:4px; }
.as-artboard-label__icon{ display:inline-flex; color:var(--app-text); }
.as-artboard-label__icon svg{ width:14px; height:14px; display:block; }
.as-artboard-label__settings{ width:22px; height:22px; margin-left:2px; }
.as-artboard-label__settings svg{ width:14px; height:14px; }
.as-save{ display:flex; align-items:center; gap:6px; color:var(--app-state-good); }
.as-save__dot{ width:6px;height:6px;border-radius:50%;background:var(--app-state-good); }

/* ---- Buttons (shell) ---- */
.as-btn{ font-family:inherit; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:var(--app-r-sm);
  cursor:pointer; border:1px solid var(--app-line); background:var(--app-control); color:var(--app-text);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; position:relative; overflow:hidden;
  transition:background var(--app-dur-fast),border-color var(--app-dur-fast),transform var(--app-dur-fast),box-shadow var(--app-dur-base); }
.as-btn:hover{ background:var(--app-control-hover); transform:translateY(-1px); }
.as-btn:active{ transform:translateY(0); }
.as-btn svg{ width:15px;height:15px; }
.as-btn--primary{ background:var(--app-brand); border-color:var(--app-brand); color:var(--app-brand-ink); }
.as-btn--primary:hover{ background:var(--app-brand-hover); border-color:var(--app-brand-hover); }
/* Modern diagonal sheen sweep on the accent button hover. */
.as-btn--primary::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 34%, rgba(255,255,255,.32) 50%, transparent 66%);
  transform:translateX(-130%); transition:transform .55s var(--app-ease); }
.as-btn--primary:hover::after{ transform:translateX(130%); }
.as-btn--ghost{ background:none; border-color:var(--app-line); } .as-btn--ghost:hover{ background:var(--app-control); }
/* Standalone media/collection action style (Upload, Library, Add ...): neutral border, accent text on
   the field background, at the regular control size (the former .media-field button look). */
.as-btn--outline{ padding:0.4rem 0.8rem; font-size:12.5px; background:var(--cs-bg); border-color:var(--cs-border); color:var(--cs-accent); }
.as-btn--outline:hover{ background:var(--cs-border); }
.as-btn--sm{ padding:4px 10px; font-size:11.5px; }
.as-btn:disabled, .as-btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.as-btn--primary:disabled, .as-btn--primary[disabled]{ background:var(--app-control); border-color:var(--app-line); color:var(--app-text-muted); }

/* ---- Floating panels + tool palette (M2 furniture; markup added next milestone) ---- */
.as-float{ position:absolute; background:var(--app-panel); border:1px solid var(--app-line);
  border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-panel); z-index:var(--app-z-panel); }
.as-grip{ display:flex; align-items:center; gap:8px; padding:9px 11px; cursor:grab;
  border-bottom:1px solid var(--app-line-soft); user-select:none; }
.as-grip:active{ cursor:grabbing; }
.as-grip__dots{ display:grid; grid-template-columns:repeat(2,3px); gap:3px; opacity:.5; }
.as-grip__dots i{ width:3px;height:3px;border-radius:50%;background:var(--app-text-muted);display:block; }
.as-grip h4{ margin:0; font-size:11.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--app-text-muted); }
.as-tools{ padding:7px; display:flex; flex-direction:column; gap:3px; width:52px; z-index:var(--app-z-tools); }
.as-tool{ width:38px;height:38px; display:grid; place-items:center; border-radius:var(--app-r-md);
  border:1px solid transparent; background:none; cursor:pointer; color:var(--app-text-muted);
  position:relative; transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.as-tool svg{ width:19px;height:19px; }
.as-tool:hover{ background:var(--app-control); color:var(--app-text); }
.as-tool.is-active{ background:var(--app-brand); color:var(--app-brand-ink); }
.as-tool--ai{ color:var(--app-ai); } .as-tool--ai.is-active{ background:var(--app-ai); color:#fff; }

/* ============================================================================
   APP LOADER (4BRIK-37) - glassmorphism backdrop + animated 3D brick, ported from
   the BO loader. Always positioned inside .as-workspace (or a scoped element), so it
   NEVER covers the menubar/statusbar. Toggled by assets/utils/shared/loader.js.
   ============================================================================ */
/* The app's own cube loader replaces Turbo's default blue progress bar - hide it. */
.turbo-progress-bar{ display:none !important; }
.app-loader{ position:absolute; inset:0; z-index:var(--app-z-window);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:color-mix(in srgb, var(--app-workspace) 40%, transparent);
  -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2);
  opacity:0; visibility:hidden; transition:opacity .3s var(--app-ease), visibility .3s var(--app-ease); }
.app-loader.is-visible{ opacity:1; visibility:visible; transition:opacity .12s linear, visibility 0s; }
.app-loader__label{ max-width:32ch; text-align:center; font-size:.85rem; color:var(--app-text-muted); }
.app-loader__label:empty{ display:none; }
.app-loader__stage{ position:relative; width:48px; height:48px; perspective:380px;
  animation:al-stage-zoom 2.6s ease-in-out infinite; animation-play-state:paused; }
.app-loader.is-visible .app-loader__stage{ animation-play-state:running; }
.app-loader__stage::before{ content:""; position:absolute; inset:-12%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--app-brand) 22%, transparent), transparent 52%);
  animation:al-glow-pulse 1.3s var(--app-ease) infinite alternate; animation-play-state:paused; }
.app-loader.is-visible .app-loader__stage::before{ animation-play-state:running; }
@property --al-gap{ syntax:"<length>"; inherits:true; initial-value:15px; }
@property --al-shine{ syntax:"<number>"; inherits:false; initial-value:1; }
@property --al-ry{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@property --al-rx{ syntax:"<angle>"; inherits:false; initial-value:-24deg; }
@property --al-tilt{ syntax:"<number>"; inherits:true; initial-value:0.37; }
.app-loader__cube{ position:relative; width:30px; height:30px; margin:9px; transform-style:preserve-3d;
  --al-gap:15px; transform:rotateX(var(--al-rx)) rotateY(var(--al-ry));
  animation:al-cube-spin 1.7s linear infinite, al-cube-tilt 5.6s ease-in-out infinite, al-cube-explode 4s ease-in-out infinite;
  animation-play-state:paused; }
.app-loader.is-visible .app-loader__cube{ animation-play-state:running; }
.app-loader__face{ position:absolute; inset:0; border:1px solid color-mix(in srgb, var(--app-brand) 55%, #000);
  box-shadow:inset 0 0 8px rgba(0,0,0,.22); animation-play-state:paused; }
.app-loader.is-visible .app-loader__face{ animation-play-state:running; }
.app-loader__face--front,.app-loader__face--right,.app-loader__face--left,.app-loader__face--back{
  background:linear-gradient(115deg, rgba(255,255,255, calc(var(--al-shine) * .55)) 0%, rgba(255,255,255,0) 58%),
    color-mix(in srgb, var(--app-brand), #000 calc((1 - var(--al-shine)) * 58%));
  animation:al-face-shine 1.7s linear infinite; animation-play-state:paused; }
.app-loader__face--front{ transform:translateZ(var(--al-gap)); animation-delay:0s; }
.app-loader__face--right{ transform:rotateY(90deg) translateZ(var(--al-gap)); animation-delay:-1.275s; }
.app-loader__face--back{ transform:rotateY(180deg) translateZ(var(--al-gap)); animation-delay:-0.85s; }
.app-loader__face--left{ transform:rotateY(-90deg) translateZ(var(--al-gap)); animation-delay:-0.425s; }
.app-loader__face--top{ transform:rotateX(90deg) translateZ(var(--al-gap));
  background:linear-gradient(115deg, rgba(255,255,255, calc(.4 * (1 - var(--al-tilt)))) 0%, rgba(255,255,255,0) 60%),
    color-mix(in srgb, color-mix(in srgb, var(--app-brand) 35%, #fff), color-mix(in srgb, var(--app-brand) 62%, #000) calc(var(--al-tilt) * 100%)); }
.app-loader__face--bottom{ transform:rotateX(-90deg) translateZ(var(--al-gap));
  background:linear-gradient(115deg, rgba(255,255,255, calc(.32 * var(--al-tilt))) 0%, rgba(255,255,255,0) 60%),
    color-mix(in srgb, color-mix(in srgb, var(--app-brand) 62%, #000), color-mix(in srgb, var(--app-brand) 35%, #fff) calc(var(--al-tilt) * 100%)); }
@keyframes al-cube-spin{ 0%{--al-ry:0deg} 22%{--al-ry:150deg} 78%{--al-ry:210deg} 100%{--al-ry:360deg} }
@keyframes al-cube-tilt{ 0%{--al-rx:-24deg;--al-tilt:.37} 16%{--al-rx:34deg;--al-tilt:1} 34%{--al-rx:-58deg;--al-tilt:0} 50%{--al-rx:24deg;--al-tilt:.89} 70%{--al-rx:-44deg;--al-tilt:.15} 100%{--al-rx:-24deg;--al-tilt:.37} }
@keyframes al-face-shine{ 0%{--al-shine:1} 25%{--al-shine:.5} 50%{--al-shine:.08} 75%{--al-shine:.5} 100%{--al-shine:1} }
@keyframes al-cube-explode{ 0%{--al-gap:15px} 8%{--al-gap:15px} 18%{--al-gap:31px} 28%{--al-gap:15px} 38%{--al-gap:15px} 50%{--al-gap:40px} 62%{--al-gap:15px} 72%{--al-gap:15px} 80%{--al-gap:28px} 88%{--al-gap:15px} 100%{--al-gap:15px} }
@keyframes al-stage-zoom{ 0%{transform:scale(.82)} 18%{transform:scale(1.12)} 42%{transform:scale(1.12)} 58%{transform:scale(.82)} 100%{transform:scale(.82)} }
@keyframes al-glow-pulse{ from{opacity:.2} to{opacity:.45} }
@media (prefers-reduced-motion:reduce){
  .app-loader__cube{ animation:none; transform:rotateX(-24deg) rotateY(-38deg); --al-gap:15px; --al-tilt:.37; }
  .app-loader__face{ animation:none; --al-shine:.72; }
  .app-loader__stage{ animation:none; transform:none; }
  .app-loader__stage::before{ animation:none; }
}

/* ---- Modal windows (features open as windows; M2) ---- */
/* Transparent, but still present + clickable to close: lets the workspace grid backdrop show
   through behind the window (same backdrop as the editor canvas), instead of a veil that would
   dim and blur the grid away. */
.as-scrim{ position:absolute; inset:0; background:transparent;
  z-index:var(--app-z-scrim); display:none; }
.as-scrim.is-open{ display:block; animation:as-fade var(--app-dur-base) ease; }
@keyframes as-fade{from{opacity:0}to{opacity:1}}
/* Positioned inside .as-workspace, so top/height are relative to it (below the chrome). Resizable
   like a desktop window: max width 80vw, min 320px, height clamped to the workspace. */
.as-window{ position:absolute; top:24px; left:50%; transform:translateX(-50%); width:1200px; min-width:640px; max-width:80vw;
  max-height:calc(100% - 48px); background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-win); z-index:var(--app-z-window); display:none; flex-direction:column; overflow:hidden; }
.as-window.is-open{ display:flex; animation:as-fade var(--app-dur-base) ease; }
/* Narrow exception (e.g. Design: a simple form doesn't need the full 1200px). Half width. */
.as-window--narrow{ width:600px; min-width:420px; }

/* --- Media library (WordPress-style): grid + upload/drag-drop + detail panel + delete --- */
/* Fill the window body height (scoped via :has to media windows only) so the detail panel
   can span the full modal height and the grid scrolls on its own. */
.as-window__body:has(.builder-media){ display:flex; padding:0; }
.as-window__body:has(.builder-media) > .cs{ display:flex; flex:1; min-height:0; }
.as-window__body:has(.builder-media) > .cs > .cs-main{ display:flex; flex:1; min-height:0; }
.builder-media{ position:relative; display:flex; flex-direction:column; flex:1; min-height:0; }
/* [hidden] must win over the display rules below (detail/confirm/empty/pager/error). */
.builder-media [hidden]{ display:none !important; }
.builder-media > .builder-page-header{ flex:none; padding:18px 18px 0; }
.builder-media__toolbar{ flex:none; display:flex; align-items:center; gap:14px; padding:14px 18px; }
.builder-media__hint{ font-size:12px; color:var(--app-text-faint); }
/* Grid area (scrolls) on the left, detail docked flush on the right with a divider - no gap. */
.builder-media__layout{ flex:1; min-height:0; display:flex; align-items:stretch; }
.builder-media__gridwrap{ position:relative; flex:1; min-width:0; overflow-y:auto; padding:0 18px 18px; border:1.5px dashed transparent; transition:border-color var(--app-dur-fast), background var(--app-dur-fast); }
/* When the detail panel is open, the grid runs right up to its divider (no empty band). */
.builder-media__layout:has(.builder-media__detail:not([hidden])) .builder-media__gridwrap{ padding-right:0; }
.builder-media__gridwrap.is-dragover{ border-color:var(--app-brand); background:var(--app-brand-weak); }
/* Tiles fill the row width (no empty band before the detail panel); square via aspect-ratio.
   Floor at 120px keeps the size change on panel open/close minimal. */
.builder-media__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.builder-media__tile{ position:relative; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:var(--app-r-sm); overflow:hidden; background:var(--app-control); cursor:pointer; transition:border-color var(--app-dur-fast); }
.builder-media__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.builder-media__tile:hover{ border-color:var(--app-brand-weak); }
/* Selected tile: solid palette (brand) border. */
.builder-media__tile.is-active{ border-color:var(--app-brand); }
.builder-media__empty{ padding:2rem; text-align:center; color:var(--app-text-faint); }
.builder-media__error{ margin:0 0 10px; padding:8px 12px; border-radius:var(--app-r-sm); background:var(--app-brand-weak); color:var(--app-brand); font-size:13px; }
.builder-media__pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.builder-media__detail{ flex:0 0 300px; align-self:stretch; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--app-panel-2); border-left:1px solid var(--app-line); animation:media-detail-in var(--app-dur-base) var(--app-ease); }
@keyframes media-detail-in{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.builder-media__detailhead{ display:flex; align-items:center; justify-content:space-between; }
.builder-media__detailtitle{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); }
.builder-media__detailimg{ width:100%; border-radius:var(--app-r-sm); background:var(--app-control); }
.builder-media__detailname{ font-weight:600; font-size:13px; word-break:break-word; }
.builder-media__meta{ margin:0; display:flex; flex-direction:column; gap:4px; }
.builder-media__meta div{ display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.builder-media__meta dt{ color:var(--app-text-faint); margin:0; }
.builder-media__meta dd{ margin:0; color:var(--app-text); }
.builder-media__urllbl{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); }
.builder-media__urlrow{ display:flex; gap:6px; }
.builder-media__url{ flex:1; min-width:0; }
.builder-media__usages{ margin-top:4px; }
.builder-media__usageslbl{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); margin-bottom:6px; }
.builder-media__usageslist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.builder-media__usage{ font-size:12px; color:var(--app-text); padding:5px 8px; background:var(--app-control); border:1px solid var(--app-line); border-radius:var(--app-r-sm); }
.builder-media__usage b{ color:var(--app-brand); font-weight:700; }
.builder-media__usage--none{ color:var(--app-text-faint); background:transparent; border-style:dashed; }
.builder-media__del{ margin-top:6px; justify-content:center; }
.builder-media__del svg{ width:15px; height:15px; flex:none; }
.builder-media__confirm{ position:absolute; inset:0; z-index:10; display:grid; place-items:center; background:var(--app-overlay); border-radius:var(--app-r-lg); }
.builder-media__confirmcard{ max-width:360px; padding:22px; background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-md); box-shadow:var(--app-shadow-panel); }
.builder-media__confirmwarn{ margin-top:10px; padding:10px 12px; border-radius:var(--app-r-sm); font-size:13px; line-height:1.4; color:var(--app-warn); background:color-mix(in srgb, var(--app-warn) 12%, transparent); }
.builder-media__confirmactions{ display:flex; gap:10px; margin-top:16px; }
.builder-media__confirmactions .as-btn{ flex:1; justify-content:center; }
.as-window__bar{ display:flex; align-items:center; gap:9px; padding:8px 12px; cursor:grab; flex:0 0 auto;
  background:linear-gradient(180deg,var(--app-panel),var(--app-panel-2)); border-bottom:1px solid var(--app-line); }
.as-window__bar:active{ cursor:grabbing; }
/* The title lives in the drag bar (handle); the content's own heading is hidden
   in the modal to avoid the duplicate (see .as-window__body .cs h1). */
.as-window__title{ font-family:var(--app-font-display); font-weight:700; font-size:13px; }
.as-window__recenter{ margin-left:auto; }
.as-window__body{ position:relative; padding:18px; overflow-y:auto; flex:1 1 auto; min-height:0; }

/* Resize handles (desktop-window edges + corners); injected by resizable.js. Kept just inside the
   overflow:hidden box so they are not clipped. */
.as-resize-handle{ position:absolute; z-index:3; }
.as-resize-handle--n{ top:0; left:10px; right:10px; height:6px; cursor:ns-resize; }
.as-resize-handle--s{ bottom:0; left:10px; right:10px; height:6px; cursor:ns-resize; }
.as-resize-handle--e{ right:0; top:10px; bottom:10px; width:6px; cursor:ew-resize; }
.as-resize-handle--w{ left:0; top:10px; bottom:10px; width:6px; cursor:ew-resize; }
.as-resize-handle--ne{ top:0; right:0; width:12px; height:12px; cursor:nesw-resize; }
.as-resize-handle--nw{ top:0; left:0; width:12px; height:12px; cursor:nwse-resize; }
.as-resize-handle--se{ bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; }
.as-resize-handle--sw{ bottom:0; left:0; width:12px; height:12px; cursor:nesw-resize; }
/* Visible grip in the bottom-right corner (diagonal lines), like a desktop window. */
.as-resize-handle--se::after{ content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px;
  pointer-events:none; opacity:.5; clip-path:polygon(100% 0, 100% 100%, 0 100%);
  background:repeating-linear-gradient(-45deg, var(--app-text-muted) 0 1px, transparent 1px 3px); }
.as-window:hover .as-resize-handle--se::after{ opacity:.85; }
.as-window__error{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:40px 24px; text-align:center; color:var(--app-text-muted); }
.as-window__error svg{ color:var(--app-warn); opacity:0.9; }
.as-window__error p{ margin:0; max-width:32ch; font-size:0.9rem; }
/* Legacy content rendered in the shell (content panel or window): remap --cs-*
   onto studio tokens so it follows the active scheme + palette and never looks
   like a Bootstrap page (transitional, until pages are natively converted). */
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs{
  --cs-fg:var(--app-text); --cs-muted:var(--app-text-muted); --cs-accent:var(--app-brand);
  --cs-bg:var(--app-panel-2); --cs-bg-alt:var(--app-control); --cs-border:var(--app-line);
  font-family:var(--app-font-sans);
}
.as-window__body .cs-main{ max-width:none; padding:0; }

/* ---- Studio component skin for legacy content in the shell ----
   Kills the generic/Bootstrap look: studio radii + studio button treatment,
   so no page rendered inside the studio still looks like a Bootstrap app. */
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn:not(.as-btn), form button:not([type=button]):not(.as-btn):not(.builder-add__brick), input[type=submit]:not(.as-btn), button[type=submit]:not(.as-btn):not(.builder-add__brick)):where(:not(.builder-block__preview *)){
  border-radius:var(--app-r-sm); font-family:var(--app-font-sans); font-weight:600;
  padding:5px 12px; font-size:var(--app-text-sm); background:var(--app-brand); color:var(--app-brand-ink); border:1px solid var(--app-brand);
  cursor:pointer; transition:background var(--app-dur-fast),border-color var(--app-dur-fast),transform var(--app-dur-fast),box-shadow var(--app-dur-base);
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn:not(.as-btn), form button:not([type=button]):not(.as-btn):not(.builder-add__brick), input[type=submit]:not(.as-btn), button[type=submit]:not(.as-btn):not(.builder-add__brick)):hover:where(:not(.builder-block__preview *)){
  background:var(--app-brand-hover); border-color:var(--app-brand-hover); opacity:1;
  transform:translateY(-1px);
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn:not(.as-btn), form button:not([type=button]):not(.as-btn):not(.builder-add__brick), input[type=submit]:not(.as-btn), button[type=submit]:not(.as-btn):not(.builder-add__brick)):active:where(:not(.builder-block__preview *)){ transform:translateY(0); }
/* Secondary / ghost buttons keep a transparent studio look. The builder tool
   palette (.builder-add__tool / __brick) is studio chrome, NOT legacy content, so
   it is excluded here and keeps its own flat, borderless treatment. */
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn.btn--ghost, button[type=button]:not(.builder-add__tool):not(.builder-add__brick):not(.builder-empty__btn):not(.builder-block__edit):not(.builder-ai):not(.builder-props__btn):not(.as-iconbtn):not(.builder-props__act):not(.media-field__tile):not(.builder-media__tile):not(.as-btn):not(.builder-bar__act):not(.builder-col__type):not(.builder-stepper__btn):not(.builder-dd__trigger):not(.builder-dd__opt):not(.builder-library__name):not(.builder-library__del):not(.menu-tree__toggle)):where(:not(.builder-block__preview *)){
  background:transparent; color:var(--app-brand); border:1px solid var(--app-line);
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn.btn--ghost, button[type=button]:not(.builder-add__tool):not(.builder-add__brick):not(.builder-empty__btn):not(.builder-block__edit):not(.builder-ai):not(.builder-props__btn):not(.as-iconbtn):not(.builder-props__act):not(.media-field__tile):not(.builder-media__tile):not(.as-btn):not(.builder-bar__act):not(.builder-col__type):not(.builder-stepper__btn):not(.builder-dd__trigger):not(.builder-dd__opt):not(.builder-library__name):not(.builder-library__del):not(.menu-tree__toggle)):hover:where(:not(.builder-block__preview *)){
  background:var(--app-control); border-color:var(--app-line);
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.btn.btn--ghost, button[type=button]:not(.builder-add__tool):not(.builder-add__brick):not(.builder-empty__btn):not(.builder-block__edit):not(.builder-ai):not(.builder-props__btn):not(.as-iconbtn):not(.builder-props__act):not(.media-field__tile):not(.builder-media__tile):not(.as-btn):not(.builder-bar__act):not(.builder-col__type):not(.builder-stepper__btn):not(.builder-dd__trigger):not(.builder-dd__opt):not(.builder-library__name):not(.builder-library__del):not(.menu-tree__toggle)).is-on:where(:not(.builder-block__preview *)){
  background:var(--app-control); border-color:var(--app-line);
}
/* Checkboxes + radios: branded native controls (no unstyled default look). */
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(input[type=checkbox], input[type=radio]):where(:not(.builder-block__preview *)){
  accent-color:var(--app-brand); width:15px; height:15px; cursor:pointer;
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs :is(.cs-card, .cs-section > section, .cart-summary, .brick, .brick-purchase__summary, .builder-assistant, .builder-design, .product-images, .product-variants, .bookable-images),
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs-main.platform > section:not(.cs-section):not(.alert),
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs .builder-page-list > li{
  border-radius:var(--app-r-lg);
}
:is(.as-content, .as-window__body, .auth--studio, .as-builder) .cs .alert{ border-radius:var(--app-r-md); }

/* Modal windows: the title is in the drag bar, so hide the content's own top
   heading; and make the whole modal more compact (smaller type, tighter spacing). */
.as-window__body{ padding:16px; }
.as-window__body .cs h1{ display:none; }
.as-window__body .cs{ font-size:12.5px; line-height:1.45; }
.as-window__body .cs h2{ font-size:13.5px; margin:0 0 .5rem; }
.as-window__body .cs h3,.as-window__body .cs h4{ font-size:12.5px; margin:0 0 .35rem; }
.as-window__body .cs p{ margin:0 0 .5rem; }
.as-window__body .cs :is(label, .field > label, form label):where(:not(.builder-block__preview *)){ font-size:11.5px; }
/* Wide studio windows: content flows into two columns. Whole groups stay intact (a field is never
   split across the gutter); section titles and action rows span the full width. Applied at the
   field-container level (form / list) so it works on every window without per-template markup.
   Collapses to a single column on tablet/mobile. */
@media (min-width: 1025px) {
  /* Wide studio windows: short fields lay out in two columns. Order is preserved (no auto-flow
     reshuffling); section titles, action rows and rich-text editors span both columns. */
  .as-window__body .cs-main.platform form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
  .as-window__body .cs-main.platform form > *{ min-width: 0; }
  .as-window__body .cs-main.platform form > :is(h2, h3, .builder-settings__section, .builder-settings__subsection, .builder-modal__actions, .builder-design__actions, .alert){ grid-column: 1 / -1; }
  .as-window__body .cs-main.platform form > [data-controller~="customer--trix"]{ grid-column: 1 / -1; }
  /* Utility forms inside lists/tables (e.g. a row's delete form) keep their natural single flow. */
  .as-window__body .cs-main.platform :is(table, .builder-list, .builder-page-list) form{ display: block; }
  /* Collections (e.g. SEO custom tags) span both columns - otherwise they sit in one column and
     leave the other empty. Each entry's fields (name + content) sit side by side so no single field
     is full width and no half is left empty. */
  .as-window__body .cs-main.platform form > [data-controller~="customer--form-collection"]{ grid-column: 1 / -1; }
  .as-window__body .cs-main.platform form > [data-controller~="customer--form-collection"] [data-collection-item] > :first-child{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  /* A lone submit button never stretches full width, in any studio window form (the flex:1 fill is
     only for multi-button rows); it sits at its natural size, aligned right. */
  .as-window__body .cs-main.platform .builder-modal__actions{ justify-content: flex-end; }
  .as-window__body .cs-main.platform .builder-modal__actions > button:only-child{ flex: 0 0 auto; }

  /* Article editor: wide main column (body) + narrow sidebar (settings/media). The form is a plain
     block; the two columns each flow top-to-bottom. The body column is the long one, so the sidebar
     never leaves a mid-layout gap. Media/images take the full sidebar width (one column, not 100%). */
  .as-window__body .cs-main.platform form.article-editor-form{ display: block; }
  .as-window__body .cs-main.platform .article-editor__grid{
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
  }
  .as-window__body .cs-main.platform .article-editor__main{ min-width: 0; }
  .as-window__body .cs-main.platform .article-editor__side{ min-width: 0; }

  /* Blog page: each section is a row - the list on the wide left, facing its actions/form on the
     right. A single row-level divider separates sections, so the left and right headers line up on
     the same rule (instead of two mismatched header borders). */
  .as-window__body .cs-main.platform .blog-index__row{
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 0 32px;
    align-items: start;
  }
  .as-window__body .cs-main.platform .blog-index__row + .blog-index__row{
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--cs-border);
  }
  .as-window__body .cs-main.platform .blog-index__list{ min-width: 0; }
  .as-window__body .cs-main.platform .blog-index__aside{ min-width: 0; }
  .as-window__body .cs-main.platform .blog-index__aside form{ display: block; }
  /* Headers inside a row carry no own top rule/space - the row provides the divider, and both
     columns start flush at the row top. */
  .as-window__body .cs-main.platform .blog-index__list > .builder-settings__section:first-child,
  .as-window__body .cs-main.platform .blog-index__aside > :first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
  .as-window__body .cs-main.platform .blog-index__aside > .builder-ai-inline:first-child .builder-settings__subsection{ margin-top: 0; padding-top: 0; border-top: 0; }
  /* Comment moderation row: name + status + actions on the first line, the comment body wrapping
     full-width underneath. The action buttons group stays together to the right (overriding the
     per-form auto-margin used by the article/category/tag rows). */
  .as-window__body .cs-main.platform .blog-index__list .builder-page-list > li:has(.blog-comment-mod__body){ flex-wrap: wrap; }
  .as-window__body .cs-main.platform .blog-comment-mod__actions{ display: flex; gap: 0.4rem; margin-left: auto; flex: 0 0 auto; }
  .as-window__body .cs-main.platform .blog-comment-mod__actions form{ margin: 0; }
  .as-window__body .cs-main.platform .blog-comment-mod__body{ flex: 1 1 100%; margin: 0.5rem 0 0; color: var(--cs-text-soft, var(--cs-text)); white-space: pre-line; }

  /* Create-page form: a plain block. Title + address sit side by side (short, equal-ish height); the
     icon picker spans full width below (wide + short), so there is no uneven-column gap. */
  .as-window__body .cs-main.platform form.page-create-form{ display: block; }
  .as-window__body .cs-main.platform .page-create-form__row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    align-items: start;
  }
  .as-window__body .cs-main.platform .page-create-form__row > .field{ min-width: 0; }
}
.as-window__body .cs .builder-page-header{ margin:0 0 .75rem; }
.as-window__body .cs-main.platform > section:not(.alert){ margin:0 0 .85rem; padding:.85rem 1rem; }
.as-window__body .cs :is(.cs-card, .cs-section){ margin:0 0 .85rem; }
.as-window__body .cs :is(.field, .form-group, form > div):where(:not(.builder-block__preview *)){ margin-bottom:.85rem; }
.as-window__body .cs ul{ margin:.35rem 0; }

/* ============================================================================
   STUDIO SKIN for the builder editor (.builder-*). The LiveComponent markup is
   left untouched (test-covered); only its hardcoded colours/shapes are overridden
   with --app-* tokens so the editor matches the studio DA. Scoped to .as-content.
   ============================================================================ */
.cs .builder-page-header{ margin-bottom:1.25rem; }
.cs .builder-page-header h1{ font-family:var(--app-font-display); }
.cs .builder-page-header a{ color:var(--app-brand); text-decoration:none; }
.cs .builder-page-header .badge{ background:var(--app-brand-weak); color:var(--app-brand); border:0; }

/* Assistant chat = studio panel with the fixed AI (violet) accent. */
.cs .builder-chat{ background:var(--app-panel-2); border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  padding:1rem 1.15rem; box-shadow:none; }
.cs .builder-chat__grip{ display:flex; align-items:center; gap:.5rem; margin:0 0 .75rem; padding:3px 4px; cursor:grab;
  border-radius:var(--app-r-sm); background:linear-gradient(90deg, var(--app-brand-weak), transparent); }
.cs .builder-chat__grip:active{ cursor:grabbing; }
.cs .builder-chat__title{ font-family:var(--app-font-display); font-size:var(--app-text-md); color:var(--app-brand); margin:0; }
.cs .builder-chat__close{ margin-left:auto; flex:none; width:24px; height:24px; display:grid; place-items:center; padding:0;
  background:transparent; border:0; border-radius:var(--app-r-sm); color:var(--app-text-faint); cursor:pointer;
  transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.cs .builder-chat__close:hover{ background:var(--app-control); color:var(--app-text); }
.cs .builder-chat__close svg{ width:15px; height:15px; }
.cs .builder-chat__avatar--head{ width:26px; height:26px; box-shadow:0 0 0 2px var(--app-brand); }

/* Assistant choice: a card per voice preset, its photo avatar + name. */
.cs .voice-choices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:.6rem; margin:.5rem 0 1.1rem; }
.cs .voice-choice{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center;
  padding:1rem .6rem; cursor:pointer; background:var(--app-control); border:1px solid var(--app-line); border-radius:var(--app-r-md);
  transition:border-color var(--app-dur-fast),background var(--app-dur-fast); }
.cs .voice-choice:hover{ border-color:var(--app-brand); }
.cs .voice-choice input:where(:not(.builder-block__preview *)){ position:absolute; opacity:0; width:0; height:0; }
.cs .voice-choice__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--app-line); transition:box-shadow var(--app-dur-fast); }
.cs .voice-choice__name{ font-size:var(--app-text-sm); color:var(--app-text-muted); }
.cs .voice-choice:has(input:checked){ border-color:var(--app-brand); background:var(--app-brand-weak); }
.cs .voice-choice:has(input:checked) .voice-choice__avatar{ box-shadow:0 0 0 2px var(--app-brand); }
.cs .voice-choice:has(input:checked) .voice-choice__name{ color:var(--app-brand); font-weight:600; }
.cs .builder-chat__messages{ list-style:none; margin:0 0 .75rem; padding:0; display:flex; flex-direction:column; gap:.6rem; max-height:320px; overflow-y:auto; }
.cs .builder-chat__avatar--user{ background:conic-gradient(from 200deg,var(--app-brand),var(--app-ai)); color:#160f02; font-weight:700; }
/* Assistant (IA) = soft palette tint (rgba); client = neutral. */
.cs .builder-chat__msg--assistant .builder-chat__bubble{ background:color-mix(in srgb, var(--app-brand) 18%, var(--app-panel)); color:var(--app-text); }
.cs .builder-chat__msg--user .builder-chat__bubble{ background:var(--app-control); color:var(--app-text); }
.cs .builder-chat__meta{ color:var(--app-text-faint); }
.cs .builder-chat__text{ color:inherit; }
.cs .builder-chat__form{ display:flex; flex-direction:column; gap:.5rem; }
/* Suggestion chips: quick prompts that prefill the input. */
.cs .builder-chat__sugg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:.6rem; }
.cs .builder-chat__chip{ background:var(--app-control); border:1px solid var(--app-line); color:var(--app-text-muted);
  border-radius:var(--app-r-pill); padding:4px 10px; font-size:11px; font-family:var(--app-font-sans); cursor:pointer;
  transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.cs .builder-chat__chip:hover{ background:var(--app-ai-weak); color:var(--app-ai); border-color:var(--app-ai); }
/* Small at first (one row), then auto-grows with content up to 100px (JS:
   customer--autosize). min-height keeps one comfortable row when empty. */
.cs .builder-chat__input{ width:100%; resize:none; min-height:36px; max-height:100px; overflow-y:auto;
  background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-sm); color:var(--app-text);
  padding:8px 10px; font-family:var(--app-font-sans); font-size:var(--app-text-sm); line-height:1.45; }
.cs .builder-chat__input:focus{ outline:none; border-color:var(--app-brand); box-shadow:0 0 0 3px var(--app-brand-weak); }
.cs .builder-chat__tools{ display:flex; align-items:stretch; gap:.4rem; }
.cs .builder-chat__icon,.cs .builder-chat__send{ height:34px; display:flex; align-items:center; justify-content:center; padding:0;
  border-radius:var(--app-r-sm); cursor:pointer; }
.cs .builder-chat__icon{ flex:0 0 34px; width:34px; background:transparent; border:1px solid var(--app-line); color:var(--app-text-muted); }
.cs .builder-chat__icon:hover{ background:var(--app-control); color:var(--app-text); }
/* Send takes all the width left after the speaker + mic buttons (colour = DS .as-btn--primary). */
.cs .builder-chat__send{ flex:1 1 auto; min-width:0; gap:7px; }
.cs .builder-chat__icon svg{ width:16px; height:16px; display:block; }
.cs .builder-ai-notice{ color:var(--app-text-muted); font-size:var(--app-text-sm); }

/* Add-block toolbar = studio tool strip. */

/* Blocks = studio cards; the bar = studio surface. */
.cs .builder-blocks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
/* Artboard = the real page preview (white sheet). Blocks stack edge-to-edge inside it; editing is
   done in the Properties widget, not here. */
.cs .as-artboard{ background:var(--app-artboard); color:var(--app-artboard-ink); border-radius:0;
  overflow:hidden; box-shadow:var(--app-shadow-artboard); }
/* ============================================================================
   Section-tree canvas chrome. The preview is FAITHFUL and never deformed: all hover
   affordances live on ABSOLUTE overlays ABOVE the element (frames + glass toolbars),
   never on the content itself, so borders/rings don't shift or distort anything.
   Per level: .builder-ov (glass frame) + .builder-bar (glassmorphism toolbar with the
   drag grip + actions). Toolbars sit at distinct anchors (section top-left, container
   top-center, block top-right) so they never collide. Block accent = --app-brand (no violet).
   ============================================================================ */
.cs .builder-sections{ display:flex; flex-direction:column; }
.cs .builder-sec, .cs .builder-cnt, .cs .builder-col, .cs .builder-block{ position:relative; }
.cs .builder-cnt{ display:grid; gap:.9rem; }
.cs .builder-col{ min-width:0; min-height:56px; }
.cs .builder-block.is-disabled{ opacity:.55; }
.cs .builder-block__preview{ padding:0; }

/* --- Hover frame overlay: a plain coloured border per level (no tint, no glassmorphism),
       pointer-through, no layout impact. Colour set per level via --_ovc. --- */
.cs .builder-ov{ position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:var(--app-r-sm);
  box-shadow:inset 0 0 0 3px var(--_ovc, var(--app-brand)),
    0 0 0 2px color-mix(in srgb, var(--_ovc, var(--app-brand)) 45%, transparent);
  opacity:0; transition:opacity var(--app-dur-fast); }
.cs .builder-ov--sec{ --_ovc:var(--app-ov-sec); }
.cs .builder-ov--cnt{ --_ovc:var(--app-ov-cnt); }
.cs .builder-ov--blk{ --_ovc:var(--app-ov-blk); }
.cs .builder-block:hover > .builder-ov--blk,
.cs .builder-block.is-editing > .builder-ov--blk{ opacity:1; }
.cs .builder-cnt:hover:not(:has(.builder-block:hover)) > .builder-ov--cnt{ opacity:1; }
.cs .builder-sec:has(.builder-bar--sec:hover) > .builder-ov--sec,
.cs .builder-sec:hover:not(:has(.builder-cnt:hover)) > .builder-ov--sec{ opacity:1; }

/* --- Glass toolbars --- */
.cs .builder-bar{ position:absolute; z-index:60; display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:999px; background:color-mix(in srgb, var(--app-panel) 92%, transparent);
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity var(--app-dur-fast), transform var(--app-dur-fast); }
.cs .builder-bar--sec{ top:8px; left:8px; transform:translateY(-4px) scale(.96); transform-origin:top left; }
/* Container bar sits top-RIGHT (not top-center) so it never overlaps the add-block "+" which
   lives bottom-center of the column - on short/empty containers a top-center bar covered it.
   The container and block bars share the top-right anchor but are mutually exclusive (the
   container bar hides when a block is hovered), so they never collide. */
.cs .builder-bar--cnt{ top:8px; right:8px; transform:translateY(-4px) scale(.96); transform-origin:top right; z-index:60; }
.cs .builder-bar--blk{ top:8px; right:8px; transform:translateY(-4px) scale(.96); transform-origin:top right; z-index:61; }
.cs .builder-sec:hover > .builder-bar--sec{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cs .builder-cnt:hover:not(:has(.builder-block:hover)) > .builder-bar--cnt{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cs .builder-block:hover > .builder-bar--blk{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.cs .builder-bar__grip{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:var(--app-text-muted); cursor:grab; transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.cs .builder-bar__grip:hover{ color:var(--app-text); background:color-mix(in srgb, var(--app-text) 12%, transparent); }
.cs .builder-bar__grip:active{ cursor:grabbing; }
.cs .builder-bar__grip svg{ display:block; }
.cs .builder-bar__label{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--app-text-muted); padding:0 4px; }
.cs .builder-bar__sep{ width:1px; height:15px; background:var(--app-line); margin:0 2px; }
.cs .builder-bar__act{ position:relative; display:inline-grid; place-items:center; width:26px; height:26px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--app-text-muted); cursor:pointer;
  transition:background var(--app-dur-fast), color var(--app-dur-fast), transform var(--app-dur-fast); }
.cs .builder-bar__act svg{ width:15px; height:15px; display:block; }
.cs .builder-bar__act:hover{ background:var(--app-brand-weak); color:var(--app-brand); transform:translateY(-1px); }
.cs .builder-bar__act--del:hover{ background:color-mix(in srgb, var(--app-state-crit) 16%, transparent); color:var(--app-state-crit); }
/* Edit = a brand pill with a label (primary action of the block bar). inline-flex (not the
   grid of the round icon buttons) so the icon + label sit side by side. */
.cs .builder-bar__act--edit{ display:inline-flex; align-items:center; width:auto; height:26px; padding:0 11px; gap:5px;
  border-radius:999px; background:var(--app-brand); color:var(--app-brand-ink); }
.cs .builder-bar__act--edit:hover{ background:var(--app-brand-hover); color:var(--app-brand-ink); transform:translateY(-1px); }
.cs .builder-bar__act-label{ font-size:11.5px; font-weight:600; }
/* Global-module badge in a glass bar: palette-tinted chip (globe + library name, ellipsised). */
.cs .builder-bar__global{ display:inline-flex; align-items:center; gap:5px; max-width:150px; padding:3px 9px 3px 7px;
  border-radius:999px; background:var(--app-brand-weak); color:var(--app-brand); font-size:10.5px; font-weight:700; }
.cs .builder-bar__global svg{ width:12px; height:12px; flex:none; }
.cs .builder-bar__global b{ color:var(--app-text); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Bar tooltips open BELOW (above would clip on the top section, artboard overflow:hidden). */
.cs .builder-bar .builder-tip{ bottom:auto; top:calc(100% + 6px); }
.cs .builder-bar__act:hover .builder-tip, .cs .builder-bar__act:focus-visible .builder-tip{ opacity:1; }

/* --- Editable name (Section / Container / Block): click the label to edit it inline in a
   chrome-LESS input (transparent, no border - "invisible"), max 30 chars + a n/30 counter. --- */
.cs .builder-name{ position:relative; display:inline-flex; align-items:center; min-width:0; }
.cs .builder-name__text{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--app-text); cursor:text; padding:2px 4px; border-radius:4px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.cs .builder-name__text:hover{ color:var(--app-text); background:color-mix(in srgb, var(--app-text) 8%, transparent); }
.cs .builder-name.is-unnamed .builder-name__text{ color:var(--app-text-muted); }
.cs .builder-name__input{ display:none; background:transparent; border:0; outline:none; padding:2px 4px; margin:0;
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--app-text); caret-color:var(--app-brand); width:12ch; max-width:170px; }
.cs .builder-name.is-editing .builder-name__text{ display:none; }
.cs .builder-name.is-editing .builder-name__input{ display:inline-block; }
.cs .builder-name__count{ display:none; position:absolute; top:calc(100% + 3px); left:4px; font-size:9px; font-weight:600;
  color:var(--app-text-faint); font-family:var(--app-font-mono, ui-monospace, monospace); letter-spacing:0; text-transform:none; }
.cs .builder-name.is-editing .builder-name__count{ display:block; }

/* --- Drag feedback --- */
.cs .builder-block.is-dragging, .cs .builder-sec.is-dragging{ opacity:.4; }
/* During any drag, silence the hover glass so it never lingers on the dropped element. */
.cs .builder-sections.is-dnd .builder-ov{ opacity:0 !important; }
/* Drop zone: a band spanning the hovered element's width (column / container / section) with a
   minimum height, so any target - even empty - stays easy to hit. No arrow. */
.cs .builder-dropzone{ box-sizing:border-box; min-height:100px; margin:8px 0; border-radius:var(--app-r-sm);
  border:2px dashed var(--app-brand); background:var(--app-brand-weak);
  display:flex; align-items:center; justify-content:center; gap:8px; pointer-events:none; }
.cs .builder-dropzone__label{ font-size:12.5px; font-weight:600; color:var(--app-brand); }
.cs .builder-dropzone svg{ width:16px; height:16px; display:block; color:var(--app-brand); }

/* --- Unified Container tag (bottom-center of each column, reachable): editable name +
   "＋ Bloc" (integrated add-block menu) + delete container. Glass pill, revealed on column
   hover or shown when the column is empty. Replaces the old floating "+" and top-right bar. --- */
.cs .builder-cnt-tag{ position:absolute; left:50%; bottom:10px; transform:translate(-50%,4px); z-index:61;
  display:inline-flex; align-items:center; gap:2px; padding:3px 3px 3px 8px; border-radius:999px; max-width:calc(100% - 16px);
  background:color-mix(in srgb, var(--app-panel) 70%, transparent);
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid color-mix(in srgb, var(--app-line) 80%, transparent); box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity var(--app-dur-fast), transform var(--app-dur-fast); }
.cs .builder-col:hover > .builder-cnt-tag,
.cs .builder-col:not(:has(.builder-block)) > .builder-cnt-tag,
.cs .builder-col:focus-within > .builder-cnt-tag{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.cs .builder-col__add{ display:inline-flex; }
.cs .builder-col__addbtn{ position:relative; display:inline-grid; place-items:center; width:26px; height:26px; padding:0; border:0;
  border-radius:999px; background:var(--app-brand); color:var(--app-brand-ink); font-size:11.5px; font-weight:600; cursor:pointer;
  transition:background var(--app-dur-fast), transform var(--app-dur-fast); }
.cs .builder-col__addbtn:hover{ background:var(--app-brand-hover); transform:translateY(-1px); }
.cs .builder-col__addbtn:hover .builder-tip,
.cs .builder-col__addbtn:focus-visible .builder-tip{ opacity:1; }
.cs .builder-col__addbtn svg{ width:14px; height:14px; transition:transform var(--app-dur); }
.cs .builder-col__addlabel{ line-height:1; }
/* "＋" rotates into a "×" when the menu is open. */
.cs .builder-col__addbtn[aria-expanded="true"] svg{ transform:rotate(135deg); }
.cs .builder-col__menu{ margin:0; inset:auto; z-index:9; pointer-events:auto;
  grid-template-columns:repeat(2,minmax(120px,1fr)); gap:4px; width:max-content; max-width:min(80vw,320px);
  max-height:min(70vh,460px); overflow-y:auto; overscroll-behavior:contain;
  padding:6px; border:1px solid var(--app-line); border-radius:var(--app-r-lg); background:var(--app-panel);
  box-shadow:var(--app-shadow-panel); }
.cs .builder-col__menu:popover-open{ display:grid; animation:builder-menu-in var(--app-dur) cubic-bezier(.2,.8,.3,1); }
@keyframes builder-menu-in{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.cs .builder-col__type{ display:flex; align-items:center; gap:7px; padding:7px 8px; border:1px solid var(--app-line);
  border-radius:var(--app-r-sm); background:var(--app-panel); color:var(--app-text); font-size:11.5px; cursor:pointer; text-align:left; min-width:0;
  transition:background var(--app-dur-fast), border-color var(--app-dur-fast), transform var(--app-dur-fast); }
.cs .builder-col__menu:popover-open .builder-col__type{ animation:builder-item-in .28s ease backwards; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(1){ animation-delay:.02s; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(2){ animation-delay:.05s; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(3){ animation-delay:.08s; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(4){ animation-delay:.11s; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(5){ animation-delay:.14s; }
.cs .builder-col__menu:popover-open .builder-col__type:nth-child(n+6){ animation-delay:.17s; }
@keyframes builder-item-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cs .builder-col__type:hover{ border-color:var(--app-brand); background:var(--app-brand-weak); transform:translateY(-1px); }
.cs .builder-col__type svg{ width:16px; height:16px; flex:none; color:var(--app-text-muted); }
.cs .builder-col__type span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Group headers (Éléments / Bibliothèque) span both menu columns. */
.cs .builder-col__group{ grid-column:1 / -1; padding:5px 4px 1px; font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--app-text-faint); }
.cs .builder-col__group:first-child{ padding-top:2px; }
.cs .builder-col__type--lib svg{ color:var(--app-brand); }
.cs .builder-col__badge{ margin-left:auto; flex:none; font-style:normal; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; padding:1px 6px; border-radius:100px; background:var(--app-brand-weak); color:var(--app-brand); }

@media (prefers-reduced-motion:reduce){
  .cs .builder-bar, .cs .builder-ov, .cs .builder-bar__act, .cs .builder-col__addbtn, .cs .builder-col__addbtn svg,
  .cs .builder-col__menu, .cs .builder-col__type{ transition-duration:0s !important; animation:none !important; }
}
/* Floating panels are wider so labelled fields/buttons breathe. Width set on the compound
   selector so it beats the generic `.builder-panel{width:236px}` declared later in the file. */
.builder-panel.builder-pages{ width:300px; }
.builder-panel.builder-props{ right:18px; top:112px; width:360px; }
/* position:relative scopes the canonical .app-loader (absolute inset:0) to the panel body. */
/* Body = the non-scrolling positioning box (fills the panel below the grip); the .app-loader
   (absolute inset:0) therefore covers the WHOLE visible widget content, never scrolling away.
   The actual scroll lives on the inner .builder-props__scroll wrapper. */
.builder-props__body{ position:relative; overflow:hidden; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* Charte spacing (design-system .props-body): flex column, gap 15px between field-groups. The form
   and the content wrapper are flex columns too so every field/brief/actions is spaced by gap - the
   charte lays out with gap, never with .field margins. */
.builder-props__scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px; display:flex; flex-direction:column; gap:15px; }
.cs .builder-props__content{ display:flex; flex-direction:column; gap:15px; }
.cs .builder-props__content .builder-block__form{ display:flex; flex-direction:column; gap:15px; }
.cs .builder-props__content .builder-block__form > div:not(.field--check){ display:flex; flex-direction:column; gap:15px; }
/* Form-shaped skeleton shown (in place of the real content, under the glass loader) while
   switching block, so the previous block's values never flash - same idea as the BO CRUD drawer.
   The glass .app-loader stays on top and blurs THIS skeleton, not stale data. */
/* Real content hidden while the skeleton shows (editBlock round-trip). */
.cs .builder-props__content.is-loading{ display:none; }
/* Hidden by default (CSS-driven, no reliance on the loading plugin's connect-time hide, which only
   settled after the first round-trip and left the placeholder stuck on the first panel open); shown
   only while the editBlock action is in flight. */
.cs .builder-props__skeleton{ display:none; flex-direction:column; gap:12px; }
.cs .builder-props__skeleton.is-active{ display:flex; }
.cs .builder-props__skel{ display:block; border-radius:var(--app-r-sm);
  background:linear-gradient(100deg, var(--app-control) 30%, color-mix(in srgb, var(--app-text) 12%, var(--app-control)) 50%, var(--app-control) 70%);
  background-size:220% 100%; animation:builder-skeleton-shimmer 1.4s ease-in-out infinite; }
.cs .builder-props__skel--label{ width:34%; height:.7rem; }
.cs .builder-props__skel--input{ width:100%; height:2rem; }
.cs .builder-props__skel--area{ width:100%; height:4rem; }
.cs .builder-props__skel--row{ width:100%; height:2.1rem; }
@keyframes builder-skeleton-shimmer{ 0%{ background-position:220% 0; } 100%{ background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce){ .cs .builder-props__skel{ animation:none; } }
.builder-props__empty{ margin:0; color:var(--app-text-muted); font-size:.85rem; text-align:center; padding:1rem .5rem; }

/* --- Properties: contextual breadcrumb (replaces level tabs). Current level highlighted with a
   brand ring; parents are clickable to reopen. Level dots: section brand / container teal / block
   brand (no violet). --- */
.cs .builder-panel__level{ color:var(--app-text-faint); font-weight:600; }
.cs .builder-crumbs{ display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:9px 12px; flex:0 0 auto;
  border-bottom:1px solid var(--app-line-soft); background:var(--app-panel-2); }
.cs .builder-crumb{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:100px;
  border:1px solid transparent; background:none; color:var(--app-text-muted); font-size:11px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background var(--app-dur-fast), color var(--app-dur-fast), border-color var(--app-dur-fast); }
.cs .builder-crumb__lvl{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--app-brand); }
.cs .builder-crumb--cnt .builder-crumb__lvl{ background:#3fc9c2; }
.cs .builder-crumb:hover{ color:var(--app-text); background:color-mix(in srgb, var(--app-text) 7%, transparent); }
.cs .builder-crumb.is-current{ color:var(--app-text); background:var(--app-panel); border-color:var(--app-line);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--app-brand) 45%, transparent); cursor:default; }
.cs .builder-crumb-sep{ color:var(--app-text-faint); flex:none; display:grid; place-items:center; }
.cs .builder-crumb-sep svg{ width:13px; height:13px; }

/* --- Properties: tabs, options search --- */
.cs .builder-props__tabs{ flex:none; }
.cs .builder-props__tabs .builder-props__tab{ flex-direction:row; justify-content:center; text-align:center;
    padding:7px 6px; font-size:11.5px; font-weight:600; color:var(--app-text-muted); background:var(--app-panel-2); }
.cs .builder-props__tabs .builder-props__tab:hover{ color:var(--app-text); }
.cs .builder-props__tabs .builder-props__tab.is-on{ color:var(--app-brand); background:var(--app-brand-weak); }
.cs .builder-props__tabpane[hidden]{ display:none; }
.cs .builder-props__tabpane{ display:flex; flex-direction:column; gap:15px; }

/* --- Properties: field groups, fields, rows --- */
.cs .builder-fieldgrp{ display:flex; flex-direction:column; gap:7px; }
.cs .builder-fieldgrp__body{ display:flex; flex-direction:column; gap:7px; }
.cs details.builder-fieldgrp[hidden]{ display:none; }
.cs details.builder-fieldgrp > summary{ display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; }
.cs details.builder-fieldgrp > summary::-webkit-details-marker{ display:none; }
.cs details.builder-fieldgrp > summary::after{ content:''; width:7px; height:7px; margin-left:auto; flex:none;
    border-right:1.5px solid var(--app-text-faint); border-bottom:1.5px solid var(--app-text-faint);
    transform:rotate(45deg) translate(-2px, -2px); transition:transform var(--app-dur-fast); }
.cs details.builder-fieldgrp[open] > summary::after{ transform:rotate(225deg) translate(-1px, -1px); }
.cs .builder-fieldgrp__lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--app-text-faint); }
.cs .builder-field{ display:flex; flex-direction:column; gap:5px; }
.cs .builder-field > label{ font-size:11.5px; color:var(--app-text-muted); }
.cs .builder-field__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.cs .builder-field__head > label{ font-size:11.5px; color:var(--app-text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.cs .builder-varbtn{ position:relative; flex:none; display:grid; place-items:center; width:22px; height:22px;
  padding:0; border:1px solid transparent; border-radius:var(--app-r-sm); background:transparent;
  color:var(--app-text-faint); cursor:pointer;
  transition:color var(--app-dur-fast), border-color var(--app-dur-fast), background var(--app-dur-fast); }
.cs .builder-varbtn::after{ content:""; position:absolute; inset:-11px; }
.cs .builder-varbtn svg{ display:block; width:14px; height:14px; }
.cs .builder-varbtn:hover, .cs .builder-varbtn[aria-expanded="true"]{
  color:var(--app-brand); border-color:var(--app-line); background:var(--app-brand-weak); }
.cs .builder-varbtn:focus-visible{ outline:2px solid var(--app-focus); outline-offset:2px; }
.cs .builder-vars{ margin:0; inset:auto; z-index:10; pointer-events:auto;
  grid-template-columns:1fr; gap:2px; width:max-content; max-width:min(86vw,300px);
  max-height:min(60vh,380px); overflow-y:auto; overscroll-behavior:contain;
  padding:6px; border:1px solid var(--app-line); border-radius:var(--app-r-lg); background:var(--app-panel);
  box-shadow:var(--app-shadow-panel); }
.cs .builder-vars:popover-open{ display:grid; animation:builder-menu-in var(--app-dur) cubic-bezier(.2,.8,.3,1); }
.cs .builder-vars__group{ padding:6px 4px 2px; font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--app-text-faint); }
.cs .builder-vars__group:first-child{ padding-top:2px; }
.cs .builder-vars__opt{ display:grid; gap:1px; padding:6px 8px; border:1px solid transparent;
  border-radius:var(--app-r-sm); background:transparent; cursor:pointer; text-align:left; min-width:0;
  transition:background var(--app-dur-fast), border-color var(--app-dur-fast); }
.cs .builder-vars__opt:hover{ border-color:var(--app-brand); background:var(--app-brand-weak); }
.cs .builder-vars__opt:focus-visible{ outline:2px solid var(--app-focus); outline-offset:-2px; }
.cs .builder-vars__code{ font-family:var(--app-font-mono); font-size:11px; color:var(--app-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cs .builder-vars__desc{ font-size:10.5px; color:var(--app-text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  .cs .builder-vars:popover-open{ animation:none; }
}
/* Custom-CSS textarea (advanced group): monospace + vertical resize. */
.cs .builder-inp--area{ resize:vertical; min-height:64px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11.5px; }
.cs .builder-uuid{ display:flex; align-items:center; gap:6px; min-width:0; padding:5px 5px 5px 8px;
    background:var(--app-panel-2); border:1px solid var(--app-line-soft); border-radius:var(--app-r-sm); }
.cs .builder-uuid__val{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-family:var(--app-font-mono); font-size:11px; color:var(--app-text-muted); user-select:all; }
.cs .builder-uuid__btn{ flex:none; }
.cs .builder-uuid__btn svg{ width:14px; height:14px; }
.cs .builder-uuid__done{ flex:none; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-good);
    opacity:0; transition:opacity var(--app-dur-fast); }
.cs .builder-uuid.is-copied .builder-uuid__done{ opacity:1; }
.cs .builder-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }

/* --- Properties: segmented control (section width). Divider via a 1px gap over the line colour,
   never a directional border on the rounded shell. --- */
.cs .builder-seg{ display:flex; gap:1px; background:var(--app-line); border:1px solid var(--app-line);
  border-radius:var(--app-r-sm); overflow:hidden; }
.cs .builder-seg__b{ flex:1; display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px;
  background:var(--app-panel-2); border:0; color:var(--app-text-muted); cursor:pointer; font-size:11px;
  transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.cs .builder-seg__b svg{ width:34px; height:19px; }
.cs .builder-seg__b:hover{ color:var(--app-text); }
.cs .builder-seg__b.is-on{ background:var(--app-brand-weak); color:var(--app-brand); }

/* --- Properties: column layout picker --- */
.cs .builder-laygroup{ display:flex; flex-direction:column; gap:5px; }
.cs .builder-laygroup__t{ font-size:10.5px; color:var(--app-text-faint); }
.cs .builder-layouts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.cs .builder-lay{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px 6px;
  background:var(--app-panel-2); border:1px solid var(--app-line); border-radius:var(--app-r-sm); cursor:pointer;
  transition:border-color var(--app-dur-fast), box-shadow var(--app-dur-fast); }
.cs .builder-lay:hover{ border-color:color-mix(in srgb, var(--app-brand) 50%, var(--app-line)); }
.cs .builder-lay.is-on{ border-color:var(--app-brand); box-shadow:inset 0 0 0 1px var(--app-brand); }
.cs .builder-lay__cells{ display:flex; gap:2px; width:100%; height:16px; }
.cs .builder-lay__cells i{ background:color-mix(in srgb, var(--app-brand) 30%, var(--app-control)); border-radius:2px; }
.cs .builder-lay.is-on .builder-lay__cells i{ background:var(--app-brand); }
.cs .builder-lay__lbl{ font-size:9.5px; color:var(--app-text-muted); font-family:var(--app-font-mono); }

/* --- Properties: background colour swatch --- */
.cs .builder-swatchline{ display:flex; align-items:center; gap:9px; min-width:0; }
/* The hex input must fill the row and shrink (overrides the props-body `flex:0 0 auto` on inputs,
   which otherwise keeps it at intrinsic width and overflows the fixed-width panel). */
.cs .builder-props__body .builder-swatchline .builder-swatch{ flex:0 0 34px; width:34px; max-width:34px; }
.cs .builder-props__body .builder-swatchline .builder-inp{ flex:1 1 0; min-width:0; width:auto; }
.cs .builder-swatch{ width:34px; height:30px; flex:none; padding:2px; border:1px solid var(--app-line);
  border-radius:var(--app-r-sm); background:var(--app-panel-2); cursor:pointer; }
/* min-width:0 + width:auto let the hex input shrink inside the flex row (the generic props
   input rule forces width:100%, which otherwise pushes the panel wider → horizontal scroll). */
.cs .builder-swatchline .builder-inp{ flex:1; min-width:0; width:auto; }

/* --- Properties: custom number stepper (−/input/+), native spinners removed. The input resets the
   generic props-body control chrome (!important: the shared :is(input…) selector out-specifies a
   plain class here). --- */
.cs .builder-stepper{ display:flex; align-items:stretch; border:1px solid var(--app-line); border-radius:var(--app-r-sm);
  overflow:hidden; background:var(--app-panel-2); }
.cs .builder-stepper__input{ flex:1; min-width:0; text-align:center; font-family:var(--app-font-mono);
  border:0 !important; background:transparent !important; border-radius:0 !important; padding:7px 4px !important; }
.cs .builder-stepper__input::-webkit-outer-spin-button,
.cs .builder-stepper__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cs .builder-stepper__input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.cs .builder-stepper__btn{ flex:none; width:30px; display:grid; place-items:center; border:0; background:var(--app-panel-2);
  color:var(--app-text-muted); cursor:pointer; transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.cs .builder-stepper__btn:first-child{ border-right:1px solid var(--app-line); }
.cs .builder-stepper__btn:last-child{ border-left:1px solid var(--app-line); }
.cs .builder-stepper__btn:hover{ background:var(--app-control); color:var(--app-text); }
.cs .builder-stepper__btn svg{ width:14px; height:14px; }
.cs :is(.builder-stepper__input, .builder-stepper__btn, .builder-dd__trigger):disabled{ opacity:.4; cursor:not-allowed; }
.cs .builder-stepper__btn:disabled:hover{ background:var(--app-panel-2); color:var(--app-text-muted); }

/* --- Properties: custom dropdown (replaces native <select>) --- */
.cs .builder-dd{ position:relative; }
/* The native <select> is kept for form submission but hidden; the styled dropdown drives it. */
.cs .builder-dd__native{ display:none; }
.cs .builder-dd__trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--app-panel-2); border:1px solid var(--app-line); border-radius:var(--app-r-sm); padding:0.55rem 0.7rem;
  color:var(--app-text); font-size:12px; line-height:1.45; font-family:inherit; cursor:pointer; text-align:left;
  transition:border-color var(--app-dur-fast); }
.cs .builder-dd.is-open .builder-dd__trigger, .cs .builder-dd__trigger:focus{ outline:none; border-color:var(--app-line); box-shadow:0 0 0 3px rgba(29, 78, 216, 0.15); }
/* Selector icon = the Tom Select caret (small filled triangle), for consistency with the enhanced
   Tom Select fields; flips up when open. */
.cs .builder-dd__chev{ width:8px; height:4px; color:var(--app-text-muted); flex:none; transition:transform var(--app-dur-fast); }
.cs .builder-dd.is-open .builder-dd__chev{ transform:rotate(180deg); }
.cs .builder-dd__menu{ margin:0; inset:auto; z-index:20; pointer-events:auto; flex-direction:column;
  background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-sm); box-shadow:var(--app-shadow-panel);
  padding:4px; max-height:min(60vh,220px); overflow-y:auto; overscroll-behavior:contain; }
.cs .builder-dd__menu:popover-open{ display:flex; }
.cs .builder-dd__opt{ display:flex; align-items:center; text-align:left; padding:7px 9px; border:0; background:none;
  border-radius:var(--app-r-sm); color:var(--app-text-muted); font-size:12px; font-family:inherit; cursor:pointer;
  transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.cs .builder-dd__opt:hover{ background:var(--app-control); color:var(--app-text); }
.cs .builder-dd__opt[aria-selected="true"]{ color:var(--app-brand); }

/* --- Properties: dimension field (number stepper + unit picker) --- */
.cs .builder-dim__row{ display:flex; align-items:stretch; gap:8px; min-width:0; }
.cs .builder-dim__row .builder-stepper{ flex:1 1 auto; min-width:0; }
.cs .builder-dim__unit{ flex:none; width:72px; }
.cs .builder-dim__unit .builder-dd__trigger{ padding:7px 8px; font-family:var(--app-font-mono); }
.cs .builder-dim__menu{ min-width:72px; }
.cs .builder-dim__menu .builder-dd__opt{ font-family:var(--app-font-mono); justify-content:center; }
.cs .builder-dim.is-auto .builder-stepper{ opacity:.45; pointer-events:none; }

/* --- Properties: spacing group (padding / margin) --- */
/* One side per row (the panel is too narrow for a 2-col grid of stepper + unit): label on the
   left, then the number stepper (grows) + the unit picker - so the number field stays usable. */
.cs .builder-spacing__grid{ display:flex; flex-direction:column; gap:7px; }
.cs .builder-spacing .builder-dim{ flex-direction:row; align-items:center; gap:9px; }
.cs .builder-spacing .builder-dim > label{ flex:none; width:52px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cs .builder-spacing .builder-dim__row{ flex:1; min-width:0; }

/* --- Properties: section / container delete button (full-width, danger) --- */
.cs .builder-props__del{ display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:9px 12px; border:1px solid color-mix(in srgb, var(--app-crit) 40%, var(--app-line));
  border-radius:var(--app-r-sm); background:none; color:var(--app-crit); font-size:12px; font-weight:600; cursor:pointer;
  transition:background var(--app-dur-fast), color var(--app-dur-fast); }
.cs .builder-props__del svg{ width:15px; height:15px; }
.cs .builder-props__del:hover{ background:var(--app-crit); color:#fff; }

/* Global-element toggle (top of the properties widget). */
.cs .builder-props__global{ display:flex; align-items:flex-start; gap:10px; margin:0 12px 12px; padding:10px 12px;
  border:1px solid var(--app-line); border-radius:var(--app-r-sm); background:var(--app-panel-2); cursor:pointer; }
.cs .builder-props__global input:where(:not(.builder-block__preview *)){ margin-top:1px; accent-color:var(--app-brand); flex:none; }
.cs .builder-props__globaltt{ font-size:12.5px; min-width:0; }
.cs .builder-props__globaltt b{ display:block; color:var(--app-text); font-weight:700; }
.cs .builder-props__globaltt span{ display:block; color:var(--app-text-faint); font-size:11.5px; }
.cs .builder-props__note{ margin:-4px 12px 12px; font-size:11.5px; color:var(--app-text-faint); }

/* Charte `.field` = label above control, flex gap 5, NO margin (container gap handles rhythm).
   Compound group (.field--group) = gap 7 like the charte `.fieldgrp`. Checkbox rows keep their
   own horizontal layout. */
.cs .builder-props__body .field:not(.field--check){ display:flex; flex-direction:column; gap:5px; margin:0; }
.cs .builder-props__body .field--check{ margin:0; }
.cs .builder-props__body .field--group:where(:not(.builder-block__preview *)){ gap:7px; }
.cs .builder-props__body .field label{ font-size:11.5px; color:var(--app-text-muted); }
/* Inside a flex-column .field, form controls must keep their intrinsic height (a textarea rows=N
   otherwise flex-shrinks to ~1 line). */
.cs .builder-props__body .field :is(input, select, textarea){ flex:0 0 auto; }

/* LiveCollection in the props widget (e.g. Services items): each entry delimited by the shell
   divider; both buttons are the shell .as-btn component (Ajouter = --primary, exactly like the
   statusbar "Mettre à jour"; Retirer = normal), full width. No bespoke colour/hover - the shell
   component carries them, so the hover matches the rest of the studio. */
.cs .builder-props__body .builder-coll__item{ display:flex; flex-direction:column; gap:7px;
  padding:12px 0; border-top:1px solid var(--app-line); }
.cs .builder-props__body .builder-coll__item:first-of-type{ border-top:0; padding-top:0; }
.cs .builder-props__body .builder-coll__remove{ width:100%; justify-content:center; }
.cs .builder-props__body .builder-coll__add{ width:100%; justify-content:center; margin-top:10px; }

/* AI brief: a textarea (autogrow) using the exact same chrome as the block fields (inherits the
   generic input style above); no embedded button. */
.cs .builder-props__brief{ resize:none; min-height:40px; }

/* Bottom action bar: 5 shell icon buttons (.as-iconbtn, same as the menubar/statusbar icon buttons)
   filling the row equally. The ONLY thing added on top of the shell component is the equal-width
   row layout + the DS tooltip; the look and hover come straight from .as-iconbtn. */
.builder-props__actions{ display:flex; gap:6px; padding-top:12px; border-top:1px solid var(--app-line-soft); }
.cs .builder-props__actions .as-iconbtn{ flex:1 1 0; width:auto; height:34px; position:relative; }
.cs .builder-props__act--delete{ color:var(--app-crit); }
.cs .builder-props__act--delete:hover{ background:var(--app-crit); color:#fff; }
.cs .builder-props__act--ai{ color:var(--app-ai); }

/* DS tooltip (same chrome as the palette `.builder-add__tip`), shown above the button on hover/focus. */
.cs .builder-tip{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) scale(.96);
  background:var(--app-panel-2); border:1px solid var(--app-line); color:var(--app-text); font-size:11px; padding:4px 9px;
  border-radius:var(--app-r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--app-dur-fast);
  box-shadow:var(--app-shadow-panel); z-index:6; }
.cs .builder-props__act:hover .builder-tip,
.cs .builder-props__act:focus-visible .builder-tip{ opacity:1; }

/* Media field inside the Properties widget: DS layout + a thumbnail-grid médiathèque
   (scoped to the widget so the shared shop media-field keeps its own styling). */
.cs .builder-props__body .media-field{ display:flex; flex-direction:column; gap:8px; }
.cs .builder-props__body .media-field__ui{ display:flex; flex-direction:column; gap:8px; }
/* The controller toggles visibility via the `hidden` attribute; these elements set an explicit
   `display`, so honour `[hidden]` here (author `display` otherwise beats the UA `[hidden]` rule). */
.cs .builder-props__body .media-field__preview[hidden],
.cs .builder-props__body .media-field__library[hidden]{ display:none; }
.cs .builder-props__body .media-field__preview{ width:100%; max-width:160px; border:1px solid var(--app-line); border-radius:var(--app-r-sm); display:block; }
.cs .builder-props__body .media-field__name{ font-size:11px; color:var(--app-text-muted); word-break:break-word; }
.cs .builder-props__body .media-field__actions{ display:flex; gap:6px; }
.cs .builder-props__body .media-field__actions .as-btn{ flex:1 1 0; justify-content:center; }
.cs .builder-props__body .media-field__library{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:8px;
  border:1px solid var(--app-line); border-radius:var(--app-r-sm); background:var(--app-panel-2); max-height:220px; overflow-y:auto; }
.cs .builder-props__body .media-field__tile{ padding:0; aspect-ratio:1; border:1px solid var(--app-line); border-radius:var(--app-r-sm);
  background:var(--app-panel); overflow:hidden; cursor:pointer; transition:border-color var(--app-dur-fast); }
.cs .builder-props__body .media-field__tile:hover{ border-color:var(--app-brand); }
.cs .builder-props__body .media-field__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs .builder-props__body .media-field__empty{ grid-column:1 / -1; margin:0; text-align:center; color:var(--app-text-muted); font-size:12px; }
.cs .builder-props__body .media-field__error{ margin:0; color:var(--app-crit); font-size:11.5px; }

/* Closable floating panels: hidden when .app-studio carries the closed flag (reopen from Affichage). */
.app-studio.as-panel-pages-closed .builder-pages{ display:none; }
.app-studio.as-panel-props-closed .builder-props{ display:none; }
.app-studio.as-panel-library-closed .builder-library{ display:none; }
/* Panel close (X) in the grip, mirroring the assistant's close affordance. */
.builder-panel__close{ margin-left:auto; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:none; border-radius:var(--app-r-sm); color:var(--app-text-muted); cursor:pointer; padding:0;
  transition:background var(--app-dur-fast),color var(--app-dur-fast); }
.builder-panel__close:hover{ background:var(--app-control); color:var(--app-text); }
.builder-panel__close svg{ width:15px; height:15px; display:block; }
/* When the Pages panel keeps its "+" act, the close sits after it (no extra auto-margin needed). */
.builder-panel__grip .builder-panel__act + .builder-panel__close{ margin-left:4px; }

/* Screen-reader-only utility. */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Page-icon picker: a radio grid; the native radio is hidden, each glyph tile is the target. */
.cs .page-icon-picker{ display:grid; grid-template-columns:repeat(auto-fill, 40px); gap:6px; }
.cs .page-icon-picker__opt{ position:relative; display:flex; cursor:pointer; }
.cs .page-icon-picker__input{ position:absolute; width:1px; height:1px; opacity:0; }
.cs .page-icon-picker__glyph{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1;
  border-radius:var(--app-r-sm); border:1px solid var(--app-line); background:var(--app-panel); color:var(--app-text-muted);
  transition:background var(--app-dur-fast),color var(--app-dur-fast),border-color var(--app-dur-fast); }
.cs .page-icon-picker__glyph svg{ width:18px; height:18px; display:block; }
.cs .page-icon-picker__opt:hover .page-icon-picker__glyph{ border-color:var(--app-brand); color:var(--app-text); }
.cs .page-icon-picker__input:checked + .page-icon-picker__glyph{ background:var(--app-brand-weak); border-color:var(--app-brand); color:var(--app-brand); }
.cs .page-icon-picker__input:focus-visible + .page-icon-picker__glyph{ box-shadow:0 0 0 3px var(--app-brand-weak); border-color:var(--app-brand); }
/* Empty-state lives on the page canvas: use page (--cs-*) tokens so it reads on any page theme. */
.cs .builder-empty{ display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--cs-muted);
  padding:3rem 1.5rem; text-align:center; }
.cs .builder-empty__icon{ width:34px; height:34px; color:var(--cs-muted); opacity:.5; margin-bottom:.25rem; }
.cs .builder-empty__title{ margin:0; font-family:var(--app-font-display); font-size:1.05rem; color:var(--cs-fg); opacity:.9; }
.cs .builder-empty__hint{ margin:0; max-width:34ch; font-size:.85rem; color:var(--cs-muted); }
.cs .builder-empty__actions{ display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; justify-content:center; }
.cs .builder-empty__btn{ background:transparent; border:1px solid var(--cs-border); color:var(--cs-fg);
  border-radius:var(--app-r-sm); padding:6px 12px; font-size:var(--app-text-sm); font-family:var(--app-font-sans); cursor:pointer;
  transition:background var(--app-dur-fast),border-color var(--app-dur-fast),color var(--app-dur-fast); }
.cs .builder-empty__btn:hover{ background:color-mix(in srgb, var(--cs-accent) 12%, transparent); border-color:var(--cs-accent); color:var(--cs-accent); }

/* Versions list = studio rows. */
.cs .builder-versions{ margin-top:1.5rem; }
.cs .builder-versions h2{ font-family:var(--app-font-display); font-size:var(--app-text-md); }
.cs .builder-versions__item{ border-bottom:1px solid var(--app-line-soft); }

/* Builder delete modal = studio surface (radius already capped 70vh). The generation overlay keeps
   the .app-loader glass backdrop (no override here). */
.builder-overlay__box,.builder-modal__box{ background:var(--app-panel); color:var(--app-text); border:1px solid var(--app-line); border-radius:var(--app-r-lg); }
.builder-modal{ background:var(--app-overlay); backdrop-filter:blur(3px); }
.builder-modal__confirm{ background:var(--app-state-crit); border-radius:var(--app-r-sm); }
.builder-overlay__cancel{ background:transparent; border:1px solid var(--app-line); color:var(--app-text); border-radius:var(--app-r-sm); }

/* Save-to-library modal: name + a global/copy toggle. */
.cs .builder-libsave{ width:min(420px, calc(100vw - 32px)); text-align:left; }
.cs .builder-libsave__title{ display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:14px; font-weight:800; color:var(--app-text); }
.cs .builder-libsave__title svg{ width:16px; height:16px; color:var(--app-brand); }
.cs .builder-libsave__help{ margin:0 0 14px; font-size:12.5px; color:var(--app-text-muted); }
.cs .builder-libsave__lbl{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); margin-bottom:5px; }
.cs .builder-libsave__input{ width:100%; background:var(--app-panel-2); border:1px solid var(--app-line); border-radius:var(--app-r-sm);
  padding:9px 10px; color:var(--app-text); font-family:inherit; font-size:12.5px; }
.cs .builder-libsave__input:focus{ outline:none; box-shadow:0 0 0 3px var(--app-brand-weak); }
.cs .builder-libsave__toggle{ display:flex; align-items:flex-start; gap:10px; margin-top:13px; padding:11px 12px;
  border:1px solid var(--app-line); border-radius:var(--app-r-md); background:var(--app-panel-2); cursor:pointer; }
.cs .builder-libsave__toggle input:where(:not(.builder-block__preview *)){ margin-top:2px; accent-color:var(--app-brand); flex:none; }
.cs .builder-libsave__tt{ font-size:12.5px; min-width:0; }
.cs .builder-libsave__tt b{ display:block; color:var(--app-text); font-weight:700; }
.cs .builder-libsave__tt span{ color:var(--app-text-faint); font-size:11.5px; }

/* ============================================================================
   IMMERSIVE BUILDER ATELIER: the page editor occupies the full workspace -
   a top toolbar, a centred artboard (blocks) and a floating assistant panel.
   ============================================================================ */
.as-builder{ position:absolute; inset:0; display:flex; flex-direction:column; }
.as-builder__bar{ flex:0 0 auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:var(--app-panel-2); border-bottom:1px solid var(--app-line); }
.as-builder__title{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.as-builder__title h1{ font-family:var(--app-font-display); font-size:1.05rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-builder__route{ font-family:var(--app-font-mono); font-size:var(--app-text-sm); color:var(--app-text-muted); }
.as-builder__actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.as-builder__actions form{ margin:0; }
.as-builder__flash{ color:var(--app-state-good); font-size:var(--app-text-sm); }
.as-pill{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:3px 9px;
  border-radius:var(--app-r-pill); background:var(--app-control); color:var(--app-text-muted); }
.as-pill--ok{ background:rgba(95,185,138,.15); color:var(--app-state-good); }
.as-pill--brand{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-pill--sm{ font-size:9.5px; padding:2px 7px; }

/* ============================================================================
   CLIENT DASHBOARD (4BRIK-37 · INC-1) - landing workspace: KPI cards, in-house
   SVG charts, recent activity. Scoped to --app-* tokens like the rest of the shell.
   ============================================================================ */
/* Rendered inside the studio modal (.as-window__body .cs); the window supplies the
   outer padding, so the dashboard itself just stacks its sections. */
.as-dashboard{ display:flex; flex-direction:column; gap:16px; }
.as-dashboard__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0; }
.as-dashboard__sub{ margin:0; color:var(--app-text-muted); font-size:.9rem; }
.as-dashboard__onboarding{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  background:linear-gradient(100deg, var(--app-brand-weak), transparent); }
.as-dashboard__onboarding h2{ margin:0 0 2px; font-family:var(--app-font-display); font-size:1rem; color:var(--app-text); }
.as-dashboard__onboarding p{ margin:0; color:var(--app-text-muted); font-size:.85rem; }
.as-dashboard__onboarding-actions{ display:flex; gap:8px; align-items:center; }
.as-dashboard__onboarding-actions form{ margin:0; }

.as-dashboard__kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.dash-card{ display:flex; flex-direction:column; gap:5px; padding:15px 16px; background:var(--app-panel);
  border:1px solid var(--app-line); border-radius:var(--app-r-lg); }
.dash-card__label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); }
.dash-card__value{ font-family:var(--app-font-display); font-size:1.8rem; line-height:1.1; color:var(--app-text);
  display:flex; align-items:center; gap:8px; }
.dash-card__value--sm{ font-size:1.15rem; }
.dash-card__value--ai{ color:var(--app-ai); }
.dash-card__hint{ font-size:.8rem; color:var(--app-text-muted); }
.dash-card__link{ margin-top:4px; display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600;
  color:var(--app-brand); text-decoration:none; }
.dash-card__link:hover{ text-decoration:underline; }
.dash-card__split{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dash-card__mini{ width:52px; height:52px; flex:none; }
.dash-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dash-dot--good{ background:var(--app-state-good); }
.dash-dot--warn{ background:var(--app-state-warn); }

.as-dashboard__panels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.dash-panel{ display:flex; flex-direction:column; gap:12px; padding:16px 18px; background:var(--app-panel);
  border:1px solid var(--app-line); border-radius:var(--app-r-lg); }
.dash-panel__title{ margin:0; font-family:var(--app-font-display); font-size:.95rem; color:var(--app-text); }
.dash-panel__chart{ height:120px; }
.dash-panel__empty{ margin:0; color:var(--app-text-faint); font-size:.85rem; }
.dash-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dash-feed__item{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--app-line-soft); }
.dash-feed__item:first-child{ border-top:0; }
.dash-feed__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--app-text); font-size:.85rem; }
.dash-feed__time{ flex:none; color:var(--app-text-faint); font-size:.75rem; font-variant-numeric:tabular-nums; }

/* ---- In-house charts ---- */
.dash-area{ width:100%; height:100%; display:block; overflow:visible; }
.dash-area__line{ fill:none; stroke:var(--app-brand); stroke-width:1.6; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; stroke-linecap:round; }
.dash-area__fill{ fill:var(--app-brand-weak); stroke:none; }
.dash-donut{ width:100%; height:100%; display:block; transform:rotate(-90deg); }
.dash-donut__track{ stroke:var(--app-control); stroke-width:4; }
.dash-donut__seg{ stroke-width:4; transition:stroke-dasharray var(--app-dur-fast); }
.dash-seg--good{ stroke:var(--app-state-good); color:var(--app-state-good); }
.dash-seg--brand{ stroke:var(--app-brand); color:var(--app-brand); }
.dash-seg--ai{ stroke:var(--app-ai); color:var(--app-ai); }
.dash-seg--warn{ stroke:var(--app-state-warn); color:var(--app-state-warn); }
.dash-seg--crit{ stroke:var(--app-state-crit); color:var(--app-state-crit); }
.dash-seg--neutral{ stroke:var(--app-line); color:var(--app-text-muted); }
.dash-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.dash-bars__row{ display:flex; align-items:center; gap:10px; }
.dash-bars__label{ flex:0 0 40%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.82rem; color:var(--app-text); }
.dash-bars__track{ flex:1 1 auto; height:8px; border-radius:var(--app-r-pill); background:var(--app-control); overflow:hidden; }
.dash-bars__fill{ display:block; height:100%; border-radius:var(--app-r-pill); background:currentColor; }
.dash-bars__val{ flex:none; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--app-text-muted); }

/* ---- E-commerce section ---- */
.as-dashboard__section{ margin:6px 0 0; padding-top:14px; border-top:1px solid var(--app-line-soft);
  font-family:var(--app-font-display); font-size:1.05rem; color:var(--app-text); }
.dash-panel--wide{ grid-column:1 / -1; }
.dash-statusrow{ display:flex; align-items:center; gap:16px; }
.dash-statusrow__chart{ width:84px; height:84px; flex:none; }
.dash-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.dash-legend__item{ display:flex; align-items:center; gap:8px; font-size:.85rem; }
.dash-legend__dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:none; }
.dash-legend__label{ flex:1 1 auto; color:var(--app-text); }
.dash-legend__val{ color:var(--app-text-muted); font-variant-numeric:tabular-nums; }
.dash-stock{ background:color-mix(in srgb, var(--app-state-warn) 18%, var(--app-panel)); color:var(--app-state-warn); }
.dash-stock--out{ background:color-mix(in srgb, var(--app-state-crit) 18%, var(--app-panel)); color:var(--app-state-crit); }

.as-builder__history{ position:relative; }
.as-builder__history > summary{ list-style:none; cursor:pointer; }
.as-builder__history > summary::-webkit-details-marker{ display:none; }
.as-builder__history-panel{ position:absolute; right:0; top:calc(100% + 6px); z-index:5; width:max-content; min-width:220px; max-width:340px; max-height:60vh;
  overflow-y:auto; background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-md);
  box-shadow:var(--app-shadow-panel); padding:8px; }
.as-builder__history-panel .builder-versions__list{ list-style:none; margin:0; padding:0; }
.as-builder__history-panel .builder-versions__item{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.5rem 0; border-bottom:1px solid var(--app-line-soft); }
.as-builder__history-panel time{ color:var(--app-text-muted); font-size:var(--app-text-sm); font-family:var(--app-font-mono); }

.as-builder__canvas{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; padding:2rem 88px 3rem; background:none; border:0; border-radius:0; box-shadow:none; }

/* Add-block = a floating, extensible tool palette on the left. Each tool is one
   icon; the "Blocks" tool opens a flyout of block-type icons beside the palette. */
.as-builder__canvas .builder-add{ position:fixed; left:18px; top:112px; width:auto; z-index:var(--app-z-tools);
  display:flex; flex-direction:column; align-items:center; gap:4px; max-width:none; margin:0;
  background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-md); box-shadow:var(--app-shadow-panel); padding:6px; }
/* Shared drag-handle dots (2x2) - the visible grip on every draggable studio widget. */
.as-dots{ display:grid; grid-template-columns:repeat(2,3px); gap:3px; opacity:.55; }
.as-dots i{ display:block; width:3px; height:3px; border-radius:50%; background:var(--app-text-muted); }
.as-builder__canvas .builder-add__grip{ margin:2px 0 5px; padding:2px 0; cursor:grab; display:grid; place-items:center; }
.as-builder__canvas .builder-add__grip:active{ cursor:grabbing; }
.as-builder__canvas .builder-add__sep{ width:26px; height:1px; background:var(--app-line-soft); margin:4px 0; }
/* Palette tools: flat, ALL the same colour (no per-tool tint, no AI violet), and
   NO active/pressed state change - only a subtle hover background. */
.as-builder__canvas .builder-add__tool{ position:relative; width:38px; height:38px; display:grid; place-items:center; padding:0;
  background:transparent; border:1px solid transparent; border-radius:var(--app-r-sm); color:var(--app-text-muted); cursor:pointer;
  transition:background var(--app-dur-fast); }
.as-builder__canvas .builder-add__tool:hover{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-builder__canvas .builder-add__tool svg{ width:19px; height:19px; }
.as-builder__canvas .builder-add__tip{ position:absolute; left:46px; top:50%; transform:translateY(-50%) scale(.96);
  background:var(--app-panel-2); border:1px solid var(--app-line); color:var(--app-text); font-size:11px; padding:4px 9px;
  border-radius:var(--app-r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--app-dur-fast);
  box-shadow:var(--app-shadow-panel); z-index:5; }
.as-builder__canvas .builder-add__tool:hover .builder-add__tip{ opacity:1; }
/* Active tool (selection by default). */
.as-builder__canvas .builder-add__tool.is-active{ background:var(--app-brand-weak); color:var(--app-brand); }
/* Disabled tool (no backend yet - greyed, no hover highlight, no action). */
.as-builder__canvas .builder-add__tool--off{ opacity:.4; cursor:default; }
.as-builder__canvas .builder-add__tool--off:hover{ background:transparent; color:var(--app-text-muted); }
.as-builder__canvas .builder-add__tool:disabled{ opacity:.4; cursor:default; }
.as-builder__canvas .builder-add__tool:disabled:hover{ background:transparent; color:var(--app-text-muted); }
/* Keyboard-shortcut badge inside a tool tip. */
.as-builder__canvas .builder-add__tip b{ margin-left:8px; font-family:var(--app-font-mono); font-weight:400;
  font-size:10px; color:var(--app-text-faint); }

/* ---- Floating builder panels (Pages, Properties…): draggable cards over the canvas ---- */
.builder-panel{ position:fixed; z-index:var(--app-z-panel); width:236px; max-height:calc(100vh - 150px);
  display:flex; flex-direction:column; background:var(--app-panel); border:1px solid var(--app-line);
  border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-panel); overflow:hidden; }

.builder-chrome{ position:absolute; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.cs .builder-bar.is-lifted,
.cs .builder-cnt-tag.is-lifted{ position:absolute; left:0; top:0; right:auto; bottom:auto;
  width:max-content; max-width:none; transform:none; opacity:0; pointer-events:none; }
.cs .builder-bar.is-lifted.is-shown,
.cs .builder-cnt-tag.is-lifted.is-shown{ opacity:1; pointer-events:auto; }

.app-studio.as-view-structure .builder-block__preview{ display:none; }
.app-studio.as-view-structure .as-artboard{ background:var(--app-ground); }
.app-studio.as-view-structure .builder-sections{ max-width:none; width:100%;
  margin-inline:0; background:var(--app-ground); }
.app-studio.as-view-structure :is(.builder-sec, .brik-container){ max-width:none !important; width:100%; }

.app-studio.as-view-structure :is(.builder-sec, .builder-cnt, .builder-block){ position:relative;
  border-radius:var(--app-r-sm); overflow:hidden; }
.app-studio.as-view-structure :is(.builder-sec, .builder-cnt, .builder-block)::before{
  content:attr(data-structure-label); display:block; padding:8px 16px;
  background:linear-gradient(135deg, var(--_lvl), var(--_lvl2)); color:var(--_ink);
  font-family:var(--app-font-display); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-align:center; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.app-studio.as-view-structure .builder-sec{ --_lvl:var(--app-st-sec); --_lvl2:var(--app-st-sec-2);
  --_ink:var(--app-st-sec-ink); padding:0 0 8px; margin:0 0 16px;
  background:color-mix(in srgb, var(--_lvl2) 9%, var(--app-panel)); }
.app-studio.as-view-structure .builder-sec:last-child{ margin-bottom:0; }
.app-studio.as-view-structure .builder-cnt{ --_lvl:var(--app-st-cnt); --_lvl2:var(--app-st-cnt-2);
  --_ink:var(--app-st-cnt-ink); padding:0 0 8px; margin:8px;
  background:color-mix(in srgb, var(--_lvl2) 9%, var(--app-panel-2)); }
.app-studio.as-view-structure .builder-block{ --_lvl:var(--app-st-blk); --_lvl2:var(--app-st-blk-2);
  --_ink:var(--app-st-blk-ink); margin:8px;
  background:color-mix(in srgb, var(--_lvl2) 60%, var(--app-panel)); }
.app-studio.as-view-structure .builder-block::before{ padding:9px 12px; }
.app-studio.as-view-structure .is-global,
.app-studio.as-view-structure .is-global :is(.builder-sec, .builder-cnt, .builder-block){
  --_lvl:var(--app-st-global); --_lvl2:var(--app-st-global-2); --_ink:var(--app-st-global-ink); }
.app-studio.as-view-structure .is-global :is(.builder-cnt, .builder-block){
  background:color-mix(in srgb, var(--_lvl) 10%, var(--app-panel)); }
.app-studio.as-view-structure .builder-col{ min-height:0; }
.app-studio.as-view-structure .builder-ov{ display:none; }
.builder-pages{ right:18px; top:112px; }
.builder-panel__grip{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:grab; flex:0 0 auto;
  background:linear-gradient(180deg, var(--app-panel), var(--app-panel-2)); border-bottom:1px solid var(--app-line-soft); }
.builder-panel__grip:active{ cursor:grabbing; }
.builder-panel__title{ margin:0; font-family:var(--app-font-display); font-size:12.5px; font-weight:700; color:var(--app-text); }
.builder-panel__act{ margin-left:auto; width:24px; height:24px; }
.builder-panel__act svg{ width:15px; height:15px; }
.builder-pages__list{ overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.builder-pages__item{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--app-r-sm);
  color:var(--app-text); text-decoration:none; font-size:12.5px; }
.builder-pages__item svg{ width:15px; height:15px; color:var(--app-text-muted); flex:none; }
.builder-pages__item:hover{ background:var(--app-control); }
/* Selected row: neutral surface + full inset brand ring (never a palette-tinted background, which
   made the status tags illegible; never a directional border on the radius). Text stays default. */
.builder-pages__item.is-sel{ background:var(--app-panel-2); box-shadow:inset 0 0 0 1px var(--app-brand); }
.builder-pages__item.is-sel svg{ color:var(--app-brand); }
.builder-pages__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Library panel: cloned from the Pages panel (position, width, list rows). */
.builder-panel.builder-library{ width:300px; }
.builder-library{ left:88px; top:112px; }
.cs .builder-library__list{ overflow-y:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.cs .builder-library__group{ padding:6px 6px 2px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-faint); }
.cs .builder-library__item{ display:flex; align-items:center; gap:7px; padding:6px 7px; border-radius:var(--app-r-sm); cursor:grab; }
.cs .builder-library__item:hover{ background:var(--app-control); }
.cs .builder-library__item:active{ cursor:grabbing; }
.cs .builder-library__item.is-drag{ opacity:.4; }
.cs .builder-library__ic{ flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:6px;
  background:var(--app-panel-2); border:1px solid var(--app-line); color:var(--app-text-muted); }
.cs .builder-library__ic.is-global{ color:var(--app-brand); border-color:transparent; background:var(--app-brand-weak); }
.cs .builder-library__ic svg{ width:14px; height:14px; }
.cs .builder-library__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;
  background:none; border:0; color:var(--app-text); font-family:inherit; font-size:12.5px; cursor:pointer; padding:0; }
.cs .builder-library__name:hover{ color:var(--app-brand); }
.cs .builder-library__badge{ flex:none; font-style:normal; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:100px; background:color-mix(in srgb, var(--app-text) 8%, transparent); color:var(--app-text-faint); }
.cs .builder-library__badge.is-global{ background:var(--app-brand-weak); color:var(--app-brand); }
.cs .builder-library__del{ flex:none; width:22px; height:22px; display:grid; place-items:center; border:0; background:none;
  color:var(--app-text-faint); border-radius:6px; cursor:pointer; }
.cs .builder-library__del svg{ width:14px; height:14px; }
.cs .builder-library__del:hover{ color:var(--app-state-crit); background:color-mix(in srgb, var(--app-state-crit) 14%, transparent); }
.cs .builder-library__empty{ margin:0; padding:14px 10px; text-align:center; color:var(--app-text-faint); font-size:11.5px; }
/* Flyout: grid of block-type icons opening to the right of the palette. */
/* Grouped tools: a parent button (mirrors the active sub-tool + a chevron) opening a vertical
   flyout of sub-tools to the right of the palette. */
.as-builder__canvas .builder-add__group{ position:relative; display:block; }
.as-builder__canvas .builder-add__parenticon{ display:grid; place-items:center; }
.as-builder__canvas .builder-add__parenticon svg{ width:19px; height:19px; }
/* "Has sub-tools" corner marker: a small filled triangle pointing toward where the flyout opens. */
.as-builder__canvas .builder-add__chev{ position:absolute; right:2px; bottom:2px; display:grid; place-items:center;
  color:var(--app-text-faint); pointer-events:none; transition:color var(--app-dur-fast); }
.as-builder__canvas .builder-add__chev svg{ width:7px; height:7px; display:block; }
.as-builder__canvas .builder-add__parent:hover .builder-add__chev{ color:var(--app-brand); }
/* Parent lights up while its group holds the active canvas mode (Selector / Hand). */
.as-builder__canvas .builder-add__group:has(.builder-add__tool.is-active) > .builder-add__parent{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-builder__canvas .builder-add__group:has(.builder-add__tool.is-active) > .builder-add__parent .builder-add__chev{ color:var(--app-brand); }
.as-builder__canvas .builder-add__subs{ position:absolute; left:calc(100% + 10px); top:0; z-index:6;
  display:flex; flex-direction:column; gap:4px; padding:6px;
  background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-md); box-shadow:var(--app-shadow-panel); }
.as-builder__canvas .builder-add__subs[hidden]{ display:none; }
/* Toggle sub-tools (Guides / Rulers) reflect their on state inside the flyout. */
.as-builder__canvas .builder-add__subs .builder-add__tool[aria-pressed="true"]{ background:var(--app-brand-weak); color:var(--app-brand); }
.as-builder__canvas .builder-add__flyout{ position:absolute; left:calc(100% + 10px); top:0; z-index:6;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; width:276px; max-height:70vh; overflow-y:auto;
  padding:8px; background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-md); box-shadow:var(--app-shadow-panel); }
.as-builder__canvas .builder-add__flyout[hidden]{ display:none; }
.as-builder__canvas .builder-add__cat{ grid-column:1 / -1; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--app-text-faint); padding:7px 2px 1px; }
.as-builder__canvas .builder-add__cat:first-child{ padding-top:1px; }
.as-builder__canvas .builder-add__brick{ position:relative; min-width:0; height:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 5px;
  background:var(--app-control); border:1px solid var(--app-line); border-radius:var(--app-r-sm); color:var(--app-text-muted); cursor:pointer;
  transition:background var(--app-dur-fast),color var(--app-dur-fast),border-color var(--app-dur-fast); }
.as-builder__canvas .builder-add__brick:hover{ background:var(--app-brand-weak); border-color:var(--app-brand); color:var(--app-brand); }
.as-builder__canvas .builder-add__brick svg{ width:20px; height:20px; }
.as-builder__canvas .builder-add__brick-label{ width:100%; font-size:10px; line-height:1.15; text-align:center; color:var(--app-text-muted); overflow-wrap:anywhere; }
.as-builder__canvas .builder-add__brick:hover .builder-add__brick-label{ color:var(--app-brand); }
/* Premium crown + offer lock badges (top-right of the tile). The form wrapper is transparent to
   the flyout grid so the button stays the grid item. */
.as-builder__canvas .builder-add__brickform{ display:contents; }
.as-builder__canvas .builder-add__crown,
.as-builder__canvas .builder-add__lock{ position:absolute; top:4px; right:4px; display:grid; place-items:center; }
.as-builder__canvas .builder-add__crown svg{ width:18px; height:18px; color:var(--app-brand); }
.as-builder__canvas .builder-add__crown--off svg{ color:var(--app-brand); }
.as-builder__canvas .builder-add__lock svg{ width:16px; height:16px; color:var(--app-text-faint); }
/* Hand / pan tool: grab cursor over the canvas while the Main tool is active OR Space is held. */
.app-studio:has(.builder-add__tool--pan.is-active) .as-builder__canvas,
.app-studio.is-space-pan .as-builder__canvas{ cursor:grab; }
.app-studio.is-panning .as-builder__canvas,
.app-studio.is-space-pan.is-panning .as-builder__canvas{ cursor:grabbing; }
/* Main tool (or held Space) = pan only: the artboard content is inert (no hover bars, no click-to-edit),
   so it clearly differs from the arrow. The palette / panels stay interactive (not inside it). */
.app-studio:has(.builder-add__tool--pan.is-active) .builder-sections,
.app-studio.is-space-pan .builder-sections{ pointer-events:none; }

/* Canvas overlays (Affichage → Règles / Guides): purely visual, non-persisted, click-through. */
.as-rulers, .as-guides{ display:none; position:absolute; inset:0; pointer-events:none; }
.as-guides{ z-index:8; }
/* Rulers sit above the guides so the crosshair never draws over (and hides) the graduation strips. */
.as-rulers{ z-index:9; }
.app-studio.as-view-rulers .as-rulers{ display:block; }
.app-studio.as-view-guides .as-guides{ display:block; }
/* Rulers: graduated strips along the top and left edges (ticks every 8px, longer every 40px). */
.as-rulers__top{ position:absolute; top:0; left:22px; right:0; height:16px; background:var(--app-panel-2); border-bottom:1px solid var(--app-line);
  background-image:repeating-linear-gradient(90deg, var(--app-line) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, var(--app-text-faint) 0 1px, transparent 1px 40px);
  background-position:0 8px, 0 4px; background-size:auto 8px, auto 12px; background-repeat:repeat-x; }
.as-rulers__left{ position:absolute; top:16px; left:0; bottom:0; width:22px; background:var(--app-panel-2); border-right:1px solid var(--app-line);
  background-image:repeating-linear-gradient(0deg, var(--app-line) 0 1px, transparent 1px 8px), repeating-linear-gradient(0deg, var(--app-text-faint) 0 1px, transparent 1px 40px);
  background-position:8px 0, 4px 0; background-size:8px auto, 12px auto; background-repeat:repeat-y; }
.as-rulers__corner{ position:absolute; top:0; left:0; width:22px; height:16px; background:var(--app-panel-2); border-right:1px solid var(--app-line); border-bottom:1px solid var(--app-line); z-index:1; }
/* Guides: crosshair "conductors" - an X and a Y vector that follow the pointer and cross on the
   canvas (positions fed live by customer--canvas via --gx / --gy). */
.as-guides__x, .as-guides__y{ position:absolute; background:var(--app-info); opacity:.6; }
.as-guides__x{ left:0; right:0; height:1px; top:var(--gy, -10px); }
.as-guides__y{ top:0; bottom:0; width:1px; left:var(--gx, -10px); }
/* Live X/Y readout pinned to the crosshair intersection (document px, zoom-corrected). */
.as-guides__pos{ position:absolute; left:var(--gx, -9999px); top:var(--gy, -9999px); transform:translate(10px, 10px);
  padding:2px 7px; font-size:10.5px; font-family:var(--app-font-mono, ui-monospace, monospace); line-height:1.4;
  background:var(--app-info); color:#fff; border-radius:var(--app-r-sm); white-space:nowrap; pointer-events:none; box-shadow:var(--app-shadow-panel); }
/* Locked bricks: still visible but dimmed; hover stays neutral (no brand highlight). */
.as-builder__canvas .builder-add__brick.is-locked{ opacity:.5; }
.as-builder__canvas .builder-add__brick.is-locked:hover{ opacity:.75; background:var(--app-control); border-color:var(--app-line); color:var(--app-text-muted); }
.as-builder__canvas .builder-add__brick.is-locked:hover .builder-add__brick-label{ color:var(--app-text-muted); }
.as-builder__canvas .builder-add__brick.is-locked.is-premium:hover{ border-color:var(--app-brand); }

/* Blocks = a continuous page filling the artboard sheet edge-to-edge (full-bleed sections,
   no side bands, no card chrome between blocks). The sheet itself is .as-artboard. */
.as-builder__canvas .builder-sections{ width:100%; margin:0; background:transparent; }
.as-builder__canvas .builder-block{ position:relative; background:transparent; border:0; border-radius:0; overflow:visible; }
.as-builder__canvas .builder-block__preview{ padding:0; background:transparent; color:inherit; }
.as-builder__canvas .builder-block__bar{ position:absolute; top:8px; right:8px; z-index:60; opacity:0;
  border:1px solid var(--app-line); background:var(--app-panel); border-radius:var(--app-r-sm);
  box-shadow:var(--app-shadow-panel); padding:3px 4px; transition:opacity var(--app-dur-fast); }
.as-builder__canvas .builder-block:hover .builder-block__bar,
.as-builder__canvas .builder-block:focus-within .builder-block__bar{ opacity:1; }
.as-builder__canvas .builder-block__form{ background:var(--app-panel); }

/* Assistant = floating panel bottom-right, hidden until toggled from the palette's
   "Assistant IA" tool (the open state lives on .app-studio, morph-proof). */
.as-builder__canvas .builder-chat{ position:fixed; right:18px; bottom:44px; width:min(340px,90vw); max-height:min(62vh,540px);
  display:none; flex-direction:column; z-index:var(--app-z-panel); box-shadow:var(--app-shadow-win); }
.app-studio.as-assistant-open .as-builder__canvas .builder-chat{ display:flex; }
.as-builder__canvas .builder-chat__messages{ flex:1 1 auto; }
@media (max-width:1100px){
  .as-builder__canvas .builder-add{ position:static; width:auto; max-width:860px; margin:0 auto 1rem; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .as-builder__canvas .builder-chat{ position:static; width:auto; max-height:none; margin:0 auto 1rem; max-width:860px; }
}

/* ============================================================================
   STUDIO PRE-AUTH (login / reset / 2FA / invitation, non-admin host):
   the sign-in surface is a studio card on the immersive workspace (dark-first).
   ============================================================================ */
.auth--studio{
  min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--app-brand) 6%, transparent), transparent 60%), var(--app-workspace);
  color:var(--app-text); font-family:var(--app-font-sans); line-height:1.5;
}
.auth--studio > .as-workspace__grid{ position:absolute; inset:0; }
.auth-main--studio{ position:relative; z-index:1; width:min(430px,92vw); display:flex; flex-direction:column;
  gap:1.25rem; padding:2rem 1rem; }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; color:var(--app-text); }
.auth-brand .as-brand__cube{ width:26px; height:26px; }
.auth-brand__name{ font-family:var(--app-font-display); font-weight:700; font-size:1.3rem; letter-spacing:.2px; }
.auth-brand__name b{ color:var(--app-brand); font-weight:800; }
.auth-card--studio{ background:var(--app-panel); border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-win); padding:1.75rem 1.75rem 1.4rem; }
.auth-card--studio > :last-child{ margin-bottom:0; }
.auth-card--studio h1{ font-family:var(--app-font-display); margin:0 0 1.25rem; font-size:1.35rem; text-wrap:balance; }
.auth-footer--studio{ display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center;
  color:var(--app-text-faint); font-size:var(--app-text-sm); }
.auth-footer--studio a{ color:var(--app-brand); text-decoration:none; }
.auth-footer--studio a:hover{ text-decoration:underline; }
.as-window__foot{ flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:9px;
  padding:14px 18px; border-top:1px solid var(--app-line); background:var(--app-panel-2); }

/* ---- Toasts: bottom-right stack, auto-dismissed (flash messages live here). ---- */
.as-toasts{ position:fixed; right:18px; bottom:18px; z-index:var(--app-z-toast); display:flex; flex-direction:column;
  align-items:flex-end; gap:10px; max-width:min(360px, calc(100vw - 36px)); pointer-events:none; }
.as-toast{ --_tone:var(--app-state-good); pointer-events:auto; display:flex; align-items:flex-start; gap:11px; width:100%;
  background:var(--app-panel); border:1px solid color-mix(in srgb, var(--_tone) 40%, var(--app-line));
  border-radius:var(--app-r-md); padding:12px 14px; box-shadow:var(--app-shadow-win); }
.as-toast--success{ --_tone:var(--app-state-good); }
.as-toast--error{ --_tone:var(--app-state-crit); }
.as-toast--info{ --_tone:var(--app-text-muted); }
.as-toast__icon{ flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  color:var(--_tone); background:color-mix(in srgb, var(--_tone) 16%, var(--app-panel)); }
.as-toast__icon svg{ width:14px; height:14px; }
.as-toast__text{ min-width:0; color:var(--app-text); font-size:var(--app-text-sm); line-height:1.4; padding-top:1px; }
@media (prefers-reduced-motion:no-preference){
  .as-toast{ animation:as-toast-in .42s cubic-bezier(.16,1,.3,1) both; }
  .as-toast--out{ animation:as-toast-out .3s ease forwards; }
  @keyframes as-toast-in{ from{ opacity:0; transform:translateX(20px) scale(.98); } to{ opacity:1; transform:none; } }
  @keyframes as-toast-out{ to{ opacity:0; transform:translateX(22px) scale(.98); } }
}

/* Onboarding guided tour: dimmed backdrop + spotlight halo on the target, and a
   comic-style bubble with a pointer arrow. Positioned by customer--tour (JS) in
   document coordinates; the arrow orientation modifier picks which edge points. */
.tour-spot{ position:absolute; z-index:9998; pointer-events:none; border-radius:var(--app-r-md);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--app-brand) 55%, transparent), 0 0 0 9999px rgba(6,5,4,.62);
  transition:top .28s ease, left .28s ease, width .28s ease, height .28s ease; }

.tour-bubble{ --tour-bubble-w:288px; position:absolute; z-index:10000; width:var(--tour-bubble-w);
  max-width:calc(100vw - 24px); font-family:var(--app-font-sans); color:var(--app-text);
  background:linear-gradient(180deg, color-mix(in srgb, var(--app-panel) 96%, var(--app-brand)) 0%, var(--app-panel) 46%);
  border:1px solid var(--app-line); border-radius:var(--app-r-lg);
  box-shadow:var(--app-shadow-panel), 0 0 0 1px color-mix(in srgb, var(--app-brand) 34%, transparent) inset;
  padding:15px 16px 13px; }
.tour-bubble__head{ display:flex; align-items:center; gap:8px; margin:0 0 7px; }
.tour-bubble__spark{ flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:var(--app-brand-weak); color:var(--app-brand); }
.tour-bubble__spark svg{ width:14px; height:14px; display:block; }
.tour-bubble__title{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.tour-bubble__text{ margin:0 0 13px; font-size:12.5px; line-height:1.5; color:var(--app-text-muted); }
.tour-bubble__foot{ display:flex; align-items:center; gap:10px; }
.tour-bubble__dots{ display:flex; gap:5px; margin-right:auto; }
.tour-bubble__dots i{ display:block; width:6px; height:6px; border-radius:50%; background:var(--app-line);
  transition:background .15s, transform .15s; }
.tour-bubble__dots i.on{ background:var(--app-brand); transform:scale(1.15); }
@media (prefers-reduced-motion:no-preference){
  .tour-bubble{ animation:tour-pop .22s cubic-bezier(.2,.9,.3,1.2) both; }
  @keyframes tour-pop{ from{ opacity:0; transform:translateY(4px) scale(.97); } to{ opacity:1; transform:none; } }
}

@media (prefers-reduced-motion:reduce){ .app-studio *{ animation:none !important; transition:none !important; } }

/* Navigation menu editor */
.menu-editor{ display:flex; flex-direction:column; gap:var(--app-space-5); }
.menu-editor__head{ display:flex; align-items:center; gap:var(--app-space-3); }
.menu-editor__title{ margin:0; font-size:var(--app-text-xl); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.menu-editor__grid{ display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:var(--app-space-5); align-items:start; }
.menu-editor__sources, .menu-editor__structure{ border:1px solid var(--cs-border); border-radius:var(--app-r-lg); background:var(--cs-bg); padding:var(--app-space-4); }
.as-window__body .cs-main.platform .menu-editor__sources .builder-settings__section, .as-window__body .cs-main.platform .menu-editor__structure .builder-settings__section, .as-window__body .cs-main.platform .menu-editor__settings .builder-settings__section{ margin-top:0; padding-top:0; border-top:0; }

.menu-src{ border-top:1px solid var(--cs-border); }
.menu-src:first-of-type{ border-top:0; }
.menu-src__summary{ cursor:pointer; padding:var(--app-space-3) 0; font-weight:600; font-size:var(--app-text-sm); list-style:none; display:flex; align-items:center; justify-content:space-between; }
.menu-src__summary::-webkit-details-marker{ display:none; }
.menu-src__summary::after{ content:''; width:8px; height:8px; border-right:2px solid var(--cs-muted); border-bottom:2px solid var(--cs-muted); transform:rotate(-45deg); transition:transform .18s ease; }
.menu-src[open] .menu-src__summary::after{ transform:rotate(45deg); }
.menu-src__body{ display:flex; flex-direction:column; gap:var(--app-space-3); padding-bottom:var(--app-space-4); }
.menu-src__list{ list-style:none; margin:0; padding:0; max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:var(--app-space-1); }
.menu-check{ display:flex; align-items:center; gap:var(--app-space-2); cursor:pointer; font-size:var(--app-text-sm); }
.menu-field{ display:flex; flex-direction:column; gap:var(--app-space-1); font-size:var(--app-text-sm); }
.menu-field > span{ color:var(--cs-muted); font-weight:600; }
.menu-field__hint{ margin:0; color:var(--cs-muted); font-size:var(--app-text-sm); }
.menu-field__hint code{ background:var(--cs-bg-alt); padding:.05rem .35rem; border-radius:var(--app-r-sm); }

.menu-tree, .menu-tree__children{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.menu-tree__children{ margin-left:var(--app-space-5); margin-top:var(--app-space-2); padding-left:var(--app-space-3); border-left:2px solid var(--cs-border); }
.menu-tree__children:empty{ display:none; }
.menu-tree__bar{ display:flex; align-items:center; gap:var(--app-space-2); height:34px; border:1px solid var(--cs-border); border-radius:var(--app-r-sm); background:var(--cs-bg); padding:6px 12px; }
.menu-tree__bar:hover{ border-color:var(--app-brand); }
.menu-tree__grip{ display:inline-flex; align-items:center; color:var(--cs-muted); cursor:grab; }
.menu-tree__grip:active{ cursor:grabbing; }
.menu-tree__toggle{ flex:1; display:flex; align-items:center; gap:var(--app-space-2); background:none; border:0; padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; min-width:0; }
.menu-tree__name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.menu-tree__toggle .builder-dd__chev{ margin-left:auto; }
.menu-tree__toggle[aria-expanded=true] .builder-dd__chev{ transform:rotate(180deg); }
.menu-tree__panel{ display:flex; flex-direction:column; gap:var(--app-space-3); padding:var(--app-space-4); margin-top:var(--app-space-1); border:1px solid var(--cs-border); border-radius:var(--app-r-md); background:var(--cs-bg-alt); }
.menu-tree__panel[hidden]{ display:none; }
.menu-tree__form{ row-gap:var(--app-space-4); }
.menu-tree__actions{ display:flex; gap:var(--app-space-2); border-top:1px solid var(--cs-border); padding-top:var(--app-space-4); }
.menu-tree__actions .as-btn{ flex:1; justify-content:center; }
.menu-tree__actions .as-btn--outline{ border-color:var(--cs-accent); }
.menu-tree__delete-form{ display:none; }
.menu-tree__item.is-dragging{ display:none; }
.menu-tree__placeholder{ list-style:none; border:1px dashed var(--app-brand); border-radius:var(--app-r-sm); background:var(--app-brand-weak); }
/* Broken item (target deleted or unpublished): its own bar is dimmed (children keep full opacity),
   and its panel only offers deletion, preceded by an explanatory note. */
.menu-tree__item--broken > .menu-tree__bar{ opacity:.5; }
.menu-tree__broken-note{ margin:0; padding:var(--app-space-3); border:1px solid var(--cs-border); border-radius:var(--app-r-sm); background:var(--cs-bg); color:var(--cs-muted); font-size:var(--app-text-sm); line-height:1.45; }

/* Menus list page: single column - "Create a menu" (name field then button below) sits above the
   full-width "My menus" list. Plain blocks (no card). No top separator on either section title. */
.as-window__body .cs-main.platform .menu-index__create{ margin:0 0 var(--app-space-6); }
.as-window__body .cs-main.platform .menu-index__create > .builder-settings__section:first-child,
.as-window__body .cs-main.platform .menu-index__list > .builder-settings__section:first-child{ margin-top:0; padding-top:0; border-top:0; }
.as-window__body .cs-main.platform .menu-index__create form{ display:block; max-width:420px; }
.as-window__body .cs-main.platform .menu-index__create form > .field{ margin:0 0 var(--app-space-4); }

.menu-editor__settings{ padding-bottom:var(--app-space-4); margin-bottom:var(--app-space-4); border-bottom:1px solid var(--cs-border); }
.as-window__body .cs-main.platform form.menu-settings-form{ display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:var(--app-space-5); align-items:end; }
.menu-editor__settings form.menu-settings-form > :not(.menu-editor__settings-actions){ min-width:0; }
.menu-editor__settings-actions{ justify-self:end; }

@media (max-width:860px){ .menu-editor__grid{ grid-template-columns:1fr; } }

[data-controller~="customer--nav-editor"][data-nav-mode="standard"] [data-nav-role="custom"]{ display:none !important; }
[data-controller~="customer--nav-editor"][data-nav-mode="custom"] [data-nav-role="preset"]{ display:none !important; }
.cs .nav-custom{ display:flex; flex-direction:column; gap:10px; }
.cs .nav-custom__bp{ width:100%; }
[data-controller~="customer--nav-editor"] .nav-custom__panel{ display:none; }
[data-controller~="customer--nav-editor"][data-nav-device="desktop"] .nav-custom__panel[data-nav-device-panel="desktop"],
[data-controller~="customer--nav-editor"][data-nav-device="tablet"] .nav-custom__panel[data-nav-device-panel="tablet"],
[data-controller~="customer--nav-editor"][data-nav-device="phone"] .nav-custom__panel[data-nav-device-panel="phone"]{ display:flex; flex-direction:column; gap:8px; }
.cs .nav-custom__zone{ border:1px solid var(--app-line); border-radius:var(--app-r-sm); overflow:hidden; background:var(--app-panel); }
.cs .nav-custom__zonehd{ cursor:pointer; padding:8px 10px; font-size:11.5px; font-weight:600; color:var(--app-text); list-style:none; display:flex; align-items:center; gap:7px; background:var(--app-panel-2); }
.cs .nav-custom__zonehd::-webkit-details-marker{ display:none; }
.cs .nav-custom__caret{ width:9px; height:6px; flex:none; transition:transform var(--app-dur-fast); }
.cs .nav-custom__zone[open] .nav-custom__caret{ transform:rotate(180deg); }
.cs .nav-custom__zone[open] .nav-custom__zonehd{ border-bottom:1px solid var(--app-line); }
.cs .nav-custom__ai{ margin-left:auto; color:var(--app-ai); }
.cs .nav-custom__body{ padding:8px 10px; }