/* Admin area (docs/design/admin). Built only on the tokens in brand.css: no new colours, type or radii. */

/* ---- Sign-in pages (no sidebar) ---- */
.azt-adm-auth { min-height: 100vh; display: flex; flex-direction: column; background: var(--azt-paper-bg); color: var(--azt-ink-700); font: var(--azt-text-body); }
/* The top bar uses the same "Deep Ink" look as the public site header (SiteHeader.razor.css); the colors are
   the shared --azt-site-header-* tokens in brand.css. Sign-in pages and the shell both use it. */
.azt-adm-topbar { flex: none; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px; background: var(--azt-site-header-bg); border-bottom: 1px solid var(--azt-site-header-border); }
.azt-adm-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.azt-adm-brand:focus-visible { outline: 2px solid var(--azt-site-header-accent); outline-offset: 4px; border-radius: var(--azt-radius-sm); }
.azt-adm-wordmark { font-size: 22px; letter-spacing: -.035em; line-height: 1; }
.azt-adm-wordmark b { font-weight: 700; color: #fff; }
.azt-adm-wordmark span { font-weight: 400; color: var(--azt-site-header-wordmark-time); }
.azt-adm-tag { padding: 4px 8px; border-radius: var(--azt-radius-sm); background: var(--azt-site-header-accent-soft); border: 1px solid var(--azt-site-header-border); color: var(--azt-site-header-accent); font: 500 10px/1.2 var(--azt-font-mono); letter-spacing: .08em; text-transform: uppercase; }
/* The language dropdown itself is the app's real shared <LanguagePicker /> (Components/Shared), the same
   component the customer/provider shells use. It's a flex sibling after .azt-adm-brand, so it only needs
   pushing to the far right here; only its button is recolored for the dark bar (its panel stays light).
   The selectors are longer than the picker's own scoped ones so they win whatever the stylesheet order. */
.azt-adm-topbar > :last-child { margin-left: auto; }
.azt-adm-topbar .azt-picker .azt-picker-btn { height: 42px; padding: 0 12px 0 8px; border-color: var(--azt-site-header-line); border-radius: 999px; background: transparent; color: var(--azt-site-header-fg); }
.azt-adm-topbar .azt-picker .azt-picker-btn:hover { background: var(--azt-site-header-hover); border-color: var(--azt-site-header-line); }
.azt-adm-topbar .azt-picker .azt-picker-btn:focus-visible { outline: 2px solid var(--azt-site-header-accent); outline-offset: 2px; }
.azt-adm-topbar .azt-picker .azt-picker-btn .azt-mono-chip { background: var(--azt-site-header-accent-soft); color: var(--azt-site-header-accent); }
/* The chevron carries an inline color, so only !important can override it. */
.azt-adm-topbar .azt-picker .azt-picker-btn svg { color: var(--azt-site-header-fg-muted) !important; }
.azt-adm-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.azt-adm-card { width: 100%; max-width: 520px; padding: 32px; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); }
.azt-adm-card.is-wide { max-width: 640px; }
.azt-adm-eyebrow { margin-bottom: 12px; font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-adm-h1 { margin: 0; font: var(--azt-text-h1); letter-spacing: -.02em; }
.azt-adm-sub { margin: 6px 0 0; font: 400 15px/1.45 var(--azt-font-display); color: var(--azt-ink-420); }
.azt-adm-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.azt-adm-field { display: flex; flex-direction: column; gap: 6px; }
.azt-adm-label { font: var(--azt-text-label); color: var(--azt-ink-500); }
.azt-adm-input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); color: var(--azt-ink-700); font: var(--azt-text-body); }
.azt-adm-input::placeholder { color: var(--azt-ink-150); }
.azt-adm-input:focus { outline: none; border-color: var(--azt-slot-500); }
.azt-adm-input:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }
.azt-adm-input.is-invalid, .azt-adm-auth .is-invalid .azt-pwinput input { border-color: var(--azt-danger-border); background: var(--azt-danger-bg); }
.azt-adm-input.is-mono { font-family: var(--azt-font-mono); letter-spacing: .06em; }
.azt-adm-otp { text-align: center; font: 500 28px/1 var(--azt-font-mono); letter-spacing: .5em; padding-left: calc(14px + .5em); }
.azt-adm-error { font: var(--azt-text-caption); color: var(--azt-danger-text); }
.azt-adm-hint { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-adm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.azt-adm-infobtn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--azt-border-soft); background: transparent; color: var(--azt-slot-text); font: 700 15px/1 var(--azt-font-display); font-style: italic; cursor: pointer; }
.azt-adm-infobtn:hover, .azt-adm-infobtn[aria-expanded="true"] { border-color: var(--azt-slot-500); background: var(--azt-success-bg); }
.azt-adm-actions.is-row { flex-direction: row; justify-content: flex-end; margin-top: 0; }
.azt-adm-link { align-self: center; border: 0; background: none; padding: 8px; color: var(--azt-slot-text); font: 600 13.5px/1.2 var(--azt-font-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.azt-adm-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--azt-radius-lg); border: 1px solid; font: 400 13px/1.45 var(--azt-font-display); }
.azt-adm-banner.is-info { background: var(--azt-info-bg); border-color: oklch(0.85 0.04 230); color: var(--azt-info-text); }
.azt-adm-banner.is-warn { background: var(--azt-warning-bg); border-color: oklch(0.86 0.07 85); color: var(--azt-warning-text); }
.azt-adm-banner.is-ok { background: var(--azt-success-bg); border-color: var(--azt-slot-500); color: var(--azt-success-text); }
.azt-adm-banner.is-bad { background: var(--azt-danger-bg); border-color: var(--azt-danger-border); color: var(--azt-danger-text); }
.azt-adm-qr { display: flex; justify-content: center; padding: 16px; border-radius: var(--azt-radius-lg); background: #fff; border: 1px solid var(--azt-border-soft); }
.azt-adm-qr svg { width: 200px; height: 200px; }
.azt-adm-secret { padding: 10px 14px; border-radius: var(--azt-radius-md); background: var(--azt-surface-tint); font: 500 14px/1.4 var(--azt-font-mono); letter-spacing: .06em; word-break: break-all; user-select: all; }
.azt-adm-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; padding: 20px 24px; border: 1px dashed var(--azt-border-strong); border-radius: var(--azt-radius-lg); background: var(--azt-surface-tint); font: 500 16px/1.2 var(--azt-font-mono); letter-spacing: .04em; }
.azt-adm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.azt-adm-check { display: flex; align-items: flex-start; gap: 10px; font: var(--azt-text-body-sm); }
.azt-adm-check input { margin-top: 3px; accent-color: var(--azt-slot-500); width: 18px; height: 18px; }

