/* ============================================================================
   PHP Atölye — Admin Design System
   A calm, fast, premium 2026 CMS surface. Its own token set (never the public
   theme's colours). Ships in every theme package via `theme:cms-sync`; the only
   per-theme difference is the brand wordmark.
   ========================================================================== */

/* --- display face -----------------------------------------------------
   Self-hosted, variable (weight 200-800) — Turkish-safe unicode ranges.
   Used ONLY for hero numbers / display headings (see --ac-font-display);
   body/UI text stays on the fast, zero-request system stack. */
@font-face {
    font-family: "Atolye Display";
    src: url("fonts/bricolage-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: "Atolye Display";
    src: url("fonts/bricolage-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}

/* --- tokens ---------------------------------------------------------------
   Dark is the default surface — a deliberate "premium operating system"
   choice, not a --prefers-color-scheme accident: the reference bar for this
   panel is a dense, dark, operational workspace, so that is what renders
   with zero configuration. Light stays a real, fully-supported first-class
   mode (data-ac-theme="light"), never a fallback or an afterthought. */
:root {
    color-scheme: dark;
    --ac-bg: #0a0a0d;
    --ac-surface: #151318;
    --ac-surface-2: #1b1920;
    --ac-elevated: #201e26;
    --ac-border: #2a2731;
    --ac-border-strong: #3a3644;
    --ac-text: #f2f0f5;
    --ac-text-muted: #a19cad;
    --ac-text-subtle: #938fa8; /* WCAG AA >=4.5:1 on all dark surfaces */
    /* Canonical identity: a deliberate indigo-violet, not a corporate-blue
       default — each theme package may override just this cluster (and
       --ac-accent-2/--ac-canvas-a/-b) from an optional assets/admin/admin-theme.css
       loaded after this file (see layout.php) to carry its own sector accent
       without ever touching (or forking) this shared stylesheet. */
    --ac-accent: #c8f542;
    --ac-accent-2: #9ad81e;
    --ac-accent-ink: #0d0f08;
    --ac-accent-wash: #1d2410;
    --ac-success: #4ec78d;
    --ac-success-wash: #14291f;
    --ac-warning: #e0a552;
    --ac-warning-wash: #2c2113;
    --ac-danger: #f0787d;
    --ac-danger-fill: #c62828; /* badge/pill fill with white text — AA on both themes */
    --ac-danger-wash: #2e1615;
    --ac-info: #6ea8ff;
    --ac-info-wash: #14203a;
    --ac-purple: #b48cff;
    --ac-purple-wash: #241a3a;
    /* subtle canvas wash behind hero/open-canvas surfaces — never a card */
    --ac-canvas-a: #171d0c;
    --ac-canvas-b: #0a0a0d;

    /* Sector-identity density/texture hooks (Faz V4) — every theme gets the
       same defaults below; a theme's own admin-theme.css may override any of
       them to express a real character difference (editorial breathing room,
       dense commerce data, a newsroom's tighter grid, …) without forking a
       single component rule. --ac-bg-pattern is an OPTIONAL extra background
       layer on the hero canvas only — 'none' by default, and even when a
       theme sets one it must stay a barely-there texture, never a decoration. */
    --ac-panel-pad: 1rem 1.1rem;
    --ac-grid-gap: .85rem;
    --ac-hero-pad: 1.75rem 1.9rem;
    --ac-bg-pattern: none;
    --ac-icon-weight: 1.75;

    --ac-ring: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 28%, transparent);
    --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ac-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .5);
    --ac-shadow-lg: 0 28px 56px -12px rgba(0, 0, 0, .65), 0 8px 24px -8px rgba(0, 0, 0, .5);
    --ac-shadow-glow: 0 8px 32px -6px color-mix(in srgb, var(--ac-accent) 46%, transparent);

    --ac-r-xs: 6px;
    --ac-r-sm: 8px;
    --ac-r-md: 12px;
    --ac-r-lg: 18px;
    --ac-r-xl: 26px;
    --ac-r-pill: 999px;

    --ac-sidebar-w: 260px;
    --ac-sidebar-w-rail: 76px;
    --ac-topbar-h: 56px;
    --ac-content-max: 1120px;

    --ac-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ac-font-display: "Atolye Display", var(--ac-font);
    --ac-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    --ac-t-fast: 120ms;
    --ac-t: 180ms;
    --ac-t-slow: 320ms;
    --ac-ease: cubic-bezier(.4, 0, .2, 1);
    --ac-ease-spring: cubic-bezier(.16, 1, .3, 1);
}

/* Light is an explicit, first-class opt-in (the theme toggle), not the
   OS-driven default — see admin.js theme() which now treats "no explicit
   choice" as dark, matching this CSS unconditionally. */
:root[data-ac-theme="light"] {
    color-scheme: light;
    --ac-bg: #f7f6f8;
    --ac-surface: #ffffff;
    --ac-surface-2: #efedf1;
    --ac-elevated: #ffffff;
    --ac-border: #e5e2e8;
    --ac-border-strong: #d3cfd9;
    --ac-text: #17151d;
    --ac-text-muted: #666272;
    --ac-text-subtle: #686478; /* WCAG AA >=4.5:1 on white, --ac-surface-2 and --ac-bg */
    --ac-accent: #3f6b0a;
    --ac-accent-2: #65a30d;
    --ac-accent-ink: #ffffff;
    --ac-accent-wash: #ecf5db;
    --ac-success: #0f7a53;
    --ac-success-wash: #e6f4ee;
    --ac-warning: #96620d;
    --ac-warning-wash: #faf0dd;
    --ac-danger: #c22b3a;
    --ac-danger-fill: #c22b3a;
    --ac-danger-wash: #fbebec;
    --ac-info: #2457b8;
    --ac-info-wash: #e6eefb;
    --ac-purple: #6d3fd1;
    --ac-purple-wash: #efe9fb;
    --ac-canvas-a: #eef5e0;
    --ac-canvas-b: #f7f6f8;
    --ac-shadow-sm: 0 1px 2px rgba(23, 21, 29, .05), 0 1px 1px rgba(23, 21, 29, .04);
    --ac-shadow-md: 0 4px 12px -2px rgba(23, 21, 29, .10), 0 2px 6px -2px rgba(23, 21, 29, .06);
    --ac-shadow-lg: 0 24px 48px -12px rgba(23, 21, 29, .20), 0 8px 20px -8px rgba(23, 21, 29, .12);
    --ac-shadow-glow: 0 8px 28px -6px color-mix(in srgb, var(--ac-accent) 38%, transparent);
}

/* --- reset -------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--ac-bg);
    color: var(--ac-text);
    font: 400 14px/1.55 var(--ac-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
/* Reset native button chrome unconditionally — with color-scheme:dark now
   the default (not opt-in), Chromium renders an UNSTYLED <button> with its
   own dark-native mid-gray background/border, which is exactly what
   .ac-railtoggle (no explicit background of its own) was silently
   inheriting — a real 1.7:1 contrast failure only a dark *default* ever
   exposed. Every actually-styled button sets its own background via a
   more specific class, so this reset never fights real component CSS. */
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { display: block; }
::selection { background: color-mix(in srgb, var(--ac-accent) 24%, transparent); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 2px;
    border-radius: var(--ac-r-xs);
}
.ac-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: var(--ac-icon-weight); stroke-linecap: round; stroke-linejoin: round; }
.ac-icon--sm { width: 15px; height: 15px; }
code, .ac-mono { font-family: var(--ac-mono); font-size: .86em; }
:where(.ac-main) code {
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    padding: .08em .38em;
    border-radius: var(--ac-r-xs);
    word-break: break-word;
}
.ac-muted { color: var(--ac-text-muted); }
.ac-link { color: var(--ac-accent); text-decoration: none; font-weight: 500; }
.ac-link:hover { text-decoration: underline; }
.ac-link--danger { color: var(--ac-danger); }

/* --- shell ------------------------------------------------------------- */
.ac {
    display: grid;
    grid-template-columns: var(--ac-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns var(--ac-t) var(--ac-ease);
}
.ac-railtoggle {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .6rem; margin-top: .25rem; border-radius: var(--ac-r-sm);
    color: var(--ac-text-subtle); font-size: .78rem; font-weight: 550;
}
.ac-railtoggle:hover { background: var(--ac-surface-2); color: var(--ac-text-muted); }
.ac-railtoggle .ac-icon { transition: transform var(--ac-t) var(--ac-ease); }
/* icon-first rail: collapsed sidebar, DESKTOP ONLY (persisted via localStorage,
   see admin.js) -- labels/group headings hide, nav becomes icon+tooltip. Scoped
   to min-width so a rail toggled open on desktop can never leak into the
   off-canvas mobile drawer, which always wants its full labelled width. */
@media (min-width: 961px) {
    .ac.is-rail { grid-template-columns: var(--ac-sidebar-w-rail) minmax(0, 1fr); }
    .ac.is-rail .ac-viewsite span, .ac.is-rail .ac-nav__group,
    .ac.is-rail .ac-nav__link span, .ac.is-rail .ac-userbox__meta,
    .ac.is-rail .ac-railtoggle span { display: none; }
    .ac.is-rail .ac-nav__link, .ac.is-rail .ac-viewsite, .ac.is-rail .ac-userbox { justify-content: center; }
    .ac.is-rail .ac-side { padding-inline: .55rem; }
    .ac.is-rail .ac-railtoggle { justify-content: center; }
    .ac.is-rail .ac-railtoggle .ac-icon { transform: rotate(180deg); }
}
.ac-side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem .75rem;
    background: var(--ac-surface);
    border-right: 1px solid var(--ac-border);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ac-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .5rem .6rem;
    font-weight: 640;
    font-size: .92rem;
    line-height: 1.2;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
}
.ac-brand__name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ac-brand__cms { flex: none; }
.ac-brand__mark {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: var(--ac-r-sm);
    background: var(--ac-text);
    color: var(--ac-bg);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-align: center;
}
.ac-brand__name { color: var(--ac-text); }
.ac-brand__cms { color: var(--ac-text-subtle); font-weight: 450; }

.ac-viewsite {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .25rem .5rem;
    padding: .4rem .55rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    font-size: .8rem;
    color: var(--ac-text-muted);
    transition: border-color var(--ac-t) var(--ac-ease), color var(--ac-t) var(--ac-ease);
}
.ac-viewsite:hover { color: var(--ac-text); border-color: var(--ac-border-strong); }

.ac-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; padding-bottom: .5rem; }
.ac-nav__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ac-text-subtle);
    padding: .5rem .6rem .3rem;
    margin-top: .6rem;
    transition: color var(--ac-t-fast) var(--ac-ease);
}
.ac-nav__group:hover { color: var(--ac-text-muted); }
.ac-nav__group:first-child { margin-top: 0; }
.ac-nav__group-chevron { color: var(--ac-text-subtle); transition: transform var(--ac-t) var(--ac-ease); }
.ac-nav__group[aria-expanded="false"] .ac-nav__group-chevron { transform: rotate(-90deg); }
.ac-nav__items { display: flex; flex-direction: column; gap: 1px; }
.ac-nav__items[hidden] { display: none !important; }
.ac-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: var(--ac-r-md);
    font-size: .855rem;
    font-weight: 450;
    color: var(--ac-text-muted);
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-nav__link .ac-icon { color: var(--ac-text-subtle); transition: color var(--ac-t-fast) var(--ac-ease); }
.ac-nav__link:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.ac-nav__link:hover .ac-icon { color: var(--ac-text-muted); }
.ac-nav__link.is-active {
    background: var(--ac-accent);
    color: var(--ac-accent-ink);
    font-weight: 600;
    box-shadow: var(--ac-shadow-sm);
}
.ac-nav__link.is-active .ac-icon { color: var(--ac-accent-ink); }
.ac-nav__link.is-active .ac-count { color: var(--ac-accent-ink); opacity: .8; }
.ac-nav__link .ac-count {
    margin-left: auto;
    font-size: .7rem;
    color: var(--ac-text-subtle);
    font-variant-numeric: tabular-nums;
}
.ac-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ac-warning);
    display: inline-block;
    flex: none;
}
.ac-nav__link .ac-dot { margin-left: auto; }

