/* ============================================================================
   CMS Administration — shared admin stylesheet
   Derived from the approved master template (cmsadmin_interface/assets/css/admis.css).
   The template's design language (Inter, blue #2563eb accent, 72px icon rail,
   header + collapsible panels + viewport canvas) is preserved. Additions below
   extend the SAME tokens to dashboard/listing screens the template didn't include.
   Fonts are self-hosted (no CDN) for demo reliability.
   ========================================================================== */

/* ── Self-hosted Inter (replaces the template's Google Fonts @import) ─────── */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../lib/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../lib/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../lib/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../lib/inter/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --brand:      #0367b4;   /* template accent (blue-600) — unified product accent */
  --brand-600:  #004377;
  --brand-700:  #022139;
  --brand-50:   #eff4ff;
  --brand-100:  #dbe6fe;

  --ink:    #111827;
  --ink-2:  #374151;
  --muted:  #6b7280;
  --faint:  #9ca3af;

  --line:   #e5e7eb;
  --line-2: #eef0f3;
  --surface: #ffffff;
  --canvas:  #f4f5f7;   /* clean content backdrop for non-builder screens */

  --green:   #16a34a;  --green-bg:#e7f6ec;
  --amber:   #b45309;  --amber-bg:#fdf0dd;
  --red:     #dc2626;  --red-bg:  #fdecec;
  --blue:    #2563eb;  --blue-bg: #e8f0fe;
  --violet:  #7c3aed;  --violet-bg:#f1ebfe;

  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.05);
  --shadow:    0 2px 8px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --shadow-lg: 0 12px 32px rgba(17,24,39,.12);
}

* { font-family: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overflow: hidden; background-color: var(--canvas); color: var(--ink); }
a { text-decoration: none; }

/* ── Main layout (from template) ─────────────────────────────────────────── */
.main-layout { display: flex; height: 100vh; }

/* ── Left icon rail (from template) ──────────────────────────────────────────
   Sizing lives in custom properties on .left-sidebar so the max-height tiers at
   the end of this section only override VARIABLES, never geometry.

   ⚠ DO NOT add transform, filter, backdrop-filter, will-change, perspective or
   contain to .left-sidebar, .sidebar-nav, .main-layout or body. Group flyouts
   rely on position:fixed escaping .sidebar-nav's overflow clip, and any of those
   properties would make an ancestor a containing block for fixed descendants and
   silently re-clip every menu. (See app.js — Popper uses strategy:'fixed'.)     */
.left-sidebar {
  --rail-w: 72px;
  --rail-logo-h: 72px;
  --rail-item-h: 44px;
  --rail-item-gap: .5rem;
  --rail-item-font: 21px;
  --rail-nav-pad-y: 1rem;
  --rail-foot-pad-y: 1rem;

  width: var(--rail-w); background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; flex-shrink: 0;
  min-height: 0;
}
.rail-logo {
  flex: 0 0 var(--rail-logo-h); height: var(--rail-logo-h);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line-2);
}
/* .rail-mark, not .mark: Bootstrap styles `mark, .mark` as a highlight — yellow
   background plus padding. The old gradient happened to cover both, so removing it
   for the logo exposed a pale yellow tile behind the artwork and shrank it inside
   the box. Renaming is the fix; overriding Bootstrap here would leave the trap set
   for the next person who uses the class. */
.rail-logo .rail-mark {
  width: 50px; height: 50px; border-radius: 11px; padding: 8px 4px;
  display: flex; align-items: center; justify-content: center;
}
/* The gradient tile and its glow are gone deliberately: they existed to give a
   monochrome glyph a surface to sit on, and behind a full-colour logo they only
   competed with it. object-fit:contain keeps the 1:1 artwork square inside the
   box whatever the rail is scaled to at the smaller breakpoints. */
.rail-logo .rail-mark img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* flex:1 1 auto + min-height:0 lets the nav shrink to the space available and
   SCROLL. Previously it was flex:1 with no overflow, so anything past the
   viewport spilled into body{overflow:hidden} and became unreachable. */
.sidebar-nav {
  display: flex; flex-direction: column; gap: var(--rail-item-gap);
  padding: var(--rail-nav-pad-y) .75rem;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
/* Chromium honours the standard `scrollbar-width` above and then IGNORES these
   ::-webkit-* rules, so the thin scrollbar is ~10px there rather than 4px. They
   are kept for older WebKit only — don't size the flyout offset off them. */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--muted); }

/* flex-shrink:0 is the whole point: items keep their height and force a scrollbar
   rather than silently squashing (which also broke the fixed-height active bar). */
.sidebar-nav > a,
.sidebar-nav > .rail-group { flex: 0 0 var(--rail-item-h); }
.sidebar-nav > .rail-group { position: relative; }

/* Scoped to direct children / .rail-grp so nothing inside a flyout inherits
   rail-pill sizing (the old selector was `.sidebar-nav a, .sidebar-nav button`). */
.sidebar-nav > a,
.sidebar-nav .rail-grp {
  position: relative; width: 100%; height: var(--rail-item-h); border-radius: 12px;
  display: flex; justify-content: center; align-items: center;
  color: var(--muted); transition: background .18s, color .18s;
  border: none; background: none; padding: 0;
  font-size: var(--rail-item-font); cursor: pointer;
}
.sidebar-nav > a:hover,
.sidebar-nav .rail-grp:hover { background: #f3f4f6; color: var(--ink-2); }

.sidebar-nav > a.active,
.sidebar-nav .rail-grp.active,
.sidebar-nav .rail-grp[aria-expanded="true"] { background: var(--brand-50); color: var(--brand); }

/* min() keeps the indicator proportional once the tiers shrink the item to 36px —
   the old fixed 22px overflowed a compacted pill. */
.sidebar-nav > a.active::before,
.sidebar-nav .rail-grp.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: min(22px, 55%); border-radius: 0 3px 3px 0; background: var(--brand);
}

/* Corner triangle = "this opens a flyout". Our own ::after, which is why .rail-grp
   must never get Bootstrap's .dropdown-toggle class. */
.sidebar-nav .rail-grp::after {
  content: ""; position: absolute; right: 5px; bottom: 5px;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-bottom: 4px solid currentColor;
  opacity: .5;
}
.sidebar-nav .rail-grp:hover::after,
.sidebar-nav .rail-grp.active::after { opacity: .9; }

.sidebar-nav > a.disabled { opacity: .4; cursor: default; }
.sidebar-nav > a.disabled:hover { background: none; color: var(--muted); }

/* The rail had no focus styling at all before. */
.sidebar-nav > a:focus-visible,
.sidebar-nav .rail-grp:focus-visible,
.rail-logo:focus-visible,
.rail-foot-btn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 12px;
}

/* Help and Settings only — the account menu lives in the header's user chip (_Layout.cshtml). */
.rail-foot {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: var(--rail-foot-pad-y) .75rem; border-top: 1px solid var(--line-2);
}
/* Same pill as a nav item, so the foot reads as part of the same rail. Sized off the nav token
   rather than a separate one, so the height tiers below shrink it in step. */
.rail-foot-btn {
  width: 100%; height: var(--rail-item-h); flex: 0 0 var(--rail-item-h);
  border-radius: 12px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--rail-item-font); cursor: pointer;
  text-decoration: none; transition: background .18s, color .18s;
}
.rail-foot-btn:hover { background: #f3f4f6; color: var(--ink-2); }
.rail-foot-btn.active { background: var(--brand-50); color: var(--brand); }

/* ── Rail group flyouts ──────────────────────────────────────────────────────
   Stock Bootstrap dropdown themed through custom properties — the project has no
   custom .dropdown-* rules and shouldn't grow any. z-index 1035 clears
   .main-header (20) and the media panels (40/45) but stays under
   .tpl-drawer-scrim (1050) and .toast-host (1080).                            */
.rail-flyout {
  --bs-dropdown-zindex: 1035;
  --bs-dropdown-min-width: 232px;
  --bs-dropdown-padding-x: .375rem;
  --bs-dropdown-padding-y: .375rem;
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-link-color: var(--ink-2);
  --bs-dropdown-link-hover-bg: #f3f4f6;
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--brand-50);
  --bs-dropdown-link-active-color: var(--brand);
  --bs-dropdown-header-color: var(--faint);
  box-shadow: var(--shadow-lg);
  max-height: min(70vh, 460px); overflow-y: auto;
}
/* Invisible bridge across the gap between the rail and the flyout. The menu is
   offset to clear the rail's border, so without this the cursor crosses dead
   space on its way to the menu and hover-close fires. Kept narrower than the gap
   plus the rail border so it never sits over the trigger button and swallow its
   clicks. Pairs with the close delay in app.js. */