/* ---- Shell (header, sidebar, body) ---- */
.azt-adm-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--azt-paper-bg); color: var(--azt-ink-700); font: var(--azt-text-body); }
.azt-adm-shell-cols { flex: 1; display: flex; min-height: 0; }
.azt-adm-side { width: 240px; flex: none; display: flex; flex-direction: column; padding: 16px 12px; background: var(--azt-near-white); border-right: 1px solid var(--azt-border-soft); }
.azt-adm-navgroup { padding: 16px 10px 6px; font: var(--azt-text-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--azt-ink-250); }
button.azt-adm-navgroup { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
button.azt-adm-navgroup:hover { color: var(--azt-ink-500); }
.azt-adm-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.azt-adm-chev.is-open { transform: rotate(90deg); }
.azt-adm-navitems { display: contents; }
@media (min-width: 901px) { .azt-adm-navitems.is-collapsed { display: none; } }
.azt-adm-nav { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--azt-radius-sm); color: var(--azt-ink-500); font: var(--azt-text-body-sm); text-decoration: none; }
.azt-adm-nav:hover { background: var(--azt-surface-tint); }
.azt-adm-nav.is-active { background: var(--azt-slot-tint); color: var(--azt-slot-text); font-weight: 600; }
.azt-adm-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.azt-adm-who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 4px 0; border-top: 1px solid var(--azt-border-hairline); }
.azt-adm-who-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.azt-adm-who-name { font: 600 13px/1.3 var(--azt-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azt-adm-who-role { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-adm-signout { margin-left: auto; border: 0; background: none; padding: 6px; color: var(--azt-ink-300); font: var(--azt-text-caption); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.azt-adm-body { flex: 1; min-width: 0; padding: 28px 32px 48px; }
.azt-adm-page { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 20px; }
.azt-adm-panel { padding: 24px; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); }
.azt-adm-panel h2 { margin: 0 0 4px; font: var(--azt-text-h3); }
.azt-adm-panel p { margin: 0; color: var(--azt-ink-420); }
.azt-adm-dl { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 16px 0 0; font: var(--azt-text-body-sm); }
.azt-adm-dl dt { font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); padding-top: 3px; }
.azt-adm-dl dd { margin: 0; }
.azt-adm-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; }
.azt-adm-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.azt-adm-badge.is-ok { background: var(--azt-success-bg); color: var(--azt-success-text); }
.azt-adm-badge.is-warn { background: var(--azt-warning-bg); color: var(--azt-warning-text); }
.azt-adm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* ---- Team page ----
   The Team page is deliberately built only from the app's real shared components — Card, Button,
   TabButton (underline tabs), StatusBadge, Checkbox (Compact), Avatar — the same ones every other
   page uses, per docs/design/COMPONENTS.md. What's below is only the page-specific layout glue
   around them (the header row, the RowList-style dividers, the one new pill this page needs: a
   role "Chip", spec'd exactly per COMPONENTS.md "Status badges / Chips"). */
.azt-adm-pagehead { display: flex; align-items: flex-start; gap: 16px; }
.grow { flex: 1; min-width: 0; }
.azt-adm-tabs { display: flex; gap: 28px; margin-top: 20px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-adm-loading { margin: 0; color: var(--azt-ink-420); }
.azt-adm-footnote { margin: 16px 0 0; }

/* RowList (docs/design/COMPONENTS.md "Tables" — RowList variant): the head and every row share ONE grid
   (.azt-adm-list) so columns line up exactly regardless of how tall any single row's content is. A head
   and each row laid out as separate grids (this rule's original form) drift apart the moment a cell's
   content forces a different column width in only one of them — e.g. a row with no action buttons next
   to one with two, or roles wrapping onto a second line. display:contents removes the head/row wrapper
   from layout entirely, so its own children become direct items of the outer grid. */
.azt-adm-list { display: grid; grid-template-columns: 2.2fr 1.8fr 1fr 1.2fr auto; column-gap: 0; align-content: start; max-height: 65vh; overflow-y: auto; }
.azt-adm-listhead { display: contents; }
.azt-adm-listhead > span { position: sticky; top: 0; z-index: 1; background: var(--azt-surface, #fff); padding: 0 8px 10px; white-space: nowrap; font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-adm-listrow { display: contents; }
.azt-adm-listrow > * { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 14px 8px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-adm-listrow > .azt-adm-row, .azt-adm-listrow > .azt-adm-who2 { flex-direction: row; align-items: center; justify-content: flex-start; }
/* Capabilities: Edit, the pricing-page switch and Retire each keep one column, so they line up on every row (empty cells hold the place). */
.azt-adm-listrow > .azt-adm-row.azt-cap-actions { display: grid; grid-template-columns: 104px 200px 112px; column-gap: 12px; align-items: center; justify-items: start; white-space: nowrap; }
.azt-adm-list.is-4col { grid-template-columns: 2fr 1.2fr 1.2fr auto; }
.azt-adm-listhead > span:first-child, .azt-adm-listrow > :first-child { padding-left: 0; }
.azt-adm-listhead > span:last-child, .azt-adm-listrow > :last-child { padding-right: 0; }
.azt-adm-listrow:last-of-type > * { border-bottom: 0; }
.azt-adm-listrow.is-muted > :not(.azt-adm-row) { opacity: .55; }
.azt-adm-listrow.is-muted .azt-adm-row button:not(:disabled) { border-color: var(--azt-slot-500); color: var(--azt-slot-text); }
/* Drag-to-reorder: the grip is the only draggable part of a row (the row itself is display:contents, so it
   has no box to drag); dragover/drop are caught on the row through event bubbling from its cells. */
.azt-adm-grip { flex: none; width: 12px; height: 18px; margin-right: 10px; cursor: grab; opacity: .5; background: radial-gradient(circle, currentColor 1.3px, transparent 1.6px) 0 0 / 6px 6px; color: var(--azt-ink-420); }
.azt-adm-grip:hover { opacity: 1; }
.azt-adm-grip:active { cursor: grabbing; }
.azt-adm-listrow.is-dragging > * { opacity: .4; }
.azt-adm-listrow.is-dragover > * { background: var(--azt-slot-tint-2); }
.azt-adm-listrow.is-dragover.is-drop-before > * { box-shadow: inset 0 2px 0 var(--azt-slot-500); }
.azt-adm-listrow.is-dragover.is-drop-after > * { box-shadow: inset 0 -2px 0 var(--azt-slot-500); }
.azt-adm-who2 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.azt-adm-rolechips { display: flex; flex-wrap: wrap; gap: 4px; }

.azt-adm-rolerow { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-adm-rolerow:last-child { border-bottom: 0; }

/* Chip (docs/design/COMPONENTS.md): a filter/tag, not a status — shown here always in its
   "selected" look, since a role chip denotes an active assignment, not a toggle the viewer picks. */
.azt-adm-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--azt-radius-full); background: var(--azt-slot-tint); border: 1px solid var(--azt-slot-500); color: var(--azt-slot-text); font: 500 12px/1.3 var(--azt-font-display); }

.azt-adm-permgroup { margin-top: 12px; padding: 12px 14px; border-radius: var(--azt-radius-lg); background: var(--azt-surface-tint); display: flex; flex-direction: column; gap: 10px; }

/* Action log (ADMIN-7): a filter bar above the same RowList pattern, with a per-row detail panel below it. */
.azt-adm-logfilters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.azt-adm-logfilters .azt-adm-field { min-width: 160px; }
.azt-adm-bookings-list { grid-template-columns: 1.5fr 1.4fr 1.4fr 1.4fr 1fr auto; }
.azt-bk-provider { position: relative; }
.azt-bk-provider-chip { display: inline-flex; align-items: center; gap: 8px; }
.azt-bk-chip-clear { border: 0; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: inherit; }
.azt-bk-matches { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--azt-paper-bg, #fff); border: 1px solid var(--azt-border-hairline); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); }
.azt-bk-matches button { width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; cursor: pointer; border-radius: 6px; font: inherit; }
.azt-bk-matches button:hover, .azt-bk-matches button:focus-visible { background: var(--azt-border-hairline); }
.azt-bk-reason { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.azt-bk-cancel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--azt-border-hairline); display: flex; flex-direction: column; gap: 12px; }
.azt-bk-history { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.azt-bk-error { align-items: center; }
.azt-bk-errtext { flex: 1; min-width: 0; }
.azt-bk-errtext b { font-weight: 600; }
/* Loading placeholder rows: same pulse as the accounts list (azt-acc-pulse), laid out in the bookings grid. */
.azt-bk-sk { display: block; max-width: 100%; height: 12px; border-radius: 6px; background: var(--azt-border-soft); animation: azt-acc-pulse 1.4s ease-in-out infinite; }
.azt-bk-sk.is-pill { height: 22px; border-radius: 999px; }
.azt-bk-skel { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .azt-bk-sk { animation: none; } }
@media (max-width: 760px) { .azt-adm-bookings-list { grid-template-columns: 1fr; } .azt-adm-bookings-list .azt-adm-listhead { display: none; } }
.azt-adm-page.azt-bk { max-width: none; }
.azt-adm-page.azt-bk .azt-adm-bookings-list { grid-template-columns: minmax(150px,1.2fr) minmax(120px,1.2fr) minmax(120px,1.4fr) minmax(120px,1.4fr) minmax(100px,auto) auto; }
@media (max-width: 760px) { .azt-adm-page.azt-bk .azt-adm-bookings-list { grid-template-columns: 1fr; } }
.azt-adm-h2-inline { margin: 0 0 12px; font: var(--azt-text-h3); }
.azt-adm-note { padding: 10px 0; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-adm-note:last-of-type { border-bottom: 0; }
.azt-adm-modal-title { margin: 0; font: var(--azt-text-h2); }
.azt-adm-modal-body { padding: 24px 24px 8px; display: flex; flex-direction: column; gap: 16px; max-height: 60vh; overflow-y: auto; }
.azt-adm-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--azt-border-hairline); }

/* ---- Email template rich-text editor (ADM-003 Feature 1) ---- */
.azt-rte { position: relative; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); }
.azt-rte:focus-within { border-color: var(--azt-slot-500); box-shadow: 0 0 0 3px var(--azt-slot-tint); }
.azt-rte-toolbar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-rte-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--azt-radius-sm); background: none; color: var(--azt-ink-700); font: 15px/1 var(--azt-font-display); cursor: pointer; }
.azt-rte-btn:hover:not([disabled]) { background: var(--azt-surface-tint); }
.azt-rte-btn:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-rte-btn[disabled] { opacity: .4; cursor: not-allowed; }
.azt-rte-btn.azt-rte-fields { margin-left: 4px; background: var(--azt-slot-tint); color: var(--azt-slot-text); font: 600 13px/1 var(--azt-font-display); }
.azt-rte-btn.azt-rte-fields:hover:not([disabled]) { background: var(--azt-slot-tint); filter: brightness(.97); }
.azt-rte-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--azt-border); }
.azt-rte-backdrop { position: fixed; inset: 0; z-index: 19; }
.azt-rte-menu { position: absolute; top: 44px; left: 4px; z-index: 20; width: min(340px, calc(100vw - 48px)); max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); box-shadow: 0 12px 32px oklch(0.2 0.03 215 / .18); }
.azt-rte-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--azt-radius-sm); background: none; text-align: left; cursor: pointer; }
.azt-rte-menu button:hover, .azt-rte-menu button:focus-visible { background: var(--azt-slot-tint); outline: none; }
.azt-rte-menu b { font: 500 12.5px var(--azt-font-mono); }
.azt-rte-menu span { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-rte-body { min-height: 230px; padding: 14px; outline: none; font: 15px/1.6 var(--azt-font-display); color: var(--azt-ink-700); overflow-wrap: anywhere; }
.azt-rte.is-readonly { background: var(--azt-surface-tint); }
.azt-rte.is-readonly .azt-rte-body { color: var(--azt-ink-500); cursor: default; }
.azt-tok { display: inline-block; margin: 0 1px; padding: 0 7px; border: 1px solid oklch(0.85 0.05 178); border-radius: 6px; background: var(--azt-slot-tint); color: var(--azt-slot-text); font: 500 12.5px/1.5 var(--azt-font-mono); user-select: all; }
.azt-tok.is-unknown { border-color: var(--azt-danger-border); background: var(--azt-danger-bg); color: var(--azt-danger-text); }

/* ---- Email template version history (ADM-003 Feature 1) — reuses the log's expand-row pattern ---- */
.azt-adm-versionpreview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.azt-adm-versionpreview > div { padding: 12px; border: 1px solid var(--azt-border-hairline); border-radius: var(--azt-radius-lg); background: var(--azt-paper-bg); }

@media (max-width: 700px) {
  .azt-adm-listhead { display: none; }
  .azt-adm-list { display: block; }
  .azt-adm-listrow { display: block; padding: 10px 0; border-bottom: 1px solid var(--azt-border-hairline); }
  .azt-adm-listrow:last-of-type { border-bottom: 0; }
  .azt-adm-listrow > * { border-bottom: 0; padding: 2px 0; }
}

@media (max-width: 900px) {
  .azt-adm-shell-cols { flex-direction: column; }
  .azt-adm-side { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--azt-border-soft); }
  .azt-adm-navgroup, button.azt-adm-navgroup { display: none; }
  .azt-adm-who { margin-top: 0; border-top: 0; padding: 0; margin-left: auto; }
  .azt-adm-body { padding: 20px 16px 40px; }
  .azt-adm-dl { grid-template-columns: 1fr; }
  .azt-adm-codes { grid-template-columns: 1fr; }
}

/* Fit-to-screen shell (desktop): the header and sidebar stay in view and only the content area scrolls,
   so the sign-out control at the bottom of the sidebar is always reachable. A page marked .is-fill (the
   action log) also stretches to the window's height; its list takes the space left and scrolls inside. */
@media (min-width: 901px) {
  html:has(.azt-adm-shell), body:has(.azt-adm-shell) { overflow: hidden; height: 100%; }
  .azt-adm-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .azt-adm-side { overflow-y: auto; }
  .azt-adm-body { overflow-y: scroll; scrollbar-gutter: stable; display: flex; flex-direction: column; min-height: 0; padding-bottom: 24px; }
  .azt-adm-page.is-fill { flex: 1 1 auto; min-height: 0; width: 100%; }
  .azt-adm-page.is-fill > .azt-adm-fillcard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .azt-adm-fillcard > .azt-adm-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .azt-adm-fillcard > .azt-adm-logfilters, .azt-adm-fillcard > .azt-adm-actions { flex: none; }
}

/* ---- Action log (redesign): filter panel, results list, details drawer ----
   Built on the brand tokens. The only colour the tokens do not have is the violet of "something was edited"
   (the same hue the header gradient already ends in). The list uses one grid per row (not display:contents)
   because the drawer changes the column set. */
.azt-adm-page.azt-log { max-width: none; flex-direction: row; gap: 0; align-items: stretch; }
.azt-log-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }

