/* tokens */
/*
 * Design tokens aligned with the WelbeX amoCRM component library
 * (`amocrm-components/src/styles/_variables.css`).
 *
 * Every component stylesheet references these custom properties through
 * `var(--token, fallback)`, so including this file themes the whole library at
 * once while each component still renders correctly on its own.
 */
:root {
    /* Brand blue — filled fill and its slightly darker border/hover. */
    --amo-color-primary: #4c8bf7;
    --amo-color-primary-border: #4077d6;
    --amo-color-primary-hover: #3f7ae8;

    /* Text. amoCRM: --palette-text-primary / -secondary-light / placeholder. */
    --amo-color-text: #363b44;
    --amo-color-text-inactive: #b5b5b5; /* --palette-placeholder-primary */
    --amo-color-text-muted: #92989b; /* --palette-text-secondary-light */
    --amo-color-text-light: #92989b;
    --amo-color-link: #4c8bf7;

    /* Lines, surfaces and interaction states. amoCRM --palette-border-*. */
    --amo-color-border: #c5c5c5; /* --palette-border-default */
    --amo-color-border-light: #e8eaeb; /* --palette-border-primary */
    --amo-color-focus-border: #10101050;
    --amo-color-hover: #c5c5c550;
    --amo-color-surface: #ffffff; /* --palette-background-primary */
    --amo-color-bg: #f5f5f5; /* --palette-background-default */
    --amo-color-bg-subtle: #f8f8f9;
    --amo-color-nav-bg: #1b3446; /* --palette-left-menu-background-primary */

    /* Custom scrollbar (overlay track and draggable thumb). */
    --amo-color-scrollbar-track: #eaeaea; /* --palette-scrollbar-track-background */
    --amo-color-scrollbar-thumb: #cdcdcd; /* --palette-scrollbar-thumb-background */

    /* Notification counter badge. */
    --amo-color-counter: #ef3131;
    --amo-color-counter-text: #ffffff;

    /* Component-specific fills that need a dark counterpart. */
    --amo-color-tag-bg: #eef0f1;
    --amo-color-task-green: #7ac77a;
    --amo-color-calendar-range: #f0f1f2;
    --amo-color-calendar-marker: #c5c5c5;
    /* Neutral status label (amoCRM status chip): subtle fill + primary text. */
    --amo-color-status-bg: #e8eaeb;
    --amo-color-status-text: #363b44;
    /* Button group (segment switcher): the strip fill and the chosen pill. */
    --amo-color-segment-bg: #e8eaeb;
    --amo-color-segment-active-bg: #ffffff;
    --amo-color-segment-border: #c5c5c5;
    /* Table multi-action bar fill (amoCRM --palette-table-multiaction-background). */
    --amo-color-table-multiaction: #f1f5f9;
    /* The checkbox tick colour (SVG uses currentColor): dark on the light box. */
    --amo-color-checkbox-mark: #363b44;

    /* Accents. */
    --amo-color-danger: #ef3131;
    --amo-color-success: #749e42;
    --amo-color-accent-yellow: #ffcc66;
    --amo-color-slate: #516570;
    /*
     * Payment accent: the light-theme green, used by the payment block in BOTH
     * themes. It is intentionally not remapped under `[data-theme="dark"]`, so
     * the payment block keeps the light green instead of the darker dark-theme
     * success colour (which is deprecated there).
     */
    --amo-color-payment-accent: #749e42;

    /* Shape and type. */
    --amo-radius: 4px;
    --amo-radius-small: 2px;
    --amo-font: "PT Sans", Arial, sans-serif;
}

/*
 * Dark theme palette, captured from amoCRM's dark theme (left-menu theme
 * switcher → "dark"). These tokens are REGISTERED ONLY: no component references
 * them yet, so including this file changes nothing until the dark tokens are
 * wired up (e.g. by remapping `--amo-color-*` under a `[data-theme="dark"]`
 * selector). Each value is annotated with the amoCRM source variable it was
 * read from.
 */
:root {
    /* Brand blue / links. */
    --amo-dark-color-primary: #1691ff; /* --palette-link-primary */
    --amo-dark-color-primary-border: #1177d6; /* derived (darker) */
    --amo-dark-color-primary-hover: #3aa5ff; /* derived (lighter) */
    --amo-dark-color-link: #1691ff; /* --palette-link-primary */
    --amo-dark-color-link-hover: #1691ff; /* --palette-link-hover */

    /* Text. */
    --amo-dark-color-text: #f2f2f2; /* --palette-text-primary */
    --amo-dark-color-text-inverse: #363b44; /* --palette-text-primary-inverse */
    --amo-dark-color-text-muted: #7f8ba4; /* --palette-text-secondary-light */
    --amo-dark-color-text-light: #8092ad; /* --palette-text-secondary-dark */
    --amo-dark-color-text-inactive: #69768d; /* --palette-placeholder-primary */
    --amo-dark-color-placeholder: #6a7991; /* --palette-placeholder-default */

    /* Lines, surfaces and interaction states. */
    --amo-dark-color-border: #596683; /* --palette-border-default */
    --amo-dark-color-border-light: #284860; /* --palette-border-primary */
    --amo-dark-color-focus-border: rgba(255, 255, 255, 0.24); /* derived */
    --amo-dark-color-hover: #264b79; /* --crm-ui-kit-palette-surface-hover-background-color */
    --amo-dark-color-surface: #153043; /* --palette-background-primary */
    --amo-dark-color-surface-disabled: #132b3c; /* --palette-background-primary-disabled */
    --amo-dark-color-bg: #0f2231; /* --palette-background-default */
    --amo-dark-color-bg-subtle: #102535; /* --palette-background-secondary-800 */
    --amo-dark-color-nav-bg: #07131d; /* --palette-left-menu-background-primary */
    --amo-dark-color-nav-text: #97a6be; /* --palette-left-menu-text-primary */

    /* Custom scrollbar (overlay track and draggable thumb). */
    --amo-dark-color-scrollbar-track: #264154; /* --palette-scrollbar-track-background */
    --amo-dark-color-scrollbar-thumb: #394e5f; /* --palette-scrollbar-thumb-background */

    /* Accents and states. */
    --amo-dark-color-danger: #f37575; /* --palette-info-bubble-error-border */
    --amo-dark-color-danger-bg: #514754; /* --crm-ui-kit-palette-badge-background-color-red */
    --amo-dark-color-success: #209158; /* --palette-transaction-border */
    --amo-dark-color-success-bg: #29554e; /* --palette-meta-badge-background-color-green */
    --amo-dark-color-accent-yellow: #c78d3b; /* --palette-feed-note-pinned-label */
    --amo-dark-color-slate: #69768d; /* --crm-ui-kit-color-dusk-gray */
    --amo-dark-color-counter: #aa3b3f; /* --palette-counter-badge-background-color */
}

/*
 * amoCRM dark-theme source palette (reference). The core design-system colours
 * read directly from amoCRM under the dark theme, kept under their original
 * names for traceability. Not consumed by components.
 */
:root {
    --amo-src-dark-background-primary: #153043;
    --amo-src-dark-background-default: #0f2231;
    --amo-src-dark-background-secondary-800: #102535;
    --amo-src-dark-background-primary-disabled: #132b3c;
    --amo-src-dark-surface-background: #0f2231;
    --amo-src-dark-surface-hover-background: #264b79;
    --amo-src-dark-left-menu-background-primary: #07131d;
    --amo-src-dark-left-menu-background-secondary: #07131d;
    --amo-src-dark-left-menu-text-primary: #97a6be;
    --amo-src-dark-navigation-bar-active-item: #ffffff;
    --amo-src-dark-text-primary: #f2f2f2;
    --amo-src-dark-text-primary-inverse: #363b44;
    --amo-src-dark-text-secondary-light: #7f8ba4;
    --amo-src-dark-text-secondary-dark: #8092ad;
    --amo-src-dark-placeholder-default: #6a7991;
    --amo-src-dark-placeholder-primary: #69768d;
    --amo-src-dark-border-default: #596683;
    --amo-src-dark-border-primary: #284860;
    --amo-src-dark-hover-default: #0f2231;
    --amo-src-dark-button-classic-hover-background: #19374d;
    --amo-src-dark-link-primary: #1691ff;
    --amo-src-dark-link-hover: #1691ff;
    --amo-src-dark-active-element-900: #264b79;
    --amo-src-dark-active-element-800: #22446d;
    --amo-src-dark-active-element-700: #1e3c61;
    --amo-src-dark-scrollbar-track-background: #264154;
    --amo-src-dark-scrollbar-thumb-background: #394e5f;
    --amo-src-dark-table-hover-background: #153f5f;
    --amo-src-dark-table-multiaction-background: #203a4c;
    --amo-src-dark-box-shadow-default: #142d3e;
    --amo-src-dark-callout-info-background: #264b79;
    --amo-src-dark-callout-error-background: #0f2231;
    --amo-src-dark-callout-success-background: #182a39;
    --amo-src-dark-callout-warning-background: #2b3d43;
    --amo-src-dark-badge-red-text: #fdd9d5;
    --amo-src-dark-badge-red-background: #514754;
    --amo-src-dark-badge-green-text: #c2ecc9;
    --amo-src-dark-badge-green-background: #29554e;
    --amo-src-dark-badge-orange-text: #fdddaf;
    --amo-src-dark-badge-orange-background: #4b4c41;
    --amo-src-dark-badge-blue-text: #d4e3f1;
    --amo-src-dark-badge-blue-background: #2a4d75;
    --amo-src-dark-badge-purple-text: #e8dcfd;
    --amo-src-dark-badge-purple-background: #3f4775;
    --amo-src-dark-badge-neutral-text: #d4e3f1;
    --amo-src-dark-badge-neutral-background: #224e6b;
    --amo-src-dark-counter-badge-background: #aa3b3f;
    --amo-src-dark-transaction-border: #209158;
    --amo-src-dark-overlay-primary-700: rgba(0, 0, 0, 0.7);
    --amo-src-dark-overlay-default-700: rgba(15, 34, 49, 0.7);
}

/*
 * Dark theme switch. Any subtree marked `data-theme="dark"` remaps the active
 * `--amo-color-*` tokens to the dark palette above, so every tokenised
 * component inside it renders in dark without component-level changes. Light is
 * the default; wrap only the parts that should be dark.
 */
[data-theme="dark"] {
    --amo-color-primary: var(--amo-dark-color-primary);
    --amo-color-primary-border: var(--amo-dark-color-primary-border);
    --amo-color-primary-hover: var(--amo-dark-color-primary-hover);
    --amo-color-link: var(--amo-dark-color-link);

    --amo-color-text: var(--amo-dark-color-text);
    --amo-color-text-inactive: var(--amo-dark-color-text-inactive);
    --amo-color-text-muted: var(--amo-dark-color-text-muted);
    --amo-color-text-light: var(--amo-dark-color-text-light);

    --amo-color-border: var(--amo-dark-color-border);
    --amo-color-border-light: var(--amo-dark-color-border-light);
    --amo-color-focus-border: var(--amo-dark-color-focus-border);
    --amo-color-hover: var(--amo-dark-color-hover);
    --amo-color-surface: var(--amo-dark-color-surface);
    --amo-color-bg: var(--amo-dark-color-bg);
    --amo-color-bg-subtle: var(--amo-dark-color-bg-subtle);
    --amo-color-nav-bg: var(--amo-dark-color-nav-bg);

    --amo-color-scrollbar-track: var(--amo-dark-color-scrollbar-track);
    --amo-color-scrollbar-thumb: var(--amo-dark-color-scrollbar-thumb);

    --amo-color-counter: var(--amo-dark-color-counter);
    --amo-color-counter-text: #ffffff;

    --amo-color-tag-bg: #224e6b; /* --crm-ui-kit-palette-badge-background-color-neutral */
    --amo-color-task-green: #41d373;
    --amo-color-calendar-range: #203a4c; /* --palette-table-multiaction-background */
    --amo-color-calendar-marker: #516570;
    --amo-color-status-bg: #224e6b; /* --palette-meta-badge-background-color-neutral */
    --amo-color-status-text: #d4e3f1; /* --palette-meta-badge-color-neutral */
    --amo-color-table-multiaction: #203a4c; /* --palette-table-multiaction-background */
    --amo-color-segment-bg: #153043; /* --palette-background-primary */
    --amo-color-segment-active-bg: #22446d; /* --palette-active-element-800 */
    --amo-color-segment-border: #284860; /* --palette-border-primary */
    --amo-color-checkbox-mark: #ffffff; /* white tick on the dark checkbox box */

    --amo-color-danger: var(--amo-dark-color-danger);
    --amo-color-success: var(--amo-dark-color-success);
    --amo-color-accent-yellow: var(--amo-dark-color-accent-yellow);
    --amo-color-slate: var(--amo-dark-color-slate);
}

/* Sprite icons paint the sprite inline, from the copy embedded in the
   library's code; this shared rule deliberately carries no image, so no
   stylesheet path (or a host page's own .amo-icon rule) can break them. */
.amo-icon {
    display: inline-block;
    flex: none;
    background-repeat: no-repeat;
}


/* add-button */
/*
 * amoCRM style "+" add button: a small dashed-bordered square with a centered
 * plus glyph, used as an inline "add" affordance and reusable as an icon. An
 * 18×18 content box with an 18px glyph centered both ways.
 */