.ac-userbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding: .6rem;
    border-top: 1px solid var(--ac-border);
}
.ac-avatar {
    width: 30px; height: 30px;
    flex: none;
    display: grid; place-items: center;
    border-radius: var(--ac-r-pill);
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    font-size: .72rem;
    font-weight: 600;
    color: var(--ac-text-muted);
    text-transform: uppercase;
}
.ac-userbox__meta { min-width: 0; line-height: 1.3; }
.ac-userbox__name { font-size: .8rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-userbox__role { font-size: .7rem; color: var(--ac-text-subtle); }
.ac-userbox form { margin-left: auto; }
.ac-userbox button {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border: 1px solid transparent;
    border-radius: var(--ac-r-sm);
    background: none;
    color: var(--ac-text-subtle);
    cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-userbox button:hover { background: var(--ac-danger-wash); color: var(--ac-danger); }

/* --- topbar ---------------------------------------------------------- */
.ac-main { display: flex; flex-direction: column; min-width: 0; }
.ac-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--ac-topbar-h);
    padding: 0 clamp(1rem, 3vw, 1.75rem);
    background: color-mix(in srgb, var(--ac-bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--ac-border);
}
.ac-burger {
    display: none;
    width: 34px; height: 34px;
    place-items: center;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    cursor: pointer;
}
.ac-crumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--ac-text-subtle);
    min-width: 0;
}
.ac-crumb__sep { color: var(--ac-text-subtle); opacity: .6; }
.ac-crumb__cur { color: var(--ac-text); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-topbar__spacer { flex: 1; }
.ac-topbar__actions { display: flex; align-items: center; gap: .4rem; }

.ac-searchtrigger {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding: 0 .7rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text-subtle);
    font-size: .82rem;
    cursor: pointer;
    transition: border-color var(--ac-t) var(--ac-ease);
}
.ac-searchtrigger:hover { border-color: var(--ac-border-strong); }
.ac-searchtrigger__label { min-width: 88px; text-align: left; }
.ac-kbd {
    font-family: var(--ac-mono);
    font-size: .68rem;
    padding: .1rem .35rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-xs);
    background: var(--ac-surface-2);
    color: var(--ac-text-subtle);
}
.ac-iconbtn {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), border-color var(--ac-t) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-iconbtn:hover { border-color: var(--ac-border-strong); color: var(--ac-text); }
.ac-iconbtn--bare { border-color: transparent; background: none; }
.ac-iconbtn--bare:hover { background: var(--ac-surface-2); border-color: transparent; }

/* --- content region --------------------------------------------------- */
.ac-content {
    flex: 1;
    width: 100%;
    max-width: var(--ac-content-max);
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 1.75rem) 5rem;
}
/* editor screens (main + aside) get room to breathe */
.ac-content:has(.ac-editor), .ac-content:has(.ac-editorhead) { max-width: 1280px; }
.ac-content:has(.ac-savebar) { padding-bottom: 7rem; }

/* --- page header ---------------------------------------------------- */
.ac-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-head h1 {
    font: 700 1.75rem/1.15 var(--ac-font-display);
    letter-spacing: -.02em;
    text-wrap: balance;
}
.ac-head .ac-lead { margin-top: .35rem; }
.ac-lead { color: var(--ac-text-muted); font-size: .875rem; }
.ac-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ac-count-tag {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .45rem;
    border-radius: var(--ac-r-pill);
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    font-size: .72rem;
    font-weight: 550;
    color: var(--ac-text-muted);
    vertical-align: .12em;
}
/* editor page header — back link · title · description · right actions */
.ac-editorhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-editorhead__back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ac-text-muted);
    margin-bottom: .4rem;
}
.ac-editorhead__back:hover { color: var(--ac-accent); }
.ac-editorhead h1 { font: 700 1.75rem/1.15 var(--ac-font-display); letter-spacing: -.02em; text-wrap: balance; }
.ac-editorhead__desc { color: var(--ac-text-muted); font-size: .875rem; margin-top: .3rem; }
.ac-editorhead__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.ac-subhead {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 1.75rem 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ac-border);
}

/* --- cards --------------------------------------------------------- */
.ac-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--ac-shadow-sm);
}
.ac-card > h2, .ac-card__title {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ac-text-muted);
    margin-bottom: .9rem;
}
.ac-card--accent { border-color: color-mix(in srgb, var(--ac-accent) 45%, var(--ac-border)); background: var(--ac-accent-wash); }
.ac-card--accent p { color: var(--ac-text); }

/* a <details> card — keeps genuinely technical information (PHP/DB/schema
   version, internal paths) out of a non-technical owner's way by default,
   without deleting it: still one click away, e.g. for a support request. */
.ac-card--details { padding: 0; }
.ac-card--details summary {
    padding: 1.15rem 1.25rem;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ac-text-muted);
    cursor: pointer;
    list-style: none;
}
.ac-card--details summary::-webkit-details-marker { display: none; }
.ac-card--details summary::before {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-right: .5rem;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--ac-text-subtle);
    transition: transform var(--ac-t-fast) var(--ac-ease);
}
.ac-card--details[open] summary::before { transform: rotate(90deg); }
.ac-card--details summary small { text-transform: none; letter-spacing: normal; font-weight: 450; }
.ac-card--details > dl, .ac-card--details > p { padding: 0 1.25rem 1.15rem; }
.ac-card--flush { padding: 0; overflow: hidden; }
.ac-note { color: var(--ac-text-muted); font-size: .83rem; line-height: 1.6; }
.ac-note code { font-size: .82em; }

.ac-dl { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: .55rem 1.25rem; font-size: .84rem; }
.ac-dl dt { color: var(--ac-text-muted); }
.ac-dl dd { color: var(--ac-text); word-break: break-word; }

/* --- dashboard metrics ------------------------------------------- */
/* Open-canvas hero: a gradient wash, not a bordered card -- the "operating
   system home screen" moment. text-shadow removed in reduced-transparency /
   forced-colors via the plain fallback background further down. */
.ac-hero {
    margin: -.25rem -.05rem 1.75rem;
    padding: var(--ac-hero-pad);
    border-radius: var(--ac-r-xl);
    background-image:
        var(--ac-bg-pattern),
        radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--ac-accent) 16%, transparent), transparent 60%),
        linear-gradient(135deg, var(--ac-canvas-a), var(--ac-canvas-b));
    position: relative;
    overflow: hidden;
}
.ac-hero h1 { font: 650 clamp(1.65rem, 1.3rem + 1.4vw, 2.3rem)/1.1 var(--ac-font-display); letter-spacing: -.02em; }
.ac-hero p { color: var(--ac-text-muted); margin-top: .4rem; font-size: .92rem; }
.ac-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ac-grid-gap); margin-bottom: 1.5rem; }
.ac-metric {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    padding: var(--ac-panel-pad);
    box-shadow: var(--ac-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: transform var(--ac-t) var(--ac-ease), box-shadow var(--ac-t) var(--ac-ease), border-color var(--ac-t) var(--ac-ease);
}
a.ac-metric:hover, a.ac-metric:focus-visible { transform: translateY(-1px); border-color: var(--ac-border-strong); box-shadow: var(--ac-shadow-md); }
.ac-metric__label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ac-text-muted);
}
.ac-metric__label .ac-icon { color: var(--ac-text-subtle); }
.ac-metric__value { font: 650 1.7rem/1 var(--ac-font-display); letter-spacing: -.02em; }
.ac-metric__sub { font-size: .74rem; color: var(--ac-text-subtle); }
.ac-metric__delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .74rem; font-weight: 600; }
.ac-metric__delta--up { color: var(--ac-success); }
.ac-metric__delta--down { color: var(--ac-danger); }
.ac-metric__delta .ac-icon { width: 12px; height: 12px; }

/* the ONE number that matters on a dashboard -- put it first in .ac-grid,
   or standalone inside .ac-hero, to give it outsized visual priority while
   every other .ac-metric around it stays deliberately quiet. */
.ac-metric--hero {
    background: color-mix(in srgb, var(--ac-surface) 88%, var(--ac-accent) 4%);
    border-color: color-mix(in srgb, var(--ac-accent) 30%, var(--ac-border));
    box-shadow: var(--ac-shadow-glow);
    padding: 1.3rem 1.5rem;
}
.ac-metric--hero .ac-metric__value { font-size: clamp(2.1rem, 1.7rem + 1.6vw, 2.9rem); }

/* a third visual tier for "worth knowing, not worth a full card" numbers —
   real hierarchy instead of a wall of equal-weight metric cards. No border,
   no shadow, no background: it visually recedes next to .ac-metric and
   .ac-metric--hero rather than competing with them. */
.ac-metric--minor {
    background: none;
    border: none;
    box-shadow: none;
    padding: .3rem 0;
    gap: .2rem;
}
.ac-metric--minor .ac-metric__label { color: var(--ac-text-subtle); }
.ac-metric--minor .ac-metric__value { font-size: 1.05rem; font-weight: 600; }

/* a supporting-data strip for .ac-metric--minor items — visually distinct
   from .ac-grid's full metric cards so the two tiers never compete for the
   same amount of attention. */
.ac-metric-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    padding: .1rem 0 1.25rem;
    border-bottom: 1px solid var(--ac-border);
    margin-bottom: 1.25rem;
}
.ac-metric-strip .ac-metric--minor { flex: 0 0 auto; }

/* legacy alias used by some views */
.ac-tile { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-r-md); padding: 1rem 1.1rem; font-size: .74rem; color: var(--ac-text-muted); box-shadow: var(--ac-shadow-sm); text-transform: uppercase; letter-spacing: .05em; font-weight: 550; }
.ac-tile span { display: block; font: 650 1.7rem/1 var(--ac-font-display); letter-spacing: -.02em; color: var(--ac-text); text-transform: none; margin-bottom: .3rem; }

.ac-quick { display: flex; flex-wrap: wrap; gap: .5rem; }

.ac-feed { list-style: none; display: flex; flex-direction: column; }
.ac-feed li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    font-size: .83rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-feed li:last-child { border-bottom: 0; }
.ac-feed li > span:last-child { margin-left: auto; color: var(--ac-text-subtle); font-size: .76rem; white-space: nowrap; }
.ac-feed code { font-size: .78em; }

.ac-attention__list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.ac-attention__item { border-radius: var(--ac-r-md); border: 1px solid var(--ac-border); background: var(--ac-surface-2); }
.ac-attention__item a, .ac-attention__item > span {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    color: inherit;
    text-decoration: none;
}
.ac-attention__item a { cursor: pointer; }
.ac-attention__item a:hover, .ac-attention__item a:focus-visible { background: color-mix(in srgb, var(--ac-accent) 8%, transparent); }
.ac-attention__ico { display: flex; color: var(--ac-text-muted); }
.ac-attention__count { font: 650 1.05rem/1 var(--ac-font-display); color: var(--ac-text); font-variant-numeric: tabular-nums; }
.ac-attention__label { font-size: .82rem; color: var(--ac-text-muted); white-space: nowrap; }
.ac-attention__item--accent { border-color: color-mix(in srgb, var(--ac-accent) 35%, var(--ac-border)); }
.ac-attention__item--accent .ac-attention__count { color: var(--ac-accent); }
.ac-attention__item--warn { border-color: color-mix(in srgb, var(--ac-warning) 35%, var(--ac-border)); }
.ac-attention__item--warn .ac-attention__count { color: var(--ac-warning); }
.ac-attention__item--danger { border-color: color-mix(in srgb, var(--ac-danger) 35%, var(--ac-border)); }
.ac-attention__item--danger .ac-attention__count { color: var(--ac-danger); }
.ac-attention__item.is-static { opacity: .85; }