.azt-log-panel { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 16px 20px; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); }
.azt-log-field { display: flex; flex-direction: column; gap: 6px; }
.azt-log-field.is-admin { width: 190px; }
.azt-log-field.is-action { width: 230px; }
.azt-log-field.is-target { width: 170px; }
.azt-log-label { font: 500 12px/1.3 var(--azt-font-display); color: var(--azt-ink-420); }
.azt-log-panel .azt-adm-input { min-height: 40px; padding: 8px 10px; border-radius: var(--azt-radius-md); }
.azt-log-seg { display: inline-flex; height: 40px; box-sizing: border-box; padding: 3px; gap: 2px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-md); background: var(--azt-surface-tint); }
.azt-log-seg button { border: 0; padding: 0 12px; border-radius: var(--azt-radius-sm); background: transparent; color: var(--azt-ink-500); font: 400 13px/1 var(--azt-font-display); cursor: pointer; }
.azt-log-seg button.is-on { background: var(--azt-near-white); color: var(--azt-ink-700); font-weight: 600; box-shadow: var(--azt-shadow-sm); }
.azt-log-seg button:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-log-panel-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.azt-log-panel-actions .azt-btn-medium { min-height: 40px; padding-top: 0; padding-bottom: 0; }
.azt-log-sheethead, .azt-log-mobilebar, .azt-log-backdrop { display: none; }

.azt-log-summary { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-lg); }
.azt-log-summary-text { min-width: 0; color: var(--azt-ink-420); font: var(--azt-text-body-sm); }
.azt-log-summary .azt-log-summary-edit { margin-left: auto; flex: none; }

.azt-log-meta { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; }
.azt-log-periodchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 11px; border-radius: var(--azt-radius-full); background: var(--azt-info-bg); color: var(--azt-info-text); font: 400 13px/1 var(--azt-font-display); }
.azt-log-periodchip button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.azt-log-periodchip button:hover { background: var(--azt-near-white); }
.azt-log-tz { color: var(--azt-ink-420); font: var(--azt-text-caption); }

.azt-log-results { --cols: 110px 1.25fr 1.25fr 1.6fr 92px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); overflow: hidden; }
.azt-log-head, .azt-log-row { display: grid; grid-template-columns: var(--cols); column-gap: 12px; align-items: center; padding: 0 20px; }
.azt-log-head { flex: none; height: 40px; background: var(--azt-surface-tint); border-bottom: 1px solid var(--azt-border-soft); font: var(--azt-text-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-log-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.azt-log-results.is-loading .azt-log-scroll { opacity: .55; pointer-events: none; }
.azt-log-row { position: relative; min-height: 60px; box-sizing: border-box; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-log-row:hover { background: var(--azt-surface-tint-2); }
.azt-log-row.is-selected { background: var(--azt-slot-tint-2); }
.azt-log-row:has(.azt-log-openbtn:focus-visible) { outline: 2px solid var(--azt-slot-500); outline-offset: -2px; }
.azt-log-when { display: flex; flex-direction: column; }
.azt-log-when b { font: 600 14px/1.4 var(--azt-font-display); }
.azt-log-time { font: 400 12px/1.4 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-log-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.azt-log-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--azt-info-bg); color: var(--azt-info-text); font: 600 12px/1 var(--azt-font-display); }
.azt-log-who-text { display: flex; flex-direction: column; min-width: 0; }
.azt-log-who-text b { font: 600 14px/1.4 var(--azt-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azt-log-who-text span { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-log-target { display: flex; align-items: center; gap: 8px; min-width: 0; }
.azt-log-tlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azt-log-ttype { flex: none; font: 500 11px/1 var(--azt-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-log-open { display: flex; justify-content: flex-end; }
.azt-log-openbtn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--azt-radius-sm); background: transparent; color: var(--azt-link); font: 600 13px/1 var(--azt-font-display); cursor: pointer; }
.azt-log-openbtn:hover { background: var(--azt-surface-tint); color: var(--azt-link-hover); }
.azt-log-foot { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 8px 20px; border-top: 1px solid var(--azt-border-soft); background: var(--azt-near-white); }
.azt-log-showing { color: var(--azt-ink-420); font: var(--azt-text-body-sm); }
.azt-log-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.azt-log-pageof { font: 500 13px/1 var(--azt-font-mono); color: var(--azt-ink-500); }

/* Action badge: larger than the shared StatusBadge on purpose (the action is the row's main fact). */
.azt-log-badge { --bg: var(--azt-border-soft); --fg: var(--azt-ink-500); --dot: var(--azt-ink-250); display: inline-flex; align-items: center; gap: 7px; height: 26px; box-sizing: border-box; padding: 0 11px 0 9px; border-radius: var(--azt-radius-full); background: var(--bg); color: var(--fg); font: 500 13px/1 var(--azt-font-display); white-space: nowrap; }
.azt-log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.azt-log-badge.is-success { --bg: var(--azt-success-bg); --fg: var(--azt-success-text); --dot: var(--azt-slot-500); }
.azt-log-badge.is-info { --bg: var(--azt-info-bg); --fg: var(--azt-info-text); --dot: var(--azt-info); }
.azt-log-badge.is-warning { --bg: var(--azt-warning-bg); --fg: var(--azt-warning-text); --dot: var(--azt-warning); }
.azt-log-badge.is-danger { --bg: var(--azt-danger-bg); --fg: var(--azt-danger-text); --dot: var(--azt-danger); }
.azt-log-badge.is-violet { --bg: oklch(0.95 0.03 288); --fg: oklch(0.4 0.11 288); --dot: oklch(0.6 0.15 288); }

.azt-log-empty { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 16px; text-align: center; background: var(--azt-near-white); border: 1px dashed var(--azt-border-strong); border-radius: var(--azt-radius-xl); }
.azt-log-empty h2 { margin: 0; font: var(--azt-text-h2); }
.azt-log-empty p { margin: 0; max-width: 420px; color: var(--azt-ink-420); }
.azt-log-empty-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--azt-slot-tint); color: var(--azt-slot-text); }
.azt-log-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.azt-log-quick { height: 40px; padding: 0 16px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-full); background: var(--azt-near-white); color: var(--azt-ink-700); font: 500 14px/1 var(--azt-font-display); cursor: pointer; }
.azt-log-quick:hover { border-color: var(--azt-slot-500); }
.azt-log-quick:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }

/* Details drawer */
.azt-log-drawer { flex: none; width: 460px; display: flex; flex-direction: column; min-height: 0; background: var(--azt-near-white); border-left: 1px solid var(--azt-border-soft); }
.azt-log-drawer-head { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; box-sizing: border-box; padding: 0 16px 0 24px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-log-eyebrow { font: 500 11px/1 var(--azt-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-log-drawer-nav { margin-left: auto; display: inline-flex; gap: 6px; }
.azt-log-iconbtn { width: 36px; height: 36px; padding: 0; border: 1px solid var(--azt-border-soft); border-radius: 10px; background: var(--azt-near-white); color: var(--azt-ink-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.azt-log-iconbtn:hover:not(:disabled) { border-color: var(--azt-slot-500); }
.azt-log-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.azt-log-iconbtn:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }
.azt-log-iconbtn .is-up { transform: rotate(-90deg); }
.azt-log-iconbtn .is-down { transform: rotate(90deg); }
.azt-log-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.azt-log-drawer-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.azt-log-drawer-title h2 { margin: 0; font: 600 26px/1.2 var(--azt-font-display); }
.azt-log-dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 12px; font: var(--azt-text-body); }
.azt-log-dl dt { color: var(--azt-ink-420); }
.azt-log-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.azt-log-utc { display: block; font: 400 12px/1.6 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-log-muted { color: var(--azt-ink-420); }
.azt-log-changes { display: flex; flex-direction: column; gap: 10px; }
.azt-log-changes h3 { margin: 0; }
.azt-log-changes p { margin: 0; }
.azt-log-difftable { border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-md); overflow: hidden; font-size: 13px; }
.azt-log-diffrow { display: grid; grid-template-columns: 110px 1fr 1fr; align-items: stretch; border-top: 1px solid var(--azt-border-hairline); }
.azt-log-diffrow > span { padding: 10px 12px; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.azt-log-diffrow.is-head { min-height: 34px; align-items: center; border-top: 0; background: var(--azt-surface-tint); color: var(--azt-ink-420); font-weight: 500; }
.azt-log-diffrow.is-head > span { padding: 0 12px; }
.azt-log-field-name { font: 500 12px/1.5 var(--azt-font-mono); }
.azt-log-before { color: var(--azt-ink-420); }
.azt-log-before.is-removed { background: var(--azt-danger-bg); color: var(--azt-danger-text); }
.azt-log-after.is-added { background: var(--azt-success-bg); color: var(--azt-success-text); }
.azt-log-rawtoggle { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--azt-slot-text); font: 600 13px/1.2 var(--azt-font-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.azt-log-raw { margin: 0; padding: 12px; max-height: 260px; overflow: auto; border-radius: var(--azt-radius-md); background: var(--azt-surface-tint); font: 400 12px/1.6 var(--azt-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.azt-log-locked { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--azt-border-hairline); background: var(--azt-paper-bg); color: var(--azt-ink-420); font: var(--azt-text-body-sm); }

/* With the drawer open the list shows only When / Who / Action, and the whole row opens its entry
   (the real Open button is stretched over the row, so keyboard and screen-reader users still reach it). */
.azt-log.has-drawer .azt-log-results { --cols: 96px 1.2fr 1.3fr; }
.azt-log.has-drawer .azt-log-col-target, .azt-log.has-drawer .azt-log-col-open, .azt-log.has-drawer .azt-log-target { display: none; }
.azt-log.has-drawer .azt-log-open { position: absolute; inset: 0; }
.azt-log.has-drawer .azt-log-openbtn { width: 100%; height: 100%; padding: 0; opacity: 0; border-radius: 0; }
.azt-log.has-drawer .azt-log-openbtn:hover { background: transparent; }

@media (min-width: 1181px) {
  /* The drawer runs the full height of the content area, edge to edge. */
  .azt-adm-page.azt-log.has-drawer { margin: -28px -32px -24px 0; width: auto; }
  .azt-log.has-drawer .azt-log-main { padding: 28px 24px 24px 0; }
}

@media (max-width: 1180px) {
  /* Too narrow for a list and a drawer side by side: the drawer slides over the page instead. */
  .azt-log-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(460px, 100%); box-shadow: var(--azt-shadow-xl); }
  .azt-log.has-drawer .azt-log-results { --cols: 110px 1.25fr 1.25fr 1.6fr 92px; }
  .azt-log.has-drawer .azt-log-col-target, .azt-log.has-drawer .azt-log-col-open { display: block; }
  .azt-log.has-drawer .azt-log-target { display: flex; }
  .azt-log.has-drawer .azt-log-open { position: static; }
  .azt-log.has-drawer .azt-log-openbtn { width: auto; height: 32px; padding: 0 10px; opacity: 1; border-radius: var(--azt-radius-sm); }
}

@media (max-width: 900px) {
  .azt-log-drawer { width: 100%; }
  .azt-log-drawer-head { height: 64px; padding: 0 12px 0 16px; }
  .azt-log-drawer-body { padding: 20px 16px; }
  .azt-log-locked { padding: 12px 16px; }
  .azt-log-diffrow { grid-template-columns: 92px 1fr 1fr; }

  /* Filters: hidden behind a button and shown as a sheet from the bottom. */
  .azt-log-mobilebar { flex: none; display: flex; gap: 8px; }
  .azt-log-filterbtn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-md); background: var(--azt-near-white); color: var(--azt-ink-700); font: 600 15px/1 var(--azt-font-display); cursor: pointer; }
  .azt-log-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--azt-radius-full); background: var(--azt-ink-700); color: var(--azt-near-white); font: 500 12px/20px var(--azt-font-display); text-align: center; }
  .azt-log-mobilebar .azt-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .azt-log-panel { display: none; }
  .azt-log.is-sheet-open .azt-log-panel { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 88dvh; overflow-y: auto; padding: 20px 16px 24px; border-radius: var(--azt-radius-2xl) var(--azt-radius-2xl) 0 0; border-width: 1px 0 0; box-shadow: var(--azt-shadow-xl); }
  .azt-log.is-sheet-open .azt-log-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: oklch(0.19 0.03 220 / 0.4); }
  .azt-log-sheethead { display: flex; align-items: center; justify-content: space-between; font: var(--azt-text-h3); }
  .azt-log-field.is-admin, .azt-log-field.is-action, .azt-log-field.is-target { width: auto; }
  .azt-log-seg { display: flex; }
  .azt-log-seg button { flex: 1; min-height: 34px; }
  .azt-log-panel .azt-adm-input { min-height: 44px; }
  .azt-log-panel-actions { margin-left: 0; justify-content: space-between; }

  /* Results: a card per entry. */
  .azt-log-results { flex: none; border: 0; background: transparent; overflow: visible; }
  .azt-log-head { display: none; }
  .azt-log-scroll { display: flex; flex-direction: column; gap: 10px; overflow: visible; }
  .azt-log-row, .azt-log.has-drawer .azt-log-row { grid-template-columns: 1fr auto; grid-template-areas: "act when" "who who" "target target"; row-gap: 8px; padding: 14px 16px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); }
  .azt-log-act { grid-area: act; }
  .azt-log-when { grid-area: when; flex-direction: row; align-items: center; gap: 6px; }
  .azt-log-when b { font: 400 12px/1.4 var(--azt-font-mono); color: var(--azt-ink-420); }
  .azt-log-who { grid-area: who; }
  .azt-log-avatar { width: 28px; height: 28px; font-size: 11px; }
  .azt-log-who-text { flex-direction: row; align-items: baseline; gap: 8px; }
  .azt-log-target, .azt-log.has-drawer .azt-log-target { grid-area: target; display: flex; }
  .azt-log-open, .azt-log.has-drawer .azt-log-open { position: absolute; inset: 0; }
  .azt-log-openbtn, .azt-log.has-drawer .azt-log-openbtn { width: 100%; height: 100%; padding: 0; opacity: 0; border-radius: var(--azt-radius-lg); }
  .azt-log-foot { margin-top: 4px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-lg); flex-wrap: wrap; }
  .azt-log-summary { flex-wrap: wrap; }
  .azt-log-empty { padding: 40px 16px; }
}