.amo-add-button {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px dashed var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: transparent;
    color: var(--amo-color-text-light, #92989b);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    line-height: 1;
    cursor: pointer;
}

.amo-add-button::before {
    content: "+";
    font-size: 18px;
    line-height: 1;
}

.amo-add-button:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* amocrm-payment-block */
/*
 * amoCRM billing block (`.billing__container`): an account "Счёт и оплата"
 * purchase panel — a header (paid tariff + installed packages), a grouped grid
 * of selectable tariff cards, a users calculator, a radio-style period selector
 * and a totals summary split off by a vertical divider. Colours come from the
 * shared design tokens, so it matches both the light and the dark theme.
 */
.amo-amocrm-payment {
    box-sizing: border-box;
    container-type: inline-size;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment *,
.amo-amocrm-payment *::before,
.amo-amocrm-payment *::after {
    box-sizing: border-box;
}

/* The left and right areas are two separate cards, not one panel. */
.amo-amocrm-payment-columns {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}

.amo-amocrm-payment-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.06);
}

/* ---- Header: paid tariff name + installed packages ---- */
.amo-amocrm-payment-header {
    margin-bottom: 22px;
}

.amo-amocrm-payment-header-title {
    font-size: 18px;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-header-date {
    color: var(--amo-color-link, #4c8bf7);
}

.amo-amocrm-payment-header-packages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.amo-amocrm-payment-header-package {
    font-size: 13px;
    line-height: 1.35;
    color: var(--amo-color-text-muted, #92989b);
}

/* ---- Tariff feature cards (.billing__form__header) ---- */
/*
 * A grouped grid: two body rows with column flow, so consecutive compact
 * each column stacks one or more tariffs, sharing the column height. Selecting a
 * tariff collapses its column to just that card (filling the column); the hidden
 * siblings return when a different tariff is selected.
 */
.amo-amocrm-payment-tariffs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
}

.amo-amocrm-payment-tariff-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amo-amocrm-payment-tariff {
    position: relative;
    /* Cards grow from their content to share the column height; the one left
       after a collapse fills it. A content-based basis keeps the row tall enough
       (a 0 basis would collapse it). */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: 0;
    background: var(--amo-color-surface, #ffffff);
    cursor: pointer;
    user-select: none;
}

/* In the selected tariff's column, hide the other cards so it fills the column. */
.amo-amocrm-payment-tariff-column-active
    .amo-amocrm-payment-tariff:not(.amo-amocrm-payment-tariff-selected) {
    display: none;
}

/* Visible keyboard focus for the selectable cards and period options. */
.amo-amocrm-payment-tariff:focus-visible,
.amo-amocrm-payment-period:focus-visible {
    outline: 2px solid var(--amo-color-primary, #4c8bf7);
    outline-offset: 2px;
}

/* The selected card gets a brand-blue border (a 2px ring without layout shift). */
.amo-amocrm-payment-tariff-selected {
    z-index: 1;
    border-color: var(--amo-color-primary, #4c8bf7);
    box-shadow: inset 0 0 0 1px var(--amo-color-primary, #4c8bf7);
}

/*
 * Revert cross: hidden by default, shown only on the selected card when it is
 * not the default tariff. Clicking it returns the selection to the default.
 */
.amo-amocrm-payment-tariff-close {
    position: absolute;
    top: 12px;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--amo-color-text-muted, #92989b);
    cursor: pointer;
}

.amo-amocrm-payment-tariff-close:hover {
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-tariff-revertable .amo-amocrm-payment-tariff-close {
    display: flex;
}

.amo-amocrm-payment-tariff-close .amo-icon-cross {
    display: flex;
    width: 10px;
    height: 10px;
}

.amo-amocrm-payment-tariff-close .amo-icon-cross svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Keep the caption clear of the cross. */
.amo-amocrm-payment-tariff-revertable .amo-amocrm-payment-tariff-caption {
    padding-right: 18px;
}

.amo-amocrm-payment-tariff-caption {
    font-size: 18px;
    font-weight: 700;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-tariff-desc {
    font-size: 13px;
    line-height: 1.35;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-tariff-features {
    flex: 1 1 auto;
    margin: 6px 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.amo-amocrm-payment-tariff-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-tariff-feature .amo-icon-checkmark-large {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-tariff-feature .amo-icon-checkmark-large svg {
    display: block;
    width: 100%;
    height: 100%;
}

.amo-amocrm-payment-tariff-price {
    margin-top: auto;
}

.amo-amocrm-payment-tariff-price-value {
    font-size: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.amo-amocrm-payment-tariff-selected .amo-amocrm-payment-tariff-price-value {
    color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-tariff-price-period {
    margin-left: 3px;
    font-size: 14px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-tariff-price-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-tariff-price-vat {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

/* ---- Users calculator (.billing__form__licenses_purchase) ---- */
.amo-amocrm-payment-users {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--amo-color-border, #c5c5c5);
}

.amo-amocrm-payment-section-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-users-calc {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    /* The whole calculator is set at amoCRM's larger 18px scale. */
    font-size: 18px;
}

.amo-amocrm-payment-users-base,
.amo-amocrm-payment-users-times,
.amo-amocrm-payment-users-equals {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.amo-amocrm-payment-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.amo-amocrm-payment-step:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-amocrm-payment-users-input {
    width: 51px;
    height: 36px;
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    font-size: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.amo-amocrm-payment-users-input:focus {
    outline: none;
    border-color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-users-sum {
    color: var(--amo-color-primary-border, #4077d6);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* ---- Period selector (radio circles on a connecting line) ---- */
.amo-amocrm-payment-periods {
    position: relative;
    margin-top: 22px;
    padding-top: 30px;
    border-top: 1px solid var(--amo-color-border, #c5c5c5);
}

.amo-amocrm-payment-periods-line {
    position: absolute;
    top: 74px;
    left: 60px;
    right: 60px;
    height: 5px;
    border-radius: 5px;
    background: var(--amo-color-bg, #f5f5f5);
}

.amo-amocrm-payment-periods-options {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}

.amo-amocrm-payment-period {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* A fixed, compact width matching the original rate switcher (108px). */
    flex: 0 0 108px;
    width: 108px;
    padding: 6px 8px 10px;
    /* Reserve the frame's border so selecting an option causes no layout shift. */
    border: 1.5px solid transparent;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

/*
 * The selected option is framed with square corners and stays transparent, so
 * the connecting line runs through it to the thumb (amoCRM's rate selector).
 */
.amo-amocrm-payment-period-selected {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* Title, gift and price are muted by default and only emphasised (dark / blue)
   on the selected option, matching amoCRM's rate switcher. */
.amo-amocrm-payment-period-title {
    min-height: 20px;
    font-size: 16px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-period-selected .amo-amocrm-payment-period-title {
    color: var(--amo-color-text, #363b44);
}

/* A radio dot: a plain grey disc, becoming a blue ring with a blue centre when
   the option is selected (amoCRM's period switcher). */
.amo-amocrm-payment-period-circle {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    /* Reserve the selected thumb's 22px footprint so the text below keeps its
       position whether or not the option is selected. */
    margin: 2px 0;
    border: 2px solid transparent;
    border-radius: 50%;
    /* The resting dots share the decorative line's colour (same track nodes). */
    background: var(--amo-color-bg, #f5f5f5);
}

.amo-amocrm-payment-period-selected .amo-amocrm-payment-period-circle {
    width: 22px;
    height: 22px;
    margin: 0;
    border-color: var(--amo-color-primary, #4c8bf7);
    background: var(--amo-color-surface, #ffffff);
}

.amo-amocrm-payment-period-selected .amo-amocrm-payment-period-circle::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-period-gift {
    min-height: 32px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-period-selected .amo-amocrm-payment-period-gift {
    color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-period-price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-period-selected .amo-amocrm-payment-period-price {
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-period-vat {
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
}

/* ---- Totals / summary (.billing__form__top__right) ---- */
.amo-amocrm-payment-summary {
    flex: none;
    width: 275px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 18px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.06);
}

/*
 * Subscription recap (amoCRM `.billing__form__purchase__extensions`): an 18px
 * regular-weight heading, then the period on the left with the "valid until"
 * date pushed to the right, and the users line right-aligned below — all body
 * text in a uniform muted grey.
 */
.amo-amocrm-payment-summary-head {
    font-size: 18px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    font-size: 15px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-summary-period {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-summary-until {
    font-size: 15px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-summary-users {
    margin-top: 6px;
    font-size: 15px;
    text-align: right;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-total-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--amo-color-text, #363b44);
}

.amo-amocrm-payment-total-value {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-total-vat {
    margin-top: 6px;
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-amocrm-payment-total-gift {
    margin-top: 2px;
    font-size: 13px;
    color: var(--amo-color-primary, #4c8bf7);
}

.amo-amocrm-payment-total-gift-hidden {
    display: none;
}

.amo-amocrm-payment-order {
    margin-top: 18px;
}

/* The order button matches amoCRM's purchase button: full-width, 50px tall,
   16px bold. */
.amo-amocrm-payment-order .amo-button {
    width: 100%;
    height: 50px;
    font-size: 16px;
}

.amo-amocrm-payment-order .amo-button-inner {
    justify-content: center;
    width: 100%;
}

.amo-amocrm-payment-coupon {
    margin-top: 12px;
    font-size: 13px;
    color: var(--amo-color-link, #4c8bf7);
    cursor: pointer;
    user-select: none;
}

.amo-amocrm-payment-coupon:hover {
    text-decoration: underline;
}

/*
 * Narrow container: stack the two cards and lay the tariffs out in one column.
 */
@container (max-width: 720px) {
    .amo-amocrm-payment-columns {
        flex-direction: column;
    }

    .amo-amocrm-payment-summary {
        width: 100%;
    }

    .amo-amocrm-payment-tariffs {
        flex-direction: column;
    }

    .amo-amocrm-payment-tariff-column {
        flex: none;
    }

    .amo-amocrm-payment-tariff {
        flex: none;
    }
}


/* audio */
/* Outer wrapper; the hidden <audio> lives here next to the visible bar. */
.amo-audio {
    display: inline-block;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

/* The visible inline player bar. */
.amo-audio-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--amo-color-primary, #4c8bf7);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    width: fit-content;
}

/* Play / pause / stop controls. */
.amo-audio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--amo-color-primary, #4c8bf7);
    cursor: pointer;
}

.amo-audio-button:hover {
    color: var(--amo-color-primary-hover, #3f7ae8);
}

.amo-audio-button svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* The play/pause button shows one glyph at a time depending on state. */
.amo-audio-play .amo-icon-pause {
    display: none;
}

.amo-audio-playing .amo-audio-play .amo-icon-play {
    display: none;
}

.amo-audio-playing .amo-audio-play .amo-icon-pause {
    display: inline-flex;
}

/* Clickable progress track. Padding enlarges the hit area over the thin bar. */
.amo-audio-track {
    position: relative;
    box-sizing: content-box;
    width: 160px;
    height: 5px;
    border-radius: 64px;
    background: var(--amo-color-border, #c5c5c5);
    background-clip: content-box;
    cursor: pointer;
}

.amo-audio-track-fill {
    width: 0;
    height: 5px;
    border-radius: 64px;
    background: var(--amo-color-primary, #4c8bf7);
    pointer-events: none;
}

/* The mm:ss / mm:ss timeline. */
.amo-audio-timeline {
    flex: none;
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Playback-speed selector, rendered borderless and compact. */
.amo-audio-speed {
    flex: none;
    max-width: 60px;
}

.amo-audio-speed .amo-select-button {
    min-width: 0;
    padding: 0 18px 0 4px;
    border: none;
    background: transparent;
    color: var(--amo-color-text-muted, #92989b);
}

/* Pin the dropdown arrow to the right edge so it never covers the label. */
.amo-audio-speed .amo-select-button::after {
    right: 4px;
}

.amo-audio-speed .amo-select-list {
    min-width: 64px;
}


/* badge */
.amo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    padding: 3px;
    border-radius: 20px;
    background: var(--amo-color-counter, #ef3131);
    color: var(--amo-color-counter-text, #ffffff);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
}

.amo-badge[hidden] {
    display: none;
}


/* banner */
/* Banner: a sized block that renders the structure it is given. It has no
   layout of its own — only the blank surface, from tokens, so it follows
   `data-theme="dark"`. Width and height come from the component (inline). */
.amo-banner {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    /* The content is placed edge to edge and clipped to the banner's box. */
    overflow: hidden;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
}

/* Blank state: an outlined block that keeps a visible height of its own. */
.amo-banner-empty {
    min-height: 96px;
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
}


/* bar-chart */
.amo-bar-chart {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-bar-chart-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.amo-bar-chart-label {
    flex: none;
    width: 150px;
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-bar-chart-track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    height: 28px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--amo-color-border-light, #e8eaeb);
}

.amo-bar-chart-segment {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 0 8px;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.3s ease;
}

.amo-bar-chart-total {
    flex: none;
    min-width: 36px;
    font-size: 20px;
    font-weight: 300;
    color: var(--amo-color-text, #363b44);
    font-variant-numeric: tabular-nums;
}


/* button */
.amo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--amo-radius, 4px);
    background: transparent;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    /* A link button (createLinkButton) is an anchor: no underline. */
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.amo-button-inner {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
}

.amo-button-text {
    white-space: nowrap;
}

.amo-button-primary {
    background: var(--amo-color-primary, #4c8bf7);
    border-color: var(--amo-color-primary-border, #4077d6);
    color: #ffffff;
}

.amo-button-primary:hover {
    background: var(--amo-color-primary-hover, #3f7ae8);
}

.amo-button-default {
    background: var(--amo-color-surface, #ffffff);
    border-color: var(--amo-color-text, #363b44);
    color: var(--amo-color-text, #363b44);
}

.amo-button-default:hover {
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

/* Outline: the brand colour on the border and the label, over the surface. */
.amo-button-outline {
    background: var(--amo-color-surface, #ffffff);
    border-color: var(--amo-color-primary, #4c8bf7);
    color: var(--amo-color-link, #4c8bf7);
}

.amo-button-outline:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-button-add {
    background: var(--amo-color-primary, #4c8bf7);
    border-color: var(--amo-color-primary-border, #4077d6);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.amo-button-add:hover {
    background: var(--amo-color-primary-hover, #3f7ae8);
}

.amo-button-plus {
    margin-right: 6px;
    font-weight: 700;
    line-height: 1;
}

.amo-button-disabled,
.amo-button:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* button-group */
/* Joined segment switcher (amoCRM button-input-group): a bordered strip whose
   segments fill it edge to edge, separated by 1px dividers. The chosen segment
   is filled with the surface colour and marked by a small caret notch centred
   on the strip's bottom border. */
.amo-button-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 36px;
    border: 1px solid var(--amo-color-segment-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-segment-bg, #e8eaeb);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
}

.amo-button-group-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 14px;
    color: var(--amo-color-text-muted, #92989b);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color 0.12s ease;
}

/* Dividers between segments; the outer corners follow the strip's radius. */
.amo-button-group-item + .amo-button-group-item {
    border-left: 1px solid var(--amo-color-segment-border, #c5c5c5);
}

.amo-button-group-item:first-child {
    border-radius: 3px 0 0 3px;
}

.amo-button-group-item:last-child {
    border-radius: 0 3px 3px 0;
}

.amo-button-group-input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

.amo-button-group-item:hover {
    color: var(--amo-color-text, #363b44);
}

/* The chosen segment: surface fill, primary text. */
.amo-button-group-item-selected {
    background: var(--amo-color-segment-active-bg, #ffffff);
    color: var(--amo-color-text, #363b44);
}

/* Caret notch under the chosen segment: an outlined down-pointing triangle
   straddling the strip's bottom border. `::before` draws the outline in the
   border colour, `::after` the fill in the segment colour, 1px smaller. */
.amo-button-group-item-selected::before,
.amo-button-group-item-selected::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    pointer-events: none;
}

.amo-button-group-item-selected::before {
    margin-left: -5px;
    border-top: 5px solid var(--amo-color-segment-border, #c5c5c5);
    z-index: 1;
}

.amo-button-group-item-selected::after {
    margin-left: -5px;
    border-top: 4px solid var(--amo-color-segment-active-bg, #ffffff);
    z-index: 2;
}

/* Keyboard focus on the hidden radio outlines its segment. */
.amo-button-group-input:focus-visible + .amo-button-group-text {
    outline: 2px solid var(--amo-color-primary, #4c8bf7);
    outline-offset: 2px;
    border-radius: var(--amo-radius-small, 2px);
}

.amo-button-group-item-disabled {
    opacity: 0.5;
    cursor: default;
}

.amo-button-group-item-disabled:hover {
    color: var(--amo-color-text-muted, #92989b);
}


/* calendar */
.amo-calendar {
    box-sizing: border-box;
    width: 240px;
    padding: 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    user-select: none;
}

.amo-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.amo-calendar-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

.amo-calendar-nav {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--amo-radius, 4px);
    background: transparent;
    color: var(--amo-color-text-muted, #92989b);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* The month arrows are not highlighted on hover. */

.amo-calendar-weekdays,
.amo-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.amo-calendar-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 9px;
    color: var(--amo-color-text-muted, #92989b);
}

/* Every cell carries the light-grey row pill; the inner label is the circular
   day marker centered on top. */
.amo-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.amo-calendar-day-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    color: var(--amo-color-text, #363b44);
    font-family: inherit;
    font-size: 13px;
}

.amo-calendar-day-muted .amo-calendar-day-label {
    color: var(--amo-color-border, #c5c5c5);
}

/* Selected range fill — blue (#4c8bf7), the only place this fills a cell.
   Half-fills at the ends connect the start/end markers into one line. */
.amo-calendar-day-inrange {
    background: var(--amo-color-calendar-range, #f0f1f2);
}

.amo-calendar-day-fill-right {
    background: linear-gradient(
        90deg,
        transparent 50%,
        var(--amo-color-calendar-range, #f0f1f2) 50%
    );
}

.amo-calendar-day-fill-left {
    background: linear-gradient(
        90deg,
        var(--amo-color-calendar-range, #f0f1f2) 50%,
        transparent 50%
    );
}

/* Round the range fill where it meets a row edge (first/last column). */
.amo-calendar-grid > .amo-calendar-day-inrange:nth-child(7n + 1),
.amo-calendar-grid > .amo-calendar-day-fill-right:nth-child(7n + 1),
.amo-calendar-grid > .amo-calendar-day-fill-left:nth-child(7n + 1) {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.amo-calendar-grid > .amo-calendar-day-inrange:nth-child(7n),
.amo-calendar-grid > .amo-calendar-day-fill-right:nth-child(7n),
.amo-calendar-grid > .amo-calendar-day-fill-left:nth-child(7n) {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Start/end of the selected range → a slightly darker blue marker. */
.amo-calendar-day-start .amo-calendar-day-label,
.amo-calendar-day-end .amo-calendar-day-label {
    background: var(--amo-color-calendar-marker, #c5c5c5);
    font-weight: 700;
}

/* Keep selected-range day numbers readable on the grey fill. */
.amo-calendar-day-inrange .amo-calendar-day-label,
.amo-calendar-day-start .amo-calendar-day-label,
.amo-calendar-day-end .amo-calendar-day-label {
    color: var(--amo-color-text, #363b44);
}

/* The current date keeps its blue text, even inside a selected range. */
.amo-calendar-day-today .amo-calendar-day-label {
    color: var(--amo-color-primary, #4c8bf7);
    font-weight: 700;
}

.amo-calendar-footer {
    display: flex;
    margin-top: 10px;
}


/* card */
.amo-lead-card {
    position: relative;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0.8px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
}

.amo-lead-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.amo-lead-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--amo-color-link, #4c8bf7);
    text-decoration: none;
}

.amo-lead-card-title:hover {
    text-decoration: underline;
}

.amo-lead-card-date {
    flex: none;
    color: var(--amo-color-text-light, #92989b);
    font-size: 13px;
}

.amo-lead-card-price {
    margin-top: 4px;
    color: var(--amo-color-text, #363b44);
    font-size: 13px;
}

.amo-lead-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.amo-lead-card-task-dot {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.amo-lead-card-task-dot-green {
    background: var(--amo-color-task-green, #7ac77a);
}

.amo-lead-card-task-dot-yellow {
    background: var(--amo-color-accent-yellow, #ffcc66);
}

.amo-lead-card-task-dot-red {
    background: var(--amo-color-danger, #ef3131);
}


/* chart-placeholder */
.amo-chart-placeholder {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 140px;
    padding: 24px 16px;
    text-align: center;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

/* The database icon inherits colour from here (SVG uses currentColor). */
.amo-chart-placeholder-icon {
    display: inline-flex;
    color: var(--amo-color-text-light, #6b6d72);
}

.amo-chart-placeholder-icon svg {
    display: block;
    width: 44px;
    height: 51px;
}

.amo-chart-placeholder-text {
    max-width: 360px;
    font-size: 24px;
    line-height: 1.3;
    color: var(--amo-color-text-light, #6b6d72);
}


/* checkbox */
.amo-checkbox {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 4px 8px 4px 5px;
    color: var(--amo-color-text, #363b44);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    user-select: none;
}

.amo-checkbox-body {
    position: relative;
    display: inline-flex;
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
}

.amo-checkbox-body input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

.amo-checkbox-helper {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius-small, 2px);
    background: var(--amo-color-surface, #ffffff);
    /* The tick follows this colour (SVGs use currentColor): dark on the light
       box, white in the dark theme where the box is dark. */
    color: var(--amo-color-checkbox-mark, #363b44);
}

.amo-checkbox-small .amo-checkbox-helper {
    width: 18px;
    height: 18px;
}

.amo-checkbox-text {
    margin-left: 8px;
    line-height: 14px;
}

/* Checkmark and minus SVG icons, centered in the box and hidden by default. */
.amo-checkbox-helper .amo-icon-checkmark,
.amo-checkbox-helper .amo-icon-minus {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.amo-checkbox-helper .amo-icon-checkmark svg,
.amo-checkbox-helper .amo-icon-minus svg {
    display: block;
}

/* Checked shows the checkmark; indeterminate shows the minus. */
.amo-checkbox-checked .amo-checkbox-helper .amo-icon-checkmark {
    display: flex;
}

.amo-checkbox-indeterminate .amo-checkbox-helper .amo-icon-minus {
    display: flex;
}

.amo-checkbox-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* column */
.amo-column {
    box-sizing: border-box;
    width: 272px;
    background: var(--amo-color-bg, #f5f5f5);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-column-head {
    padding: 15px 10px 0;
    text-align: center;
}

.amo-column-name {
    color: var(--amo-color-text, #363b44);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.amo-column-summary {
    margin-top: 4px;
    color: var(--amo-color-text-muted, #92989b);
    font-size: 13px;
}

.amo-column-line {
    height: 3px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}


/* context-menu */
.amo-context-menu {
    box-sizing: border-box;
    min-width: 180px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0.8px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
}

.amo-context-menu-item {
    padding: 1px 0;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
}

.amo-context-menu-inner {
    display: flex;
    align-items: center;
    padding: 8px 16px;
}

.amo-context-menu-item:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-context-menu-icon {
    display: inline-flex;
    width: 16px;
    margin-right: 10px;
}

.amo-context-menu-text {
    flex: 1 1 auto;
}

.amo-context-menu-item-disabled {
    color: var(--amo-color-text-light, #92989b);
    cursor: default;
    pointer-events: none;
}


/* date-filter */
.amo-date-filter {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 13px;
}

.amo-date-filter-head {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 4px 25px 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text-muted, #92989b);
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.amo-date-filter-head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    border: solid var(--amo-color-text-muted, #92989b);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-70%) rotate(45deg);
}

.amo-date-filter-icon {
    display: inline-flex;
    align-items: center;
    /* Collapse the baseline line box so the calendar glyph centres vertically
       with the placeholder text instead of sitting a couple of pixels high. */
    line-height: 0;
    margin-right: 8px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-date-filter-icon svg {
    display: block;
}

.amo-date-filter-period {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Clear (×) button: replaces the chevron while a non-default value is active —
   it sits where the chevron is and the chevron is hidden, so only one icon
   ever shows. */
.amo-date-filter-clear {
    position: absolute;
    /* Anchored to the 36px face (not 50% of the root), so a taller trigger or an
       open list below never drags the cross out of the first line. */
    top: 18px;
    right: 7px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

.amo-date-filter-clearable.amo-date-filter-has-value .amo-date-filter-clear {
    display: inline-flex;
}

/* While a clearable date filter holds a period, its border takes the colour of
   the blue cross so the filled state reads at a glance. */
.amo-date-filter-clearable.amo-date-filter-has-value .amo-date-filter-head {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* Only a clearable control swaps the chevron for the cross; a plain one keeps
   its chevron so it still reads as a dropdown once a value is set. */
.amo-date-filter-clearable.amo-date-filter-has-value .amo-date-filter-head::after {
    display: none;
}

.amo-date-filter-dropdown {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    display: none;
    min-width: 232px;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px 0 0;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.amo-date-filter-open .amo-date-filter-dropdown {
    display: block;
}

.amo-date-filter-dropdown .amo-date-filter-calendar-wrap {
    z-index: 1000;
    position: absolute;
}

/* First input: the date-range field that reveals the calendar. */
.amo-date-filter-range {
    position: relative;
    padding: 0 10px 8px;
}

/* The input and its leading calendar icon share a positioned wrapper. */
.amo-date-filter-range-input-wrap {
    position: relative;
    display: block;
}

.amo-date-filter-range-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--amo-color-text-muted, #92989b);
    pointer-events: none;
}

.amo-date-filter-range-icon svg {
    display: block;
}

.amo-date-filter-range-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    /* Extra left padding makes room for the leading calendar icon. */
    padding: 4px 8px 4px 30px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    cursor: pointer;
    outline: none;
}

.amo-date-filter-range-input::placeholder {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-date-filter-calendar-wrap {
    display: none;
    margin-top: 6px;
}

.amo-date-filter-calendar-open .amo-date-filter-calendar-wrap {
    display: block;
}

/* The editable "last N days" option: an inline, dashed-underlined number. */
.amo-date-filter-days-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.amo-date-filter-days-input {
    box-sizing: content-box;
    width: 24px;
    padding: 0;
    margin: 0 2px;
    border: none;
    border-bottom: 1px dashed var(--amo-color-border, #c5c5c5);
    background: transparent;
    color: var(--amo-color-text, #363b44);
    font: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.amo-date-filter-days-input::-webkit-outer-spin-button,
.amo-date-filter-days-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amo-date-filter-days-input:focus {
    border-bottom-color: var(--amo-color-primary, #4c8bf7);
}

.amo-date-filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.amo-date-filter-item {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--amo-color-border, #c5c5c5);
    padding: 6px 10px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
}

.amo-date-filter-item:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

/* Checkmark drawn after the name of the currently selected option. */
.amo-date-filter-item-selected::after {
    content: "";
    flex: none;
    margin-left: 8px;
    width: 4px;
    height: 8px;
    border: solid var(--amo-color-text, #363b44);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    margin-bottom: 3px;
}


/* donut-chart */
.amo-donut {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-donut-ring {
    position: relative;
    flex: none;
}

.amo-donut-svg {
    display: block;
}

.amo-donut-track {
    stroke: var(--amo-color-border-light, #e8eaeb);
}

/* Centre overlay sits above the ring. */
.amo-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.amo-donut-center-value {
    font-size: 20px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.amo-donut-center-label {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.amo-donut-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.amo-donut-legend-percent {
    flex: none;
    width: 42px;
    text-align: right;
    font-size: 18px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.amo-donut-legend-swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.amo-donut-legend-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-donut-legend-sub {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}


/* editable-table */
.amo-editable-table {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 13px;
    color: var(--amo-color-text, #363b44);
}

.amo-editable-table-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.amo-editable-table-row {
    display: table-row;
}

.amo-editable-table-cell {
    display: table-cell;
    box-sizing: border-box;
    height: 42px;
    padding: 8px 15px;
    vertical-align: middle;
    /* No vertical borders between cells — only a bottom rule per row. */
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-editable-table-cell-inner {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Match amoCRM's `.content-table__item__inner`: 15px text on a 19px line. */
    font-size: 15px;
    line-height: 19px;
    color: var(--amo-color-text, #363b44);
}

/* A cell that becomes editable on double-click hints at it on hover. */
.amo-editable-table-cell-editable {
    cursor: text;
}

.amo-editable-table-cell-editable:hover {
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

/* The inline editor fills the cell while it is being edited. */
.amo-editable-table-cell-editable .amo-text-input {
    width: 100%;
}

.amo-editable-table-cell-checkbox {
    width: 44px;
    padding-right: 0;
}

/* Header: muted, uppercase, and explicitly free of inner (vertical) borders. */
.amo-editable-table-cell-head {
    color: var(--amo-color-text-muted, #92989b);
    border-left: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-editable-table-head-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.amo-editable-table-add-row {
    display: flex;
    align-items: center;
    gap: 11px;
    box-sizing: border-box;
    height: 42px;
    padding: 8px 15px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
    user-select: none;
}

.amo-editable-table-add-row:hover {
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

/* The add-row "+" is sized to match the checkbox box: an 18×18 content box
   with the "+" glyph centered. */
.amo-editable-table-add-row .amo-tag-add {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.amo-editable-table-add-row .amo-tag-add::before {
    font-size: 18px;
    line-height: 1;
}

.amo-editable-table-add-text {
    font-size: 15px;
}

.amo-editable-table-row.amo-editable-table-row-head
    > .amo-editable-table-cell.amo-editable-table-cell-head:nth-child(2) {
    border-left: none;
}


/* feedback-form */
/* The feedback form renders inside createModalWindow, so the overlay and window
   come from the modal component; these rules style only its body. */
.amo-feedback {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-feedback-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amo-feedback-title {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

/* The free-text field is revealed only for the "other" reason. */
.amo-feedback-reason-text {
    display: none;
    margin-top: 4px;
}

.amo-feedback-has-other .amo-feedback-reason-text {
    display: block;
}

.amo-feedback-footer {
    display: flex;
    justify-content: center;
}

.amo-feedback-footer .amo-button {
    width: 100%;
}


/* funnel-chart */
.amo-funnel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-funnel-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.amo-funnel-row-clickable {
    cursor: pointer;
}

.amo-funnel-row-clickable:hover .amo-funnel-bar {
    filter: brightness(0.95);
}

.amo-funnel-percent {
    flex: none;
    width: 56px;
    text-align: right;
    font-size: 22px;
    font-weight: 300;
    color: var(--amo-color-text, #363b44);
    font-variant-numeric: tabular-nums;
}

.amo-funnel-bar-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.amo-funnel-bar {
    height: 30px;
    min-width: 2px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.amo-funnel-label {
    flex: none;
    width: 160px;
}

.amo-funnel-label-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-funnel-label-sub {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}


/* input */
.amo-text-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 20px;
    outline: none;
    transition: border-color 0.15s ease;
}

.amo-text-input::placeholder {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-text-input:focus {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-text-input:disabled {
    background: var(--amo-color-bg-subtle, #f8f8f9);
    opacity: 0.7;
    cursor: default;
}

/* ---- Clearable input (trailing blue × button) ---- */
.amo-text-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* Leave room for the cross so long text does not run under it. */
.amo-text-input-wrap .amo-text-input {
    padding-right: 30px;
}

.amo-text-input-clear {
    position: absolute;
    /* Anchored to the 36px face (not 50% of the root), so a taller trigger or an
       open list below never drags the cross out of the first line. */
    top: 18px;
    right: 8px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* While a clearable input holds a value, its border takes the colour of the blue
   cross so the filled state reads at a glance. */
.amo-text-input-wrap.amo-text-input-has-value .amo-text-input {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* The cross shows only once the field has a value (it has been edited). */
.amo-text-input-has-value .amo-text-input-clear {
    display: inline-flex;
}


/* label */
/*
 * Small text label (amoCRM's "Новое" market badge): a rounded pill with bold
 * coloured text on a tinted fill. Each `-<color>` modifier sets a light
 * background + saturated text pair, with deeper fills for dark theme. A custom
 * colour is applied inline, so the base rule carries only shape and type.
 */
.amo-label {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--amo-radius, 4px);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* violet — the default "Новое" accent. */
.amo-label-violet {
    background: #eeeefe;
    color: #7259eb;
}

.amo-label-blue {
    background: #e5f0ff;
    color: #2f80ed;
}

.amo-label-green {
    background: #e6f6ea;
    color: #35a948;
}

.amo-label-orange {
    background: #fff0e0;
    color: #ef8f3c;
}

.amo-label-red {
    background: #ffecec;
    color: #e45b5b;
}

.amo-label-grey {
    background: #eef0f1;
    color: #7a8085;
}

/* Dark theme: deeper fills with a lighter, legible text tint. */
:root[data-theme="dark"] .amo-label-violet,
[data-theme="dark"] .amo-label-violet {
    background: #3f4775;
    color: #e8dcfd;
}

:root[data-theme="dark"] .amo-label-blue,
[data-theme="dark"] .amo-label-blue {
    background: #27405f;
    color: #bcd7ff;
}

:root[data-theme="dark"] .amo-label-green,
[data-theme="dark"] .amo-label-green {
    background: #27492f;
    color: #b7e6c3;
}

:root[data-theme="dark"] .amo-label-orange,
[data-theme="dark"] .amo-label-orange {
    background: #4d3a23;
    color: #ffd7ad;
}

:root[data-theme="dark"] .amo-label-red,
[data-theme="dark"] .amo-label-red {
    background: #4f2e2e;
    color: #ffc9c9;
}

:root[data-theme="dark"] .amo-label-grey,
[data-theme="dark"] .amo-label-grey {
    background: #3a4046;
    color: #cfd6da;
}


/* leaderboard */
.amo-leaderboard {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

/* Header summary. */
.amo-leaderboard-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.amo-leaderboard-header-value {
    font-size: 34px;
    font-weight: 300;
    color: var(--amo-color-primary, #4c8bf7);
    font-variant-numeric: tabular-nums;
}

.amo-leaderboard-header-right {
    text-align: right;
}

.amo-leaderboard-header-delta {
    font-size: 20px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.amo-leaderboard-header-period {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-leaderboard-header-sum {
    margin-top: 2px;
    font-size: 13px;
    color: var(--amo-color-text, #363b44);
    font-variant-numeric: tabular-nums;
}

/* Ranked list. */
.amo-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amo-leaderboard-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.amo-leaderboard-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--amo-color-border-light, #e8eaeb);
}

.amo-leaderboard-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.amo-leaderboard-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.amo-leaderboard-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-leaderboard-trailing {
    flex: none;
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
    font-variant-numeric: tabular-nums;
}

.amo-leaderboard-detail {
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-leaderboard-bar {
    margin-top: 6px;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--amo-color-border-light, #e8eaeb);
    overflow: hidden;
}

.amo-leaderboard-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}


/* license-badge */
/* Base badge: expired/inactive (red with white text). The state modifiers
   below override the background and text colour. These are status colours, so
   they stay constant across light and dark themes. */
.amo-license-badge {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 162px;
    width: 162px;
    max-width: 162px;
    padding: 1px 0;
    margin: 4px 0;
    background-color: var(--amo-color-danger, #ef3131);
}

/* Active licence and free licence: green with dark text. */
.amo-license-badge-active,
.amo-license-badge-free {
    background-color: var(--amo-color-license-active, #ccff66);
}

/* Active trial: orange with dark text. */
.amo-license-badge-test {
    background-color: var(--amo-color-license-test, #f6a623);
}

.amo-license-badge-content {
    font-size: 13px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-weight: 400;
    color: #ffffff;
}

.amo-license-badge-active .amo-license-badge-content,
.amo-license-badge-free .amo-license-badge-content,
.amo-license-badge-test .amo-license-badge-content {
    color: #363b44;
}


/* line-chart */
.amo-line {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-line-svg {
    display: block;
    overflow: visible;
}

.amo-line-grid {
    stroke: var(--amo-color-border-light, #e8eaeb);
    stroke-width: 1;
}

.amo-line-axis-label {
    fill: var(--amo-color-text-muted, #92989b);
    font-size: 11px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-line-series {
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.amo-line-point {
    stroke: var(--amo-color-surface, #ffffff);
    stroke-width: 1;
}


/* loader */
/* Centring wrapper for the spinner. */
.amo-loader {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

/* The spinning ring; the transparent right edge creates the gap. Width,
   height, border width and colour can be overridden inline. */
.amo-loader-spinner {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 2px solid var(--amo-color-primary, #4c8bf7);
    border-right-color: transparent;
    background-color: transparent;
    animation: amo-loader-spin 1s linear infinite;
}

@keyframes amo-loader-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* menu-bar */
/*
 * amoCRM style menu bar (amoМаркет navigation): a horizontal row of menu tabs
 * with a muted bottom divider; the active tab is blue with a blue underline bar,
 * and overflowing tabs collapse behind a trailing "…" button.
 */
.amo-menu-bar {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 48px;
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
    color: var(--amo-color-text, #363b44);
}

.amo-menu-bar * {
    box-sizing: border-box;
}

.amo-menu-bar-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 100%;
    margin: 0 10px 0 0;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--amo-color-text, #363b44);
    font: inherit;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.amo-menu-bar-item:hover {
    color: var(--amo-color-primary-border, #4077d6);
}

.amo-menu-bar-item-active {
    color: var(--amo-color-primary-border, #4077d6);
}

/* The active underline: a 3px blue bar overhanging the item and sitting on the
   nav divider (amoCRM draws it with a pseudo-element, not a border). */
.amo-menu-bar-item-active::after {
    content: "";
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -1px;
    height: 3px;
    background: var(--amo-color-primary-border, #4077d6);
}

.amo-menu-bar-item-hidden {
    display: none;
}

/* The trailing "Новое" style flag is the shared `label` component (amo-label). */

/* ---- Overflow "…" button and its dropdown ---- */
.amo-menu-bar-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.amo-menu-bar-more-hidden {
    display: none;
}

.amo-menu-bar-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--amo-color-text, #363b44);
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    cursor: pointer;
}

.amo-menu-bar-more:hover {
    color: var(--amo-color-primary-border, #4077d6);
}

.amo-menu-bar-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    display: none;
    margin-top: 2px;
}

.amo-menu-bar-more-open .amo-menu-bar-more-menu {
    display: block;
}


/* modal-window */
/* Dimmed backdrop. */
.amo-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    box-sizing: border-box;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.45);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-modal-open {
    display: flex;
}

/* Surface window. */
.amo-modal-window {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 640px;
    max-width: 100%;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background-color: var(--amo-color-surface, #ffffff);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.amo-modal-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    min-height: 128px;
    max-height: 480px;
    overflow: auto;
    padding: 16px;
}


/* multi-select */
.amo-multi-select {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 13px;
}

.amo-multi-select-trigger {
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 4px 25px 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.amo-multi-select-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    border: solid var(--amo-color-text-muted, #92989b);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-70%) rotate(45deg);
}

.amo-multi-select-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Same dim colour as the master row's text. */
    color: var(--amo-color-text-muted, #92989b);
}

/* Clear (×) button: replaces the chevron while something is selected — it sits
   where the chevron is and the chevron is hidden, so only one icon ever shows. */
.amo-multi-select-clear {
    position: absolute;
    /* Anchored to the 36px face (not 50% of the root), so a taller trigger or an
       open list below never drags the cross out of the first line. */
    top: 18px;
    right: 7px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.amo-multi-select-clearable.amo-multi-select-has-value .amo-multi-select-clear {
    display: inline-flex;
}

/* While a clearable multi-select holds a selection, its border takes the colour
   of the blue cross so the filled state reads at a glance. */
.amo-multi-select-clearable.amo-multi-select-has-value .amo-multi-select-trigger {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* Only a clearable control swaps the chevron for the cross; a plain one keeps
   its chevron so it still reads as a dropdown once a value is set. */
.amo-multi-select-clearable.amo-multi-select-has-value .amo-multi-select-trigger::after {
    display: none;
}

.amo-multi-select-title-empty {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-multi-select-list {
    position: absolute;
    z-index: 1001;
    /* Aligned to the top border of the trigger (the face), overlaying it. */
    top: 0;
    left: 0;
    right: 0;
    display: none;
    /* The option rows scroll inside their own scroll area below the master row. */
    padding: 0;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.amo-multi-select-open .amo-multi-select-list {
    display: block;
}

.amo-multi-select-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* Match the height of a selector option (.amo-select-item). */
    min-height: 36px;
    padding: 0 6px;
}

.amo-multi-select-item .amo-checkbox {
    width: 100%;
}

.amo-multi-select-item:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

/* Master "select all / deselect" row: no bottom divider, dimmed text like the
   face placeholder. */
.amo-multi-select-item-master .amo-checkbox-text {
    color: var(--amo-color-text-muted, #92989b);
}


/* nav-item */
.amo-nav-item {
    box-sizing: border-box;
    width: 65px;
    background: var(--amo-color-nav-bg, #1b3446);
}

.amo-nav-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 2px;
    text-decoration: none;
    color: var(--amo-color-text-light, #92989b);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-nav-item-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    opacity: 0.8;
}

.amo-nav-item-icon .amo-badge {
    position: absolute;
    top: -6px;
    right: -8px;
}

.amo-nav-item-title {
    margin-top: 6px;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
}

.amo-nav-item:hover .amo-nav-item-link,
.amo-nav-item-active .amo-nav-item-link {
    color: #ffffff;
}

.amo-nav-item-active .amo-nav-item-icon {
    opacity: 1;
}


/* number-range */
.amo-number-range {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.amo-number-range .amo-text-input {
    flex: 1 1 0;
    min-width: 0;
}

.amo-number-range-separator {
    flex: none;
    color: var(--amo-color-text-muted, #92989b);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}


/* payment-block */
.amo-payment {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

/* Status line. */
.amo-payment-status-test,
.amo-payment-status-active {
    color: var(--amo-color-payment-accent, #749e42);
}

.amo-payment-status-expired,
.amo-payment-status-unpaid {
    color: var(--amo-color-danger, #ef3131);
}

/* Tariff selector. */
.amo-payment-tariffs {
    position: relative;
    width: 100%;
    margin: 16px 0;
}

/* The line connecting the circles, from the first circle centre to the last. */
.amo-payment-line {
    position: absolute;
    top: 92px;
    left: 62px;
    right: 62px;
    height: 4px;
    border-radius: 4px;
    background: var(--amo-color-border, #c5c5c5);
}

.amo-payment-options {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
}

.amo-payment-option {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 125px;
    min-height: 195px;
    padding: 16px 8px;
    border: 2px solid transparent;
    border-radius: var(--amo-radius, 4px);
    cursor: pointer;
    user-select: none;
}

.amo-payment-option-selected {
    border-color: var(--amo-color-payment-accent, #749e42);
}

.amo-payment-option-title {
    font-size: 18px;
    text-align: center;
}

/* The step circle; the checkmark appears when the option is selected. */
.amo-payment-circle {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* Reserve the selected circle's footprint (28px) so the gift text and price
       below keep the same position whether or not the option is selected; the
       dot itself stays 20px. */
    margin: 4px 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--amo-color-border, #c5c5c5);
    color: #ffffff;
}

.amo-payment-circle .amo-icon-checkmark-large {
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.amo-payment-circle .amo-icon-checkmark-large svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Selected step: a hollow ring on the surface with a green border and tick. */
.amo-payment-option-selected .amo-payment-circle {
    width: 28px;
    height: 28px;
    /* No compensating margin: the 28px circle already fills the reserved slot. */
    margin: 0;
    border-color: var(--amo-color-payment-accent, #749e42);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-payment-accent, #749e42);
}

.amo-payment-option-selected .amo-payment-circle .amo-icon-checkmark-large {
    display: flex;
}

.amo-payment-option-desc {
    min-height: 50px;
    font-size: 15px;
    text-align: center;
    color: var(--amo-color-payment-accent, #749e42);
}

.amo-payment-option-price {
    font-size: 16px;
    color: var(--amo-color-text, #363b44);
}

/* Controls. */
.amo-payment-controls {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    margin: 16px 0;
}

.amo-payment-price {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.amo-payment-loader {
    display: inline-flex;
    padding: 0 20px;
}

/* Result modal content. */
.amo-payment-result {
    font-size: 15px;
}

.amo-payment-result-success {
    color: var(--amo-color-payment-accent, #749e42);
}

.amo-payment-result-failed {
    color: var(--amo-color-danger, #ef3131);
}


/* payment-summary */
/*
 * Standalone right block (total). Reuses the billing block's summary classes
 * (`.amo-amocrm-payment-summary*`), which already style it as a card; this file
 * only names the root so the shared bundle covers its appearance.
 */
.amo-payment-summary.amo-amocrm-payment-summary {
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}


/* period-selector */
/*
 * Standalone period selector. It reuses the billing block's period classes
 * (`.amo-amocrm-payment-periods*`); this file only neutralises the section
 * divider those classes carry inside the full block, so the selector stands on
 * its own.
 */
.amo-period-selector.amo-amocrm-payment-periods {
    margin-top: 0;
    /* The track and dots are a light tint meant to sit on a surface, so the
       standalone selector carries its own surface background (otherwise the
       line blends into a non-white host). */
    padding: 18px 16px 12px;
    border-top: none;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}


/* phone-input */
.amo-phone-input {
    position: relative;
    box-sizing: border-box;
    width: 260px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

.amo-phone-input-field {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: 36px;
}

/* Country selector (flag + dial code). */
.amo-phone-input-country {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 0 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    cursor: pointer;
}

.amo-phone-input-country:hover {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-phone-input-flag {
    font-size: 16px;
    line-height: 1;
}

.amo-phone-input-caret {
    width: 6px;
    height: 6px;
    border: solid var(--amo-color-text-muted, #92989b);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
}

/* Number field with its ghost mask overlay. */
.amo-phone-input-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.amo-phone-input-element {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: transparent;
    color: var(--amo-color-text, #363b44);
    font: inherit;
    position: relative;
    z-index: 1;
}

.amo-phone-input-element:focus {
    outline: none;
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* The dimmed mask remainder, aligned by an invisible copy of the typed value. */
.amo-phone-input-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 4px 9px;
    pointer-events: none;
    white-space: pre;
    color: var(--amo-color-text-muted, #92989b);
    opacity: 0.5;
}

.amo-phone-input-ghost-typed {
    visibility: hidden;
}

/* Country dropdown. */
.amo-phone-input-dropdown {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.amo-phone-input-open .amo-phone-input-dropdown {
    display: flex;
}

.amo-phone-input-search {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    padding: 4px 8px;
    border: none;
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
}

.amo-phone-input-search:focus {
    outline: none;
}

.amo-phone-input-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    cursor: pointer;
}

.amo-phone-input-option:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-phone-input-option-dial {
    flex: none;
    min-width: 44px;
    color: var(--amo-color-text-muted, #92989b);
    font-variant-numeric: tabular-nums;
}

.amo-phone-input-option-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* pipeline-stage-selector */
.amo-pipeline-stage {
    /* Default selector size; the option viewport inherits this width. */
    --amo-pipeline-stage-width: 240px;
    position: relative;
    box-sizing: border-box;
    width: var(--amo-pipeline-stage-width);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

/*
 * The collapsed face looks like a normal select button. The dropdown header
 * reuses the same class so the open overlay, anchored to the component's top,
 * sits exactly over the button.
 */
.amo-pipeline-stage-face {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    background: var(--amo-color-surface, #ffffff);
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.amo-pipeline-stage-face-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--amo-color-text, #363b44);
}

/* Selected value: "pipeline → colour-filled stage", each part ellipsised. */
.amo-pipeline-stage-value-pipeline,
.amo-pipeline-stage-value-stage,
.amo-pipeline-stage-value-placeholder {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 25% / 75% split of the face space (grow ratio 1:3, zero basis). */
.amo-pipeline-stage-value-pipeline {
    flex: 1 1 0;
}

.amo-pipeline-stage-value-stage {
    flex: 3 1 0;
    padding: 1px 6px;
    border-radius: var(--amo-radius, 4px);
}

.amo-pipeline-stage-value-placeholder {
    flex: 1 1 auto;
    color: var(--amo-color-text-muted, #92989b);
}

/* Clear (×) button of a clearable selector: shown while a stage is selected,
   anchored to the collapsed face. The open overlay covers it like the face. */
.amo-pipeline-stage-clear {
    position: absolute;
    top: 19px;
    right: 7px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

/* Leave room for the cross so the stage pill does not run under it. */
.amo-pipeline-stage-clearable > .amo-pipeline-stage-face {
    padding-right: 30px;
}

.amo-pipeline-stage-clearable.amo-pipeline-stage-has-value .amo-pipeline-stage-clear {
    display: inline-flex;
}

/* While a clearable selector holds a stage, its face border takes the colour of
   the blue cross so the filled state reads at a glance. */
.amo-pipeline-stage-clearable.amo-pipeline-stage-has-value > .amo-pipeline-stage-face {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/*
 * Full-area scroll wrapper: a fixed surface covering the whole viewport that
 * holds the dropdown. A wheel (scroll) anywhere inside it drives the viewport,
 * and clicking its transparent backdrop closes the overlay. Shown only when open.
 */
.amo-pipeline-stage-scroll {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: none;
    overflow: auto;
    background: transparent;
}

.amo-pipeline-stage-open .amo-pipeline-stage-scroll {
    display: block;
}

/*
 * The dropdown overlay is absolutely positioned (top/left/width set to the
 * face's rect by the component), so it sits exactly over the button and hangs
 * over the content below. Transparent — only the pipeline buttons are opaque.
 */
.amo-pipeline-stage-dropdown {
    position: absolute;
    box-sizing: border-box;
    background: transparent;
}

/* Hide the underlying button while the overlay (with its own header) is open. */
.amo-pipeline-stage-open > .amo-pipeline-stage-face {
    visibility: hidden;
}

/* The header mirrors the face at the top of the overlay. */
.amo-pipeline-stage-dropdown .amo-pipeline-stage-face {
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/*
 * The window is the fixed-height "working area": it clips a much taller viewport
 * so the options outside it stay hidden. The viewport is translated on wheel,
 * giving the animated custom scroll.
 */
.amo-pipeline-stage-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.amo-pipeline-stage-viewport {
    position: absolute;
    /* Same length as the selector (the width is inherited via the token). */
    width: var(--amo-pipeline-stage-width);
    display: flex;
    flex-direction: column;
    height: calc(100vh * 2.5);
    background: transparent;
    transform: translateY(0);
    transition: transform 0.18s ease-out;
    will-change: transform;
}

/*
 * Pipeline button: a bordered container the same height as the main face when
 * collapsed. It holds the clickable name row and the (nested) stage list, which
 * is revealed on click while the other pipelines collapse. Each button carries
 * an 8px bottom gap.
 */
.amo-pipeline-stage-pipeline {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--amo-color-surface, #ffffff);
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
}

.amo-pipeline-stage-pipeline-name {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 15px;
    color: var(--amo-color-text, #363b44);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Stage list: nested in the pipeline button, hidden until the name is clicked. */
.amo-pipeline-stage-stages {
    display: none;
}

.amo-pipeline-stage-pipeline-open .amo-pipeline-stage-stages {
    display: block;
}

/*
 * Stage rows match amoCRM's `pipeline-select__dropdown__item`: flush, no gaps
 * and no per-row radius (a continuous colour band), ~28px tall, 13px dark text,
 * with a 24px left gutter for the selected-row checkmark.
 */
.amo-pipeline-stage-option {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 28px;
    margin: 0;
    padding: 6px 10px 6px 24px;
    font-size: 13px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
}

.amo-pipeline-stage-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The checkmark (the checkbox component's SVG) sits in the left gutter and only
 * shows on the selected row; it inherits the row's text colour via currentColor.
 */
.amo-pipeline-stage-option-check {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    opacity: 0;
}

.amo-pipeline-stage-option-check .amo-icon-checkmark,
.amo-pipeline-stage-option-check .amo-icon-checkmark svg {
    display: block;
    width: 8px;
    height: 8px;
}

.amo-pipeline-stage-option-selected .amo-pipeline-stage-option-check {
    opacity: 1;
}

.amo-pipeline-stage-option:hover {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08);
}


/* progress-bar */
.amo-progress {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-progress-label {
    font-size: 13px;
    color: var(--amo-color-text, #363b44);
}

.amo-progress-bar-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.amo-progress-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    border-radius: 2px;
    background: var(--amo-color-border-light, #e8eaeb);
    overflow: hidden;
}

.amo-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* The target marker line; `overflow: hidden` on the track keeps it inside. */
.amo-progress-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--amo-color-text, #363b44);
    transform: translateX(-1px);
}

.amo-progress-value {
    flex: none;
    min-width: 64px;
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
    font-variant-numeric: tabular-nums;
}


/* radio */
.amo-radio-label {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
    line-height: 19px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
    user-select: none;
}

.amo-radio {
    position: relative;
    box-sizing: border-box;
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
}

.amo-radio input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

.amo-radio-helper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 2px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: 100%;
    background: var(--amo-color-surface, #ffffff);
    overflow: hidden;
}

.amo-radio-dot {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: transparent;
    transition: background-color 0.15s ease;
}

.amo-radio-checked .amo-radio-dot {
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-radio-label-text {
    margin-left: 8px;
}

.amo-radio-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* rating */
/* Star rating: empty stars with a filled copy clipped to the value on top. */
.amo-rating {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 0;
    vertical-align: middle;
}

.amo-rating-star {
    position: relative;
    display: inline-block;
    flex: none;
}

.amo-rating-star svg {
    display: block;
}

/* The filled layer: its width is the star's share of the value (inline style). */
.amo-rating-star-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

.amo-rating-star-off {
    fill: var(--amo-color-border-light, #e8eaeb);
}

.amo-rating-star-on {
    fill: var(--amo-color-primary, #4c8bf7);
}


/* responsible */
/* Root wrapper; the dropdown is positioned relative to it. */
.amo-responsible {
    position: relative;
    box-sizing: border-box;
    width: 260px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

/* The field showing the selected manager (or the placeholder). */
.amo-responsible-field {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    cursor: pointer;
}

.amo-responsible-field:hover {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-responsible-placeholder {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-responsible-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdown popover listing every manager grouped by department. */
.amo-responsible-list {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    /* The inner scroll area owns the scrolling; this is just the popover. */
    overflow: hidden;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.amo-responsible-open .amo-responsible-list {
    display: flex;
}

.amo-responsible-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.amo-responsible-group-header {
    user-select: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 8px;
}

.amo-responsible-group-name {
    /* Always the light-theme text colour, in both themes. */
    color: #363b44;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-responsible-user {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
}

.amo-responsible-user:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

/* The currently selected manager, highlighted in the list (not bold). */
.amo-responsible-user-selected {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-responsible-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The online-state marker shown to the right of a manager's name. */
.amo-responsible-user-state {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amo-color-success, #41d373);
}


/* responsibles */
/* Root wrapper; the dropdown is positioned relative to it. */
.amo-responsibles {
    position: relative;
    box-sizing: border-box;
    width: 260px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

/* The field showing the selected users as chips (or the placeholder). */
.amo-responsibles-input {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 36px;
    padding: 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    cursor: pointer;
}

.amo-responsibles-input:hover {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-responsibles-placeholder {
    color: var(--amo-color-text-muted, #92989b);
}

/* A selected user, rendered as a removable chip. */
.amo-responsibles-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: var(--amo-radius, 4px);
    border: 1px solid var(--amo-color-border, #c5c5c5);
    background: var(--amo-color-hover, #c5c5c550);
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
}

.amo-responsibles-chip:hover {
    border-color: var(--amo-color-danger, #ef3131);
    color: var(--amo-color-danger, #ef3131);
}

/* Dropdown popover listing the remaining users by group. */
.amo-responsibles-list {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    /* The inner scroll area owns the scrolling; this is just the popover. */
    overflow: hidden;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.amo-responsibles-open .amo-responsibles-list {
    display: flex;
}

.amo-responsibles-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.amo-responsibles-group-header {
    user-select: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    padding: 8px;
}

.amo-responsibles-group-name {
    /* Always the light-theme text colour, in both themes. */
    color: #363b44;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The "whole department" button inside a group header. */
.amo-responsibles-select-all {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 2px 4px;
    border: 1px solid var(--amo-color-text, #363b44);
    border-radius: var(--amo-radius, 4px);
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
}

.amo-responsibles-select-all:hover {
    color: var(--amo-color-surface, #ffffff);
    border-color: var(--amo-color-surface, #ffffff);
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-responsibles-user {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
}

.amo-responsibles-user:hover {
    background: var(--amo-color-hover, #c5c5c550);
}


/* scroll-area */
/* Root wrapper; the overlay track is positioned relative to it. */
.amo-scroll-area {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

/* The scrollable viewport; the native scrollbar is hidden in every engine. */
.amo-scroll-area-content {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge/IE */
}

.amo-scroll-area-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome, Safari */
}

/* The slim rounded track overlaid on the right; shown only when scrollable. */
.amo-scroll-area-track {
    position: absolute;
    top: 0;
    right: 0px;
    width: 6px;
    height: 100%;
    border-radius: 120px;
    background-color: var(--amo-color-scrollbar-track, #eaeaea);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.amo-scroll-area-scrollable .amo-scroll-area-track {
    opacity: 1;
    pointer-events: auto;
}

/* The draggable thumb, sized to the visible/total ratio. */
.amo-scroll-area-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-radius: 24px;
    background-color: var(--amo-color-scrollbar-thumb, #cdcdcd);
    cursor: pointer;
}

.amo-scroll-area-thumb:hover,
.amo-scroll-area-dragging .amo-scroll-area-thumb {
    background-color: var(--amo-color-text-muted, #92989b);
}


/* search */
.amo-search {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 0;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-search .amo-icon-search {
    display: inline-flex;
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-search .amo-icon-search svg {
    display: block;
}

.amo-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--amo-color-text, #363b44);
    font-family: inherit;
    font-size: 15px;
    line-height: 20px;
    outline: none;
}

.amo-search-input::placeholder {
    color: var(--amo-color-text-light, #92989b);
}


/* select */
.amo-select {
    position: relative;
    display: inline-block;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}

.amo-select-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 140px;
    min-height: 36px;
    padding: 4px 25px 4px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.amo-select-button:hover {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-select-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    border: solid var(--amo-color-text-muted, #92989b);
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-70%) rotate(45deg);
}

/* Clear (×) button: replaces the chevron while a value is set — it sits where
   the chevron is and the chevron is hidden, so only one icon ever shows. */
.amo-select-clear {
    position: absolute;
    /* Anchored to the 36px face (not 50% of the root), so a taller trigger or an
       open list below never drags the cross out of the first line. */
    top: 18px;
    right: 7px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}

.amo-select-clearable.amo-select-has-value .amo-select-clear {
    display: inline-flex;
}

/* While a clearable select holds a value, its border takes the colour of the
   blue cross so the filled state reads at a glance. */
.amo-select-clearable.amo-select-has-value .amo-select-button {
    border-color: var(--amo-color-primary, #4c8bf7);
}

/* Only a clearable control swaps the chevron for the cross; a plain one keeps
   its chevron so it still reads as a dropdown once a value is set. */
.amo-select-clearable.amo-select-has-value .amo-select-button::after {
    display: none;
}

.amo-select-list {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    display: none;
    /* The inner scroll area owns the scrolling; this is just the popover. */
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.amo-select-open .amo-select-list {
    display: block;
}

.amo-select-item {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
}

.amo-select-item:hover {
    background: var(--amo-color-hover, #c5c5c550);
}

.amo-select-item-selected {
    background: var(--amo-color-hover, #c5c5c550);
}


/* settings-contacts */
/* Widget settings «Контакты» tab: contact cards on the left, the request form
   on the right. Every colour is a token, so `data-theme="dark"` restyles it. */
.amo-settings-contacts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    box-sizing: border-box;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--amo-color-text, #363b44);
}

.amo-settings-contacts *,
.amo-settings-contacts *::before,
.amo-settings-contacts *::after {
    box-sizing: border-box;
}

/* Only the cards or only the form: the remaining part takes the full width. */
.amo-settings-contacts-single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 720px) {
    .amo-settings-contacts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The contact cards (one per manager) and the support card, stacked. */
.amo-settings-contacts-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* No contacts and no support card: the column leaves the grid entirely. */
.amo-settings-contacts-column-empty {
    display: none;
}

.amo-settings-contacts-card {
    margin: 0;
    padding: 16px 20px 20px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    min-width: 0;
}

.amo-settings-contacts-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

/* ---- Manager card ---- */
.amo-settings-contacts-manager {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.amo-settings-contacts-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    object-fit: cover;
    background: var(--amo-color-tag-bg, #eef0f1);
    color: var(--amo-color-text-muted, #92989b);
    font-size: 18px;
    font-weight: 700;
}

.amo-settings-contacts-name {
    margin: 2px 0 0;
    font-weight: 700;
}

.amo-settings-contacts-role {
    margin: 0;
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-settings-contacts-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* ---- Caption / value rows (manager details, support links) ---- */
.amo-settings-contacts-rows {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    row-gap: 8px;
    margin: 0;
}

.amo-settings-contacts-rows dt {
    margin: 0;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-settings-contacts-rows dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.amo-settings-contacts-link {
    color: var(--amo-color-link, #4c8bf7);
    text-decoration: none;
}

.amo-settings-contacts-link:hover {
    text-decoration: underline;
}

/* ---- Request form ---- */
.amo-settings-contacts-lead {
    margin: -6px 0 16px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-settings-contacts-field {
    margin-bottom: 16px;
}

.amo-settings-contacts-label {
    display: block;
    margin: 0 0 6px;
}

/* The embedded phone input and textarea take the form's width. */
.amo-settings-contacts-field .amo-phone-input {
    width: 100%;
}

.amo-settings-contacts-field .amo-textarea {
    display: block;
    min-height: 110px;
}

.amo-settings-contacts-drop {
    padding: 18px 12px;
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-bg-subtle, #f8f8f9);
    text-align: center;
    cursor: pointer;
    outline: none;
}

.amo-settings-contacts-drop:hover,
.amo-settings-contacts-drop:focus-visible,
.amo-settings-contacts-drop-over {
    border-color: var(--amo-color-primary, #4c8bf7);
}

.amo-settings-contacts-drop-pick {
    color: var(--amo-color-link, #4c8bf7);
    text-decoration: underline;
}

.amo-settings-contacts-drop-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--amo-color-text-muted, #92989b);
}

/* The native picker is opened through the drop area; the input stays hidden. */
.amo-settings-contacts-file-input {
    display: none;
}

.amo-settings-contacts-files {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.amo-settings-contacts-files:empty {
    display: none;
}

.amo-settings-contacts-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-settings-contacts-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-settings-contacts-file-remove {
    flex: none;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--amo-color-text-muted, #92989b);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.amo-settings-contacts-file-remove:hover {
    color: var(--amo-color-danger, #ef3131);
}

.amo-settings-contacts-error {
    margin-top: 6px;
    font-size: 13px;
    color: var(--amo-color-danger, #ef3131);
}

.amo-settings-contacts-error:empty {
    display: none;
}

/* The thank-you line shows only while the root carries the `sent` state. */
.amo-settings-contacts-success {
    display: none;
    margin-top: 10px;
    color: var(--amo-color-success, #749e42);
}

.amo-settings-contacts-sent .amo-settings-contacts-success {
    display: block;
}


/* settings-updates */
/* Widget settings «Обновления» tab: a timeline of milestones and, in its place
   once an update is opened, the screen with its full list of changes. Colours
   are tokens; the few the palette lacks are local variables with a dark
   counterpart, so `data-theme="dark"` restyles the whole component. */
.amo-settings-updates {
    /* Secondary text: darker than the muted token, for 12px captions. */
    --amo-settings-updates-secondary: #5f666b;
    --amo-settings-updates-link: var(--amo-color-primary-hover, #3f7ae8);
    --amo-settings-updates-link-hover: var(--amo-color-primary-border, #4077d6);
    /* The «Новое» accent: the badge pair and the "added" group heading. */
    --amo-settings-updates-new-bg: #ede7fd;
    --amo-settings-updates-new-text: #6a45dc;
    --amo-settings-updates-fixed: #5b7d33;
    /* The side padding of the timeline card; its footer bleeds through it. */
    --amo-settings-updates-gutter: 24px;

    container-type: inline-size;
    container-name: amo-settings-updates;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--amo-color-text, #363b44);
}

[data-theme="dark"] .amo-settings-updates,
.amo-settings-updates[data-theme="dark"] {
    --amo-settings-updates-secondary: #97a6be;
    --amo-settings-updates-link-hover: #6dbcff;
    --amo-settings-updates-new-bg: #3a2f6b;
    --amo-settings-updates-new-text: #d3c6ff;
    --amo-settings-updates-fixed: #8fd19e;
}

.amo-settings-updates *,
.amo-settings-updates *::before,
.amo-settings-updates *::after {
    box-sizing: border-box;
}

/* ---- Shared pieces ---- */

/* A text link drawn on a button: back, previous / next, "show earlier". */
.amo-settings-updates-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--amo-radius-small, 2px);
    background: none;
    font: inherit;
    text-align: left;
    color: var(--amo-settings-updates-link);
    cursor: pointer;
}

.amo-settings-updates-link:hover {
    color: var(--amo-settings-updates-link-hover);
}

.amo-settings-updates-link:focus-visible {
    outline: 2px solid var(--amo-color-primary, #4c8bf7);
    outline-offset: 2px;
}

.amo-settings-updates-glyph {
    flex: none;
}

/* The buttons of the design: 36px tall, and the secondary one with a light
   border instead of the text colour. */
.amo-settings-updates .amo-button {
    min-height: 36px;
}

.amo-settings-updates .amo-button-inner {
    padding: 0 14px;
}

.amo-settings-updates .amo-settings-updates-action .amo-button-inner {
    padding: 0 16px;
}

.amo-settings-updates .amo-button-default {
    border-color: var(--amo-color-border, #c5c5c5);
}

/* Date / version line with the status badge. */
.amo-settings-updates-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
    font-size: 12px;
    color: var(--amo-settings-updates-secondary);
}

.amo-settings-updates .amo-settings-updates-badge {
    height: auto;
    padding: 3px 6px;
    border-radius: var(--amo-radius-small, 2px);
    font-size: 11px;
    line-height: 1;
}

.amo-settings-updates .amo-settings-updates-badge-new {
    background: var(--amo-settings-updates-new-bg);
    color: var(--amo-settings-updates-new-text);
}

.amo-settings-updates .amo-settings-updates-badge-neutral {
    background: var(--amo-color-status-bg, #e8eaeb);
    color: var(--amo-color-status-text, #363b44);
}

/* A 16:9 picture slot (a banner): the picture fills it. */
.amo-settings-updates .amo-settings-updates-media {
    aspect-ratio: 16 / 9;
    background: var(--amo-color-tag-bg, #eef0f1);
}

.amo-settings-updates-media > img,
.amo-settings-updates-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Timeline ---- */
.amo-settings-updates-list {
    padding: 18px var(--amo-settings-updates-gutter) 8px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
}

.amo-settings-updates-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

.amo-settings-updates-empty {
    margin: 0;
    padding: 8px 0 18px;
    color: var(--amo-settings-updates-secondary);
}

.amo-settings-updates-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 16px;
}

/* The rail: a dot level with the row's middle and a line through it. The line
   is two segments — above and below the dot — each running to the item's edge,
   so the segments of neighbouring items meet and the dots read as connected.
   The first item has no segment above, the last none below. */
.amo-settings-updates-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.amo-settings-updates-rail::before,
.amo-settings-updates-rail::after {
    content: "";
    flex: 1 1 0;
    width: 2px;
    background: var(--amo-color-border-light, #e8eaeb);
}

.amo-settings-updates-item:first-child .amo-settings-updates-rail::before,
.amo-settings-updates-item:last-child .amo-settings-updates-rail::after {
    visibility: hidden;
}

.amo-settings-updates-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--amo-color-border, #c5c5c5);
}

.amo-settings-updates-item-latest .amo-settings-updates-dot {
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-settings-updates-item-soon .amo-settings-updates-dot {
    border: 2px solid var(--amo-color-text-muted, #92989b);
    background: var(--amo-color-surface, #ffffff);
}

.amo-settings-updates-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-settings-updates-item:last-child .amo-settings-updates-row {
    border-bottom: 0;
}

/* Thumbnail without a picture: a neutral mark, or the "in development" note. */
.amo-settings-updates .amo-settings-updates-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    color: var(--amo-settings-updates-secondary);
}

.amo-settings-updates .amo-settings-updates-item-soon .amo-settings-updates-preview-empty {
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

.amo-settings-updates-body {
    min-width: 0;
}

.amo-settings-updates-name {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.amo-settings-updates-text {
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-settings-updates-progress {
    font-size: 13px;
    white-space: nowrap;
    color: var(--amo-settings-updates-secondary);
}

/* Footer: bleeds through the card's side padding. */
.amo-settings-updates-more {
    margin: 0 calc(-1 * var(--amo-settings-updates-gutter));
    padding: 10px var(--amo-settings-updates-gutter);
    border-top: 1px solid var(--amo-color-border-light, #e8eaeb);
    text-align: center;
}

.amo-settings-updates-earlier {
    font-weight: 700;
}

/* ---- Changes screen ---- */
.amo-settings-updates-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.amo-settings-updates-back {
    align-self: flex-start;
    font-weight: 700;
}

.amo-settings-updates-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
}

.amo-settings-updates-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.amo-settings-updates-heading {
    min-width: 0;
}

.amo-settings-updates-heading .amo-settings-updates-meta {
    margin-bottom: 4px;
}

.amo-settings-updates-headline {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.amo-settings-updates-actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    gap: 8px;
}

/* The picture beside the description: 560 : 400 at the design width. */
.amo-settings-updates-about {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 24px;
    align-items: start;
}

.amo-settings-updates-about-plain {
    grid-template-columns: minmax(0, 1fr);
}

.amo-settings-updates .amo-settings-updates-picture {
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

.amo-settings-updates-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.amo-settings-updates-description,
.amo-settings-updates-audience {
    margin: 0;
}

.amo-settings-updates-audience {
    font-size: 13px;
}

.amo-settings-updates-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.amo-settings-updates-tags .amo-tag {
    height: auto;
    padding: 2px 8px;
    border-radius: var(--amo-radius-small, 2px);
    line-height: 1.45;
    white-space: normal;
    color: var(--amo-color-text, #363b44);
}

/* The full list of changes: one column per group. */
.amo-settings-updates-changes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-settings-updates-group-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.amo-settings-updates-group-added .amo-settings-updates-group-title {
    color: var(--amo-settings-updates-new-text);
}

.amo-settings-updates-group-improved .amo-settings-updates-group-title {
    color: var(--amo-settings-updates-link);
}

.amo-settings-updates-group-fixed .amo-settings-updates-group-title {
    color: var(--amo-settings-updates-fixed);
}

.amo-settings-updates-entries {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.amo-settings-updates-screenshots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Previous / next update. */
.amo-settings-updates-neighbours {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.amo-settings-updates-next {
    text-align: right;
}

.amo-settings-updates-latest {
    color: var(--amo-settings-updates-secondary);
}

/* ---- Narrow containers: the queries follow the component's own width, so it
   adapts inside a settings modal as well as on a full page. ---- */
@container amo-settings-updates (max-width: 720px) {
    .amo-settings-updates-head {
        flex-wrap: wrap;
    }

    .amo-settings-updates-about {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container amo-settings-updates (max-width: 560px) {
    .amo-settings-updates-list {
        --amo-settings-updates-gutter: 16px;
    }

    .amo-settings-updates-card {
        padding: 16px;
    }

    /* Rows align to the top here: the dot follows the thumbnail's middle
       (12px row padding + half of an 88px-wide 16:9 thumbnail, minus half the dot). */
    .amo-settings-updates-rail::before {
        flex: 0 0 32px;
    }

    /* The action moves under the text, beside the thumbnail column. */
    .amo-settings-updates-row {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px 12px;
        align-items: start;
    }

    .amo-settings-updates-open,
    .amo-settings-updates-progress {
        grid-column: 2;
        justify-self: start;
    }

    .amo-settings-updates-text {
        white-space: normal;
    }

    .amo-settings-updates-changes,
    .amo-settings-updates-screenshots {
        grid-template-columns: minmax(0, 1fr);
    }

    .amo-settings-updates-neighbours {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* settings-widget-catalog */
/* Widget settings «Ещё ставят» tab: a header and a responsive grid of widget
   cards. Every colour is a token, so `data-theme="dark"` restyles it. */
.amo-settings-widget-catalog {
    box-sizing: border-box;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 1.35;
    color: var(--amo-color-text, #363b44);
}

.amo-settings-widget-catalog *,
.amo-settings-widget-catalog *::before,
.amo-settings-widget-catalog *::after {
    box-sizing: border-box;
}

/* ---- Header: title and the overall rating ---- */
.amo-settings-widget-catalog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.amo-settings-widget-catalog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

.amo-settings-widget-catalog-total {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-settings-widget-catalog-total-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--amo-color-text, #363b44);
}

/* ---- Grid: the column count comes from the component (inline variable) and
   steps down on narrower screens. ---- */
.amo-settings-widget-catalog-grid {
    display: grid;
    grid-template-columns: repeat(var(--amo-settings-widget-catalog-columns, 3), minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 900px) {
    .amo-settings-widget-catalog-grid {
        grid-template-columns: repeat(
            min(2, var(--amo-settings-widget-catalog-columns, 3)),
            minmax(0, 1fr)
        );
    }
}

@media (max-width: 560px) {
    .amo-settings-widget-catalog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Card ---- */
.amo-settings-widget-catalog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
}

.amo-settings-widget-catalog-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.amo-settings-widget-catalog-about {
    min-width: 0;
}

.amo-settings-widget-catalog-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 6px;
    object-fit: cover;
}

/* No icon of its own: a neutral mark on the tag fill. */
.amo-settings-widget-catalog-icon-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--amo-color-tag-bg, #eef0f1);
    color: var(--amo-color-text-muted, #92989b);
}

.amo-settings-widget-catalog-icon-empty svg {
    width: 32px;
    height: 32px;
}

.amo-settings-widget-catalog-name {
    margin: 2px 0 4px;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.amo-settings-widget-catalog-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--amo-color-text-muted, #92989b);
}

/* The action button keeps its own width at the card's bottom left. */
.amo-settings-widget-catalog-action {
    align-self: flex-start;
}

.amo-settings-widget-catalog-action-open {
    min-width: 80px;
}


/* stat-card */
.amo-stat-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-stat-card-caption {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-stat-card-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.amo-stat-card-number {
    font-size: 34px;
    line-height: 1.1;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

.amo-stat-card-unit {
    font-size: 14px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-stat-card-label {
    font-size: 13px;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-stat-card-progress {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: var(--amo-color-border-light, #e8eaeb);
    overflow: hidden;
}

.amo-stat-card-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--amo-color-primary, #4c8bf7);
}


/* status-label */
.amo-status-label {
    display: inline-block;
    box-sizing: border-box;
    padding: 3px 6px;
    border-radius: var(--amo-radius, 4px);
    /* Neutral default chip follows the theme palette; per-stage pastel colours
       are set inline on the element and override these tokens when provided. */
    background: var(--amo-color-status-bg, #e8eaeb);
    color: var(--amo-color-status-text, #363b44);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amo-status-label-text {
    display: inline;
}

/*
 * Dark theme: a stage colour set inline stays a light pastel, so its label text
 * must be dark to stay legible. The neutral chip (no inline colour, dark fill)
 * keeps the light token colour.
 */
[data-theme="dark"] .amo-status-label[style*="background"] .amo-status-label-text {
    color: #363b44;
}


/* switch */
.amo-switch {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 32px;
    background: transparent;
    cursor: pointer;
    user-select: none;
}

.amo-switch-knob-container {
    position: relative;
    width: 0;
    height: 100%;
}

.amo-switch-knob {
    position: absolute;
    box-sizing: border-box;
    top: 8px;
    left: -8px;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    border: 1px solid var(--amo-color-slate, #516570);
    background: var(--amo-color-surface, #ffffff);
    transition:
        left 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.amo-switch-line {
    width: 16px;
    height: 1px;
    background: var(--amo-color-slate, #516570);
}

.amo-switch-active .amo-switch-knob {
    left: 8px;
    border-color: transparent;
    background: var(--amo-color-primary, #4c8bf7);
}

.amo-switch-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}


/* table */
/* Block wrapper holding the table grid and the optional pagination footer. */
.amo-table {
    width: 100%;
    background: var(--amo-color-surface, #ffffff);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 15px;
    color: var(--amo-color-text, #363b44);
}

.amo-table-grid {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

/* Positioned shell so the actions bar can overlay the header row. */
.amo-table-area {
    position: relative;
}

/*
 * Infinite-scroll viewport: a bounded, scrollable shell around the grid. Its
 * scroll loads the next batch of rows as it nears the bottom (see
 * `infiniteScroll`). Override `max-height` to size the window.
 */
.amo-table-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/*
 * Keep the header visible while the body scrolls. The opaque fill stops body
 * rows showing through as they pass beneath the sticky header.
 */
.amo-table-infinite .amo-table-cell-head {
    position: sticky;
    top: 0;
    background: var(--amo-color-surface, #ffffff);
    z-index: 1;
}

/*
 * Selection actions bar: overlays the header (to the right of the 40px checkbox
 * column, which stays visible and clickable) and appears while any row is
 * selected. Styling mirrors amoCRM's multi-action strip; the actions themselves
 * are supplied by the caller.
 */
.amo-table-actions {
    position: absolute;
    top: 0;
    left: 40px;
    right: 0;
    height: 42px;
    box-sizing: border-box;
    display: none;
    align-items: center;
    gap: 24px;
    /* Extra left padding keeps a small gap between the checkbox and the first
       action in the header (multi-selection) strip. */
    padding: 0 15px 0 24px;
    background: var(--amo-color-table-multiaction, #f1f5f9);
    color: var(--amo-color-text-muted, #92989b);
    z-index: 5;
}

.amo-table-actions.amo-table-actions-visible {
    display: flex;
}

/*
 * Single selected row: the actions overlay that row as a left-aligned strip on
 * a simple (non-gradient) fill, shrunk to fit its own content rather than
 * spanning the row. More than one selected row keeps the full-width strip over
 * the header instead.
 */
.amo-table-actions.amo-table-actions-on-row {
    right: auto;
    width: max-content;
    background: var(--amo-color-table-multiaction, #f1f5f9);
    justify-content: flex-start;
}

.amo-table-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    color: var(--amo-color-text-muted, #92989b);
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.amo-table-action:hover {
    color: var(--amo-color-text, #363b44);
}

.amo-table-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: none;
}

/* ---- "ещё" overflow button and its dropdown menu ---- */
.amo-table-action-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* The three dots sit tighter than a regular icon and are not fixed-width. */
.amo-table-action-more-dots {
    width: auto;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 1;
}

.amo-table-actions-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    box-sizing: border-box;
    min-width: 200px;
    margin-top: 4px;
    padding: 4px 0;
    background: var(--amo-color-surface, #ffffff);
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    z-index: 10;
}

.amo-table-actions-menu-open .amo-table-actions-menu {
    display: block;
}

/* Overflow actions become full-width menu rows (still clickable actions). */
.amo-table-actions-menu .amo-table-action {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 8px 16px;
    white-space: nowrap;
}

.amo-table-actions-menu .amo-table-action:hover {
    background: var(--amo-color-hover, #c5c5c550);
    color: var(--amo-color-text, #363b44);
}

.amo-table-body {
    display: table-row-group;
}

.amo-table-row {
    display: table-row;
}

.amo-table-row:not(.amo-table-row-head):hover {
    background: var(--amo-color-bg-subtle, #f8f8f9);
}

/* Read-only appearance: no interactive row-hover highlight. */
.amo-table-readonly .amo-table-row:not(.amo-table-row-head):hover {
    background: transparent;
}

/*
 * A selected row (its checkbox checked) gets a brand-blue inner border down its
 * left edge. Rows are `display: table-row`, so the marker is drawn as an inset
 * box-shadow on the row's first cell (the checkbox cell when selectable), which
 * spans the cell's full height and sits inside the table's own border.
 */
.amo-table-row-selected .amo-table-cell:first-child {
    box-shadow: inset 3px 0 0 0 var(--amo-color-primary, #4c8bf7);
}

.amo-table-cell {
    display: table-cell;
    box-sizing: border-box;
    height: 42px;
    padding: 8px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
}

.amo-table-cell-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-table-cell-checkbox {
    width: 40px;
    padding-right: 0;
}

/*
 * The actions bar overlays the row from the right of the checkbox column, so the
 * exposed checkbox cell takes the same fill as `.amo-table-actions` to keep the
 * strip continuous. The marker sits on the single selected row when exactly one
 * is selected, and on the header row when many are (where the bar overlays the
 * header); it is cleared when nothing is selected, leaving the standard fill.
 */
.amo-table-row-actions-on-row .amo-table-cell-checkbox {
    background: var(--amo-color-table-multiaction, #f1f5f9);
}

/*
 * With exactly one row selected the inline actions bar fits its own content and
 * overlays only part of the row, so that row's own cell content is made
 * transparent — leaving the checkbox and the actions bar as the only visible
 * elements. `:not(.amo-table-row-head)` keeps the header (the many-selected
 * case) unaffected, and the checkbox cell has no inner, so it stays visible.
 */
.amo-table-row-actions-on-row:not(.amo-table-row-head) .amo-table-cell-inner {
    opacity: 0;
}

.amo-table-cell-head {
    color: var(--amo-color-text-light, #92989b);
}

.amo-table-head-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-table-cell-sortable {
    cursor: pointer;
}

.amo-table-cell-sortable:hover .amo-table-head-title {
    color: var(--amo-color-text-muted, #92989b);
}

/* A filterable header anchors its filter dialog (see table-filter) below itself. */
.amo-table-cell-filterable {
    position: relative;
}

.amo-table-cell-filterable .amo-table-filter {
    top: 100%;
    left: 0;
}

/* The header sort/filter affordance: a thin downward chevron (amo-icon-chevron)
   shown at the right edge of a sortable/filterable header (opt in per column via
   `headerIcon`; on by default for a name column). Stays muted — no hover change. */
.amo-table-sort-icon {
    display: inline-flex;
    align-items: center;
    flex: none;
    /* Push the chevron to the right edge of the header cell. */
    margin-left: auto;
    color: var(--amo-color-text-muted, #92989b);
}

.amo-table-sort-icon svg {
    display: block;
}

.amo-table-cell.amo-table-cell-head {
    border-right: 1px solid var(--amo-color-border-light, #e8eaeb);
}

/*
 * Applied-filter highlight (amoCRM leads list): a header whose filter value has
 * been applied shows its title in the brand blue. Beats the muted hover above.
 */
.amo-table-cell-head.amo-table-cell-head-filtered .amo-table-head-title {
    color: var(--amo-color-primary, #4c8bf7);
}

/* Header clear (×): replaces the chevron while a filter value is applied. The
   stroke icon takes the light text colour, so it stays visible on dark too. */
.amo-table-head-clear {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: auto;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--amo-color-text-light, #92989b);
    cursor: pointer;
}

.amo-table-head-clear:hover {
    color: var(--amo-color-text, #363b44);
}

.amo-table-head-clear .amo-icon-cross {
    display: inline-flex;
}

.amo-table-cell-head-filtered .amo-table-head-clear {
    display: inline-flex;
}

.amo-table-cell-head-filtered .amo-table-sort-icon {
    display: none;
}

.amo-table-cell.amo-table-cell-head:last-child,
.amo-table-cell.amo-table-cell-head.amo-table-cell-checkbox {
    border-right: none;
}

/* ---- Pagination footer (shown when there are more than 20 rows) ---- */
.amo-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 15px 12px 0;
    border-top: 1px solid var(--amo-color-border, #c5c5c5);
    font-size: 13px;
}

.amo-table-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.amo-table-pages {
    display: flex;
    align-items: center;
    gap: 2px;
}

.amo-table-page-nav,
.amo-table-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: var(--amo-radius, 4px);
    background: transparent;
    color: var(--amo-color-text-inactive, #b5b5b5);
    font: inherit;
    cursor: pointer;
}

.amo-table-page.amo-table-page-active {
    color: var(--amo-color-text, #363b44);
}

.amo-table-page-nav {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--amo-color-text, #363b44);
}

.amo-table-page-nav-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.amo-table-page-ellipsis {
    padding: 0 4px;
    color: var(--amo-color-text-muted, #92989b);
}

/* Keyboard-shortcut hint on the right of the pagination (Ctrl + ← / →). */
.amo-table-page-hint {
    margin-left: 16px;
    color: var(--amo-color-text-muted, #92989b);
    white-space: nowrap;
    cursor: default;
    font-style: italic;
}

.amo-table-rows-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amo-table-rows-label {
    color: var(--amo-color-text-muted, #92989b);
    white-space: nowrap;
}

.amo-table-rows-per-page .amo-select {
    width: auto;
}

.amo-table-rows-per-page .amo-select-button {
    min-width: 64px;
}


/* table-filter */
/*
 * Column header filter dialog (amoCRM `list-sort-dialog`): a 251px floating box
 * with square corners, a grey border and a soft drop shadow. It has a muted
 * "Сортировка" section (two mutually-exclusive options, the active one blue), a
 * divider, then a type-specific "Фильтр" control with apply / cancel. Hidden by
 * default; shown with the `-open` modifier. Absolutely positioned — mount it
 * inside a positioned header cell.
 */
.amo-table-filter {
    position: absolute;
    z-index: 65;
    box-sizing: border-box;
    width: 251px;
    padding: 0;
    background: var(--amo-color-surface, #ffffff);
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 12px;
    color: var(--amo-color-text, #363b44);
    text-align: left;
    /* Closed: faded out and nudged up, so opening fades + slides it in over 0.2s
       (amoCRM's list-sort-dialog). visibility is delayed on close so the fade-out
       is seen, and immediate on open. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear 0.2s;
}

.amo-table-filter * {
    box-sizing: border-box;
}

.amo-table-filter-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .amo-table-filter {
        transition: none;
    }
}

.amo-table-filter-section-title {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 0 19px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    color: var(--amo-color-text-muted, #92989b);
}

/* ---- Sort options ---- */
.amo-table-filter-sort-option {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 15px 0 19px;
    color: var(--amo-color-text, #363b44);
    cursor: pointer;
    user-select: none;
}

/* A leading checkmark in the left inset, shown only on the active (chosen) sort. */
.amo-table-filter-sort-check {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    color: var(--amo-color-text, #363b44);
    opacity: 0;
}

.amo-table-filter-sort-active .amo-table-filter-sort-check {
    opacity: 1;
}

.amo-table-filter-sort-check .amo-icon-checkmark-large {
    display: flex;
    width: 11px;
    height: 11px;
}

.amo-table-filter-sort-check .amo-icon-checkmark-large svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* A light row highlight on hover (amoCRM uses #f5f5f5). */
.amo-table-filter-sort-option:hover {
    background: var(--amo-color-bg, #f5f5f5);
}

/* Dark theme: a lighter-than-surface highlight instead of the darker page bg. */
:root[data-theme="dark"] .amo-table-filter-sort-option:hover,
[data-theme="dark"] .amo-table-filter-sort-option:hover {
    background: var(--amo-color-hover, #264b79);
}

/* ---- Filter block: divider above, inset content ---- */
.amo-table-filter-filter {
    margin-top: 10px;
    padding: 0 15px 24px;
    border-top: 1px solid var(--amo-color-border-light, #e8eaeb);
}

/* Filter-only dialog (no sort section): no divider or leading gap. */
.amo-table-filter-filter:first-child {
    margin-top: 0;
    border-top: none;
}

.amo-table-filter-filter .amo-table-filter-section-title {
    height: 36px;
    padding: 0;
    margin-bottom: -5px;
}

.amo-table-filter-control {
    margin-top: 10px;
}

.amo-table-filter-control > * {
    width: 100%;
}

/* Keep the filter controls compact (the shared inputs are taller by default). */
.amo-table-filter-control .amo-text-input,
.amo-table-filter-control input {
    min-height: 30px;
    height: 30px;
    font-size: 14px;
}

/* Single date field: the shared text input with a leading calendar icon. */
.amo-table-filter-date {
    position: relative;
}

.amo-table-filter-date .amo-icon-calendar {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--amo-color-text-muted, #92989b);
    pointer-events: none;
}

.amo-table-filter-date input {
    width: 100%;
    padding-left: 32px;
}

/* ---- Actions ---- */
.amo-table-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

/*
 * Apply: a plain white button by default, becoming the primary blue only once
 * the filter value has changed (amoCRM's disabled → enabled "Применить").
 */
.amo-table-filter-apply {
    height: 32px;
    padding: 0 20px;
    border: 1px solid var(--amo-color-border-light, #e8eaeb);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    /* Dimmed by default (like the muted cancel), until a change is made. */
    opacity: 0.6;
}

.amo-table-filter-apply-active {
    border-color: var(--amo-color-primary-border, #4077d6);
    background: var(--amo-color-primary, #4c8bf7);
    color: #ffffff;
    opacity: 1;
}

.amo-table-filter-apply-active:hover {
    background: var(--amo-color-primary-hover, #3f7ae8);
}

/* Cancel: bold muted text, no hover state. */
.amo-table-filter-cancel {
    padding: 0 9px;
    color: var(--amo-color-text-muted, #92989b);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}


/* tag */
.amo-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 18px;
    padding: 0 7px;
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-tag-bg, #eef0f1);
    color: var(--amo-color-text-muted, #92989b);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.amo-tag-add {
    background: transparent;
    border: 1px dashed var(--amo-color-border-light, #e8eaeb);
    color: var(--amo-color-text-light, #92989b);
    cursor: pointer;
    min-width: 18px;
}

.amo-tag-add::before {
    content: "+";
    font-size: 13px;
    line-height: 1;
}


/* tariff-selector */
/*
 * Standalone tariff selector. Reuses the billing block's tariff classes
 * (`.amo-amocrm-payment-tariff*`); this file only holds the root wrapper, so the
 * cards' appearance comes from the shared bundle.
 */
.amo-tariff-selector.amo-amocrm-payment-tariffs {
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}


/* tech-support */
.amo-tech-support {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-tech-support-label {
    font-size: 14px;
    color: var(--amo-color-text, #363b44);
}


/* textarea */
.amo-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 72px;
    padding: 6px 8px;
    border: 1px solid var(--amo-color-border, #c5c5c5);
    border-radius: var(--amo-radius, 4px);
    background: var(--amo-color-surface, #ffffff);
    color: var(--amo-color-text, #363b44);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 20px;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.amo-textarea::placeholder {
    color: var(--amo-color-text-muted, #92989b);
}

.amo-textarea:focus {
    border-color: var(--amo-color-focus-border, #10101050);
}

.amo-textarea:disabled {
    background: var(--amo-color-bg-subtle, #f8f8f9);
    opacity: 0.7;
    cursor: default;
}


/* toggler */
.amo-toggler {
    display: inline-flex;
    align-items: stretch;
    gap: 18px;
    /* General underline under the whole row, like the widget-settings header. */
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
}

.amo-toggler-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    /* Overlap the row's general underline so the active accent sits on it. */
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--amo-color-text-muted, #92989b);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
}

.amo-toggler-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

.amo-toggler-item:hover {
    color: var(--amo-color-text, #363b44);
}

.amo-toggler-item-selected {
    color: var(--amo-color-text, #363b44);
    border-bottom-color: var(--amo-color-primary, #4c8bf7);
}


/* user-counter */
/*
 * Standalone user counter. The inner controls reuse the billing block's
 * calculator classes (`.amo-amocrm-payment-users-*`), so this file only holds
 * the root; its appearance comes from the shared bundle.
 */
.amo-user-counter {
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}


/* widget-card */
.amo-widget-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    border-radius: 6px;
    background: var(--amo-color-surface, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-widget-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.amo-widget-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--amo-color-text-muted, #92989b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amo-widget-card-action {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.amo-widget-card-settings {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--amo-color-text-muted, #92989b);
    cursor: pointer;
    opacity: 0.7;
}

.amo-widget-card-settings:hover {
    opacity: 1;
}

.amo-widget-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* widget-settings */
.amo-widget-settings {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px;
    font-family: var(--amo-font, "PT Sans", Arial, sans-serif);
    color: var(--amo-color-text, #363b44);
}

.amo-widget-settings-captions {
    display: flex;
    flex-direction: row;
}

.amo-widget-settings-captions.amo-widget-settings-underlined {
    border-bottom: 1px solid var(--amo-color-border-light, #e8eaeb);
}

/* Every tab carries a thin accent underline; the active one is thicker. */
.amo-widget-settings-caption {
    padding: 8px 16px;
    font-size: 14px;
    color: var(--amo-color-text-muted, #92989b);
    border-bottom: 1px solid var(--amo-color-primary, #4c8bf7);
    user-select: none;
    cursor: pointer;
}

.amo-widget-settings-caption:hover {
    color: var(--amo-color-text, #363b44);
}

.amo-widget-settings-caption-selected {
    color: var(--amo-color-text, #363b44);
    border-radius: 4px 4px 0 0;
    border-bottom: 4px solid var(--amo-color-primary, #4c8bf7);
}

.amo-widget-settings-content {
    margin-top: 24px;
    border-radius: 0 0 4px 4px;
}