/* revisions / simple lists reuse feed styling */
.ac-revs { list-style: none; display: flex; flex-direction: column; }
.ac-revs li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    font-size: .83rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-revs li:last-child { border-bottom: 0; }
.ac-revs li > span:first-child { color: var(--ac-text-muted); }
.ac-revs button {
    padding: .3rem .65rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text);
    font-size: .78rem;
    cursor: pointer;
    transition: border-color var(--ac-t) var(--ac-ease);
}
.ac-revs button:hover { border-color: var(--ac-border-strong); }

/* --- badges / pills --------------------------------------------- */
.ac-badge, .ac-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .18rem .55rem;
    border-radius: var(--ac-r-pill);
    font-size: .74rem;
    font-weight: 550;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ac-badge::before, .ac-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.ac-badge--ok, .ac-pill--ok { color: var(--ac-success); background: var(--ac-success-wash); border-color: color-mix(in srgb, var(--ac-success) 22%, transparent); }
.ac-badge--muted, .ac-pill--muted { color: var(--ac-text-muted); background: var(--ac-surface-2); border-color: var(--ac-border); }
.ac-badge--warn, .ac-pill--warn { color: var(--ac-warning); background: var(--ac-warning-wash); border-color: color-mix(in srgb, var(--ac-warning) 22%, transparent); }
.ac-badge--info, .ac-pill--info { color: var(--ac-info); background: var(--ac-info-wash); border-color: color-mix(in srgb, var(--ac-info) 22%, transparent); }
.ac-badge--danger, .ac-pill--danger { color: var(--ac-danger); background: var(--ac-danger-wash); border-color: color-mix(in srgb, var(--ac-danger) 22%, transparent); }

/* --- buttons --------------------------------------------------- */
.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 36px;
    padding: 0 .95rem;
    border: 1px solid transparent;
    border-radius: var(--ac-r-sm);
    background: var(--ac-accent);
    color: var(--ac-accent-ink);
    font-size: .84rem;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
    transition: filter var(--ac-t-fast) var(--ac-ease), background var(--ac-t-fast) var(--ac-ease), border-color var(--ac-t) var(--ac-ease), transform var(--ac-t-fast) var(--ac-ease);
}
.ac-btn:hover { filter: brightness(1.06); }
.ac-btn:active { transform: translateY(.5px); }
.ac-btn[disabled], .ac-btn.is-busy { opacity: .65; pointer-events: none; }
.ac-btn .ac-icon { width: 16px; height: 16px; }
.ac-btn--ghost { background: var(--ac-surface); color: var(--ac-text); border-color: var(--ac-border); }
.ac-btn--ghost:hover { background: var(--ac-surface-2); filter: none; border-color: var(--ac-border-strong); }
.ac-btn--danger { background: var(--ac-surface); color: var(--ac-danger); border-color: color-mix(in srgb, var(--ac-danger) 35%, var(--ac-border)); }
.ac-btn--danger:hover { background: var(--ac-danger-wash); filter: none; }
.ac-btn--sm { height: 30px; padding: 0 .7rem; font-size: .79rem; }
.ac-btn--block { width: 100%; }
.ac-btn__spin {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ac-spin .6s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* toggle button (pages "Açık/Kapalı") */
.ac-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 28px;
    padding: 0 .6rem 0 .5rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-pill);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    font-size: .76rem;
    font-weight: 550;
    cursor: pointer;
}
.ac-toggle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ac-text-subtle); }
.ac-toggle.is-on { color: var(--ac-success); border-color: color-mix(in srgb, var(--ac-success) 30%, transparent); background: var(--ac-success-wash); }
.ac-toggle.is-on::before { background: var(--ac-success); }

/* --- dropdown menu ------------------------------------------- */
.ac-menu { position: relative; }
.ac-menu__trigger {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border: 1px solid transparent;
    border-radius: var(--ac-r-sm);
    background: none;
    color: var(--ac-text-subtle);
    cursor: pointer;
}
.ac-menu__trigger:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.ac-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 180px;
    padding: .35rem;
    background: var(--ac-elevated);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ac-menu__list[hidden] { display: none; }
.ac-menu__list a, .ac-menu__list button {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .55rem;
    border: 0;
    border-radius: var(--ac-r-xs);
    background: none;
    color: var(--ac-text);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}
.ac-menu__list a:hover, .ac-menu__list button:hover { background: var(--ac-surface-2); }
.ac-menu__list .ac-icon { color: var(--ac-text-subtle); }
.ac-menu__list hr { border: 0; border-top: 1px solid var(--ac-border); margin: .3rem 0; }
.ac-menu__list .is-danger { color: var(--ac-danger); }
.ac-menu__list .is-danger:hover { background: var(--ac-danger-wash); }

/* --- filter / list toolbar --------------------------------- */
.ac-toolbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ac-listsearch {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}
.ac-listsearch .ac-icon {
    position: absolute;
    left: .65rem; top: 50%;
    transform: translateY(-50%);
    color: var(--ac-text-subtle);
}
.ac-listsearch input[type="search"] {
    width: 100%;
    height: 38px;
    min-height: 0;
    padding: 0 .75rem 0 2.3rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text);
    font-size: .84rem;
}
.ac-listsearch input[type="search"]:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-ring); }
form.ac-toolbar { margin-bottom: 1rem; }
.ac-toolbar select { width: auto; min-height: 38px; height: 38px; font-size: .84rem; padding: 0 2rem 0 .75rem; }
.ac-toolbar--between { justify-content: space-between; }

/* --- bulk selection bar (media library, list screens) ------- */
[data-bulkbar] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--ac-r-md);
    background: var(--ac-accent-wash);
    border: 1px solid color-mix(in srgb, var(--ac-accent) 30%, var(--ac-border));
    animation: ac-pop var(--ac-t) var(--ac-ease);
}
[data-bulkbar][hidden] { display: none; }
[data-bulkbar-count] { font-weight: 600; font-size: .84rem; color: var(--ac-accent); margin-right: auto; }

/* --- tabs / segmented filter ------------------------------- */
.ac-tabs {
    display: flex;
    gap: .15rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ac-border);
    margin-bottom: 1rem;
}
/* .ac-tabs__item is the same primitive as .ac-tab (an <a>/<button> inside a
   .ac-tabs strip) — kept as one alias rather than a second, drifting
   definition. Found undefined/unstyled during the V4 motion pass: media's
   filter buttons and notifications' type filters used .ac-tabs__item with
   zero CSS behind it. */
.ac-tab, .ac-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ac-text-muted);
    font-size: .84rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--ac-t-fast) var(--ac-ease), border-color var(--ac-t) var(--ac-ease);
}
.ac-tab:hover, .ac-tabs__item:hover { color: var(--ac-text); }
.ac-tab.is-active, .ac-tabs__item.is-active { color: var(--ac-text); border-bottom-color: var(--ac-accent); }
.ac-tab span, .ac-tabs__item span, .ac-tabs__item small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 .3rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--ac-surface-2);
    color: var(--ac-text-muted);
    font-size: .7rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
.ac-tab.is-active span, .ac-tabs__item.is-active span, .ac-tabs__item.is-active small { background: var(--ac-accent-wash); color: var(--ac-accent); }

/* --- data table --------------------------------------------- */
.ac-tablewrap {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-sm);
    overflow: hidden;
}
.ac-tablewrap--scroll { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ac-table thead th {
    position: sticky;
    top: 0;
    background: var(--ac-surface-2);
    color: var(--ac-text-muted);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--ac-border);
    white-space: nowrap;
}
.ac-table tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--ac-border);
    vertical-align: middle;
}
.ac-table tbody tr:last-child td { border-bottom: 0; }
.ac-table tbody tr { transition: background var(--ac-t-fast) var(--ac-ease); }
.ac-table tbody tr:hover { background: var(--ac-surface-2); }
.ac-table tbody tr.is-hidden { display: none; }
.ac-cell-primary { font-weight: 550; }
.ac-cell-primary a { color: var(--ac-text); }
.ac-cell-primary a:hover { color: var(--ac-accent); }
.ac-cell-sub { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ac-text-subtle); font-weight: 400; }
.ac-cell-meta { color: var(--ac-text-subtle); font-size: .78rem; white-space: nowrap; }
.ac-cell-actions { text-align: right; white-space: nowrap; }
.ac-reorder { display: inline-flex; flex-direction: column; gap: 2px; }
.ac-reorder button {
    display: grid; place-items: center;
    width: 22px; height: 16px;
    border: 1px solid var(--ac-border);
    border-radius: 5px;
    background: var(--ac-surface);
    color: var(--ac-text-subtle);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
}
.ac-reorder button:hover { border-color: var(--ac-border-strong); color: var(--ac-text); }

/* --- pagination ------------------------------------------- */
.ac-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
    font-size: .82rem;
    color: var(--ac-text-muted);
}
.ac-pager a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text);
    font-weight: 500;
}
.ac-pager a:hover { border-color: var(--ac-border-strong); text-decoration: none; }

/* --- empty state ---------------------------------------- */
.ac-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    background: var(--ac-surface);
    border: 1px dashed var(--ac-border-strong);
    border-radius: var(--ac-r-md);
}
.ac-empty__icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--ac-r-md);
    background: var(--ac-surface-2);
    color: var(--ac-text-subtle);
    margin-bottom: .35rem;
}
.ac-empty__icon .ac-icon { width: 22px; height: 22px; }
.ac-empty h3 { font-size: .95rem; font-weight: 600; }
.ac-empty p { font-size: .84rem; color: var(--ac-text-muted); max-width: 34ch; }
.ac-empty .ac-btn { margin-top: .6rem; }

/* --- forms --------------------------------------------- */
.ac-form { max-width: 680px; }
.ac-form--wide { max-width: none; }
label { display: block; font-size: .82rem; font-weight: 550; color: var(--ac-text); margin-bottom: .3rem; }
.ac-field { margin-bottom: 1.25rem; }
.ac-field:last-child { margin-bottom: 0; }
.ac-field__hint { color: var(--ac-text-muted); font-size: .775rem; line-height: 1.5; margin: -.05rem 0 .4rem; }
.ac-content input:not([type]), .ac-bare input:not([type]),
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=search], input[type=date],
input[type=time], input[type=datetime-local], textarea, select {
    width: 100%;
    min-height: 42px;
    padding: .6rem .8rem;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    color: var(--ac-text);
    font: inherit;
    font-size: .875rem;
    transition: border-color var(--ac-t-fast) var(--ac-ease), box-shadow var(--ac-t) var(--ac-ease), background var(--ac-t) var(--ac-ease);
}
input::placeholder, textarea::placeholder { color: var(--ac-text-subtle); }
input:hover:not(:focus):not([readonly]), textarea:hover:not(:focus), select:hover:not(:focus) { border-color: var(--ac-border-strong); }
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--ac-accent);
    box-shadow: var(--ac-ring);
}
input[readonly] { background: var(--ac-surface-2); color: var(--ac-text-muted); cursor: default; }
textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.ac-field--richtext textarea { min-height: 11rem; }
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 49%, var(--ac-text-subtle) 50%), linear-gradient(-45deg, transparent 49%, var(--ac-text-subtle) 50%);
    background-position: right 1rem center, right .72rem center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}
input[type=file] {
    padding: .4rem;
    font-size: .82rem;
    background: var(--ac-surface-2);
}
input[type=file]::file-selector-button {
    margin-right: .7rem;
    padding: .35rem .7rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-xs);
    background: var(--ac-surface);
    color: var(--ac-text);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.ac-field.has-error input, .ac-field.has-error textarea, .ac-field.has-error select { border-color: var(--ac-danger); }