/* ---- Plans (docs/design/admin/subscription-plans.html) ----
   An ordered list of plans with their key limits visible, a Compare matrix, and add/edit in a right-hand drawer
   (Components/Shared/Drawer). Built only on the brand tokens. Numbers and prices use the mono face. */
.azt-adm-page.azt-plans { max-width: none; }
.azt-plans-note { margin: 0; flex: 1; min-width: 0; }
.azt-plans-dismiss { flex: none; border: 0; background: none; padding: 0 4px; color: inherit; font-size: 18px; line-height: 1; opacity: .7; cursor: pointer; }
.azt-plans-dismiss:hover { opacity: 1; }
.azt-plans-dismiss:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }

.azt-plans-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.azt-plans-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-md); background: var(--azt-surface-tint); }
.azt-plans-seg button { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 7px 14px; border-radius: var(--azt-radius-sm); background: transparent; color: var(--azt-ink-500); font: 600 13px/1.2 var(--azt-font-display); cursor: pointer; }
.azt-plans-seg button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.azt-plans-seg button[aria-pressed="true"] { background: var(--azt-near-white); color: var(--azt-ink-700); box-shadow: var(--azt-shadow-sm); }
.azt-plans-seg button:focus-visible, .azt-plans-chip:focus-visible, .azt-plans-grip:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }
.azt-plans-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.azt-plans-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-full); background: var(--azt-near-white); color: var(--azt-ink-500); font: 400 13px/1.3 var(--azt-font-display); cursor: pointer; }
.azt-plans-chip i { font: 500 11px/1 var(--azt-font-mono); font-style: normal; color: var(--azt-ink-420); }
.azt-plans-chip[aria-pressed="true"] { border-color: var(--azt-ink-700); background: var(--azt-ink-700); color: var(--azt-near-white); }
.azt-plans-chip[aria-pressed="true"] i { color: inherit; opacity: .75; }
.azt-plans-diff { margin-left: auto; }