.rail-flyout::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: -16px; width: 16px;
}
.rail-flyout .dropdown-header {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .375rem .625rem .25rem;
}
.rail-flyout .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: .5rem .625rem; border-radius: 8px;
  font-size: 13.5px; font-weight: 500;
}
.rail-flyout .dropdown-item i { font-size: 15px; width: 18px; text-align: center; color: var(--faint); }
.rail-flyout .dropdown-item:hover i,
.rail-flyout .dropdown-item.active i { color: inherit; }
.rail-flyout .dropdown-item.active { font-weight: 600; }
.rail-flyout .rail-soon { font-size: 11px; font-weight: 600; color: var(--faint); }

/* ── Rail compaction on short viewports ──────────────────────────────────────
   The project's first max-height queries. Only variables are overridden.
   A 1366x768 laptop (~630px viewport) lands in the first tier: 8 entries use
   ~562px, leaving room for a ninth before the nav needs to scroll.            */
@media (max-height: 820px) {
  .left-sidebar {
    --rail-logo-h: 60px; --rail-item-h: 40px; --rail-item-gap: .375rem;
    --rail-item-font: 19px; --rail-nav-pad-y: .625rem;
    --rail-foot-pad-y: .625rem;
  }
}
@media (max-height: 680px) {
  .left-sidebar {
    --rail-logo-h: 52px; --rail-item-h: 36px; --rail-item-gap: .25rem;
    --rail-item-font: 17px; --rail-nav-pad-y: .5rem;
    --rail-foot-pad-y: .5rem;
  }
}

/* ── Rail dark variant (Branding:Sidebar = "Dark") ───────────────────────────
   Purely additive on top of everything above — .left-sidebar.rail-dark is more
   specific than every bare .left-sidebar/.sidebar-nav/.rail-* rule up there, so
   nothing needed touching them, and every other screen that isn't the rail is
   unaffected.

   Palette is pulled from the VASoft mark itself (vasoft-logo.svg: #00589c /
   #213a71 deep blues, #4d8fcc light blue) rather than the app's generic
   --brand blue, so the active/hover accent still reads as "the same brand" —
   var(--brand-50) is a near-white tint made for a white rail and would just
   wash out here. The logo artwork is never recoloured (it's already
   full-colour and self-contained); it gets a small white backdrop tile
   instead, because two of its own fills (#213a71, #904620) are close enough
   in value to a dark navy background to lose definition against it.        */
.left-sidebar.rail-dark {
  --rail-dark-bg: #101c35;
  --rail-dark-border: #223055;
  --rail-dark-ink: #eef1fa;
  --rail-dark-muted: #91a0c4;
  --rail-dark-hover: #1b2947;
  --rail-dark-active-bg: rgba(77, 143, 204, .22);
  --rail-dark-active-ink: #7fb5ea;

  background: var(--rail-dark-bg);
  border-right-color: var(--rail-dark-border);
}
.left-sidebar.rail-dark .rail-logo { border-bottom-color: var(--rail-dark-border); }
.left-sidebar.rail-dark .rail-logo .rail-mark {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.left-sidebar.rail-dark .sidebar-nav > a,
.left-sidebar.rail-dark .sidebar-nav .rail-grp { color: var(--rail-dark-muted); }
.left-sidebar.rail-dark .sidebar-nav > a:hover,
.left-sidebar.rail-dark .sidebar-nav .rail-grp:hover { background: var(--rail-dark-hover); color: var(--rail-dark-ink); }
.left-sidebar.rail-dark .sidebar-nav > a.active,
.left-sidebar.rail-dark .sidebar-nav .rail-grp.active,
.left-sidebar.rail-dark .sidebar-nav .rail-grp[aria-expanded="true"] {
  background: var(--rail-dark-active-bg); color: var(--rail-dark-active-ink);
}
.left-sidebar.rail-dark .sidebar-nav > a.active::before,
.left-sidebar.rail-dark .sidebar-nav .rail-grp.active::before { background: var(--rail-dark-active-ink); }
.left-sidebar.rail-dark .sidebar-nav > a.disabled:hover { color: var(--rail-dark-muted); }

.left-sidebar.rail-dark .sidebar-nav > a:focus-visible,
.left-sidebar.rail-dark .sidebar-nav .rail-grp:focus-visible,
.left-sidebar.rail-dark .rail-logo:focus-visible,
.left-sidebar.rail-dark .rail-foot-btn:focus-visible { outline-color: var(--rail-dark-active-ink); }

.left-sidebar.rail-dark .rail-foot { border-top-color: var(--rail-dark-border); }
.left-sidebar.rail-dark .rail-foot-btn { color: var(--rail-dark-muted); }
.left-sidebar.rail-dark .rail-foot-btn:hover { background: var(--rail-dark-hover); color: var(--rail-dark-ink); }
.left-sidebar.rail-dark .rail-foot-btn.active { background: var(--rail-dark-active-bg); color: var(--rail-dark-active-ink); }

/* The flyout stays in the DOM inside .left-sidebar (Bootstrap positions it with
   Popper, it doesn't reparent it to <body>), so it can be themed the same way. */
.left-sidebar.rail-dark .rail-flyout {
  --bs-dropdown-bg: #16233f;
  --bs-dropdown-color: var(--rail-dark-ink);
  --bs-dropdown-border-color: var(--rail-dark-border);
  --bs-dropdown-link-color: #c3cce6;
  --bs-dropdown-link-hover-bg: var(--rail-dark-hover);
  --bs-dropdown-link-hover-color: var(--rail-dark-ink);
  --bs-dropdown-link-active-bg: var(--rail-dark-active-bg);
  --bs-dropdown-link-active-color: var(--rail-dark-active-ink);
  --bs-dropdown-header-color: var(--rail-dark-muted);
}
.left-sidebar.rail-dark .rail-flyout .dropdown-item i { color: var(--rail-dark-muted); }
.left-sidebar.rail-dark .rail-flyout .rail-soon { color: var(--rail-dark-muted); }

/* ── Main content (from template) ────────────────────────────────────────── */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.main-header {
  height: 72px; background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 1.75rem; display: flex; align-items: center; gap: 1rem;
  z-index: 20; position: relative; flex-shrink: 0;
}
.header-title { display: flex; flex-direction: column; justify-content: center; }
.header-title h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.header-title .sub { font-size: 12.5px; color: var(--faint); }
.header-spacer { flex: 1; }
.header-actions { display: flex; align-items: center; gap: .6rem; }

/* Tenant chip in header */
.tenant-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.tenant-chip .dot { width: 9px; height: 9px; border-radius: 50%; }

/* User chip in header — the account menu trigger (moved here from the rail foot). */
.user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid transparent; background: none; cursor: pointer;
  text-align: left; transition: background .18s, border-color .18s;
}
.user-chip:hover,
.user-chip[aria-expanded="true"] { background: var(--canvas); border-color: var(--line); }
.user-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.user-chip .av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--brand) 0%, #6f9bf7 100%);
  color: #fff; font-weight: 600; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
}
.user-chip .um { line-height: 1.2; }
.user-chip .un { font-size: 13px; font-weight: 600; color: var(--ink); }
.user-chip .ur { font-size: 11.5px; color: var(--faint); }
.user-chip .uc-caret { font-size: 11px; color: var(--faint); transition: transform .18s; }
.user-chip[aria-expanded="true"] .uc-caret { transform: rotate(180deg); }

/* Shown across every screen while a Platform/Support admin is switched into another tenant's
   workspace (WorkspaceController, DemoContext.IsActingAsAnotherTenant). A normal flex sibling
   between .main-header and .content-scroll, not an overlay — .main-content is already a flex
   column, so it just pushes the content below it down; no z-index needed. */
.workspace-banner {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 1.75rem;
  background: var(--amber-bg); color: var(--amber);
  border-bottom: 1px solid #f3dfb0;
  font-size: 13px; font-weight: 500;
}
.workspace-banner i { font-size: 15px; }
.workspace-banner strong { font-weight: 700; }

/* The header sits at z-index 20 inside .main-content, which is overflow:hidden. The menu opens
   downward over .content-scroll and stays well inside that box, so it isn't clipped — but it does
   need to out-rank the page content, which the header's own stacking context provides. */
.user-chip + .dropdown-menu { --bs-dropdown-zindex: 1040; }

/* ── Scrollable content region for non-builder screens ───────────────────── */
.content-scroll { flex: 1; overflow-y: auto; background: var(--canvas); }
.content-inner { max-width: 1240px; margin: 0 auto; padding: 28px 32px 56px; }

/* ── Buttons (Bootstrap-compatible primary override to brand) ────────────── */
.btn-primary { background: var(--brand); border-color: var(--brand); font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-secondary { font-weight: 500; }
.btn { font-weight: 500; }

/* ── Cards / panels reused across screens ────────────────────────────────── */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.panel-head { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line-2); }
.panel-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.panel-head .count { margin-left: auto; font-size: 12px; color: var(--faint); }
.panel-body { padding: 20px; }
.panel-body.flush { padding: 0; }

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.stat:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.i-pages { background: var(--brand-50);  color: var(--brand); }
.i-media { background: var(--violet-bg); color: var(--violet); }
.i-forms { background: var(--green-bg);  color: var(--green); }
.i-subs  { background: var(--amber-bg);  color: var(--amber); }
.stat-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 14px; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 1px; }
.stat-sub { font-size: 12px; color: var(--faint); margin-top: 6px; }