.ac-field.has-error input:focus, .ac-field.has-error textarea:focus, .ac-field.has-error select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-danger) 22%, transparent); }
.ac-field-error {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    color: var(--ac-danger);
    font-size: .77rem;
    font-weight: 500;
    margin-top: .35rem;
}
.ac-field-error::before { content: "!"; display: grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ac-danger); color: #fff; font-size: .62rem; font-weight: 700; margin-top: 1px; }
.ac-help { color: var(--ac-text-muted); font-size: .78rem; margin-top: .35rem; line-height: 1.5; }
.ac-req { color: var(--ac-danger); }
.ac-mono, .ac-color, input.ac-mono { font-family: var(--ac-mono); font-size: .82rem; }
.ac-color { max-width: 12rem; }

/* character counter */
.ac-field__foot { display: flex; justify-content: flex-end; margin-top: .3rem; }
.ac-counter { font-size: .72rem; color: var(--ac-text-subtle); font-variant-numeric: tabular-nums; }
.ac-counter.is-near { color: var(--ac-warning); }
.ac-counter.is-over { color: var(--ac-danger); font-weight: 600; }

.ac-check { display: flex; align-items: center; gap: .6rem; font-size: .86rem; font-weight: 450; cursor: pointer; }
.ac-check input, .ac-radio input, .ac-checklist input { width: auto; min-height: 0; accent-color: var(--ac-accent); }

/* toggle switch (styled boolean checkbox — keeps the real <input>) */
.ac-field--boolean .ac-check, .ac-switch { align-items: center; }
.ac-field--boolean .ac-check input[type=checkbox], .ac-switch input[type=checkbox] {
    appearance: none;
    position: relative;
    width: 38px; height: 22px;
    flex: none;
    border-radius: var(--ac-r-pill);
    background: var(--ac-border-strong);
    border: 0;
    cursor: pointer;
    transition: background var(--ac-t) var(--ac-ease);
}
.ac-field--boolean .ac-check input[type=checkbox]::after, .ac-switch input[type=checkbox]::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--ac-shadow-sm);
    transition: transform var(--ac-t) var(--ac-ease);
}
.ac-field--boolean .ac-check input[type=checkbox]:checked, .ac-switch input[type=checkbox]:checked { background: var(--ac-accent); }
.ac-field--boolean .ac-check input[type=checkbox]:checked::after, .ac-switch input[type=checkbox]:checked::after { transform: translateX(16px); }
.ac-field--boolean .ac-check input[type=checkbox]:focus-visible, .ac-switch input[type=checkbox]:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-radio { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.ac-radio label, .ac-checklist label { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 400; margin: 0; cursor: pointer; }
.ac-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .35rem .9rem;
    padding: .75rem .85rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface-2);
    max-height: 15rem;
    overflow-y: auto;
}

.ac-form__foot {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ac-border);
}
.ac-form__foot form { display: inline; }

/* integration provider field groups */
.ac-intfields {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    padding: 1rem 1.1rem .35rem;
    margin: 0 0 1rem;
    background: var(--ac-surface-2);
}
.ac-intfields legend {
    padding: 0 .45rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ac-text-muted);
}

/* notifications list */
.ac-notiflist {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-sm);
    overflow: hidden;
}
.ac-notiflist__item {
    display: flex;
    gap: .8rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-notiflist__item:last-child { border-bottom: 0; }
.ac-notiflist__item.is-unread { background: var(--ac-accent-wash); }
.ac-notiflist__dot {
    flex: none;
    width: .5rem; height: .5rem;
    margin-top: .45rem;
    border-radius: 50%;
    background: var(--ac-border-strong);
}
.ac-notiflist__item.is-unread .ac-notiflist__dot { background: var(--ac-accent); }
.ac-notiflist__body { min-width: 0; flex: 1; }
.ac-notiflist__body p { font-size: .84rem; color: var(--ac-text-muted); margin: .2rem 0 .3rem; }
.ac-notiflist__body small { display: block; }
.ac-notiflist__mark { flex: none; margin-left: auto; align-self: flex-start; }

/* ============================================================
   Editor layout — main + aside, sticky save bar
   ============================================================ */
.ac-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 1.75rem;
    align-items: start;
    max-width: none;
}
.ac-editor__main { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ac-editor__aside {
    position: sticky;
    top: calc(var(--ac-topbar-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-height: calc(100vh - var(--ac-topbar-h) - 2rem);
    overflow-y: auto;
}
/* section-jump nav — "where am I" for a long, many-group editor (see
   collection-edit.php); active section tracked via IntersectionObserver
   in admin.js, not just :target, so it updates on scroll too. */
.ac-jumpnav {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    background: var(--ac-surface);
    padding: .4rem;
    font-size: .82rem;
    max-height: 40vh;
    overflow-y: auto;
}
.ac-jumpnav a {
    padding: .4rem .6rem;
    border-radius: var(--ac-r-sm);
    color: var(--ac-text-muted);
    border-left: 2px solid transparent;
}
.ac-jumpnav a:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.ac-jumpnav a.is-active { color: var(--ac-accent); border-left-color: var(--ac-accent); background: var(--ac-accent-wash); font-weight: 550; }

/* --- settings tab workspace ---------------------------------------------
   A grouped section (general / restaurant.hours-style multi-category
   schemas) renders as a real 3-column workspace — vertical category tabs,
   one panel visible at a time, live preview on the right — instead of one
   long scrolling settings form. */
.ac-editor--tabs { grid-template-columns: 200px minmax(0, 1fr) 336px; }
.ac-settingsnav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    position: sticky;
    top: calc(var(--ac-topbar-h) + 1rem);
}
.ac-settingsnav__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .58rem .7rem;
    border-radius: var(--ac-r-sm);
    font-size: .855rem;
    font-weight: 500;
    color: var(--ac-text-muted);
    text-align: left;
    width: 100%;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-settingsnav__link .ac-icon { color: var(--ac-text-subtle); transition: color var(--ac-t-fast) var(--ac-ease); }
.ac-settingsnav__link:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.ac-settingsnav__link.is-active { background: var(--ac-accent-wash); color: var(--ac-text); font-weight: 640; border-color: color-mix(in srgb, var(--ac-accent) 22%, transparent); }
.ac-settingsnav__link.is-active .ac-icon { color: var(--ac-accent); }
.ac-tabpanel { display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 1080px) {
    .ac-editor--tabs { grid-template-columns: 1fr; }
    .ac-settingsnav { position: static; flex-direction: row; flex-wrap: wrap; gap: .3rem; order: -1; }
    .ac-settingsnav__link { width: auto; }
}

.ac-formcard {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-sm);
    overflow: hidden;
}
.ac-formcard__head {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--ac-border);
    background: var(--ac-surface);
}
.ac-formcard__head h2 { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.ac-formcard__head p { font-size: .8rem; color: var(--ac-text-muted); margin-top: .2rem; }
.ac-formcard__body { padding: 1.35rem; }

/* a card whose head is a real <summary> — collapsed by default so a page
   with several integration groups doesn't open every provider's form at
   once; one already configured stays open. */
summary.ac-formcard__head { cursor: pointer; list-style: none; }
summary.ac-formcard__head::-webkit-details-marker { display: none; }

/* --- integration service cards -----------------------------------------
   A real category-card grid (Ödeme / Kargo / E-posta / SMS / Harita /
   Analitik…): closed by default, one glance = icon + name + status; opens
   in place to the real provider select + config fields. Never a bare
   provider list. */
.ac-inttoolbar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.ac-searchfield {
    display: flex; align-items: center; gap: .5rem;
    flex: 1 1 240px; max-width: 320px;
    padding: .5rem .75rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text-subtle);
}
.ac-searchfield input {
    border: none; background: none; outline: none; flex: 1;
    font: inherit; color: var(--ac-text); padding: 0;
}
.ac-segmented { display: inline-flex; padding: .2rem; gap: .15rem; border: 1px solid var(--ac-border); border-radius: var(--ac-r-sm); background: var(--ac-surface); }
.ac-segmented__btn {
    padding: .35rem .75rem; border-radius: var(--ac-r-xs); border: none; background: none;
    font-size: .8rem; font-weight: 500; color: var(--ac-text-muted); cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-segmented__btn:hover { color: var(--ac-text); }
.ac-segmented__btn.is-active { background: var(--ac-accent); color: var(--ac-accent-ink); }
.ac-empty--inline { padding: 2rem 1.5rem; }

.ac-integrationgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .9rem; align-items: start; }
.ac-intcard {
    grid-column: span 1;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-lg);
    transition: border-color var(--ac-t-fast) var(--ac-ease), box-shadow var(--ac-t-fast) var(--ac-ease);
}
.ac-intcard:hover { border-color: var(--ac-border-strong); }
.ac-intcard[open] { grid-column: 1 / -1; box-shadow: var(--ac-shadow-md); }
.ac-intcard__face {
    display: flex; align-items: center; gap: .85rem;
    padding: 1.05rem 1.15rem;
    cursor: pointer; list-style: none;
}
.ac-intcard__face::-webkit-details-marker { display: none; }
.ac-intcard__icon {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--ac-r-md);
    background: var(--ac-accent-wash);
    color: var(--ac-accent);
}
/* each service category gets its own quiet identity chip — real semantic
   color per group, never decoration for its own sake */
.ac-intcard__icon--payment { background: var(--ac-success-wash); color: var(--ac-success); }
.ac-intcard__icon--shipping { background: var(--ac-warning-wash); color: var(--ac-warning); }
.ac-intcard__icon--email { background: var(--ac-info-wash); color: var(--ac-info); }
.ac-intcard__icon--sms { background: var(--ac-accent-wash); color: var(--ac-accent); }
.ac-intcard__icon--maps { background: var(--ac-danger-wash); color: var(--ac-danger); }
.ac-intcard__icon--analytics { background: var(--ac-surface-2); color: var(--ac-text-muted); }
.ac-intcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ac-intcard__name { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-intcard__desc { font-size: .78rem; color: var(--ac-text-muted); line-height: 1.35; }
.ac-intcard__chevron { flex: none; color: var(--ac-text-subtle); transition: transform var(--ac-t-fast) var(--ac-ease); }
.ac-intcard[open] .ac-intcard__chevron { transform: rotate(180deg); }
.ac-intcard__panel { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--ac-border); padding-top: 1.15rem; }
@media (max-width: 640px) {
    .ac-integrationgrid { grid-template-columns: 1fr; }
}
/* grouped editor: schema `width: half|third` lays fields out on a 6-col grid;
   `show_if` toggles the [hidden] attribute (JS) — hidden cards collapse too */
.ac-formcard__body--grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1rem; }
.ac-formcard__body--grid > .ac-field { grid-column: span 6; }
.ac-formcard__body--grid > .ac-field[hidden] { display: none !important; }
@media (min-width: 720px) {
  .ac-formcard__body--grid > .ac-field--half { grid-column: span 3; }
  .ac-formcard__body--grid > .ac-field--third { grid-column: span 2; }
}
.ac-formcard[hidden] { display: none !important; }
.ac-formcard--plain { border: 0; box-shadow: none; background: none; }