.azt-plans .azt-card.azt-plans-card { padding: 0; overflow: hidden; }
.azt-plans-head, .azt-plans-row { display: grid; grid-template-columns: 28px minmax(0, 1.6fr) 160px 90px 230px; gap: 0 16px; align-items: center; padding: 18px 20px; }
.azt-plans-head { padding-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--azt-border-hairline); font: var(--azt-text-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-plans-row { position: relative; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-plans-row:last-child { border-bottom: 0; }
.azt-plans-row.is-stopped .azt-plans-id, .azt-plans-row.is-stopped .azt-plans-price, .azt-plans-row.is-stopped .azt-plans-hl { opacity: .6; }
.azt-plans-row.is-dragging { opacity: .4; }
.azt-plans-row.is-dragover.is-drop-before { box-shadow: inset 0 3px 0 var(--azt-slot-500); }
.azt-plans-row.is-dragover.is-drop-after { box-shadow: inset 0 -3px 0 var(--azt-slot-500); }
.azt-plans-grip { width: 28px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--azt-radius-sm); background: transparent; color: var(--azt-ink-250); cursor: grab; }
.azt-plans-grip:hover:not(:disabled) { background: var(--azt-surface-tint); color: var(--azt-ink-700); }
.azt-plans-grip:active:not(:disabled) { cursor: grabbing; }
.azt-plans-grip:disabled { cursor: not-allowed; opacity: .35; }
.azt-plans-grip svg { width: 14px; height: 18px; fill: currentColor; }
.azt-plans-id { min-width: 0; }
.azt-plans-code { display: flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--azt-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-plans-ver { padding: 2px 6px; border-radius: 5px; background: var(--azt-surface-tint); color: var(--azt-ink-500); letter-spacing: 0; text-transform: none; }
.azt-plans-name { margin: 4px 0 2px; font: var(--azt-text-h3); font-size: 18px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.azt-plans-desc { margin: 0; color: var(--azt-ink-420); font: var(--azt-text-body-sm); }
.azt-plans-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.azt-plans-amt { font: 500 24px/1.1 var(--azt-font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.azt-plans-per { font: 400 12px/1.3 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-plans-hl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.azt-plans-hl > div { min-width: 0; }
.azt-plans-hl dt { font: var(--azt-text-eyebrow); letter-spacing: .06em; text-transform: uppercase; color: var(--azt-ink-420); line-height: 1.3; overflow-wrap: anywhere; }
.azt-plans-hl dd { margin: 3px 0 0; font: 500 16px/1.2 var(--azt-font-mono); font-variant-numeric: tabular-nums; }
.azt-plans-actions, .azt-plans-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.azt-plans-confirm { gap: 8px; }
.azt-plans-confirm span { max-width: 24ch; text-align: right; color: var(--azt-ink-500); font: var(--azt-text-caption); line-height: 1.3; }

/* Compare: capabilities down the side, plans across; the capability column stays put when the table scrolls sideways. */
.azt-plans-cmp-wrap { overflow-x: auto; }
.azt-plans-cmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; }
.azt-plans-cmp th, .azt-plans-cmp td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-plans-cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--azt-near-white); vertical-align: bottom; padding-top: 20px; padding-bottom: 16px; border-bottom-color: var(--azt-border); font-weight: 400; }
.azt-plans-cmp th:first-child, .azt-plans-cmp td:first-child { position: sticky; left: 0; z-index: 1; min-width: 190px; background: var(--azt-near-white); }
.azt-plans-cmp thead th:first-child { z-index: 3; }
.azt-plans-cmp tbody tr:last-child > * { border-bottom: 0; }
.azt-plans-cmp-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.azt-plans-cmp-plan b { font: var(--azt-text-h3); }
.azt-plans-cmp-plan .azt-plans-amt { font-size: 15px; }
.azt-plans-cmp-plan .azt-plans-per { font-size: 11px; }
.azt-plans-eyebrow { font: var(--azt-text-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-plans-cmp-cap { font-weight: 500; }
.azt-plans-cmp-cap small { display: block; margin-top: 1px; font: 400 11px/1.3 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-plans-cmp-empty { padding: 32px 16px; text-align: center; color: var(--azt-ink-420); }
.azt-plans-cell { font: 500 14px/1.2 var(--azt-font-mono); font-variant-numeric: tabular-nums; }
.azt-plans-cell.is-none { color: var(--azt-ink-250); font-weight: 400; }
.azt-plans-cell small { font-size: 11px; font-weight: 400; color: var(--azt-ink-420); }
.azt-plans-cell svg { width: 18px; height: 18px; fill: none; stroke: var(--azt-slot-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.azt-plans-level { display: inline-block; padding: 3px 9px; border-radius: 7px; background: var(--azt-surface-tint); font: 500 12px/1.2 var(--azt-font-display); }

/* Add/edit drawer sections */
.azt-plans-sec { display: flex; flex-direction: column; gap: 14px; }
.azt-plans-sec .azt-adm-hint { margin: 0; }
.azt-plans-sec-title { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--azt-border-hairline); font: var(--azt-text-eyebrow); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-plans-pricerow { align-items: flex-start; gap: 12px; }
.azt-plans-preview { display: inline-flex; align-items: baseline; flex-wrap: wrap; align-self: flex-start; gap: 8px; padding: 10px 14px; border: 1px dashed var(--azt-border-strong); border-radius: var(--azt-radius-md); background: var(--azt-slot-tint-2); font: 500 15px/1.3 var(--azt-font-mono); }
.azt-plans-preview small { font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-plans-tabs { margin-top: 0; }
.azt-plans-caprow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-plans-capname { flex: 1 1 11rem; min-width: 0; }
.azt-plans-capname small { display: block; margin-top: 3px; font: 400 10.5px/1 var(--azt-font-mono); letter-spacing: .04em; color: var(--azt-ink-420); }
.azt-plans-ctl { display: flex; align-items: center; gap: 12px; }
.azt-plans-ctl .azt-adm-input { min-height: 38px; padding: 6px 10px; border-radius: var(--azt-radius-md); }
.azt-plans-limit { width: 6.5rem; }
.azt-plans-level-select { width: 12rem; }

/* Narrower screens: each plan becomes a short card (identity and status on top, then price, key limits, actions). */
@media (max-width: 1280px) {
  .azt-plans-head { display: none; }
  .azt-plans-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "grip id status" "grip price price" "grip act act"; gap: 12px; align-items: start; }
  .azt-plans-grip { grid-area: grip; }
  .azt-plans-id { grid-area: id; }
  .azt-plans-status { grid-area: status; }
  .azt-plans-price { grid-area: price; flex-direction: row; align-items: baseline; gap: 8px; }
  .azt-plans-hl { grid-area: hl; }
  .azt-plans-actions, .azt-plans-confirm { grid-area: act; justify-content: flex-start; }
  .azt-plans-confirm span { max-width: none; text-align: left; }
}
@media (max-width: 520px) {
  .azt-plans-row { padding: 16px; }
  .azt-plans-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .azt-plans-diff { margin-left: 0; }
}

/* ---- Email templates list and editor (ADM-003 Feature 1; docs/design/admin/EmailTemplates.html) ---- */
.azt-adm-page.azt-tpl { max-width: none; }
.azt-tpl-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.azt-tpl-search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--azt-ink-420); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.azt-tpl-search input { width: 100%; min-height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); color: var(--azt-ink-700); font: var(--azt-text-body); }
.azt-tpl-search input::placeholder { color: var(--azt-ink-420); }
.azt-tpl-search input:focus { outline: none; border-color: var(--azt-slot-500); }
.azt-tpl-spacer { flex: 1; }
.azt-tpl .azt-card.azt-tpl-card { padding: 0; overflow: hidden; }
.azt-tpl-foot { font: var(--azt-text-caption); color: var(--azt-ink-420); }

/* event matrix */
.azt-tpl-grid { display: grid; grid-template-columns: minmax(220px, 1.15fr) minmax(210px, 1fr) minmax(210px, 1fr); }
.azt-tpl-gh { padding: 10px 16px; background: var(--azt-surface-tint); border-bottom: 1px solid var(--azt-border-hairline); font: var(--azt-text-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-tpl-group { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 18px 16px 8px; border-top: 1px solid var(--azt-border-hairline); }
.azt-tpl-gh + .azt-tpl-gh + .azt-tpl-gh + .azt-tpl-group { border-top: 0; }
.azt-tpl-grid.is-single { grid-template-columns: minmax(220px, 1.15fr) minmax(210px, 1fr); }
.azt-tpl-grid.is-single .azt-tpl-gh + .azt-tpl-gh + .azt-tpl-group { border-top: 0; }
.azt-tpl-group b { font: var(--azt-text-h3); letter-spacing: -.01em; }
.azt-tpl-group span { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-tpl-ev { padding: 14px 16px; border-top: 1px solid var(--azt-border-hairline); display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.azt-tpl-ev b { font: 600 14px/1.35 var(--azt-font-display); }
.azt-tpl-ev span { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-tpl-ev .azt-tpl-code { align-self: flex-start; margin-bottom: 3px; padding: 3px 5px; border: 1px solid var(--azt-border); border-radius: 5px; font: 500 10px/1 var(--azt-font-mono); letter-spacing: .06em; color: var(--azt-ink-420); }
.azt-tpl-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 14px 16px; border-top: 1px solid var(--azt-border-hairline); border-left: 1px solid var(--azt-border-hairline); color: inherit; text-decoration: none; }
a.azt-tpl-cell:hover { background: var(--azt-slot-tint); }
a.azt-tpl-cell::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--azt-ink-420); border-top: 2px solid var(--azt-ink-420); rotate: 45deg; opacity: 0; transition: opacity .12s, translate .12s; }
a.azt-tpl-cell:hover::after, a.azt-tpl-cell:focus-visible::after { opacity: 1; translate: 3px 0; }
a.azt-tpl-cell:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: -3px; }
.azt-tpl-cell.is-na { color: var(--azt-ink-420); font: var(--azt-text-caption); background: repeating-linear-gradient(135deg, transparent 0 8px, oklch(0.5 0.01 210 / .05) 8px 9px); }
.azt-tpl-cell-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-right: 18px; }
.azt-tpl-cell-role { display: none; font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-tpl-meta { font: 400 11.5px/1.3 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-tpl-langs { display: inline-flex; gap: 3px; }
.azt-tpl-langs b { padding: 3px 5px; border-radius: 5px; background: var(--azt-surface-tint); color: var(--azt-ink-500); font: 500 10px/1 var(--azt-font-mono); letter-spacing: .04em; }
.azt-tpl-langs b.is-missing { background: var(--azt-danger-bg); color: var(--azt-danger-text); text-decoration: line-through; }
.azt-tpl-aud { align-self: center; padding: 4px 7px; border-radius: 6px; font: 500 10.5px/1 var(--azt-font-mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.azt-tpl-aud.is-customer { background: var(--azt-surface-tint); color: var(--azt-ink-500); }
.azt-tpl-aud.is-provider { background: var(--azt-slot-tint); color: var(--azt-slot-text); }

/* flat list */
.azt-tpl-flat { display: grid; grid-template-columns: minmax(240px, 2fr) 110px minmax(150px, 1fr) 130px 190px; }
.azt-tpl-flat-row { display: contents; color: inherit; text-decoration: none; }
.azt-tpl-flat-row > * { padding: 13px 16px; border-top: 1px solid var(--azt-border-hairline); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-width: 0; }
a.azt-tpl-flat-row:hover > * { background: var(--azt-slot-tint); }
a.azt-tpl-flat-row:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: -3px; }
.azt-tpl-key { font: 400 11.5px/1.4 var(--azt-font-mono); color: var(--azt-ink-420); overflow-wrap: anywhere; }

/* states */
.azt-tpl-state { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.azt-tpl-state h2 { margin: 6px 0 0; font: var(--azt-text-h3); }
.azt-tpl-state p { margin: 0; max-width: 46ch; color: var(--azt-ink-500); }
.azt-tpl-skel { padding: 8px 0; }
.azt-tpl-skel > div { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 24px; padding: 18px 16px; border-top: 1px solid var(--azt-border-hairline); }
.azt-tpl-skel i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--azt-surface-tint), var(--azt-border-faint), var(--azt-surface-tint)); background-size: 200% 100%; animation: azt-tpl-shimmer 1.3s linear infinite; }
@keyframes azt-tpl-shimmer { to { background-position: -200% 0; } }

/* editor page */
.azt-tpl-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: var(--azt-text-body-sm); color: var(--azt-ink-420); }
.azt-tpl-crumbs a { color: var(--azt-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.azt-tpl-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.azt-tpl-key-line { font: 400 12.5px/1.4 var(--azt-font-mono); color: var(--azt-ink-420); }
.azt-tpl-editgrid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.azt-tpl-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.azt-tpl-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.azt-tpl .azt-card.azt-tpl-panel { padding: 0; overflow: hidden; }
.azt-tpl-panelhead { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-tpl-panelhead h2 { flex: 1; margin: 0; font: 700 15px/1.3 var(--azt-font-display); letter-spacing: -.01em; }
.azt-tpl-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--azt-border-hairline); overflow-x: auto; }
.azt-tpl-tab { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 14px 12px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--azt-ink-500); font: 600 14px/1.3 var(--azt-font-display); white-space: nowrap; cursor: pointer; }
.azt-tpl-tab[aria-selected="true"] { color: var(--azt-ink-700); border-bottom-color: var(--azt-slot-500); }
.azt-tpl-tab:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: -2px; }
.azt-tpl-tab i { width: 8px; height: 8px; border-radius: 50%; background: var(--azt-slot-500); }
.azt-tpl-tab i.is-missing { background: var(--azt-danger); }
.azt-tpl-tab i.is-edited { background: var(--azt-info-text); }
.azt-tpl-form { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.azt-tpl-label { display: flex; align-items: baseline; gap: 8px; font: 600 13.5px/1.3 var(--azt-font-display); color: var(--azt-ink-700); }
.azt-tpl-label small { font: var(--azt-text-caption); font-weight: 400; color: var(--azt-ink-420); }
.azt-tpl .azt-adm-input.is-invalid, .azt-tpl .azt-rte.is-invalid { border-color: var(--azt-danger); }
.azt-tpl-err { display: flex; gap: 6px; color: var(--azt-danger-text); font: var(--azt-text-caption); }
.azt-tpl-hint { font: var(--azt-text-caption); color: var(--azt-ink-420); }

/* preview, fields, when */
.azt-tpl-pvbox { padding: 16px; background: var(--azt-surface-tint); }
.azt-tpl-pv { overflow: hidden; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: #fff; color: oklch(0.22 0.035 215); font: 400 14px/1.6 Helvetica, Arial, sans-serif; }
.azt-tpl-pv-subj { padding: 12px 16px; border-bottom: 1px solid oklch(0.93 0.008 210); font: 600 14px/1.4 Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
.azt-tpl-pv-subj small { display: block; font-weight: 400; font-size: 12px; color: oklch(0.5 0.02 210); }
.azt-tpl-pv-logo { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0; font: 700 15px Helvetica, Arial, sans-serif; }
.azt-tpl-pv-logo i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: oklch(0.44 0.13 205); }
.azt-tpl-pv-logo i::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: oklch(0.76 0.15 174); }
.azt-tpl-pv-body { padding: 10px 16px 18px; overflow-wrap: anywhere; }
.azt-tpl-pv-body mark { padding: 0 3px; border-radius: 4px; background: oklch(0.94 0.05 178); color: inherit; }
.azt-tpl-pv-body mark.unk { background: oklch(0.94 0.05 25); font: 12.5px var(--azt-font-mono); }
.azt-tpl-pv-empty { padding: 28px 16px; text-align: center; color: oklch(0.5 0.02 210); font-size: 13.5px; }
.azt-tpl-pvnote { padding: 10px 16px 14px; font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-tpl-fieldlist { display: flex; flex-direction: column; }
.azt-tpl-fieldlist button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 9px 16px; border: 0; border-top: 1px solid var(--azt-border-hairline); background: none; text-align: left; cursor: pointer; }
.azt-tpl-fieldlist button:first-child { border-top: 0; }
.azt-tpl-fieldlist button:hover:not([disabled]) { background: var(--azt-slot-tint); }
.azt-tpl-fieldlist button:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: -2px; }
.azt-tpl-fieldlist button[disabled] { opacity: .6; cursor: not-allowed; }
.azt-tpl-fieldlist b { font: 500 12.5px var(--azt-font-mono); color: var(--azt-slot-text); }
.azt-tpl-fieldlist em { font: 400 12px var(--azt-font-mono); font-style: normal; text-align: right; color: var(--azt-ink-500); overflow-wrap: anywhere; }
.azt-tpl-fieldlist span { grid-column: 1 / -1; font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-tpl-when { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; font: var(--azt-text-body-sm); color: var(--azt-ink-500); }
.azt-tpl-when p { margin: 0; }

/* version history */
.azt-tpl-histhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 16px 16px 10px; }
.azt-tpl-histhead h2 { margin: 0; font: 700 15px/1.3 var(--azt-font-display); }
.azt-tpl-histhead span { font: var(--azt-text-caption); color: var(--azt-ink-420); }
.azt-tpl-histnone { margin: 0; padding: 4px 16px 18px; color: var(--azt-ink-500); }
.azt-tpl-hist { display: grid; grid-template-columns: 90px minmax(140px, 1fr) minmax(120px, 1fr) 100px; }
.azt-tpl-hist > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 12px 16px; border-top: 1px solid var(--azt-border-hairline); }
.azt-tpl-hist .azt-tpl-gh { border-top: 0; }
.azt-tpl-live { padding: 3px 6px; border-radius: 5px; background: var(--azt-slot-tint); color: var(--azt-slot-text); font: 500 10px/1 var(--azt-font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* action bar */
.azt-tpl-actionbar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; border: 1px solid var(--azt-border-hairline); border-radius: 16px; background: var(--azt-near-white); box-shadow: 0 -6px 24px oklch(0.2 0.03 215 / .07); }
.azt-tpl-status { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; font: var(--azt-text-body-sm); color: var(--azt-ink-500); }
.azt-tpl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azt-ink-420); }
.azt-tpl-dot.is-dirty { background: var(--azt-info-text); }
.azt-tpl-dot.is-saved { background: var(--azt-slot-500); }
.azt-tpl-spin { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: azt-tpl-spin .7s linear infinite; }
@keyframes azt-tpl-spin { to { rotate: 360deg; } }

/* confirm dialogs */
.azt-tpl-dialog { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 8px; }
.azt-tpl-dialog h2 { margin: 0; font: var(--azt-text-h2); }
.azt-tpl-dialog p { margin: 0; color: var(--azt-ink-500); }
.azt-tpl-dialog ul { margin: 0; padding-left: 18px; color: var(--azt-ink-500); }

@media (prefers-reduced-motion: reduce) { .azt-tpl-skel i, .azt-tpl-spin { animation: none; } a.azt-tpl-cell::after { transition: none; } }
@media (max-width: 1100px) { .azt-tpl-editgrid { grid-template-columns: minmax(0, 1fr); } .azt-tpl-rail { position: static; } }
@media (max-width: 760px) {
  .azt-tpl-grid { display: block; }
  .azt-tpl-gh { display: none; }
  .azt-tpl-cell { padding: 8px 16px; border-left: 0; border-top: 0; }
  .azt-tpl-cell-role { display: block; }
  .azt-tpl-cell.is-na { display: none; }
  .azt-tpl-grid .azt-tpl-cell:last-child { padding-bottom: 14px; }
  .azt-tpl-search { max-width: none; }
  .azt-tpl-flat { display: block; }
  .azt-tpl-flat-row { display: block; padding: 12px 16px; border-top: 1px solid var(--azt-border-hairline); }
  .azt-tpl-flat-row > * { padding: 2px 0; border: 0; }
  .azt-tpl-flat .azt-tpl-gh { display: none; }
  .azt-tpl-hist { display: block; }
  .azt-tpl-hist .azt-tpl-gh { display: none; }
  .azt-tpl-hist > div { border-top: 0; padding: 4px 16px; }
  .azt-tpl-hist > div:nth-child(4n+1) { border-top: 1px solid var(--azt-border-hairline); padding-top: 12px; }
  .azt-tpl-hist > div:nth-child(4n) { padding-bottom: 12px; }
  .azt-tpl-actionbar .azt-btn { flex: 1 1 auto; }
  .azt-tpl-status { flex-basis: 100%; }
  .azt-tpl-form { padding: 16px; }
}

/* ---- Mail vendor, sender and pause (ADM-004) — built from the admin panel / banner / badge parts above; only the vendor rows and the history list are new. ---- */
.azt-adm-page.azt-mail { max-width: none; }
.azt-mail .azt-adm-panel { display: flex; flex-direction: column; gap: 14px; }
.azt-mail .azt-adm-panel p { margin: 0; }
.azt-mail-vendors { display: flex; flex-direction: column; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-lg); overflow: hidden; }
.azt-mail-vendor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-mail-vendor:last-child { border-bottom: 0; }
.azt-mail-vendor.is-active { background: var(--azt-slot-tint-2); }
.azt-mail-vendor-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.azt-mail-vendor-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.azt-mail-detail { color: var(--azt-danger-text); overflow-wrap: anywhere; }
.azt-mail-note { margin-top: 0; }
.azt-mail-allow { margin-top: 8px; }
.azt-mail textarea.azt-adm-input { min-height: 96px; resize: vertical; font-family: var(--azt-font-mono); }
.azt-mail-banner { align-items: center; justify-content: space-between; margin-bottom: 16px; }
.azt-mail-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.azt-mail-history li { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--azt-border-hairline); font: var(--azt-text-body-sm); }
.azt-mail-history li:last-child { border-bottom: 0; }
.azt-mail-history-when { color: var(--azt-ink-420); white-space: nowrap; }
.azt-mail-history-what { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .azt-mail-vendor { flex-direction: column; align-items: stretch; }
  .azt-mail-history li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---- Accounts list (docs/design/admin/accounts) ----
   One card: search and Role/Status segments on top, a count with removable filter chips, then the list. Built on
   the brand tokens only. A row is one link. Up to 700px the segments move into a bottom sheet and the rows become
   cards (the row's .azt-acc-fields wrapper is display:contents on desktop so its children sit in the grid columns). */
.azt-acc-card { background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); overflow: hidden; }
.azt-acc-bar { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-bottom: 1px solid var(--azt-border-hairline); }
.azt-acc-searchrow { display: flex; align-items: center; gap: 10px; }
.azt-acc-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); color: var(--azt-ink-250); }
.azt-acc-search:focus-within { border-color: var(--azt-slot-500); box-shadow: 0 0 0 3px var(--azt-slot-tint); }
.azt-acc-search input { flex: 1; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: none; color: var(--azt-ink-700); font: 400 14px/1.4 var(--azt-font-display); -webkit-appearance: none; appearance: none; }
.azt-acc-search input::placeholder { color: var(--azt-ink-150); }
.azt-acc-search input::-webkit-search-cancel-button, .azt-acc-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.azt-acc-clr { flex: none; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--azt-ink-300); cursor: pointer; }
.azt-acc-clr:hover { background: var(--azt-surface-tint); color: var(--azt-ink-700); }
.azt-acc-clr:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-acc-searchrow .azt-btn.azt-acc-searchbtn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.azt-acc-filterbtn { display: none; position: relative; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); color: var(--azt-ink-500); cursor: pointer; }
.azt-acc-filterbtn i { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--azt-slot-500); box-shadow: 0 0 0 2px var(--azt-near-white); }
.azt-acc-filterbtn:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }

