/*
 * Etapa 1.17 (E1.17-T2): componentele comune ale temei de panou „ACE Core OS” (ace-design/TEMA-PANOU-ACE-CORE-OS.md,
 * punctele 3-5), făcute o singură dată și folosite de paginile din core/Panels/Ui.php (contractul ui.v1): cifrele,
 * cardurile și rândurile lor, stările, notele, tabelele cu filtrele-pastilă și paginile, butoanele, ferestrele,
 * mesajele cu „Anulează”, bara „Ai schimbări nesalvate” și categoriile meniului lateral.
 *
 * Se încarcă ultima, după ace-core-os.css, în ACPanel și în Panou Client. Culorile vin doar din tokenuri: cele ale
 * skinului (--acs-*, acecore-ui-skin.css) și cele de mai jos, în ambele teme. Sub „Componente” nu e voie nicio culoare
 * scrisă direct (PanelUiComponentsTest), ca o valoare nouă a unui token, sau o temă de panou nouă, să schimbe tot.
 */

:root {
    /* Stage 1.16e (C-CardModul): the Marketplace card's drawn website, its tags and dots, the same in both themes. */
    --acs-product-hue-0: #2563eb;
    --acs-product-soft-0: #bfdbfe;
    --acs-product-hue-1: #7c3aed;
    --acs-product-soft-1: #ddd6fe;
    --acs-product-hue-2: #db2777;
    --acs-product-soft-2: #fbcfe8;
    --acs-product-hue-3: #d97706;
    --acs-product-soft-3: #fde68a;
    --acs-product-hue-4: #0d9488;
    --acs-product-soft-4: #99f6e4;
    --acs-product-hue-5: #16a34a;
    --acs-product-soft-5: #bbf7d0;
    --acs-product-hue-6: #0284c7;
    --acs-product-soft-6: #bae6fd;
    --acs-product-screen: #f8fafc;
    --acs-product-paper: #ffffff;
    --acs-product-line: #e5eaf2;
    --acs-product-line-soft: #eef2f7;
    --acs-product-ink: #0f172a;
    --acs-product-ink-soft: #334155;
    --acs-product-faint: #cbd5e1;
    --acs-product-chrome-pill: #1e293b;
    --acs-product-chrome-text: #94a3b8;
    --acs-product-red: #f87171;
    --acs-product-amber: #fbbf24;
    --acs-product-green: #4ade80;
    --acs-product-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
    --acs-product-tag-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --acs-product-hero-soft: rgba(255, 255, 255, 0.7);
    --acs-product-tag-ok: #15803d;
    --acs-product-tag-new: #2563eb;
    --acs-product-tag-soon: rgba(15, 23, 42, 0.78);
    --acs-product-tag-warn: #b45309;
    --acs-product-tag-bad: #b91c1c;
    --acs-product-dots: rgba(15, 23, 42, 0.62);
    --acs-product-dot: rgba(255, 255, 255, 0.55);
    --acs-product-tick: #38bdf8;
    --acs-product-notify-border: rgba(56, 189, 248, 0.35);
    /* Stage 1.16e (round 1 of the theme chat, P-SetariWebsite-v2): the previews of the site as they look in life, in both themes. */
    --acs-preview-paper: #ffffff;
    --acs-preview-night: #0f172a;
    --acs-preview-on-night: #f8fafc;
    --acs-preview-mist: #eef2f7;
    --acs-preview-bar: #dee1e6;
    --acs-preview-line: #dadce0;
    --acs-preview-ink: #202124;
    --acs-preview-ink-soft: #4d5156;
    --acs-preview-link: #1a0dab;
    /* Stage 1.16e (SectionBar): the line between a chosen pill and its "▾". */
    --acs-on-primary-line: rgba(255, 255, 255, 0.35);
    --acs-toast-bg: #0f172a;
    --acs-toast-text: #f8fafc;
    --acs-toast-link: #7dd3fc;
    --acs-backdrop: rgba(2, 6, 23, 0.62);
}

:root[data-ace-theme="light"],
:root[data-ace-theme="light"] body {
    /* Stage 1.16b (DE-FACUT.md 6.8; the theme's contract point 2): the icon tile. */
    --acs-tile-bg: linear-gradient(135deg, #e0f2fe, #dbeafe);
    --acs-tile-border: #bae6fd;
    --acs-tile-icon: #0369a1;
    --acs-accent: #6d28d9;
    --acs-accent-soft: #ede9fe;
    --acs-neutral: #475569;
    --acs-neutral-soft: #eef2f7;
    /* Stage 1.16f (E1.16f-T4): the console (Ui::console), dark in both themes. */
    --acs-console-bg: #0f172a;
    --acs-console-border: #1e293b;
    --acs-console-text: #e2e8f0;
    --acs-console-muted: #94a3b8;
    --acs-console-in: #7dd3fc;
    --acs-console-bad: #fca5a5;
    --acs-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

:root[data-ace-theme="dark"],
:root[data-ace-theme="dark"] body {
    --acs-tile-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(37, 99, 235, 0.18));
    --acs-tile-border: rgba(56, 189, 248, 0.22);
    --acs-tile-icon: #7dd3fc;
    --acs-accent: #c4b5fd;
    --acs-accent-soft: rgba(139, 92, 246, 0.18);
    --acs-neutral: #cbd5e1;
    --acs-neutral-soft: rgba(148, 163, 184, 0.14);
    --acs-console-bg: #020617;
    --acs-console-border: rgba(148, 163, 184, 0.2);
    --acs-console-text: #e2e8f0;
    --acs-console-muted: #94a3b8;
    --acs-console-in: #7dd3fc;
    --acs-console-bad: #fca5a5;
    --acs-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Componente */

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Butoanele: toate pastile; principalul e gradientul temei (ace-core-os.css), unul singur pe ecran. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--acs-btn-h);
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--acs-radius-pill);
    font: 600 var(--acs-fs) var(--acs-font);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
