@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..800&family=JetBrains+Mono:wght@400;500&display=swap");

/* Arctic Lion CRM — component styles. Every colour, radius and shadow is a token from tokens.css. */
:root {
  --dur-press: 90ms; --dur-fast: .14s; --dur: .2s; --dur-slow: .32s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --sidebar-w: 236px; --sidebar-w-collapsed: 64px; --shell-gap: 12px; --content-max: 1180px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  --page-tint: var(--grain),
    radial-gradient(1180px 820px at 50% 16%, transparent 40%, #0f162014),
    radial-gradient(760px 520px at 62% 18%, #ffffff8c, transparent 70%),
    radial-gradient(900px 620px at 96% -6%, #3b86c91f, transparent 62%),
    radial-gradient(820px 640px at 2% 98%, #d9872f1a, transparent 60%),
    radial-gradient(700px 520px at -8% 10%, #cdd5de66, transparent 58%);
  --page-mark: none;
  --page-mark-opacity: 0;
  --plate-sheen: radial-gradient(620px 320px at 88% -20%, #e8a24a40, transparent 62%),
    linear-gradient(152deg, #f7f0e40e 0%, transparent 42%);
}
[data-theme="dark"] {
  --page-mark: none;
  --page-mark-opacity: 0;
  --page-tint: var(--grain),
    radial-gradient(1240px 860px at 50% 14%, transparent 42%, #00000080),
    radial-gradient(960px 660px at 94% -8%, #3b86c92e, transparent 62%),
    radial-gradient(880px 700px at 2% 98%, #a85c1724, transparent 60%);
  --plate-sheen: radial-gradient(660px 340px at 88% -18%, #e8a24a4d, transparent 60%),
    linear-gradient(152deg, #f7f0e412 0%, transparent 44%);
}
@media (prefers-reduced-transparency: reduce) { :root, [data-theme="dark"] { --page-tint: none; --plate-sheen: none; } }

body { font-family: var(--font-sans); color: var(--ink-1); font-size: 15px; line-height: 1.5; letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
.al-page { background: var(--page-tint), var(--page); background-attachment: fixed; min-height: 100%;; position: relative; isolation: isolate; }
/* the backdrop mark: the Kadrum logo in grey — light theme: embossed white letters on a gradient squircle; dark: letters cut out of it. Fixed bottom-left */
.al-page::before { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 820px; height: 820px; left: -150px; bottom: -190px;
  background: var(--page-mark) center / contain no-repeat; opacity: var(--page-mark-opacity); transform: rotate(-14deg); }
@media (max-width: 720px) { .al-page::before { width: 520px; height: 520px; left: -140px; bottom: -150px; } }
/* al-phone ↓ */ :where(.al-phone) .al-page::before { width: 520px; height: 520px; left: -140px; bottom: -150px; } /* al-phone ↑ */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .al-page::before { display: none; } }
.al-tnum { font-variant-numeric: tabular-nums; }
.al-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.al-icon { flex: none; display: block; }

/* Button */
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 500;
  letter-spacing: -.01em; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
a.al-btn { text-decoration: none; }   /* Button with href — a link that looks like a button, no underline */
.al-btn:active:not([aria-disabled="true"]) { transform: scale(.98); }
.al-btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }
.al-btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.al-btn--md { height: 42px; padding: 0 18px; font-size: 14.5px; }
.al-btn--lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: var(--radius-md); }
.al-btn--block { width: 100%; }
.al-btn--icon { aspect-ratio: 1; padding: 0; }
.al-btn--round { border-radius: var(--radius-pill); }
.al-btn--primary { background: var(--accent-strong); color: var(--on-accent); box-shadow: var(--shadow-tile); }
.al-btn--primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-card); }
.al-btn--secondary { background: var(--card); color: var(--ink-0); border-color: var(--line-strong); box-shadow: var(--shadow-tile); }
.al-btn--secondary:hover { border-color: var(--accent-line); color: var(--accent-deep); }
.al-btn--quiet { background: var(--fill); color: var(--ink-1); }
.al-btn--quiet:hover { background: var(--fill-hover); color: var(--ink-0); }
.al-btn--ghost { background: transparent; color: var(--ink-2); }
.al-btn--ghost:hover { background: var(--fill); color: var(--ink-0); }
.al-btn--danger { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); }
.al-btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.al-btn--onPlate { background: var(--plate-fill); color: var(--plate-ink-0); border-color: var(--plate-line); }
.al-btn--onPlate:hover { background: var(--plate-fill-hover); }
.al-btn--onPlateAccent { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 6px 18px -8px #e8a24aa6; }
.al-btn--onPlateAccent:hover { background: var(--accent-hot); color: var(--accent-ink); }
.al-btn--busy { color: transparent !important; position: relative; pointer-events: none; }
.al-btn--busy::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--ink-0); border-top-color: transparent; border-radius: 50%; animation: al-spin .62s linear infinite; }
.al-btn--primary.al-btn--busy::after { border-color: var(--on-accent); border-top-color: transparent; }
@keyframes al-spin { to { transform: rotate(360deg); } }

/* StatusBadge */
.al-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; white-space: nowrap; }
.al-badge--success { background: var(--ok-soft); color: var(--ok-ink); }
.al-badge--warning { background: var(--warn-soft); color: var(--warn-ink); }
.al-badge--danger { background: var(--danger-soft); color: var(--danger-ink); }
.al-badge--info { background: var(--info-soft); color: var(--info-ink); }
.al-badge--neutral { background: var(--fill); color: var(--ink-2); }
.al-badge--accent { background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-badge--plate { background: var(--plate-fill); color: var(--plate-ink-1); }
/* Статусы заказов Arctic Lion — токены status-*-ink / -soft */
.al-badge--st-check { background: var(--status-check-soft); color: var(--status-check-ink); }
.al-badge--st-new { background: var(--status-new-soft); color: var(--status-new-ink); }
.al-badge--st-work { background: var(--status-work-soft); color: var(--status-work-ink); }
.al-badge--st-made { background: var(--status-made-soft); color: var(--status-made-ink); }
.al-badge--st-approval { background: var(--status-approval-soft); color: var(--status-approval-ink); }
.al-badge--st-ship { background: var(--status-ship-soft); color: var(--status-ship-ink); }
.al-badge--st-surcharge { background: var(--status-surcharge-soft); color: var(--status-surcharge-ink); }
.al-badge--st-done { background: var(--status-done-soft); color: var(--status-done-ink); }
.al-badge--st-deleted { background: var(--status-deleted-soft); color: var(--status-deleted-ink); }
.al-badge--st { gap: 7px; }
.al-badge--st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.al-dot--st-check { background: var(--status-check-ink); }
.al-dot--st-new { background: var(--status-new-ink); }
.al-dot--st-work { background: var(--status-work-ink); }
.al-dot--st-made { background: var(--status-made-ink); }
.al-dot--st-approval { background: var(--status-approval-ink); }
.al-dot--st-ship { background: var(--status-ship-ink); }
.al-dot--st-surcharge { background: var(--status-surcharge-ink); }
.al-dot--st-done { background: var(--status-done-ink); }
.al-dot--st-deleted { background: var(--status-deleted-ink); }

/* Card */
.al-card { position: relative; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); color: var(--ink-1); }
.al-card--sunken { background: var(--card-sunken); box-shadow: none; }
.al-card--outlined { box-shadow: none; border: 1px solid var(--line); }
.al-card--plate { background: var(--plate-sheen), var(--plate); color: var(--plate-ink-1); box-shadow: var(--shadow-plate); border-radius: var(--radius-xl); overflow: hidden; }
.al-card--interactive { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.al-card--interactive:hover { box-shadow: var(--shadow-raise); transform: translateY(-1px); }
.al-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.al-card__title { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--ink-0); }
.al-card--plate .al-card__title { color: var(--plate-ink-0); }
.al-card__subtitle { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.al-card--plate .al-card__subtitle { color: var(--plate-ink-2); }
.al-card__aside { display: flex; align-items: center; gap: 8px; flex: none; }
.al-card__body { margin-top: 14px; }
/* Card for a list or a table (padding 8 + title): the head is inset like the rows — 12px 12px 14px, title 18px, as «Ответы источников» */
.al-card--list > .al-card__head { padding: 12px 12px 14px; }
.al-card--list > .al-card__head .al-card__title { font-size: 18px; }
.al-card--list > .al-card__body { margin-top: 0; }

/* BalancePlate */
.al-plate { padding: 30px; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px, 346px); gap: 32px; align-items: start; }
.al-plate__currencies { display: flex; gap: 6px; margin-bottom: 20px; }
.al-plate__currency { border: 0; font: inherit; cursor: pointer; border-radius: var(--radius-pill); background: var(--plate-fill); color: var(--plate-ink-2);
  padding: 5px 13px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-plate__currency:hover { background: var(--plate-fill-hover); color: var(--plate-ink-0); }
.al-plate__currency[data-active="true"] { background: var(--plate-ink-0); color: var(--plate); }
.al-plate__label { color: var(--plate-ink-2); font-size: 13.5px; }
.al-plate__value { margin-top: 8px; color: var(--plate-ink-0); font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1.02; letter-spacing: -.038em; font-variant-numeric: tabular-nums; }
/* al-phone ↓ */ :where(.al-phone) .al-plate__value { font-size: clamp(34px, 4cqw, 48px); } /* al-phone ↑ */

.al-plate__hold { margin-top: 8px; color: var(--plate-ink-2); font-size: 13.5px; }
.al-plate__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.al-plate__aside { border-radius: var(--radius-md); background: var(--plate-fill); padding: 18px 18px 16px; }
.al-plate__asideLabel { color: var(--plate-ink-2); font-size: 13px; }
.al-plate__rows { display: grid; gap: 11px; margin-top: 14px; }
.al-plate__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.al-plate__rowLabel { display: inline-flex; align-items: center; gap: 8px; color: var(--plate-ink-2); }
.al-plate__rowValue { color: var(--plate-ink-0); font-variant-numeric: tabular-nums; }
.al-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; }
@media (max-width: 720px) { .al-plate { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; } }
/* al-phone ↓ */ :where(.al-phone) .al-plate { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; } /* al-phone ↑ */


/* StatTile */
.al-stat { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px;
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.al-stat__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 24px; }
.al-stat__label { color: var(--ink-3); font-size: 13.5px; }
.al-stat__value { color: var(--ink-0); font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* al-phone ↓ */ :where(.al-phone) .al-stat__value { font-size: clamp(24px, 2.2cqw, 30px); } /* al-phone ↑ */

.al-stat__unit { color: var(--ink-3); font-weight: 500; margin-right: 4px; }
.al-stat__delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-stat__delta--up { background: var(--ok-soft); color: var(--ok-ink); }
.al-stat__delta--down { background: var(--danger-soft); color: var(--danger-ink); }
.al-stat__delta--flat { background: var(--fill); color: var(--ink-3); }
.al-stat__mark { position: absolute; right: -14px; top: 50%; transform: translateY(-50%) rotate(-14deg); color: var(--fill-hover); z-index: -1; pointer-events: none; }
[data-theme="dark"] .al-stat__mark { color: var(--accent-strong); opacity: .26; }
.al-stat__foot { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; }

/* ListRow */
.al-list { display: block; }
.al-list__group { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 16px 8px; }
.al-list__groupTitle { margin: 0; color: var(--ink-0); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.al-list__groupTotal { color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.al-lrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px;
  border-radius: var(--radius-md); color: inherit; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.al-lrow + .al-lrow { box-shadow: 0 -1px 0 var(--hairline); }
.al-lrow--interactive { cursor: pointer; }
.al-lrow--interactive:hover { background: var(--fill); box-shadow: none; }
.al-lrow--interactive:hover + .al-lrow { box-shadow: none; }
.al-lrow__lead { display: flex; align-items: center; }
.al-lrow__title { display: block; color: var(--ink-0); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-lrow__sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.al-lrow__badge { display: grid; justify-items: end; gap: 3px; }
.al-lrow__badgeSub { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.al-lrow__value { text-align: right; white-space: nowrap; min-width: 96px; }
.al-lrow__amount { display: block; color: var(--ink-0); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-lrow__valueSub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.al-lrow__chevron { color: var(--ink-4); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-lrow--interactive:hover .al-lrow__chevron { color: var(--ink-2); transform: translateX(2px); }
.al-copy { display: grid; place-items: center; width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-4); border-radius: var(--radius-xs); cursor: pointer; }
.al-copy:hover { background: var(--fill-active); color: var(--ink-0); }
@media (max-width: 720px) {
  .al-lrow { grid-template-columns: auto minmax(0,1fr) auto; gap: 6px 12px; padding: 12px; }
  .al-lrow__lead { grid-area: 1 / 1 / span 2; } .al-lrow__main { grid-area: 1 / 2; }
  .al-lrow__badge { grid-area: 2 / 2; justify-items: start; } .al-lrow__value { grid-area: 1 / 3 / span 2; }
  .al-lrow__chevron { display: none; }
}
/* al-phone ↓ */ :where(.al-phone) .al-lrow { grid-template-columns: auto minmax(0,1fr) auto; gap: 6px 12px; padding: 12px; } :where(.al-phone) .al-lrow__lead { grid-area: 1 / 1 / span 2; } :where(.al-phone) .al-lrow__main { grid-area: 1 / 2; } :where(.al-phone) .al-lrow__badge { grid-area: 2 / 2; justify-items: start; } :where(.al-phone) .al-lrow__value { grid-area: 1 / 3 / span 2; } :where(.al-phone) .al-lrow__chevron { display: none; } /* al-phone ↑ */


/* Segmented */
.al-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px;
  border-radius: var(--radius-pill); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.al-seg__opt { border: 0; font: inherit; cursor: pointer; height: 34px; padding: 0 16px; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.al-seg__opt:hover { color: var(--ink-0); }
.al-seg__opt[data-active="true"] { background: var(--card); color: var(--ink-0); font-weight: 600; box-shadow: var(--shadow-card); }

/* Tabs (board tabs) */
.al-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.al-tab { border: 0; font: inherit; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-tab:hover { background: var(--fill); color: var(--ink-0); }
.al-tab[data-active="true"] { background: var(--card); color: var(--ink-0); font-weight: 600; box-shadow: var(--shadow-tile); }
/* a switched-off tab: muted, dashed outline, eye-off icon before the label */
.al-tab[data-off="true"] { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-4); outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.al-tab[data-off="true"]:hover { color: var(--ink-2); }
.al-tab[data-off="true"][data-active="true"] { color: var(--ink-2); }

/* Field */
.al-field { display: block; }
.al-field__label { display: block; margin-bottom: 7px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.al-field__shell { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line-strong); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.al-field__shell:focus-within { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.al-field__shell[data-invalid="true"] { border-color: var(--danger-line); }
.al-field__shell[data-invalid="true"]:focus-within { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.al-field__shell[data-disabled="true"] { background: var(--fill); border-color: var(--line); }
.al-field__shell--search { background: var(--fill); border-color: transparent; }
.al-field__shell--search:focus-within { background: var(--card); }
.al-field__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--ink-0); }
.al-field__input:focus-visible { outline: none; }
.al-field__input::placeholder { color: var(--ink-4); }
/* multiline: same look as the editor textareas — padding like a single-line field, 1.5 line-height, no resize handle */
.al-field__shell:has(textarea.al-field__input) { align-items: flex-start; padding: 11px 14px; }
textarea.al-field__input { display: block; width: 100%; min-height: 68px; margin: 0; padding: 0; resize: none; line-height: 1.5; font-family: inherit; field-sizing: content; }
.al-field__shell:has(textarea.al-field__input) .al-field__lead { margin-top: 2px; }
.al-field__shell:has(textarea.al-field__input) .al-field__affix { align-self: flex-start; line-height: 22px; }
.al-field__input:disabled { color: var(--ink-3); cursor: not-allowed; }
.al-field__lead, .al-field__affix { flex: none; color: var(--ink-3); }
.al-field__affix { font-size: 14px; white-space: nowrap; }
.al-field__hint { margin-top: 7px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.al-field__error { margin-top: 7px; color: var(--danger-ink); font-size: 13px; line-height: 1.45; }

/* Select (trigger) */
.al-select { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px 0 14px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--line-strong); font: inherit; font-size: 15px; color: var(--ink-0); text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.al-select:hover { border-color: var(--ink-4); }
.al-select[data-open="true"] { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.al-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-select__value[data-placeholder="true"] { color: var(--ink-4); }
.al-select__caret { color: var(--ink-3); transition: transform var(--dur) var(--ease-out); }
.al-select[data-open="true"] .al-select__caret { transform: rotate(180deg); }

/* Switch */
.al-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; border: 0; background: none; padding: 0; font: inherit; text-align: left; }
.al-switch[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.al-switch__track { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--fill-active); transition: background var(--dur) var(--ease-out); }
.al-switch[aria-checked="true"] .al-switch__track { background: var(--accent-strong); }
.al-switch__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--knob);
  box-shadow: var(--shadow-tile), 0 1px 3px #0204063d; transition: transform var(--dur) var(--ease-out); }
.al-switch[aria-checked="true"] .al-switch__knob { transform: translateX(18px); }
/* sm — a toggle in a list row (one per row, so it stays quiet) */
.al-switch--sm .al-switch__track { width: 34px; height: 20px; }
.al-switch--sm .al-switch__knob { top: 2px; left: 2px; width: 16px; height: 16px; }
.al-switch--sm[aria-checked="true"] .al-switch__knob { transform: translateX(14px); }
.al-switch__title { display: block; color: var(--ink-0); font-size: 14.5px; font-weight: 500; }
.al-switch__sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; line-height: 1.4; }

/* Notice */
.al-notice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; }
.al-notice__icon { flex: none; margin-top: 1px; }
.al-notice__title { font-weight: 600; margin-bottom: 2px; }
.al-notice--warning { background: var(--warn-soft); color: var(--warn-ink); }
.al-notice--danger { background: var(--danger-soft); color: var(--danger-ink); }
.al-notice--info { background: var(--info-soft); color: var(--info-ink); }
.al-notice--success { background: var(--ok-soft); color: var(--ok-ink); }
.al-notice--neutral { background: var(--fill); color: var(--ink-2); }

/* IconCircle */
.al-ic { display: grid; place-items: center; flex: none; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-1); overflow: hidden; }
.al-ic--sm { width: 32px; height: 32px; } .al-ic--md { width: 40px; height: 40px; } .al-ic--lg { width: 48px; height: 48px; }
.al-ic--accent { background: var(--accent-strong); color: var(--on-accent); }
.al-ic--accentSoft { background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-ic--ok { background: var(--ok-soft); color: var(--ok-ink); }
.al-ic--warn { background: var(--warn-soft); color: var(--warn-ink); }
.al-ic--danger { background: var(--danger-soft); color: var(--danger-ink); }
.al-ic--info { background: var(--info-soft); color: var(--info-ink); }
.al-ic--brand { background: var(--card); border: 1px solid var(--line); }
.al-ic--onPlate { background: var(--plate-fill); color: var(--plate-ink-0); }
.al-ic img { width: 100%; height: 100%; object-fit: cover; }

/* Sidebar */
.al-sidebar { box-sizing: border-box; display: flex; flex-direction: column; width: var(--sidebar-w); padding: 10px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); }
.al-sidebar__scope { display: flex; align-items: center; gap: 10px; padding: 8px 10px 9px 6px; }
.al-sidebar__theme { margin-left: auto; flex: none; }
.al-sidebar__logo { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.al-sidebar__scopeLabel { display: block; color: var(--ink-3); font-size: 11.5px; }
.al-sidebar__scopeName { display: block; color: var(--ink-0); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.al-sidebar__nav { flex: 1; padding: 10px 0 4px; }
.al-sidebar__group + .al-sidebar__group { margin-top: 20px; }
.al-nav { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 6px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-nav:hover { background: var(--fill); color: var(--ink-0); }
.al-nav__iconBox { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ink-3); flex: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-nav:hover .al-nav__iconBox { color: var(--ink-0); }
.al-nav[data-active="true"] { color: var(--ink-0); font-weight: 600; }
.al-nav[data-active="true"] .al-nav__iconBox { background: var(--accent-strong); color: var(--on-accent); }
.al-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-nav__after { color: var(--ink-4); flex: none; }
.al-nav__badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--accent-soft-hi); color: var(--accent-deep); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-sidebar__foot { display: flex; align-items: center; gap: 8px; height: 44px; margin-top: 22px; padding: 0 6px 0 8px; border-radius: var(--radius-sm); }
.al-sidebar__footName { flex: 1; min-width: 0; color: var(--ink-1); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-iconbtn:hover { background: var(--fill); color: var(--ink-0); }

/* Sidebar — collapsed (64px, icons only) */
.al-sidebar { transition: width var(--dur) var(--ease-out); }
.al-sidebar--collapsed { width: var(--sidebar-w-collapsed); }
.al-sidebar__switch { display: grid; place-items: center; width: 100%; padding: 4px 0 10px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.al-sidebar__switch:hover { color: var(--ink-0); }
.al-sidebar__switch:active { transform: scale(.94); }
.al-sidebar--collapsed .al-nav { position: relative; justify-content: center; padding: 0; }
.al-sidebar--collapsed .al-nav:hover { background: transparent; }
.al-sidebar--collapsed .al-nav:hover .al-nav__iconBox { background: var(--fill); }
.al-sidebar--collapsed .al-nav[data-active="true"]:hover .al-nav__iconBox { background: var(--accent-strong); }
.al-sidebar--collapsed .al-nav__label, .al-sidebar--collapsed .al-nav__after, .al-sidebar--collapsed .al-sidebar__footName, .al-sidebar--collapsed .al-sidebar__footIcon { display: none; }
.al-sidebar--collapsed .al-nav__badge { position: absolute; top: 6px; right: 8px; width: 8px; min-width: 8px; height: 8px; padding: 0; font-size: 0;
  background: var(--accent-strong); box-shadow: 0 0 0 2px var(--card); }
.al-sidebar--collapsed .al-nav[data-active="true"] .al-nav__badge { background: var(--on-accent); }
.al-sidebar--collapsed .al-sidebar__foot { flex-direction: column; justify-content: center; gap: 2px; height: auto; padding: 6px 0; }
.al-sidebar__toggle .al-icon { transition: transform var(--dur) var(--ease-out); }
.al-sidebar--collapsed .al-sidebar__toggle .al-icon { transform: rotate(180deg); }
.al-iconbtn:focus-visible, .al-sidebar__switch:focus-visible, .al-nav:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-strong); }

/* PromoCard */
.al-promo { position: relative; overflow: hidden; padding: 20px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.al-promo::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent-strong), var(--accent-hot)); }
.al-promo[data-exhausted="true"]::before { background: var(--fill-active); }
.al-promo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.al-promo__title { margin: 0; color: var(--ink-0); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.al-promo__text { margin: 10px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.al-promo__bar { height: 8px; margin-top: 14px; border-radius: var(--radius-pill); background: var(--fill-active); overflow: hidden; }
.al-promo__fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-strong), var(--accent)); transition: width var(--dur-slow) var(--ease-out); }
.al-promo__scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.al-promo__action { margin-top: 16px; }

/* Table */
.al-table-wrap { overflow-x: auto; }
/* the list-table look of the boards: header — a card-sunken pill 40px, radius 12; rows 13px 12px through hairline; put it in Card padding={8} */
.al-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.al-table th { height: 40px; padding: 0 12px; background: var(--card-sunken); text-align: left; vertical-align: middle; color: var(--ink-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.al-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.al-table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.al-table td { padding: 13px 12px; color: var(--ink-1); vertical-align: middle; box-shadow: 0 -1px 0 var(--hairline); }
.al-table tbody tr:first-child td { box-shadow: none; }
.al-table [data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.al-table--interactive tbody tr { cursor: pointer; }
.al-table--interactive tbody tr:hover td { background: var(--row-hover); }
.al-table--interactive tbody tr:first-child:hover td { box-shadow: 0 -1px 0 var(--hairline); }
.al-table--interactive tbody tr:hover td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.al-table--interactive tbody tr:hover td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.al-mono { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* TopBar controls (timezone, theme, settings) */
.al-chrome { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--card); box-shadow: var(--shadow-card); }
.al-chrome__tz { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 14px; border: 0; background: transparent; border-radius: var(--radius-pill);
  color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.al-chrome__tz:hover { background: var(--fill); color: var(--ink-0); }
.al-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-0); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
.al-brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 12px #6f483840; }

/* Field / Select: required mark next to the label; Select with a label — the same label/hint markup as Field */
.al-field__req { margin-left: 3px; color: var(--accent-strong); font-weight: 600; }
.al-selectField { display: block; }
.al-selectField .al-select { width: 100%; box-sizing: border-box; }
.al-select[data-invalid="true"] { border-color: var(--danger-line); }
/* Select with menu */
.al-selectWrap { position: relative; }
.al-selectWrap__menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; }

/* Menu (popover list) */
.al-menu { display: flex; flex-direction: column; min-width: 220px; padding: 6px; border-radius: var(--radius-md); background: var(--card-raised);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); animation: al-drop var(--dur) var(--ease-out); }
@keyframes al-drop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .al-menu, .al-drp__pop { animation: none; } }
.al-menu__search { flex: none; padding: 4px 2px 8px; margin-bottom: 4px; box-shadow: 0 1px 0 var(--hairline); }
.al-menu__searchInput { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card-sunken);
  color: var(--ink-0); font: inherit; font-size: 14.5px; outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.al-menu__searchInput::placeholder { color: var(--ink-4); }
.al-menu__searchInput:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.al-menu__searchInput::-webkit-search-cancel-button { appearance: none; }
.al-menu__list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.al-menu__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-xs); background: transparent;
  font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.al-menu__opt:hover, .al-menu__opt:focus-visible { background: var(--fill); outline: none; }
.al-menu__optIcon { display: grid; place-items: center; flex: none; color: var(--ink-3); }
.al-menu__optBody { flex: 1; min-width: 0; }
.al-menu__optLabel { display: block; color: var(--ink-0); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-menu__opt[data-active="true"] .al-menu__optLabel { color: var(--accent-deep); font-weight: 600; }
.al-menu__optSub { display: block; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-menu__check { color: var(--accent-strong); flex: none; }
.al-menu__empty { padding: 14px 12px; color: var(--ink-3); font-size: 13.5px; }

/* Checkbox */
.al-check { display: inline-flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.al-check[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.al-check__box { position: relative; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 7px;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--shadow-tile);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.al-check:hover:not([aria-disabled="true"]) .al-check__box { box-shadow: inset 0 0 0 1.5px var(--ink-4), var(--shadow-tile); }
.al-check:active:not([aria-disabled="true"]) .al-check__box { transform: scale(.92); }
.al-check:focus-visible { outline: none; }
.al-check:focus-visible .al-check__box { box-shadow: inset 0 0 0 1.5px var(--accent-strong), 0 0 0 3px var(--accent-ring); }
.al-check__mark { fill: none; stroke: var(--on-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--dur) var(--ease-out) 40ms; }
.al-check[aria-checked="true"] .al-check__box, .al-check[aria-checked="mixed"] .al-check__box { background: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent-strong), 0 2px 6px -2px #a85c1766; }
.al-check[aria-checked="true"] .al-check__mark, .al-check[aria-checked="mixed"] .al-check__mark { stroke-dashoffset: 0; }
.al-check[aria-checked="true"]:hover:not([aria-disabled="true"]) .al-check__box, .al-check[aria-checked="mixed"]:hover:not([aria-disabled="true"]) .al-check__box { background: var(--accent-deep); box-shadow: inset 0 0 0 1.5px var(--accent-deep), 0 3px 8px -2px #b656b880; }
.al-check[aria-checked="true"]:focus-visible .al-check__box, .al-check[aria-checked="mixed"]:focus-visible .al-check__box { box-shadow: inset 0 0 0 1.5px var(--accent-strong), 0 0 0 3px var(--accent-ring); }
.al-check[aria-invalid="true"] .al-check__box { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 3px var(--danger-soft); }
.al-check__label { display: block; color: var(--ink-0); font-size: 14.5px; font-weight: 400; line-height: 20px; }
.al-check:has(.al-check__sub) .al-check__label { font-weight: 500; }
.al-check__sub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .al-check__mark { transition: none; } }

/* DateRangePicker */
.al-drp { position: relative; display: inline-block; }
.al-drp__trigger { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: var(--fill);
  color: var(--ink-1); font: inherit; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-drp__trigger:hover { background: var(--fill-hover); color: var(--ink-0); }
.al-drp[data-open] .al-drp__trigger, .al-drp__trigger[data-filled="true"] { background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-drp__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: grid; grid-template-columns: auto auto; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--card-raised); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); animation: al-drop var(--dur) var(--ease-out); }
.al-drp__pop[data-align="right"] { left: auto; right: 0; }
.al-drp__presets { display: flex; flex-direction: column; gap: 2px; min-width: 156px; padding: 10px 8px; background: var(--card-sunken); }
.al-drp__preset { padding: 9px 12px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-drp__preset:hover { background: var(--fill-hover); color: var(--ink-0); }
.al-drp__preset[data-active="true"] { background: var(--accent-soft-hi); color: var(--accent-deep); font-weight: 600; }
.al-drp__body { display: flex; flex-direction: column; }
.al-drp__months { display: flex; gap: 22px; padding: 14px 16px; }
.al-drp__month { width: 252px; }
.al-drp__monthHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.al-drp__monthLabel { color: var(--ink-0); font-size: 15px; font-weight: 600; }
.al-drp__nav { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; }
.al-drp__nav:hover { background: var(--fill); color: var(--ink-0); }
.al-drp__navSpacer { width: 30px; }
.al-drp__weekdays, .al-drp__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.al-drp__weekday { padding-bottom: 6px; color: var(--ink-4); font-size: 12px; text-align: center; }
.al-drp__day { position: relative; height: 34px; border: 0; background: transparent; color: var(--ink-1); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
  border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-drp__day:hover:not(:disabled, [data-start], [data-end], [data-range]) { background: var(--fill); }
/* hover on a picked day keeps it picked: the ends go a shade darker (like the primary button), the range keeps its tint */
.al-drp__day:is([data-start], [data-end]):hover { background: var(--accent-deep); }
.al-drp__day:disabled { color: var(--ink-faint); cursor: not-allowed; }
.al-drp__day[data-outside] { color: var(--ink-4); }
.al-drp__day[data-today]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--accent-strong); transform: translateX(-50%); }
.al-drp__day[data-range] { border-radius: 0; background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-drp__day[data-start], .al-drp__day[data-end] { background: var(--accent-strong); color: var(--on-accent); font-weight: 600; }
.al-drp__day[data-start] { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.al-drp__day[data-end] { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.al-drp__day[data-solo] { border-radius: var(--radius-pill); }
.al-drp__day[data-start]::after, .al-drp__day[data-end]::after { background: var(--on-accent); }
.al-drp__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px 12px 18px; box-shadow: 0 -1px 0 var(--line); }
.al-drp__info { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .al-drp__pop { position: fixed; inset: auto 0 0; grid-template-columns: 1fr; max-height: 88dvh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .al-drp__presets { flex-flow: row wrap; gap: 6px; min-width: 0; padding: 12px; }
  .al-drp__preset { border-radius: var(--radius-pill); background: var(--card); padding: 7px 12px; font-size: 13px; }
  .al-drp__months { flex-direction: column; align-items: center; }
  .al-drp__month { width: 100%; max-width: 320px; }
  .al-drp__info { display: none; }
  /* sheet on phone: presets in one scrollable row, big buttons pinned to the bottom like the filter sheet */
  .al-drp__pop { border-radius: 28px 28px 0 0; }
  .al-drp__presets { flex-wrap: nowrap; overflow-x: auto; padding: 20px 20px 8px; background: transparent; scrollbar-width: none; }
  .al-drp__presets::-webkit-scrollbar { display: none; }
  .al-drp__preset { flex: none; padding: 9px 14px; font-size: 14px; background: var(--fill); }
  .al-drp__foot { position: sticky; bottom: 0; z-index: 1; padding: 12px 20px calc(30px + env(safe-area-inset-bottom, 0px)); background: var(--card-raised); }
  .al-drp__foot .al-row { flex: 1; display: flex; gap: 10px; }
  .al-drp__foot .al-row > :last-child { flex: 1; }
  .al-drp__foot .al-btn { height: 42px; padding: 0 18px; font-size: 14.5px; }
  .al-drp__foot .al-btn--quiet { background: var(--card); color: var(--ink-0); border-color: var(--line-strong); box-shadow: var(--shadow-tile); }
}
/* al-phone ↓ */ :where(.al-phone) .al-drp__pop { position: fixed; inset: auto 0 0; grid-template-columns: 1fr; max-height: 88cqh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } :where(.al-phone) .al-drp__presets { flex-flow: row wrap; gap: 6px; min-width: 0; padding: 12px; } :where(.al-phone) .al-drp__preset { border-radius: var(--radius-pill); background: var(--card); padding: 7px 12px; font-size: 13px; } :where(.al-phone) .al-drp__months { flex-direction: column; align-items: center; } :where(.al-phone) .al-drp__month { width: 100%; max-width: 320px; } :where(.al-phone) .al-drp__info { display: none; } :where(.al-phone) .al-drp__pop { border-radius: 28px 28px 0 0; } :where(.al-phone) .al-drp__presets { flex-wrap: nowrap; overflow-x: auto; padding: 20px 20px 8px; background: transparent; scrollbar-width: none; } :where(.al-phone) .al-drp__presets::-webkit-scrollbar { display: none; } :where(.al-phone) .al-drp__preset { flex: none; padding: 9px 14px; font-size: 14px; background: var(--fill); } :where(.al-phone) .al-drp__foot { position: sticky; bottom: 0; z-index: 1; padding: 12px 20px calc(30px + env(safe-area-inset-bottom, 0px)); background: var(--card-raised); } :where(.al-phone) .al-drp__foot .al-row { flex: 1; display: flex; gap: 10px; } :where(.al-phone) .al-drp__foot .al-row > :last-child { flex: 1; } :where(.al-phone) .al-drp__foot .al-btn { height: 42px; padding: 0 18px; font-size: 14.5px; } :where(.al-phone) .al-drp__foot .al-btn--quiet { background: var(--card); color: var(--ink-0); border-color: var(--line-strong); box-shadow: var(--shadow-tile); } /* al-phone ↑ */


/* Charts */
.al-chart .al-card__head { flex-wrap: wrap; align-items: flex-start; }
.al-chart__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.al-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-3); font-size: 13.5px; }
.al-chart__legendItem { display: inline-flex; align-items: center; gap: 7px; }
.al-chart__legendItem b { color: var(--ink-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.al-chart__plot { position: relative; margin-top: 18px; }
.al-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.al-chart__grid line { stroke: var(--hairline); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.al-chart__base { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.al-chart__line { fill: none; stroke-width: 2.25px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.al-chart__line--muted { stroke-width: 1.75px; opacity: .8; }
.al-chart__glow { fill: none; stroke-width: 8px; opacity: .16; filter: blur(5px); vector-effect: non-scaling-stroke; }
.al-chart__cap { stroke: var(--card); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.al-chart__capHalo { opacity: .2; }
.al-chart__cursor { stroke: var(--ink-4); stroke-opacity: .5; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.al-chart__yaxis span { text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 2px var(--card); position: absolute; left: 8px; transform: translateY(-120%); color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; pointer-events: none; }
.al-chart__xaxis span { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.al-chart__xaxis span[data-edge="start"] { transform: none; }
.al-chart__xaxis span[data-edge="end"] { transform: translateX(-100%); }
.al-chart__tip { position: absolute; top: 0; min-width: 164px; padding: 10px 12px 11px; border-radius: var(--radius-sm); background: var(--card-raised);
  box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); font-size: 12.5px; pointer-events: none; transform: translateX(14px); }
.al-chart__tip[data-side="left"] { transform: translateX(calc(-100% - 14px)); }
.al-chart__tipDate { margin-bottom: 7px; color: var(--ink-3); font-size: 12px; }
.al-chart__tipRow { display: flex; justify-content: space-between; align-items: center; gap: 18px; font-variant-numeric: tabular-nums; }
.al-chart__tipRow + .al-chart__tipRow { margin-top: 4px; }
.al-chart__tipName { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.al-chart__tipValue { color: var(--ink-0); font-weight: 600; }

/* Donut */
.al-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 18px; }
.al-donut__chart { position: relative; flex: none; }
.al-donut__chart svg { display: block; }
.al-donut__chart path { transition: opacity var(--dur-fast) var(--ease-out); cursor: default; }
.al-donut__center { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; pointer-events: none; }
.al-donut__value { color: var(--ink-0); font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.al-donut__label { max-width: 100px; color: var(--ink-3); font-size: 12.5px; }
.al-donut__legend { flex: 1; display: grid; gap: 8px; min-width: 240px; }
.al-donut__row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--card-sunken);
  transition: background var(--dur-fast) var(--ease-out); }
.al-donut__row[data-active="true"] { background: var(--fill); }
.al-donut__name { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-1); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-donut__meta { flex: none; display: inline-flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.al-donut__pct { color: var(--ink-0); font-size: 14px; font-weight: 600; min-width: 36px; text-align: right; }
.al-donut__amount { color: var(--ink-3); font-size: 12.5px; min-width: 96px; text-align: right; }

/* Funnel */
.al-funnel { display: grid; gap: 18px; margin-top: 18px; }
.al-funnel__row { display: grid; gap: 7px; }
.al-funnel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.al-funnel__label { color: var(--ink-1); font-size: 14px; }
.al-funnel__value { color: var(--ink-0); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-funnel__track { height: 8px; border-radius: var(--radius-pill); background: var(--fill-active); overflow: hidden; }
.al-funnel__fill { height: 100%; min-width: 8px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent-strong), var(--accent)); transition: width var(--dur-slow) var(--ease-out); }
.al-funnel__fill[data-tone="danger"] { background: var(--danger); }
.al-funnel__fill[data-tone="warning"] { background: var(--warn-ink); }
.al-funnel__fill[data-tone="neutral"] { background: var(--ink-4); }
.al-funnel__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.al-funnel__drop { color: var(--danger-ink); font-weight: 500; }
.al-funnel__extra { margin-top: 20px; padding-top: 18px; box-shadow: 0 -1px 0 var(--hairline); }

/* Drawer */
.al-drawer__backdrop { position: fixed; inset: 0; z-index: 100; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.al-drawer__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.al-drawer { position: fixed; top: var(--shell-gap); right: var(--shell-gap); bottom: var(--shell-gap); z-index: 110; display: flex; flex-direction: column; overflow: hidden;
  width: min(480px, calc(100vw - var(--shell-gap) * 2)); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line);
  transform: translateX(calc(100% + var(--shell-gap))); transition: transform var(--dur-slow) cubic-bezier(.32, .72, 0, 1); }
/* al-phone ↓ */ :where(.al-phone) .al-drawer { width: min(480px, calc(100cqw - var(--shell-gap) * 2)); } /* al-phone ↑ */

.al-drawer[data-open="true"] { transform: none; }
.al-drawer--contained { position: absolute; }
.al-drawer__head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 22px 22px 18px 24px; box-shadow: 0 1px 0 var(--line); }
.al-drawer__title { margin: 0; color: var(--ink-0); font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.al-drawer__sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.al-drawer__close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -4px -6px 0 0; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-drawer__close:hover { background: var(--fill); color: var(--ink-0); }
.al-drawer__tools { flex: none; display: flex; align-items: center; gap: 2px; }
.al-drawer__tools .al-drawer__tool { margin-right: 0; }
.al-drawer__tool[data-busy="true"] svg, .al-mp__tool[data-busy="true"] svg { animation: al-spin .9s linear infinite; }
.al-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; display: grid; gap: 24px; align-content: start; }
.al-drawer__foot { flex: none; padding: 16px 24px; box-shadow: 0 -1px 0 var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.al-drawer__footStart { margin-right: auto; display: flex; align-items: center; gap: 8px; }
.al-drawer__footEnd { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .al-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); }
}
/* al-phone ↓ */ :where(.al-phone) .al-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 92cqh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; transform: translateY(100%); } /* al-phone ↑ */

@media (prefers-reduced-motion: reduce) { .al-drawer { transition: opacity var(--dur) var(--ease-out); transform: none; opacity: 0; pointer-events: none; } .al-drawer[data-open="true"] { opacity: 1; pointer-events: auto; } }
.al-detail__amountHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.al-detail__amount { display: flex; align-items: baseline; gap: 8px; color: var(--ink-0); font-size: 32px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.al-detail__amountCur { color: var(--ink-3); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.al-detail__section { display: grid; }
.al-detail__sectionLabel { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.al-detail__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; }
.al-detail__row + .al-detail__row, .sc-host-x + .sc-host-x > .al-detail__row { box-shadow: 0 -1px 0 var(--hairline); }   /* on the canvas every component sits in a .sc-host-x wrapper — without the second selector the rows lose their separators */
.al-detail__label { flex: none; color: var(--ink-3); font-size: 14px; }
.al-detail__value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: var(--ink-0); font-size: 14.5px; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.al-detail__value[data-mono="true"] { font-family: var(--font-mono); font-size: 13px; }
.al-detail__link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-strong); text-decoration: none; }
.al-detail__link:hover { color: var(--accent-deep); }

/* Segmented — full width */
.al-seg--block { display: grid; width: 100%; box-sizing: border-box; }
.al-seg--block .al-seg__opt { height: 40px; font-size: 14.5px; }

/* ModelCard */
.al-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.al-model { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.al-model[data-active="false"] { background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.al-model__head { display: flex; align-items: flex-start; gap: 14px; }
.al-model__logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; }
.al-model__logo img { max-width: 100%; max-height: 100%; }
.al-model__headings { flex: 1; min-width: 0; }
.al-model__title { margin: 0; color: var(--ink-0); font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.al-model__desc { margin: 3px 0 0; min-height: 39px; color: var(--ink-3); font-size: 13.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-model__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.al-model__fee { color: var(--ink-0); font-size: 22px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.al-model[data-active="false"] .al-model__fee { color: var(--ink-2); }
.al-model__metaLabel { color: var(--ink-3); font-size: 13.5px; }
.al-model__sep { width: 3px; height: 3px; margin: 0 2px; border-radius: var(--radius-pill); background: var(--ink-4); align-self: center; }
.al-model__block { display: grid; gap: 10px; }
.al-model__blockLabel { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.al-model__off { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-3); font-size: 14px; }

/* ---------- Toast ---------- */
.al-toast { position: relative; box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 10px 14px 14px; overflow: hidden;
  border-radius: var(--radius-md); background: var(--card-raised); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); color: var(--ink-0);
  font-size: 14px; line-height: 1.4; text-align: left; animation: al-toast-in var(--dur-slow) var(--ease-out); }
.al-toast > * { transition: opacity var(--dur) var(--ease-out); }
.al-toast__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); }
.al-toast--success .al-toast__ic { background: var(--ok-soft); color: var(--ok-ink); }
.al-toast--danger .al-toast__ic { background: var(--danger-soft); color: var(--danger-ink); }
.al-toast--warning .al-toast__ic { background: var(--warn-soft); color: var(--warn-ink); }
.al-toast--info .al-toast__ic { background: var(--info-soft); color: var(--info-ink); }
.al-toast--neutral .al-toast__ic { background: var(--fill); color: var(--ink-2); }
.al-toast__body { flex: 1; min-width: 0; padding-top: 4px; }
.al-toast__title { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 14.5px; font-weight: 600; line-height: 20px; letter-spacing: -.005em; color: var(--ink-0); }
.al-toast__count { flex: none; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
.al-toast__text { margin-top: 2px; font-size: 13.5px; line-height: 19px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-toast__details { margin: 8px 0 0; padding: 8px 10px; max-height: 128px; overflow: auto; border-radius: var(--radius-xs, 8px); background: var(--fill);
  font: 12px/1.5 var(--font-mono); color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.al-toast__actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.al-toast__action { height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-0); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.al-toast__action:hover { background: var(--fill-hover); }
.al-toast__action:active { transform: scale(.98); }
.al-toast__link { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.al-toast__link:hover { color: var(--ink-1); }
.al-toast__action:focus-visible, .al-toast__link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.al-toast__close { flex: none; width: 28px; height: 28px; }
.al-toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left center; opacity: .45; background: var(--ink-3); }
.al-toast--success .al-toast__timer { background: var(--ok-ink); }
.al-toast--warning .al-toast__timer { background: var(--warn-ink); }
.al-toast--info .al-toast__timer { background: var(--info-ink); }
.al-toast__timer--run { animation: al-toast-timer linear forwards; }
@keyframes al-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes al-toast-in { from { opacity: 0; transform: translateY(var(--al-toast-from, -10px)) scale(.97); } }

/* ---------- Toaster: stack, collapsed by default, expands on hover / tap ---------- */
.al-toaster { position: fixed; z-index: 200; width: 380px; max-width: calc(100vw - 32px); pointer-events: none; }
/* al-phone ↓ */ :where(.al-phone) .al-toaster { max-width: calc(100cqw - 32px); } /* al-phone ↑ */

.al-toaster--contained { position: absolute; }
.al-toaster--top-right { top: 16px; right: 16px; }
.al-toaster--bottom-right { bottom: 16px; right: 16px; --al-toast-from: 10px; }
.al-toaster--top { top: 16px; left: 50%; transform: translateX(-50%); }
.al-toaster--bottom { bottom: 16px; left: 50%; transform: translateX(-50%); --al-toast-from: 10px; }
.al-toaster__list { position: relative; margin: 0; padding: 0; list-style: none; transition: height var(--dur-slow) var(--ease-out); }
.al-toaster__item { position: absolute; left: 0; right: 0; top: 0; transform-origin: top center; pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.al-toaster--bottom-right .al-toaster__item, .al-toaster--bottom .al-toaster__item { top: auto; bottom: 0; transform-origin: bottom center; }
.al-toaster__item[data-behind="true"] { cursor: pointer; }
.al-toaster__item[data-behind="true"] .al-toast { animation: none; }
.al-toaster__item[data-behind="true"] .al-toast > * { opacity: 0; }
.al-toaster__clear { display: block; margin: 8px 0 0 auto; height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); pointer-events: auto;
  background: var(--card-raised); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.al-toaster--bottom-right .al-toaster__clear, .al-toaster--bottom .al-toaster__clear { position: absolute; right: 0; bottom: 100%; margin: 0 0 8px; }
.al-toaster__clear:hover { color: var(--ink-0); }
@media (max-width: 767px) {
  .al-toaster:not(.al-toaster--contained) { left: 16px; right: 16px; width: auto; max-width: none; transform: none; }
}
/* al-phone ↓ */ :where(.al-phone) .al-toaster:not(.al-toaster--contained) { left: 16px; right: 16px; width: auto; max-width: none; transform: none; } /* al-phone ↑ */

@media (prefers-reduced-motion: reduce) {
  .al-toast, .al-toaster__item, .al-toaster__list { animation: none; transition: none; }
}
/* --- Table and list rows: one hover for every table — pale accent (4 %), paler than a selected row (accent-soft).
   A highlighted row keeps its 1px hairline on top, the first one too — so it never merges with the header (or the total row) above it --- */
:root { --row-hover: #a85c170a; }
[data-theme="dark"] { --row-hover: #efb06114; }


/* ================= Page patterns (PageHeader, Plate, Filters, ResultsBar, ObjectPlate, mobile shells) ================= */
/* Mobile breakpoint for all patterns: max-width 767px. */

/* --- PageHeader --- */
.al-ph { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 20px 0 18px; box-shadow: 0 1px 0 var(--hairline); }
.al-ph__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-ph__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.al-ph__title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-0); }
.al-ph__sub { font-size: 13.5px; color: var(--ink-3); }
.al-ph__sub a { font-weight: 500; text-decoration: none; color: var(--accent-strong); }
.al-ph__sub a:hover { color: var(--accent-deep); }
.al-ph__tabs { flex: none; padding: 4px; border-radius: var(--radius-pill); background: #ffffff8c; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .al-ph__tabs { background: var(--card-sunken); }
.al-ph__aside { display: flex; align-items: center; gap: 10px; }
.al-ph__seg, .al-ph__aside--m { display: none; }

/* --- Plate --- */
.al-pl { margin-top: 24px; padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 16px; }
.al-pl[data-overlap="true"] { padding-bottom: 94px; }
.al-pl__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.al-pl__title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.al-pl__title h2 { margin: 0; font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; color: var(--plate-ink-0); }
.al-pl__count { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--plate-fill); box-shadow: inset 0 0 0 1px var(--plate-line); color: var(--plate-ink-0); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.al-pl__sub { margin: 0; font-size: 13.5px; color: var(--plate-ink-2); }
.al-pl__sub b { font-weight: 600; color: var(--plate-ink-0); }
.al-pl__t { color: var(--plate-ink-1); text-decoration: none; text-underline-offset: 3px; white-space: nowrap; }
a.al-pl__t:hover { color: var(--plate-ink-1); text-decoration: underline; }
.al-pl__t--err, a.al-pl__t--err:hover { color: #f0a3a3; }
.al-pl__t--warn, a.al-pl__t--warn:hover { color: #e6c47e; }
.al-pl__add { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px -8px #e8a24ab3; cursor: pointer; }
.al-pl__tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--plate-fill); box-shadow: inset 0 0 0 1px var(--plate-line); }
.al-ptab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--plate-ink-1); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.al-ptab:hover { background: var(--plate-fill-hover); color: var(--plate-ink-0); }
.al-ptab i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--plate-ink-2); font-variant-numeric: tabular-nums; }
.al-ptab[aria-selected="true"] { background: var(--plate-ink-0); color: var(--plate); font-weight: 600; }
.al-ptab[aria-selected="true"] i { color: var(--ink-3); }
.al-ptab--err i { color: #f0a3a3; }
.al-ptab--new i { color: #9fc7ff; }

/* --- Filters --- */
.al-flt { margin: -62px 30px 0; position: relative; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-raise); }
.al-flt[data-overlap="false"] { margin: 24px 0 0; }
.al-flt__row1 { display: flex; align-items: center; gap: 10px; }
.al-flt__search { flex-grow: 1; min-width: 0; }
.al-flt__top { flex: none; width: 200px; }
.al-flt__row2 { display: flex; align-items: center; gap: 12px; }
.al-flt__sel { flex: none; width: 190px; }
.al-flt__grow { flex-grow: 1; }
.al-flt__row2--fill { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)) 180px; gap: 10px; }
.al-flt__tail { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.al-flt__reset { font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; padding: 0 4px; color: var(--accent-strong); }
.al-flt__reset:hover { color: var(--accent-deep); }
.al-flt__cb .al-check__label { white-space: nowrap; }
.al-flt .al-select { width: 100%; min-width: 0; box-sizing: border-box; }
.al-flt .al-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-flt__extra { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 10px; padding: 12px 0 4px; box-shadow: 0 -1px 0 var(--hairline); animation: al-drop var(--dur) var(--ease-out); }
.al-flt__xsel { flex: 0 0 190px; min-width: 0; }
.al-flt__extra--fill .al-flt__xsel { flex-basis: calc((100% - 180px - var(--n) * 10px) / var(--n)); }
.al-flt__extra > .al-flt__cb { flex: none; padding-right: 10px; }
.al-flt__extra > .al-flt__xsel + .al-flt__cb { margin-left: 10px; }
.al-flt__m { display: none; gap: 8px; }
.al-flt__msel { flex-grow: 1; min-width: 0; }
.al-flt__m .al-select { min-height: 48px; }
.al-flt__mbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px 0 14px; border: 0; border-radius: var(--radius-sm); background: var(--fill); color: var(--ink-1); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.al-flt__mbtn i { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--accent-strong); color: var(--on-accent); font-size: 11.5px; font-weight: 600; }

/* «Ещё N» — opens the extra-filters block inside the card */
.al-more { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-1); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.al-more:hover { background: var(--fill-hover); color: var(--ink-0); }
.al-more__num { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--card); color: var(--ink-3); font-size: 11.5px; font-weight: 600; }
.al-more[aria-expanded="true"] { background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-more[aria-expanded="true"] .al-more__num { color: var(--accent-deep); }
.al-more svg { transition: transform var(--dur) var(--ease-out); }
.al-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --- ResultsBar, SortChip, Pager --- */
.al-rb { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.al-rb__count { font-size: 17px; letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.al-rb__count b { font-weight: 600; color: var(--ink-0); }
.al-rb__r, .al-rb__nav, .al-rb__extra { display: flex; align-items: center; gap: 8px; }
.al-rb__lang { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.al-rb__lang .al-seg { padding: 2px; }
.al-rb__lang .al-seg__opt { height: 28px; padding: 0 12px; font-size: 13px; }
.al-rb__sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 6px; }
.al-sort { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--shadow-tile); font: inherit; font-size: 13.5px; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.al-sort b { font-weight: 500; color: var(--ink-0); }
.al-sort svg { color: var(--ink-3); }
.al-sort:hover { border-color: var(--accent-line); }
.al-sort[data-open="true"] { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong); }
.al-sort__short { display: none; }
.al-pager { display: none; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; }
.al-pager span { font-size: 13.5px; color: var(--ink-3); }

/* --- RowActions, PlatformBadge --- */
.al-ra { display: flex; gap: 2px; justify-content: flex-end; }
.al-ra__more { position: relative; display: inline-flex; }   /* «⋯» with items: the CardMenu menu under it, right edges aligned */
.al-pf { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.al-pf--app { background: var(--accent-soft-hi); color: var(--accent-deep); }
.al-pf--tg { background: var(--info-soft); color: var(--info-ink); }
.al-pf--max { background: var(--fill); color: var(--ink-1); }

/* --- ObjectPlate (header of an object card: task, order, template) --- */
.al-op { margin-top: 24px; padding: 22px 24px 22px 20px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "back id title acts" "back meta meta acts"; column-gap: 12px; row-gap: 8px; align-items: center; }
.al-op__back { grid-area: back; margin-right: 4px; }
.al-op__id { grid-area: id; display: flex; align-items: center; gap: 12px; }
.al-op__id span { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--plate-ink-2); }
.al-op__copy { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--plate-ink-2); background: var(--plate-fill); cursor: pointer; flex: none; }
.al-op__copy:hover { background: var(--plate-fill-hover); color: var(--plate-ink-0); }
.al-op__title { grid-area: title; display: flex; align-items: center; gap: 12px; min-width: 0; }
.al-op__title h2 { margin: 0; min-width: 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--plate-ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-op__meta { grid-area: meta; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; color: var(--plate-ink-2); font-variant-numeric: tabular-nums; }
.al-op__meta b { font-weight: 600; color: var(--plate-ink-0); }
.al-op__meta s { width: 3px; height: 3px; border-radius: 9px; background: var(--plate-ink-2); opacity: .6; }
.al-op__m--warn, .al-op__m--warn b { color: #f3c27a; }
.al-op__acts { grid-area: acts; display: flex; align-items: center; gap: 8px; }
.al-op__a--m { display: none; }
.al-op__body { grid-column: 1 / -1; }

/* --- LinkRow, FormSection, DangerRow --- */
.al-lr { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 15px; font-weight: 600; color: var(--ink-0); text-decoration: none; cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out); }
.al-lr:hover { box-shadow: var(--shadow-raise); color: var(--ink-0); }
.al-lr small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.al-lr i { margin-left: auto; color: var(--ink-3); display: grid; }
.al-lr__cnt { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--fill); font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.al-fs { display: flex; flex-direction: column; gap: 14px; }
.al-fs + .al-fs, .sc-host-x:has(> .al-fs) + .sc-host-x > .al-fs { padding-top: 18px; box-shadow: 0 -1px 0 var(--hairline); }
.al-fs h4 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); }
.al-dz { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--radius-md); background: var(--danger-soft); }
.al-dz > div { flex-grow: 1; min-width: 0; }
.al-dz b { display: block; font-size: 14px; font-weight: 600; color: var(--danger-ink); }
.al-dz span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

/* --- MobilePanel (full-screen editing/details on a phone) --- */
.al-mp { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--page); }
.al-mp--contained { position: absolute; }
.al-mp__top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 14px 16px 12px; background: var(--card); box-shadow: 0 1px 0 var(--line); }
.al-mp__top b { display: block; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink-0); }
.al-mp__top small { display: block; text-align: center; font-size: 12px; color: var(--ink-3); }
.al-mp__back { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--fill); color: var(--ink-1); cursor: pointer; }
.al-mp__body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.al-mp--form .al-mp__body { gap: 18px; }
.al-mp__foot { display: flex; gap: 10px; padding: 12px 16px 34px; background: var(--card); box-shadow: 0 -1px 0 var(--line); }
.al-mp__foot > :last-child { flex-grow: 1; }
.al-mp__foot > :last-child .al-btn, .al-mp__foot > .al-btn:last-child { width: 100%; }

/* --- Sheet (bottom sheet: filters, sorting, menus on a phone) --- */
.al-sheet__scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); backdrop-filter: blur(3px); }
.al-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; display: flex; flex-direction: column; max-height: 88%; border-radius: 28px 28px 0 0; background: var(--card-raised); box-shadow: var(--shadow-pop); }
.al-sheet--contained { position: absolute; }
.al-sheet__grab { width: 40px; height: 5px; margin: 8px auto 0; border-radius: var(--radius-pill); background: var(--line-strong); }
.al-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 12px; }
.al-sheet__head h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-0); }
.al-sheet__head a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--accent-strong); }
.al-sheet__body { padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.al-sheet__lbl { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.al-sheet__foot { display: flex; gap: 10px; padding: 12px 20px 30px; box-shadow: 0 -1px 0 var(--line); }
.al-sheet__foot > :last-child { flex-grow: 1; }
.al-sheet__foot > :last-child .al-btn, .al-sheet__foot > .al-btn:last-child { width: 100%; }
.al-sheet .al-select { width: 100%; min-width: 0; box-sizing: border-box; padding: 0 8px 0 12px; gap: 4px; font-size: 14px; }
.al-sheet .al-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--fill); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-1); cursor: pointer; }
.al-chip[aria-pressed="true"] { background: var(--ink-0); color: var(--card); }
.al-checklist { display: flex; flex-direction: column; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.al-checklist .al-check { width: 100%; padding: 13px 14px; box-sizing: border-box; }
.al-checklist .al-check + .al-check { box-shadow: 0 -1px 0 var(--hairline); }

/* --- TabBar (phone navigation): a floating bar — 12px from the sides, 20px above the bottom edge (room for the home indicator), radius 24.
   Its top is where the old full-width bar's was (84px from the bottom), so content padding and things above it stay put --- */
.al-tb { position: fixed; left: 12px; right: 12px; bottom: 20px; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding: 0 4px; box-sizing: border-box; border-radius: 24px; background: #fbfafce0; backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 0 0 .5px var(--line-strong), 0 12px 32px -10px #120e1647, 0 2px 8px #120e1612; }
[data-theme="dark"] .al-tb { background: #1d242ee6; box-shadow: 0 0 0 .5px #ffffff24, 0 14px 36px -10px #000000b3; }
.al-tb--contained { position: absolute; }
.al-tb a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink-3); text-decoration: none; }
.al-tb a[aria-current="page"] { color: var(--accent-strong); }
.al-tb a:hover { color: var(--ink-1); }
.al-tb a[aria-current="page"]:hover { color: var(--accent-deep); }

/* --- Phone layout of the patterns --- */
@media (max-width: 767px) {
  .al-ph { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 16px 0 0; box-shadow: none; }
  .al-ph__text { gap: 3px; padding-bottom: 16px; }
  .al-ph__title { font-size: 26px; line-height: 1.15; }
  .al-ph__sub { font-size: 13px; }
  .al-ph__tabs, .al-ph__aside--d { display: none; }
  .al-ph__aside--m { display: flex; }
  .al-ph__seg { display: block; }
  .al-ph__seg .al-seg { width: 100%; box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #ffffffb3; box-shadow: inset 0 0 0 1px var(--line); }
  .al-ph__seg .al-seg__opt { padding: 0 6px; font-size: 14px; height: 36px; white-space: nowrap; }
  /* tabs size to their labels (leftover space is shared), so 5 sub-sections still fit at 390px */
  .al-ph__seg .al-seg { grid-auto-columns: auto; }
  .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(5)) .al-seg__opt { padding: 0 4px; font-size: 13px; }
  /* 6 and more don't fit at 390px: the row scrolls sideways edge to edge, labels keep their size and get room (16px each side); the current one is scrolled into view */
  .al-ph__seg:has(.al-seg__opt:nth-of-type(6)) { overflow-x: auto; margin: -6px -16px; padding: 6px 16px; scrollbar-width: none; }   /* the padding keeps the active pill's shadow unclipped */
  .al-ph__seg:has(.al-seg__opt:nth-of-type(6))::-webkit-scrollbar { display: none; }
  .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(6)) { width: max-content; }
  .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(6)) .al-seg__opt { padding: 0 16px; font-size: 14px; }

  .al-pl { margin-top: 16px; padding: 20px; gap: 8px; border-radius: var(--radius-xl); }
  .al-pl[data-overlap="true"] { padding-bottom: 76px; }
  .al-pl__head { gap: 12px; }
  .al-pl__title { gap: 10px; }
  .al-pl__title h2 { font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
  .al-pl__count { height: 26px; padding: 0 10px; font-size: 14px; }
  .al-pl__sub { font-size: 13px; line-height: 1.4; }
  .al-pl__act, .al-pl__tabs { display: none; }
  .al-pl__add { display: grid; flex: none; }

  .al-flt { margin: -60px 8px 0; padding: 12px; gap: 10px; }
  .al-flt[data-overlap="false"] { margin: 16px 0 0; }
  .al-flt__row1 > :not(.al-flt__search), .al-flt__row2, .al-flt__extra { display: none; }
  .al-flt__m { display: flex; }

  .al-rb { margin: 24px 0 16px; padding: 0; gap: 10px; }
  .al-rb__count { font-size: 13px; letter-spacing: 0; }
  .al-rb__count b { font-size: 15px; }
  .al-rb__pages, .al-rb__lang, .al-rb__sep, .al-rb__nav, .al-rb__extra { display: none; }
  .al-sort { height: 32px; padding: 0 10px 0 12px; border: 0; border-radius: var(--radius-pill); background: #ffffffb3; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); }
  .al-sort svg { width: 14px; height: 14px; }
  .al-sort__lbl, .al-sort__val { display: none; }
  .al-sort__short { display: inline; }
  .al-pager { display: flex; }

  .al-pf { height: 18px; padding: 0 6px; font-size: 10.5px; letter-spacing: 0; }

  .al-op { margin-top: 4px; padding: 16px; border-radius: var(--radius-xl); grid-template-areas: "back id . acts" "title title title title" "meta meta meta meta"; column-gap: 10px; row-gap: 10px; }
  .al-op__back { margin-right: 0; }
  .al-op__id { gap: 10px; }
  .al-op__id span { font-size: 14px; }
  .al-op__title { flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; }
  .al-op__title h2 { font-size: 24px; line-height: 1.15; white-space: normal; overflow: visible; }
  .al-op__a--d { display: none; }
  .al-op__a--m { display: inline-flex; }

  .al-lr { padding: 14px 16px; font-size: 14.5px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-ph { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 16px 0 0; box-shadow: none; } :where(.al-phone) .al-ph__text { gap: 3px; padding-bottom: 16px; } :where(.al-phone) .al-ph__title { font-size: 26px; line-height: 1.15; } :where(.al-phone) .al-ph__sub { font-size: 13px; } :where(.al-phone) .al-ph__tabs, :where(.al-phone) .al-ph__aside--d { display: none; } :where(.al-phone) .al-ph__aside--m { display: flex; } :where(.al-phone) .al-ph__seg { display: block; } :where(.al-phone) .al-ph__seg .al-seg { width: 100%; box-sizing: border-box; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: #ffffffb3; box-shadow: inset 0 0 0 1px var(--line); } :where(.al-phone) .al-ph__seg .al-seg__opt { padding: 0 6px; font-size: 14px; height: 36px; white-space: nowrap; } :where(.al-phone) .al-ph__seg .al-seg { grid-auto-columns: auto; } :where(.al-phone) .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(5)) .al-seg__opt { padding: 0 4px; font-size: 13px; } :where(.al-phone) .al-ph__seg:has(.al-seg__opt:nth-of-type(6)) { overflow-x: auto; margin: -6px -16px; padding: 6px 16px; scrollbar-width: none; } :where(.al-phone) .al-ph__seg:has(.al-seg__opt:nth-of-type(6))::-webkit-scrollbar { display: none; } :where(.al-phone) .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(6)) { width: max-content; } :where(.al-phone) .al-ph__seg .al-seg:has(.al-seg__opt:nth-of-type(6)) .al-seg__opt { padding: 0 16px; font-size: 14px; } :where(.al-phone) .al-pl { margin-top: 16px; padding: 20px; gap: 8px; border-radius: var(--radius-xl); } :where(.al-phone) .al-pl[data-overlap="true"] { padding-bottom: 76px; } :where(.al-phone) .al-pl__head { gap: 12px; } :where(.al-phone) .al-pl__title { gap: 10px; } :where(.al-phone) .al-pl__title h2 { font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; } :where(.al-phone) .al-pl__count { height: 26px; padding: 0 10px; font-size: 14px; } :where(.al-phone) .al-pl__sub { font-size: 13px; line-height: 1.4; } :where(.al-phone) .al-pl__act, :where(.al-phone) .al-pl__tabs { display: none; } :where(.al-phone) .al-pl__add { display: grid; flex: none; } :where(.al-phone) .al-flt { margin: -60px 8px 0; padding: 12px; gap: 10px; } :where(.al-phone) .al-flt[data-overlap="false"] { margin: 16px 0 0; } :where(.al-phone) .al-flt__row1 > :not(.al-flt__search), :where(.al-phone) .al-flt__row2, :where(.al-phone) .al-flt__extra { display: none; } :where(.al-phone) .al-flt__m { display: flex; } :where(.al-phone) .al-rb { margin: 24px 0 16px; padding: 0; gap: 10px; } :where(.al-phone) .al-rb__count { font-size: 13px; letter-spacing: 0; } :where(.al-phone) .al-rb__count b { font-size: 15px; } :where(.al-phone) .al-rb__pages, :where(.al-phone) .al-rb__lang, :where(.al-phone) .al-rb__sep, :where(.al-phone) .al-rb__nav, :where(.al-phone) .al-rb__extra { display: none; } :where(.al-phone) .al-sort { height: 32px; padding: 0 10px 0 12px; border: 0; border-radius: var(--radius-pill); background: #ffffffb3; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); } :where(.al-phone) .al-sort svg { width: 14px; height: 14px; } :where(.al-phone) .al-sort__lbl, :where(.al-phone) .al-sort__val { display: none; } :where(.al-phone) .al-sort__short { display: inline; } :where(.al-phone) .al-pager { display: flex; } :where(.al-phone) .al-pf { height: 18px; padding: 0 6px; font-size: 10.5px; letter-spacing: 0; } :where(.al-phone) .al-op { margin-top: 4px; padding: 16px; border-radius: var(--radius-xl); grid-template-areas: "back id . acts" "title title title title" "meta meta meta meta"; column-gap: 10px; row-gap: 10px; } :where(.al-phone) .al-op__back { margin-right: 0; } :where(.al-phone) .al-op__id { gap: 10px; } :where(.al-phone) .al-op__id span { font-size: 14px; } :where(.al-phone) .al-op__title { flex-wrap: wrap; gap: 6px 10px; margin-top: 2px; } :where(.al-phone) .al-op__title h2 { font-size: 24px; line-height: 1.15; white-space: normal; overflow: visible; } :where(.al-phone) .al-op__a--d { display: none; } :where(.al-phone) .al-op__a--m { display: inline-flex; } :where(.al-phone) .al-lr { padding: 14px 16px; font-size: 14.5px; } /* al-phone ↑ */

.al-op__meta .al-pf { background: var(--plate-fill); color: var(--plate-ink-0); box-shadow: inset 0 0 0 1px var(--plate-line); vertical-align: 1px; }
.al-sort-wrap { position: relative; display: inline-flex; }
.al-sort__menu { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; z-index: 40; }
.al-flt__row1 > .al-flt__cb { flex: none; }
.al-flt__row1 > .al-seg { flex: none; }
.al-sheet .al-drp { display: block; }
.al-sheet .al-drp__trigger { width: 100%; justify-content: flex-start; }
/* page layout: vertical stack of blocks (cards, plates, link rows) with the standard 16px rhythm */
.al-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.al-stack--20 { gap: 20px; }
.al-flt__minl { display: none; flex: none; }
@media (max-width: 767px) {
  .al-flt__row1 > .al-flt__minl { display: flex; }
  .al-flt__minl .al-flt__mbtn { height: 50px; padding: 0 14px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-flt__row1 > .al-flt__minl { display: flex; } :where(.al-phone) .al-flt__minl .al-flt__mbtn { height: 50px; padding: 0 14px; } /* al-phone ↑ */

.al-cm { position: relative; flex: none; display: inline-flex; margin: -6px -6px -6px auto; }
.al-cm__btn { width: 28px; height: 28px; }
.al-cm__menu { position: absolute; top: calc(100% + 6px); right: 0; width: 220px; z-index: 40; }
.al-cm__danger, .al-cm__danger .al-menu__optLabel { color: var(--danger-ink); }
.al-cm__title { padding: 6px 10px 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.al-cm__opt--sub { align-items: flex-start; }
.al-cm__opt--sub > .al-icon { margin-top: 2px; color: var(--accent-strong); }
.al-cm__danger.al-cm__opt--sub > .al-icon { color: var(--danger-ink); }
.al-cm__opt--sub .al-menu__optSub { white-space: normal; line-height: 1.4; }   /* an explanation under the item wraps, not cut */
.al-cm__opt--sub .al-pf { vertical-align: 1px; margin-right: 2px; }
.al-cm__mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.45; white-space: normal; word-break: break-all; }
/* two buttons side by side in a card corner (links + «⋯») */
.al-cm-group { flex: none; display: inline-flex; align-items: center; gap: 4px; margin: -6px -6px -6px auto; }
.al-cm-group .al-cm { margin: 0; }
/* phone: the header aside (queue status etc.) is centred against title + subtitle */
@media (max-width: 767px) {
  .al-ph__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
  .al-ph__row { display: contents; }
  .al-ph__title { grid-column: 1; grid-row: 1; }
  .al-ph__text > .al-ph__sub { grid-column: 1; grid-row: 2; }
  .al-ph__aside--m { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* al-phone ↓ */ :where(.al-phone) .al-ph__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; } :where(.al-phone) .al-ph__row { display: contents; } :where(.al-phone) .al-ph__title { grid-column: 1; grid-row: 1; } :where(.al-phone) .al-ph__text > .al-ph__sub { grid-column: 1; grid-row: 2; } :where(.al-phone) .al-ph__aside--m { grid-column: 2; grid-row: 1 / span 2; align-self: center; } /* al-phone ↑ */


/* FileField */
.al-ff { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.al-ff__label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.al-ff__file, .al-ff__drop { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); min-width: 0; }
.al-ff__file { background: var(--card-sunken); }
.al-ff__drop { box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: pointer; transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.al-ff__drop:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.al-ff__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft-hi); color: var(--accent-deep); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.al-ff__drop .al-ff__icon { background: var(--fill); color: var(--ink-3); }
.al-ff__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-ff__body b { font-size: 14.5px; font-weight: 600; color: var(--ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-ff__drop .al-ff__body b { font-weight: 500; color: var(--ink-1); white-space: normal; }
.al-ff__body small { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.al-ff__x { width: 30px; height: 30px; margin-left: -6px; }
.al-ff__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 767px) {
  .al-ff__file, .al-ff__drop { gap: 12px; padding: 12px 14px; } .al-ff__icon { width: 40px; height: 40px; }
  .al-ff__drop { flex-wrap: wrap; row-gap: 10px; } .al-ff__drop .al-ff__body { flex: 1 1 calc(100% - 60px); } .al-ff__drop .al-btn { margin-left: 52px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-ff__file, :where(.al-phone) .al-ff__drop { gap: 12px; padding: 12px 14px; } :where(.al-phone) .al-ff__icon { width: 40px; height: 40px; } :where(.al-phone) .al-ff__drop { flex-wrap: wrap; row-gap: 10px; } :where(.al-phone) .al-ff__drop .al-ff__body { flex: 1 1 calc(100% - 60px); } :where(.al-phone) .al-ff__drop .al-btn { margin-left: 52px; } /* al-phone ↑ */


/* PayMethodBadge */
.al-pm { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.al-pm--acc { background: #dcebfb; color: #2563a8; }
.al-pm--card { background: #fde6cf; color: #b0570c; }
.al-pm--sbp { background: #d9f2e2; color: #18773f; }
.al-pm--none { background: #f8dfdf; color: #a33a3a; }
[data-theme="dark"] .al-pm--acc { background: rgba(72, 140, 230, .24); color: #9cc7f7; }
[data-theme="dark"] .al-pm--card { background: rgba(234, 140, 52, .24); color: #f4b673; }
[data-theme="dark"] .al-pm--sbp { background: rgba(52, 176, 104, .24); color: #86dba8; }
[data-theme="dark"] .al-pm--none { background: rgba(224, 84, 84, .22); color: #f0a3a3; }

/* Switch with a title — a settings row: text left, toggle right (track stays first in the DOM, row-reverse puts it on the right) */
.al-switch--row { display: flex; width: 100%; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 16px; }
.al-switch--row .al-switch__text { flex: 1 1 auto; min-width: 0; }
.al-switch--row .al-switch__track { margin-top: 1px; }
/* several switches in a row — hairline between them */
.al-switches { display: flex; flex-direction: column; }
.al-switches .al-switch--row { padding: 13px 0; }
.al-switches > .al-switch + .al-switch, .al-switches > .sc-host-x + .sc-host-x .al-switch { box-shadow: 0 -1px 0 var(--hairline); }

/* ProviderChain */
.al-ch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; min-width: 0; font-size: 13px; color: var(--ink-1); }
.al-ch--empty { color: var(--warn-ink); font-weight: 500; }
.al-ch__step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.al-ch__arr { display: grid; color: var(--ink-4); }
.al-ch__pv { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; background: var(--fill); color: var(--ink-1); }
.al-ch__pv--kie { background: #dcebfb; color: #2563a8; }
.al-ch__pv--piapi { background: #ebe5fb; color: #5b43b5; }
.al-ch__pv--laozhang { background: #fde6cf; color: #b0570c; }
.al-ch__pv--toapis { background: #d3f1e7; color: #0d735b; }
.al-ch__pv--dryrun { background: var(--fill); color: var(--ink-3); }
[data-theme="dark"] .al-ch__pv--kie { background: rgba(72, 140, 230, .24); color: #9cc7f7; }
[data-theme="dark"] .al-ch__pv--piapi { background: rgba(140, 110, 240, .26); color: #c3b5fb; }
[data-theme="dark"] .al-ch__pv--laozhang { background: rgba(234, 140, 52, .24); color: #f4b673; }
[data-theme="dark"] .al-ch__pv--toapis { background: rgba(40, 180, 140, .22); color: #8fdcc4; }
.al-ch__code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.al-ch__note { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.al-ch i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.al-ch__price { font-weight: 600; color: var(--ink-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-ch__step--warn .al-ch__price { color: var(--warn-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.al-ch__off { opacity: .5; }
.al-ch--v { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
.al-ch--v li { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 9px 0; }
.al-ch--v li > .al-ch__n, .al-ch--v li > .al-ch__pv { margin-top: 1px; }
.al-ch--v li > .al-ch__price { line-height: 24px; }
.al-ch--v li + li { box-shadow: 0 -1px 0 var(--hairline); }
.al-ch__mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-ch__line { display: flex; align-items: center; gap: 6px; min-height: 24px; min-width: 0; }
.al-ch__meta { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.al-ch__meta b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-1); }
.al-ch__warn { font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--warn-ink); }
.al-ch__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; background: var(--fill); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.al-che { display: flex; flex-direction: column; gap: 12px; }
.al-che__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.al-che__step { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; border-radius: var(--radius-md); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.al-che__step--warn { box-shadow: inset 0 0 0 1px #e6c47e; }
.al-che__step--off > :not(.al-che__set) { opacity: .55; }
.al-che__top { display: grid; grid-template-columns: 14px 22px auto minmax(0, 1fr) auto 32px; align-items: center; column-gap: 8px; }
.al-che__grip { display: grid; place-items: center; color: var(--ink-4); cursor: grab; }
.al-che__top > .al-ch__n { width: 22px; height: 22px; font-size: 12px; }
.al-che__pv { display: flex; }
.al-che__code { min-width: 0; }
.al-che__code .al-select { width: 100%; min-width: 0; height: 42px; box-sizing: border-box; background: var(--card); }
.al-che__code .al-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; }
.al-che__price { min-width: 64px; text-align: right; font-size: 14px; font-weight: 600; color: var(--ink-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-che__step--warn .al-che__price { color: var(--warn-ink); }
.al-che__menu { justify-self: center; }
.al-che__set { display: grid; grid-template-columns: 72px minmax(0, 1fr) 88px auto; align-items: end; gap: 8px; margin-left: 52px; }
.al-che__f .al-field__label { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.al-che__f .al-field__shell { min-height: 38px; padding: 0 10px; background: var(--card); }
.al-che__f .al-field__input { font-size: 14px; font-variant-numeric: tabular-nums; }
.al-che__f .al-field__affix { font-size: 12.5px; }
.al-che__on { display: flex; align-items: center; height: 38px; padding: 0 2px 0 8px; }
.al-che__on .al-switch--row { gap: 10px; }
.al-che__on .al-switch__title { font-size: 13.5px; }
.al-che__var { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 0 52px; font-size: 12.5px; color: var(--ink-3); }
.al-che__var code { font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 5px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-1); }
.al-che__var em { flex-basis: 100%; font-style: normal; font-weight: 500; color: var(--warn-ink); }
.al-che__noteF { margin-left: 52px; }
.al-che__noteF .al-field__shell { min-height: 38px; background: var(--card); }
.al-che__noteF .al-field__input { font-size: 14px; }
.al-che__empty { margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--warn-soft); font-size: 13.5px; color: var(--warn-ink); }
.al-che__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.al-che__note { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 767px) {
  .al-che__top { grid-template-columns: 14px 22px minmax(0, 1fr) auto 32px; row-gap: 8px; }
  .al-che__code { grid-column: 1 / -1; grid-row: 2; }
  .al-che__set { grid-template-columns: 64px minmax(0, 1fr) 76px; margin-left: 0; }
  .al-che__on { grid-column: 1 / -1; height: auto; padding: 2px 0 0; }
  .al-che__var, .al-che__noteF { margin-left: 0; }
}
/* al-phone ↓ */ :where(.al-phone) .al-che__top { grid-template-columns: 14px 22px minmax(0, 1fr) auto 32px; row-gap: 8px; } :where(.al-phone) .al-che__code { grid-column: 1 / -1; grid-row: 2; } :where(.al-phone) .al-che__set { grid-template-columns: 64px minmax(0, 1fr) 76px; margin-left: 0; } :where(.al-phone) .al-che__on { grid-column: 1 / -1; height: auto; padding: 2px 0 0; } :where(.al-phone) .al-che__var, :where(.al-phone) .al-che__noteF { margin-left: 0; } /* al-phone ↑ */

.al-che__on .al-switch--row { align-items: center; }

/* --- Sidebar: logo on top in both states; collapsed — logo only, header keeps its height (text hidden, not removed) --- */
.al-sidebar--collapsed .al-sidebar__scope { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.al-sidebar--collapsed .al-sidebar__scopeText { width: 0; overflow: hidden; visibility: hidden; white-space: nowrap; }

/* --- Segmented block (full width): each option as wide as its label, the leftover width is shared equally —
   long labels («Расчётный счёт») never get squeezed next to short ones («СБП»), on the phone too --- */
.al-seg--block { grid-auto-columns: auto; }
.al-seg--block .al-seg__opt { white-space: nowrap; }
@media (max-width: 767px) {
  .al-seg--block .al-seg__opt { padding: 0 12px; font-size: 14px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-seg--block .al-seg__opt { padding: 0 12px; font-size: 14px; } /* al-phone ↑ */


/* --- Loader: app icon breathing inside a running arc + «Загружаю…» --- */
.al-ld { display: inline-flex; flex-direction: column; align-items: center; gap: 18px; }
.al-ld--fill { display: flex; flex: 1; align-self: stretch; justify-content: center; min-height: 240px; padding-bottom: 14%; box-sizing: border-box; }
.al-ld__mark { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.al-ld__mark svg { position: absolute; inset: 0; animation: al-ld-rot 1.1s linear infinite; }
.al-ld__mark circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.al-ld__track { stroke: var(--accent-soft-hi); }
.al-ld__arc { stroke: var(--accent-strong); stroke-dasharray: 46 200; }
.al-ld__mark img { width: 42px; height: 42px; border-radius: 12px; animation: al-ld-breathe 1.6s ease-in-out infinite; }
.al-ld__t { font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-3); }
.al-ld--sm { gap: 12px; }
.al-ld--sm.al-ld--fill { min-height: 160px; padding-bottom: 0; }
.al-ld--sm .al-ld__mark { width: 48px; height: 48px; }
.al-ld--sm .al-ld__arc { stroke-dasharray: 30 140; }
.al-ld--sm .al-ld__mark img { width: 28px; height: 28px; border-radius: 8px; }
.al-ld--sm .al-ld__t { font-size: 13px; }
@keyframes al-ld-rot { to { transform: rotate(360deg); } }
@keyframes al-ld-breathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .al-ld__mark svg { animation-duration: 3s; } .al-ld__mark img { animation: none; } }

/* --- Field reveal: eye button in a password field --- */
.al-field__reveal { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -8px -6px 0; border: 0; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.al-field__reveal:hover { background: var(--fill); color: var(--ink-0); }
.al-field__reveal[aria-pressed="true"] { color: var(--accent-strong); }

/* --- Menu groups: «Фото» / «Видео» headers, sticky while the list scrolls --- */
.al-menu__group { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 6px; padding: 10px 12px 6px; background: var(--card-raised, var(--card)); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.al-menu__group i { font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--ink-4); }
.al-menu__group ~ .al-menu__group { margin-top: 4px; box-shadow: 0 -1px 0 var(--hairline); }

/* ParamsForm — parameters of one group: a compact table in a Drawer / Sheet */
.al-prm { display: flex; flex-direction: column; gap: 14px; }
.al-prm__note { margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.al-prm__grid { display: grid; column-gap: 12px; row-gap: 10px; align-items: center; }
.al-prm__th { display: flex; align-items: center; gap: 7px; padding-left: 2px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.al-prm__dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3fae76; }
.al-prm__dot[data-tone="warn"] { background: #e2ad45; }   /* the plate highlight colours, a step deeper for a light background */
.al-prm__dot[data-tone="danger"] { background: #df6a62; }
.al-prm__lbl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding-right: 8px; }
.al-prm__lbl b { color: var(--ink-0); font-size: 14.5px; font-weight: 600; }
.al-prm__lbl small { color: var(--ink-3); font-size: 12px; }
.al-prm__lbl .al-ch__pv { font-size: 12.5px; }
.al-prm__cell { min-width: 0; }
.al-prm__cell .al-field__input { font-variant-numeric: tabular-nums; }

/* --- BulkBar: actions over the selected rows, sticks to the bottom of the screen while something is selected --- */
.al-bulk { position: sticky; bottom: 20px; z-index: 30; align-self: center; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(760px, 100%); box-sizing: border-box; margin-top: 16px; padding: 10px 10px 10px 22px; border-radius: 22px; background: var(--plate); color: var(--plate-ink-0); box-shadow: var(--shadow-pop); }
.al-bulk__info { display: flex; align-items: baseline; gap: 4px 18px; flex-wrap: wrap; min-width: 0; }
.al-bulk__n { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-bulk__links { display: flex; gap: 16px; }
.al-bulk__link { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--plate-ink-2); white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.al-bulk__link:hover { color: var(--plate-ink-0); }
.al-bulk__link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
.al-bulk__acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 767px) {
  .al-bulk { bottom: 95px; width: 100%; padding: 10px 10px 10px 18px; }
  .al-bulk__info { flex-direction: column; align-items: flex-start; gap: 3px; }
  .al-bulk__links { gap: 14px; }
  .al-bulk__link { font-size: 13px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-bulk { bottom: 95px; width: 100%; padding: 10px 10px 10px 18px; } :where(.al-phone) .al-bulk__info { flex-direction: column; align-items: flex-start; gap: 3px; } :where(.al-phone) .al-bulk__links { gap: 14px; } :where(.al-phone) .al-bulk__link { font-size: 13px; } /* al-phone ↑ */


/* --- LinkList: sections to open, one card, rows split by hairlines (phone: «Настройки › Параметры» groups) --- */
.al-ll { display: flex; flex-direction: column; padding: 4px 0; overflow: hidden; }
.al-ll__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; column-gap: 12px; padding: 12px 14px 12px 18px; color: inherit; text-decoration: none; cursor: pointer; }
.al-ll__row + .al-ll__row { box-shadow: 0 -1px 0 var(--hairline); }
.al-ll__row:hover { background: var(--row-hover); }
.al-ll__row[aria-current="true"] { background: var(--accent-soft); }
.al-ll__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-ll__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--ink-0); }
.al-ll__row[aria-current="true"] .al-ll__t { color: var(--accent-deep); font-weight: 600; }
.al-ll__code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }
.al-ll__row[aria-current="true"] .al-ll__code { color: var(--accent-strong); }
.al-ll__cnt { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--fill); font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* the same count pill as the desktop group list */
.al-ll__row[aria-current="true"] .al-ll__cnt { background: var(--card); color: var(--accent-deep); }
.al-ll__chev { color: var(--ink-4); }

/* --- Plate settings: a gear left of the main action (parameters of this section) --- */
.al-pl__tools { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 767px) { .al-pl__tools { gap: 8px; } .al-pl__tools .al-pl__set { width: 44px; height: 44px; } }
/* al-phone ↓ */ :where(.al-phone) .al-pl__tools { gap: 8px; } :where(.al-phone) .al-pl__tools .al-pl__set { width: 44px; height: 44px; } /* al-phone ↑ */
   /* the same size as the round «+» */
/* Plate tools: rename / delete the object itself. 44px round buttons in the head, left of the gear and the main action — desktop and phone alike */
.al-pl__own { display: flex; align-items: center; gap: 10px; }
.al-pl__tool { width: 44px; height: 44px; }
.al-pl__tool--danger:hover { color: #f0a3a3; }
.al-pl__tool--text { width: auto; padding: 0 18px 0 14px; font-weight: 600; }   /* a shortcut with a caption («Я»): the same 44px height, a pill */
@media (max-width: 767px) { .al-pl__own { gap: 8px; } }
/* al-phone ↓ */ :where(.al-phone) .al-pl__own { gap: 8px; } /* al-phone ↑ */


/* ================= Dashboard: PeriodBar, StackBars, HeatGrid, ProviderBalance ================= */

/* --- MonthPicker: ‹ Месяц ▾ › + year view (‹ 2026 ›, 12 months) --- */
.al-mpk { position: relative; display: inline-flex; min-width: 0; }
.al-mpk__bar { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 3px; border-radius: var(--radius-pill); background: #ffffff8c; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .al-mpk__bar { background: var(--card-sunken); }
.al-mpk__step, .al-mpk__nav { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.al-mpk__step:hover:not(:disabled), .al-mpk__nav:hover:not(:disabled) { background: var(--fill); color: var(--ink-0); }
.al-mpk__step:disabled, .al-mpk__nav:disabled { color: var(--ink-faint); cursor: default; }
.al-mpk__btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-0); white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.al-mpk__btn:hover, .al-mpk__btn[aria-expanded="true"] { background: var(--card); box-shadow: var(--shadow-tile); }
.al-mpk__btn .al-icon { color: var(--ink-3); }
.al-mpk__btn > span { min-width: 112px; text-align: left; }
.al-mpk__pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 304px; padding: 14px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-raise), 0 0 0 1px var(--line); }
.al-mpk__year { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.al-mpk__year b { font-size: 15px; font-weight: 600; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.al-mpk__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.al-mpk__m { position: relative; height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--fill); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-1); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.al-mpk__m:hover:not(:disabled) { background: var(--accent-soft); color: var(--ink-0); }
.al-mpk__m:disabled { background: none; color: var(--ink-faint); cursor: default; }
.al-mpk__m[aria-pressed="true"] { background: var(--accent-strong); color: #fff; }
.al-mpk__m[data-now="true"]::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent-strong); }
.al-mpk__m[data-now="true"][aria-pressed="true"]::after { background: #fff; }
.al-mpk--inline { display: block; }
.al-mpk--text { display: inline-flex; vertical-align: baseline; }
.al-mpk__text { display: inline-flex; align-items: center; gap: 4px; height: 26px; margin-left: 2px; padding: 0 8px 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--fill); font: inherit; font-weight: 600; color: var(--ink-0); white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.al-mpk__text:hover, .al-mpk__text[aria-expanded="true"] { background: var(--fill-hover); }
.al-mpk__text .al-icon { color: var(--ink-3); }
.al-mpk--text .al-mpk__pop { top: calc(100% + 8px); }
.al-card--plate .al-mpk__text { background: var(--plate-fill); color: var(--plate-ink-0); box-shadow: inset 0 0 0 1px var(--plate-line); }
.al-card--plate .al-mpk__text:hover, .al-card--plate .al-mpk__text[aria-expanded="true"] { background: var(--plate-fill-hover); }
.al-card--plate .al-mpk__text .al-icon { color: var(--plate-ink-2); }
.al-card--plate[data-month="true"] { overflow: visible; }
.al-mpk--inline .al-mpk__m { height: 52px; font-size: 15px; }
.al-sheet .al-mpk--inline { padding-bottom: 22px; }   /* sheet without a footer: room for the home indicator (12 + 22 = 34px) */

/* --- PeriodBar: month + platform, one row above the numbers --- */
.al-pb { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.al-pb__main, .al-pb__side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.al-pb .al-seg { background: #ffffff8c; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .al-pb .al-seg { background: var(--card-sunken); }
.al-pb__note { font-size: 13px; color: var(--ink-3); }
/* children before the month — the object of the page (a model on «Модели»): a Select in the same 40px pill as the month */
.al-pb__main .al-selectWrap { width: 260px; }
.al-pb__main .al-select { min-height: 40px; height: 40px; padding: 0 12px 0 16px; border: 0; border-radius: var(--radius-pill); background: #ffffff8c; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; }
.al-pb__main .al-select:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.al-pb__main .al-select[data-open="true"] { box-shadow: inset 0 0 0 1px var(--accent-strong), 0 0 0 3px var(--accent-ring); }
[data-theme="dark"] .al-pb__main .al-select { background: var(--card-sunken); }
@media (max-width: 767px) {
  .al-pb { flex-direction: column; align-items: stretch; gap: 10px; }
  .al-pb__main { flex-direction: column; align-items: stretch; }
  .al-pb__main > .al-mpk, .al-pb__main .al-mpk__bar { display: flex; width: 100%; box-sizing: border-box; }
  .al-pb__main .al-mpk__btn { flex: 1; justify-content: center; }
  .al-pb__main .al-mpk__btn > span { min-width: 0; text-align: center; }
  .al-pb__main .al-selectWrap { width: 100%; }
  .al-pb__side { flex-wrap: nowrap; justify-content: space-between; }
  .al-pb__side > .al-seg { display: grid; grid-auto-flow: column; grid-auto-columns: auto; flex: 1; box-sizing: border-box; }
  .al-pb__side > .al-seg .al-seg__opt { padding: 0 8px; font-size: 14px; }
  .al-pb__note { display: none; }
}
/* al-phone ↓ */ :where(.al-phone) .al-pb { flex-direction: column; align-items: stretch; gap: 10px; } :where(.al-phone) .al-pb__main { flex-direction: column; align-items: stretch; } :where(.al-phone) .al-pb__main > .al-mpk, :where(.al-phone) .al-pb__main .al-mpk__bar { display: flex; width: 100%; box-sizing: border-box; } :where(.al-phone) .al-pb__main .al-mpk__btn { flex: 1; justify-content: center; } :where(.al-phone) .al-pb__main .al-mpk__btn > span { min-width: 0; text-align: center; } :where(.al-phone) .al-pb__main .al-selectWrap { width: 100%; } :where(.al-phone) .al-pb__side { flex-wrap: nowrap; justify-content: space-between; } :where(.al-phone) .al-pb__side > .al-seg { display: grid; grid-auto-flow: column; grid-auto-columns: auto; flex: 1; box-sizing: border-box; } :where(.al-phone) .al-pb__side > .al-seg .al-seg__opt { padding: 0 8px; font-size: 14px; } :where(.al-phone) .al-pb__note { display: none; } /* al-phone ↑ */


/* --- BalancePlate with an aside (provider balances) and overlap (tiles ride over its bottom, like Filters over Plate) --- */
.al-plate.al-plate--aside { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: stretch; }
.al-card--plate[data-overlap="true"] .al-plate { padding-bottom: 94px; }
.al-plate__list { display: flex; flex-direction: column; margin-top: 12px; }
.al-plate__asideLabel--act { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-plate__asideBtn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -8px -7px -8px 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--plate-ink-2); cursor: pointer; }
.al-plate__asideBtn:hover { background: var(--plate-fill-hover); color: var(--plate-ink-0); }
.al-plate__asideBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.al-plate--aside > .al-plate__main { display: flex; flex-direction: column; min-width: 0; }
.al-plate__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.al-plate__fact { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 13px 16px 14px; border-radius: var(--radius-md); background: var(--plate-fill); }
.al-plate__fact span { color: var(--plate-ink-2); font-size: 12.5px; }
.al-plate__fact b { color: var(--plate-ink-0); font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-plate__fact small { color: var(--plate-ink-2); font-size: 12.5px; }
.al-over { position: relative; margin: -62px 30px 0; }
.al-over .al-stat { box-shadow: var(--shadow-raise); }
@media (max-width: 767px) {
  .al-plate.al-plate--aside { grid-template-columns: minmax(0, 1fr); }
  .al-plate__facts { display: flex; flex-direction: column; gap: 0; margin-top: 18px; padding: 2px 14px; border-radius: var(--radius-md); background: var(--plate-fill); }
  .al-plate__fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; min-width: 0; padding: 11px 0; border-radius: 0; background: none; }
  .al-plate__fact + .al-plate__fact { box-shadow: 0 -1px 0 var(--plate-line); }
  .al-plate__fact b { grid-column: 2; grid-row: 1; font-size: 15px; text-align: right; }
  .al-plate__fact span { grid-column: 1; grid-row: 1; }
  .al-plate__fact small { grid-column: 2; text-align: right; }
  .al-card--plate[data-overlap="true"] .al-plate { padding-bottom: 76px; }
  .al-over { margin: -60px 8px 0; }
}
/* al-phone ↓ */ :where(.al-phone) .al-plate.al-plate--aside { grid-template-columns: minmax(0, 1fr); } :where(.al-phone) .al-plate__facts { display: flex; flex-direction: column; gap: 0; margin-top: 18px; padding: 2px 14px; border-radius: var(--radius-md); background: var(--plate-fill); } :where(.al-phone) .al-plate__fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; min-width: 0; padding: 11px 0; border-radius: 0; background: none; } :where(.al-phone) .al-plate__fact + .al-plate__fact { box-shadow: 0 -1px 0 var(--plate-line); } :where(.al-phone) .al-plate__fact b { grid-column: 2; grid-row: 1; font-size: 15px; text-align: right; } :where(.al-phone) .al-plate__fact span { grid-column: 1; grid-row: 1; } :where(.al-phone) .al-plate__fact small { grid-column: 2; text-align: right; } :where(.al-phone) .al-card--plate[data-overlap="true"] .al-plate { padding-bottom: 76px; } :where(.al-phone) .al-over { margin: -60px 8px 0; } /* al-phone ↑ */


/* --- BalancePlate more: on a phone the facts (and page blocks with class al-plate-more, e.g. the money StatTiles) stay behind «Показать ещё»
   at the bottom of the plate, under the balances; open — «Свернуть». Desktop: no button, everything shown. --- */
.al-plate__more { display: none; }
@media (max-width: 767px) {
  .al-plate.al-plate--more { row-gap: 0; }
  .al-plate.al-plate--more > .al-plate__main { display: contents; }
  .al-plate--more > .al-plate__aside { order: 1; margin-top: 20px; }
  .al-plate--more .al-plate__facts { order: 2; margin-top: 12px; }
  .al-plate--more > .al-plate__more { order: 3; }
  .al-plate__more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: var(--radius-md);
    background: var(--plate-fill); color: var(--plate-ink-0); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
  .al-plate__more:hover { background: var(--plate-fill-hover); }
  .al-plate__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .al-plate__more .al-icon { color: var(--plate-ink-2); transition: transform .2s; }
  .al-plate__more[aria-expanded="true"] .al-icon { transform: rotate(180deg); }
  .al-card--plate[data-more="closed"] .al-plate__facts { display: none; }
  body:has(.al-card--plate[data-more="closed"]) .al-plate-more { display: none; }
}
/* al-phone ↓ */ :where(.al-phone) .al-plate.al-plate--more { row-gap: 0; } :where(.al-phone) .al-plate.al-plate--more > .al-plate__main { display: contents; } :where(.al-phone) .al-plate--more > .al-plate__aside { order: 1; margin-top: 20px; } :where(.al-phone) .al-plate--more .al-plate__facts { order: 2; margin-top: 12px; } :where(.al-phone) .al-plate--more > .al-plate__more { order: 3; } :where(.al-phone) .al-plate__more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: var(--radius-md);
    background: var(--plate-fill); color: var(--plate-ink-0); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; } :where(.al-phone) .al-plate__more:hover { background: var(--plate-fill-hover); } :where(.al-phone) .al-plate__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } :where(.al-phone) .al-plate__more .al-icon { color: var(--plate-ink-2); transition: transform .2s; } :where(.al-phone) .al-plate__more[aria-expanded="true"] .al-icon { transform: rotate(180deg); } :where(.al-phone) .al-card--plate[data-more="closed"] .al-plate__facts { display: none; } :where(.al-phone):has(.al-card--plate[data-more="closed"]) .al-plate-more { display: none; } /* al-phone ↑ */


/* --- StackBars: stacked columns, built on the TrendChart frame (.al-chart) --- */
.al-sb__tipTotal { margin-top: 7px !important; padding-top: 7px; box-shadow: 0 -1px 0 var(--hairline); }
.al-sb__tipTotal .al-chart__tipName { color: var(--ink-3); }

/* --- TrendChart legendStacked: name on the first line, total on the second --- */
.al-chart--legend2 .al-chart__legend { align-items: flex-start; gap: 8px 22px; }
.al-chart--legend2 .al-chart__legendItem { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 7px; row-gap: 1px; }
.al-chart--legend2 .al-chart__legendItem b { grid-column: 2; font-size: 15px; }

/* --- HeatGrid: rows × columns, one hue light → dark --- */
.al-hg { --hg: var(--danger); }
.al-hg--accent { --hg: var(--accent-strong); }
.al-hg__wrap { margin-top: 16px; min-width: 0; }
.al-hg__grid { display: grid; gap: 3px; align-items: center; }
.al-hg__row { padding-right: 10px; font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.al-hg__col { padding-top: 7px; font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: visible; }
.al-hg__cell { display: block; height: 20px; border-radius: 4px; background: var(--fill); cursor: default; }
.al-hg [data-l="1"] { background: color-mix(in srgb, var(--hg) 16%, var(--card)); }
.al-hg [data-l="2"] { background: color-mix(in srgb, var(--hg) 32%, var(--card)); }
.al-hg [data-l="3"] { background: color-mix(in srgb, var(--hg) 52%, var(--card)); }
.al-hg [data-l="4"] { background: color-mix(in srgb, var(--hg) 74%, var(--card)); }
.al-hg [data-l="5"] { background: var(--hg); }
.al-hg__cell[data-on="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink-0); }
.al-hg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.al-hg__now b { color: var(--ink-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.al-hg__scale { display: inline-flex; align-items: center; gap: 3px; }
.al-hg__scale span { margin: 0 4px; }
.al-hg__scale i { display: block; width: 16px; height: 10px; border-radius: 3px; background: var(--fill); }
@media (max-width: 767px) {
  .al-hg__grid { gap: 2px; }
  .al-hg__cell { height: 14px; border-radius: 3px; }
  .al-hg__row { padding-right: 6px; font-size: 11px; }
  .al-hg__col { font-size: 10px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-hg__grid { gap: 2px; } :where(.al-phone) .al-hg__cell { height: 14px; border-radius: 3px; } :where(.al-phone) .al-hg__row { padding-right: 6px; font-size: 11px; } :where(.al-phone) .al-hg__col { font-size: 10px; } /* al-phone ↑ */


/* --- ProviderBalance: AI provider balance with runway --- */
.al-pbal { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px 20px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); }
.al-pbal__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.al-pbal__top .al-ch__pv { font-size: 12.5px; }
.al-pbal__value { margin-top: 6px; color: var(--ink-0); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.al-pbal__value span { margin-left: 6px; color: var(--ink-3); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.al-pbal__run { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.al-pbal__run .al-dot { flex: none; background: var(--ok-ink); }
.al-pbal--warn .al-pbal__run .al-dot { background: var(--warn-ink); }
.al-pbal--danger .al-pbal__run .al-dot { background: var(--danger-ink); }
.al-pbal--warn .al-pbal__run, .al-pbal--danger .al-pbal__run { color: var(--ink-0); font-weight: 500; }
.al-pbal__meta { color: var(--ink-3); font-size: 12.5px; }
.al-pbal__act { align-self: flex-start; margin-top: 8px; }
.al-pbal--row { flex-direction: row; align-items: center; gap: 12px; padding: 9px 0; border-radius: 0; background: none; box-shadow: none; }
.al-pbal--row + .al-pbal--row { box-shadow: 0 -1px 0 var(--hairline); }
/* row — one line per provider: tag · dot + balance (+ a short state when low) · round «+». The state colours the dot, the balance and the word;
   the full sentence is in the row's tooltip («Kie: Мало — пора пополнить») */
.al-pbal--row .al-pbal__tag { flex: none; width: 84px; }
.al-pbal--row .al-pbal__main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.al-pbal--row .al-pbal__main > .al-dot { background: var(--ok-ink); }
.al-pbal--row .al-pbal__value { margin: 0; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.al-pbal--row .al-pbal__value span { margin-left: 5px; font-size: 13px; }
.al-pbal__state { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.al-pbal--row.al-pbal--warn .al-pbal__main > .al-dot { background: var(--warn-ink); }
.al-pbal--row.al-pbal--danger .al-pbal__main > .al-dot { background: var(--danger-ink); }
.al-pbal--row.al-pbal--off .al-pbal__main > .al-dot { background: var(--ink-4); }
.al-pbal--row.al-pbal--warn .al-pbal__value, .al-pbal--row.al-pbal--warn .al-pbal__state { color: var(--warn-ink); }
.al-pbal--row.al-pbal--danger .al-pbal__value, .al-pbal--row.al-pbal--danger .al-pbal__state { color: var(--danger-ink); }
.al-pbal--row.al-pbal--off .al-pbal__value, .al-pbal--row.al-pbal--off .al-pbal__state { color: var(--ink-3); }
.al-pbal__link { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--accent-soft); font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong); cursor: pointer; }
.al-pbal--row .al-pbal__link { width: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.al-pbal--row.al-pbal--ok .al-pbal__link, .al-pbal--row.al-pbal--off .al-pbal__link { background: var(--fill); color: var(--ink-1); }
/* on the dark plate */
.al-card--plate .al-pbal--row + .al-pbal--row { box-shadow: 0 -1px 0 var(--plate-line); }
.al-card--plate .al-pbal--row .al-pbal__value { color: var(--plate-ink-0); }
.al-card--plate .al-pbal--row .al-pbal__value span, .al-card--plate .al-pbal--row .al-pbal__meta { color: var(--plate-ink-2); }
.al-card--plate .al-pbal--row .al-pbal__main > .al-dot { background: #7fd9ab; }
.al-card--plate .al-pbal--warn .al-pbal__main > .al-dot { background: #e6c47e; }
.al-card--plate .al-pbal--danger .al-pbal__main > .al-dot { background: #f0a3a3; }
.al-card--plate .al-pbal--off .al-pbal__main > .al-dot { background: var(--plate-ink-2); }
.al-card--plate .al-pbal--warn .al-pbal__value, .al-card--plate .al-pbal--warn .al-pbal__state { color: #e6c47e; }
.al-card--plate .al-pbal--danger .al-pbal__value, .al-card--plate .al-pbal--danger .al-pbal__state { color: #f0a3a3; }
.al-card--plate .al-pbal--off .al-pbal__value, .al-card--plate .al-pbal--off .al-pbal__state { color: var(--plate-ink-2); }
.al-card--plate .al-pbal__link { background: var(--plate-ink-0); color: var(--plate); }
.al-card--plate .al-pbal--ok .al-pbal__link, .al-card--plate .al-pbal--off .al-pbal__link { background: var(--plate-fill-hover); color: var(--plate-ink-0); }
.al-card--plate .al-pbal--ok .al-pbal__link:hover, .al-card--plate .al-pbal--off .al-pbal__link:hover { background: #ffffff30; }
/* phone: the state goes under the balance (lined up with it), «+» 34px */
@media (max-width: 767px) {
  .al-pbal--row { gap: 10px; padding: 10px 0; }
  .al-pbal--row .al-pbal__tag { width: 78px; }
  .al-pbal--row .al-pbal__main { gap: 1px 7px; }
  .al-pbal--row .al-pbal__value span { margin-left: 4px; font-size: 12.5px; }
  .al-pbal--row .al-pbal__state { flex-basis: 100%; padding-left: 14px; font-size: 12px; }
  .al-pbal--row .al-pbal__link { width: 34px; height: 34px; }
  .al-plate__aside .al-plate__list { margin-top: 6px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-pbal--row { gap: 10px; padding: 10px 0; } :where(.al-phone) .al-pbal--row .al-pbal__tag { width: 78px; } :where(.al-phone) .al-pbal--row .al-pbal__main { gap: 1px 7px; } :where(.al-phone) .al-pbal--row .al-pbal__value span { margin-left: 4px; font-size: 12.5px; } :where(.al-phone) .al-pbal--row .al-pbal__state { flex-basis: 100%; padding-left: 14px; font-size: 12px; } :where(.al-phone) .al-pbal--row .al-pbal__link { width: 34px; height: 34px; } :where(.al-phone) .al-plate__aside .al-plate__list { margin-top: 6px; } /* al-phone ↑ */

/* RankList — ranked list with covers (dashboard «Контент») */
.al-rank .al-card__body { margin-top: 14px; }
.al-rank__list { display: grid; column-gap: 14px; margin: 0 -8px; }
.al-rank__grid { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-width: 0; }
.al-rank__head { height: 36px; padding: 0 12px; border-radius: 12px; background: var(--card-sunken); font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.al-rank__head [data-sorted] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; color: var(--ink-1); }
.al-rank__row { padding: 9px 12px; border-radius: 12px; color: var(--ink-1); font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.al-rank__row + .al-rank__row { box-shadow: 0 -1px 0 var(--hairline); }
.al-rank__row:hover { background: var(--row-hover); box-shadow: 0 -1px 0 var(--hairline); }   /* separators stay; the first row gets one too, off the header */
.al-rank__n { font-size: 13px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.al-rank__name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.al-rank__cover { flex: none; width: 36px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--fill); }
.al-rank__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.al-rank__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-rank__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink-0); }
.al-rank__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--ink-3); }
.al-rank__meta > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-rank__meta .al-badge { flex: none; height: 18px; padding: 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.al-rank__sub, .al-rank__cap { display: none; }
.al-rank__c { min-width: 0; text-align: right; white-space: nowrap; }
.al-rank__v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.al-rank__v small { font-size: 12px; color: var(--ink-3); }
.al-rank__c[data-bar] { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.al-rank__bar { display: block; align-self: stretch; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.al-rank__bar b { display: block; height: 100%; border-radius: 2px; background: var(--cat-1, var(--accent)); }
.al-rank__c[data-tone="up"] svg { color: var(--ok-ink); }
.al-rank__c[data-tone="down"] svg { color: var(--danger-ink); }
.al-rank__c[data-tone="warn"] .al-dot { width: 6px; height: 6px; background: var(--warn-ink); }
.al-rank__c[data-tone="danger"] .al-dot { width: 6px; height: 6px; background: var(--danger-ink); }
.al-rank__c[data-tone="warn"], .al-rank__c[data-tone="danger"] { font-weight: 600; color: var(--ink-0); }
.al-rank__empty { padding: 28px 0; text-align: center; font-size: 14px; color: var(--ink-3); }
/* acting on rows: checkboxes in front, a switch at the end; the row stops being one link — the cover and the title open the object */
.al-rank__ck { display: flex; align-items: center; }
.al-rank__ck .al-check__box { margin-top: 0; }
.al-rank__row--tools { cursor: default; }
a.al-rank__name { color: inherit; text-decoration: none; cursor: pointer; }
a.al-rank__name:hover .al-rank__title { color: var(--accent-deep); }
.al-rank__row[data-selected="true"] { background: var(--accent-soft); box-shadow: 0 -1px 0 var(--hairline); }
.al-rank__sw { display: flex; justify-content: flex-end; text-align: right; }
.al-rank__row[data-off="true"] > :not(.al-rank__sw):not(.al-rank__ck) { opacity: .45; }   /* switched off: faded, still in the list until the page reloads */
.al-rank__more { display: flex; justify-content: center; padding-top: 12px; }
@media (max-width: 767px) {
  .al-rank .al-card__head { flex-direction: column; align-items: stretch; gap: 12px; }
  .al-rank .al-card__body { margin-top: 8px; }
  .al-rank__list { display: flex; flex-direction: column; margin: 0; }
  .al-rank__head { display: none; }
  .al-rank__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 0; border-radius: 0; }
  .al-rank__row:hover { background: none; box-shadow: 0 -1px 0 var(--hairline); }
  .al-rank__head + .al-rank__row:hover { box-shadow: none; }   /* the hidden header row is the first child */
  .al-rank__row .al-rank__c { display: none; }
  .al-rank__row .al-rank__c--first { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; align-self: start; padding-top: 2px; font-weight: 600; color: var(--ink-0); }
  .al-rank__row .al-rank__c--first .al-rank__bar { width: 56px; align-self: flex-end; }
  .al-rank__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .al-rank__row .al-rank__n { display: none; }   /* no row numbers on a phone: the cover and the order are enough */
  .al-rank__cap { display: block; margin-top: -2px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
  .al-rank__row:has(> .al-rank__ck) { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; }
  .al-rank__row[data-selected="true"] { background: none; }   /* the checkbox is enough; separators stay as on the other rows */
  .al-rank__head + .al-rank__row[data-selected="true"] { box-shadow: none; }   /* no header on a phone — nothing to keep apart */
  .al-rank__sw { display: none; }   /* phone: no row switches — select and act through BulkBar */
}
/* al-phone ↓ */ :where(.al-phone) .al-rank .al-card__head { flex-direction: column; align-items: stretch; gap: 12px; } :where(.al-phone) .al-rank .al-card__body { margin-top: 8px; } :where(.al-phone) .al-rank__list { display: flex; flex-direction: column; margin: 0; } :where(.al-phone) .al-rank__head { display: none; } :where(.al-phone) .al-rank__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 0; border-radius: 0; } :where(.al-phone) .al-rank__row:hover { background: none; box-shadow: 0 -1px 0 var(--hairline); } :where(.al-phone) .al-rank__head + .al-rank__row:hover { box-shadow: none; } :where(.al-phone) .al-rank__row .al-rank__c { display: none; } :where(.al-phone) .al-rank__row .al-rank__c--first { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; align-self: start; padding-top: 2px; font-weight: 600; color: var(--ink-0); } :where(.al-phone) .al-rank__row .al-rank__c--first .al-rank__bar { width: 56px; align-self: flex-end; } :where(.al-phone) .al-rank__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } :where(.al-phone) .al-rank__row .al-rank__n { display: none; } :where(.al-phone) .al-rank__cap { display: block; margin-top: -2px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); } :where(.al-phone) .al-rank__row:has(> .al-rank__ck) { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; } :where(.al-phone) .al-rank__row[data-selected="true"] { background: none; } :where(.al-phone) .al-rank__head + .al-rank__row[data-selected="true"] { box-shadow: none; } :where(.al-phone) .al-rank__sw { display: none; } /* al-phone ↑ */


/* ================= PUSH рассылки: Field counter, PushPreview, PushCampaignList ================= */
/* Field: soft-limit counter right of the label (max), warning under the field (warn), monospace input (mono) for keys and JSON */
.al-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.al-field__top .al-field__label { margin-bottom: 0; }
.al-field__count { flex: none; font-size: 12.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.al-field__count[data-over="true"] { color: var(--warn-ink); font-weight: 600; }
.al-field__warn { display: block; margin-top: 7px; color: var(--warn-ink); font-size: 13px; line-height: 1.45; }
.al-field__input--mono { font-family: var(--font-mono); font-size: 14px; }

/* PushPreview — the push as iOS 16+ shows it. Default: a raised card on a sunken stage; sm — flat on card-sunken inside a list */
.al-push { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px 12px 12px; border-radius: 22px; background: var(--card-raised); box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.33; color: var(--ink-0); text-align: left; }
.al-push__icon { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 1px; border-radius: 9px; overflow: hidden; background: var(--plate); color: var(--plate-ink-0); font-size: 17px; font-weight: 700; }
.al-push__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.al-push__main { min-width: 0; }
.al-push__head { display: flex; align-items: baseline; gap: 8px; }
.al-push__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -.005em; }
.al-push__time { flex: none; font-size: 12.5px; color: var(--ink-3); }
.al-push__body { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--ink-1); }
.al-push__body[data-empty="true"] { color: var(--ink-4); }
/* caption — the app preview stage at the top of the form, as the package preview («Так пакет увидят в приложении»): dark, radius 20 */
.al-push-stage { padding: 14px 14px 16px; border-radius: 20px; background: #0f0e15; }
.al-push-stage__cap { margin: 0 2px 12px; font-size: 12px; color: #8d8a99; }
.al-push--sm { grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 9px 12px 10px 10px; border-radius: 16px; background: var(--fill); box-shadow: none; font-size: 13px; line-height: 1.35; }
.al-push--sm .al-push__icon { width: 30px; height: 30px; border-radius: 7px; font-size: 14px; }
.al-push--sm .al-push__time { font-size: 11.5px; }

/* PushCampaignList — desktop: one card, a grid row per campaign; phone: a card per campaign */
.al-pcl { padding: 8px; }
.al-pcl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) 168px 52px 76px; column-gap: 20px; align-items: center; padding: 14px 12px; }
.al-pcl__head { height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--card-sunken); font-size: 12.5px; font-weight: 500; color: var(--ink-3); }   /* the same header as every list table */
.al-pcl__head [data-align="right"] { text-align: right; }
.al-pcl__row { position: relative; border-radius: var(--radius-sm); }
.al-pcl__row:has([aria-expanded="true"]) { z-index: 2; }
.al-pcl__row + .al-pcl__row { box-shadow: 0 -1px 0 var(--hairline); }
.al-pcl__row:hover { background: var(--row-hover); box-shadow: 0 -1px 0 var(--hairline); }
.al-pcl__row[data-sel="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-strong), 0 -1px 0 var(--hairline); }   /* the row open in the Drawer — as on every «edit a row» board */
.al-pcl__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-pcl__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.al-pcl__name b, .al-pcl__name a { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-0); text-decoration: none; }
.al-pcl__name a:hover { color: var(--accent-strong); }
.al-pcl__name code { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--fill); font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.al-pcl__name .al-badge { height: 22px; }
.al-pcl__when { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.al-pcl__key { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 12px; color: var(--ink-4); }
.al-pcl__key code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.al-pcl__push { min-width: 0; }
.al-pcl__sent { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; font-variant-numeric: tabular-nums; }
.al-pcl__sent b { font-size: 15px; font-weight: 600; color: var(--ink-0); }
.al-pcl__sent small { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; }
.al-pcl__sent small[data-tone="danger"] { color: var(--danger-ink); }
.al-pcl__sentLbl { display: none; }
.al-pcl__sw { display: flex; justify-content: center; }
.al-pcl__ra { display: flex; justify-content: flex-end; }
.al-pcl__cm { display: none; }
.al-pcl__row[data-off="true"] .al-pcl__push, .al-pcl__row[data-off="true"] .al-pcl__sent, .al-pcl__row[data-off="true"] .al-pcl__when, .al-pcl__row[data-off="true"] .al-pcl__key { opacity: .55; }   /* switched off: the push is not going out */
@media (max-width: 767px) {
  .al-pcl { padding: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 16px; }
  .al-pcl__head { display: none; }
  .al-pcl__row { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main sw" "push push" "sent sent"; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); }
  .al-pcl__row + .al-pcl__row, .al-pcl__row:hover, .al-pcl__head + .al-pcl__row:hover { background: var(--card); box-shadow: var(--shadow-card); }
  .al-pcl__main { grid-area: main; }
  .al-pcl__sw { grid-area: sw; align-self: start; }
  .al-pcl__push { grid-area: push; }
  .al-pcl__sent { grid-area: sent; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 2px; margin: 0 -14px; padding: 12px 52px 0 14px; text-align: left; box-shadow: 0 -1px 0 var(--hairline); font-size: 13px; color: var(--ink-3); }
  .al-pcl__sent b { font-size: 14px; }
  .al-pcl__sentLbl { display: inline; }
  .al-pcl__sent small { flex-basis: 100%; white-space: normal; }
  .al-pcl__ra { display: none; }
  .al-pcl__cm { display: block; position: absolute; right: 12px; bottom: 14px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-pcl { padding: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 16px; } :where(.al-phone) .al-pcl__head { display: none; } :where(.al-phone) .al-pcl__row { position: relative; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main sw" "push push" "sent sent"; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); } :where(.al-phone) .al-pcl__row + .al-pcl__row, :where(.al-phone) .al-pcl__row:hover, :where(.al-phone) .al-pcl__head + .al-pcl__row:hover { background: var(--card); box-shadow: var(--shadow-card); } :where(.al-phone) .al-pcl__main { grid-area: main; } :where(.al-phone) .al-pcl__sw { grid-area: sw; align-self: start; } :where(.al-phone) .al-pcl__push { grid-area: push; } :where(.al-phone) .al-pcl__sent { grid-area: sent; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 5px; row-gap: 2px; margin: 0 -14px; padding: 12px 52px 0 14px; text-align: left; box-shadow: 0 -1px 0 var(--hairline); font-size: 13px; color: var(--ink-3); } :where(.al-phone) .al-pcl__sent b { font-size: 14px; } :where(.al-phone) .al-pcl__sentLbl { display: inline; } :where(.al-phone) .al-pcl__sent small { flex-basis: 100%; white-space: normal; } :where(.al-phone) .al-pcl__ra { display: none; } :where(.al-phone) .al-pcl__cm { display: block; position: absolute; right: 12px; bottom: 14px; } /* al-phone ↑ */


/* DateRangePicker size="sm" — a 36px button in a card head (a day for a chart); stays its own width on the phone */
.al-drp.al-drp--sm { display: inline-block; }
.al-drp--sm .al-drp__trigger { width: auto; height: 36px; padding: 0 12px; gap: 6px; font-size: 13.5px; }
.al-drp--single .al-drp__foot { justify-content: flex-end; }
/* TrendChart with tools: the control is right of the title, the legend goes under the head */
.al-chart__tools--below { margin-top: -2px; }
/* DateRangePicker on the phone: the panel is a bottom sheet over the TabBar, the page dims — as with Sheet */
@media (max-width: 600px) { .al-drp__pop { z-index: 51; box-shadow: var(--shadow-pop), 0 0 0 100vmax var(--scrim); } .al-drp__pop[data-align] { left: 0; right: 0; } }
/* al-phone ↓ */ :where(.al-phone) .al-drp__pop { z-index: 51; box-shadow: var(--shadow-pop), 0 0 0 100cqmax var(--scrim); } :where(.al-phone) .al-drp__pop[data-align] { left: 0; right: 0; } /* al-phone ↑ */

/* TrendChart tools: a Segmented in the chart head is compact — options by their text, 30px */
/* FileField dragOver: a file is held over the empty zone — accent dashed frame, accent tile with an arrow, «Отпустите, чтобы загрузить»; the button keeps its place */
.al-ff__drop[data-over="true"] { background: var(--accent-soft-hi); box-shadow: none; outline: 2px dashed var(--accent-strong); outline-offset: -2px; }
.al-ff__drop { position: relative; }
.al-ff__drop[data-over="true"] > :not(.al-ff__over) { visibility: hidden; }
.al-ff__over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border-radius: inherit; pointer-events: none; }
.al-ff__over .al-ff__icon { background: var(--accent-strong); color: var(--on-accent); }
.al-ff__over b { font-size: 15px; font-weight: 600; color: var(--accent-deep); }
.al-chart--tools > .al-card__head .al-seg { grid-auto-columns: auto; padding: 2px; }
.al-chart--tools > .al-card__head .al-seg__opt { height: 30px; padding: 0 12px; font-size: 13px; }

/* --- Alerts: service notifications (what waits for an admin's action) — cards above the dashboard plate; phone — one card with rows --- */
.al-alerts { display: grid; grid-template-columns: repeat(var(--al-alerts-cols, 3), minmax(0, 1fr)) auto; gap: 12px; min-width: 0; }
.al-alert { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: box-shadow .15s, background .15s; }
.al-alert:hover { box-shadow: var(--shadow-raise); color: inherit; }
.al-alert:focus-visible, .al-alerts__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.al-alert .al-ic { width: 36px; height: 36px; }
.al-alert__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.al-alert__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.al-alert__t, .al-alert__s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-alert__t { font-size: 14.5px; font-weight: 600; color: var(--ink-0); }
.al-alert__s { font-size: 12.5px; color: var(--ink-3); }
.al-alert__v { flex: none; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-alert--hd { display: none; }
.al-alerts__more { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); color: var(--ink-1); text-decoration: none; transition: box-shadow .15s; }
.al-alerts__more:hover { box-shadow: var(--shadow-raise); color: var(--ink-0); }
.al-alerts__more b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-0); }
.al-alerts__more small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.al-alerts__more .al-icon { flex: none; color: var(--ink-4); }
.al-alerts__more--m { display: none; }
.al-alerts--list { display: flex; flex-direction: column; gap: 0; }
.al-alerts--list .al-alert { grid-template-columns: auto minmax(0, 1fr) auto; margin: 0 -8px; padding: 12px 8px; border-radius: 12px; background: none; box-shadow: none; }
.al-alert__chev { color: var(--ink-4); }
.al-alerts--list .al-alert + .al-alert { box-shadow: 0 -1px 0 var(--hairline); }
.al-alerts--list .al-alert:hover { background: var(--row-hover); }
@media (max-width: 767px) {
  .al-alerts:not(.al-alerts--list) { display: flex; flex-direction: column; gap: 0; padding: 0 14px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); }
  .al-alerts:not(.al-alerts--list) .al-alert { padding: 12px 0; border-radius: 0; background: none; box-shadow: none; }
  .al-alerts:not(.al-alerts--list) .al-alert + .al-alert { box-shadow: 0 -1px 0 var(--hairline); }
  .al-alert--hd { display: grid; }
  .al-alert--hm, .al-alerts__more--d { display: none; }
  .al-alerts__more--m { display: flex; justify-content: center; gap: 4px; height: 46px; padding: 0; border-radius: 0; background: none; box-shadow: 0 -1px 0 var(--hairline);
    color: var(--accent-strong); font-size: 14px; font-weight: 500; }
  .al-alerts__more--m:hover { box-shadow: 0 -1px 0 var(--hairline); color: var(--accent-deep); }
  .al-alerts__more--m .al-icon { color: currentColor; }
  .al-alert__t { font-size: 14px; }
  .al-alert__v { font-size: 15px; }
}
/* al-phone ↓ */ :where(.al-phone) .al-alerts:not(.al-alerts--list) { display: flex; flex-direction: column; gap: 0; padding: 0 14px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-card); } :where(.al-phone) .al-alerts:not(.al-alerts--list) .al-alert { padding: 12px 0; border-radius: 0; background: none; box-shadow: none; } :where(.al-phone) .al-alerts:not(.al-alerts--list) .al-alert + .al-alert { box-shadow: 0 -1px 0 var(--hairline); } :where(.al-phone) .al-alert--hd { display: grid; } :where(.al-phone) .al-alert--hm, :where(.al-phone) .al-alerts__more--d { display: none; } :where(.al-phone) .al-alerts__more--m { display: flex; justify-content: center; gap: 4px; height: 46px; padding: 0; border-radius: 0; background: none; box-shadow: 0 -1px 0 var(--hairline);
    color: var(--accent-strong); font-size: 14px; font-weight: 500; } :where(.al-phone) .al-alerts__more--m:hover { box-shadow: 0 -1px 0 var(--hairline); color: var(--accent-deep); } :where(.al-phone) .al-alerts__more--m .al-icon { color: currentColor; } :where(.al-phone) .al-alert__t { font-size: 14px; } :where(.al-phone) .al-alert__v { font-size: 15px; } /* al-phone ↑ */


/* --- PayMethodBadge link: a ready SBP payment link (qr.nspk.ru) instead of requisites --- */
.al-pm--link { background: #d9f2e2; color: #18773f; }
[data-theme="dark"] .al-pm--link { background: rgba(52, 176, 104, .24); color: #86dba8; }
/* --- FileField files: several files, then a compact zone «Добавить ещё файл» --- */
.al-ff__drop--more { padding-top: 10px; padding-bottom: 10px; }
.al-ff__drop--more .al-ff__icon { width: 36px; height: 36px; border-radius: 10px; }
.al-ff__drop--more .al-ff__body b { font-size: 14px; }
@media (max-width: 767px) { .al-ff__drop--more { flex-wrap: nowrap; } .al-ff__drop--more .al-ff__body { flex: 1 1 auto; } .al-ff__drop--more .al-btn { margin-left: 0; } }
/* al-phone ↓ */ :where(.al-phone) .al-ff__drop--more { flex-wrap: nowrap; } :where(.al-phone) .al-ff__drop--more .al-ff__body { flex: 1 1 auto; } :where(.al-phone) .al-ff__drop--more .al-btn { margin-left: 0; } /* al-phone ↑ */


/* --- Sheet over a MobilePanel: a confirm step (e.g. «Платёжка или чек» before «Подтвердить оплату») opens on top of the panel --- */
.al-sheet__scrim { z-index: 61; }
.al-sheet { z-index: 62; }

/* --- Steps: a form in steps (Drawer / MobilePanel). Done — check + what was chosen, a button back; current — accent; next — grey --- */
.al-steps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 16px; list-style: none; min-width: 0; box-shadow: 0 1px 0 var(--hairline); }
.al-steps__item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.al-steps__item:last-child { flex: 0 1 auto; }
.al-steps__item:not(:last-child)::after { content: ""; flex: 1 1 12px; min-width: 12px; height: 1.5px; border-radius: 1px; background: var(--line-strong); }
.al-steps__item[data-state="done"]:not(:last-child)::after { background: var(--accent-line); }
.al-steps__btn { display: flex; align-items: center; gap: 8px; min-width: 0; margin: -4px -6px -4px -4px; padding: 4px 6px 4px 4px; border: 0; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; }
button.al-steps__btn { cursor: pointer; transition: background var(--dur) var(--ease-out); }
button.al-steps__btn:hover { background: var(--row-hover); }
button.al-steps__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.al-steps__dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-state="current"] > .al-steps__btn .al-steps__dot { background: var(--accent-strong); box-shadow: none; color: var(--on-accent); }
[data-state="done"] > .al-steps__btn .al-steps__dot { background: var(--accent-soft-hi); box-shadow: none; color: var(--accent-deep); }
.al-steps__txt { display: flex; flex-direction: column; min-width: 0; }
.al-steps__txt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-steps__txt small { font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-state="done"] > .al-steps__btn b { color: var(--ink-1); }
[data-state="todo"] > .al-steps__btn b { font-weight: 500; color: var(--ink-3); }

/* Phone frame — a 390 phone inside a wide board (the «панели и шаги» states boards). Inside it the mobile rules of the DS
   work without @media: each @media (max-width) block is followed by its copy under :where(.al-phone) between «al-phone ↓ / ↑»
   (generated — change the rule in the @media block, then regenerate the copies); vw/vh turn into cqw/cqh of the frame.
   transform — the frame is the containing block of fixed parts (TabBar, MobilePanel, Sheet, the backdrop mark) */
.al-phone { position: relative; overflow: hidden; container-type: size; transform: translateZ(0); }
:where(.al-phone) .al-page { background-attachment: scroll; }

/* ===== v5: одна геометрия контролов ===== */
/* Поля, селекты, период, кнопки — border-box: поле 48px вместе с рамкой, как селект; кнопка block не вылезает за карточку */
.al-btn, .al-field__shell, .al-select, .al-drp__trigger, .al-flt__mbtn, .al-iconbtn { box-sizing: border-box; }
/* Фильтры: поиск, селекты и период — одна высота 48px, одна заливка fill без рамки, один фокус (рамка accent-strong + кольцо) */
.al-flt .al-field__shell, .al-flt .al-select, .al-flt .al-drp__trigger { height: 48px; min-height: 48px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--fill); box-shadow: none; }
.al-flt .al-select:hover, .al-flt .al-drp__trigger:hover { border-color: transparent; background: var(--fill-hover); }
.al-flt .al-field__shell:focus-within, .al-flt .al-select[data-open="true"], .al-flt .al-drp__trigger[aria-expanded="true"] { background: var(--card); border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.al-flt .al-select__value { font-size: 15px; }
.al-flt .al-select > .al-icon:not(.al-select__caret), .al-flt .al-drp__trigger .al-icon, .al-flt .al-field__lead { color: var(--ink-3); }
.al-flt .al-drp__trigger { width: auto; min-width: 180px; padding: 0 14px; gap: 10px; font-size: 15px; font-weight: 400; color: var(--ink-1); justify-content: flex-start; }
.al-flt .al-drp__trigger[data-filled="true"] { color: var(--accent-deep); font-weight: 500; }
.al-flt__row1 > .al-drp { flex: none; }
/* Заголовок плиты: длинное название обрезается, кнопка «+» остаётся в строке */
.al-pl__title { min-width: 0; }
.al-pl__title h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .al-pl__head { flex-wrap: nowrap; }
  .al-pl__title { flex: 1 1 auto; }
}
:where(.al-phone) .al-pl__head { flex-wrap: nowrap; }
:where(.al-phone) .al-pl__title { flex: 1 1 auto; }