.azt-adm-page.azt-acc { max-width: none; }
.azt-acc-filters { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.azt-acc-fg { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.azt-acc-gl { font: 500 10px/1.2 var(--azt-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-acc-gl-gap { margin-left: 10px; }
.azt-acc-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-md); background: var(--azt-surface-tint); }
.azt-acc-seg button { min-height: 32px; padding: 7px 14px; border: 0; border-radius: var(--azt-radius-sm); background: transparent; color: var(--azt-ink-300); font: 500 13px/1.2 var(--azt-font-display); cursor: pointer; }
.azt-acc-seg button[aria-pressed="true"] { background: var(--azt-near-white); color: var(--azt-ink-700); font-weight: 600; box-shadow: var(--azt-shadow-sm); }
.azt-acc-seg button:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--azt-ink-700); }
.azt-acc-seg button:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-acc-seg.is-off { opacity: .55; }
.azt-acc-seg button:disabled { cursor: default; }
.azt-acc-clearlink { margin-left: auto; min-height: 32px; padding: 6px 4px; border: 0; background: none; color: var(--azt-slot-text); font: 600 13.5px/1.2 var(--azt-font-display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.azt-acc-clearlink:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; border-radius: var(--azt-radius-sm); }

.azt-acc-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 46px; padding: 14px 20px 12px; box-sizing: border-box; color: var(--azt-ink-420); font: 400 13px/1.3 var(--azt-font-display); }
.azt-acc-summary b { font-weight: 600; color: var(--azt-ink-700); }
.azt-acc-fchip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 3px 4px 3px 10px; border: 1px solid var(--azt-border-strong); border-radius: var(--azt-radius-full); background: var(--azt-surface-tint); color: var(--azt-ink-500); font: 500 12px/1.2 var(--azt-font-display); }
.azt-acc-fchip button { width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--azt-ink-300); cursor: pointer; }
.azt-acc-fchip button:hover { background: var(--azt-near-white); color: var(--azt-ink-700); }
.azt-acc-fchip button:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-acc-fchip .azt-icon { stroke-width: 2.2; }

.azt-acc-errwrap { padding: 20px; }
.azt-acc-error { align-items: center; }
.azt-acc-errtext { flex: 1; min-width: 0; }
.azt-acc-errtext b { font-weight: 600; }

.azt-acc-head, .azt-acc-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 0 20px; }
.azt-acc-head { min-height: 38px; background: var(--azt-surface-tint); font: var(--azt-text-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-acc-row { min-height: 60px; box-sizing: border-box; border-top: 1px solid var(--azt-border-hairline); color: inherit; text-decoration: none; font: var(--azt-text-body-sm); }
.azt-acc-row:hover { background: var(--azt-surface-tint); }
.azt-acc-row:active { background: var(--azt-border-soft); }
.azt-acc-row:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--azt-slot-500); }
.azt-acc-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.azt-acc-id { min-width: 0; }
.azt-acc-name { font-weight: 600; color: var(--azt-ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azt-acc-contact { display: flex; font: var(--azt-text-caption); color: var(--azt-ink-420); white-space: nowrap; min-width: 0; }
.azt-acc-contact > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.azt-acc-phone { flex: none; white-space: pre; }
.azt-acc-fields { display: contents; }
.azt-acc-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.azt-acc-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--azt-radius-sm); background: var(--azt-surface-tint); color: var(--azt-ink-500); font: 500 11px/1.3 var(--azt-font-mono); }
.azt-acc-tag.is-warn { background: var(--azt-warning-bg); color: var(--azt-warning-text); }
.azt-acc-date { font: 500 13px/1.4 var(--azt-font-mono); color: var(--azt-ink-500); }
.azt-acc-row .azt-acc-go { justify-self: end; color: var(--azt-ink-250); }
.azt-acc-row:hover .azt-acc-go, .azt-acc-row:focus-visible .azt-acc-go { color: var(--azt-ink-700); }