/* --- ops screens: columns, inline SVG charts, thumbs (sector extensions) --- */
.ac-cols { display: grid; gap: .85rem; margin-bottom: 1.25rem; }
.ac-cols > .ac-card { margin: 0; min-width: 0; }
@media (min-width: 900px) {
  .ac-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-cols--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.ac-card--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ac-chart { width: 100%; height: auto; display: block; overflow: visible; font-family: inherit; }
.ac-chart__grid { stroke: var(--ac-border); stroke-width: 1; }
.ac-chart__bar { fill: var(--ac-accent); }
.ac-chart__bar.is-zero { fill: var(--ac-border); }
.ac-chart__tick { font-size: 10px; fill: var(--ac-text-subtle); }
.ac-chart__label { font-size: 11px; fill: var(--ac-text-muted); }
/* area/trend (Charts::area) */
.ac-chart__area { fill: color-mix(in srgb, var(--ac-accent) 16%, transparent); }
.ac-chart__line { stroke: var(--ac-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ac-chart__dot { fill: var(--ac-surface); stroke: var(--ac-accent); stroke-width: 2.5; }
/* single progress/capacity bar (Charts::progress) */
.ac-chart--progress { overflow: visible; }
.ac-chart--progress .ac-chart__track { fill: var(--ac-surface-2); }
.ac-chart--progress .ac-chart__bar { fill: var(--ac-accent); }
.ac-donut { width: 150px; height: 150px; margin: .25rem auto; }
.ac-donut__track { fill: none; stroke: var(--ac-surface-2); stroke-width: 12; }
.ac-donut__seg { fill: none; stroke: var(--ac-accent); stroke-width: 12; stroke-linecap: round; }
.ac-donut__big { font: 650 18px var(--ac-font-display); fill: var(--ac-text); }
.ac-donut__small { font-size: 8px; fill: var(--ac-text-muted); letter-spacing: .06em; text-transform: uppercase; }
.ac-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ac-chips a.ac-badge { text-decoration: none; }
.ac-thumbrow { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ac-thumb { width: 44px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; background: var(--ac-surface-2); border: 1px solid var(--ac-border); }
.ac-thumb--empty { display: inline-flex; align-items: center; justify-content: center; color: var(--ac-text-subtle); }
.ac-inline-form { display: inline-flex; align-items: center; gap: .35rem; }
.ac-inline-form select { min-height: 32px; height: 32px; font-size: .8rem; padding: 0 1.6rem 0 .5rem; width: auto; }
a.ac-metric { text-decoration: none; color: inherit; }
a.ac-metric:hover { border-color: color-mix(in srgb, var(--ac-accent) 45%, var(--ac-border)); }
.ac-formcard--plain .ac-formcard__body { padding: 0; }

.ac-panel {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-sm);
    padding: var(--ac-panel-pad);
}
.ac-panel__title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ac-text-muted);
    margin-bottom: .8rem;
}
.ac-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    font-size: .83rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-panel__row:last-of-type { border-bottom: 0; }
.ac-panel__row > span:first-child { color: var(--ac-text-muted); }
.ac-panel__actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .85rem; }
.ac-panel__actions .ac-btn { width: 100%; }
.ac-panel--danger { border-color: color-mix(in srgb, var(--ac-danger) 30%, var(--ac-border)); }
.ac-panel--danger .ac-panel__title { color: var(--ac-danger); }

.ac-preview__tabs { display: flex; gap: .3rem; margin-bottom: .7rem; }
.ac-preview__tab {
    flex: 1;
    height: 30px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    font-size: .74rem;
    font-weight: 550;
    cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease), border-color var(--ac-t-fast) var(--ac-ease);
}
.ac-preview__tab:hover { border-color: var(--ac-border-strong); }
.ac-preview__tab.is-active { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-ink); }
.ac-preview__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface-2);
    margin-bottom: .65rem;
}
.ac-preview__frame iframe {
    display: block;
    border: 0;
    background: #fff;
    transform-origin: 0 0;
    transition: width var(--ac-t) var(--ac-ease), height var(--ac-t) var(--ac-ease), transform var(--ac-t) var(--ac-ease);
}
.ac-preview__frame { transition: height var(--ac-t) var(--ac-ease); }
.ac-preview__open { display: flex; align-items: center; gap: .4rem; font-size: .8rem; justify-content: center; }

/* --- activity timeline --------------------------------------- */
.ac-timeline { list-style: none; position: relative; }
.ac-timeline__item { display: flex; gap: .75rem; padding: 0 0 1.1rem; position: relative; }
.ac-timeline__item:last-child { padding-bottom: 0; }
.ac-timeline__item::before {
    content: '';
    position: absolute;
    left: 4px; top: 14px; bottom: -2px;
    width: 1px;
    background: var(--ac-border);
}
.ac-timeline__item:last-child::before { display: none; }
.ac-timeline__dot {
    flex: none;
    width: 9px; height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-accent-wash);
    z-index: 1;
}
.ac-timeline__body { min-width: 0; flex: 1; }
.ac-timeline__line { font-size: .85rem; margin: 0 0 .2rem; }
.ac-timeline__line strong { font-weight: 600; }
.ac-timeline__line small { margin-left: .2rem; }
.ac-timeline__group + .ac-timeline__group { margin-top: 1.1rem; }
.ac-timeline__heading {
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ac-text-subtle);
    margin: 0 0 .7rem;
}

.ac-completeness .ac-panel__title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .65rem; }
.ac-completeness__pct {
    font-family: var(--ac-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ac-text);
    font-variant-numeric: tabular-nums;
}
.ac-completeness__bar {
    height: 6px;
    border-radius: var(--ac-r-pill);
    background: var(--ac-surface-2);
    overflow: hidden;
    margin-bottom: .9rem;
}
.ac-completeness__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ac-accent), var(--ac-accent-2));
    transition: width var(--ac-t) var(--ac-ease);
}
.ac-completeness__list { display: flex; flex-direction: column; gap: .5rem; font-size: .82rem; }
.ac-completeness__list li { display: flex; align-items: center; gap: .55rem; }
.ac-completeness__list li span:last-child { min-width: 0; }
.ac-completeness__list li.is-done { color: var(--ac-text-muted); }
.ac-completeness__list li.is-done .ac-icon { color: var(--ac-success); flex-shrink: 0; }
.ac-completeness__list li.is-missing { color: var(--ac-text); font-weight: 550; }
.ac-completeness__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--ac-warning);
    background: var(--ac-warning-wash);
}

/* sticky save bar — spans the content, sits above the page bottom */
.ac-savebar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 0;
    padding: .8rem 1rem;
    padding-bottom: max(.8rem, env(safe-area-inset-bottom, .8rem));
    background: color-mix(in srgb, var(--ac-bg) 86%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-shadow-md);
    justify-content: flex-end;
}
.ac-savebar__state {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--ac-text-subtle);
    min-width: 120px;
}
.ac-savebar__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac-text-subtle); flex: none; }
.ac-savebar.is-dirty .ac-savebar__state { color: var(--ac-warning); }
.ac-savebar.is-dirty .ac-savebar__state::before { background: var(--ac-warning); }
.ac-savebar__hint { flex: 1 1 100%; order: -1; font-size: .78rem; color: var(--ac-text-subtle); margin: 0 0 .1rem; }
.ac-savebar__hint:empty { display: none; }

/* Google-style SEO preview (approximate) */
.ac-seopreview {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    padding: .85rem 1rem;
    background: var(--ac-surface-2);
    margin-bottom: 1rem;
}
.ac-seopreview__tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ac-text-subtle); margin-bottom: .5rem; }
.ac-seopreview__url { font-size: .78rem; color: var(--ac-success); display: flex; align-items: center; gap: .3rem; }
.ac-seopreview__title { font-size: 1.05rem; line-height: 1.3; color: #1a56db; margin: .15rem 0 .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root:not([data-ac-theme="light"]) .ac-seopreview__title { color: #8ab4f8; }
:root[data-ac-theme="dark"] .ac-seopreview__title { color: #8ab4f8; }
.ac-seopreview__desc { font-size: .82rem; color: var(--ac-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ac-form--inline { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ac-form--inline input[type=file], .ac-form--inline input[type=text] { width: auto; flex: 1; min-width: 180px; }

/* repeater */
.ac-repeater { display: flex; flex-direction: column; gap: .8rem; }
.ac-repeater [data-repeater] { display: flex; flex-direction: column; gap: .8rem; }
.ac-rep-item {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    padding: 1rem 1.1rem 1.1rem;
    background: var(--ac-surface);
}
.ac-rep-item legend { font-size: .8rem; color: var(--ac-text-muted); padding: 0 .35rem; }
.ac-rep-item__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-rep-item__title { font-size: .8rem; color: var(--ac-text-muted); font-weight: 600; }
.ac-rep-item__tools { display: flex; gap: .35rem; align-items: center; }
.ac-rep-item__tools button {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-xs);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    cursor: pointer;
}
.ac-rep-item__tools button:hover { border-color: var(--ac-border-strong); color: var(--ac-text); }
.ac-rep-item__del, .ac-rep-del { display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--ac-text-muted); margin: 0; font-weight: 400; }
.ac-rep-item__del input, .ac-rep-del input { width: auto; min-height: 0; }
.ac-rep-item--row { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .75rem; align-items: end; }

/* --- navigation: list + inspector workspace -----------------------------
   Left: a live-synced summary of every menu item (label/visibility read
   straight from the real inputs below). Right: the selected item's real
   fields, shown alone instead of one long stack of identical rows. Without
   JS, .ac-navlist stays [hidden] and every fieldset renders — still a
   fully working, if plainer, menu editor. */
.ac-navworkspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: start; }
.ac-navlist {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .4rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    background: var(--ac-surface);
}
.ac-navlist__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .65rem;
    border-radius: var(--ac-r-sm);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: .84rem;
    color: var(--ac-text-muted);
    cursor: pointer;
    transition: background var(--ac-t-fast) var(--ac-ease), color var(--ac-t-fast) var(--ac-ease);
}
.ac-navlist__item:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.ac-navlist__item.is-active { background: var(--ac-accent); color: var(--ac-accent-ink); font-weight: 600; }
.ac-navlist__item.is-active .ac-navlist__pill { border-color: transparent; background: var(--ac-surface); color: var(--ac-text); }
.ac-navlist__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-navlist__item.is-deleting .ac-navlist__label { text-decoration: line-through; opacity: .55; }
.ac-navlist__pill {
    flex: none;
    font-size: .66rem;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: var(--ac-r-pill);
    border: 1px solid var(--ac-border);
    color: var(--ac-text-subtle);
}
.ac-navlist__pill--hidden { color: var(--ac-warning); border-color: color-mix(in srgb, var(--ac-warning) 30%, transparent); background: var(--ac-warning-wash); }
.ac-navinspector .ac-repeater { display: flex; flex-direction: column; }
.ac-rep-item--nav {
    border: none;
    padding: 0;
    background: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ac-rep-item--nav .ac-rep-controls { justify-content: flex-end; margin-bottom: 0; order: 99; }
.ac-rep-item--nav .ac-rep-del { margin-left: .4rem; }
@media (max-width: 860px) {
    .ac-navworkspace { grid-template-columns: 1fr; }
    .ac-navlist { flex-direction: row; flex-wrap: wrap; }
    .ac-navlist__item { width: auto; }
}
.ac-rep-controls { display: flex; gap: .3rem; align-items: center; margin-bottom: .5rem; }
.ac-rep-controls button {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-xs);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    cursor: pointer;
}

/* block accordion (page-edit) */
.ac-block {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    margin-bottom: .7rem;
    background: var(--ac-surface);
    overflow: hidden;
}
.ac-block > summary {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1rem;
    font-size: .85rem;
    font-weight: 550;
    cursor: pointer;
    list-style: none;
}
.ac-block > summary::-webkit-details-marker { display: none; }
.ac-block > summary::before {
    content: "";
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--ac-text-subtle);
    border-bottom: 1.5px solid var(--ac-text-subtle);
    transform: rotate(-45deg);
    transition: transform var(--ac-t) var(--ac-ease);
}
.ac-block[open] > summary::before { transform: rotate(45deg); }
.ac-block[open] > summary { border-bottom: 1px solid var(--ac-border); }
.ac-block .ac-form { padding: 1rem; max-width: none; }
.ac-block-add {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--ac-border);
}
.ac-block-add select { width: auto; flex: 1; max-width: 220px; }