/* Stage 1.16c (DE-FACUT.md 0b.9): the big button of a page's main step (Ui::button 'size' => 'lg'). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-lg {
    min-height: 48px;
    padding: 0 26px;
    font-size: var(--acs-fs);
}
/* Stage 1.16c (DE-FACUT.md 0b.9): the foot of "Previzualizarea arhivei": "Parola ta", then "Instalează" and "Renunță la arhivă". */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-import-foot {
    display: grid;
    gap: var(--acs-space-4);
    justify-items: start;
    margin-top: var(--acs-space-5);
    padding-top: var(--acs-space-5);
    border-top: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-import-foot > :not(.ace-c-actions) {
    width: min(100%, 420px);
}
/* Stage 1.16c (DE-FACUT.md 0b.2): a short list in a card's row ("Mediu de test": what it does), and its switch under the rows. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-plain-list {
    display: grid;
    gap: var(--acs-space-1);
    margin: var(--acs-space-3) 0;
    padding-left: var(--acs-space-5);
    color: var(--acs-muted);
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-test-mode-form {
    margin-top: var(--acs-space-4);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-inline-form {
    display: inline;
    margin-left: var(--acs-space-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-page:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-toggle:focus-visible {
    outline: 2px solid var(--acs-primary);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn .ace-c-icon svg {
    width: 18px;
    height: 18px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-secondary {
    border-color: var(--acs-border-strong);
    background: transparent;
    color: var(--acs-text);
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-accent {
    border-color: transparent;
    background: var(--acs-primary-soft);
    color: var(--acs-primary-text);
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-text {
    padding: 0 10px;
    border-color: transparent;
    background: transparent;
    color: var(--acs-primary-text);
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-danger {
    border-color: transparent;
    background: var(--acs-danger-solid);
    color: var(--acs-white);
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-icon {
    width: 40px;
    padding: 0;
    border-color: var(--acs-border-strong);
    background: transparent;
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-secondary:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-icon:hover {
    border-color: var(--acs-primary);
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Butoanele care trimit un formular, dar nu sunt principalul: tema face orice buton de trimitere din pagină albastru;
   aici își păstrează felul (aceeași specificitate, încărcat după). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-secondary[type="submit"],
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-secondary[type="submit"]:hover {
    border-color: var(--acs-border-strong);
    background: transparent;
    color: var(--acs-text);
    box-shadow: none;
    filter: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-text[type="submit"],
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-text[type="submit"]:hover {
    border-color: transparent;
    background: transparent;
    color: var(--acs-primary-text);
    box-shadow: none;
    filter: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-accent[type="submit"],
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form button.ace-c-btn.ace-c-btn.is-accent[type="submit"]:hover {
    border-color: transparent;
    background: var(--acs-primary-soft);
    color: var(--acs-primary-text);
    box-shadow: none;
    filter: none;
}

/* Cifrele mari de sus. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-stats {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--acs-space-4);
    margin: 0 0 var(--acs-space-5);
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-stats > li {
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile {
    display: grid;
    align-content: start;
    gap: 6px;
    height: 100%;
    padding: var(--acs-space-5);
    color: var(--acs-text);
    text-decoration: none;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] a.ace-c-tile:hover {
    border-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-label {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-value {
    color: var(--acs-text);
    font-size: var(--acs-fs-page);
    font-weight: 600;
    line-height: 1.1;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-note {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-ok { color: var(--acs-success); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-warn { color: var(--acs-warning); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-bad { color: var(--acs-danger); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-info { color: var(--acs-info); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-violet { color: var(--acs-accent); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-note.is-gray { color: var(--acs-neutral); }
/* Stage 1.16b (DE-FACUT.md 6.8): the icon tile (Ui::tile), the theme's plate: its gradient, its border, the icon in the theme's blue;
   in a tone when a state needs one; 32, 40 or 48 px. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 1px solid var(--acs-tile-border, var(--acs-border));
    border-radius: 12px;
    background: var(--acs-tile-bg, var(--acs-primary-soft));
    color: var(--acs-tile-icon, var(--acs-primary-text));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon svg {
    width: 20px;
    height: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-sm {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-sm svg {
    width: 16px;
    height: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-lg {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-ok { border-color: transparent; background: var(--acs-success-soft); color: var(--acs-success); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-warn { border-color: transparent; background: var(--acs-warning-soft); color: var(--acs-warning); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-bad { border-color: transparent; background: var(--acs-danger-soft); color: var(--acs-danger); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-violet { border-color: transparent; background: var(--acs-accent-soft); color: var(--acs-accent); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile-icon.is-gray { border-color: transparent; background: var(--acs-neutral-soft); color: var(--acs-neutral); }

/* Stage 1.16b (DE-FACUT.md 6.8; P-Pagini "Mai multe acțiuni"): the "⋯" menu of a row or a card (Ui::rowMenu): a round button of
   38 px with a border, its list under it on the right. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more {
    position: relative;
    display: inline-block;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    color: var(--acs-muted);
    list-style: none;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more > summary::-webkit-details-marker {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more > summary:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more[open] > summary {
    border-color: var(--acs-border-strong);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: grid;
    gap: 2px;
    width: max-content;
    min-width: 220px;
    max-width: min(300px, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-surface);
    box-shadow: var(--acs-shadow-strong);
}
/* Stage 1.16e: open, it floats over the page (ace-panel-ui.js places it), so no table or card that clips cuts it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-menu.is-floating {
    position: fixed;
    right: auto;
    z-index: 60;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-menu form {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--acs-row-h);
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--acs-text);
    font: inherit;
    font-size: var(--acs-fs);
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item:hover:not(:disabled),
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item:focus-visible {
    background: var(--acs-surface-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item.is-bad {
    color: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item:disabled {
    color: var(--acs-muted);
    background: transparent;
    cursor: default;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-note {
    margin: 4px 0 0;
    padding: 8px 12px 4px;
    border-top: 1px solid var(--acs-border);
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    line-height: 1.45;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-more-item svg {
    width: 16px;
    height: 16px;
}

/* Stage 1.16b (DE-FACUT.md 6.8): a list of boxes to tick (Ui::checkList): its name above, each box with its words and a line under
   them, in two or three columns on a wide screen. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks > legend {
    margin: 0 0 8px;
    padding: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks-hint {
    margin: -4px 0 8px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks > ul {
    display: grid;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-cols-2 > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-cols-3 > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 40px;
    padding: 8px 4px;
    color: var(--acs-text);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-check strong {
    display: block;
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-check small {
    display: block;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks[hidden] {
    display: none;
}
/* Side by side and small, in a table's cell (the companies or the categories a permission applies to). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-inline > legend {
    margin-bottom: 4px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-inline > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-inline .ace-c-check {
    align-items: center;
    min-height: 32px;
    padding: 2px 0;
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-inline .ace-c-check strong {
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks:disabled .ace-c-check {
    color: var(--acs-muted);
    cursor: default;
}
/* A long list in a dialog scrolls inside it (the rights of a key). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-fields .ace-c-checks > ul {
    max-height: 280px;
    overflow-y: auto;
}
@media (max-width: 760px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-cols-2 > ul,
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-checks.is-cols-3 > ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Cardurile: aceeași înălțime pe un rând (decizia 46), unul sub altul pe telefon. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: stretch;
    gap: var(--acs-space-5);
    margin: 0 0 var(--acs-space-5);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card {
    display: flex;
    flex-direction: column;
    gap: var(--acs-space-4);
    min-width: 0;
    margin: 0 0 var(--acs-space-5);
    padding: var(--acs-space-5) 22px;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid > .ace-c-card {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head.has-icon {
    justify-content: flex-start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head.has-icon > div:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head h2 {
    margin: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs-title);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head p {
    margin: 4px 0 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-actions,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-actions,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acs-space-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-actions {
    justify-content: flex-end;
}
/* Stage 1.16e (round 5, Eduard: Roluri, Backup): the quiet red button, a word red at its text and edge, never a red disc with an X; in a
   row's actions it comes first, so the row's main button ("Editează", "Vezi", "Restaurează") is the last one and stands at the same place
   on every row, with or without "Șterge". */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-danger.is-quiet {
    border-color: color-mix(in srgb, var(--acs-danger) 45%, transparent);
    background: transparent;
    color: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-btn.is-danger.is-quiet:hover {
    background: var(--acs-danger-soft);
}
/* (In the actions' own row, or in a wrapper of a page's: Roluri's.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-actions :is(.ace-c-btn.is-danger, form:has(> .ace-c-btn.is-danger), form:has(> button.is-danger)) {
    order: -1;
}

/* Rândurile unui card: numele în stânga, valoarea în dreapta. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows {
    container-type: inline-size;
    display: grid;
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--acs-space-4);
    padding: var(--acs-space-3) 0;
    border-top: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row:first-child {
    padding-top: 0;
    border-top: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dt {
    display: grid;
    gap: 2px;
    /* Stage 1.16e (round 1 of the theme chat, A4): a word never breaks in the middle; only a word longer than the whole line (an email
       address) breaks, at its end. Where the row is narrow, the name goes above its value (below). */
    overflow-wrap: break-word;
    color: var(--acs-text);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dt small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--acs-space-2);
    margin: 0;
    color: var(--acs-text);
    text-align: end;
}
/* A long state ("nu a plecat (data, motivul)") goes on more lines inside its column instead of spilling over the row's name. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd > .acp-pill {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Stările, ca pastile mici. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-pill.ace-c-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-pill.is-muted {
    background: var(--acs-neutral-soft);
    color: var(--acs-neutral);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-pill.is-accent {
    background: var(--acs-accent-soft);
    color: var(--acs-accent);
}

/* Notele: informație, atenție, eroare și ce vede doar cel care privește (violet). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note {
    margin: 0 0 var(--acs-space-5);
    padding: var(--acs-space-3) var(--acs-space-4);
    border-radius: var(--acs-radius);
    background: var(--acs-info-soft);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card .ace-c-note {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note p {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note strong {
    display: block;
    margin-bottom: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-ok { background: var(--acs-success-soft); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-warn { background: var(--acs-warning-soft); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-bad { background: var(--acs-danger-soft); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-violet { background: var(--acs-accent-soft); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-gray { background: var(--acs-neutral-soft); }

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-empty {
    display: grid;
    justify-items: center;
    gap: var(--acs-space-3);
    padding: 28px var(--acs-space-5);
    border: 1px dashed var(--acs-border-strong);
    border-radius: var(--acs-radius);
    color: var(--acs-muted);
    text-align: center;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-empty p {
    margin: 0;
}

/* Listele: filtrele, tabelul, nota de jos, paginile. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-list {
    display: grid;
    gap: 14px;
    min-width: 0;
}
/* Stage 1.17 (E1.17-T20): the table scrolls in its box on a phone; the hidden label of the actions' column ("Acțiuni", placed absolutely)
   stays in it too, instead of widening the page. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table-wrap {
    position: relative;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table th.is-end,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table td.is-end {
    text-align: end;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table thead th {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table tbody th {
    color: var(--acs-text);
    font-weight: 600;
    text-align: start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table td,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table tbody th {
    font-size: var(--acs-fs);
    vertical-align: middle;
}
/* Stage 1.16b (18 Oct; VERIFICARE-1-LA-1.md 5): the selection of a list: the box before the row's name and in the head, then under the
   table the bar "N selectate" with what can be done with the rows ticked. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-pick {
    display: inline-flex;
    align-items: center;
    gap: var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-pick input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--acs-primary);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-pick-none {
    flex: 0 0 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acs-space-2) var(--acs-space-3);
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--acs-border);
    background: var(--acs-primary-soft);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-selection[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-selection-space {
    flex: 1 1 auto;
}
@media (pointer: coarse) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-pick input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-selection {
        position: sticky;
        bottom: 0;
        z-index: 20;
    }
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-list-foot {
    margin: 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}

/* Stage 1.17 (E1.17-T6): a field of a form in a dialog: its name, the box, a short line under it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field {
    display: grid;
    gap: 6px;
}
/* Stage 1.16e (P-SetariWebsite-v2): 16 px between a field (its help) and the next one's name. Fields side by side in a row (the menu
   editor's row, a form's row) have the row's gap instead (the review: every field after the first sat 16 px lower). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field + .ace-c-field {
    margin-top: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.website-menu-row, .website-menu-add, .website-form-row, .ace-p-form-row, .ace-people-prof-fields) > .ace-c-field + .ace-c-field {
    margin-top: 0;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > label,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > .ace-c-field-label {
    font-size: var(--acs-fs);
    font-weight: 600;
    color: var(--acs-text);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > input,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > select,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius);
    background: var(--acs-surface);
    color: var(--acs-text);
    font: inherit;
    box-sizing: border-box;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > input:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > select:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > textarea:focus-visible {
    outline: 2px solid var(--acs-focus);
    outline-offset: 1px;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}

/* Stage 1.16h (26 Oct): a field marked wrong (Ui::field "error"): the box and the message in the core's danger colour. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field.is-invalid > :is(input, select, textarea) {
    border-color: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field > small.ace-c-field__error {
    color: var(--acs-danger);
    font-weight: 600;
}

/* Stage 1.17 (E1.17-T6): a tab's red counter (the conflicts, the alerts), white on the mock-ups' red. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab__badge.is-bad,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab.is-active .ace-ui-tab__badge.is-bad {
    background: var(--acs-danger-solid);
    color: var(--acs-white);
}

/* Stage 1.17 (E1.17-T5): a cell of a table with its value (bold, or muted) and a short line under it, as the mock-ups write them. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-cell {
    display: grid;
    gap: 2px;
    min-width: 0;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-cell.is-strong > span {
    font-weight: 600;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-cell.is-muted > span,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-cell > small {
    color: var(--acs-muted);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-cell > small {
    font-size: var(--acs-fs-xs);
    overflow-wrap: anywhere;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acs-space-2);
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* (Stage 1.16e, round 6, the theme chat: a filter is a field of the scale, 32; 44 on a phone.) */
    height: var(--acs-field-h);
    min-height: var(--acs-field-h);
    padding: 0 8px 0 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter:focus-within {
    border-color: var(--acs-primary);
    box-shadow: var(--acs-focus);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter select,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter input {
    min-height: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--acs-text);
    font: 600 var(--acs-fs) var(--acs-font);
    box-shadow: none;
    outline: 0;
}
/* (Its field fills the filter, inside its edge; stronger than the content's fields, which are the filter's own height.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content .ace-c-filter :is(select, input) {
    height: calc(var(--acs-field-h) - 2px);
    min-height: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter select option {
    background: var(--acs-surface);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter.is-search {
    padding: 0 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter.is-search input {
    min-width: 180px;
    font-weight: 400;
}
:root.ace-js[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters-apply {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: var(--acs-btn-h);
    padding: 0 10px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-pill);
    color: var(--acs-text);
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-page.is-current {
    border-color: transparent;
    background: var(--primary);
    color: var(--primary-text);
}

/* Ferestrele (dialog): colțuri 24, „Rămân aici” și butonul care face ce spune. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 24px;
    background: var(--acs-surface);
    color: var(--acs-text);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog::backdrop {
    background: var(--acs-backdrop);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-form {
    display: grid;
    gap: var(--acs-space-4);
    margin: 0;
    padding: var(--acs-space-6);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-head {
    display: flex;
    align-items: center;
    gap: var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-head h2 {
    margin: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs-section);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-text p {
    margin: 0 0 8px;
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-fields {
    display: grid;
    gap: var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--acs-space-2);
}

/* Mesajele de jos (toast): pastilă închisă, la mijloc, cu „Anulează” când se poate. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast-region {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 6000;
    display: grid;
    justify-items: center;
    gap: var(--acs-space-2);
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast {
    display: inline-flex;
    align-items: center;
    gap: var(--acs-space-3);
    margin: 0 0 var(--acs-space-4);
    padding: 8px 10px 8px 18px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-toast-bg);
    color: var(--acs-toast-text);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast-region .ace-c-toast {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast p,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast form {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-toast .ace-c-btn.is-text,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content form .ace-c-toast button.ace-c-btn.ace-c-btn.is-text[type="submit"] {
    min-height: 36px;
    color: var(--acs-toast-link);
}

/* Bara „Ai schimbări nesalvate”: lipită jos, cât timp formularul are schimbări. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved {
    position: sticky;
    bottom: 16px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--acs-space-3);
    margin: var(--acs-space-5) 0 0;
    padding: 8px 10px 8px 20px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-toast-bg);
    color: var(--acs-toast-text);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved p {
    margin: 0 auto 0 0;
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved .ace-c-btn.is-text {
    color: var(--acs-toast-link);
}

/* Categoriile meniului lateral (deciziile 51-53): numele duce la prezentarea categoriei, săgeata deschide sau strânge
   doar submeniul; două ținte de cel puțin 44 px; alegerea se ține minte pe cont. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category {
    display: grid;
    gap: 2px;
    margin: 0 0 10px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-head {
    display: flex;
    align-items: center;
    gap: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: var(--acs-radius);
    color: var(--acs-sidebar-text);
    font: 600 var(--acs-fs) var(--acs-font);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-toggle:hover {
    background: var(--acs-sidebar-hover);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link[aria-current="page"] {
    background: var(--acs-sidebar-hover);
    color: var(--acs-white);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-tile {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--acs-accent-soft);
    color: var(--acs-accent);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-tile svg {
    width: 18px;
    height: 18px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--acs-sidebar-muted);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category.is-open .acp-nav-category-toggle svg {
    transform: rotate(90deg);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-body {
    display: grid;
    gap: 2px;
    margin: 0 0 0 24px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--acs-sidebar-line);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-body[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-nav-category-link > span:not(.acp-nav-category-tile),
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-nav-category-toggle {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-nav-category-body {
    margin: 0;
    padding: 0;
    border-left: 0;
}

@media (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row {
        flex-direction: column;
        align-items: flex-start;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd {
        justify-content: flex-start;
        text-align: start;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved {
        border-radius: 20px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head {
        flex-direction: column;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter.is-search input {
        min-width: 0;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-toggle svg {
        transition: none;
    }
}

/* Stage 1.17 (E1.17-T18): a switch (on / off) of a settings card, with its short line under it (Setări → ACE Core OS și Hub). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch span {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--acs-border-strong);
    transition: background 0.15s ease;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--acs-white);
    transition: transform 0.15s ease;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch input:checked + span {
    background: var(--acs-primary);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch input:checked + span::after {
    transform: translateX(20px);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch input:focus-visible + span {
    box-shadow: var(--acs-focus);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch input:disabled + span {
    opacity: 0.5;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-switch + small {
    display: block;
    margin-top: 4px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}

/* Stage 1.17 (the night of 17 Oct): the red banner "Termină configurarea", above every page of ACPanel, for the Owner (FinishSetup). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-finish-setup {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
}

/* Stage 1.16 (the night of 17→18 Oct): inside a filter's pill the list and the search have no border of their own (the content's general
   rule for fields, with its :not()s, came first and drew a second border inside the pill). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content:not(.is-webpanel-content) .ace-c-filter select,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content:not(.is-webpanel-content) .ace-c-filter input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Stage 1.16 (the night of 17→18 Oct; 2-TEMA-ACPANEL.md point 3.7, C-Sidebar): the sections' and categories' names in capitals of 12 px;
   the one of the page open is the main blue, white text; in MARKETPLACE and ADMINISTRARE the entries stand right under the section. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link {
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link[aria-current="page"] {
    background: var(--acs-primary-gradient);
    color: var(--acs-on-primary);
    box-shadow: var(--acs-primary-shadow);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link[aria-current="page"] .acp-nav-category-tile {
    background: var(--acs-on-primary-soft);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-group.is-flat > .acp-nav-submenu {
    display: grid;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}/* Stage 1.16 (C-Sidebar): the pages of Media, Utilizatori, Conexiuni, Setări and Sistem stand where the other entries' names start
   (they have no icon of their own). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-group.is-pages .acp-nav-submenu a,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-group.is-pages .acp-nav-submenu .acp-nav-empty {
    padding-left: 38px;
}
/* Stage 1.16 (P-Panou): the short line above a page's title (the Panou's day). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__text .ace-ui-page-header__eyebrow {
    margin: 0 0 4px;
    color: var(--acs-primary-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Stage 1.16 (the night of 17→18 Oct; P-Panou): the Panou's cards: a head with its count or link, the ring of a share, the checks
   with their dots, the disk's bar, the tasks with their button, the activity with its initials, the first steps. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--acs-space-2);
    margin-bottom: var(--acs-space-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-head h2 {
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-score {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: var(--acs-space-2) 0 var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-score strong {
    display: block;
    color: var(--acs-text);
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-score small {
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-ring {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--acs-primary) calc(var(--value, 0) * 1%), var(--acs-surface-2) 0);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-ring > span {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--acs-surface);
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-checks,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-checks li,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps li,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--acs-border);
    border-radius: 0;
    background: transparent;
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-checks li:last-child,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps li:last-child,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks li:last-child {
    border-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-checks li strong {
    color: var(--acs-muted);
    font-weight: 400;
    text-align: right;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps li,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks li {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps li div,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks li div {
    display: grid;
    gap: 2px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps small,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-tasks small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-steps li.is-done span {
    color: var(--acs-muted);
    text-decoration: line-through;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-dot.is-ok {
    background: var(--acs-success);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-dot.is-warning {
    background: var(--acs-warning);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-dot.is-error {
    background: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--acs-primary-soft);
    color: var(--acs-primary-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-disk {
    display: grid;
    gap: 6px;
    margin: var(--acs-space-3) 0;
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-disk > div {
    display: flex;
    justify-content: space-between;
    gap: var(--acs-space-2);
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-disk strong {
    color: var(--acs-text);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-bar {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-bar > span {
    display: block;
    width: calc(var(--value, 0) * 1%);
    height: 100%;
    border-radius: inherit;
    background: var(--acs-primary-gradient);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-more summary {
    color: var(--acs-primary-text);
    cursor: pointer;
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-activity > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-activity > div:last-child {
    border-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-activity p {
    margin: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-activity > div > span:last-child {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-activity .ace-ui-panou-initials {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--acs-primary);
    color: var(--acs-on-primary);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-checks li {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 48%);
}
/* Under 1281 px the Panou's widgets flow by acpanel.css's rules (helper B, P-Panou-Telefon): four columns from 1025 px, two under it. */
/* Stage 1.16 (P-Panou-Edit): a widget's size, S, M or L, the chosen one in the main blue. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-widget-sizes {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-widget-sizes button {
    min-width: 28px;
    border-radius: var(--acs-radius-pill);
    color: var(--acs-muted);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-widget-sizes button[aria-pressed="true"] {
    background: var(--acs-primary-gradient);
    color: var(--acs-on-primary);
}
/* Stage 1.16 (P-Panou-Edit): the gallery's three groups take the whole row, each with its name. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-widget-library .acp-widget-library__group {
    grid-column: 1 / -1;
    margin: var(--acs-space-2) 0 0;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-widget-library > p.acp-muted {
    grid-column: 1 / -1;
    margin: 0;
}
/* Stage 1.16 (C-Topbar, P-BaraSus-Cont): the active company, inside the account's menu (the language is in the top bar, 1.16b). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-company-switch {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-company-switch select {
    width: 100%;
}
/* Stage 1.16: a table's first cell of a row (th scope="row") reads like the other cells, not like the column headers. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-table tbody th {
    color: var(--acs-text);
    font-size: inherit;
    font-weight: 600;
    letter-spacing: 0;
    text-align: start;
    text-transform: none;
}

/* Stage 1.16b (18 Oct; ace-design/verificare-1.16b/diferente-comune.md): the shared pieces as every P- board draws them. */
/* The header of a page: the title 26/700, the description 15 px, the buttons pills of 44 px (the main one in the theme's gradient),
   lined up with the description; the tabs 40 px, 14 px, with their numbers. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header {
    gap: var(--acs-space-4);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header h1 {
    font-size: var(--acs-fs-page);
    font-weight: 600;
    letter-spacing: -0.02em;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__text p {
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-crumbs [aria-current="page"] {
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__main {
    align-items: flex-end;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header .ace-ui-action {
    /* (Stage 1.16e, round 6: the scale's button, as every button: 30, 44 on a phone.) */
    min-height: var(--acs-btn-h);
    gap: 8px;
    padding: 0 14px 0 12px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    box-shadow: none;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header .ace-ui-action:not(.has-icon) {
    padding: 0 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header .ace-ui-action.is-primary {
    border-color: transparent;
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header .ace-ui-action .acp-svg-icon svg {
    width: 18px;
    height: 18px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tabs {
    border-radius: 18px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab {
    min-height: var(--acs-tab-h);
    padding: 0 12px;
    border-radius: var(--acs-radius-pill);
    color: var(--acs-sidebar-text);
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab.is-active {
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab .acp-svg-icon svg {
    width: 16px;
    height: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-tab.is-active .ace-ui-tab__badge:not(.is-bad) {
    background: var(--acs-on-active-soft);
    color: var(--acs-on-primary);
}
/* Stage 1.16b (P-Setari): a piece of the page on the header's right, before its buttons. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acs-space-2);
    margin-left: auto;
}

/* The big numbers: compact, the name on top, the number with its note on the same line. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: start;
    gap: 6px 8px;
    padding: 15px 18px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-label {
    flex: 1 0 100%;
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-value {
    font-size: var(--acs-fs-page);
    font-weight: 600;
    letter-spacing: -0.02em;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-note {
    font-size: var(--acs-fs-xs);
    font-weight: 600;
}

/* The notes: the round "i" on the left in the note's colour, a thin line around. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--ace-note-fg, var(--acs-info)) 28%, transparent);
    border-radius: 16px;
    font-size: var(--acs-fs);
    line-height: 1.5;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-ok { --ace-note-fg: var(--acs-success); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-warn { --ace-note-fg: var(--acs-warning); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-bad { --ace-note-fg: var(--acs-danger); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-violet { --ace-note-fg: var(--acs-accent); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note.is-gray { --ace-note-fg: var(--acs-neutral); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note__icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--ace-note-fg, var(--acs-info));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-note__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* A table in a card sits flush in it: the head and the rows set apart by lines only, no box in the box. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card .ace-c-table-wrap,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card .acp-table-wrap,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-card .acp-table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* A choice of one among a few: pills inside a pill (Ui::segmented), radio buttons underneath. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-segment-bg);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg label {
    position: relative;
    display: inline-flex;
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--acs-btn-h);
    padding: 0 14px;
    border-radius: var(--acs-radius-pill);
    color: var(--acs-muted);
    /* (Stage 1.16e, round 5, Eduard: "Unde e emailul tău?" was very small: a choice has the panel's text size.) */
    font-size: var(--acs-fs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg span:hover {
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg input:checked + span {
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg input:focus-visible + span {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 1px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-seg input:disabled + span {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stage 1.16b (18 Oct; DE-FACUT.md 0.6, C-Sidebar 1:1): the menu as the board draws it. The logo and "ACE Core OS" lead to the Panou,
   the site's card under them; the sections' names in capitals of 12 px with plain line icons in the theme's blue (no tiles), a thin line
   between sections; a group's name 14 px / 500 with its 20 px icon in a 42 px pill (open: a light ground, the blue icon), its pages
   smaller and muted, set in, with the thin line on the left, the chosen one on a light ground and bold; the entries of their own
   (Rapoarte, Clienți, MARKETPLACE's) in 42 px pills, the chosen one in the theme's gradient; at the bottom, the version's card. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar {
    padding: 20px 14px 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 0 8px 18px;
    border-bottom: 0;
    background: transparent;
    color: var(--acs-text);
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand .acp-logo-mark {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand .acp-logo-mark img {
    display: block;
    width: 36px;
    height: 36px;
    filter: none;
}
/* Stage 1.16b (18 Oct; bug 11): the old drawn mark's bars (acpanel.css, ::before and the spans) no longer show behind the A, and the A has
   no glow a box could cut: it is the vector A, whole on both themes. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand .acp-logo-mark::before,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand .acp-logo-mark::after {
    content: none;
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand strong {
    display: block;
    color: var(--acs-text);
    font-size: var(--acs-fs-title);
    font-weight: 600;
    letter-spacing: -0.01em;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-brand strong span {
    display: inline;
    color: var(--acs-sidebar-text);
    font-size: inherit;
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm {
    position: relative;
    margin: 0 0 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm > summary,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] div.acp-firm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--acs-border);
    border-radius: 16px;
    background: var(--acs-sidebar-firm);
    color: var(--acs-text);
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm > summary {
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm > summary::-webkit-details-marker {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm > summary:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__initials {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--acs-firm-initials);
    color: var(--acs-white);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__text strong,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__text strong {
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__text small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__switch {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--acs-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 40;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--acs-border);
    border-radius: 16px;
    background: var(--acs-surface);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__list button {
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
    text-align: start;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__list button:hover {
    background: var(--acs-sidebar-hover);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm__list button[aria-current="true"] {
    background: var(--acs-sidebar-sub-active);
    font-weight: 600;
}

/* The sections (PANOU, MARKETPLACE, ADMINISTRARE) and the Hub's category. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category {
    gap: 2px;
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category + .acp-nav-category::before {
    content: "";
    display: block;
    height: 1px;
    margin: 8px 12px 6px;
    background: var(--acs-sidebar-line);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-link {
    gap: 12px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 14px;
    color: var(--acs-sidebar-muted);
    font: 600 var(--acs-fs-sm)/1.2 var(--acs-font);
    letter-spacing: 0.06em;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-tile {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--acs-sidebar-icon);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-tile svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.9;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-link[aria-current="page"],
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-link[aria-current="page"] .acp-nav-category-tile {
    background: none;
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-link[aria-current="page"] {
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-toggle {
    width: 34px;
    color: var(--acs-sidebar-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-body {
    gap: 2px;
    margin: 0;
    padding: 0;
    border-left: 0;
}

/* A group (Favorite, Module, Website, Media…): its name in a 42 px pill. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group {
    gap: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group-toggle {
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--acs-radius-pill);
    color: var(--acs-sidebar-text);
    font: 400 var(--acs-fs)/1.2 var(--acs-font);
    letter-spacing: 0;
    text-transform: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group-toggle > span {
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group-toggle > .acp-svg-icon {
    color: var(--acs-sidebar-icon-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group-toggle > .acp-svg-icon svg,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single > .acp-svg-icon svg,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a > .acp-svg-icon svg {
    width: 20px;
    height: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.open > .acp-nav-group-toggle {
    background: var(--acs-sidebar-group-open);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.open > .acp-nav-group-toggle > .acp-svg-icon {
    color: var(--acs-sidebar-icon);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.open > .acp-nav-group-toggle .acp-nav-chevron {
    transform: rotate(90deg);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--acs-warning);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-dot + .acp-nav-chevron {
    margin-left: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) > .acp-nav-submenu {
    gap: 0;
    margin: 2px 0 6px 22px;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu a,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu .acp-nav-empty {
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--acs-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu a:hover {
    background: var(--acs-sidebar-hover);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu a.active {
    background: var(--acs-sidebar-sub-active);
    box-shadow: none;
    color: var(--acs-text);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu a.is-add {
    color: var(--acs-primary-text);
    font-weight: 400;
}

/* Stage 1.16b (18 Oct; bug 15, C-Sidebar): every submenu row's 16 px icon (ACE Icons), in the row's colour (grey), white on the row
   you are on (the row's text turns white); the groups keep their 20 px blue icon. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu a,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group:not(.is-flat) .acp-nav-submenu .acp-nav-empty,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category:not(.acp-nav-section) > .acp-nav-category-body a {
    gap: 10px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-row-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: currentColor;
    opacity: 0.85;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar a.active > .acp-nav-row-icon,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar a:hover > .acp-nav-row-icon {
    opacity: 1;
}

/* The entries of their own (Rapoarte, Clienți, Catalog, Sarcini) and MARKETPLACE's: 42 px pills with their icon. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a {
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: var(--acs-radius-pill);
    color: var(--acs-sidebar-text);
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single > .acp-svg-icon,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a > .acp-svg-icon {
    color: var(--acs-sidebar-icon-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single.active,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a.active {
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single.active > .acp-svg-icon,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a.active > .acp-svg-icon {
    color: var(--acs-on-primary);
}

/* At the bottom: the version waiting to be installed. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--acs-border);
    border-radius: 18px;
    background: var(--acs-sidebar-firm);
}
/* Stage 1.16j (L-U): "×" closes the card until a newer version; the applications' updates as a line under it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__close-form {
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--acs-radius-pill);
    background: transparent;
    color: var(--acs-muted);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__close:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__close:focus-visible {
    background: var(--acs-surface);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__apps {
    grid-column: 1 / -1;
    color: var(--acs-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__apps:hover {
    text-decoration: underline;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--acs-sidebar-tile-border);
    border-radius: 10px;
    background: var(--acs-sidebar-tile);
    color: var(--acs-sidebar-icon);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__tile svg {
    width: 16px;
    height: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__text strong {
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__text small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__open {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    color: var(--acs-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-update-card__open:hover {
    border-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-firm,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-update-card {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav {
    gap: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-tile > .acp-svg-icon {
    width: 20px;
    height: 20px;
    color: inherit;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group-toggle > .acp-svg-icon,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single > .acp-svg-icon,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-group.is-flat .acp-nav-submenu a > .acp-svg-icon {
    width: 20px;
    height: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-single {
    margin: 0;
}

/* Stage 1.16b (18 Oct; C-Topbar, P-BaraSus-Cont 1:1): the top bar in one row of 70 px: the search (a 44 px pill, the magnifier, "Ctrl K"),
   ✉ 🔔 ⚡ as 44 px circles with their numbers (blue, red, amber, ringed in the bar's colour); then + Adaugă (the main blue when the page
   has no main button of its own), the assistant, the theme, the language and the account (the avatar with its green dot, the name and
   the role). The ☰ only where the menu is a drawer (a tablet, a phone). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 0 32px;
    border-bottom: 1px solid var(--acs-sidebar-line);
    background: var(--acs-topbar-bg);
    backdrop-filter: blur(14px);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-menu-toggle {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search {
    display: flex;
    flex: 0 1 400px;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 400px;
    height: 44px;
    padding: 0 7px 0 16px;
    border: 1px solid var(--acs-search-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    box-shadow: none;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search:focus-within {
    border-color: var(--acs-primary);
    box-shadow: var(--acs-focus);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-search > .acp-svg-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search input:focus,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search input:focus-visible {
    outline: none;
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search kbd {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
    color: var(--acs-sidebar-text);
    font: 600 var(--acs-fs) var(--acs-font);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-bell-button {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 50%;
    background: var(--acs-surface);
    box-shadow: none;
    color: var(--acs-sidebar-text);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-bell-button > .acp-svg-icon {
    width: 20px;
    height: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header details[open] > .acp-bell-button {
    border-color: var(--acs-primary);
    background: var(--acs-topbar-open);
    box-shadow: var(--acs-focus);
}
/* Stage 1.16e (round 6, Eduard: "ca la Apple"): the badge of an icon of the top bar (the bell, the messages, the automations), one piece:
   Apple's red, the number white, 600, 11 px; 18 px high, a circle for one digit and a pill for more ("99+" over 99); at the icon's top
   right corner, a little over its edge, not over its drawing; a thin edge of the bar's colour, no thick white ring. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-bell__count {
    position: absolute;
    top: 0;
    left: calc(50% + 6px);
    right: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-badge-bg);
    box-shadow: 0 0 0 1.5px var(--acs-header);
    color: var(--acs-white);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    transform: none;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-ai-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    box-shadow: none;
    color: var(--acs-text);
    font: 600 var(--acs-fs) var(--acs-font);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary {
    padding: 0 16px 0 14px;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary::-webkit-details-marker {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"]:not(:has(.ace-ui-page-header__actions .ace-ui-action.is-primary)) .acp-header .ace-ui-quick-add > summary {
    border-color: transparent;
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-ai-button {
    justify-content: center;
    width: 44px;
    padding: 0;
    border-color: var(--acs-sidebar-tile-border);
    background: var(--acs-sidebar-tile);
    color: var(--acs-sidebar-icon);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-chevron {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 44px;
    min-height: 44px;
    padding: 0 14px 0 4px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    box-shadow: none;
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-avatar,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head .acp-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--acs-firm-initials);
    box-shadow: none;
    color: var(--acs-white);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-avatar__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--acs-online);
    box-shadow: 0 0 0 2px var(--acs-header);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 150px;
    line-height: 1.2;
    text-align: start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-copy strong {
    overflow: hidden;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-copy small {
    overflow: hidden;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The account's menu (P-BaraSus-Cont): 320 px, the account on top, rows with an icon and a line, "Ieși din cont" in red. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-menu {
    width: 320px;
    padding: 8px;
    border: 1px solid var(--acs-border);
    border-radius: 20px;
    background: var(--acs-surface);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 8px 8px 12px;
    border-bottom: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head strong {
    color: var(--acs-text);
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head small {
    overflow: hidden;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    text-overflow: ellipsis;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__head a {
    padding: 0;
    color: var(--acs-primary-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__label {
    display: block;
    padding: 6px 10px 2px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > a,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > .acp-user-menu__report,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > summary,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__logout button,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .acp-user-menu__company {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 6px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > a:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > .acp-user-menu__report:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > summary:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__logout button:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .acp-user-menu__company:hover {
    background: var(--acs-sidebar-hover);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > a > span,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > summary > span {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu > a small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .acp-svg-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--acs-sidebar-icon-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > summary {
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > summary::-webkit-details-marker {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu .ace-ui-problem > form {
    position: static;
    display: grid;
    gap: 8px;
    width: auto;
    margin: 4px 0 6px;
    padding: 10px;
    border: 1px solid var(--acs-border);
    border-radius: 14px;
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__company i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--acs-border-strong);
    border-radius: 50%;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__company[aria-pressed="true"] i {
    border: 5px solid var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__logout {
    margin: 6px 0 0;
    padding: 6px 0 0;
    border-top: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__logout button,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-user-menu__logout button .acp-svg-icon {
    color: var(--acs-danger);
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary > span:not(.acp-svg-icon) {
    display: inline;
}
/* Narrower screens: the account keeps only its avatar; on a tablet or a phone the ☰ opens the menu. */
@media (max-width: 1360px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-copy,
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-button .acp-header-chevron {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-user-button {
        padding: 0 3px;
    }
}
@media (max-width: 1180px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary > span:not(.acp-svg-icon),
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary .acp-header-chevron,
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search kbd {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-quick-add > summary {
        justify-content: center;
        width: 44px;
        padding: 0;
    }
}
@media (max-width: 980px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header {
        padding: 0 16px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-menu-toggle {
        display: inline-flex;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search {
        min-width: 120px;
    }
}

/* Stage 1.16b (18 Oct; P-Meniu-Telefon, P-Panou-Telefon): on a tablet or a phone the menu is a drawer: its X on top, the site's card, the
   theme with its words and the language, the groups folded, the account at the bottom with "Ieși". On a phone it covers the screen and
   the top bar is one dark row: ☰, "ACE Core OS", the magnifier, ✉, 🔔; the page's main button floats at the bottom right. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-close,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-prefs,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-brand {
    display: none;
}
@media (max-width: 980px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar {
        width: 300px;
        overflow-y: auto;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-close {
        position: absolute;
        top: 14px;
        right: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--acs-border);
        border-radius: 50%;
        background: var(--acs-surface);
        color: var(--acs-text);
        cursor: pointer;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-close .acp-svg-icon {
        width: 20px;
        height: 20px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-prefs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 14px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-prefs .acp-theme-toggle.has-words {
        display: grid;
        flex: 1 1 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-prefs .acp-theme-toggle.has-words button {
        gap: 6px;
        height: 40px;
        font-size: var(--acs-fs);
        font-weight: 400;
        letter-spacing: 0;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 4px 0;
        border-top: 1px solid var(--acs-sidebar-line);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account .acp-avatar {
        position: relative;
        display: inline-flex;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--acs-firm-initials);
        color: var(--acs-white);
        font-size: var(--acs-fs-sm);
        font-weight: 600;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account__name {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account__name strong {
        color: var(--acs-text);
        font-size: var(--acs-fs);
        font-weight: 600;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account__name small {
        overflow: hidden;
        color: var(--acs-muted);
        font-size: var(--acs-fs-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account form {
        margin: 0;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-drawer-account button.acp-drawer-account__out {
        height: 40px;
        padding: 0 16px;
        border: 1px solid var(--acs-border-strong);
        border-radius: var(--acs-radius-pill);
        background: transparent;
        box-shadow: none;
        color: var(--acs-text);
        font: 600 var(--acs-fs) var(--acs-font);
        cursor: pointer;
    }
    /* The theme and the language are in the drawer (Stage 1.16b, E1.16b-VERIFICARE.md 13: Panoul Client's too, as ACPanel's). */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-theme-toggle,
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-language-switch {
        display: none;
    }
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar {
        width: 100vw;
        max-width: 100vw;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header {
        gap: 6px;
        min-height: 60px;
        padding: 0 12px;
        border-bottom-color: var(--acs-phonebar-line);
        background: var(--acs-phonebar-bg);
        backdrop-filter: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-menu-toggle,
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-bell-button {
        border-color: var(--acs-phonebar-line);
        background: transparent;
        color: var(--acs-phonebar-text);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .ace-ui-bell__count {
        box-shadow: 0 0 0 1.5px var(--acs-phonebar-bg);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-brand {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--acs-phonebar-text);
        font-size: var(--acs-fs-title);
        font-weight: 600;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left {
        flex: 0 0 auto;
        gap: 6px;
    }
    /* The search is the magnifier; touched, it opens across the bar. */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search {
        position: relative;
        flex: 0 0 44px;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        padding: 0;
        border-color: var(--acs-phonebar-line);
        background: transparent;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search > .acp-svg-icon {
        color: var(--acs-phonebar-text);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search input {
        position: absolute;
        inset: 0;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search:focus-within {
        position: absolute;
        top: 8px;
        right: 12px;
        left: 12px;
        z-index: 30;
        width: auto;
        max-width: none;
        padding: 0 12px;
        border-color: var(--acs-primary);
        background: var(--acs-surface);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left .acp-search:focus-within > .acp-svg-icon {
        color: var(--acs-muted);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header .acp-search:focus-within input {
        position: static;
        opacity: 1;
        cursor: text;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"]:not([data-ace-panel="cpanel"]) .acp-header [data-topbar-automation],
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"]:not([data-ace-panel="cpanel"]) .acp-header .acp-header-actions {
        display: none;
    }
    /* Panoul Client's bar is one dark row too (Stage 1.16b, E1.16b-VERIFICARE.md 13): ☰, the site's company, then 🔔 and the account
       (its picture or initials); the theme and the language are in the drawer. */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-panel="cpanel"] .acp-header > .acp-header-left {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-panel="cpanel"] .acp-header > .acp-header-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 6px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-panel="cpanel"] .acp-header .acp-user-copy {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-panel="cpanel"] .acp-header .acp-user-button {
        padding: 0;
        border-color: var(--acs-phonebar-line);
        background: transparent;
    }
    /* The page's main button floats at the bottom right. */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__actions .ace-ui-action.is-primary {
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 900;
        min-height: 52px;
        padding: 0 20px 0 16px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__actions .ace-ui-action.is-primary.has-icon > span:last-child {
        display: inline;
    }
}
@media (max-width: 980px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] a.acp-drawer-account__name {
        text-decoration: none;
    }
}
/* The bar's two halves keep their own width: the search shrinks first, the buttons never leave the screen. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header > .acp-header-left {
    flex: 1 1 auto;
    min-width: min-content;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header > .acp-header-actions {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header > .acp-header-left {
        flex: 0 0 auto;
        width: auto;
    }
}

/* Stage 1.16b (18 Oct; C-Culoare, P-SetariWebsite-Culori): the colour field (the code, the square of the colour on its right) and its
   palette (ace-color.js): the colours ready as dots, the square of the shade and the hue, the code with "Copiază", R G B, the site's
   colours, the effect with its second colour and speed, and how the colour reads on a dark and a light ground. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-color__box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 240px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field.ace-c-color .ace-c-color__box > input {
    width: 100%;
    min-height: var(--acs-field-h);
    padding: 0 52px 0 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-surface);
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field.ace-c-color .ace-c-color__box > input[aria-invalid="true"] {
    border-color: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-color__swatch {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-color__swatch:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-color__error {
    color: var(--acs-danger);
    font-size: var(--acs-fs-xs);
}
/* Stage 1.16b (18 Oct; bug 15, C-Iconite): "Alege iconița" (Ui::iconPicker): the search, the categories, the grid, the chosen icon
   and "Folosește iconița"; the narrow variant (the builder's inspector) has no frame, 6 columns and applies on the spot. */
:root[data-ace-theme] body .ace-c-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--acs-border);
    border-radius: 24px;
    background: var(--acs-surface);
    color: var(--acs-text);
}
:root[data-ace-theme] body .ace-c-icons.is-compact {
    max-width: 312px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
:root[data-ace-theme] body .ace-c-icons .ace-icon {
    flex-shrink: 0;
}
:root[data-ace-theme] body .ace-c-icons__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
:root[data-ace-theme] body .ace-c-icons__head[hidden] {
    display: none;
}
:root[data-ace-theme] body .ace-c-icons__head strong {
    flex-grow: 1;
    font-size: var(--acs-fs-title);
    font-weight: 600;
}
:root[data-ace-theme] body .ace-c-icons__head span {
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body .ace-c-icons__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
    color: var(--acs-muted);
}
:root[data-ace-theme] body .ace-c-icons__search:focus-within {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__search input[data-ace-icons-q][type="search"]:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) {
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
    outline: none;
}
:root[data-ace-theme] body .ace-c-icons__search input::-webkit-search-cancel-button {
    display: none;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--acs-neutral-soft);
    color: var(--acs-text);
    cursor: pointer;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__clear[hidden] {
    display: none;
}
:root[data-ace-theme] body .ace-c-icons__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
:root[data-ace-theme] body .ace-c-icons.is-compact .ace-c-icons__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__cat {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 30px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-neutral-soft);
    box-shadow: none;
    color: var(--acs-text);
    font: 600 var(--acs-fs-sm) var(--acs-font);
    white-space: nowrap;
    cursor: pointer;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__cat span {
    margin-left: 6px;
    font-weight: 400;
    opacity: 0.75;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__cat[aria-pressed="true"] {
    border-color: transparent;
    background: var(--acs-primary-gradient);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body .ace-c-icons__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 50px;
    align-content: start;
    gap: 6px;
    height: 264px;
    margin: 0 -4px;
    padding: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
}
:root[data-ace-theme] body .ace-c-icons.is-compact .ace-c-icons__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 44px;
    height: 196px;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 12px;
    background: var(--acs-surface-2);
    box-shadow: none;
    color: var(--acs-text);
    cursor: pointer;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__option[hidden] {
    display: none;
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__option:hover {
    border-color: var(--acs-border-strong);
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__option[aria-selected="true"] {
    border-color: transparent;
    background: var(--acs-primary-gradient);
    box-shadow: var(--acs-primary-shadow);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__option:focus-visible,
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__cat:focus-visible,
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__clear:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body .ace-c-icons__empty {
    margin: 0;
    padding: 28px 12px;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    line-height: 1.5;
    text-align: center;
}
:root[data-ace-theme] body .ace-c-icons__empty[hidden] {
    display: none;
}
:root[data-ace-theme] body .ace-c-icons__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--acs-border);
}
:root[data-ace-theme] body .ace-c-icons__preview {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--acs-tile-border);
    border-radius: 14px;
    background: var(--acs-tile-bg);
    color: var(--acs-tile-icon);
}
:root[data-ace-theme] body .ace-c-icons.is-compact .ace-c-icons__preview {
    width: 40px;
    height: 40px;
}
:root[data-ace-theme] body .ace-c-icons__now {
    display: grid;
    flex-grow: 1;
    min-width: 0;
}
:root[data-ace-theme] body .ace-c-icons__now strong,
:root[data-ace-theme] body .ace-c-icons__now small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body .ace-c-icons__now strong {
    font-size: var(--acs-fs);
    font-weight: 600;
}
:root[data-ace-theme] body .ace-c-icons__now small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body .ace-c-icons .ace-c-icons__foot .ace-c-btn {
    flex-shrink: 0;
}
:root[data-ace-theme] body .ace-c-icons__note {
    margin: 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    line-height: 1.5;
}
/* Stage 1.16b (18 Oct; bug 15): in a window the picker has no frame of its own (the window is its frame). */
:root[data-ace-theme] body .ace-c-dialog .ace-c-icons:not(.is-compact) {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
@media (max-width: 520px) {
    :root[data-ace-theme] body .ace-c-icons:not(.is-compact) {
        padding: 16px;
    }
    :root[data-ace-theme] body .ace-c-icons:not(.is-compact) .ace-c-icons__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 44px;
    }
    :root[data-ace-theme] body .ace-c-icons:not(.is-compact) .ace-c-icons__foot {
        flex-wrap: wrap;
    }
    :root[data-ace-theme] body .ace-c-icons:not(.is-compact) .ace-c-icons__foot .ace-c-btn {
        width: 100%;
    }
}
/* Stage 1.16b (18 Oct; bug 17 point 3, C-Paletar): the palette as Windows' "Edit colors": the spectrum, the new and the current colour, the
   brightness bar and the code on the right; the site's colours; "Culori de bază" and "Culorile mele"; at the bottom the eyedropper,
   "Anulează" and "Alege culoarea". */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color {
    position: absolute;
    z-index: 1300;
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--acs-border);
    border-radius: 22px;
    background: var(--acs-surface);
    box-shadow: var(--acs-shadow-strong);
    color: var(--acs-text);
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__head strong {
    font-size: var(--acs-fs-title);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__for {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__close {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 50%;
    background: var(--acs-surface-2);
    box-shadow: none;
    color: var(--acs-muted);
    font: 600 var(--acs-fs) var(--acs-font);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 22px minmax(0, 228px);
    gap: 14px;
    align-items: stretch;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__area {
    position: relative;
    min-height: 220px;
    border-radius: 14px;
    cursor: crosshair;
    touch-action: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__compare {
    display: grid;
    grid-template-rows: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--acs-border);
    border-radius: 12px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__compare span {
    display: block;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__light {
    position: relative;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    cursor: ns-resize;
    touch-action: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__area:focus-visible,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__light:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__knob {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid var(--acs-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--acs-on-active-soft);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__side {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__label {
    display: grid;
    gap: 6px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__code {
    display: flex;
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-color__code input,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-color__chan input {
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-surface);
    color: var(--acs-text);
    font: 400 var(--acs-fs) var(--acs-font);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-color__code input {
    flex: 1 1 auto;
    width: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-color__code input[aria-invalid="true"] {
    border-color: var(--acs-danger);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__copy,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__eye {
    flex-shrink: 0;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-surface-2);
    box-shadow: none;
    color: var(--acs-text);
    font: 600 var(--acs-fs) var(--acs-font);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__eye {
    border-radius: var(--acs-radius-pill);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-c-seg {
    max-width: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__chans {
    display: grid;
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__chan {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--acs-text);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color .ace-color__chan input {
    width: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__error {
    margin: 0;
    color: var(--acs-danger);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__site {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__sets {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
    gap: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__basic,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__mine,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__effects {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__mine-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__add {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--acs-border);
    border-radius: 10px;
    background: var(--acs-surface-2);
    box-shadow: none;
    color: var(--acs-text);
    font: 600 var(--acs-fs-title) var(--acs-font);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__add:disabled {
    opacity: 0.5;
    cursor: default;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__dots.is-basic {
    display: grid;
    grid-template-columns: repeat(12, 24px);
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__dots.is-mine {
    display: grid;
    grid-template-columns: repeat(6, 24px);
    gap: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__dot {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--acs-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--acs-border-strong);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__dots.is-site button.ace-color__dot {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__dot.is-free {
    border: 1px dashed var(--acs-border-strong);
    background: transparent;
    box-shadow: none;
    cursor: default;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color button.ace-color__dot[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__note {
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__space {
    flex: 1 1 auto;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__top {
        grid-template-columns: minmax(0, 1fr) 36px 20px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__side {
        grid-column: 1 / -1;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__sets {
        grid-template-columns: minmax(0, 1fr);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-color__dots.is-basic {
        grid-template-columns: repeat(8, 24px);
    }
}
/* Stage 1.16b (C-Sidebar-Hub): the Hub's category: the A icon, its pages without icons, set in on the thin line, the chosen one on a
   light ground. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category-tile > img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category:not(.acp-nav-section) > .acp-nav-category-body {
    margin: 2px 0 2px 22px;
    padding-left: 14px;
    border-left: 1px solid var(--acs-border);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category:not(.acp-nav-section) > .acp-nav-category-body a {
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--acs-radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    font-weight: 400;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar .acp-nav-category:not(.acp-nav-section) > .acp-nav-category-body a.active {
    background: var(--acs-sidebar-sub-active);
    color: var(--acs-text);
    font-weight: 600;
}
/* ✉ 🔔 ⚡ are 44 px circles: their lists (open or closed) never widen the bar. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-header-left > details {
    flex: 0 0 44px;
    width: 44px;
    contain: inline-size;
}
/* Stage 1.16b (P-BaraSus-Cont): the account's picture in the round of the bar, the account menu and the drawer. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-avatar.has-photo {
    background: var(--acs-surface-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-avatar.has-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* Stage 1.16e (DE-FACUT.md 5d; C-WebsiteBara, P-Website-Bara, P-Pagini-v2, P-SetariWebsite-v2): the bar of a section (Website, Marketplace,
   Setări, Sistem), always on top: pills of 40 px in a card, the one you are in in the theme's blue; "▾" opens the list of its subpages
   (on a click), the open one ticked, each with its number; "Vezi site-ul" at its end. Under the title, the submenu of the pill you are in:
   text, no box and no icon, a blue line under the chosen one, the number next to each, every label in view (on a phone it scrolls
   sideways inside itself, never the page). The spaces: 24 px under the bar, 20 px under the title, 16 px between the submenu and what
   follows. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header.has-section-bar {
    gap: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0 0 24px;
    padding: 6px;
    border: 1px solid var(--acs-border);
    border-radius: 18px;
    background: var(--acs-surface);
    box-shadow: var(--acs-card-shadow, none);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__pills {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__pills::-webkit-scrollbar {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 999px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active {
    background: var(--primary);
    box-shadow: var(--primary-shadow);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--acs-tab-h);
    padding: 0 12px;
    border-radius: 999px;
    color: var(--acs-sidebar-text, var(--acs-text));
    font-size: var(--acs-fs);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.has-drop .ace-section-bar__pill {
    padding-right: 10px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item:not(.is-active) .ace-section-bar__pill:hover {
    background: var(--acs-primary-soft);
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active .ace-section-bar__pill,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active .ace-section-bar__drop {
    color: var(--primary-text);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__pill .acp-svg-icon svg {
    width: 16px;
    height: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__badge,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__count,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--acs-neutral-soft);
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    line-height: 1;
}
/* What waits (the sum the menu shows): the theme's blue; a total stays grey. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__badge,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__count.is-waiting,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav__count.is-waiting {
    background: var(--acs-primary);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active .ace-section-bar__badge {
    background: var(--acs-on-primary);
    color: var(--acs-primary-hover);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active .ace-section-bar__count {
    background: var(--acs-primary-hover);
    color: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: var(--acs-tab-h);
    margin: 0;
    padding: 0 4px 0 0;
    border: 0;
    border-left: 1px solid var(--acs-border);
    border-radius: 0 999px 999px 0;
    background: transparent;
    color: var(--acs-sidebar-text, var(--acs-text));
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__item.is-active .ace-section-bar__drop {
    border-left-color: var(--acs-on-primary-line);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__drop svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s ease;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__drop[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__menu {
    position: absolute;
    z-index: 40;
    top: 54px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 300px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid var(--acs-border);
    border-radius: 16px;
    background: var(--acs-surface);
    box-shadow: var(--acs-shadow-strong);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__menu[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border-radius: 10px;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__option:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__option:focus-visible {
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__option.is-active {
    background: var(--acs-primary-soft);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__option > span:nth-child(2) {
    flex-grow: 1;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__check {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__site {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: var(--acs-tab-h);
    margin-left: auto;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--acs-sidebar-text, var(--acs-text));
    font-size: var(--acs-fs);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__site:hover {
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__site .acp-svg-icon svg {
    width: 16px;
    height: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .has-section-bar .ace-ui-page-header__main {
    margin: 8px 0 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav {
    grid-column: 1 / -1;
    margin: 20px 0 0;
    border-bottom: 1px solid var(--acs-border);
    overflow-x: auto;
    scrollbar-width: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav::-webkit-scrollbar {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav ul {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav li {
    flex-shrink: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--acs-tab-h);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--acs-muted);
    /* (Stage 1.16e, round 6, the scale: a tab's height and the text's size, as the page's tabs.) */
    font-size: var(--acs-fs);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav__link:hover {
    color: var(--acs-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-subnav__link.is-active {
    border-bottom-color: var(--acs-primary);
    color: var(--acs-text);
    font-weight: 600;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar {
        margin-bottom: 16px;
    }
}

/* Stage 1.16e (E1.16d-CERERE.md part 3; C-Sidebar-Simplu, P-Ajutor): AJUTOR, one row at the bottom of the menu, and the help centre's page:
   the search, the chapters on the left, the chapter open on the right ("Primii pași": five steps, each with "Mergi acolo"). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-help {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 0 12px;
    border-radius: 14px;
    color: var(--acs-sidebar-text);
    font-size: var(--acs-fs);
    font-weight: 400;
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-help:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-help.is-active {
    background: var(--acs-primary-soft);
    color: var(--acs-text);
}
/* Stage 1.16e (P-Ajutor): the header as a hero: a card, everything centred, the search a pill. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__main.is-hero {
    justify-content: center;
    padding: 32px 24px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    background: var(--acs-primary-soft);
    text-align: center;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__main.is-hero .ace-ui-page-header__text {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-search {
    width: min(100%, 440px);
    margin: 8px 0 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-search label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: calc(var(--acs-field-h) + 2px);
    padding: 0 18px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--acs-field-h);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--acs-text);
    outline: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-search label:focus-within {
    border-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-room {
    container-type: inline-size;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapters {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 4px 10px;
    border-radius: 12px;
    color: var(--acs-text);
    font-size: var(--acs-fs);
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter > span:nth-child(2) {
    flex-grow: 1;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter.is-active {
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter.is-active {
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter__count {
    flex-shrink: 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter__soon {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acs-border-strong);
}
/* "Mergi acolo": a pill, the words in the theme's blue, the arrow after them. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-go {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2);
    color: var(--acs-primary-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-go:hover {
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-go .acp-svg-icon svg {
    width: 14px;
    height: 14px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-write a {
    color: var(--acs-primary-text);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-kicker {
    margin: 0 0 4px;
    color: var(--acs-primary-text);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-body h2 {
    margin: 0 0 8px;
    font-size: var(--acs-fs-page);
    font-weight: 600;
    letter-spacing: -0.01em;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-body > p {
    margin: 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs);
    line-height: 1.6;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-body > p.ace-help-kicker {
    margin: 0 0 4px;
    color: var(--acs-primary-text);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--acs-border);
    border-radius: 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-step__number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-text);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-step__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-step__text small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-write {
    margin: 20px 0 0;
    text-align: right;
}
@media (max-width: 760px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-step {
        flex-wrap: wrap;
    }
}

/* Stage 1.16e: the menu as a column: its rows grow, Ajutor and the version's card stay at the bottom. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar {
    display: flex;
    flex-direction: column;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar > .acp-nav {
    flex: 1 0 auto;
    align-content: start;
    justify-content: flex-start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .sidebar-collapsed .acp-nav-help span {
    display: none;
}
/* Stage 1.16e (E1.16d-CERERE.md 3d, "spații egale", PagesLayoutProbeTest): the blocks of a page stand 20 px apart, whatever the piece
   (a card, a grid, a note, a list, a page's own block), and the page's header 16 px over what follows; the pieces' own margins go (a
   card's 20 px came on top of the gap: 34 px here, 14 px there). The last piece inside a block adds nothing under it either.
   A form with only its hidden fields (its fields are in the cards, form="…") takes no row. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content {
    gap: 20px;
}
/* (the class twice: a zone's own rule for one of its blocks, as long, comes after this file and would win) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content > * {
    margin-top: 0;
    margin-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content > * > :is(.ace-c-card, .acp-card, .ace-c-grid, .ace-c-products, .ace-c-stats, .ace-c-note, .ace-c-list):last-child {
    margin-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content > .ace-ui-page-header {
    margin-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content > form:not(:has(:not(input[type="hidden"]))) {
    display: none;
}

/* Stage 1.16e: "?" in the top bar where there is room for it; on narrower screens Ajutor is the menu's row (the account's menu keeps its
   place on the screen, AcPanelShellTest SH-2). */
@media (max-width: 1279px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-help-button {
        display: none;
    }
}

/* Stage 1.16e (E1.16d-CERERE.md 3c, C-CardModul): the card of Marketplace, a product of a shop: its drawn pictures with the tag and the dots,
   its icon, name, version, price, one line, the number of sites and the button across it. The drawn screens are a website's (light)
   in both themes, as a picture of one is. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    align-items: stretch;
    gap: var(--acs-space-5);
    margin: 0 0 var(--acs-space-5);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product {
    --ace-product-hue: var(--acs-product-hue-0);
    --ace-product-soft: var(--acs-product-soft-0);
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-1 {
    --ace-product-hue: var(--acs-product-hue-1);
    --ace-product-soft: var(--acs-product-soft-1);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-2 {
    --ace-product-hue: var(--acs-product-hue-2);
    --ace-product-soft: var(--acs-product-soft-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-3 {
    --ace-product-hue: var(--acs-product-hue-3);
    --ace-product-soft: var(--acs-product-soft-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-4 {
    --ace-product-hue: var(--acs-product-hue-4);
    --ace-product-soft: var(--acs-product-soft-4);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-5 {
    --ace-product-hue: var(--acs-product-hue-5);
    --ace-product-soft: var(--acs-product-soft-5);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product.is-hue-6 {
    --ace-product-hue: var(--acs-product-hue-6);
    --ace-product-soft: var(--acs-product-soft-6);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__pictures {
    position: relative;
    box-sizing: border-box;
    aspect-ratio: 2 / 1;
    padding: 18px 18px 0;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ace-product-hue) 30%, var(--acs-surface)) 0%, var(--acs-surface-2) 100%);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__picture {
    height: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__picture[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__window {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background: var(--acs-product-screen);
    box-shadow: var(--acs-product-shadow);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__chrome {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 8px;
    background: var(--acs-product-ink);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__chrome i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acs-product-red);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__chrome i:nth-child(2) {
    background: var(--acs-product-amber);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__chrome i:nth-child(3) {
    background: var(--acs-product-green);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__chrome b {
    max-width: 60%;
    margin-left: 8px;
    padding: 1px 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--acs-product-chrome-pill);
    color: var(--acs-product-chrome-text);
    font-size: var(--acs-fs-xs);
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__screen {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 8px 10px;
    overflow: hidden;
    color: var(--acs-product-ink);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__screen.is-phone {
    align-items: center;
    padding-bottom: 0;
    background: color-mix(in srgb, var(--ace-product-hue) 12%, var(--acs-product-screen));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__screen-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__screen-title b {
    overflow: hidden;
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__screen-title i {
    flex: none;
    width: 44px;
    height: 12px;
    border-radius: 999px;
    background: var(--ace-product-hue);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--acs-product-line);
    border-radius: 6px;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    border-top: 1px solid var(--acs-product-line-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row:first-child {
    border-top: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row > i {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ace-product-hue);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row > span {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row b,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini b {
    display: block;
    width: 70%;
    height: 5px;
    border-radius: 3px;
    background: var(--acs-product-ink-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row em,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini em {
    display: block;
    width: 45%;
    height: 4px;
    border-radius: 3px;
    background: var(--acs-product-faint);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row u {
    flex: none;
    width: 16px;
    height: 10px;
    border-radius: 4px;
    background: var(--ace-product-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__row.is-switch u {
    width: 18px;
    border-radius: 999px;
    background: var(--ace-product-hue);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 5px;
    overflow: hidden;
    border: 1px solid var(--acs-product-line);
    border-radius: 6px;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini i {
    height: 26px;
    background: linear-gradient(135deg, var(--ace-product-soft), var(--ace-product-hue));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini b,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__mini em {
    margin: 0 5px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--ace-product-hue), color-mix(in srgb, var(--ace-product-hue) 55%, var(--acs-product-ink)));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__hero b {
    display: block;
    width: 60%;
    height: 7px;
    border-radius: 3px;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__hero em {
    display: block;
    width: 40%;
    height: 4px;
    border-radius: 3px;
    background: var(--acs-product-hero-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__hero u {
    display: block;
    width: 34px;
    height: 10px;
    border-radius: 999px;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__swatches {
    display: flex;
    gap: 4px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__swatches i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--acs-product-line);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__phone {
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    width: 44%;
    height: 100%;
    padding: 6px;
    border: 3px solid var(--acs-product-ink);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    box-shadow: var(--acs-product-tag-shadow);
    color: var(--acs-product-paper);
    font-size: var(--acs-fs-xs);
    font-weight: 600;
    line-height: 24px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag.is-ok {
    background: var(--acs-product-tag-ok);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag.is-new {
    background: var(--acs-product-tag-new);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag.is-soon {
    background: var(--acs-product-tag-soon);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag.is-warn {
    background: var(--acs-product-tag-warn);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__tag.is-bad {
    background: var(--acs-product-tag-bad);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--acs-product-dots);
    transform: translateX(-50%);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__dot {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--acs-product-dot);
    cursor: pointer;
    transition: width 0.15s ease;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__dot::after {
    position: absolute;
    inset: -9px -3px;
    content: "";
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__dot[aria-pressed="true"] {
    width: 18px;
    background: var(--acs-product-paper);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__dot:focus-visible {
    outline: 2px solid var(--acs-product-tick);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__head .ace-c-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__title {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__name {
    margin: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs-title);
    font-weight: 600;
    line-height: 1.35;
    /* (Stage 1.16e, round 5: a package's name on two lines rather than cut with "…" in a narrower card.) */
    white-space: normal;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__name a {
    color: inherit;
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__name a:hover {
    text-decoration: underline;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__sub {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__verified {
    flex: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--acs-product-tick);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__price {
    flex: none;
    color: var(--acs-text);
    font-size: var(--acs-fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__price.is-free {
    color: var(--acs-success);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__text {
    display: -webkit-box;
    min-height: 3em;
    margin: 0;
    overflow: hidden;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__note {
    flex: 1;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions > form {
    display: flex;
    flex: 1 1 0;
    margin: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions > .ace-c-btn,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions > form > .ace-c-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--acs-btn-h);
    border-radius: 999px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions.is-notify .ace-c-btn {
    border-color: var(--acs-product-notify-border);
    background: var(--acs-primary-soft);
    color: var(--acs-primary-text);
}

/* Stage 1.16e (round 1 of the theme chat: A2, A3): a row that scrolls sideways (the section's bar, the submenu, a table's
   window) shows that it does: its edges fade where more is hidden (ace-panel-ui.js marks them is-more-start / is-more-end);
   the pill or the subpage you are in comes into view by itself. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-ace-scroll] {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-ace-scroll]::-webkit-scrollbar {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-ace-scroll].is-more-end {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-ace-scroll].is-more-start {
    -webkit-mask-image: linear-gradient(to left, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to left, black calc(100% - 48px), transparent);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-ace-scroll].is-more-start.is-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}
/* "Vezi site-ul" stays outside the scrolling row; under 1280 px only its eye. */
@media (max-width: 1279px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__site-text {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-section-bar__site {
        padding: 0 12px;
    }
}

/* Stage 1.16e (round 1 of the theme chat, A1; P-Pagini-Telefon): a table whose place is narrower than 800 px becomes a list of cards
   (its first cell the card's title, each other cell a line "column: value", the buttons at the bottom), so no column or button is
   ever cut. The place is measured, not the screen: a table in a narrow card does the same. ":not(#…)" outweighs the tables' own rules. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-table-wrap, .ace-c-table-wrap, .webpanel-table-wrap) {
    container-type: inline-size;
}
@container (max-width: 800px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) {
        display: block;
        width: 100%;
        min-width: 0;
        border: 0;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) thead {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tbody {
        display: grid;
        gap: 10px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px 16px;
        border: 1px solid var(--acs-border);
        border-radius: 16px;
        background: var(--acs-surface);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > :is(td, th) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 12px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        text-align: start;
        white-space: normal;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > :is(td, th):empty {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > td[data-label]::before {
        content: attr(data-label);
        /* (Round 2, 8: the name at the left, the values together at the right, as in the cards' rows.) */
        margin-right: auto;
        color: var(--acs-muted);
        font-size: var(--acs-fs-xs);
        font-weight: 600;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > :is(td, th).is-end {
        justify-content: flex-end;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) .ace-c-row-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}
/* Stage 1.16e (round 1 of the theme chat, A4): a row narrower than 440 px (a card of two on a screen under ~1200) puts its name above its
   value (a field, a switch, buttons); in a card of two at 1440 the name stays beside its field, as on the boards. */
@container (max-width: 440px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd {
        justify-content: flex-start;
        text-align: start;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .website-site-pair) {
        flex: 1 1 100%;
        width: 100%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd > .website-site-pair {
        justify-content: flex-start;
    }
    /* Stacked, a row is one column: its name and its value one under the other, as tall as their words (a zone's row wraps). */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:not(#no-row-wrap) {
        flex-wrap: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:not(#no-row-wrap) > :is(dt, dd) {
        flex: 0 0 auto;
    }
}
/* Stage 1.16e (round 1 of the theme chat, B9): four tiles or four cards stand four on a row, or two and two: never three and one. The room
   is the content's (a named container), not the screen's. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content {
    container: ace-content / inline-size;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(4):last-child)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@container ace-content (max-width: 1000px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(4):last-child)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:where(:has(> :nth-child(4):last-child)) {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Stage 1.16e (round 1 of the theme chat, B10): on a phone the page's main button floats at the bottom right; the page keeps 88 px under its
   end, so the button never covers the last words or the footer (the button floats from 640 px down). */
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"]:not([data-ace-portal]):has(.ace-ui-page-header__actions .ace-ui-action.is-primary) .acp-footer {
        padding-bottom: 88px;
    }
    /* (Stage 1.16e, T2's probe: Panou Client's frame has no footer, so the page itself keeps the 88 px under its last words.) */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"]:not([data-ace-portal]):has(.ace-ui-page-header__actions .ace-ui-action.is-primary) .acp-content:not(:has(~ .acp-footer)) {
        padding-bottom: 88px;
    }
}
/* Stage 1.16e (round 1 of the theme chat, B11): on Panou no word is cut with "…": a tile's small line ("săptămâna asta", the company's
   name) and a time in "Activitate recentă" ("acum 43 de minute") go on two lines when they must. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-stat .ace-ui-panou-stat__foot {
    flex-wrap: wrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-panou-stat .ace-ui-panou-stat__foot small,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-activity-list.preview strong,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-activity-list.preview span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
/* (PHP 8.5 suite, 25 Oct: "acum 49 de minute" keeps its words together, so it takes the room it needs; the title gives way.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-activity-list.preview span {
    max-width: none;
    text-align: end;
}
/* Stage 1.16e (round 1 of the theme chat, B12): "Ce am de făcut azi" with nothing to do: its tick, the words and "Deschide sarcinile", in the
   middle of the card. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] [data-dashboard-widget="today"] {
    display: flex;
    flex-direction: column;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-today-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 8px;
    text-align: center;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-today-empty p {
    max-width: 36ch;
    margin: 0;
    color: var(--acs-muted);
}
/* Stage 1.16e (round 1 of the theme chat, B13, P-Pagini-v2): the filters' row: the search up to 380 px, a list as wide as its words; on a
   phone the search takes the row and the lists share the next one, half and half. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter.is-search {
    /* (Round 2, 5: from 200 px, so the search and two lists stay on one row at 1024 and 768.) */
    flex: 1 1 200px;
    min-width: 0;
    max-width: 380px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter.is-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filter select {
    width: auto;
    min-width: 0;
    max-width: 100%;
}
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter.is-search {
        flex: 1 1 100%;
        max-width: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) select {
        flex: 1 1 auto;
        width: 100%;
    }
}
/* Stage 1.16e (round 1 of the theme chat, C; P-Marketplace-Simplu): the search beside the title; "Deschide" a full pill without a border. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product-search {
    width: min(100%, 360px);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product__actions > .ace-c-btn.is-secondary {
    border-color: transparent;
    background: var(--acs-neutral-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-product[hidden] {
    display: none;
}
/* Stage 1.16e (P-Pagini-v2; round 6, the theme chat: the scale's media row, 48, not the board's 67): the pages' rows, with their sketch. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .website-pages-card .ace-c-table tbody > tr > :is(td, th) {
    padding-top: var(--acs-space-1);
    padding-bottom: var(--acs-space-1);
}
/* Stage 1.16e (P-Ajutor; after the help's own rules, so it wins). Under 900 px of room: the chapters above the chapter open, a row of pills that scrolls. */
@container (max-width: 900px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-nav {
        padding: 6px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapters {
        flex-direction: row;
        gap: 4px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapters > li {
        flex: 0 0 auto;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter {
        min-height: 40px;
        padding: 0 14px 0 6px;
        border-radius: var(--acs-radius-pill);
        white-space: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter .ace-c-tile-icon {
        width: 30px;
        height: 30px;
        border-radius: var(--acs-radius-pill);
    }
}
/* The help's search: one pill, its field without the content's own frame. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-search input:not(#no-help-frame) {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-layout > .ace-c-card {
    margin: 0;
}
/* Stage 1.16e (round 1 of the theme chat, B13; round 3, 1): on a phone a list's name ("Tip", "Ordonare") stands small above its choice,
   inside the pill, so the choice shows whole and three "Toate" side by side still say which is which. */
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        min-height: 52px;
        padding: 6px 10px 6px 14px;
        border-radius: var(--acs-radius);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) > span:first-child {
        color: var(--acs-muted);
        font-size: var(--acs-fs-xs);
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) select {
        width: 100%;
        min-height: 0;
        padding: 0;
    }
}
/* Stage 1.16e (Eduard, 24 Oct): "?" beside the page's title, a small round button to the page's help. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__title > h1 {
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__help {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface);
    color: var(--acs-primary-text);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__help:hover {
    border-color: var(--acs-primary);
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__help .acp-svg-icon svg {
    width: 16px;
    height: 16px;
}
/* Stage 1.16e (Eduard, 24 Oct): on a settings page "Salvează" is the bar that comes with the first change (Ui::unsaved: "Renunță" puts the
   values back, leaving with changes asks first); the page's own "Salvează" stays only for a browser without scripts (<noscript>).
   The bar stands at the bottom of the screen, never over the end of the page (it keeps its place after the content), whole at 390 px. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved {
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved {
        bottom: 8px;
        padding: 8px 10px 8px 14px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unsaved p {
        flex: 1 1 100%;
    }
}
/* Stage 1.16e (PagesLayoutProbeTest): seven cards stand four and three, nine three by three, never one alone on the last row (Setări's
   seven groups, a report's nine sources); on a narrower content two by two, the last one across the row (the review: 2 + 2 + 2 + 1). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(7):last-child)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(9):last-child)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container ace-content (max-width: 1000px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(7):last-child), :has(> :nth-child(9):last-child)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* (Only where these two columns are the grid's: a grid of tiles or cards counts its own columns.) */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-stats, .ace-c-grid):where(:has(> :nth-child(7):last-child), :has(> :nth-child(9):last-child)):not(:is(.ace-p-tiles, .ace-p-cards) > *) > :last-child {
        grid-column: 1 / -1;
    }
}
/* Stage 1.16e (the review; PagesLayoutProbeTest 9): a page's plain grid of cards (300 px each) with an odd number of them, on a content of two
   columns: the last one across the row, not alone at half width (Backup's three cards, Securitate's). */
@container ace-content (min-width: 620px) and (max-width: 939.98px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-content, .ace-p-zone) > .ace-c-grid:where(:has(> :last-child:nth-child(odd))) > :last-child:not(:first-child) {
        grid-column: 1 / -1;
    }
}
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:where(:has(> :nth-child(7):last-child), :has(> :nth-child(9):last-child)) {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* A row whose value is a field: the field takes the larger half (it was squeezed to 158 px beside a long name). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row:has(> dd > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > dt {
    flex: 1 1 40%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row:has(> dd > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)) > dd {
    flex: 1 1 60%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row > dd > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
}
/* Stage 1.16e (PagesLayoutProbeTest): a card's title and its button share the head while they fit; else the button goes under the
   title, which never breaks a word ("Subdo / menii"). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head:not(.has-icon) {
    flex-wrap: wrap;
}
/* Rows laid out as two columns (a page's grid rows, as the settings' cards): under 400 px the name goes above its value, as the other rows. */
@container (max-width: 400px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:not(#no-row-columns) {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:not(#no-row-columns) > dd {
        justify-content: flex-start;
        text-align: start;
    }
}
/* A chapter holds its own hidden words ("în curând" for a reader), so they scroll with it instead of widening the page. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-help-chapter {
    position: relative;
}
/* Stage 1.16e (round 2 photos): on a phone a header's button with words ("Invită mai mulți") or its search goes under the title, whole on
   one line, the search across the row; a header with only icon buttons keeps them beside the title. */
@media (max-width: 760px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__main:is(:has(> .ace-ui-page-header__aside), :has(> .ace-ui-page-header__actions > :not(.ace-ui-action.has-icon):not(.ace-ui-action.is-primary)), :has(> .ace-ui-page-header__actions > .ace-ui-action.is-primary[form])) {
        flex-wrap: wrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__main:is(:has(> .ace-ui-page-header__aside), :has(> .ace-ui-page-header__actions > :not(.ace-ui-action.has-icon):not(.ace-ui-action.is-primary)), :has(> .ace-ui-page-header__actions > .ace-ui-action.is-primary[form])) > .ace-ui-page-header__text {
        flex: 1 1 100%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__aside {
        flex: 1 1 auto;
        min-width: 0;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__aside > .ace-c-product-search {
        width: 100%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__actions > .ace-ui-action:not(.has-icon) {
        white-space: nowrap;
    }
}
/* Stage 1.16e (round 2 of the theme chat, 5): a search with three or more lists that do not fit one row (Clienți, Media at 1024 and 768)
   stand two by two, never three and one alone; with an even number of lists the search takes the first row. On a phone the search takes
   its row, the lists two by two, an odd last one across its row. */
@container ace-content (max-width: 1000px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)) > .ace-c-filter {
        min-width: 0;
        max-width: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)) > .ace-c-filter select {
        flex: 1 1 auto;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)):has(> label.ace-c-filter:last-of-type:nth-of-type(odd)) > .ace-c-filter.is-search {
        grid-column: 1 / -1;
    }
}
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)) > .ace-c-filter.is-search {
        grid-column: 1 / -1;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters:has(> label.ace-c-filter:nth-of-type(4)):has(> label.ace-c-filter:last-of-type:nth-of-type(even)) > label.ace-c-filter:last-of-type {
        grid-column: 1 / -1;
    }
}
/* Stage 1.16e (round 3 of the theme chat, 3): a table drawn as cards: a column of long text (Ui::table [label, 'wide']: Verificări's
   "Rezultatul") and a value with its explanation always stand under their name, at the left, as on a phone; a short value stays at the
   right. */
@container (max-width: 800px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > td[data-label]:is(.is-wide, :has(> .ace-c-cell > small)) {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > td[data-label]:is(.is-wide, :has(> .ace-c-cell > small))::before {
        margin-right: 0;
    }
    /* A field in a cell (Setări → Legal's lists): its name above, the field across the card, 44 px, as in the other forms. */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > td[data-label]:has(> :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea)) {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):not(#no-table-cards) tr > td[data-label]:has(> :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea))::before {
        margin-right: 0;
    }
}
/* The fields of a list to fill in (Setări → Legal: date colectate, servicii externe, fișiere cookie) have the common field's look. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-list-table :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
    width: 100%;
    min-width: 120px;
    min-height: var(--acs-field-h);
    padding: 10px 12px;
    border: 1px solid var(--acs-border-strong);
    border-radius: var(--acs-radius);
    background: var(--acs-surface);
    color: var(--acs-text);
    font: inherit;
    box-sizing: border-box;
}
/* Setări → Legal: each list of the profile is a section of the card with its title inside (not on a frame's edge), after a line; so
   it is not read as part of "Mai multe opțiuni" above it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] #legal-profile .ace-ui-fieldset {
    display: block;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--acs-border);
    border-radius: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] #legal-profile .ace-ui-fieldset > legend {
    float: left;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    color: var(--acs-text);
    font-size: var(--acs-fs-title);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] #legal-profile .ace-ui-fieldset > legend + * {
    clear: both;
}

/* =====================================================================================================================================
   Stage 1.16e (round 5, Eduard, 25 Oct: "totul pare cam mare", "nici aici nu sunt egale"): the compact scale (B) and the common measures
   of the pieces, only from the tokens of acecore-ui-skin.css (--acs-fs*, --acs-row-h, --acs-field-h, --acs-btn-h, --acs-card-*). A page's
   stylesheet keeps its layout, never its own sizes.
   ===================================================================================================================================== */
/* The content: the panel's text size; on a wide screen it stops at the boards' width (nothing stretches over 1920 or 2560 px). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--acs-content-max);
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content {
    gap: var(--acs-card-gap);
}
/* The titles: the page's 24, a card's 16, a card's line under it 13. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header h1 {
    font-size: var(--acs-fs-page);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-card-head, .acp-card-head) :is(h2, h3) {
    font-size: var(--acs-fs-title);
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-head p {
    font-size: var(--acs-fs-sm);
}
/* The cards: 20 px inside, 16 px between them; on a row all of the same height, their foot (the date, the buttons, "Deschide") at the
   bottom, so it stands at the same height on the whole row. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card {
    padding: var(--acs-card-pad);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid {
    align-items: stretch;
    gap: var(--acs-card-gap);
    margin-bottom: var(--acs-card-gap);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid > :is(.ace-c-card, .acp-card) {
    height: 100%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card > .ace-c-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card > .ace-c-card-body > :last-child:is(.ace-c-actions, .ace-c-card-foot) {
    margin-top: auto;
}
/* The buttons: 34 px on a computer, 44 on a phone (the token changes there); their text 13. */
/* (In the content and its windows; the top bar keeps its own measures.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-content, .ace-c-dialog) .ace-c-btn {
    min-height: var(--acs-btn-h);
    padding: 0 14px;
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-content, .ace-c-dialog) .ace-c-btn.is-icon {
    width: var(--acs-btn-h);
    min-width: var(--acs-btn-h);
    /* (Stage 1.16e, round 6: square, a "⋯" too, the button's height.) */
    height: var(--acs-btn-h);
    padding: 0;
}
/* The fields: one height everywhere in the content (--acs-field-h; 44 on a phone), no padding above or under the text (it would be cut),
   the panel's text; a number short, its unit beside it. (Stronger than any page's rule: a page has no field sizes of its own.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"], [type="submit"], [type="button"], [type="reset"]), select) {
    box-sizing: border-box;
    height: var(--acs-field-h);
    min-height: var(--acs-field-h);
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :where(textarea, small) {
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :where(small) {
    font-size: var(--acs-fs-sm);
}
/* A long text's field at most a form card's width; the menu's editor as wide as a form. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :is(textarea):not(:where(table *)) {
    max-width: var(--acs-form-card-max);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card:has(.acp-menued) {
    max-width: var(--acs-form-card-max);
}
/* A field outside a table is never wider than a form's column (640 px): a wide card does not stretch it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), select):not(:where(table *)) {
    max-width: 640px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content :where(input[type="number"]) {
    width: var(--acs-number-w);
    max-width: 100%;
}
/* A table's rows: one row's height (--acs-row-h), its head a little lower; only where it is a table (800 px and wider): narrower it is a
   list of cards, whose lines grow with their text. */
@container (min-width: 800px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .ace-c-table, .webpanel-table) > tbody > tr > :is(td, th) {
        height: var(--acs-row-h);
        padding-top: 4px;
        padding-bottom: 4px;
        box-sizing: border-box;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .ace-c-table, .webpanel-table) > thead > tr > th {
        height: calc(var(--acs-row-h) - 8px);
    }
    /* (Stage 1.16e, round 6: a row with a picture or with a line under its name, Pagini's, is a media row, of one fixed height.) */
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .ace-c-table, .webpanel-table) > tbody > tr:has(.website-page-thumb, .ace-c-cell > small) > :is(td, th) {
        height: var(--acs-row-media-h);
    }
}
/* Tables of the same kind on a page (Ui::table "widths"): the same columns, so their columns stand one under another. */
/* (Only where the table is a table, its place 800 px and wider: narrower it is a list of cards, which a fixed width would squeeze.) */
@container (min-width: 800px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-fixed {
        table-layout: fixed;
        width: 100%;
    }
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w10 { width: 10%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w12 { width: 12%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w15 { width: 15%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w18 { width: 18%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w20 { width: 20%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w25 { width: 25%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w30 { width: 30%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w35 { width: 35%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w40 { width: 40%; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table col.w50 { width: 50%; }
/* The rows of a card (Ui::rows): all of one height; with an action (Editează, Revezi) the action has its column, of one width on the whole
   card (empty where a row has none), so the values stand in one column and the actions in another. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row {
    box-sizing: border-box;
    min-height: var(--acs-row-h);
    padding-top: 0;
    padding-bottom: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:first-child {
    padding-top: 0;
}
/* (Stage 1.16e, round 6, the theme chat: "Imaginea de partajare" had its rows glued: a row of two lines, its name and a line under it,
   keeps a little air above and under; a row of one line is the row's 36.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dt > small) {
    padding-top: var(--acs-space-1);
    padding-bottom: var(--acs-space-1);
}
/* (A text button in a row, "Vezi firmele", "Editează", is a link of the row's line: it does not make the row taller.) */
@media (min-width: 768px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content .ace-c-rows .ace-c-btn.is-text {
        height: auto;
        min-height: 0;
    }
}
/* The titles inside a card's body (Despre un cont, Atribuie unor pagini): a card's title size, not the browser's; a section's title over
   cards (Alte teme instalate, a month of the calendar) the section's; a plain button the panel's text (the browser gave it 13.3 px). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :where(h3, h4) {
    font-size: var(--acs-fs-title);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :where(h2) {
    font-size: var(--acs-fs-section);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :where(button) {
    font-size: var(--acs-fs);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--acs-row-action-w);
    align-items: center;
    gap: 0 var(--acs-space-4);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row > dd.ace-c-row-action {
    justify-content: flex-end;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row dd :is(.acp-pill, .ace-c-status) {
    font-size: var(--acs-fs-sm);
    line-height: 1.4;
}
/* A row of a form (its value a field, a choice or a switch): the name with its line on the left (180-280 px), the field beside it (at most
   360 px), never at the far end of a wide card. (Round 6: a switch in the row's action column, ACE Core OS și Hub's, keeps the rows'
   columns of the card, its value and its action.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dd:not(.ace-c-row-action) :is(input:not([type="hidden"]), select, textarea, .ace-c-switch, .acp-switch, .ace-c-seg, .ace-c-field)):not(#no-row-columns) {
    display: grid;
    grid-template-columns: minmax(180px, var(--acs-form-label-w)) minmax(0, var(--acs-form-field-w));
    justify-content: start;
    align-items: center;
    gap: var(--acs-space-2) var(--acs-space-6);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dd:not(.ace-c-row-action) :is(input:not([type="hidden"]), select, textarea, .ace-c-switch, .acp-switch, .ace-c-seg, .ace-c-field)) > dd {
    justify-content: flex-start;
    text-align: start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row > dd > :is(input:not([type="checkbox"], [type="radio"], [type="number"], [type="hidden"]), select, textarea) {
    width: 100%;
}
/* A number with its unit beside it (Securitate: "8 caractere", "120 minute"). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-field.has-unit {
    display: flex;
    align-items: center;
    gap: var(--acs-space-2);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-unit {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
    white-space: nowrap;
}
/* A row whose value is a switch alone: the name takes its words' width (at most 480 px), the switch right after it, never at the card's
   far end nor after a name squeezed into four lines. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dd:not(.ace-c-row-action) > .ace-c-switch:only-child):not(#no-row-columns) {
    grid-template-columns: fit-content(480px) auto;
}
/* A row of a form in a card whose other rows have an action (Editează): no empty action column beside its field. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dd:not(.ace-c-row-action) :is(input:not([type="hidden"]), select, textarea, .ace-c-switch, .acp-switch, .ace-c-seg, .ace-c-field)) > dd.ace-c-row-action:empty {
    display: none;
}
/* In a narrow card (its rows under 520 px) the name goes above its field, which takes the row (never a field of 57 px beside its name). */
@container (max-width: 520px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:has(> dd:not(.ace-c-row-action) :is(input:not([type="hidden"]), select, textarea, .ace-c-seg, .ace-c-field)):not(#no-row-columns) {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* A card of a form is as wide as its form (800 px at most), wherever it stands (a search's or a list's filters are no form). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card:has(.ace-c-field, .ace-c-row > dd :is(input:not([type="hidden"]), select, textarea)):not(:has(table, .ace-c-grid, .ace-c-filters, [role="search"])) {
    max-width: var(--acs-form-card-max);
}
/* Stage 1.16e (round 5, Eduard: "titlul și descrierea să aibă spațiul lor alocat și totul să fie aliniat"): in a grid made only of cards,
   each card takes two rows of the grid (CSS subgrid): its head (the title and its line) and its body (the list, the foot). A row's heads are
   as tall as its tallest, so on the whole row the lists start on one line and the feet stand on another, with no heights written by hand. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) {
    grid-auto-flow: row;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) > .ace-c-card {
    grid-row: span 2;
}
/* (Stage 1.16e, round 6, the theme chat: only the cards with a foot, a list or a chart and "Deschide" or the downloads under it, line up
   their titles, lists and feet; a card of content of its own length, Backup's, has its body right under its title, as tall as its row's.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) > .ace-c-card:has(> .ace-c-card-body > :last-child:is(.ace-c-actions, .ace-c-card-foot)) {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--acs-space-3);
    height: auto;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) > .ace-c-card > .ace-c-card-head {
    align-self: start;
}

/* Stage 1.16e (round 6, Eduard: Setări → Avansat "nu e aliniat frumos"): a text button is a link: it starts where the text above it starts
   (no padding before it); a pill or a button standing alone in a card's body keeps its own width (the license's "Textele acceptate
   sunt cele actuale" was a band across the card). (Not a form: its rows are a container, of no width of their own.) */
@media (min-width: 768px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-content, .ace-c-dialog) .ace-c-btn.is-text {
        padding-inline: 0;
    }
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card > .ace-c-card-body > :is(.acp-pill, .ace-c-status, .ace-c-btn) {
    align-self: flex-start;
}
/* (Stage 1.16e, round 6, the theme chat: Pagini on a phone) While a row's "⋯" is open, its table and the table's place (which scroll
   sideways, so they cut what comes out of them, and are a layer of their own) let the list out and stand over what follows them: the list is
   never cut by them nor drawn under the next row or block. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.acp-table-wrap, .ace-c-table-wrap, .webpanel-table-wrap):has(details[data-ace-more][open]),
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .webpanel-table, .ace-c-table):has(details[data-ace-more][open]) {
    position: relative;
    z-index: 30;
    overflow: visible;
}

/* Stage 1.16e (round 6, Eduard: the system's font, two weights): a button, a field and a list take the panel's font (a browser gives them
   its own, Arial on Windows); a bold text (strong, a title, a head's cell) is 600, never the browser's 700, nor 900 inside a 600. */
/* (Of no weight of their own, :where(): any rule of a page wins over them, only the browser's own loses.) */
:where(:root[data-ace-theme] body[data-ace-theme-scope="acpanel"]) :where(button, input, select, textarea, optgroup) {
    font-family: inherit;
}
:where(:root[data-ace-theme] body[data-ace-theme-scope="acpanel"]) :where(strong, b, h1, h2, h3, h4, h5, h6, th) {
    font-weight: 600;
}
/* Stage 1.16e (round 6, the theme chat: "între carduri ~40 px în loc de 12"): two cards side by side or one under another are the scale's
   12 apart wherever they stand, in a page's own grid too (its gap was 16, 20 or 40). */
/* (Not the Panou's grid: its widgets stand on rows of 8 px the account arranges, with no gap; a gap would grow each row. Under 1281 px
   it flows, and its gap is the cards', below.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :not(.acp-dashboard-grid):has(> :is(.ace-c-card, .acp-card) ~ :is(.ace-c-card, .acp-card)) {
    gap: var(--acs-card-gap);
}
/* (Their own margin, 20 under each card, is not added to it.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :not(.acp-dashboard-grid):has(> :is(.ace-c-card, .acp-card) ~ :is(.ace-c-card, .acp-card)) > :is(.ace-c-card, .acp-card) {
    margin-block: 0;
}
/* (A page's column of cards that was a plain block, Website's pages and the account's, is a column of the same gap.) */
:where(:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :is(.website-page, .ace-people-prof, form, fieldset):has(> :is(.ace-c-card, .acp-card) ~ :is(.ace-c-card, .acp-card))) {
    display: grid;
    min-width: 0;
}
:where(:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content :is(.website-page, .ace-people-prof, form, fieldset):has(> :is(.ace-c-card, .acp-card) ~ :is(.ace-c-card, .acp-card))) > :not(.ace-c-card, .acp-card) {
    justify-self: start;
}
/* (Stage 1.16e, round 6, the theme chat: Pagini, Roluri) A row's first cell, written th, is on its row's background, not in a band of the
   head's colour (.acp-table th painted every th). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table:is(.acp-table, .ace-c-table, .ace-ui-table, .webpanel-table) > tbody > tr > th {
    background: transparent;
}

/* Stage 1.16e (round 6, T2: the common pieces on a phone) A number card's value stays in its card: a long one is cut with "…" (the whole
   of it on a hover, its title). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile {
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tile .ace-c-tile-value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A card's rows with actions share the card's columns (subgrid): the action column as wide as its widest actions, the same on every row,
   at least the scale's 96; two short actions on one line. Several of them go into "⋯" on a phone. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions:not(#no-row-columns) {
    /* (The name keeps its share, at least 40 % or 180 px; a long value, an address, wraps rather than squeeze every name of the card.) */
    grid-template-columns: minmax(min(40%, 180px), 1fr) minmax(0, auto) minmax(var(--acs-row-action-w), max-content);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns) {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row > dd.ace-c-row-action {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--acs-space-3);
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-action-list {
    display: inline-flex;
    align-items: center;
    gap: var(--acs-space-3);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-action-more {
    display: none;
}
/* (By the card's width, the rows' container, not the screen's: a card of two at 1024 is as narrow as a phone.) */
@container (max-width: 520px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-action-list:has(+ .ace-c-row-action-more) {
        display: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-action-more {
        display: inline-flex;
    }
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-row-action .ace-c-more-menu {
    white-space: normal;
}
@media (max-width: 1280px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content .acp-dashboard-layout.acp-dashboard-grid {
        column-gap: var(--acs-card-gap);
        row-gap: var(--acs-card-gap);
    }
}
/* (Round 6, the probe: in a narrow card, a phone's or one of two at 1024, the rows with actions are not three columns, which broke "3
   documente" in the middle: the name, then the value and the action, as before, wrapping to a line of their own when there is no room.) */
@container (max-width: 520px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns):not(:has(> dd:not(.ace-c-row-action) :is(input:not([type="hidden"]), select, textarea, .ace-c-seg, .ace-c-field))) {
        display: flex;
        /* (Round 6, the theme chat: never stacked in the middle: the name on the left, the value and the action on the right, or under
           the name on the left when there is no room.) */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        column-gap: var(--acs-space-3);
        row-gap: var(--acs-space-1);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns) > dt {
        flex: 1 1 140px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns) > dd {
        justify-content: flex-start;
        text-align: start;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row > dd.ace-c-row-action:empty {
        display: none;
    }
}
/* (Round 6, the theme chat: on a phone a filter's name stands above its choice, inside the pill; the pill grows with them, its name never
   cut by its edge: the field's height is the scale's only where the name stands beside the choice.) */
@container ace-content (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-filters > .ace-c-filter:not(.is-search) {
        height: auto;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-content.acp-content .ace-c-filters > .ace-c-filter:not(.is-search) select {
        height: auto;
    }
}
/* Stage 1.16e (round 6, the theme chat: the dark theme drew the browser's own pieces grey or white) A checkbox in the theme's colours, in both
   themes: the field's edge and surface, the theme's blue when ticked, its mark in the colour on the blue; a dash when part of a list is
   ticked. (Not the inputs a switch, a choice, a chip or the menu editor's eye hide under their own drawing.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input) {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid var(--acs-border-strong);
    border-radius: 4px;
    background: var(--acs-surface);
    vertical-align: middle;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input):is(:checked, :indeterminate) {
    border-color: var(--acs-primary);
    background: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input):checked::before {
    content: "";
    width: 8px;
    height: 4px;
    border: solid var(--acs-on-primary);
    border-width: 0 0 2px 2px;
    transform: translateY(-1px) rotate(-45deg);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input):indeterminate::before {
    content: "";
    width: 8px;
    height: 2px;
    background: var(--acs-on-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input):focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (pointer: coarse) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] input[type="checkbox"]:not(:is(.ace-c-switch, .acp-switch, .ace-c-seg, .website-chip, .acp-menued__eye, .acp-menued__switch) input) {
        width: 22px;
        height: 22px;
    }
}
/* The side menu's scrollbar: thin, in the theme's colours, seen only while the pointer is over the menu (the browser's was thick and white
   when Setări was open). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-sidebar:is(:hover, :focus-within) {
    scrollbar-color: var(--acs-border-strong) transparent;
}
/* Stage 1.16e (round 6, the theme chat's small points) On a phone, where cards stand one under another, a card's body follows its title
   (no row of the grid to line up with, no gap before "Deschide"); the settings' search takes the line. */
@media (max-width: 560px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) > .ace-c-card {
        grid-row: auto;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-grid:not(:has(> :not(.ace-c-card))) > .ace-c-card:has(> .ace-c-card-body > :last-child:is(.ace-c-actions, .ace-c-card-foot)) {
        display: flex;
        grid-template-rows: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header :is(.ace-c-filters, .ace-c-filter.is-search) {
        width: 100%;
    }
}
/* A text and the button under it (Avansat: "Dau acordul pentru email", "Golește cache-ul paginilor") the scale's 12 apart. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-body > .ace-c-list-foot + :is(form, .ace-c-actions) {
    margin-top: var(--acs-card-gap);
}
/* Stage 1.16f (E1.16f-T2, GP-1-RAPORT.md 3.1, C-GPSidebar): an application's frame in Panoul Client (panels/app-frame). The context's card
   (a server): its tile, its name and line, its state under them, in the site card's box; a link to its main page. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm.ace-app-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: var(--acs-space-1);
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--acs-border);
    border-radius: 16px;
    background: var(--acs-sidebar-firm);
    color: var(--acs-text);
    text-decoration: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm.ace-app-card > .ace-c-tile-icon {
    grid-row: span 2;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-firm.ace-app-card > .ace-c-status {
    grid-column: 2;
    justify-self: start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] a.acp-firm.ace-app-card:hover {
    border-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] a.acp-firm.ace-app-card:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-app-side__logo {
    width: auto;
    max-width: 120px;
    height: 32px;
    object-fit: contain;
}
/* A row's grey number (a count: "24", "3 servere"); the red one stays for what waits. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-count.is-quiet {
    background: var(--acs-neutral-soft);
    color: var(--acs-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-row a.active .acp-nav-count.is-quiet,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .acp-nav-category-link.active .acp-nav-count.is-quiet {
    background: var(--acs-primary-hover);
    color: var(--acs-on-primary);
}
/* "+ Adaugă" of an application: an action that opens a dialog of the page looks like the links beside it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-quick-add .ace-tb-quick .ace-tb-quick-button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--acs-radius-sm);
    background: transparent;
    color: var(--acs-text);
    font: inherit;
    font-size: var(--acs-fs);
    text-align: left;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-quick-add .ace-tb-quick .ace-tb-quick-button:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-quick-add .ace-tb-quick .ace-tb-quick-button:focus-visible {
    background: var(--acs-tab-active-bg);
    color: var(--acs-tab-active-text);
}
/* Stage 1.16f (E1.16f-T3): a portal's "Intră în cont" in the top bar, in the bar's size; on a phone only its icon, as "+ Adaugă". */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-app-sign-in {
    font-size: var(--acs-fs);
    text-decoration: none;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-app-sign-in > span:not(.acp-svg-icon) {
        display: none;
    }
}
/* Stage 1.16f (E1.16f-T4, GP-1-RAPORT.md 3, points 2-10): the screen pieces an application's pages are made of, from the theme's tokens. */
/* The chart: the plot on the right of its numbers, its labels under it; the line and its area in the theme's blue (or a tone). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "y plot" ". x";
    column-gap: var(--acs-space-2);
    row-gap: var(--acs-space-1);
    margin: 0;
    color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart.is-ok { color: var(--acs-success); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart.is-warn { color: var(--acs-warning); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart.is-bad { color: var(--acs-danger); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart.is-empty {
    display: block;
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__plot {
    grid-area: plot;
    display: block;
    width: 100%;
    overflow: visible;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__grid {
    stroke: var(--acs-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__area {
    fill: currentColor;
    opacity: 0.12;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__bar {
    fill: currentColor;
    opacity: 0.85;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__y {
    grid-area: y;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
    line-height: 1;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-chart__x {
    grid-area: x;
    display: flex;
    justify-content: space-between;
    gap: var(--acs-space-2);
    color: var(--acs-muted);
    font-size: var(--acs-fs-xs);
}
/* "Copiază": the value in a box only to be read, the button beside it. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-copy__box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acs-space-2);
    align-items: center;
}
/* (On a phone "Copiază" goes under the value, which keeps the row: an address is read whole.) */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-copy__box > input {
    flex: 1 1 220px;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-copy.is-mono input {
    font-family: var(--acs-font-mono);
}
/* A box only to be read: the soft grey of a value, no field's edge to type in. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-field.is-readonly, .ace-c-copy) :is(input, textarea)[readonly]:not(#no-readonly) {
    border-style: dashed;
    background: var(--acs-neutral-soft);
    color: var(--acs-text);
    cursor: text;
}
/* Two columns of cards, the main one wider; one under the other in a narrow place. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--acs-card-gap);
    align-items: start;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-columns__main,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-columns__side {
    display: grid;
    gap: var(--acs-card-gap);
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] :is(.ace-c-columns__main, .ace-c-columns__side) > .ace-c-card {
    margin-block: 0;
}
@container ace-content (max-width: 900px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* The console: a closed field of lines in the fixed letters, dark in both themes, scrolling inside itself. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console {
    max-height: 320px;
    overflow: auto;
    padding: var(--acs-space-3) var(--acs-space-4);
    border: 1px solid var(--acs-console-border);
    border-radius: var(--acs-radius);
    background: var(--acs-console-bg);
    color: var(--acs-console-text);
    font-family: var(--acs-font-mono);
    font-size: var(--acs-fs-sm);
    line-height: 1.55;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console.is-sm { max-height: 240px; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console.is-lg { max-height: 480px; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console:focus-visible {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console li {
    display: flex;
    gap: var(--acs-space-3);
    overflow-wrap: anywhere;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console time {
    flex: 0 0 auto;
    color: var(--acs-console-muted);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console li.is-in > span { color: var(--acs-console-in); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console li.is-in > span::before { content: "> "; }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console li.is-bad > span { color: var(--acs-console-bad); }
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-console li.is-muted > span { color: var(--acs-console-muted); }
/* A list put in order by dragging: a row with its grip, its name, and its place (a box of numbers without a script; "↑" "↓" with one). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable ol {
    display: grid;
    gap: var(--acs-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item {
    display: flex;
    align-items: center;
    gap: var(--acs-space-3);
    min-height: var(--acs-row-h);
    padding: var(--acs-space-1) var(--acs-space-2);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-sm);
    background: var(--acs-surface);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item.is-dragging {
    opacity: 0.55;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item.is-over {
    border-color: var(--acs-primary);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__grip {
    display: inline-flex;
    color: var(--acs-muted);
    cursor: grab;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__text small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__place input {
    width: 64px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable.is-ready .ace-c-sortable__place {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__moves {
    display: inline-flex;
    gap: var(--acs-space-1);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__moves[hidden] {
    display: none;
}
/* Stage 1.16j (L1): a row with its own field (a caption): the field takes the room left, the row is dragged by its grip. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item.has-field .ace-c-sortable__text {
    flex: 0 1 30%;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__field {
    flex: 1 1 auto;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__field input {
    width: 100%;
}
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item.has-field {
        flex-wrap: wrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-sortable__item.has-field .ace-c-sortable__field {
        flex-basis: 100%;
        order: 4;
    }
}
/* Stage 1.16j (L1): labels as bubbles (Ui::tags), the box to add one after them; without a script, one text field. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--acs-space-1);
    margin: 0 0 var(--acs-space-1);
    padding: 0;
    list-style: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__list[hidden] {
    display: none;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 28px;
    padding: 0 2px 0 var(--acs-space-2);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius-pill);
    background: var(--acs-surface-2, var(--acs-surface));
    color: var(--acs-text);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--acs-radius-pill);
    background: transparent;
    color: var(--acs-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__remove:hover,
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-tags__remove:focus-visible {
    background: var(--acs-border);
    color: var(--acs-text);
}
/* A choice of one among a few cards; one that cannot be chosen yet is greyed with its note. */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice {
    display: grid;
    gap: var(--acs-space-2);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice > legend {
    margin-bottom: var(--acs-space-2);
    padding: 0;
    font-weight: 600;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__item {
    display: flex;
    align-items: center;
    gap: var(--acs-space-3);
    padding: var(--acs-space-3);
    border: 1px solid var(--acs-border);
    border-radius: var(--acs-radius);
    background: var(--acs-surface);
    cursor: pointer;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__item:has(input:checked) {
    border-color: var(--acs-primary);
    background: var(--acs-primary-soft);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__item:has(input:focus-visible) {
    outline: 2px solid var(--acs-focus-color);
    outline-offset: 2px;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__item.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-choice__text small {
    color: var(--acs-muted);
    font-size: var(--acs-fs-sm);
}
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-body > .ace-c-live:not(:last-child),
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-body > .ace-c-console:not(:last-child) {
    margin-bottom: var(--acs-space-4);
}
/* Stage 1.16f (T2, the boards P-GamePanel-Portal-*): a small table of short columns (Ui::table "compact": a top's player, score and time)
   stays a table down to 360 px of its place, where the other tables become cards at 800. */
@container (min-width: 361px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) {
        display: table;
        width: 100%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) thead {
        display: table-header-group;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) tbody {
        display: table-row-group;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) tr {
        display: table-row;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) tr > :is(td, th) {
        display: table-cell;
        padding: var(--acs-space-2) var(--acs-space-3);
        border-bottom: 1px solid var(--acs-border);
        white-space: nowrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] table.ace-c-table.is-compact:not(#no-table-cards):not(#no-compact-cards) tr > td[data-label]::before {
        content: none;
    }
}
/* The mark and the state beside a page's title (T2: "[CS2] zp.playstrike.ro Online"). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-ui-page-header__title:has(> .ace-c-tile-icon, > .ace-c-status) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--acs-space-2) var(--acs-space-3);
}
/* On a portal's page, on a phone, its buttons ("Shop", "Join") stand whole under the title, across the row; the main one does not float. */
@media (max-width: 640px) {
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__main {
        flex-wrap: wrap;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__main > .ace-ui-page-header__text {
        flex: 1 1 100%;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__actions {
        display: flex;
        flex: 1 1 100%;
        gap: var(--acs-space-2);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__actions > .ace-ui-action {
        flex: 1 1 0;
        justify-content: center;
        min-height: 44px;
        padding: 0 var(--acs-space-4);
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__actions .ace-ui-action.is-primary {
        position: static;
        min-height: 44px;
    }
    :root[data-ace-theme] body[data-ace-theme-scope="acpanel"][data-ace-portal] .ace-ui-page-header__actions .ace-ui-action.has-icon > span:last-child {
        display: inline;
    }
}
/* Stage 1.16f (E1.16f-T13): a list and the buttons under it ("Arhive rămase" → "Șterge toate") the scale's 12 apart (a padding: the
   card's last buttons keep their margin-top: auto). */
:root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-card-body > .ace-c-list + .ace-c-actions {
    padding-top: var(--acs-card-gap);
}
/* Stage 1.16f (E1.16f-T13, the leftovers of 1.0.3: the Hub on a phone): on a phone, a row whose name stands above its value keeps 12 px
   between its words and its lines, on every row (it had 0 to 4 px, and 14 more where a text button was); the first row none above, the
   last none under. A text button keeps its 44 px for the finger: its own height gives the air under its words, so its row adds none.
   (On a computer the rows keep one height in a card, also stacked in a narrow card.) */
@media (max-width: 767px) {
    @container (max-width: 440px) {
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows:not(.has-actions) > .ace-c-row:not(#no-row-wrap) {
            padding-top: var(--acs-space-3);
            padding-bottom: var(--acs-space-3);
        }
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:first-child:not(#no-row-wrap) {
            padding-top: 0;
        }
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:last-child:not(#no-row-wrap),
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows > .ace-c-row:not(#no-row-wrap):has(> dd .ace-c-btn.is-text) {
            padding-bottom: 0;
        }
    }
    @container (max-width: 400px) {
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns):not(:first-child) {
            padding-top: var(--acs-space-3);
        }
        :root[data-ace-theme] body[data-ace-theme-scope="acpanel"] .ace-c-rows.has-actions > .ace-c-row:not(#no-row-columns):not(:last-child):not(:has(> dd .ace-c-btn.is-text)) {
            padding-bottom: var(--acs-space-3);
        }
    }
}