.azt-acc-pager { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--azt-border-hairline); color: var(--azt-ink-420); font: 400 12.5px/1 var(--azt-font-display); }
.azt-acc-pagemid { margin: 0 auto 0 12px; }
.azt-acc-pagebtns { display: inline-flex; gap: 8px; }
.azt-acc-pagetop { margin-left: auto; }

@keyframes azt-acc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.azt-acc-sk { display: block; height: 12px; border-radius: 6px; background: var(--azt-border-soft); animation: azt-acc-pulse 1.4s ease-in-out infinite; }
.azt-acc-sk.is-tall { height: 14px; }
.azt-acc-sk.is-circle { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.azt-acc-sk.is-pill { height: 22px; border-radius: 999px; }
.azt-acc-row.is-skeleton { pointer-events: none; }
.azt-acc-row.is-skeleton .azt-acc-id { flex: 1; }
@media (prefers-reduced-motion: reduce) { .azt-acc-sk { animation: none; } }

.azt-acc-tile { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--azt-radius-lg); background: var(--azt-surface-tint); color: var(--azt-ink-500); }
.azt-acc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px 64px; text-align: center; }
.azt-acc-empty .azt-acc-tile { margin-bottom: 10px; }
.azt-acc-empty h2, .azt-acc-denied h2 { margin: 0; font: var(--azt-text-h3); }
.azt-acc-empty p { margin: 0; max-width: 420px; color: var(--azt-ink-420); font-size: 14px; }
.azt-acc-empty .azt-btn { margin-top: 14px; }
.azt-acc-denied { display: flex; align-items: center; gap: 20px; padding: 32px; background: var(--azt-near-white); border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); }
.azt-acc-denied p { margin: 4px 0 0; color: var(--azt-ink-420); font-size: 14px; }

.azt-acc-backdrop, .azt-acc-sheet { display: none; }

@media (max-width: 700px) {
  .azt-acc-card { overflow: visible; border: 0; background: transparent; }
  .azt-acc-bar { padding: 0; border-bottom: 0; }
  .azt-acc-searchrow .azt-btn.azt-acc-searchbtn, .azt-acc-filters { display: none; }
  .azt-acc-filterbtn { display: inline-flex; }
  .azt-acc-summary { min-height: 0; padding: 14px 0 12px; }
  .azt-acc-errwrap { padding: 16px 0 0; }
  .azt-acc-head { display: none; }

  .azt-acc-list { overflow: hidden; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); background: var(--azt-near-white); }
  .azt-acc-row { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px 12px; align-items: start; padding: 14px 16px; }
  .azt-acc-row:first-child { border-top: 0; }
  .azt-acc-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; grid-column: 1; margin-left: 48px; }
  .azt-acc-roles { display: contents; }
  .azt-acc-go { grid-column: 2; grid-row: 1; margin-top: 12px; }
  .azt-acc-phone { display: none; }
  .azt-acc-date { font-size: 12px; color: var(--azt-ink-420); }
  .azt-acc-row.is-skeleton { margin-bottom: 8px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); background: var(--azt-near-white); }

  .azt-acc-pager { padding: 16px 0 0; border-top: 0; gap: 8px; }
  .azt-acc-range { display: none; }
  .azt-acc-pagemid { order: 2; margin: 0; flex: none; }
  .azt-acc-pagebtns.azt-acc-pagetop { display: none; }
  .azt-acc-pagebtns { display: contents; }
  .azt-acc-pagebtns .azt-btn { flex: 1; }
  .azt-acc-pagebtns .azt-acc-prev { order: 1; }
  .azt-acc-pagebtns .azt-acc-next { order: 3; }

  .azt-acc-empty { padding: 40px 16px; border: 1px solid var(--azt-border-soft); border-radius: var(--azt-radius-xl); background: var(--azt-near-white); }

  /* The Role / Status filters as a sheet from the bottom. */
  .azt-acc-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: oklch(0.19 0.03 220 / 0.4); }
  .azt-acc-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 88dvh; overflow-y: auto; padding: 20px 16px 24px; background: var(--azt-near-white); border-radius: var(--azt-radius-2xl) var(--azt-radius-2xl) 0 0; box-shadow: var(--azt-shadow-xl); }
  .azt-acc-sheethead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .azt-acc-sheethead h2 { margin: 0; font: var(--azt-text-h2); }
  .azt-acc-sheetclose { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--azt-border-soft); border-radius: 10px; background: var(--azt-near-white); color: var(--azt-ink-700); cursor: pointer; }
  .azt-acc-sheetclose:focus-visible, .azt-acc-opt:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 2px; }
  .azt-acc-sheet .azt-acc-gl { margin: 14px 0 8px; }
  .azt-acc-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .azt-acc-opt { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); background: var(--azt-near-white); color: var(--azt-ink-700); font: 500 14px/1.2 var(--azt-font-display); text-align: left; cursor: pointer; }
  .azt-acc-opt i { width: 18px; height: 18px; flex: none; box-sizing: border-box; border: 2px solid var(--azt-border-strong); border-radius: 50%; }
  .azt-acc-opt[aria-checked="true"] { border-color: var(--azt-slot-500); background: var(--azt-slot-tint); color: var(--azt-slot-text); }
  .azt-acc-opt[aria-checked="true"] i { border-color: var(--azt-slot-500); background: var(--azt-slot-500); box-shadow: inset 0 0 0 3px var(--azt-slot-tint); }
  .azt-acc-sheetfoot { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
  .azt-acc-sheetfoot .azt-btn { width: 100%; }
}

/* ---- Offers (ADMIN-24): docs/design/pricing/pricing-v4.html, "Admin: Offers" and "Admin: Edit offer" ---- */
.azt-offers .azt-card.azt-offers-card { padding: 0; overflow-x: auto; }
.azt-offers-head, .azt-offers-row { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(80px, .8fr) minmax(90px, .9fr) minmax(130px, 1.3fr) minmax(110px, 1fr) minmax(90px, .8fr) minmax(200px, 1.6fr); gap: 0 14px; align-items: center; padding: 16px 20px; min-width: 980px; }
.azt-offers-head { padding-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--azt-border-hairline); font: var(--azt-text-eyebrow); letter-spacing: .09em; text-transform: uppercase; color: var(--azt-ink-420); }
.azt-offers-row { border-bottom: 1px solid var(--azt-border-hairline); }
.azt-offers-row:last-child { border-bottom: 0; }
.azt-offers-row.is-ended .azt-offers-id, .azt-offers-row.is-ended .azt-offers-len, .azt-offers-row.is-ended .azt-offers-off { opacity: .6; }
.azt-offers-id { min-width: 0; }
.azt-offers-name { margin: 0; font: 600 15px/1.3 var(--azt-font-display); color: var(--azt-ink-700); }
.azt-offers-meta { margin: 4px 0 0; font: 400 12px/1.5 var(--azt-font-display); color: var(--azt-ink-420); }
.azt-offers-badge { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: var(--azt-radius-full); background: var(--azt-ink-700); color: var(--azt-slot-300, var(--azt-near-white)); font: 500 11px/1.4 var(--azt-font-mono); }
.azt-offers-tag { display: inline-block; margin: 0 4px 4px 0; padding: 3px 9px; border-radius: 8px; background: var(--azt-surface-tint); color: var(--azt-ink-500); font: 400 12px/1.4 var(--azt-font-display); }
.azt-offers-len, .azt-offers-count { font: 500 13px/1.3 var(--azt-font-mono); color: var(--azt-ink-700); }
.azt-offers-used { display: flex; flex-direction: column; gap: 6px; }
.azt-offers-meter { display: block; height: 5px; border-radius: 3px; background: var(--azt-surface-tint); overflow: hidden; }
.azt-offers-meter i { display: block; height: 100%; background: var(--azt-slot-500); }
.azt-offers-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.azt-offers-confirm { align-items: center; font-size: 13px; color: var(--azt-ink-500); }
.azt-offers-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.azt-offers-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-md); font: 400 14px/1.3 var(--azt-font-display); color: var(--azt-ink-700); }
.azt-offers-opt i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--azt-ink-420); }
.azt-offers-opt.is-on { border-color: var(--azt-slot-500); background: var(--azt-surface-tint); }
.azt-offers-opt.is-on i { border-color: var(--azt-slot-500); background: radial-gradient(circle, var(--azt-slot-500) 45%, transparent 50%); }
.azt-offers-opt.is-disabled { opacity: .6; }
.azt-offers-later { margin-left: auto; padding: 3px 8px; border-radius: var(--azt-radius-full); background: var(--azt-surface-tint); color: var(--azt-ink-420); font: 500 11px/1.3 var(--azt-font-mono); white-space: nowrap; }
.azt-offers-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-md); }
.azt-offers-switch b { font: 600 14px/1.3 var(--azt-font-display); color: var(--azt-ink-700); }
.azt-offers-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: var(--azt-radius-full); background: var(--azt-ink-700); color: var(--azt-near-white); font: 400 13px/1.3 var(--azt-font-display); }
.azt-offers-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.azt-offers-chip button:hover { background: rgba(255, 255, 255, .16); }
.azt-offers-chip button:focus-visible { outline: 2px solid var(--azt-slot-500); outline-offset: 1px; }
.azt-offers-add { width: auto; min-width: 11rem; }
.azt-offers-steps { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.azt-offers-steps li { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.4 var(--azt-font-display); color: var(--azt-ink-500); }
.azt-offers-steps li b { font: 600 14px/1.3 var(--azt-font-display); color: var(--azt-ink-700); }
.azt-offers-steps li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--azt-ink-420); }
.azt-offers-steps li.is-ok::before { background: var(--azt-slot-500); }
.azt-offers-steps li.is-warn::before { background: #e0a100; }
.azt-offers-steps li.is-bad::before { background: #b3261e; }

/* ---- Admin account page (docs/design/admin/account-detail.html) ---- */
.azt-ad { --ad-surface: var(--azt-near-white); --ad-surface-2: var(--azt-surface-tint); --ad-line: var(--azt-border-soft); --ad-line-strong: var(--azt-border-strong); --ad-ink: var(--azt-ink-700); --ad-ink-2: var(--azt-ink-500); --ad-ink-3: var(--azt-ink-420); width: 100%; max-width: none; display: flex; flex-direction: column; gap: 16px; }
.azt-ad .eyebrow { font: 600 11px/1.3 var(--azt-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ad-ink-3); }
.azt-ad .mono { font-family: var(--azt-font-mono); font-variant-numeric: tabular-nums; }
.azt-ad-crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ad-ink-3); }
.azt-ad-crumbs a { color: var(--azt-deep); text-decoration: none; }
.azt-ad-crumbs a:hover { text-decoration: underline; }

.azt-ad-card { background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 14px; min-width: 0; }
.azt-ad-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; flex-wrap: wrap; }
.azt-ad-card-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.azt-ad-card-b { padding: 16px 20px 20px; }