/* --- weekly hours workspace (a real day-by-day grid, not a generic
   vertical repeater form) — a canonical primitive since any theme with an
   opening-hours schema shaped like {day, closed, open, close, open2, close2}
   can reuse it; only Restaurant/EMBER uses it today. ---------------- */
.ac-hoursgrid { display: flex; flex-direction: column; gap: .35rem; }
/* Two rows per grid-template-area, not one wide row: the optional
   second-service pair stacks BELOW the primary open/close pair in the same
   column instead of competing for horizontal space beside it — the old
   4-across layout genuinely overflowed at real content widths (two full
   <input type=time> pairs side by side need more room than any card
   column has). */
.ac-hoursgrid__row {
    display: grid;
    grid-template-columns: 8.5rem 5.5rem minmax(0, 1fr);
    grid-template-areas: "day toggle primary" "day toggle second";
    align-items: center;
    row-gap: .3rem;
    column-gap: .9rem;
    padding: .65rem .25rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-hoursgrid__row:last-child { border-bottom: 0; }
.ac-hoursgrid__day { grid-area: day; font-weight: 600; font-size: .88rem; align-self: center; }
.ac-hoursgrid__row.is-closed .ac-hoursgrid__day { color: var(--ac-text-subtle); font-weight: 500; }
.ac-hoursgrid__toggle { grid-area: toggle; font-size: .78rem; color: var(--ac-text-muted); white-space: nowrap; align-self: center; }
.ac-hoursgrid__times { grid-area: primary; display: flex; align-items: center; gap: .4rem; min-width: 0; }
.ac-hoursgrid__times input[type="time"] { min-width: 0; flex: 1 1 130px; }
.ac-hoursgrid__sep { color: var(--ac-text-subtle); font-size: .8rem; flex: none; }
.ac-hoursgrid__times--second { grid-area: second; flex-wrap: wrap; }
.ac-hoursgrid__times--second small { flex-basis: 100%; font-size: .66rem; color: var(--ac-text-subtle); white-space: nowrap; margin-bottom: .1rem; }
.ac-hoursgrid__row.is-closed input[type="time"] { opacity: .45; }
@media (max-width: 860px) {
    .ac-hoursgrid__row { grid-template-columns: 1fr; grid-template-areas: "day" "toggle" "primary" "second"; gap: .5rem; padding: .85rem .25rem; }
}

/* --- media / asset manager -------------------------------- */
.ac-dropzone {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    background: var(--ac-surface);
    margin-bottom: 1.25rem;
}
.ac-dropzone.is-drag { border-color: var(--ac-accent); background: var(--ac-accent-wash); }
.ac-dropzone input[type=file] { flex: 1; min-width: 200px; }
.ac-dropzone input[type=text] { flex: 1; min-width: 160px; }

.ac-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }
.ac-media-grid--lib { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ac-media-item {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    overflow: hidden;
    background: var(--ac-surface-2);
    cursor: pointer;
    padding: 0;
    aspect-ratio: 4/3;
    transition: border-color var(--ac-t) var(--ac-ease), transform var(--ac-t-fast) var(--ac-ease);
}
.ac-media-item:hover { border-color: var(--ac-accent); transform: translateY(-1px); }
.ac-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-media-card {
    position: relative;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-md);
    overflow: hidden;
    background: var(--ac-surface);
    box-shadow: var(--ac-shadow-sm);
}
.ac-media-card.is-selected { outline: 2px solid var(--ac-accent); outline-offset: -2px; }
.ac-media-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--ac-surface-2); }
.ac-media-card__pick {
    position: absolute;
    top: .45rem; left: .45rem;
    z-index: 1;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ac-surface) 85%, transparent);
    border-radius: var(--ac-r-sm);
    box-shadow: var(--ac-shadow-sm);
}
.ac-media-card__pick input { margin: 0; }
.ac-media-card__badge { position: absolute; top: .5rem; right: .5rem; z-index: 1; }
.ac-media-card__meta { padding: .6rem .7rem; font-size: .73rem; color: var(--ac-text-subtle); display: flex; flex-direction: column; gap: .25rem; }
.ac-media-card__meta code { font-size: .72em; }
.ac-media-card__alt { display: flex; gap: .4rem; padding: 0 .7rem .5rem; }
.ac-media-card__alt input { font-size: .78rem; min-height: 32px; padding: .3rem .45rem; }
.ac-media-card__alt button, .ac-media-card__del {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-xs);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    padding: .35rem .6rem;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
}
.ac-media-card__del { margin: 0 .7rem .7rem; width: calc(100% - 1.4rem); color: var(--ac-danger); border-color: color-mix(in srgb, var(--ac-danger) 30%, var(--ac-border)); }
.ac-media-pick { display: flex; flex-direction: column; gap: .5rem; }
.ac-media-preview img { max-width: 220px; border-radius: var(--ac-r-sm); border: 1px solid var(--ac-border); display: block; }
.ac-gallery { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ac-gallery__item { position: relative; }
.ac-gallery__item img { width: 84px; height: 62px; object-fit: cover; border-radius: var(--ac-r-xs); border: 1px solid var(--ac-border); display: block; }
.ac-gallery__item button {
    position: absolute; top: -7px; right: -7px;
    width: 19px; height: 19px;
    border: 0; border-radius: 50%;
    background: var(--ac-danger); color: #fff;
    cursor: pointer; font-size: 11px; line-height: 1;
    display: grid; place-items: center;
}

/* --- alerts / flash / toast --------------------------- */
.ac-flash, .ac-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: var(--ac-r-sm);
    font-size: .84rem;
    margin-bottom: 1.1rem;
    border: 1px solid transparent;
}
.ac-flash { color: var(--ac-success); background: var(--ac-success-wash); border-color: color-mix(in srgb, var(--ac-success) 24%, transparent); }
.ac-flash--warn { color: var(--ac-warning); background: var(--ac-warning-wash); border-color: color-mix(in srgb, var(--ac-warning) 24%, transparent); }
.ac-alert { color: var(--ac-danger); background: var(--ac-danger-wash); border-color: color-mix(in srgb, var(--ac-danger) 24%, transparent); }

.ac-toasts {
    position: fixed;
    top: calc(var(--ac-topbar-h) + 12px);
    right: 16px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(360px, calc(100vw - 32px));
}
.ac-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    background: var(--ac-elevated);
    border: 1px solid var(--ac-border);
    border-left: 3px solid var(--ac-success);
    border-radius: var(--ac-r-sm);
    box-shadow: var(--ac-shadow-lg);
    font-size: .83rem;
    animation: ac-toast-in var(--ac-t) var(--ac-ease);
}
.ac-toast--warn { border-left-color: var(--ac-warning); }
.ac-toast--error { border-left-color: var(--ac-danger); }
.ac-toast .ac-icon { color: var(--ac-success); margin-top: 1px; }
.ac-toast--warn .ac-icon { color: var(--ac-warning); }
.ac-toast--error .ac-icon { color: var(--ac-danger); }
@keyframes ac-toast-in { from { opacity: 0; transform: translateX(12px); } }

/* --- modal ------------------------------------------- */
.ac-modal, .ac-media-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: color-mix(in srgb, #0a0a0c 55%, transparent);
    backdrop-filter: blur(3px);
    animation: ac-fade var(--ac-t) var(--ac-ease);
}
.ac-modal[hidden], .ac-media-modal[hidden] { display: none; }
.ac-modal__inner, .ac-media-modal__inner {
    background: var(--ac-elevated);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-lg);
    box-shadow: var(--ac-shadow-lg);
    width: 100%;
    max-width: 720px;
    max-height: min(80vh, 720px);
    overflow-y: auto;
    padding: 1.25rem;
    animation: ac-pop var(--ac-t) var(--ac-ease);
}
.ac-modal__head, .ac-media-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ac-modal__head strong, .ac-media-modal__head strong { font-size: .95rem; font-weight: 600; }
.ac-modal__head button, .ac-media-modal__head button {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid transparent;
    border-radius: var(--ac-r-sm);
    background: none;
    color: var(--ac-text-subtle);
    cursor: pointer;
    font-size: 1.2rem;
}
.ac-modal__head button:hover, .ac-media-modal__head button:hover { background: var(--ac-surface-2); color: var(--ac-text); }
@keyframes ac-fade { from { opacity: 0; } }
@keyframes ac-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* --- command palette ------------------------------- */
.ac-cmdk {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    place-items: start center;
    padding: 12vh 1rem 1rem;
    background: color-mix(in srgb, #08080a 55%, transparent);
    backdrop-filter: blur(6px);
    animation: ac-fade var(--ac-t) var(--ac-ease);
}
.ac-cmdk[hidden] { display: none; }
.ac-cmdk__panel {
    width: 100%;
    max-width: 580px;
    background: var(--ac-elevated);
    border: 1px solid var(--ac-border-strong);
    border-radius: var(--ac-r-xl);
    box-shadow: var(--ac-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--ac-accent) 12%, transparent);
    overflow: hidden;
    animation: ac-pop var(--ac-t-slow) var(--ac-ease-spring);
}
.ac-cmdk__foot {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--ac-border);
    font-size: .72rem;
    color: var(--ac-text-subtle);
}
.ac-cmdk__foot span { display: inline-flex; align-items: center; gap: .3rem; }
.ac-cmdk__field {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--ac-border);
}
.ac-cmdk__field .ac-icon { color: var(--ac-text-subtle); }
.ac-cmdk__field input {
    flex: 1;
    border: 0;
    background: none;
    font-size: .95rem;
    padding: 0;
    min-height: 0;
}
.ac-cmdk__field input:focus { outline: none; box-shadow: none; }
.ac-cmdk__list { max-height: 340px; overflow-y: auto; padding: .35rem; }
.ac-cmdk__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--ac-r-sm);
    background: none;
    color: var(--ac-text);
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}
.ac-cmdk__item .ac-icon { color: var(--ac-text-subtle); }
.ac-cmdk__item:hover { background: var(--ac-surface-2); }
.ac-cmdk__item.is-active { background: var(--ac-accent-wash); color: var(--ac-accent); }
.ac-cmdk__item.is-active .ac-icon { color: var(--ac-accent); }
.ac-cmdk__item small { margin-left: auto; color: var(--ac-text-subtle); font-size: .72rem; }
.ac-cmdk__item--create .ac-icon { color: var(--ac-accent); }
.ac-cmdk__item--create:not(.is-active) small { color: var(--ac-accent); opacity: .8; }
.ac-cmdk__empty { padding: 1.25rem; text-align: center; color: var(--ac-text-subtle); font-size: .84rem; }
.ac-cmdk__loading .ac-btn__spin { display: inline-block; vertical-align: -2px; margin-right: .3rem; }

/* --- bare (login / error) --------------------------- */
.ac-bare {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(60% 60% at 15% 0%, color-mix(in srgb, var(--ac-accent) 8%, transparent), transparent 70%),
        var(--ac-bg);
}
.ac-bare__card {
    width: 100%;
    max-width: 380px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-lg);
    box-shadow: var(--ac-shadow-md);
    padding: 2rem;
}
.ac-bare__card h1 { font-size: 1.25rem; font-weight: 640; letter-spacing: -.02em; }
.ac-bare__card .ac-lead { margin: .4rem 0 1.35rem; }
.ac-bare__card label { margin-top: .9rem; }
.ac-bare__card label:first-of-type { margin-top: 0; }
.ac-bare__card .ac-btn { width: 100%; margin-top: 1.25rem; }
.ac-bare__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ac-text-subtle);
}
.ac-bare__brand .ac-platform__mark { width: 24px; height: 24px; border-radius: 7px; }