/* ── List rows ───────────────────────────────────────────────────────────── */
.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line-2); }
.list-row:last-child { border-bottom: none; }
.list-main { flex: 1; min-width: 0; }
.list-title { font-weight: 600; font-size: 13.5px; }
.list-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.list-time { font-size: 12px; color: var(--faint); white-space: nowrap; }
.list-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: #fff; }

/* ── Status badges ───────────────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.status .d { width: 6px; height: 6px; border-radius: 50%; }
.status-live  { background: var(--green-bg); color: var(--green); }
.status-live .d { background: var(--green); }
.status-draft { background: #f1f3f5; color: var(--muted); }
.status-draft .d { background: var(--faint); }
.status-scheduled { background: var(--brand-50); color: var(--brand); }
.status-scheduled .d { background: var(--brand); }
.status-warn { background: var(--amber-bg); color: var(--amber); }
.status-warn .d { background: var(--amber); }
.status-alert { background: var(--red-bg); color: var(--red); }
.status-alert .d { background: var(--red); }
.status-note { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); margin-top: 5px; }
.status-note.changes { color: var(--amber); }

/* Publish / schedule modal */
.pub-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.pub-option-body { min-width: 0; }
.pub-option-title { font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.pub-option-body p { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.pub-option .set-input { margin-top: 10px; max-width: 230px; }
.pub-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; margin: 14px 2px; }
.pub-divider::before, .pub-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Activity timeline */
.timeline { display: flex; flex-direction: column; padding-top: 4px; }
.tl-item { display: flex; gap: 12px; padding-bottom: 18px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child { padding-bottom: 2px; }
.tl-item:last-child::before { display: none; }
.tl-ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; z-index: 1; }
.tl-good { background: var(--green-bg); color: var(--green); }
.tl-info { background: var(--brand-50); color: var(--brand); }
.tl-neutral { background: #eef0f3; color: var(--ink-2); }
.tl-muted { background: #eef0f3; color: var(--faint); }
.tl-body { padding-top: 5px; min-width: 0; }
.tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.tl-time { font-size: 11.5px; color: var(--faint); }
.tl-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Quick-action tiles ──────────────────────────────────────────────────── */
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qa {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: all .18s; cursor: pointer; color: var(--ink);
}
.qa:hover { border-color: var(--brand-100); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.qa .qa-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.qa .qa-t { font-weight: 600; font-size: 14px; }
.qa .qa-s { font-size: 12px; color: var(--muted); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 20px; color: var(--faint); }
.empty i { font-size: 30px; color: var(--line); }

/* ── Section heading ─────────────────────────────────────────────────────── */
.section-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.section-title.mt { margin-top: 28px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .qa-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px)  { .dash-cols { grid-template-columns: 1fr !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   Sign-in screen
   ══════════════════════════════════════════════════════════════════════════ */
.auth-body { overflow: auto; background: #fff; }
.auth-wrap { display: flex; min-height: 100vh; }

/* Brand panel */
.auth-brand {
  width: 46%; max-width: 620px; flex-shrink: 0;
  background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand-600) 55%, var(--brand) 100%);
  color: #fff; padding: 48px 56px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.auth-brand::after {
  content: ""; position: absolute; right: -140px; bottom: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.14), transparent 70%);
}
.auth-brand-top { display: flex; align-items: center; gap: 12px; }
.auth-mark {
  width: 60px; height: 60px; border-radius: 12px; background:#fff; padding:6px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  backdrop-filter: blur(2px);
}
.auth-brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.auth-brand-mid { margin-top: auto; margin-bottom: auto; position: relative; z-index: 1; }
.auth-brand-mid h1 { font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; max-width: 460px; }
.auth-brand-mid p { margin-top: 16px; font-size: 15px; color: rgba(255,255,255,.82); max-width: 420px; line-height: 1.6; }
.auth-features { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.auth-features li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.auth-features i { font-size: 17px; opacity: .9; }
.auth-brand-foot { font-size: 12.5px; color: rgba(255,255,255,.62); position: relative; z-index: 1; }

/* Form panel */
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--canvas); }
.auth-card { width: 100%; max-width: 400px; }
.auth-mark-sm {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, var(--brand) 0%, #4f80f5 100%);
  color: #fff; display: none; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px; box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.auth-card h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 6px 0 24px; }

.auth-alert {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: var(--red-bg); color: var(--red); border: 1px solid #f7cfcf;
  border-radius: 9px; padding: 10px 12px; margin-bottom: 18px;
}

.auth-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input i { position: absolute; left: 13px; color: var(--faint); font-size: 15px; }
.auth-input input {
  width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 14px 0 38px; font-size: 14px; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 20px; }
.auth-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.auth-check input { accent-color: var(--brand); }
.auth-link { font-size: 13px; color: var(--brand); font-weight: 500; }
.auth-submit { height: 44px; font-size: 14.5px; font-weight: 600; border-radius: 10px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--faint); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.account-list { display: flex; flex-direction: column; gap: 8px; }
.account-form { margin: 0; }
.account-chip {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; cursor: pointer; transition: all .15s; text-align: left;
}
.account-chip:hover { border-color: var(--brand-100); background: var(--brand-50); box-shadow: var(--shadow-sm); }
.ac-av { width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ac-meta { flex: 1; line-height: 1.3; }
.ac-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ac-sub { display: block; font-size: 12px; color: var(--muted); }
.ac-go { color: var(--faint); font-size: 14px; }

@media (max-width: 900px) {
  .auth-brand { display: none; }
  .auth-mark-sm { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Builder host (embedded Craft/FormCraft iframe)
   ══════════════════════════════════════════════════════════════════════════ */
.builder-host { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
/* flex:1 rather than a fixed 100vh: .builder-host is already the only thing filling
   .main-content's height, so this fills exactly that space. */
/* Transparent, not #fff: the host's spinner below shows through until the iframe's own
   document paints its background, at which point the in-iframe preload overlay
   (craft-integration.js / .cms-build-loading) takes over for the manifest+document phase.
   position/z-index make the iframe stack ABOVE the ::before spinner — both are positioned,
   so without this the absolutely-positioned spinner paints on top of the static iframe and
   two spinners show at once. */
.builder-frame { width: 100%; flex: 1 1 auto; min-height: 0; border: 0; display: block; background: transparent; position: relative; z-index: 1; }
/* Host-side spinner — covers only the moment before the builder iframe has painted anything
   at all (its HTML is still downloading), which the in-iframe overlay can't reach. The
   iframe stacks above it (see .builder-frame), so the instant the builder paints any
   background — its own or the preload overlay's — this disappears behind it. */
.builder-host::before {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -23px 0 0 -23px;
  width: 46px; height: 46px; border-radius: 50%; z-index: 0;
  border: 3px solid rgba(0, 88, 156, .15); border-top-color: #00589c;
  animation: builder-host-spin .8s linear infinite;
}
@keyframes builder-host-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Toolbar / listing screens
   ══════════════════════════════════════════════════════════════════════════ */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1; max-width: 380px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; }
.search-box input {
  width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 14px 0 36px; font-size: 14px; background: #fff; color: var(--ink);
}
.search-box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }

.seg { display: inline-flex; background: #eef0f4; border-radius: 9px; padding: 3px; gap: 2px; }
.seg a {
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.seg a.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
.seg a .n { color: var(--faint); font-weight: 500; margin-left: 4px; }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  /* Symmetric padding. This was `0 20px 12px` — no top padding at all — so the header labels sat
     flush against the top edge of the panel on every screen using this table. */
  color: var(--faint); padding: 16px 20px; border-bottom: 1px solid var(--line-2);
}
.data-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: var(--surface-2); }
.pg-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.pg-title a:hover { color: var(--brand); }
.pg-url { font-size: 12.5px; color: var(--faint); }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; transition: all .12s;
}
.icon-btn:hover { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.icon-btn.danger:hover { color: var(--red); border-color: #f3c9c9; }
.icon-btn.go:hover { color: var(--brand); border-color: var(--brand-100); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast-host { position: fixed; bottom: 24px; right: 24px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.app-toast {
  display: flex; align-items: center; gap: 10px; min-width: 260px;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 11px;
  box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500;
  animation: toast-in .3s ease, toast-out .3s ease 3.4s forwards;
}
.app-toast i { font-size: 17px; }
.toast-success i { color: #4ade80; }
.toast-danger i { color: #f87171; }
.toast-info i { color: #60a5fa; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ══════════════════════════════════════════════════════════════════════════
   Media Manager
   ══════════════════════════════════════════════════════════════════════════ */
.dropzone {
  border: 2px dashed #d3d7e0; border-radius: var(--radius); background: #fff;
  padding: 32px 20px; text-align: center; cursor: pointer; transition: all .15s; margin-bottom: 20px;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-50); }
.dropzone.dragover { border-color: var(--brand); background: var(--brand-50); transform: scale(1.005); }
.dropzone i { font-size: 30px; color: var(--brand); }
.dz-title { font-weight: 600; font-size: 15px; margin-top: 8px; }
.dz-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dz-link { color: var(--brand); font-weight: 500; }

.media-count { font-size: 12.5px; color: var(--faint); margin-bottom: 12px; font-weight: 500; }
.media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 14px; flex-wrap: wrap; }
.media-toolbar .search-box { flex: 0 1 340px; }
.media-toolbar .media-count { margin: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 26px 0 8px; flex-wrap: wrap; }
.pg { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; transition: all .12s; }
.pg:hover { border-color: var(--brand); color: var(--brand); }
.pg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pg.disabled { opacity: .4; pointer-events: none; }
.pg-gap { color: var(--faint); padding: 0 2px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.media-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.media-thumb {
  aspect-ratio: 4 / 3; background: #f3f4f8; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-info { padding: 10px 12px; }
.media-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-size { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.media-hover {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s;
}
.media-card:hover .media-hover { opacity: 1; }
.mh-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(17,24,39,.72); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px;
  backdrop-filter: blur(4px);
}
.mh-btn:hover { background: rgba(17,24,39,.92); }
.mh-btn.js-del:hover { background: var(--red); }

.media-card.uploading { opacity: .85; }
.media-card .spinner {
  width: 26px; height: 26px; border: 3px solid var(--brand-100); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Forms / submissions extras ──────────────────────────────────────────── */
.sub-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: #f1f3f5; border-radius: 999px; padding: 3px 11px;
}
.sub-pill:hover { background: var(--brand-50); color: var(--brand); }
.sub-pill i { font-size: 12px; }
.sub-val { display: inline-block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 13.5px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.back-link:hover { color: var(--brand); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); font-weight: 500; border-radius: var(--r-sm); padding: 9px 16px; font-size: 13.5px; }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════
   Module Marketplace
   ══════════════════════════════════════════════════════════════════════════ */
.mkt-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.mkt-intro-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.mkt-intro-sub { color: var(--muted); font-size: 14px; margin-top: 4px; max-width: 640px; }
.mkt-count { font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-50); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }

.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.mkt-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  box-shadow: var(--shadow-sm); transition: border-color .18s, box-shadow .18s;
}
.mkt-card.on { border-color: var(--brand-100); box-shadow: 0 4px 16px rgba(37,99,235,.08); }
.mkt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mkt-ico { width: 46px; height: 46px; border-radius: 12px; background: #f1f3f7; color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all .18s; }
.mkt-card.on .mkt-ico { background: var(--brand-50); color: var(--brand); }
.mkt-name { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mkt-live { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green); background: var(--green-bg); border-radius: 5px; padding: 2px 6px; }
.mkt-desc { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.5; min-height: 38px; }
.mkt-status .badge-en { display: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--green); }
.mkt-status .badge-dis { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.mkt-card.on .badge-en { display: inline-flex; }
.mkt-card.on .badge-dis { display: none; }
.mkt-soon { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border-radius: 5px; padding: 2px 6px; }
.mkt-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.mkt-ver i { font-size: 10px; }
.mkt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.mkt-status { margin: 0; }
.mkt-open { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; padding: 5px 10px; border-radius: 7px; transition: background .12s; }
.mkt-open:hover { background: var(--brand-50); }

/* Module management banner + coming-soon page */
.mod-banner { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.mod-banner-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.mod-banner-title { font-weight: 700; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.mod-banner-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mod-banner-ver { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.flex-1 { flex: 1; }

.cs-wrap { display: flex; justify-content: center; padding: 24px 0; }
.cs-card { max-width: 560px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 40px 40px 34px; text-align: center; }
.cs-ico { width: 72px; height: 72px; border-radius: 18px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 18px; }
.cs-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 5px 13px; }
.cs-title { font-size: 24px; font-weight: 700; margin: 14px 0 4px; }
.cs-ver { font-size: 12.5px; color: var(--faint); }
.cs-desc { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 14px auto 0; max-width: 440px; }
.cs-note { display: flex; align-items: flex-start; gap: 9px; text-align: left; background: var(--brand-50); color: var(--brand); border-radius: 11px; padding: 13px 15px; font-size: 13px; line-height: 1.55; margin: 20px 0; }
.cs-note i { font-size: 16px; margin-top: 1px; }
.cs-roadmap { display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 260px; margin: 0 auto 24px; }
.cs-step { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--muted); }
.cs-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.cs-dot.done { background: var(--green); border-color: var(--green); color: #fff; }
.cs-dot.active { border-color: var(--brand); box-shadow: inset 0 0 0 3px var(--brand); }
.cs-step:has(.done), .cs-step:has(.active) { color: var(--ink); font-weight: 500; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #cfd4dd; border-radius: 999px; cursor: pointer; transition: background .18s; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:disabled + .slider { opacity: .6; }

/* margin-bottom matters as much as margin-top: this banner sits directly above the screen's card
   on eight of the nine views that use it, and without it the two were touching. */
.mkt-hint { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 18px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); border-radius: 12px; padding: 14px 18px; font-size: 13px; }
.mkt-hint i { font-size: 16px; margin-top: 1px; }
.mkt-hint em { font-style: normal; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   Settings
   ══════════════════════════════════════════════════════════════════════════ */
.set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.set-tab { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; padding: 10px 16px; margin-bottom: -1px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.set-tab i { font-size: 15px; }
.set-tab:hover { color: var(--ink); }
.set-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.set-tab-n { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2, #f1f3f5); border-radius: 999px; padding: 1px 8px; }
.set-tab.is-active .set-tab-n { color: var(--brand); background: var(--brand-50); }
.settings-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.settings-form .panel-head.bordered { border-top: 1px solid var(--line-2); }
.panel-body.bordered { border-top: 1px solid var(--line-2); }
.set-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.set-input {
  width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 13px; font-size: 14px; color: var(--ink); background: #fff;
}
.set-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.set-readonly { display: flex; align-items: center; background: var(--surface-2); color: var(--muted); }
.set-hint { font-size: 12px; color: var(--faint); margin-top: 6px; }
.set-hint code, .set-label code { background: #eef0f4; color: var(--brand); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-preview { width: 100px; height: 100px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.logo-preview img { max-width: 90px; max-height: 90px; }

.color-row { display: flex; align-items: center; gap: 10px; }
.color-swatch-input { width: 46px; height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 3px; background: #fff; cursor: pointer; }

/* One-click picks from colors.css's "Extra named colors" — the same static, tenant-independent
   hues the page builder's own colour popover offers, so a Theme Builder pick and a block-level
   pick can land on the identical colour. Hex values are hard-coded here rather than read from a
   CSS variable because a native <input type="color"> only ever accepts a literal #rrggbb — handing
   it var(--color-teal) has the browser silently coerce it to #000000. Safe to hard-code: colors.css
   labels this set "static - never change".) */
.quick-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-color {
  width: 22px; height: 22px; border-radius: 6px; padding: 0; cursor: pointer;
  border: 1px solid rgba(17,24,39,.12);
}
.quick-color:hover { transform: scale(1.12); border-color: rgba(17,24,39,.3); }

/* Public site preview */
.preview-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.site-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); position: sticky; top: 8px; }
.sp-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.sp-header img { height: 30px; }
.sp-nav { display: flex; gap: 16px; }
.sp-nav span { font-size: 12px; color: var(--muted); font-weight: 500; }
.sp-hero { padding: 34px 24px; text-align: center; color: #fff; transition: background .2s; }
.sp-hero-title { font-size: 22px; font-weight: 700; }
.sp-hero-sub { font-size: 13px; opacity: .9; margin-top: 6px; }
.sp-btn { margin-top: 16px; background: #fff; color: #1b1c2e; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; font-size: 13px; }
.sp-token { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--brand-50); color: var(--brand-700); font-size: 12.5px; }
.sp-token code { background: #fff; padding: 1px 5px; border-radius: 4px; }

@media (max-width: 980px) { .settings-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   Component Library
   ══════════════════════════════════════════════════════════════════════════ */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.comp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s;
  display: flex; flex-direction: column;
}
.comp-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Scaled live-preview thumbnail — iframe renders at a fixed design width (1100px)
   then JS scales it to fill the card width (see components.js). */
.comp-thumb { position: relative; height: 172px; overflow: hidden; background: #f8f9fb; border-bottom: 1px solid var(--line-2); }
.comp-thumb iframe { width: 1100px; height: 618px; border: 0; transform: scale(.2727); transform-origin: top left; pointer-events: none; }
.comp-fav {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.9); color: var(--faint); display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; box-shadow: var(--shadow-sm); backdrop-filter: blur(4px); transition: all .15s; z-index: 2;
}
.comp-fav:hover { color: #e11d48; }
.comp-fav.on { color: #e11d48; }
.comp-preview-btn {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  background: rgba(17,24,39,.85); color: #fff; border: none; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .18s; display: inline-flex; align-items: center; gap: 6px; z-index: 2;
}
.comp-thumb:hover .comp-preview-btn { opacity: 1; }

.comp-body { padding: 14px 16px 12px; flex: 1; }
.comp-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.comp-name i { color: var(--brand); }
.comp-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.cat-Headers { background: var(--brand-50); color: var(--brand); }
.cat-Content { background: var(--violet-bg); color: var(--violet); }
.cat-Marketing { background: var(--amber-bg); color: var(--amber); }
.cat-SocialProof { background: var(--green-bg); color: var(--green); }
.cat-Media { background: #d9f7f4; color: #0d9488; }
.cat-Interactive { background: #fde7f1; color: #db2777; }
.cat-Imported { background: #f1f3f5; color: var(--muted); }
.comp-desc { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; min-height: 36px; }
.comp-meta { display: flex; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--faint); }
.comp-meta i { font-size: 11px; }

.comp-actions { display: flex; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.ca-btn { width: 32px; height: 30px; border-radius: 7px; border: none; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .12s; }
.ca-btn:hover { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.ca-btn.danger:hover { color: var(--red); }
.cat-Company { background: #e0e7ff; color: #4338ca; }
.cat-Education { background: #ccfbf1; color: #0f766e; }
.cat-Utility { background: #eef2f6; color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════
   Template Gallery
   ══════════════════════════════════════════════════════════════════════════ */
.tpl-lead { flex: 1; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.tpl-lead i { color: var(--brand); font-size: 16px; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.tpl-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s;
  display: flex; flex-direction: column;
}
.tpl-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Screenshot-style thumbnail: a faux browser bar over a clipped, scaled live preview. */
.tpl-thumb { position: relative; border-bottom: 1px solid var(--line-2); }
.tpl-bar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; background: #f1f3f5; border-bottom: 1px solid var(--line-2); }
.tpl-bar em { font-style: normal; font-size: 11px; color: var(--faint); background: #fff; border-radius: 5px; padding: 2px 10px; flex: 1; }
.tpl-bar .win-ctrls { gap: 12px; font-size: 10.5px; }
.tpl-bar .win-ctrls .bi-square { font-size: 8px; }
.tpl-bar .win-ctrls .bi-x-lg { font-size: 10px; }
.tpl-frame-wrap { position: relative; height: 208px; overflow: hidden; background: #fff; }
.tpl-frame-wrap iframe { width: 1100px; height: 900px; border: 0; transform: scale(.29); transform-origin: top left; pointer-events: none; }
.tpl-preview-btn {
  position: absolute; inset: 28px 0 0 0; margin: auto; width: fit-content; height: fit-content;
  background: rgba(17,24,39,.85); color: #fff; border: none; border-radius: 8px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .18s; display: inline-flex; align-items: center; gap: 6px; z-index: 2;
}
.tpl-thumb:hover .tpl-preview-btn { opacity: 1; }

.tpl-body { padding: 15px 16px 12px; flex: 1; }
.tpl-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.tpl-name i { color: var(--brand); }
.tpl-desc { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.tpl-chip { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 7px; }

.tpl-actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.tpl-actions .btn { flex: 1; }

.use-note { display: flex; align-items: center; gap: 9px; background: var(--brand-50); color: var(--brand); border-radius: 9px; padding: 10px 13px; font-size: 13px; }
.use-note i { font-size: 16px; }

/* Template status + meta row */
.tpl-meta-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.tpl-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.tpl-status .d { width: 6px; height: 6px; border-radius: 50%; }
.st-published { background: var(--green-bg); color: var(--green); } .st-published .d { background: var(--green); }
.st-draft { background: #f1f3f5; color: var(--muted); } .st-draft .d { background: var(--faint); }
.st-archived { background: var(--amber-bg); color: var(--amber); } .st-archived .d { background: var(--amber); }
.tpl-builtin { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--brand); }
.tpl-vis { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--faint); text-transform: capitalize; }

/* Template properties drawer (#5) */
.tpl-drawer-scrim { position: fixed; inset: 0; background: rgba(17,24,39,.35); opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 1050; }
.tpl-drawer-scrim.open { opacity: 1; visibility: visible; }
.tpl-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw; background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.16); transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); z-index: 1060; display: flex; }
.tpl-drawer.open { transform: none; }
.tpl-drawer form { display: flex; flex-direction: column; width: 100%; }
.tpl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; }
.tpl-drawer-head i { color: var(--brand); }
.tpl-drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.tpl-drawer-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); }
.pp-group { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.pp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-toggles { display: flex; gap: 18px; margin-top: 14px; }
.pp-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pp-toggle input { accent-color: var(--brand); width: 16px; height: 16px; }

/* Component editor. The card itself is the shared .rte-* modal in phase2.css — the same one the
   Page Builder opens on a detached component. Only the raw-HTML fallback textarea lives here:
   it is what the form posts, and what the user types into if TinyMCE fails to load. */
.ce-code { font-family: 'DM Mono', ui-monospace, 'Consolas', monospace; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Theme Builder
   ══════════════════════════════════════════════════════════════════════════ */
.theme-layout { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }
.theme-controls { display: flex; flex-direction: column; gap: 18px; }
.theme-controls .panel { margin: 0; }
.theme-save { position: sticky; bottom: 0; }

/* Presets */
.preset-row { display: flex; flex-wrap: wrap; gap: 10px; }
.preset { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 7px 5px; cursor: pointer; text-align: center; transition: all .14s; width: 78px; }
.preset:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.preset.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }
.preset-swatch { display: block; height: 34px; border-radius: 7px; }
.preset-name { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; font-weight: 600; }

/* Typography */
.font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.font-opt { position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all .14s; margin: 0; }
.font-opt:hover { border-color: var(--brand); }
.font-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }
.font-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.font-aa { display: block; font-size: 30px; line-height: 1; color: var(--ink); font-weight: 600; }
.font-name { display: block; font-size: 11.5px; color: var(--muted); margin-top: 8px; font-weight: 600; }

/* Corners */
.radius-seg { display: flex; gap: 10px; }
.radius-opt { position: relative; flex: 1; border: 1px solid var(--line); border-radius: 11px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all .14s; margin: 0; font-size: 12px; color: var(--muted); font-weight: 600; }
.radius-opt:hover { border-color: var(--brand); }
.radius-opt.sel { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); color: var(--ink); }
.radius-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.radius-box { display: block; width: 40px; height: 26px; margin: 0 auto 7px; border: 2px solid var(--faint); border-bottom: none; }
.radius-box.radius-rounded { border-radius: 10px 10px 0 0; }
.radius-box.radius-sharp { border-radius: 0; }
.radius-box.radius-pill { border-radius: 16px 16px 0 0; }

/* ── Theme Builder right column: Live preview / Custom CSS / Custom JS tabs ── */
/* Only the right column is tabbed; .theme-controls on the left is always visible, so colours
   and fonts stay reachable whichever tab is showing. The strip reuses .set-tabs/.set-tab from
   the Settings screen so the two code-editing screens read as one family. */
.theme-tabs { margin-bottom: 16px; }
/* Sticky is on the COLUMN, so a tall code pane would scroll under the rail while pinned. The
   code panes opt out; the preview (short, and useful while scrolling the controls) keeps it. */
.theme-preview-col:has(#paneCss:not(.d-none)),
.theme-preview-col:has(#paneJs:not(.d-none)) { position: static; }
/* .set-input pins height:42px for single-line fields, which silently beats `rows` on a
   textarea — the code editors were stuck one line tall until this override. Settings works
   around the same rule with an inline min-height on its Site CSS box. */
.theme-code { height: auto; resize: vertical; tab-size: 2; }

/* ── Live preview mini-site (scoped CSS variables, updated live by theme.js) ── */
.theme-preview-col { position: sticky; top: 8px; }
.theme-preview { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.tp-chrome { display: flex; align-items: center; height: 34px; padding: 0 14px; background: #eef0f3; border-bottom: 1px solid var(--line-2); }
/* Windows-style caption controls (minimise / maximise / close), decorative. */
.win-ctrls { display: flex; align-items: center; gap: 16px; margin-left: auto; color: #98a2b0; font-size: 12px; line-height: 1; }
.win-ctrls .bi-square { font-size: 9.5px; }
.win-ctrls .bi-x-lg { font-size: 12px; }
.tp-site { padding: 20px 22px 26px; font-family: var(--tp-font-body); color: #1f2430; }

.tp-nav { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
.tp-logo { height: 26px; max-width: 130px; object-fit: contain; }
.tp-links { display: flex; gap: 16px; flex: 1; font-size: 13px; color: #55606f; }
.tp-links a { color: inherit; text-decoration: none; }

.tp-btn { border: none; font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: var(--tp-radius-btn); cursor: default; }
.tp-btn-primary { background: var(--tp-primary); color: #fff; }
.tp-btn-light { background: #fff; color: var(--tp-primary); }
.tp-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }

/* Third stop falls back to secondary when tertiary isn't set, so this reads as the same
   2-colour gradient it always was rather than needing a separate rule per case. */
.tp-hero { position: relative; border-radius: var(--tp-radius); padding: 34px 30px; color: #fff; text-align: center; background: linear-gradient(135deg, var(--tp-primary), var(--tp-secondary), var(--tp-tertiary, var(--tp-secondary))); }
.tp-badge { display: inline-block; background: rgba(255,255,255,.22); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.tp-h1 { font-family: var(--tp-font-head); font-weight: 800; font-size: 30px; margin: 0 0 10px; line-height: 1.12; }
.tp-lead { font-size: 14px; opacity: .9; max-width: 420px; margin: 0 auto 18px; }
.tp-hero-btns { display: flex; gap: 10px; justify-content: center; }

.tp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.tp-card { border: 1px solid var(--line-2); border-radius: var(--tp-radius); padding: 16px 14px; text-align: center; }
.tp-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; font-size: 18px; color: var(--tp-primary); background: color-mix(in srgb, var(--tp-primary) 12%, #fff); margin-bottom: 10px; }
/* One icon per brand colour, so all three (when tertiary is set) show up somewhere in the
   preview rather than only ever appearing in the hero gradient. Falls back the same way. */
.tp-cards .tp-card:nth-child(2) .tp-ico { color: var(--tp-secondary); background: color-mix(in srgb, var(--tp-secondary) 12%, #fff); }
.tp-cards .tp-card:nth-child(3) .tp-ico { color: var(--tp-tertiary, var(--tp-primary)); background: color-mix(in srgb, var(--tp-tertiary, var(--tp-primary)) 12%, #fff); }
.tp-card-t { font-family: var(--tp-font-head); font-weight: 700; font-size: 14px; }
.tp-card p { font-size: 12px; color: #6b7482; margin: 5px 0 0; }

.tp-type { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.tp-type-h { font-family: var(--tp-font-head); font-weight: 700; font-size: 20px; margin-bottom: 6px; color: #1f2430; }
.tp-type-b { font-family: var(--tp-font-body); font-size: 13.5px; color: #55606f; line-height: 1.6; }

@media (max-width: 1000px) {
  .theme-layout { grid-template-columns: 1fr; }
  .theme-preview-col { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Analytics dashboard  (chart palette validated via dataviz/validate_palette.js)
   ══════════════════════════════════════════════════════════════════════════ */
.viz {
  --viz-1: #2a78d6;  /* categorical slot 1 — page views */
  --viz-2: #eb6834;  /* categorical slot 2 — visitors */
  --viz-3: #1baf7a;  /* categorical slot 3 — tablet */
  --viz-muted: #898781;
  --viz-grid: #e8eaed;
  --viz-axis: #c3c2b7;
  --viz-good: #0a7d0a;
  --viz-bad:  #d03b3b;
}
.viz-panel { margin-bottom: 18px; }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px 12px; box-shadow: var(--shadow-sm); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.kpi-delta { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 1px; padding: 2px 8px 2px 5px; border-radius: 20px; }
.kpi-delta.up { color: var(--viz-good); background: #e7f5e7; }
.kpi-delta.down { color: var(--viz-bad); background: #fdeaea; }
.kpi-delta i { font-size: 15px; margin-right: -2px; }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.kpi-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi-spark { width: 100%; height: 30px; margin-top: 8px; display: block; }

/* Legend + dots (shared) */
.viz-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Trend chart */
.viz-chart { position: relative; width: 100%; }
.trend-svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz-axis-lbl { fill: var(--viz-muted); font-size: 11px; }
.viz-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 9px; padding: 8px 11px; font-size: 12px; min-width: 138px; z-index: 5; }
.viz-tip .t-date { font-weight: 700; color: var(--ink); margin-bottom: 5px; font-size: 11.5px; }
.viz-tip .t-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); line-height: 1.7; }
.viz-tip .t-row span { display: inline-flex; align-items: center; gap: 6px; }
.viz-tip .t-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Layout columns */
.viz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.viz-cols-3 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 14px; }

/* Horizontal magnitude bars (top pages, sources) */
.bar-list { display: flex; flex-direction: column; gap: 15px; }
.bar-row { display: grid; grid-template-columns: 148px 1fr 58px; align-items: center; gap: 12px; }
.bar-meta { min-width: 0; }
.bar-name { display: block; font-size: 13px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-sub { display: block; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 9px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--viz-1); border-radius: 6px; }
.bar-val { text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Vertical submission bars */
.col-chart { display: flex; align-items: stretch; gap: 10px; height: 188px; padding-top: 4px; }
.col-item { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.col-track { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.col-num { font-size: 11px; color: var(--ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.col-bar { width: 64%; max-width: 34px; min-height: 4px; background: var(--viz-1); border-radius: 5px 5px 0 0; }
.col-lbl { text-align: center; font-size: 10.5px; color: var(--viz-muted); margin-top: 8px; white-space: nowrap; }

/* Submissions by form */
.form-break { border-top: 1px solid var(--line-2); margin-top: 16px; padding-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.fb-row { display: grid; grid-template-columns: 1fr 90px 42px; align-items: center; gap: 10px; }
.fb-name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-track { height: 7px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.fb-fill { display: block; height: 100%; background: var(--viz-1); opacity: .5; border-radius: 5px; }
.fb-val { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Device stacked bar */
.stack-bar { display: flex; gap: 2px; height: 30px; border-radius: 7px; overflow: hidden; margin-bottom: 16px; }
.stack-seg { height: 100%; }
.stack-legend { display: flex; flex-direction: column; gap: 10px; }
.sl-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.sl-left { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.sl-val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.viz-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); margin-top: 6px; }
.viz-empty { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }

@media (max-width: 1050px) {
  .viz-cols, .viz-cols-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Embedded form/component on published pages (EmbedResolver output) ────── */
.cms-embed-form { max-width: 660px; margin: 10px auto; background: #fff; border: 1px solid var(--line); border-radius: var(--site-radius, 14px); padding: 28px 30px; box-shadow: 0 4px 18px rgba(20,22,45,.05); }
.cms-embed-form-head h3 { font-weight: 700; margin: 0; font-family: var(--site-font-head, inherit); }
.cms-embed-form-head p { color: #6b7280; margin: 6px 0 14px; font-size: 14px; }
.cms-embed-form .form-label { font-weight: 500; font-size: 13.5px; }
/* Colour through the button's own --bs-btn-* variables, NOT a plain background: Bootstrap's
   .btn:hover sets background-color from --bs-btn-hover-bg at higher specificity, so a plain
   background silently vanished on hover. A per-form colour (FormRenderer.SubmitButton)
   overrides the same variables inline. */
.cms-embed-submit { --bs-btn-bg: var(--site); --bs-btn-hover-bg: var(--site); --bs-btn-active-bg: var(--site);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
  font-weight: 600; border-radius: var(--site-radius-btn, 9px); }
.cms-embed-submit:not(.btn-sm) { padding: 11px 22px; }
.cms-embed-submit:hover { filter: brightness(.94); }
/* "Hide border" (form Settings): the embed blends into the page instead of sitting in a card. */
.cms-embed-form-plain { border: 0; box-shadow: none; background: transparent; padding: 0; }
.cms-embed-missing { border: 1px dashed var(--line); border-radius: 10px; padding: 16px; text-align: center; color: var(--faint); font-size: 13px; }

/* ── Empty state (listing) ───────────────────────────────────────────────── */
.empty-lg { text-align: center; padding: 64px 20px; }
.empty-lg .ico { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; }
.empty-lg h3 { margin: 16px 0 4px; font-size: 16px; }
.empty-lg p { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   Media Manager — Digital Asset Manager (three-pane: folders / grid / props)
   ══════════════════════════════════════════════════════════════════════════ */
.dam { display: flex; height: 100%; overflow: hidden; background: var(--canvas); position: relative; }

/* ── Left: folders + scopes ─────────────────────────────────────────────── */
.dam-side { width: 244px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.dam-side-scroll { overflow-y: auto; padding: 14px 12px 22px; flex: 1; }
.dam-side-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 8px; margin-top: 8px; }
.dam-side-head-row { display: flex; align-items: center; justify-content: space-between; }
.dam-side-add { width: 22px; height: 22px; border: none; background: none; color: var(--faint); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dam-side-add:hover { background: var(--brand-50); color: var(--brand); }

.dam-quick { list-style: none; margin: 0; padding: 0; }
.dam-quick li { margin: 1px 0; }
.dam-scope, .dam-node {
  width: 100%; display: flex; align-items: center; gap: 9px; border: none; background: none;
  padding: 7px 9px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.dam-scope i { font-size: 14px; color: var(--faint); width: 16px; text-align: center; }
.dam-scope:hover, .dam-node:hover { background: var(--surface-2, #f6f7f9); }
.dam-scope.is-active, .dam-node.is-active { background: var(--brand-50); color: var(--brand); }
/* Folder under a file drag — the drop would upload into THIS folder. */
.dam-node.is-droptarget { background: var(--brand-50); color: var(--brand); outline: 2px dashed var(--brand); outline-offset: -2px; }
.dam-scope.is-active i { color: var(--brand); }
.dam-scope-n, .dam-node-n { margin-left: auto; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.dam-scope.is-active .dam-scope-n, .dam-node.is-active .dam-node-n { color: var(--brand); }

/* Folder tree */
.dam-tree { list-style: none; margin: 4px 0 0; padding: 0; }
.dam-tree ul { list-style: none; margin: 0; padding: 0; }
.dam-node-row { display: flex; align-items: center; }
.dam-twist { width: 18px; height: 26px; flex: none; border: none; background: none; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: transform .12s; }
.dam-twist.open { transform: rotate(90deg); }
.dam-twist.leaf { visibility: hidden; }
.dam-node { padding-left: 4px; }
.dam-node i.dam-folder-ico { font-size: 14px; color: #f0b429; width: 16px; text-align: center; }
.dam-node.is-active i.dam-folder-ico { color: var(--brand); }
.dam-node-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dam-children { margin-left: 14px; border-left: 1px solid var(--line-2); padding-left: 2px; }
.dam-children.collapsed { display: none; }

/* ── Center: toolbar + grid ─────────────────────────────────────────────── */
.dam-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dam-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dam-search { position: relative; flex: 1 1 280px; min-width: 200px; }
.dam-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; }
.dam-search input { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px 0 36px; font-size: 13.5px; background: var(--canvas); }
.dam-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); background: #fff; }

.dam-filter-chips { display: flex; gap: 4px; background: var(--canvas); padding: 3px; border-radius: 9px; border: 1px solid var(--line-2); }
.dam-chip { border: none; background: none; padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; transition: all .12s; }
.dam-chip:hover { color: var(--ink); }
.dam-chip.is-active { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }

.dam-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dam-select { height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 30px 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-2); background-color: #fff; appearance: none; cursor: pointer; max-width: 190px; background-repeat: no-repeat; background-position: right 10px center; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>"); }
.dam-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.dam-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dam-view-toggle button { width: 38px; height: 38px; border: none; background: #fff; color: var(--muted); cursor: pointer; font-size: 15px; }
.dam-view-toggle button + button { border-left: 1px solid var(--line); }
.dam-view-toggle button.is-active { background: var(--brand-50); color: var(--brand); }

.dam-subbar { display: flex; align-items: center; gap: 12px; padding: 9px 18px; background: var(--surface); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.dam-crumb { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); flex-wrap: wrap; }
.dam-crumb .sep { color: var(--faint); font-weight: 400; }
.dam-crumb a { color: var(--muted); cursor: pointer; }
.dam-crumb a:hover { color: var(--brand); }
.dam-crumb .cur { color: var(--ink); }
.dam-side-toggle { display: none; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.dam-activefilters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dam-fchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 12px; font-weight: 600; }
.dam-fchip button { border: none; background: none; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; border-radius: 50%; }
.dam-fchip button:hover { background: rgba(37,99,235,.16); }
.dam-count { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--faint); white-space: nowrap; }

.dam-scroll { flex: 1; overflow-y: auto; padding: 18px; }
.dam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; align-content: start; }
.dam-sentinel { height: 1px; }

/* Asset tile */
.dam-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow .14s, transform .14s, border-color .14s; }
.dam-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.dam-tile.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); }
.dam-thumb { aspect-ratio: 4 / 3; background: #f3f4f8; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.dam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dam-thumb.is-file { flex-direction: column; gap: 6px; }
.dam-thumb.is-file i { font-size: 40px; }
.dam-thumb.is-file .ext { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dam-thumb.k-document i { color: #dc2626; }
.dam-thumb.k-document { background: #fdf2f2; }
.dam-thumb.k-video i { color: #7c3aed; }
.dam-thumb.k-video { background: #f3effe; }
.dam-thumb.k-svg i { color: #0891b2; }
.dam-thumb.k-svg { background: #ecfbfe; }
.dam-play { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(17,24,39,.62); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(3px); }
.dam-tinfo { padding: 8px 10px 10px; }
.dam-tname { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam-tmeta { font-size: 11px; color: var(--faint); margin-top: 2px; display: flex; gap: 6px; }
.dam-fav { position: absolute; top: 7px; left: 7px; width: 27px; height: 27px; border-radius: 8px; border: none; background: rgba(17,24,39,.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; transition: opacity .12s; backdrop-filter: blur(3px); }
.dam-tile:hover .dam-fav, .dam-fav.on { opacity: 1; }
.dam-fav.on { background: rgba(240,180,41,.95); color: #fff; }
/* File-type artwork from /lib/svg-icons, in place of the old Bootstrap glyph +
   extension label. The source SVGs are portrait (viewBox 72×100, ~1:1.39), so height
   is left auto to preserve that ratio — 48px wide renders ~67px tall.

   Selector is `.dam-thumb img.dam-fileicon`, not a bare `.dam-fileicon`: the
   `.dam-thumb img` rule above is (0,1,1) and a bare class is (0,1,0), so that rule
   won and stretched the icon to height:100% of the 4:3 tile. Dropping object-fit
   from `.dam-thumb img` would have fixed the icon but squashed every photo
   thumbnail, which needs cover to fill its tile. */
.dam-thumb img.dam-fileicon { width: 48px; max-width: 48px; height: auto; object-fit: contain; display: block; }
/* Details panel and the large preview variant. .dam-pv img carries the same
   width/height:100% + cover as .dam-thumb img, so this needs the matching
   specificity to win. */
.dam-pv img.dam-fileicon, .dam-thumb img.dam-pv-icon { width: 96px; max-width: 96px; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.dam-badge { position: absolute; top: 7px; right: 7px; background: rgba(17,24,39,.66); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(3px); }

/* List view */
.dam.view-list .dam-grid { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dam.view-list .dam-tile { display: grid; grid-template-columns: 40px 24px minmax(140px, 1fr) 92px 88px 104px 128px; align-items: center; gap: 14px; border: none; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; transform: none; padding: 7px 16px; }
.dam.view-list .dam-tile:hover { background: var(--surface-2, #f6f7f9); }
.dam.view-list .dam-tile.is-selected { background: var(--brand-50); box-shadow: none; }
.dam.view-list .dam-thumb { aspect-ratio: auto; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); }
.dam.view-list .dam-thumb.is-file i { font-size: 20px; }
.dam.view-list .dam-thumb.is-file .ext { display: none; }
.dam.view-list .dam-play { width: 20px; height: 20px; font-size: 10px; }
.dam.view-list .dam-tinfo { padding: 0; }
.dam.view-list .dam-tmeta { display: none; }
.dam.view-list .dam-fav { position: static; opacity: 1; background: none; color: var(--faint); width: auto; height: auto; }
.dam.view-list .dam-fav.on { color: #f0b429; background: none; }
.dam.view-list .dam-badge { display: none; }
.dam-lcell { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam.view-grid .dam-lcell { display: none; }

.dam-empty { text-align: center; padding: 70px 20px; }
.dam-empty .ico { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; }
.dam-empty h3 { margin: 16px 0 4px; font-size: 16px; }
.dam-empty p { color: var(--muted); font-size: 13.5px; }

/* ── Right: properties panel ────────────────────────────────────────────── */
.dam-props { width: 340px; flex: none; background: var(--surface); border-left: 1px solid var(--line); margin-right: -341px; transition: margin-right .22s ease; display: flex; flex-direction: column; }
.dam.props-open .dam-props { margin-right: 0; }
.dam-props-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.dam-props-close { border: none; background: none; color: var(--faint); cursor: pointer; width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.dam-props-close:hover { background: var(--surface-2, #f3f4f6); color: var(--ink); }
.dam-props-body { overflow-y: auto; padding: 16px 18px 26px; flex: 1; }
.dam-pv { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: #f3f4f8; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); margin-bottom: 14px; }
.dam-pv img { width: 100%; height: 100%; object-fit: contain; }
.dam-pv.is-file { flex-direction: column; gap: 8px; }
.dam-pv.is-file i { font-size: 54px; }
.dam-pv.k-document i { color: #dc2626; }
.dam-pv.k-video i { color: #7c3aed; }
.dam-pv.k-svg i { color: #0891b2; }
.dam-pname-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dam-pname { font-size: 15px; font-weight: 700; word-break: break-word; flex: 1; }
.dam-pfav { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 17px; }
.dam-pfav.on { color: #f0b429; }
.dam-pactions { display: flex; gap: 6px; margin: 12px 0 18px; flex-wrap: wrap; }
.dam-pbtn { flex: 1; min-width: 68px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .12s; }
.dam-pbtn i { font-size: 15px; }
.dam-pbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.dam-pbtn.danger:hover { border-color: #f3c9c9; color: var(--red); background: var(--red-bg); }
.dam-field { margin-bottom: 14px; }
.dam-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.dam-field input, .dam-field textarea, .dam-field select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--ink); background: #fff; }
.dam-field input:focus, .dam-field textarea:focus, .dam-field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.dam-field textarea { resize: vertical; min-height: 60px; }
.dam-meta-list { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: 12.5px; margin-bottom: 6px; }
.dam-meta-list dt { color: var(--faint); font-weight: 600; }
.dam-meta-list dd { margin: 0; color: var(--ink-2); text-align: right; word-break: break-word; }
.dam-tags-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.dam-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 11.5px; font-weight: 600; }
.dam-tag button { border: none; background: none; color: inherit; cursor: pointer; display: inline-flex; padding: 1px; border-radius: 50%; font-size: 11px; }
.dam-tag button:hover { background: rgba(37,99,235,.18); }
.dam-tag-input { border: none !important; box-shadow: none !important; flex: 1; min-width: 80px; padding: 4px !important; font-size: 12.5px; }
.dam-sec-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dam-usage { display: flex; flex-direction: column; gap: 2px; }
.dam-usage a { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 12.5px; color: var(--ink-2); }
.dam-usage a:hover { background: var(--surface-2, #f6f7f9); color: var(--brand); }
.dam-usage a i { color: var(--faint); font-size: 14px; }
.dam-usage a:hover i { color: var(--brand); }
.dam-usage .u-type { margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.dam-usage-empty { font-size: 12.5px; color: var(--faint); padding: 4px 2px; }
.dam-usage-empty.safe { color: var(--green); }

/* ── Drag & drop overlay ────────────────────────────────────────────────── */
/* pointer-events none is load-bearing: the veil is purely visual, so the drag events fall
   through to whatever is underneath — that is what lets a folder node in the tree be a drop
   target of its own while the window-level handlers stay the "anywhere else" fallback. */
.dam-drop { position: fixed; inset: 0; z-index: 1080; background: rgba(37,99,235,.10); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 40px; pointer-events: none; }
.dam-drop.show { display: flex; }
.dam-drop-inner { border: 2.5px dashed var(--brand); background: rgba(255,255,255,.92); border-radius: 18px; padding: 48px 72px; text-align: center; color: var(--brand); }
.dam-drop-inner i { font-size: 46px; }
.dam-drop-t { font-size: 18px; font-weight: 700; margin-top: 8px; color: var(--ink); }
.dam-drop-s { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ── Upload progress tray ───────────────────────────────────────────────── */
.dam-uploads { position: fixed; right: 22px; bottom: 22px; width: 340px; max-width: calc(100vw - 44px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 1090; overflow: hidden; }
.dam-uploads-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 700; }
.dam-uploads-close { border: none; background: none; color: var(--faint); cursor: pointer; }
.dam-uploads-close:hover { color: var(--ink); }
.dam-uploads-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.dam-up { display: flex; align-items: center; gap: 10px; padding: 8px 9px; }
.dam-up-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.dam-up-body { flex: 1; min-width: 0; }
.dam-up-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dam-up-bar { height: 5px; border-radius: 3px; background: var(--line-2); margin-top: 5px; overflow: hidden; }
.dam-up-fill { height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .2s; }
.dam-up.done .dam-up-fill { background: var(--green); }
.dam-up.err .dam-up-fill { background: var(--red); }
.dam-up.dup .dam-up-fill { background: var(--amber); }
.dam-up-stat { font-size: 15px; flex: none; }
.dam-up.done .dam-up-stat { color: var(--green); }
.dam-up.err .dam-up-stat { color: var(--red); }
.dam-up.dup .dam-up-stat { color: var(--amber); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dam-side { position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .dam.side-open .dam-side { transform: translateX(0); }
  .dam-side-toggle { display: inline-flex; }
}
@media (max-width: 860px) {
  .dam-props { position: absolute; z-index: 45; top: 0; bottom: 0; right: 0; width: min(340px, 92vw); margin-right: 0; transform: translateX(101%); transition: transform .22s; box-shadow: var(--shadow-lg); }
  .dam.props-open .dam-props { transform: translateX(0); }
  .dam-toolbar-right { margin-left: 0; }
  .dam-count { display: none; }
}

/* Folder node kebab + context menu */
.dam-node-menu { margin-left: 6px; width: 20px; height: 20px; border-radius: 5px; display: none; align-items: center; justify-content: center; color: var(--faint); flex: none; }
.dam-node-row:hover .dam-node-menu { display: inline-flex; }
.dam-node-menu:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.dam-node.is-active .dam-node-menu:hover { background: rgba(37,99,235,.14); }
.dam-fmenu { position: fixed; z-index: 1200; min-width: 168px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 5px; }
.dam-fmenu button { width: 100%; display: flex; align-items: center; gap: 9px; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; text-align: left; }
.dam-fmenu button:hover { background: var(--surface-2, #f5f6f8); }
.dam-fmenu button i { color: var(--faint); font-size: 14px; }
.dam-fmenu button[data-fm="delete"]:hover { background: var(--red-bg); color: var(--red); }
.dam-fmenu button[data-fm="delete"]:hover i { color: var(--red); }

/* Tile context menu — same shell as the folder menu, opened at the cursor. */
.dam-cmenu { min-width: 196px; }
.dam-fmenu-sep { height: 1px; background: var(--line-2); margin: 5px 6px; }
.dam-fmenu button:disabled { opacity: .45; cursor: default; }
.dam-fmenu button:disabled:hover { background: none; }
.dam-fmenu button[data-tm="delete"]:hover { background: var(--red-bg); color: var(--red); }
.dam-fmenu button[data-tm="delete"]:hover i { color: var(--red); }

/* ── Selection + clipboard bars ─────────────────────────────────────────────
   Both sit between the subbar and the scroller, so they push the grid down
   rather than floating over it — an overlay here would cover the first row. */
.dam-selbar, .dam-clipbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px; border-bottom: 1px solid var(--line);
}
.dam-selbar { background: var(--brand-50); }
.dam-selcount { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.dam-selacts { display: flex; gap: 6px; flex-wrap: wrap; }
.dam-selbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.dam-selbtn i { font-size: 14px; color: var(--faint); }
.dam-selbtn:hover { border-color: var(--brand); color: var(--brand); }
.dam-selbtn:hover i { color: var(--brand); }
.dam-selbtn.danger:hover { border-color: #f3c9c9; color: var(--red); background: var(--red-bg); }
.dam-selbtn.danger:hover i { color: var(--red); }
.dam-selclear { margin-left: auto; border: none; background: none; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dam-selclear:hover { text-decoration: underline; }

.dam-clipbar { background: #fffbeb; }
.dam-clipbar > i { color: var(--amber, #b45309); font-size: 14px; }
.dam-clip-msg { font-size: 12.5px; font-weight: 600; color: #92400e; }
.dam-clip-paste {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: none; border-radius: 8px; background: var(--brand); color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dam-clip-paste:hover:not(:disabled) { filter: brightness(1.06); }
.dam-clip-paste:disabled { opacity: .5; cursor: default; }
.dam-clip-x { margin-left: auto; border: none; background: none; color: #92400e; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 6px; }
.dam-clip-x:hover { background: rgba(146,64,14,.12); }

/* A cut tile stays in place and dims until the paste lands — removing it early
   would be a lie if the paste then failed. */
.dam-tile.is-cut { opacity: .45; }
.dam-tile.is-cut .dam-thumb { outline: 1.5px dashed var(--faint); outline-offset: -2px; }

/* Archives */
.dam-thumb.k-archive { background: #fefaf0; }
.dam-pv.k-archive { background: #fefaf0; }

/* Extract rejection report */
.dam-reject-list { list-style: none; margin: 0; padding: 8px 10px; max-height: 220px; overflow-y: auto; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 9px; }
.dam-reject-list li { font-size: 12.5px; color: var(--ink-2); padding: 3px 0; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dam-reject-list li.more { color: var(--faint); font-style: italic; font-family: inherit; }
.dam-reject-list li .why { color: var(--red); font-family: inherit; }

/* ── Platform-wide sharing ──────────────────────────────────────────────────
   Shown on components, templates, layouts and data lists. The globe toggle is
   platform-admin only; the badge is shown to everyone so a borrowed entry is
   never mistaken for one of your own. */
.js-share-toggle.is-shared { color: var(--brand); background: var(--brand-50); }
.js-share-toggle.is-shared:hover { color: var(--red); background: var(--red-bg); }
.share-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  padding: 2px 8px; border-radius: 999px; background: var(--brand-50); color: var(--brand);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.share-badge i { font-size: 11px; }