.azt-ad-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 20px; align-items: center; padding: 20px; }
.azt-ad-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ad-ink); color: var(--azt-slot-500); font: 700 22px/1 var(--azt-font-display); letter-spacing: .02em; }
.azt-ad-avatar::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--ad-surface); background: var(--dot, var(--azt-slot-500)); }
.azt-ad-avatar.is-warn { --dot: var(--azt-warning-text); }
.azt-ad-avatar.is-bad { --dot: var(--azt-danger-text); }
.azt-ad-who { min-width: 0; }
.azt-ad-who h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.azt-ad-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--ad-ink-2); font-size: 13px; }
.azt-ad-meta span { overflow-wrap: anywhere; min-width: 0; }
.azt-ad-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.azt-ad-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.azt-ad-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 var(--azt-font-display); background: var(--ad-surface-2); color: var(--ad-ink-2); border: 1px solid var(--ad-line); white-space: nowrap; }
.azt-ad-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.azt-ad-pill.ok { background: var(--azt-slot-tint); color: var(--azt-slot-text); border-color: transparent; }
.azt-ad-pill.warn { background: var(--azt-warning-bg); color: var(--azt-warning-text); border-color: transparent; }
.azt-ad-pill.bad { background: var(--azt-danger-bg); color: var(--azt-danger-text); border-color: transparent; }
.azt-ad-pill.info { background: var(--azt-info-bg); color: var(--azt-deep); border-color: transparent; }

.azt-ad-btn { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ad-line-strong); background: var(--ad-surface); color: var(--ad-ink); font: 600 14px/1 var(--azt-font-display); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.azt-ad-btn:hover { background: var(--ad-surface-2); }
.azt-ad-btn:focus-visible { outline: 2px solid var(--azt-deep); outline-offset: 2px; }
.azt-ad-btn.go { background: var(--azt-slot-500); border-color: var(--azt-slot-500); color: var(--azt-slot-ink); }
.azt-ad-btn.ink { background: var(--ad-ink); border-color: var(--ad-ink); color: var(--azt-near-white); }
.azt-ad-btn.danger { color: var(--azt-danger-text); border-color: var(--azt-danger-border); background: var(--azt-danger-bg); }
.azt-ad-btn.sm { height: 30px; padding: 0 11px; font-size: 13px; }
.azt-ad-btn[disabled] { opacity: .45; cursor: not-allowed; }

.azt-ad-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: 13px; }
.azt-ad-notice.warn { background: var(--azt-warning-bg); color: var(--azt-warning-text); }
.azt-ad-notice.bad { background: var(--azt-danger-bg); color: var(--azt-danger-text); }
.azt-ad-notice.info { background: var(--azt-info-bg); color: var(--azt-info-text); }

.azt-ad-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.azt-ad-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.azt-ad-rail { position: sticky; top: 12px; }

.azt-ad-biz { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.azt-ad-divider { height: 1px; background: var(--ad-line); margin-block: 16px; }

.azt-ad-sub-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.azt-ad-menu-wrap { position: relative; }
.azt-ad-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; background: var(--ad-surface); border: 1px solid var(--ad-line-strong); border-radius: 12px; box-shadow: var(--azt-shadow-md); padding: 6px; z-index: 10; }
.azt-ad-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ad-ink); padding: 9px 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.azt-ad-menu button:hover { background: var(--ad-surface-2); }
.azt-ad-menu button b { display: block; font-weight: 600; }
.azt-ad-menu button span { display: block; font-size: 12px; color: var(--ad-ink-3); }
.azt-ad-menu .none { padding: 10px; font-size: 13px; color: var(--ad-ink-3); }
.azt-ad-menu-scrim { position: fixed; inset: 0; z-index: 9; background: transparent; border: 0; cursor: default; }

.azt-ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.azt-ad-stat { background: var(--ad-surface-2); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.azt-ad-stat .v { font-size: 18px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.azt-ad-stat .s { font-size: 12px; color: var(--ad-ink-3); }
.azt-ad-bar { margin-top: 16px; }
.azt-ad-bar-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ad-ink-3); margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.azt-ad-track { height: 8px; border-radius: 99px; background: var(--ad-surface-2); border: 1px solid var(--ad-line); overflow: hidden; }
.azt-ad-fill { height: 100%; background: var(--azt-slot-500); }
.azt-ad-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.azt-ad-cap { font: 400 12px/1.4 var(--azt-font-mono); padding: 3px 8px; border-radius: 6px; background: var(--ad-surface-2); border: 1px solid var(--ad-line); color: var(--ad-ink-2); }

.azt-ad-tabs { display: flex; gap: 4px; padding: 3px; background: var(--ad-surface-2); border-radius: 10px; border: 1px solid var(--ad-line); max-width: 100%; overflow-x: auto; }
.azt-ad-tab { border: 0; background: transparent; color: var(--ad-ink-2); padding: 5px 12px; border-radius: 7px; font: 600 13px/1.4 var(--azt-font-display); white-space: nowrap; cursor: pointer; }
.azt-ad-tab[aria-selected="true"] { background: var(--ad-surface); color: var(--ad-ink); box-shadow: 0 1px 2px oklch(0.19 0.03 220 / .15); }
.azt-ad-tab:focus-visible { outline: 2px solid var(--azt-deep); outline-offset: 2px; }
.azt-ad-sub-tabs { display: flex; margin: 22px 0 10px; }
.azt-ad-scroll { overflow-x: auto; }
.azt-ad-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.azt-ad-tbl th { text-align: left; font: 600 11px/1.3 var(--azt-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ad-ink-3); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--ad-line); white-space: nowrap; }
.azt-ad-tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--ad-line); vertical-align: top; }
.azt-ad-tbl tr:last-child td { border-bottom: 0; }
.azt-ad-tbl .sub-note { display: block; color: var(--ad-ink-3); font-size: 12px; margin-top: 2px; }
.azt-ad-tbl td.r, .azt-ad-tbl th.r { text-align: right; padding-right: 0; }
.azt-ad-tbl tr.is-replaced td { opacity: .6; }
.azt-ad-empty { color: var(--ad-ink-3); padding: 8px 0; }

.azt-ad-composer { border: 1px solid var(--ad-line-strong); border-radius: 12px; background: var(--ad-surface); overflow: hidden; margin-bottom: 20px; }
.azt-ad-composer:focus-within { border-color: var(--azt-deep); box-shadow: 0 0 0 3px var(--azt-info-bg); }
.azt-ad-composer textarea { display: block; width: 100%; border: 0; background: transparent; color: var(--ad-ink); font: inherit; padding: 12px 14px; resize: vertical; min-height: 72px; }
.azt-ad-composer textarea:focus { outline: 0; }
.azt-ad-composer-f { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 14px; border-top: 1px solid var(--ad-line); background: var(--ad-surface-2); gap: 8px; flex-wrap: wrap; }
.azt-ad-count { font-size: 12px; color: var(--ad-ink-3); }

.azt-ad-feed { list-style: none; margin: 0; padding: 0; position: relative; }
.azt-ad-feed::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--ad-line); }
.azt-ad-ev { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.azt-ad-ev:last-child { padding-bottom: 0; }
.azt-ad-node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ad-surface); border: 2px solid var(--ad-line-strong); z-index: 1; color: var(--ad-ink-2); }
.azt-ad-node.ok { border-color: var(--azt-slot-500); color: var(--azt-slot-text); }
.azt-ad-node.warn { border-color: var(--azt-warning-text); color: var(--azt-warning-text); }
.azt-ad-node.bad { border-color: var(--azt-danger-text); color: var(--azt-danger-text); }
.azt-ad-node.note { border-color: var(--azt-deep); color: var(--azt-deep); }
.azt-ad-ev-top { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: baseline; }
.azt-ad-ev-top strong { font-weight: 600; }
.azt-ad-ev-time { font-size: 12px; color: var(--ad-ink-3); }
.azt-ad-ev-body { margin-top: 4px; color: var(--ad-ink-2); overflow-wrap: anywhere; }
.azt-ad-reason { display: inline-block; font: 400 12px/1.5 var(--azt-font-mono); padding: 1px 7px; border-radius: 5px; background: var(--ad-surface-2); border: 1px solid var(--ad-line); margin-right: 6px; color: var(--ad-ink); }
.azt-ad-note-body { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--ad-surface-2); border: 1px solid var(--ad-line); color: var(--ad-ink); overflow-wrap: anywhere; white-space: pre-wrap; }

.azt-ad-facts { margin: 0; display: flex; flex-direction: column; }
.azt-ad-fact { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--ad-line); }
.azt-ad-fact:first-child { border-top: 0; padding-top: 0; }
.azt-ad-fact dt { font: 600 11px/1.3 var(--azt-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ad-ink-3); }
.azt-ad-fact dd { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.azt-ad-fact .id { font-size: 12px; color: var(--ad-ink-3); }
.azt-ad-copy { border: 0; background: transparent; color: var(--ad-ink-3); padding: 2px 6px; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }
.azt-ad-copy:hover { background: var(--ad-surface-2); color: var(--ad-ink); }

.azt-ad-hint { font-size: 12px; color: var(--ad-ink-3); }

@media (max-width: 900px) {
  .azt-ad-cols { grid-template-columns: minmax(0, 1fr); }
  .azt-ad-rail { position: static; order: -1; }
  .azt-ad-head { grid-template-columns: auto minmax(0, 1fr); }
  .azt-ad-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .azt-ad-who h1 { font-size: 21px; }
  .azt-ad-avatar { width: 52px; height: 52px; font-size: 18px; }
  .azt-ad-actions .azt-ad-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) { .azt-ad-fill { transition: width .4s; } }

/* Assign plan dialog */
.azt-as-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.azt-as-caps { display: flex; flex-direction: column; border: 1px solid var(--azt-border); border-radius: var(--azt-radius-lg); margin-top: 8px; }
.azt-as-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--azt-border-hairline); }
.azt-as-cap:first-child { border-top: 0; }
.azt-as-cap.is-changed { background: var(--azt-near-white); box-shadow: inset 3px 0 0 var(--azt-slot-500); }
.azt-as-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.azt-as-limit { display: flex; align-items: center; gap: 12px; }
.azt-as-ctl { width: 120px; min-height: 40px; padding: 8px 10px; }
select.azt-as-ctl, button.azt-as-ctl { width: 200px; }
.azt-as-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 560px) {
  .azt-as-dates { grid-template-columns: 1fr; }
  .azt-as-cap { grid-template-columns: 1fr; }
}

.sub-timeline { position: relative; height: 28px; margin: 4px 0 14px; background: var(--ad-line, #eee); border-radius: 6px; overflow: hidden; }
.sub-timeline .sub-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; border-right: 1px solid #fff; background: var(--ad-ink-3, #888); color: #fff; box-sizing: border-box; }
.sub-timeline .sub-seg.ok { background: #2f855a; }
.sub-timeline .sub-seg.info { background: #3182ce; }
.sub-timeline .sub-seg.warn { background: #b7791f; }
.sub-timeline .sub-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #000; }