.ac-demo-hint {
    display: grid;
    gap: .18rem;
    margin: 0 0 1.2rem;
    padding: .8rem .9rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-sm);
    background: var(--ac-surface-2);
    font-size: .82rem;
    color: var(--ac-text-muted);
}
.ac-demo-hint strong { color: var(--ac-text); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; }
.ac-demo-hint code { font-family: var(--ac-mono); background: var(--ac-surface); border: 1px solid var(--ac-border); padding: .05em .4em; border-radius: var(--ac-r-xs); color: var(--ac-text); }

/* --- drawer backdrop (mobile sidebar) ------------------ */
.ac-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: color-mix(in srgb, #0a0a0c 45%, transparent);
    backdrop-filter: blur(2px);
    animation: ac-fade var(--ac-t) var(--ac-ease);
}
.ac-scrim[hidden] { display: none; }

/* --- responsive ------------------------------------- */
@media (max-width: 960px) {
    /* the off-canvas drawer is position:fixed at translateX(-100%); clip (not
       hidden) keeps it from adding a sliver of horizontal scroll without
       breaking the sticky topbar. */
    html, body { overflow-x: clip; }
    .ac { grid-template-columns: 1fr; }
    .ac-side {
        position: fixed;
        left: 0; top: 0;
        width: min(84vw, var(--ac-sidebar-w));
        z-index: 50;
        transform: translateX(-100%);
        transition: transform var(--ac-t) var(--ac-ease);
        box-shadow: var(--ac-shadow-lg);
    }
    .ac.is-drawer-open .ac-side { transform: translateX(0); }
    .ac-railtoggle { display: none; }
    .ac-burger { display: grid; }
    .ac-searchtrigger__label, .ac-searchtrigger .ac-kbd { display: none; }
    .ac-searchtrigger { padding: 0; width: 34px; justify-content: center; }
}
@media (max-width: 1080px) {
    .ac-editor { grid-template-columns: 1fr; gap: 1.25rem; }
    .ac-editor__aside { position: static; order: 2; }
    .ac-editor__main { order: 1; }
}
@media (max-width: 640px) {
    .ac-content { padding-bottom: 4rem; }
    .ac-head { margin-bottom: 1.1rem; }
    .ac-head h1 { font-size: 1.2rem; }
    .ac-editorhead__actions { width: 100%; }
    .ac-formcard__head, .ac-formcard__body { padding-left: 1rem; padding-right: 1rem; }
    .ac-savebar__state { flex: 1 1 100%; order: -1; }
    .ac-dl { grid-template-columns: 1fr; gap: .15rem .5rem; }
    .ac-dl dt { margin-top: .5rem; }
    .ac-grid { grid-template-columns: 1fr 1fr; }
    .ac-rep-item--row { grid-template-columns: 1fr; }
    .ac-crumb { font-size: .78rem; }
    .ac-crumb__pre, .ac-crumb__pre + .ac-crumb__sep { display: none; }
    /* tables collapse to stacked cards */
    .ac-table, .ac-table thead, .ac-table tbody, .ac-table tr, .ac-table td { display: block; width: 100%; }
    .ac-table thead { display: none; }
    .ac-table tbody tr {
        border: 1px solid var(--ac-border);
        border-radius: var(--ac-r-sm);
        margin-bottom: .6rem;
        padding: .5rem .2rem;
    }
    .ac-table tbody td { border-bottom: 0; padding: .35rem .9rem; }
    .ac-table tbody td::before {
        content: attr(data-th);
        display: block;
        font-size: .66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ac-text-subtle);
        margin-bottom: .1rem;
    }
    .ac-table tbody td:empty { display: none; }
    .ac-cell-actions { text-align: left; }
    .ac-savebar { margin-left: -1rem; margin-right: -1rem; border-radius: 0; }
    /* the bulk-selection bar becomes a sticky bottom action bar on mobile,
       same treatment as .ac-savebar, so a multi-select action is always one
       thumb-reach away instead of scrolling back up past the selected rows. */
    [data-bulkbar]:not([hidden]) {
        position: sticky;
        bottom: 0;
        z-index: 15;
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding-bottom: max(.7rem, env(safe-area-inset-bottom, .7rem));
        box-shadow: var(--ac-shadow-md);
        flex-wrap: wrap;
    }
    [data-bulkbar-count] { flex: 1 1 100%; order: -1; }
    .ac-toasts { left: 16px; right: 16px; max-width: none; }
    /* full-screen command palette — a centered floating card makes no sense
       once the viewport itself is barely wider than the card would be. */
    .ac-cmdk { padding: 0; align-items: stretch; }
    .ac-cmdk__panel {
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        display: flex;
        flex-direction: column;
    }
    .ac-cmdk__list { flex: 1; max-height: none; }
}
@media (max-width: 360px) {
    .ac-grid { grid-template-columns: 1fr; }
    .ac-content { padding-left: .85rem; padding-right: .85rem; }
    .ac-card { padding-left: .95rem; padding-right: .95rem; }
    .ac-head h1 { font-size: 1.1rem; }
    .ac-head .ac-count-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   COMMAND CENTER — the reference-design shell: centred command search, primary
   "Sitede Düzenle" CTA, notification bell, pinned dashboard/edit links, promo
   card, colour-coded real-data metric tiles, list rows with icon chips, quick
   action tiles, a real completion checklist and theme-status card.
   ========================================================================== */
/* no overflow clipping here: the notification popover is a child of the topbar
   and must be free to extend below it (clip: hidden pushed it under the page). */
.ac-topbar { gap: .6rem; height: 64px; }
.ac-topbar > * { min-width: 0; }
.ac-crumb { flex: 0 0 auto; max-width: 220px; }
.ac-searchtrigger--bar {
    flex: 1 1 140px; min-width: 0; max-width: 520px; height: 40px;
    justify-content: flex-start; border-radius: var(--ac-r-md);
    background: var(--ac-surface); margin: 0 auto;
}
.ac-searchtrigger--bar .ac-searchtrigger__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-topbar__actions { gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.ac-topbar__edit { border-radius: var(--ac-r-md); font-weight: 700; }
.ac-bell { position: relative; }
.ac-bell__dot {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--ac-r-pill); background: var(--ac-danger-fill, var(--ac-danger)); color: #fff;
    font: 700 10px/16px var(--ac-font); text-align: center;
}
.ac-topbar__user { display: flex; align-items: center; gap: .55rem; padding: .25rem .5rem .25rem .3rem; border-radius: var(--ac-r-md); }
.ac-topbar__user:hover { background: var(--ac-surface-2); }
.ac-topbar__user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.ac-topbar__user-meta span { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ac-topbar__user-meta small { font-size: .7rem; color: var(--ac-text-subtle); }
@media (max-width: 1360px) { .ac-topbar__user-meta, .ac-topbar__view span, .ac-crumb { display: none; } }
@media (max-width: 760px) { .ac-topbar__view { display: none; } .ac-topbar__edit span { display: none; } .ac-searchtrigger--bar .ac-kbd { display: none; } }

.ac-nav__items--top { margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--ac-border); }
.ac-nav__link--edit .ac-icon { color: var(--ac-accent); }
.ac-nav__pill {
    margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .12rem .45rem; border-radius: var(--ac-r-pill);
    background: var(--ac-accent-wash); color: var(--ac-accent);
}
.ac-nav__link.is-active .ac-nav__pill { background: color-mix(in srgb, var(--ac-accent-ink) 18%, transparent); color: var(--ac-accent-ink); }
.ac.is-rail .ac-nav__pill { display: none; }
.ac-promo {
    margin: .75rem .25rem .5rem;
    padding: .95rem 1rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-r-lg);
    background: var(--ac-surface-2);
}
.ac-promo strong { display: flex; align-items: center; gap: .35rem; font-size: .86rem; }
.ac-promo p { font-size: .76rem; color: var(--ac-text-muted); margin: .25rem 0 .7rem; }
.ac-promo .ac-btn--block { justify-content: space-between; }
.ac.is-rail .ac-promo { display: none; }

/* --- page head with a real date chip ---------------------------------- */
.ac-cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ac-cc-head h1 { font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1.1 var(--ac-font-display); letter-spacing: -.02em; }
.ac-cc-head .ac-lead { margin-top: .4rem; }
.ac-cc-date { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .6rem; border: 1px solid var(--ac-border); border-radius: var(--ac-r-md); background: var(--ac-surface); }
.ac-cc-date__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--ac-r-sm); background: var(--ac-surface-2); color: var(--ac-text-muted); }
.ac-cc-date strong { display: block; font-size: .9rem; }
.ac-cc-date small { color: var(--ac-text-subtle); font-size: .74rem; }

/* --- colour-coded metric tiles (real numbers only) --------------------- */
.ac-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ac-grid-gap); margin-bottom: 1.25rem; }
.ac-tile-metric {
    --tile: var(--ac-accent); --tile-wash: var(--ac-accent-wash);
    display: flex; align-items: center; gap: .9rem;
    padding: 1.05rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--tile) 35%, var(--ac-border));
    border-radius: var(--ac-r-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 14%, var(--ac-surface)), var(--ac-surface) 70%);
    color: var(--ac-text); text-decoration: none;
    transition: transform var(--ac-t) var(--ac-ease), border-color var(--ac-t) var(--ac-ease), box-shadow var(--ac-t) var(--ac-ease);
}
a.ac-tile-metric:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tile) 60%, var(--ac-border)); box-shadow: var(--ac-shadow-md); }
.ac-tile-metric--green { --tile: var(--ac-success); }
.ac-tile-metric--blue { --tile: var(--ac-info); }
.ac-tile-metric--amber { --tile: var(--ac-warning); }
.ac-tile-metric--purple { --tile: var(--ac-purple); }
.ac-tile-metric__ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--ac-r-md); background: color-mix(in srgb, var(--tile) 22%, transparent); color: var(--tile); }
.ac-tile-metric__ico .ac-icon { width: 22px; height: 22px; }
.ac-tile-metric__body { display: flex; flex-direction: column; min-width: 0; }
.ac-tile-metric__value { font: 700 1.7rem/1 var(--ac-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ac-tile-metric__label { font-size: .84rem; font-weight: 600; margin-top: .25rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-tile-metric__sub { font-size: .72rem; color: var(--ac-text-subtle); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .ac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ac-tiles { grid-template-columns: 1fr; } }

.ac-cc-publishall { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: 1.25rem; border: 1px solid color-mix(in srgb, var(--ac-warning) 40%, var(--ac-border)); border-radius: var(--ac-r-md); background: var(--ac-warning-wash); font-size: .86rem; }
.ac-cc-publishall > span { display: flex; align-items: center; gap: .5rem; }

/* --- two-column command grid ------------------------------------------- */
.ac-cc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--ac-grid-gap); align-items: start; margin-bottom: var(--ac-grid-gap); }
.ac-cc-grid--bottom { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
.ac-cc-main, .ac-cc-side { display: flex; flex-direction: column; gap: var(--ac-grid-gap); min-width: 0; }
.ac-cc-main > .ac-card, .ac-cc-side > .ac-card, .ac-cc-grid--bottom > .ac-card { margin-bottom: 0; }
@media (max-width: 1000px) { .ac-cc-grid, .ac-cc-grid--bottom { grid-template-columns: 1fr; } }
.ac-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .6rem; }
.ac-card__head .ac-card__title { margin: 0; }
.ac-card:not(.ac-card--flush) > .ac-card__head { padding: 0 0 .8rem; }

.ac-cc-bars { list-style: none; padding: .2rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.ac-cc-bars li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 40px; align-items: center; gap: .8rem; font-size: .84rem; }
.ac-cc-bars__label { color: var(--ac-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-cc-bars__track { height: 8px; border-radius: 999px; background: var(--ac-surface-2); overflow: hidden; }
.ac-cc-bars__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ac-accent-2), var(--ac-accent)); border-radius: 999px; }
.ac-cc-bars__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ac-text-muted); }

.ac-qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .6rem; }
.ac-qa__tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    min-height: 84px; padding: .8rem .5rem;
    border: 1px solid var(--ac-border); border-radius: var(--ac-r-md);
    background: var(--ac-surface-2); color: var(--ac-text);
    font-size: .78rem; font-weight: 600; text-align: center;
    transition: border-color var(--ac-t-fast) var(--ac-ease), transform var(--ac-t-fast) var(--ac-ease);
}
.ac-qa__tile .ac-icon { width: 22px; height: 22px; color: var(--ac-text-muted); }
.ac-qa__tile:hover { border-color: var(--ac-border-strong); transform: translateY(-1px); }
.ac-qa__tile--primary { background: var(--ac-accent); color: var(--ac-accent-ink); border-color: transparent; }
.ac-qa__tile--primary .ac-icon { color: var(--ac-accent-ink); }

.ac-cc-list { list-style: none; display: flex; flex-direction: column; padding: 0 .5rem .5rem; }
.ac-cc-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem .75rem; border-radius: var(--ac-r-sm); font-size: .86rem; }
.ac-cc-list li + li { border-top: 1px solid var(--ac-border); }
.ac-cc-list li:hover { background: var(--ac-surface-2); }
.ac-cc-list__ico { --chip: var(--ac-text-muted); flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ac-r-sm); background: color-mix(in srgb, var(--chip) 16%, transparent); color: var(--chip); }
.ac-cc-list__ico--accent { --chip: var(--ac-accent); }
.ac-cc-list__ico--warn { --chip: var(--ac-warning); }
.ac-cc-list__ico--danger { --chip: var(--ac-danger); }
.ac-cc-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ac-cc-list__body > a, .ac-cc-list__body > span { font-weight: 600; color: var(--ac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-cc-list__body small { color: var(--ac-text-subtle); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-cc-list time { flex: none; font-size: .74rem; color: var(--ac-text-subtle); white-space: nowrap; }
.ac-cc-list__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-text-subtle); }
.ac-cc-list__dot--accent { background: var(--ac-accent); }
.ac-cc-list__dot--warn { background: var(--ac-warning); }
.ac-cc-list__dot--danger { background: var(--ac-danger); }

.ac-cc-check { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.ac-cc-check li { display: flex; align-items: flex-start; gap: .7rem; font-size: .86rem; }
.ac-cc-check__box { flex: none; width: 22px; height: 22px; margin-top: .1rem; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid var(--ac-border-strong); background: var(--ac-surface-2); color: var(--ac-accent-ink); }
.ac-cc-check li.is-done .ac-cc-check__box { background: var(--ac-accent); border-color: var(--ac-accent); }
.ac-cc-check li.is-done > .ac-cc-check__body > span { color: var(--ac-text-muted); text-decoration: line-through; }
.ac-cc-check__body { display: flex; flex-direction: column; min-width: 0; }
.ac-cc-check__body small { color: var(--ac-text-subtle); font-size: .74rem; }
.ac-cc-progress { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; padding: .85rem 1rem; border-radius: var(--ac-r-md); border: 1px solid color-mix(in srgb, var(--ac-accent) 35%, var(--ac-border)); background: var(--ac-accent-wash); }
.ac-cc-progress__label { grid-column: 1 / -1; font-size: .84rem; font-weight: 600; }
.ac-cc-progress__track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ac-accent) 18%, transparent); overflow: hidden; }
.ac-cc-progress__fill { display: block; height: 100%; background: var(--ac-accent); border-radius: 999px; }
.ac-cc-progress__n { font: 700 .84rem/1 var(--ac-font-display); font-variant-numeric: tabular-nums; }

.ac-cc-theme { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.ac-cc-theme__mark { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--ac-r-md); background: var(--ac-accent-wash); color: var(--ac-accent); font: 700 1.1rem/1 var(--ac-font-display); letter-spacing: .03em; }
.ac-cc-theme__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ac-cc-theme__body strong { font-size: .95rem; }
.ac-cc-theme__body > span { font-size: .78rem; color: var(--ac-text-muted); }
.ac-cc-theme__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- drag & drop (menu builder + page blocks) — real persistence ------- */
[data-drag-handle] { cursor: grab; color: var(--ac-text-subtle); display: inline-grid; place-items: center; }
[data-drag-handle]:active { cursor: grabbing; }
.ac-navlist__item[draggable="true"] { cursor: grab; }
.ac-navlist__item.is-dragging, .ac-block.is-dragging { opacity: .4; }
.ac-navlist__item.is-drop-before, .ac-block.is-drop-before { box-shadow: inset 0 3px 0 var(--ac-accent); }
.ac-navlist__item.is-drop-after, .ac-block.is-drop-after { box-shadow: inset 0 -3px 0 var(--ac-accent); }
.ac-navlist__grip { flex: none; }
.ac-block__tools { display: inline-flex; gap: .2rem; margin-left: auto; }
.ac-block__tools button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--ac-border); border-radius: var(--ac-r-xs); background: var(--ac-surface); color: var(--ac-text-muted); cursor: pointer; }
.ac-block__tools button:hover { border-color: var(--ac-border-strong); color: var(--ac-text); }
.ac-block > summary { display: flex; align-items: center; gap: .5rem; }
.ac-block-order { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .9rem; font-size: .82rem; color: var(--ac-text-muted); }

/* --- Site Ayarları hub ---------------------------------------- */
.ac-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.ac-settings-card {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
    padding: .95rem 1rem; text-decoration: none; color: var(--ac-text);
    background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-r-md); box-shadow: var(--ac-shadow-sm);
    transition: border-color var(--ac-t-fast) var(--ac-ease), transform var(--ac-t-fast) var(--ac-ease);
}
.ac-settings-card:hover { border-color: var(--ac-accent); transform: translateY(-1px); }
.ac-settings-card:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-settings-card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ac-accent-wash); color: var(--ac-accent); }
.ac-settings-card__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ac-settings-card__body strong { font-size: .95rem; }
.ac-settings-card__body span { color: var(--ac-text-muted); font-size: .8rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .ac-settings-card { transition: none; } .ac-settings-card:hover { transform: none; } }

/* --- platform brand (PHP Atölye) above the site brand ------------------ */
.ac-platform { display: flex; align-items: center; gap: .65rem; padding: .5rem .5rem .85rem; color: var(--ac-text); text-decoration: none; font-size: .95rem; font-weight: 640; letter-spacing: -.015em; white-space: nowrap; border-radius: var(--ac-r-md); }
.ac-platform__mark { width: 28px; height: 28px; flex: none; border-radius: 8px; }
.ac-platform:hover { color: var(--ac-text); background: var(--ac-surface-2); }
.ac-platform:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac.is-rail .ac-platform { justify-content: center; padding-inline: 0; }
.ac.is-rail .ac-platform span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- notification popover ------------------------------------------- */
.ac-bellwrap { position: relative; }
.ac-popover {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60; width: min(380px, calc(100vw - 1.5rem));
    background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-r-lg, 14px);
    box-shadow: var(--ac-shadow-lg, 0 24px 60px -20px rgba(0,0,0,.5)); overflow: hidden;
}
.ac-popover[hidden] { display: none !important; }
.ac-popover__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--ac-border); font-weight: 600; font-size: .85rem; }
.ac-popover__count { font-size: .68rem; font-weight: 700; padding: .2em .55em; border-radius: 999px; background: var(--ac-accent-wash); color: var(--ac-accent); }
.ac-popover__list { list-style: none; margin: 0; padding: .3rem; max-height: min(60vh, 420px); overflow: auto; }
.ac-popover__item { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .55rem .6rem; border-radius: 10px; color: var(--ac-text); text-decoration: none; }
.ac-popover__item:hover, .ac-popover__item:focus-visible { background: var(--ac-surface-2); outline: none; }
.ac-popover__item.is-unread { background: color-mix(in srgb, var(--ac-accent) 7%, transparent); }
.ac-popover__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ac-surface-2); color: var(--ac-text-muted); }
.ac-popover__item.is-unread .ac-popover__ico { background: var(--ac-accent-wash); color: var(--ac-accent); }
.ac-popover__title { display: block; font-size: .84rem; font-weight: 600; line-height: 1.35; }
.ac-popover__body { display: block; font-size: .78rem; color: var(--ac-text-muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-popover__meta { display: flex; gap: .5rem; align-items: center; font-size: .7rem; color: var(--ac-text-subtle); margin-top: .15rem; }
.ac-popover__meta b { font-weight: 600; color: var(--ac-text-muted); }
.ac-popover__foot { display: block; padding: .65rem .9rem; border-top: 1px solid var(--ac-border); text-align: center; font-size: .8rem; font-weight: 600; color: var(--ac-accent); text-decoration: none; }
.ac-popover__foot:hover { background: var(--ac-surface-2); }
.ac-popover__empty { padding: 1.2rem .9rem; color: var(--ac-text-muted); font-size: .82rem; text-align: center; }
@media (max-width: 767px) {
    .ac-popover { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100vw; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px -25px rgba(0,0,0,.6); }
    .ac-popover__list { max-height: 55vh; }
}
@media (prefers-reduced-motion: no-preference) { .ac-popover { animation: ac-pop .14s ease-out; } @keyframes ac-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }

/* menu builder: sub-items are indented in the list */
.ac-navlist__item.is-child { margin-left: 1.25rem; width: calc(100% - 1.25rem); }
.ac-navlist__item.is-child::before { content: '↳'; margin-right: .35rem; color: var(--ac-text-subtle); }

/* --- demo mode ------------------------------------------------ */
.ac-demo-banner { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; margin: 0 0 1rem; border-radius: var(--ac-r-md); background: var(--ac-accent-wash); color: var(--ac-text); font-size: .85rem; border: 1px solid color-mix(in srgb, var(--ac-accent) 35%, transparent); }
.ac-demo-banner strong { color: var(--ac-accent); }
html[data-ac-demo] form[method="post"]:not([data-demo-allowed]) button[type="submit"][disabled] { opacity: .55; cursor: not-allowed; }
.ac-demo-lock { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ac-text-muted); margin-left: .6rem; }

/* --- responsive tables: card layout under 768px (no horizontal scroll) --- */
@media (max-width: 767px) {
    .ac-tablewrap--scroll { overflow-x: visible; }
    .ac-table.is-cards, .ac-table.is-cards tbody, .ac-table.is-cards tr, .ac-table.is-cards td { display: block; width: 100%; box-sizing: border-box; }
    .ac-table.is-cards thead { display: none; }
    .ac-table.is-cards tr { border-bottom: 1px solid var(--ac-border); padding: .55rem .8rem; }
    .ac-table.is-cards tr:last-child { border-bottom: 0; }
    .ac-table.is-cards td { display: grid; grid-template-columns: minmax(84px, 38%) 1fr; gap: .5rem; padding: .3rem 0; border: 0; align-items: baseline; }
    .ac-table.is-cards td::before { content: attr(data-label); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ac-text-muted); }
    .ac-table.is-cards td[data-label=""]::before, .ac-table.is-cards td.ac-cell--bare::before { content: none; }
    .ac-table.is-cards td[data-label=""] { grid-template-columns: 1fr; }
    .ac-table.is-cards td.ac-cell--primary { grid-template-columns: 1fr; font-weight: 600; }
    .ac-table.is-cards td.ac-cell--primary::before { content: none; }
    .ac-table.is-cards td.ac-cell--actions { grid-template-columns: 1fr; justify-items: end; }
    .ac-table.is-cards td.ac-cell--actions::before { content: none; }
}

/* --- colour field: native picker + hex text + live swatch ------------------ */
.ac-colorfield { display: grid; grid-template-columns: 44px 1fr 28px; gap: .5rem; align-items: center; }
.ac-colorfield input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--ac-border); border-radius: 8px; background: var(--ac-surface); cursor: pointer; }
.ac-colorfield__swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ac-border); }