:root {
    --asv-panel-font-family: "Plus Jakarta Sans", "Segoe UI", Inter, Poppins, sans-serif;
    --asv-theme-font-family: var(--asv-panel-font-family);
    --asv-font-family: var(--asv-panel-font-family);
    --brand-primary: #1768e5;
    --brand-primary-strong: #1d4ed8;
    --brand-primary-soft: #edf4ff;
    --brand-primary-bright: #60a5fa;
    --brand-primary-border: #9bbcff;
    --brand-primary-subtle: #f7faff;
    --brand-on-primary: #ffffff;
    --brand-mascot-image: url('/images/mascote.svg');
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #eef3f8;
    --text: #111827;
    --muted: #64748b;
    --line: #dbe3ee;
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-strong);
    --accent: var(--brand-primary-strong);
    --warning: #d97706;
    --danger: #dc2626;
    --success: #16a34a;
    --shadow: 0 18px 55px rgba(15, 23, 42, .12);
}

/* Domínios públicos */
.app-layout.public-layout { display: block; grid-template-columns: minmax(0, 1fr); }
.public-layout > .public-main { width: 100%; min-width: 0; padding: 0; }
.domains-search-page { min-width: 0; overflow-x: clip; background: #f6f8fc; }
.domains-hero { position: relative; isolation: isolate; overflow: hidden; padding: 78px 24px 92px; color: #fff; background: #07132b; }
.domains-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.domains-hero-glow { position: absolute; z-index: -1; width: 620px; height: 620px; top: -360px; left: 50%; border-radius: 50%; background: var(--brand-primary); filter: blur(120px); opacity: .4; transform: translateX(-50%); }
.domains-hero-content { width: min(860px, 100%); margin: 0 auto; text-align: center; }
.domains-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; color: color-mix(in srgb, var(--brand-primary) 40%, #fff); border: 1px solid color-mix(in srgb, var(--brand-primary) 48%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 18%, transparent); font-size: 12px; font-weight: 850; letter-spacing: .04em; }
.domains-eyebrow svg { width: 15px; height: 15px; }
.domains-hero h1 { max-width: 760px; margin: 22px auto 14px; font-size: clamp(38px, 5.5vw, 64px); line-height: 1.03; letter-spacing: -.045em; }
.domains-hero-content > p { max-width: 650px; margin: 0 auto; color: #b9c5d8; font-size: 16px; line-height: 1.65; }
.domains-search-form { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; width: min(780px, 100%); min-height: 66px; margin: 34px auto 0; padding: 7px 7px 7px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.domains-search-icon { display: grid; place-items: center; color: var(--brand-primary); }
.domains-search-icon svg { width: 20px; height: 20px; }
.domains-search-form input { width: 100%; min-width: 0; height: 50px; padding: 0 10px; color: #111b30; border: 0; outline: 0; background: transparent; font-family: var(--asv-font-family); font-size: 16px; font-weight: 700; }
.domains-search-form input::placeholder { color: #8b97aa; font-weight: 600; }
.domains-search-form button { min-height: 50px; padding: 0 24px; color: var(--brand-on-primary); border: 0; border-radius: 9px; background: var(--brand-primary); font-family: var(--asv-font-family); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 30%, transparent); }
.domains-search-form button:hover { background: var(--brand-primary-strong); }
.domains-hero-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 22px; color: #aebbd0; font-size: 11px; font-weight: 750; }
.domains-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.domains-hero-trust svg { width: 14px; height: 14px; color: var(--brand-primary-bright); }
.domains-content { width: min(1180px, calc(100% - 40px)); margin: -34px auto 0; padding-bottom: 30px; position: relative; z-index: 2; }
.domains-results { margin-bottom: 26px; padding: 26px; border: 1px solid #e1e8f2; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(20,32,55,.09); }
.domains-results-header, .domains-tlds-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.domains-results-header small, .domains-tlds-header small { color: var(--brand-primary); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.domains-results-header h2, .domains-tlds-header h2 { margin: 5px 0 0; color: #111a2d; font-size: 23px; letter-spacing: -.025em; }
.domain-status-badge { padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 850; }
.domain-status-badge.is-error { color: #a62835; background: #fff0f1; }
.domains-results-grid { display: grid; gap: 10px; }
.domain-result-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-width: 0; padding: 18px; border: 1px solid #e4eaf3; border-radius: 12px; background: #fbfcfe; }
.domain-result-card.is-available { border-color: color-mix(in srgb, var(--brand-primary) 32%, #e4eaf3); background: var(--brand-primary-subtle); }
.domain-result-primary { display: flex; align-items: center; gap: 13px; min-width: 0; }
.domain-result-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: #758399; border-radius: 10px; background: #eef2f7; }
.is-available .domain-result-icon { color: var(--brand-primary); background: var(--brand-primary-soft); }
.domain-result-icon svg { width: 20px; height: 20px; }
.domain-result-primary > div { min-width: 0; }
.domain-name { display: block; overflow-wrap: anywhere; color: #111a2d; font-size: 18px; }
.domain-status { display: block; margin-top: 4px; color: #7b879a; font-size: 11px; font-weight: 750; }
.domain-status.is-available { color: var(--brand-primary-strong); }
.domain-result-meta { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; }
.domain-price { display: grid; justify-items: end; color: #69778c; font-size: 11px; font-style: normal; }
.domain-price small, .domain-price em { font-size: 9px; font-style: normal; font-weight: 650; }
.domain-price strong { color: #101a2d; font-size: 20px; line-height: 1.2; }
.domain-error { max-width: 300px; color: #9e3440; line-height: 1.4; }
.domains-tlds { padding: 34px 0 22px; }
.domains-content > .domains-tlds:first-child { padding-top: 68px; }
.domains-tlds-header p { max-width: 390px; margin: 0; color: #6c788b; font-size: 13px; text-align: right; }
.domains-tlds-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tld-card { position: relative; display: grid; min-width: 0; padding: 20px; border: 1px solid #e0e7f1; border-radius: 13px; background: #fff; box-shadow: 0 10px 30px rgba(24,37,61,.05); }
.tld-card > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--brand-primary); border-radius: 9px; background: var(--brand-primary-soft); }
.tld-card > span svg { width: 17px; height: 17px; }
.tld-card strong { margin-top: 0; color: #111a2d; font-size: 25px; letter-spacing: -.03em; }
.tld-card small { margin-top: 5px; color: #718096; font-size: 11px; }
.tld-card > a { position: absolute; top: 18px; right: 18px; display: grid; width: 30px; height: 30px; place-items: center; color: var(--brand-primary); border-radius: 8px; background: var(--brand-primary-subtle); transform: rotate(-90deg); }
.tld-card > a svg { width: 15px; height: 15px; }
.domains-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; overflow: hidden; border: 1px solid #e1e8f2; border-radius: 15px; background: #fff; }
.domains-benefits article { display: flex; align-items: center; gap: 13px; padding: 22px; }
.domains-benefits article + article { border-left: 1px solid #e8edf4; }
.domains-benefits article > span { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: var(--brand-primary); border-radius: 10px; background: var(--brand-primary-soft); }
.domains-benefits svg { width: 19px; height: 19px; }
.domains-benefits strong { display: block; color: #172033; font-size: 13px; }
.domains-benefits p { margin: 4px 0 0; color: #748095; font-size: 10px; line-height: 1.45; }

/* Gestão de preços de domínios */
.domain-modules-heading-actions { display: flex; align-items: center; gap: 12px; }
.domain-catalog-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 16px 0 24px; padding: 22px; }
.domain-catalog-page-heading > div { display: flex; align-items: center; gap: 14px; min-width: 0; }
.domain-catalog-page-heading > div > span { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; color: var(--brand-primary); border-radius: 12px; background: var(--brand-primary-soft); }
.domain-catalog-page-heading svg { width: 22px; height: 22px; }
.domain-catalog-page-heading small, .domain-catalog-page-heading h2 { display: block; }
.domain-catalog-page-heading small, .domain-catalog-section-heading small { color: var(--brand-primary); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.domain-catalog-page-heading h2 { margin: 3px 0; color: #172033; font-size: 20px; }
.domain-catalog-page-heading p { margin: 0; color: #738096; font-size: 11px; }
.domain-catalog-page-heading > strong { flex: 0 0 auto; padding: 8px 11px; color: var(--brand-primary); border-radius: 999px; background: var(--brand-primary-soft); font-size: 10px; }
.domain-provider-picker { display: grid; gap: 13px; }
.domain-catalog-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.domain-catalog-section-heading h2 { margin: 3px 0 0; color: #26344b; font-size: 16px; }
.domain-catalog-section-heading p { margin: 0; color: #7d899a; font-size: 10px; }
.domain-provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.domain-provider-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; align-items: center; gap: 13px; min-width: 0; padding: 16px; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.domain-provider-card:hover { border-color: var(--brand-primary-border); transform: translateY(-1px); }
.domain-provider-card.is-selected { border-color: var(--brand-primary-border); background: var(--brand-primary-subtle); box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.domain-provider-logo { display: grid; width: 48px; height: 48px; overflow: hidden; place-items: center; border-radius: 11px; background: var(--gateway-brand-background, var(--brand-primary-soft)); }
.domain-provider-logo img { width: 40px; height: 30px; object-fit: contain; }
.domain-provider-logo svg { width: 21px; height: 21px; color: var(--brand-primary); }
.domain-provider-card > span:nth-child(2) { min-width: 0; }
.domain-provider-card small, .domain-provider-card strong, .domain-provider-card em { display: block; }
.domain-provider-card small { color: var(--brand-primary); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.domain-provider-card strong { margin-top: 3px; color: #26344b; font-size: 13px; }
.domain-provider-card em { margin-top: 3px; overflow: hidden; color: #7d899a; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.domain-provider-card > i { display: grid; width: 28px; height: 28px; place-items: center; color: var(--brand-primary); border-radius: 8px; background: var(--brand-primary-soft); }
.domain-provider-card > i svg { width: 15px; height: 15px; }
.domain-tld-catalog-page .domain-pricing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.domain-tld-catalog-page .domain-pricing-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px 12px; padding: 14px; }
.domain-tld-catalog-page .domain-tld-identity { grid-column: 1; grid-row: auto; }
.domain-tld-catalog-page .domain-tld-identity strong { font-size: 17px; }
.domain-tld-catalog-page .domain-pricing-row > .btn { grid-column: 2; grid-row: 1; justify-self: end; width: max-content; }
.domain-tld-catalog-page .domain-price-summary, .domain-tld-catalog-page .domain-pricing-meta { padding: 9px 10px; border: 1px solid #e5ebf3; border-radius: 8px; background: #f8fafc; }
.domain-tld-catalog-page .domain-price-summary strong, .domain-tld-catalog-page .domain-pricing-meta strong { font-size: 11px; }
.domain-tld-catalog-page .domain-price-summary small, .domain-tld-catalog-page .domain-pricing-meta small { font-size: 8px; }
.domain-tld-catalog-page .domain-pricing-meta { grid-column: 2; }
.domain-pricing-console { display: grid; gap: 16px; margin-top: 22px; }
.domain-pricing-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border: 1px solid #dfe7f1; border-radius: 12px; background: #fff; }
.domain-pricing-heading > div { display: flex; align-items: center; gap: 14px; min-width: 0; }
.domain-pricing-heading > div > span { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; color: var(--brand-primary); border-radius: 11px; background: var(--brand-primary-soft); }
.domain-pricing-heading svg { width: 21px; height: 21px; }
.domain-pricing-heading small { color: var(--brand-primary); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.domain-pricing-heading h2 { margin: 3px 0; color: #172033; font-size: 19px; }
.domain-pricing-heading p { margin: 0; color: #738096; font-size: 11px; }
.domain-sync-form { display: flex; align-items: end; gap: 9px; }
.domain-sync-form label { display: grid; gap: 5px; color: #5f6d82; font-size: 9px; font-weight: 800; }
.domain-percent-input { display: grid; grid-template-columns: 70px 28px; align-items: center; overflow: hidden; border: 1px solid #dbe4ef; border-radius: 8px; background: #fff; }
.domain-percent-input input { width: 100%; height: 38px; padding: 0 9px; border: 0; outline: 0; }
.domain-percent-input b { color: #6e7b8f; font-size: 11px; }
.domain-pricing-search { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; width: min(520px, 100%); padding: 5px 5px 5px 12px; border: 1px solid #dfe7f1; border-radius: 9px; background: #fff; }
.domain-pricing-search svg { width: 16px; height: 16px; color: #8190a5; }
.domain-pricing-search input { min-width: 0; height: 36px; padding: 0 8px; border: 0; outline: 0; font-family: var(--asv-font-family); font-size: 11px; }
.domain-pricing-list { display: grid; gap: 9px; }
.domain-pricing-row { display: grid; grid-template-columns: minmax(125px, 1.1fr) repeat(3, minmax(120px, 1fr)) minmax(110px, .8fr) auto; align-items: center; gap: 12px; padding: 15px 16px; }
.domain-tld-identity { display: grid; align-self: stretch; align-content: center; min-width: 0; }
.domain-tld-identity strong { color: #172033; font-size: 18px; }
.domain-tld-identity small { margin: 3px 0 7px; color: #758298; font-size: 9px; }
.domain-tld-identity .gateway-state-pill { width: max-content; }
.domain-price-summary, .domain-pricing-meta { display: grid; min-width: 0; gap: 3px; padding-left: 12px; border-left: 1px solid #e7edf5; }
.domain-price-summary > span, .domain-pricing-meta > span { color: #7b8799; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.domain-price-summary strong, .domain-pricing-meta strong { overflow: hidden; color: #26344b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.domain-price-summary small, .domain-pricing-meta small { overflow: hidden; color: #8b97a8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.domain-pricing-row > .btn { white-space: nowrap; }
.domain-price-field { display: grid; gap: 4px; min-width: 0; color: #405069; font-size: 9px; font-weight: 850; }
.domain-price-field > small { overflow: hidden; color: #8995a6; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.domain-price-field > span:last-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 38px; overflow: hidden; border: 1px solid #dce5ef; border-radius: 7px; background: #fff; }
.domain-price-field.is-small > span:last-child { grid-template-columns: minmax(0, 1fr) auto; }
.domain-price-field b { padding: 0 8px; color: #7a879a; font-size: 9px; }
.domain-price-field input, .domain-year-range input { width: 100%; min-width: 0; height: 36px; padding: 0 7px; border: 0; outline: 0; font-family: var(--asv-font-family); font-size: 10px; font-weight: 750; }
.domain-price-field input[readonly] { color: #66748a; background: #f3f6f9; }
.domain-year-range { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.domain-year-range label { display: grid; gap: 4px; color: #66758b; font-size: 8px; font-weight: 800; }
.domain-year-range input { border: 1px solid #dce5ef; border-radius: 7px; }
.domain-pricing-options { display: grid; align-content: center; gap: 7px; min-height: 38px; }
.domain-pricing-options label { display: flex; align-items: center; gap: 6px; color: #536278; font-size: 9px; font-weight: 750; }
.domain-pricing-options input { accent-color: var(--brand-primary); }
.domain-pricing-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.domain-pricing-pagination > a, .domain-pricing-pagination > span { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; color: #526177; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; }
.domain-pricing-pagination > a:hover { color: var(--brand-primary); border-color: var(--brand-primary-border); background: var(--brand-primary-subtle); }
.domain-pricing-pagination > .is-disabled { color: #a0aaba; background: #f4f6f8; cursor: not-allowed; }
.domain-pricing-pagination > a svg, .domain-pricing-pagination > span svg { width: 14px; height: 14px; transform: rotate(90deg); }
.domain-pricing-pagination > .is-next svg { transform: rotate(-90deg); }
.domain-pagination-pages { display: flex; align-items: center; gap: 4px; }
.domain-pagination-pages > a, .domain-pagination-pages > span { display: grid; min-width: 34px; height: 34px; padding: 0 7px; place-items: center; color: #647287; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 800; }
.domain-pagination-pages > a:hover { color: var(--brand-primary); border-color: var(--brand-primary-border); background: var(--brand-primary-subtle); }
.domain-pagination-pages > .is-current { color: var(--brand-on-primary); border-color: var(--brand-primary); background: var(--brand-primary); }
.domain-price-dialog { width: min(720px, calc(100% - 32px)); }
.domain-price-dialog-form { display: flex; max-height: min(780px, calc(100vh - 40px)); flex-direction: column; }
.domain-price-dialog-heading > div { display: flex; align-items: center; gap: 13px; min-width: 0; }
.domain-price-dialog-heading > div > span, .domain-dialog-section-title > span { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: var(--brand-primary); border-radius: 10px; background: var(--brand-primary-soft); }
.domain-price-dialog-heading svg, .domain-dialog-section-title svg { width: 18px; height: 18px; }
.domain-price-dialog-heading small { color: var(--brand-primary); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.domain-price-dialog-heading h2 { margin: 3px 0; color: #172033; font-size: 19px; }
.domain-price-dialog-heading p { margin: 0; color: #738096; font-size: 10px; line-height: 1.45; }
.domain-price-dialog-body { gap: 16px; }
.domain-price-dialog-body > section { display: grid; gap: 13px; padding: 16px; border: 1px solid #e3eaf3; border-radius: 11px; background: #fbfcfe; }
.domain-dialog-section-title { display: flex; align-items: center; gap: 11px; }
.domain-dialog-section-title > span { flex-basis: 34px; width: 34px; height: 34px; border-radius: 8px; }
.domain-dialog-section-title strong, .domain-dialog-section-title small { display: block; }
.domain-dialog-section-title strong { color: #26344b; font-size: 12px; }
.domain-dialog-section-title small { margin-top: 2px; color: #8491a3; font-size: 9px; }
.domain-dialog-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.domain-dialog-rules { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; align-items: end; }
.domain-dialog-options { grid-template-columns: 1fr 1fr; }
.domain-dialog-options > label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid #e0e8f2; border-radius: 9px; background: #fff; cursor: pointer; }
.domain-dialog-options input { margin-top: 2px; accent-color: var(--brand-primary); }
.domain-dialog-options span, .domain-dialog-options strong, .domain-dialog-options small { display: block; min-width: 0; }
.domain-dialog-options strong { color: #344258; font-size: 10px; }
.domain-dialog-options small { margin-top: 3px; color: #8290a3; font-size: 8px; line-height: 1.4; }

@media (max-width: 1100px) {
    .domains-tlds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .domain-pricing-row { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
    .domain-tld-identity { grid-row: span 2; }
    .domain-pricing-row > .btn { grid-column: 3; }
    .domain-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .domain-tld-catalog-page .domain-pricing-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .domain-tld-catalog-page .domain-tld-identity { grid-column: 1; grid-row: auto; }
    .domain-tld-catalog-page .domain-pricing-row > .btn { grid-column: 2; }
}

@media (max-width: 860px) {
    .domain-tld-catalog-page .domain-pricing-list { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .domains-hero { padding: 52px 16px 72px; }
    .domains-hero h1 { font-size: clamp(34px, 11vw, 46px); }
    .domains-search-form { grid-template-columns: 25px minmax(0, 1fr); padding: 8px 10px 10px; }
    .domains-search-form button { grid-column: 1 / -1; width: 100%; }
    .domains-content { width: min(100% - 24px, 1180px); margin-top: -24px; }
    .domains-results { padding: 17px; border-radius: 13px; }
    .domains-results-header, .domains-tlds-header, .domain-result-card, .domain-result-meta { align-items: stretch; flex-direction: column; }
    .domain-result-meta { gap: 11px; }
    .domain-price { justify-items: start; }
    .domain-result-meta form, .domain-result-meta .btn { width: 100%; }
    .domains-tlds-header p { text-align: left; }
    .domains-tlds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tld-card { padding: 16px; }
    .tld-card strong { font-size: 21px; }
    .domains-benefits { grid-template-columns: 1fr; }
    .domains-benefits article + article { border-top: 1px solid #e8edf4; border-left: 0; }
    .domain-pricing-heading, .domain-sync-form { align-items: stretch; flex-direction: column; }
    .domain-modules-heading-actions, .domain-catalog-page-heading, .domain-catalog-section-heading { align-items: stretch; flex-direction: column; }
    .domain-modules-heading-actions .btn { width: 100%; }
    .domain-catalog-page-heading > strong { width: max-content; }
    .domain-provider-grid { grid-template-columns: 1fr; }
    .domain-sync-form .btn { width: 100%; }
    .domain-pricing-row { grid-template-columns: 1fr 1fr; }
    .domain-tld-identity { grid-row: auto; }
    .domain-tld-identity, .domain-pricing-row > .btn { grid-column: 1 / -1; }
    .domain-pricing-row > .btn { width: 100%; }
    .domain-tld-catalog-page .domain-pricing-row > .btn { grid-column: 2; width: max-content; }
    .domain-dialog-price-grid { grid-template-columns: 1fr; }
    .domain-dialog-rules, .domain-dialog-options { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .domains-tlds-grid, .domain-pricing-row { grid-template-columns: 1fr; }
    .domain-tld-identity, .domain-pricing-row > .btn { grid-column: 1; }
    .domain-tld-catalog-page .domain-pricing-row { grid-template-columns: 1fr; }
    .domain-tld-catalog-page .domain-tld-identity, .domain-tld-catalog-page .domain-price-summary, .domain-tld-catalog-page .domain-pricing-meta, .domain-tld-catalog-page .domain-pricing-row > .btn { grid-column: 1; grid-row: auto; }
    .domain-tld-catalog-page .domain-pricing-row > .btn { width: 100%; justify-self: stretch; }
    .domain-price-summary, .domain-pricing-meta { padding: 9px 0 0; border-top: 1px solid #e7edf5; border-left: 0; }
    .domain-price-dialog { width: calc(100% - 20px); max-height: calc(100vh - 20px); }
    .domain-price-dialog-form { max-height: calc(100vh - 20px); }
    .domain-price-dialog-heading { padding: 16px; }
    .domain-price-dialog-heading > div > span { display: none; }
    .domain-price-dialog-body { padding: 14px; }
    .domain-price-dialog-body > section { padding: 13px; }
    .domain-price-dialog .catalog-dialog-actions { flex-direction: column-reverse; padding: 13px 14px; }
    .domain-price-dialog .catalog-dialog-actions .btn { width: 100%; }
    .domain-pricing-pagination { justify-content: space-between; }
    .domain-pricing-pagination > a span, .domain-pricing-pagination > span > span { display: none; }
    .domain-pricing-pagination > a, .domain-pricing-pagination > span { min-width: 34px; padding: 0; justify-content: center; }
    .domain-pagination-pages > a, .domain-pagination-pages > span { min-width: 30px; height: 32px; padding: 0 5px; }
    .domains-hero-trust { justify-content: flex-start; text-align: left; }
}

* {
    box-sizing: border-box;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--asv-font-family);
    color: var(--text);
    background: var(--bg);
}

body.catalog-shell {
    --asv-font-family: var(--asv-theme-font-family);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: var(--asv-font-family);
}

.auth-page {
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 28%),
        linear-gradient(135deg, #eef7f5 0%, #f8fbff 46%, #edf3ff 100%);
}

.auth-wrap {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: stretch;
}

.auth-card,
.auth-hero,
.auth-panel,
.panel,
.stat-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(219, 227, 238, .9);
    box-shadow: var(--shadow);
}

.auth-card {
    width: min(460px, 100%);
    justify-self: center;
    padding: 34px;
    border-radius: 8px;
}

.auth-hero {
    min-height: 560px;
    padding: 54px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-hero h1,
.auth-card h1,
.topbar h1 {
    margin: 0;
    line-height: 1.04;
}

.auth-hero h1 {
    max-width: 720px;
    font-size: clamp(42px, 6vw, 74px);
}

.auth-card h1 {
    margin-top: 26px;
    font-size: 34px;
}

.auth-card p,
.lead {
    color: var(--muted);
    line-height: 1.7;
}

.lead {
    max-width: 620px;
    font-size: 18px;
}

.auth-panel {
    border-radius: 8px;
    padding: 24px;
    display: grid;
    gap: 18px;
    align-content: end;
    background: #0b1220;
    color: #fff;
}

.metric-card {
    padding: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 28%, transparent), rgba(217, 70, 239, .2));
    border: 1px solid rgba(255, 255, 255, .15);
}

.metric-card span,
.metric-card small,
.mini-grid span {
    color: rgba(255, 255, 255, .72);
}

.metric-card strong {
    display: block;
    margin: 10px 0;
    font-size: 44px;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mini-grid div {
    padding: 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
}

.mini-grid strong,
.mini-grid span {
    display: block;
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
}

.sidebar-brand-logo {
    display: block;
    width: 100%;
    max-width: 208px;
    height: auto;
}

.sidebar-brand-mark {
    display: none;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.btn,
.text-button {
    border: 0;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 800;
}

.btn.primary {
    color: var(--brand-on-primary);
    background: var(--primary);
}

/* Client notification center */
.client-notification-center {
    position: relative;
    z-index: 80;
}

.client-main .notification-action .notification-count,
.admin-main .notification-action .notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.client-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    overflow: hidden;
    color: #172033;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .16);
}

.client-notification-panel[hidden] {
    display: none;
}

.client-notification-panel > header {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5ebf3;
}

.client-notification-panel > header > div {
    display: grid;
    gap: 3px;
}

.client-notification-panel > header strong {
    font-size: 14px;
}

.client-notification-panel > header small {
    color: #68758a;
    font-size: 11px;
}

.client-notification-panel > header button {
    padding: 4px;
    color: var(--primary);
    border: 0;
    background: transparent;
    font-family: var(--asv-font-family);
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

.client-notification-list {
    max-height: 430px;
    overflow-y: auto;
}

.client-notification-item + .client-notification-item {
    border-top: 1px solid #edf1f6;
}

.client-notification-item button,
.client-notification-row button {
    width: 100%;
    color: inherit;
    border: 0;
    background: transparent;
    font-family: var(--asv-font-family);
    text-align: left;
    cursor: pointer;
}

.client-notification-item button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 7px;
    align-items: start;
    gap: 11px;
    padding: 13px 16px;
}

.client-notification-item.is-unread button {
    background: #f7faff;
}

.client-notification-item button:hover,
.client-notification-row button:hover {
    background: #f2f7ff;
}

.client-notification-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--primary);
    border-radius: 7px;
    background: #eaf2ff;
}

.client-notification-icon svg {
    width: 18px;
    height: 18px;
}

.client-notification-icon.tone-danger {
    color: #dc2626;
    background: #fff0f0;
}

.client-notification-icon.tone-warning {
    color: #b45309;
    background: #fff7e8;
}

.client-notification-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.client-notification-copy strong {
    color: #172033;
    font-size: 12px;
    font-weight: 750;
}

.client-notification-copy small {
    overflow: hidden;
    color: #68758a;
    font-size: 10px;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.client-notification-copy time {
    color: #8a97aa;
    font-size: 9px;
}

.client-notification-item button > i {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--primary);
}

.client-notification-item.is-read {
    opacity: .72;
}

.client-notification-panel > footer {
    padding: 11px 16px;
    border-top: 1px solid #e5ebf3;
    background: #fbfcfe;
    text-align: center;
}

.client-notification-panel > footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 750;
}

.client-notification-panel > footer svg {
    width: 14px;
    height: 14px;
}

.client-notification-empty,
.client-notifications-page-empty {
    display: grid;
    place-items: center;
    text-align: center;
}

.client-notification-empty {
    min-height: 220px;
    align-content: center;
    gap: 0;
    padding: 20px 28px 24px;
}

.client-notification-empty img {
    width: 78px;
    height: 82px;
    margin-bottom: -8px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 12px rgba(23, 104, 229, .24));
}

.client-notification-empty strong {
    font-size: 13px;
    line-height: 1.3;
}

.client-notification-empty small {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.35;
}

.client-notification-empty > span,
.client-notifications-page-empty > span {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 5px;
    place-items: center;
    color: #0f9f62;
    border-radius: 8px;
    background: #eafaf2;
}

.client-notification-empty small,
.client-notifications-page-empty p {
    color: #68758a;
}

.client-notifications-page {
    min-height: 100vh;
}

.client-notifications-card {
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.client-notifications-card > header {
    display: flex;
    min-height: 86px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.client-notifications-card > header > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-notifications-card > header > div > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--primary);
    border-radius: 7px;
    background: #eaf2ff;
}

.client-notifications-card h2 {
    margin: 0 0 3px;
    font-size: 16px;
}

.client-notifications-card p {
    margin: 0;
    color: #68758a;
    font-size: 11px;
}

.client-notifications-card .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.client-notification-row + .client-notification-row {
    border-top: 1px solid #e8edf4;
}

.client-notification-row button {
    display: grid;
    min-height: 82px;
    grid-template-columns: 42px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
}

.client-notification-row.is-unread button {
    box-shadow: inset 3px 0 0 var(--primary);
    background: #f8fbff;
}

.client-notification-row.is-read {
    opacity: .72;
}

.client-notification-row time {
    color: #7c899d;
    font-size: 10px;
    white-space: nowrap;
}

.client-notification-row button > svg {
    width: 16px;
    height: 16px;
    color: #8b98aa;
}

.client-notifications-page-empty {
    min-height: 340px;
    align-content: center;
    gap: 6px;
    padding: 40px 20px;
}

.client-notifications-page-empty h3 {
    margin: 0;
    font-size: 15px;
}

.client-notifications-page .panel-footer {
    margin-top: auto;
}

@media (max-width: 640px) {
    .client-notification-panel {
        position: fixed;
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 92px);
    }

    .client-notification-list {
        max-height: calc(100vh - 230px);
    }

    .client-notifications-card > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-notifications-card > header form,
    .client-notifications-card > header .btn {
        width: 100%;
    }

    .client-notification-row button {
        grid-template-columns: 38px minmax(0, 1fr) 16px;
        gap: 10px;
        padding: 14px;
    }

    .client-notification-row time {
        display: none;
    }
}

/* Client invoice checkout: payment methods are separate from technical gateways. */
.client-invoice-page .invoice-payment-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 18px;
}

.client-invoice-page .invoice-payment-facts > div {
    min-height: 96px;
    padding: 18px 22px;
}

.client-invoice-page .invoice-methods-card {
    padding: 24px;
}

.client-invoice-page .invoice-methods-card > header {
    padding: 0 0 18px;
}

.client-invoice-page .invoice-methods-card > header h2 {
    margin: 0 0 5px;
    font-size: 18px;
}

.client-invoice-page .invoice-methods-card > header p {
    margin: 0;
}

.client-invoice-page .invoice-method-grid {
    display: flex;
    gap: 10px;
    padding: 0;
}

.client-invoice-page .invoice-method-option {
    min-width: 0;
    min-height: 60px;
    flex: 1 1 0;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 7px;
    box-shadow: none;
}

.client-invoice-page .invoice-method-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.client-invoice-page .invoice-method-logo {
    width: 36px;
    height: 36px;
    padding: 8px;
    border: 0;
    background: #eef4ff;
}

.client-invoice-page .invoice-method-logo svg {
    width: 19px;
    height: 19px;
    color: var(--brand-primary);
}

.client-invoice-page .invoice-method-option strong {
    font-size: 12px;
}

.client-invoice-page .invoice-method-option small {
    display: none;
}

.client-invoice-page .invoice-method-option > i:last-child {
    width: 15px;
    height: 15px;
    border: 1px solid #b9c7d9;
}

.client-invoice-page .invoice-method-option:has(input:checked) > i:last-child {
    border: 4px solid var(--brand-primary);
    background: #fff;
}

.invoice-method-logo.method-pix {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    place-content: center;
    gap: 2px;
}

.invoice-method-logo.method-pix i {
    display: block;
    width: 7px;
    height: 7px;
    border: 2px solid var(--brand-primary);
    transform: rotate(45deg);
}

.invoice-method-panel {
    margin-top: 22px;
    padding-top: 21px;
    border-top: 1px solid var(--payment-line);
}

.invoice-method-panel[hidden] {
    display: none;
}

.invoice-method-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.invoice-method-panel-heading h3 {
    margin: 0;
    color: #111827;
    font-size: 16px;
}

.invoice-method-panel-heading p {
    margin: 5px 0 0;
    color: #65758f;
    font-size: 12px;
}

.invoice-method-panel-heading > small {
    max-width: 220px;
    padding-top: 2px;
    color: #7a879a;
    font-size: 10px;
    text-align: right;
}

.invoice-pix-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    margin-top: 18px;
}

.invoice-pix-qr {
    width: 220px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 1px solid #d8e2ee;
    border-radius: 7px;
    background: #fff;
}

.invoice-pix-qr img,
.invoice-pix-qr svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.invoice-pix-copy label,
.invoice-card-fields label > span {
    display: block;
    margin-bottom: 7px;
    color: #43536d;
    font-size: 11px;
    font-weight: 800;
}

.invoice-pix-copy > .invoice-copy-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.invoice-pix-copy input,
.invoice-card-fields input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    color: #172033;
    border: 1px solid #d7e1ed;
    border-radius: 7px;
    outline: none;
    background: #fff;
    font-family: var(--asv-font-family);
}

.invoice-pix-copy > .invoice-copy-control input {
    border-radius: 7px 0 0 7px;
}

.invoice-pix-copy button {
    min-width: 76px;
    color: var(--brand-primary);
    border: 1px solid #d7e1ed;
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: #f8fbff;
    font-weight: 800;
    cursor: pointer;
}

.invoice-pix-copy > p {
    min-height: 16px;
    margin: 6px 0 0;
    color: #188347;
    font-size: 10px;
}

.invoice-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 19px;
}

.invoice-card-fields label:first-child,
.invoice-card-fields label:nth-child(2) {
    grid-column: span 1;
}

.invoice-card-fields input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.invoice-payment-generation {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #dce5ef;
    border-radius: 7px;
    background: #f8fafc;
}

.invoice-payment-generation > div {
    min-width: 0;
    flex: 1 1 auto;
}

.invoice-payment-generation > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.invoice-payment-generation.is-loading > svg {
    animation: invoice-pix-loading 1s linear infinite;
}

@keyframes invoice-pix-loading {
    to { transform: rotate(360deg); }
}

.invoice-payment-generation strong {
    display: block;
    color: #172033;
    font-size: 12px;
}

.invoice-payment-generation p {
    margin: 4px 0 0;
    color: #65758f;
    font-size: 11px;
}

.invoice-payment-generation .invoice-generate-pix {
    flex: 0 0 auto;
    min-height: 38px;
    padding-inline: 17px;
    white-space: nowrap;
}

.client-invoice-page .invoice-awaiting-payment {
    margin-top: 14px;
}

.client-invoice-page .invoice-overdue-notice {
    margin-top: 20px;
}

.client-invoice-page .invoice-summary-service a {
    display: inline-block;
    margin-top: 7px;
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 800;
}

.client-invoice-page .invoice-download-button {
    min-height: 44px;
}

@media (max-width: 1060px) {
    .client-invoice-page .invoice-payment-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .client-invoice-page .invoice-method-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-method-panel-heading {
        display: grid;
        gap: 12px;
    }

    .invoice-method-panel-heading > small {
        max-width: none;
        text-align: left;
    }

    .client-invoice-page .invoice-provider-tools {
        width: 100%;
        max-width: none;
        align-items: stretch;
    }

    .client-invoice-page .invoice-gateway-select {
        width: 100%;
    }

    .client-invoice-page .invoice-provider-tools .invoice-provider-safe {
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
    }

    .invoice-pix-workspace,
    .invoice-card-fields {
        grid-template-columns: 1fr;
    }

    .invoice-pix-qr {
        width: min(220px, 100%);
    }
}

.btn.primary:hover {
    background: var(--primary-dark);
}

.btn.secondary {
    color: var(--text);
    background: var(--surface-soft);
}

.btn.compact {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 14px;
}

.btn.full {
    width: 100%;
}

.form-stack {
    display: grid;
    gap: 16px;
    margin-top: 22px;
}

.form-stack label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}

.form-stack label span {
    font-size: 14px;
}

.form-stack input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 14px;
    color: var(--text);
    background: #fff;
}

.form-stack select,
.form-stack textarea,
.ticket-update select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
}

.form-stack select,
.ticket-update select {
    height: 48px;
    padding: 0 14px;
}

.form-stack textarea {
    min-height: 130px;
    padding: 12px 14px;
    resize: vertical;
}

.form-stack select:focus,
.form-stack textarea:focus,
.ticket-update select:focus {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-color: var(--primary);
}

.form-stack input:focus {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-color: var(--primary);
}

.alert {
    padding: 12px 14px;
    margin-top: 18px;
    border-radius: 8px;
    color: #7f1d1d;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.toast-stack {
    position: relative;
    z-index: 20;
    width: 100%;
    display: grid;
    gap: 10px;
    margin: 14px 0 4px;
}

.toast-stack .alert {
    position: relative;
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 12px 58px 12px 20px;
    color: #172033;
    border: 1px solid #dce7f5;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    transform: translateY(-8px);
    animation: toast-in .22s ease forwards;
}

.toast-stack .alert::before {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 50%;
    background: var(--brand-primary-soft);
    content: "i";
    font-size: 16px;
    font-weight: 900;
}

.toast-stack .toast-message {
    min-width: 0;
    display: grid;
    gap: 3px;
    color: inherit;
    overflow-wrap: anywhere;
}

.toast-stack .toast-message strong {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

.toast-stack .toast-message small {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.toast-stack .error-alert {
    color: #991b1b;
    border-left-color: #dc2626;
    background: rgba(255, 250, 250, .98);
}

.toast-stack .error-alert::before {
    color: #b91c1c;
    background: #fee2e2;
    content: "!";
}

.toast-stack .warning-alert {
    color: #854d0e;
    border-left-color: #eab308;
    background: #fffef8;
}

.toast-stack .warning-alert::before {
    color: #a16207;
    background: #fef3c7;
    content: "i";
}

.toast-stack .success-alert {
    color: #14532d;
    border-left-color: #16a34a;
    background: rgba(249, 255, 251, .98);
}

.toast-stack .success-alert::before {
    color: #fff;
    background: #16a34a;
    box-shadow: 0 0 0 10px #edf9f0;
    content: "\2713";
    font-size: 17px;
}

.toast-close {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-50%);
}

.toast-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.toast-stack .alert.is-leaving {
    animation: toast-out .18s ease forwards;
}

@keyframes toast-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@media (max-width: 640px) {
    .toast-stack {
        margin-top: 10px;
    }

    .main-content .toast-stack .alert,
    .main-content .toast-stack .success-alert {
        min-height: 68px;
        gap: 12px;
        padding: 10px 46px 10px 14px;
    }

    .toast-stack .alert::before {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .toast-stack .success-alert::before {
        box-shadow: 0 0 0 6px #edf9f0;
    }

    .toast-stack .toast-message strong {
        font-size: 13px;
    }

    .toast-stack .toast-message small {
        font-size: 11px;
    }

    .toast-close {
        right: 10px;
    }
}

.text-link {
    display: inline-flex;
    margin-top: 22px;
    color: var(--primary);
    font-weight: 800;
}

.dashboard-shell {
    background: #eef2f7;
}

.app-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px 1fr;
    transition: grid-template-columns .22s ease;
}

.admin-layout {
    grid-template-columns: 280px minmax(0, 1fr);
}

.app-layout.sidebar-collapsed {
    grid-template-columns: 86px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 30px 22px 22px;
    color: var(--brand-primary-soft);
    background: #0f172a;
    display: flex;
    flex-direction: column;
    transition: padding .22s ease;
}

.admin-sidebar {
    overflow: visible;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-primary) 2%, rgba(15, 23, 42, .96)),
            color-mix(in srgb, var(--brand-primary) 1%, rgba(3, 7, 18, .98))
        ),
        #0f172a;
    border-right: 1px solid rgba(148, 163, 184, .18);
}

.admin-sidebar .sidebar-brand-logo {
    max-width: 190px;
    transform: translateX(-12px);
}

.admin-sidebar .sidebar-brand {
    justify-content: center;
}

.client-sidebar {
    overflow: visible;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand-primary) 2%, rgba(15, 23, 42, .96)),
            color-mix(in srgb, var(--brand-primary) 1%, rgba(3, 7, 18, .98))
        ),
        #0f172a;
    border-right: 1px solid rgba(148, 163, 184, .18);
}

.client-sidebar .sidebar-brand {
    justify-content: center;
}

.client-sidebar .sidebar-brand-logo {
    max-width: 190px;
    transform: translateX(-12px);
}

.sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 54px;
}

.sidebar-collapse-toggle {
    position: absolute;
    top: 34px;
    right: -15px;
    z-index: 35;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    color: rgba(226, 232, 240, .82);
    background: rgba(15, 23, 42, .72);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar-collapse-toggle:hover {
    color: #fff;
    background: color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

.sidebar-collapse-toggle svg {
    width: 17px;
    height: 17px;
    transform: rotate(90deg);
}

.sidebar-brand strong,
.sidebar-brand span {
    display: block;
}

.sidebar-brand strong {
    color: #fff;
    font-size: 16px;
}

.sidebar-brand span {
    margin-top: 2px;
    color: rgba(219, 234, 254, .62);
    font-size: 12px;
    font-weight: 700;
}

.side-nav {
    display: grid;
    gap: 8px;
    margin-top: 30px;
}

.side-nav a,
.side-nav-toggle,
.text-button {
    min-height: 44px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
}

.side-nav a,
.side-nav-toggle {
    position: relative;
    padding: 0 13px;
}

.side-nav-toggle {
    width: 100%;
    border: 0;
    cursor: pointer;
    text-align: left;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
}

.side-nav a.active,
.side-nav a:hover,
.side-nav-toggle.active,
.side-nav-toggle:hover,
.side-nav-toggle[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* Admin composed e-mails */
.admin-email-composer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    align-items: start;
    gap: 18px;
}

.admin-email-composer .email-template-editor-body {
    display: grid;
    gap: 18px;
}

.email-audience-summary,
.email-campaign-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 8px;
    background: var(--brand-primary-subtle);
}

.email-audience-summary > span {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-audience-summary > span svg {
    width: 20px;
    height: 20px;
}

.email-audience-summary > div,
.email-campaign-confirm > span {
    display: grid;
    gap: 3px;
}

.email-audience-summary small,
.email-campaign-confirm small {
    color: #71819b;
    font-size: 11px;
}

.email-campaign-confirm {
    cursor: pointer;
}

.email-campaign-confirm input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.email-campaign-history {
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
}

.email-campaign-list {
    display: grid;
}

.email-campaign-list article {
    display: grid;
    grid-template-columns: 38px minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid #e7edf6;
}

.email-campaign-list article > span {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-campaign-list article > span svg {
    width: 18px;
    height: 18px;
}

.email-campaign-list article > div {
    display: grid;
    gap: 3px;
}

.email-campaign-list article small {
    color: #71819b;
    font-size: 10px;
}

.email-campaign-list dl {
    display: flex;
    gap: 20px;
    margin: 0;
}

.email-campaign-list dl div {
    display: grid;
    gap: 2px;
}

.email-campaign-list dt {
    color: #71819b;
    font-size: 9px;
    text-transform: uppercase;
}

.email-campaign-list dd {
    margin: 0;
    font-weight: 800;
}

.campaign-status {
    padding: 5px 9px;
    border-radius: 999px;
    color: #526078;
    background: #eef2f7;
    font-size: 10px;
    font-weight: 800;
}

.campaign-status.status-completed {
    color: #087a49;
    background: #dcfce7;
}

@media (max-width: 1100px) {
    .admin-email-composer-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .email-campaign-list article {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .email-campaign-list dl {
        grid-column: 2 / -1;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .email-campaign-list article {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .email-campaign-list .campaign-status,
    .email-campaign-list dl {
        grid-column: 2;
        justify-self: start;
    }
}

.admin-notification-center .notification-action {
    position: relative;
}

.side-nav > a.active::before,
.side-nav-toggle.active::before {
    position: absolute;
    left: -22px;
    width: 4px;
    height: 24px;
    border-radius: 999px;
    background: var(--primary);
    content: "";
}

.side-nav svg,
.text-button svg,
.icon-action svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: currentColor;
}

.lucide-icon {
    fill: none !important;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.side-nav a.active svg,
.side-nav-toggle.active > svg:first-child,
.side-nav-toggle[aria-expanded="true"] > svg:first-child {
    color: var(--brand-primary);
}

.side-nav-group {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.submenu-chevron {
    width: 15px !important;
    height: 15px !important;
    margin-left: auto;
    color: rgba(255, 255, 255, .45);
    transition: transform .2s ease;
}

.side-nav-group.open .submenu-chevron {
    transform: rotate(180deg);
}

.side-submenu {
    position: relative;
    display: grid;
    gap: 5px;
    margin: 0 0 4px 22px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--brand-primary-bright) 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 2%, rgba(8, 15, 31, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.side-submenu::before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -12px;
    width: 1px;
    background: color-mix(in srgb, var(--brand-primary-bright) 30%, transparent);
    content: '';
}

.side-submenu[hidden] {
    display: none;
}

.side-submenu a {
    min-height: 54px;
    gap: 10px;
    padding: 8px 9px;
    color: rgba(226, 232, 240, .7);
}

.side-submenu a:hover,
.side-submenu a.active {
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.side-submenu a.active {
    color: #fff;
    box-shadow: inset 2px 0 0 var(--brand-primary-bright);
}

.side-submenu a::before {
    display: none;
}

.side-submenu a > svg {
    width: 17px;
    height: 17px;
    color: var(--brand-primary-bright);
}

.side-submenu a span,
.side-submenu a strong,
.side-submenu a small {
    display: block;
    min-width: 0;
}

.side-submenu a strong {
    font-size: 11px;
    font-weight: 750;
}

.side-submenu a small {
    margin-top: 2px;
    color: rgba(203, 213, 225, .48);
    font-size: 9px;
    font-weight: 600;
}

.sidebar-footer {
    margin-top: auto;
}

.app-layout.sidebar-collapsed .sidebar {
    padding: 30px 14px 18px;
    z-index: 60;
}

.app-layout.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 8px;
    min-height: auto;
    margin-bottom: 12px;
}

.app-layout.sidebar-collapsed .sidebar-brand-logo {
    display: none;
}

.app-layout.sidebar-collapsed .sidebar-brand-mark {
    display: block;
    width: 34px;
    height: 34px;
    margin-inline: auto;
    transform: none;
}

.app-layout.sidebar-collapsed .sidebar-collapse-toggle {
    position: static;
    width: 32px;
    height: 32px;
    transform: none;
}

.app-layout.sidebar-collapsed .sidebar-collapse-toggle svg {
    transform: rotate(-90deg);
}

.app-layout.sidebar-collapsed .side-nav {
    justify-items: center;
    margin-top: 0;
}

.app-layout.sidebar-collapsed .side-nav a,
.app-layout.sidebar-collapsed .side-nav-toggle,
.app-layout.sidebar-collapsed .text-button {
    width: 46px;
    min-height: 46px;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.app-layout.sidebar-collapsed .side-nav a span,
.app-layout.sidebar-collapsed .side-nav-toggle span,
.app-layout.sidebar-collapsed .text-button span,
.app-layout.sidebar-collapsed .submenu-chevron {
    display: none !important;
}

.app-layout.sidebar-collapsed .side-nav-group {
    position: relative;
}

.app-layout.sidebar-collapsed .side-submenu {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    z-index: 90;
    width: 226px;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 2%, rgba(15, 23, 42, .98));
    box-shadow: 0 18px 42px rgba(15, 23, 42, .26);
}

.app-layout.sidebar-collapsed .side-submenu[hidden] {
    display: none !important;
}

.app-layout.sidebar-collapsed .side-submenu::before {
    top: 17px;
    bottom: auto;
    left: -5px;
    width: 10px;
    height: 10px;
    background: color-mix(in srgb, var(--brand-primary) 2%, rgba(15, 23, 42, .98));
    border-left: 1px solid rgba(148, 163, 184, .22);
    border-bottom: 1px solid rgba(148, 163, 184, .22);
    transform: rotate(45deg);
}

.app-layout.sidebar-collapsed .side-submenu a {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
}

.app-layout.sidebar-collapsed .side-submenu a span,
.app-layout.sidebar-collapsed .side-submenu a strong,
.app-layout.sidebar-collapsed .side-submenu a small {
    display: block !important;
}

.app-layout.sidebar-collapsed .side-nav > a.active::before,
.app-layout.sidebar-collapsed .side-nav-toggle.active::before {
    left: -14px;
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip] {
    position: relative;
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip]::after,
.app-layout.sidebar-collapsed [data-sidebar-tooltip]::before {
    position: absolute;
    top: 50%;
    left: calc(100% + 14px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity .16s ease, transform .16s ease;
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip]::after {
    z-index: 80;
    min-width: max-content;
    max-width: 220px;
    padding: 9px 11px;
    color: #fff;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 8px;
    background: rgba(15, 23, 42, .96);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .22);
    content: attr(data-sidebar-tooltip);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip]::before {
    z-index: 81;
    width: 9px;
    height: 9px;
    margin-left: -5px;
    background: rgba(15, 23, 42, .96);
    border-left: 1px solid rgba(148, 163, 184, .2);
    border-bottom: 1px solid rgba(148, 163, 184, .2);
    content: "";
    transform: translate(-4px, -50%) rotate(45deg);
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip]:hover::after,
.app-layout.sidebar-collapsed [data-sidebar-tooltip]:focus-visible::after,
.app-layout.sidebar-collapsed [data-sidebar-tooltip]:hover::before,
.app-layout.sidebar-collapsed [data-sidebar-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
}

.app-layout.sidebar-collapsed [data-sidebar-tooltip]:hover::before,
.app-layout.sidebar-collapsed [data-sidebar-tooltip]:focus-visible::before {
    transform: translate(0, -50%) rotate(45deg);
}

.app-layout.sidebar-collapsed [data-submenu-toggle][aria-expanded="true"]::after,
.app-layout.sidebar-collapsed [data-submenu-toggle][aria-expanded="true"]::before {
    display: none;
}

.app-layout.sidebar-collapsed .sidebar-collapse-toggle[data-sidebar-tooltip]::after,
.app-layout.sidebar-collapsed .sidebar-collapse-toggle[data-sidebar-tooltip]::before {
    left: calc(100% + 12px);
}

.text-button {
    width: 100%;
    padding: 0 13px;
    background: transparent;
}

.main-content {
    padding: 32px;
}

.admin-main {
    --dashboard-line: #dfe6f1;
    --dashboard-muted: #68758a;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(238, 242, 247, 0) 300px),
        #eef2f7;
}

.client-main {
    --client-line: #dfe6f1;
    --client-muted: #68758a;
    display: flex;
    min-height: 100vh;
    min-width: 0;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(238, 242, 247, 0) 300px),
        #eef2f7;
}

.client-topbar {
    min-height: 58px;
    margin-bottom: 24px;
}

.client-profile {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.client-profile .user-details {
    min-width: 0;
}

.client-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.client-summary-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    overflow: hidden;
    color: #111827;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.client-summary-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.client-summary-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--brand-primary);
    content: "";
}

.client-summary-card:nth-child(2)::after {
    background: var(--brand-primary-strong);
}

.client-summary-card:nth-child(3)::after {
    background: var(--brand-primary-strong);
}

.client-summary-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.client-summary-card:nth-child(2) .client-summary-icon {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.client-summary-card:nth-child(3) .client-summary-icon {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.admin-orders .orders-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 18px 0;
}

.order-summary-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px 14px;
    padding: 18px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.order-summary-card svg {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    padding: 10px;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.order-summary-card span,
.orders-table small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.order-summary-card strong {
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
}

.orders-directory {
    overflow: hidden;
}

.status.neutral {
    color: #475569;
    background: #eef2f7;
}

.orders-list {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-top: 1px solid #e8eff7;
}

.order-showcase-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) minmax(290px, 360px);
    gap: 0;
    overflow: hidden;
    border: 1px solid #d6e3f3;
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 34%),
        #ffffff;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .08);
}

.order-showcase-card::after {
    position: absolute;
    left: 78px;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 18%, transparent));
    content: "";
}

.order-showcase-rail {
    min-height: 168px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        linear-gradient(180deg, var(--brand-primary-strong) 0%, var(--brand-primary) 100%);
}

.order-showcase-rail span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
    font-size: 13px;
    font-weight: 900;
}

.order-showcase-main {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 24px;
    padding: 22px 26px;
}

.order-showcase-header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.order-showcase-header > div {
    min-width: 0;
}

.order-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.order-showcase-header h3 {
    margin: 0;
    color: #071329;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-showcase-flow {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(34px, 1fr) minmax(120px, auto) minmax(34px, 1fr) minmax(130px, auto);
    align-items: center;
    gap: 10px;
}

.flow-step {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 5px 10px;
}

.flow-step > span {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border: 1px solid #cfe0ff;
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.flow-step svg {
    width: 16px;
    height: 16px;
}

.flow-step strong,
.flow-step small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flow-step strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.flow-step small,
.order-showcase-client small,
.order-showcase-money small {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.flow-line {
    height: 2px;
    min-width: 34px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 72%, transparent), color-mix(in srgb, var(--brand-primary) 12%, transparent));
}

.order-showcase-aside {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 22px;
    border-left: 1px solid #e3ebf6;
    background:
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.order-showcase-client {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3ebf6;
}

.order-showcase-client span:last-child {
    min-width: 0;
}

.order-showcase-client strong,
.order-showcase-client small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-showcase-client strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.order-showcase-money {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.order-showcase-money span {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.order-showcase-money strong {
    color: #071329;
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
}

@media (max-width: 1280px) {
    .order-showcase-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .order-showcase-card::after {
        left: 64px;
    }

    .order-showcase-aside {
        grid-column: 2;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-top: 1px solid #e3ebf6;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .admin-orders .orders-summary,
    .order-showcase-card,
    .order-showcase-flow,
    .order-showcase-aside {
        grid-template-columns: 1fr;
    }

    .order-showcase-rail {
        min-height: 54px;
    }

    .order-showcase-card::after {
        left: 0;
    }

    .order-showcase-flow {
        align-items: stretch;
    }

    .flow-line {
        display: none;
    }

    .orders-list {
        padding: 14px;
    }
}

.order-records-list {
    gap: 10px;
    padding: 18px 20px 22px;
}

.order-record-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, .85fr) minmax(390px, 1.45fr) minmax(128px, auto);
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid #dce6f2;
    border-left: 4px solid var(--brand-primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .055);
}

.order-record-primary,
.order-record-client,
.order-record-info,
.order-info-block,
.order-record-total {
    min-width: 0;
}

.order-record-primary {
    display: grid;
    gap: 5px;
}

.order-record-id,
.order-info-block > span,
.order-record-total > span {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.order-record-primary > strong {
    color: #071329;
    font-size: 16px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-record-primary > small,
.order-record-client small,
.order-info-block small,
.order-record-total small {
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
}

.order-record-client {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e3ebf6;
    border-radius: 8px;
    background: #f8fbff;
}

.order-record-client span:last-child {
    min-width: 0;
}

.order-record-client strong,
.order-record-client small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-record-client strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
}

.order-record-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.order-info-block {
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #e5edf7;
    border-radius: 8px;
    background: #fbfdff;
}

.order-info-block > strong {
    min-width: 0;
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.order-info-block .status {
    max-width: 100%;
    justify-content: center;
}

.order-record-total {
    display: grid;
    justify-items: end;
    gap: 5px;
}

.order-record-total strong {
    color: #071329;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}

@media (max-width: 1360px) {
    .order-record-card {
        grid-template-columns: minmax(220px, 1fr) minmax(220px, .9fr) minmax(128px, auto);
    }

    .order-record-info {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .order-record-card,
    .order-record-info {
        grid-template-columns: 1fr;
    }

    .order-record-total {
        justify-items: start;
    }
}

.orders-history-page {
    padding: 38px 46px;
    background:
        radial-gradient(circle at 76% 0%, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.orders-history-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #d9e3f0;
}

.orders-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #24324a;
    font-size: 14px;
    font-weight: 850;
}

.orders-breadcrumb a {
    color: var(--brand-primary);
}

.orders-breadcrumb span {
    color: #94a3b8;
}

.orders-history-page .topbar-actions {
    gap: 14px;
}

.orders-search {
    width: min(360px, 38vw);
}

.orders-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 42px 0 28px;
}

.orders-history-heading h1,
.orders-history-heading p {
    margin: 0;
}

.orders-history-heading h1 {
    color: #071329;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 900;
}

.orders-history-heading p {
    margin-top: 10px;
    color: #53647f;
    font-size: 14px;
    font-weight: 650;
}

.orders-history-heading > strong {
    color: #53647f;
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

.orders-alert {
    width: fit-content;
    max-width: 100%;
    margin: -8px 0 20px;
}

.toast-stack .orders-alert {
    width: auto;
    margin: 0;
}

.orders-bulk-form {
    display: grid;
    gap: 16px;
}

.orders-bulk-actions {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: center;
}

.order-action {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #1f2a44;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
    cursor: pointer;
    font-weight: 750;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.order-action svg { width: 16px; height: 16px; }

.order-action:not(:disabled):hover {
    border-color: color-mix(in srgb, currentColor 34%, #d7e1ee);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

.order-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); outline-offset: 2px; }

.order-action.accept {
    color: var(--brand-on-primary);
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.order-action.cancel {
    color: #42526b;
    background: #fff;
}

.order-action.delete {
    color: #fff;
    border-color: #dc3545;
    background: #dc3545;
}

.order-action:disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: .42;
}

.orders-history-panel {
    overflow: hidden;
    border: 1px solid #d9e3f0;
    border-left: 3px solid var(--brand-primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .075);
}

.orders-history-columns {
    display: grid;
    grid-template-columns: 38px minmax(150px, 1.2fr) minmax(116px, .78fr) minmax(128px, .86fr) minmax(142px, .95fr) minmax(84px, .55fr) minmax(122px, .82fr) minmax(130px, .9fr) minmax(116px, auto);
    align-items: center;
    gap: 22px;
    min-height: 50px;
    padding: 0 22px;
    color: #6b7890;
    border-bottom: 1px solid #e6edf6;
    background: #fbfdff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.orders-history-list {
    display: grid;
}

.orders-history-list > .empty-state {
    min-width: 0;
    margin: 0;
    padding: 22px;
    overflow-wrap: anywhere;
}

.orders-history-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(150px, 1.2fr) minmax(116px, .78fr) minmax(128px, .86fr) minmax(142px, .95fr) minmax(84px, .55fr) minmax(122px, .82fr) minmax(130px, .9fr) minmax(116px, auto);
    align-items: center;
    gap: 22px;
    min-height: 112px;
    padding: 0 22px;
    border-bottom: 1px solid #dfe7f2;
    transition: background .16s ease;
}

.orders-history-row:hover {
    background: #fbfdff;
}

.orders-history-row:last-child {
    border-bottom: 0;
}

.order-row-number {
    color: var(--brand-primary);
    font-size: 17px;
    font-weight: 900;
}

.order-row-select {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.order-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.order-row-service,
.order-row-field,
.order-row-value {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.order-row-service strong {
    color: #071329;
    font-size: 16px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-row-service small,
.order-row-field span,
.order-row-value span {
    color: #53647f;
    font-size: 12px;
    font-weight: 750;
}

.order-row-field > span,
.order-row-value > span {
    display: none;
}

.order-row-field strong,
.order-row-value strong {
    min-width: 0;
    color: #071329;
    font-size: 14px;
    font-weight: 900;
}

.order-row-field .status {
    min-height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.status.pending {
    color: #b7791f;
    background: #fef3c7;
}

.order-row-payment-method strong,
.order-row-field .with-icon,
.order-row-details {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.method-mark {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 6px;
}

.method-empty {
    border: 1px dashed #b8c6d9;
    background: #f4f7fb;
}

.order-row-field .with-icon svg {
    width: 16px;
    height: 16px;
    color: #365179;
}

.order-row-value {
    min-height: 44px;
    align-content: center;
    padding-left: 24px;
    border-left: 1px solid #d9e3f0;
}

.order-row-value strong {
    font-size: 16px;
    white-space: nowrap;
}

.order-row-value small {
    color: #071329;
    font-size: 13px;
    font-weight: 800;
}

.order-row-details {
    justify-self: end;
    min-height: 40px;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.order-row-details:hover {
    color: var(--brand-primary-strong);
}

.order-row-details svg,
.orders-pagination svg {
    width: 17px;
    height: 17px;
    transform: rotate(-90deg);
}

.orders-history-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 32px;
    color: #53647f;
    font-size: 13px;
    font-weight: 700;
}

.orders-pagination {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.orders-pagination a,
.orders-pagination span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #d9e3f0;
    border-radius: 8px;
    background: #fff;
    color: #94a3b8;
    font-weight: 850;
}

.orders-pagination .prev svg {
    transform: rotate(90deg);
}

.orders-pagination .next svg {
    transform: rotate(-90deg);
}

.orders-pagination a.active {
    color: var(--brand-primary);
    border-color: var(--brand-primary-border);
    font-weight: 900;
}

.orders-pagination .disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 1440px) {
    .orders-history-columns,
    .orders-history-row {
        grid-template-columns: 34px minmax(140px, 1.1fr) minmax(104px, .72fr) minmax(112px, .78fr) minmax(128px, .88fr) minmax(76px, .52fr) minmax(112px, .76fr) minmax(120px, .84fr) minmax(106px, auto);
        gap: 12px;
    }
}

@media (max-width: 1180px) {
    .orders-history-row {
        grid-template-columns: 42px minmax(0, 1fr) minmax(160px, auto);
        min-height: auto;
        padding: 18px 20px;
    }

    .orders-history-columns {
        display: none;
    }

    .order-row-field,
    .order-row-value {
        grid-column: 2;
    }

    .order-row-field > span,
    .order-row-value > span {
        display: block;
    }

    .order-row-details {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .order-row-value {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .orders-history-page {
        padding: 22px 16px;
    }

    .orders-history-topbar,
    .orders-history-heading,
    .orders-history-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .orders-search {
        width: 100%;
    }

    .orders-history-row {
        grid-template-columns: 1fr;
    }

    .order-row-details,
    .order-row-field,
    .order-row-value {
        grid-column: auto;
    }
}

.client-summary-icon svg {
    width: 18px;
    height: 18px;
}

.client-summary-copy,
.client-summary-copy small,
.client-summary-copy strong,
.client-summary-copy > span {
    display: block;
    min-width: 0;
}

.client-summary-copy small {
    color: #4b5870;
    font-size: 12px;
    font-weight: 750;
}

.client-summary-copy strong {
    margin: 8px 0 3px;
    font-size: 27px;
    line-height: 1;
}

.client-summary-copy > span {
    color: var(--client-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.client-workspace-panel {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    scroll-margin-top: 20px;
}

.client-section-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
    border-bottom: 1px solid #e8edf4;
}

.client-section-header > div,
.client-section-title {
    min-width: 0;
    display: flex;
    align-items: center;
}

.client-section-header > div {
    gap: 11px;
}

.client-section-title {
    display: block;
}

.client-section-header h2,
.client-section-header p {
    margin: 0;
}

.client-section-header h2 {
    color: #182135;
    font-size: 15px;
    font-weight: 750;
}

.client-section-header p {
    margin-top: 3px;
    color: var(--client-muted);
    font-size: 11px;
}

.client-section-header > strong {
    flex: 0 0 auto;
    color: var(--client-muted);
    font-size: 11px;
}

.client-service-list,
.client-invoice-list {
    display: grid;
    padding: 0 18px;
}

.client-service-row,
.client-invoice-row {
    min-width: 0;
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid #edf1f6;
}

.client-service-row:last-child,
.client-invoice-row:last-child {
    border-bottom: 0;
}

.client-service-row {
    grid-template-columns: 36px minmax(0, 1fr) auto minmax(100px, auto);
}

.client-invoice-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(100px, auto);
}

a.client-invoice-row {
    color: inherit;
    text-decoration: none;
    outline: none;
}

a.client-invoice-row:hover,
a.client-invoice-row:focus-visible {
    background: #f8fbff;
}

a.client-invoice-row:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.service-product-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.service-product-icon svg {
    width: 17px;
    height: 17px;
}

.service-product-main,
.client-invoice-row > div {
    min-width: 0;
}

.service-product-main strong,
.service-product-main span,
.client-invoice-row > div strong,
.client-invoice-row > div span {
    display: block;
}

.service-product-main strong,
.client-invoice-row > div strong {
    color: #182135;
    font-size: 13px;
}

.service-product-main span,
.client-invoice-row > div span {
    margin-top: 4px;
    color: var(--client-muted);
    font-size: 11px;
}

.service-product-price,
.client-invoice-row > strong {
    color: #111827;
    font-size: 13px;
    text-align: right;
    white-space: nowrap;
}

.client-dashboard {
    padding: 34px 42px 28px;
    background:
        radial-gradient(circle at 62% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.client-dashboard .client-topbar {
    margin-bottom: 30px;
}

.client-dashboard .page-heading h1 {
    font-size: 32px;
    letter-spacing: 0;
}

.client-dashboard .page-heading p {
    margin: 10px 0 0;
    color: #40506b;
    font-weight: 650;
}

.client-profile-menu {
    min-height: 48px;
    padding-block: 7px;
    border: 1px solid #dbe5f1;
    background: rgba(255, 255, 255, .88);
    cursor: pointer;
}

.client-profile-menu .user-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.client-profile-menu .user-details strong {
    font-size: 14px;
    line-height: 1.15;
}

.client-profile-menu .user-details small {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.15;
}

.client-account-menu {
    position: relative;
}

.client-account-menu.open .client-profile-menu > svg:last-child {
    transform: rotate(180deg);
}

.client-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 220px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.client-account-dropdown[hidden] {
    display: none;
}

.client-account-dropdown a,
.client-account-dropdown button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: #172033;
    background: transparent;
    cursor: pointer;
    font-family: var(--asv-font-family);
    font-size: 13px;
    font-weight: 800;
    text-align: left;
}

.client-account-dropdown a:hover,
.client-account-dropdown button:hover {
    color: var(--primary);
    background: var(--surface-soft);
}

.client-account-dropdown svg {
    width: 17px;
    height: 17px;
}

.client-profile-menu > svg {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #23324c;
}

.client-topbar-actions {
    align-items: center;
    gap: 10px;
}

.client-main .notification-action {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: #23324c;
    border-color: #dbe5f1;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.client-main .notification-action:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

.client-metric-grid {
    gap: 18px;
    margin-bottom: 24px;
}

.client-metric-card {
    min-height: 138px;
    align-items: center;
    padding: 26px 28px;
    border-color: #dae4f0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.client-metric-card .client-summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
}

.client-metric-card .client-summary-icon svg {
    width: 26px;
    height: 26px;
}

.client-metric-card .client-summary-copy small {
    color: #53647f;
    font-size: 12px;
    text-transform: uppercase;
}

.client-metric-card .client-summary-copy strong {
    margin: 9px 0 6px;
    color: #101827;
    font-size: 28px;
}

.metric-sparkline {
    width: 96px;
    height: 42px;
    margin-left: auto;
    border-radius: 50%;
    border-bottom: 3px solid var(--brand-primary);
    border-right: 3px solid transparent;
    transform: rotate(-10deg);
}

.client-metric-card:nth-child(2) .metric-sparkline {
    border-bottom-color: var(--brand-primary-strong);
}

.client-metric-card:nth-child(3) .metric-sparkline {
    border-bottom-color: var(--brand-primary-strong);
}

.client-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 20px;
    align-items: start;
}

.client-dashboard-main,
.client-dashboard-side {
    display: grid;
    gap: 18px;
}

.client-dashboard .client-workspace-panel {
    margin-top: 0;
    border-color: #dce6f2;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.client-dashboard .client-section-header {
    min-height: 60px;
    padding: 20px 24px 12px;
    border-bottom: 0;
}

.client-dashboard .client-section-header h2 {
    color: #111827;
    font-size: 18px;
}

.client-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.client-panel-link svg,
.featured-service-meta .btn svg,
.next-billing-card .btn svg,
.quick-action-grid a > svg:last-child,
.client-dashboard-invoices > .client-invoice-row > svg:last-child {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
}

.client-add-service-link svg {
    transform: none;
}

.featured-service-card {
    margin: 0 24px 24px;
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background:
        radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 28%),
        #fff;
}

.featured-service-head {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 108px;
    padding: 12px 20px;
}

.featured-service-icon {
    width: 92px;
    height: 88px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.featured-service-icon svg {
    width: 34px;
    height: 34px;
}

.featured-service-head h3,
.featured-service-head p {
    margin: 0;
}

.featured-service-head h3 {
    font-size: 22px;
}

.featured-service-head p {
    margin-top: 8px;
    color: #44546f;
    font-weight: 700;
}

.featured-service-head div > span {
    display: block;
    margin-top: 4px;
    color: #6b7890;
    font-size: 12px;
}

.featured-service-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, auto);
    gap: 18px;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e6edf6;
    background: rgba(248, 251, 255, .78);
}

.featured-service-meta > div {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.featured-service-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #65758f;
    font-size: 12px;
}

.featured-service-meta span svg {
    width: 15px;
    height: 15px;
}

.featured-service-meta strong {
    color: #172033;
}

.featured-service-meta .btn {
    min-height: 42px;
    gap: 8px;
}

.client-dashboard-invoices {
    padding: 0 24px 14px;
}

.client-dashboard-invoices .client-invoice-row {
    grid-template-columns: 38px minmax(0, 1fr) auto minmax(96px, auto) 18px;
    padding: 13px 0;
}

.client-dashboard-invoices a.client-invoice-row {
    margin-inline: -12px;
    padding-inline: 12px;
    border-radius: 8px;
}

.admin-auth {
    background: #edf3f9;
}

.admin-auth .auth-wrap {
    width: min(470px, 100%);
    display: block;
}

.admin-login-card {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 1px solid #d6e1ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 35, 63, .14);
}

.admin-login-brand {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 30px;
    color: #fff;
    background: #07132b;
}

.admin-login-brand img {
    display: block;
    width: 142px;
    max-height: 46px;
    object-fit: contain;
}

.admin-login-brand span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-login-brand svg {
    width: 14px;
    height: 14px;
}

.admin-login-body {
    display: grid;
    gap: 24px;
    padding: 30px;
}

.admin-login-heading small {
    display: block;
    margin-bottom: 8px;
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-card .admin-login-heading h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 0;
}

.admin-login-heading p {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.admin-login-form {
    margin: 0;
    gap: 15px;
}

.admin-login-form label > span {
    font-size: 12px;
    font-weight: 850;
}

.admin-login-form input {
    min-height: 46px;
    background: #f8fbff;
}

.admin-login-form input:focus {
    background: #fff;
}

.admin-login-form .input-with-icon input {
    padding-left: 42px;
}

.admin-login-form .password-field input {
    padding-left: 42px;
    padding-right: 52px;
}

.admin-login-alert {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.admin-login-options {
    display: flex;
    justify-content: flex-end;
    margin-top: -5px;
}

.admin-login-options a,
.admin-password-back a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.admin-login-options a:hover,
.admin-password-back a:hover {
    text-decoration: underline;
}

.admin-login-options a:focus-visible,
.admin-password-back a:focus-visible {
    outline: 3px solid var(--brand-primary-soft);
    outline-offset: 3px;
    border-radius: 4px;
}

.admin-login-form .btn {
    min-height: 46px;
    margin-top: 3px;
    gap: 8px;
}

.admin-login-form .btn svg {
    width: 17px;
    height: 17px;
}

.admin-password-card .admin-login-body {
    gap: 20px;
}

.admin-password-back {
    display: flex;
    justify-content: center;
}

.admin-password-back svg {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}

.admin-password-request-again {
    min-height: 46px;
    gap: 8px;
}

.admin-password-request-again svg {
    width: 17px;
    height: 17px;
}

.admin-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 18px;
    color: #6c7d94;
    border-top: 1px solid #e6edf5;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.admin-login-footer svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.invoice-status-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
}

.invoice-status-icon svg {
    width: 17px;
    height: 17px;
}

.invoice-status-icon.status-paid {
    color: #16a34a;
    background: #dcfce7;
}

.invoice-status-icon.status-open {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.invoice-status-icon.status-overdue {
    color: #dc2626;
    background: #fee2e2;
}

.next-billing-card,
.quick-actions-panel {
    container-type: inline-size;
    padding-bottom: 24px;
}

.next-billing-content {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 76px;
    gap: 18px;
    align-items: center;
    padding: 12px 24px 18px;
}

.next-billing-content time {
    width: 64px;
    height: 68px;
    display: grid;
    place-items: center;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.next-billing-content time strong,
.next-billing-content time span,
.next-billing-content div strong,
.next-billing-content div span {
    display: block;
}

.next-billing-content time strong {
    font-size: 24px;
    line-height: 1;
}

.next-billing-content time span {
    margin-top: -10px;
    font-size: 11px;
    font-weight: 800;
}

.next-billing-content div strong {
    color: #172033;
}

.next-billing-content div span {
    margin-top: 7px;
    color: #40506b;
    font-size: 13px;
}

.billing-illustration {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    color: var(--brand-primary-strong);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-primary-soft), #dbe7ff);
    transform: rotate(8deg);
}

.billing-illustration svg {
    width: 38px;
    height: 38px;
}

.next-billing-value {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 0 24px 24px;
}

.next-billing-value span {
    color: #65758f;
}

.next-billing-value strong {
    font-size: 20px;
}

.next-billing-card .btn {
    width: calc(100% - 48px);
    margin: 0 24px;
    gap: 8px;
    border: 1px solid #dbe5f1;
    color: var(--primary);
    background: #fff;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 8px 24px 0;
}

.quick-action-grid a {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    grid-template-rows: auto auto;
    gap: 3px 12px;
    align-content: center;
    padding: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.quick-action-grid a > svg:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 38px;
    height: 38px;
    padding: 9px;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.quick-action-grid a:nth-child(1) > svg:first-child,
.quick-action-grid a:nth-child(4) > svg:first-child {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.quick-action-grid a:nth-child(2) > svg:first-child {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.quick-action-grid strong,
.quick-action-grid span {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.quick-action-grid strong {
    grid-row: 1;
    color: #111827;
    font-size: 13px;
    line-height: 1.25;
}

.quick-action-grid span {
    grid-row: 2;
    color: #65758f;
    font-size: 12px;
    line-height: 1.35;
}

.quick-action-grid a > svg:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    color: #334155;
}

@container (max-width: 460px) {
    .quick-action-grid {
        grid-template-columns: 1fr;
    }
}

.panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding: 28px 2px 0;
    color: #64748b;
    font-size: 12px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 28px;
}

.topbar h1 {
    font-size: 34px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-action {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #334155;
    background: #fff;
}

.icon-action:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.user-chip {
    min-width: 220px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
}

.user-chip span,
.user-chip small {
    display: block;
}

.user-chip small,
.stat-card small,
.client-row span,
.invoice-row span {
    color: var(--muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.client-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat-card,
.panel {
    border-radius: 8px;
}

.stat-card {
    padding: 22px;
}

.stat-card.featured {
    color: #fff;
    border-color: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    background: var(--primary);
}

.stat-card.featured span,
.stat-card.featured small {
    color: rgba(255, 255, 255, .76);
}

.stat-card span,
.stat-card small,
.stat-card strong {
    display: block;
}

.stat-card span {
    color: var(--muted);
    font-weight: 700;
}

.stat-card strong {
    margin: 12px 0 6px;
    font-size: 28px;
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
    gap: 16px;
    margin-top: 16px;
}

.panel {
    padding: 22px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.panel-header h2 {
    margin: 0;
    font-size: 22px;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 14px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 13px;
}

/* Settings hub and company branding */
.settings-hub {
    gap: 26px;
}

.settings-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.settings-search svg {
    width: 20px;
    height: 20px;
    color: #64748b;
}

.settings-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #0f172a;
    background: transparent;
    font-family: var(--asv-font-family);
}

.settings-search > span {
    padding: 5px 8px;
    border: 1px solid #dbe5f2;
    border-radius: 5px;
    color: #64748b;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 800;
}

.settings-category-section > h2 {
    margin: 0 0 16px;
    color: #334155;
    font-size: 14px;
}

.settings-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.settings-category-card {
    display: flex;
    overflow: hidden;
    min-width: 0;
    min-height: 224px;
    flex-direction: column;
    padding: 22px 20px 0;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    color: inherit;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
    text-decoration: none;
}

a.settings-category-card {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

a.settings-category-card:hover,
a.settings-category-card:focus-visible {
    border-color: var(--brand-primary-border);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-primary) 10%, transparent);
    transform: translateY(-2px);
}

.settings-category-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.settings-category-icon svg {
    width: 24px;
    height: 24px;
}

.settings-category-card > strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.25;
}

.settings-category-card > p {
    margin: 7px 0 16px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.settings-category-card footer {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    margin: auto -20px 0;
    padding: 0 20px;
    border-top: 1px solid #e7edf6;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
}

.settings-category-card footer i {
    display: inline-flex;
    color: var(--brand-primary);
    font-style: normal;
    transform: rotate(-90deg);
}

.settings-category-card footer svg {
    width: 17px;
    height: 17px;
}

.settings-search-empty {
    margin-top: 18px;
}

.settings-area-page {
    align-content: start;
}

.settings-area-placeholder {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 22px;
}

.settings-area-placeholder .settings-category-icon {
    margin: 0;
}

.settings-area-placeholder h2 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 17px;
}

.settings-area-placeholder p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.settings-area-status {
    padding: 7px 10px;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 11px;
    font-weight: 800;
}

.settings-quick-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 18px;
}

.settings-quick-panel {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.settings-quick-panel > header {
    min-height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid #e7edf6;
}

.settings-quick-panel > header,
.settings-quick-panel > header span,
.settings-quick-panel > a,
.settings-current-brand-body {
    display: flex;
    align-items: center;
}

.settings-quick-panel > header span {
    gap: 8px;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}

.settings-quick-panel > header svg,
.settings-quick-panel > a > svg {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}

.settings-quick-panel > a {
    gap: 12px;
    min-height: 66px;
    margin: 0 20px;
    border-bottom: 1px solid #e7edf6;
    color: inherit;
    text-decoration: none;
}

.settings-quick-panel > a:last-child {
    border-bottom: 0;
}

.settings-quick-panel > a > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.settings-quick-panel > a strong {
    color: #172033;
    font-size: 13px;
}

.settings-quick-panel > a small {
    overflow: hidden;
    color: #71819b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-quick-panel > a i {
    display: inline-flex;
    margin-left: auto;
    color: #64748b;
    transform: rotate(-90deg);
}

.settings-quick-panel > a i svg {
    width: 16px;
    height: 16px;
}

.settings-current-brand-body {
    gap: 14px;
    padding: 20px;
}

.settings-current-brand-body > span {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #0b1427;
}

.settings-current-brand-body img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.settings-current-brand-body > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.settings-current-brand-body strong {
    color: #0f172a;
    font-size: 16px;
}

.settings-current-brand-body small {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-current-brand > p {
    margin: 0 20px 20px;
    padding: 12px 14px;
    border: 1px solid #dfe7f2;
    border-radius: 6px;
    color: #64748b;
    background: #f8fafc;
    font-size: 12px;
}

.settings-current-brand > p strong {
    color: var(--brand-primary);
}

.settings-current-brand > .settings-admin-path-secret {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 5px;
}

.settings-admin-path-secret [data-admin-path-value] {
    display: inline-block;
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    transition: filter .16s ease;
}

.settings-admin-path-secret.is-revealed [data-admin-path-value] {
    filter: none;
    pointer-events: auto;
    user-select: text;
}

.settings-admin-path-secret button {
    display: inline-flex;
    width: 28px;
    height: 28px;
    margin-left: auto;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
}

.settings-admin-path-secret button:hover,
.settings-admin-path-secret button:focus-visible {
    color: var(--brand-primary);
    background: #eaf2ff;
    outline: none;
}

.settings-admin-path-secret button svg {
    width: 16px;
    height: 16px;
}

.settings-admin-path-hide,
.settings-admin-path-secret.is-revealed .settings-admin-path-show {
    display: none;
}

.settings-admin-path-secret.is-revealed .settings-admin-path-hide {
    display: inline-flex;
}

.settings-back-link {
    align-self: flex-start;
}

.company-settings-form {
    display: grid;
    gap: 18px;
}

.company-settings-section {
    overflow: hidden;
    padding: 0;
}

.company-settings-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid #e7edf6;
}

.company-settings-section-header > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.company-settings-section-header svg {
    width: 21px;
    height: 21px;
}

.company-settings-section-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
}

.company-settings-section-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.company-settings-fields {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.company-settings-fields.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-settings-fields + .company-settings-fields {
    padding-top: 0;
}

.field-group {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
}

.field-group > input,
.admin-path-input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #0f172a;
    background: #fff;
}

.field-group > input {
    padding: 0 13px;
    font-family: var(--asv-font-family);
}

.field-group > input:focus,
.admin-path-input:focus-within {
    border-color: var(--brand-primary-border);
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.field-error {
    color: #c3273f;
    font-size: 11px;
    font-weight: 700;
}

.brand-upload-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, .9fr));
    gap: 16px;
    padding: 22px;
}

.brand-upload-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px dashed #b7cae4;
    border-radius: 8px;
    background: #fbfdff;
    cursor: pointer;
}

.brand-upload-card:focus-within,
.brand-upload-card:hover {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
}

.brand-upload-preview {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #0b1427;
}

.brand-upload-preview img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.brand-upload-preview.is-wide img {
    width: 48px;
}

.brand-upload-preview.is-mascot img {
    width: 46px;
    height: 50px;
}

.brand-upload-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.brand-upload-copy strong {
    color: #0f172a;
    font-size: 13px;
}

.brand-upload-copy small {
    color: #71819b;
    font-size: 10px;
    line-height: 1.35;
}

.brand-upload-action {
    grid-column: 1 / -1;
    padding: 9px 10px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    color: var(--brand-primary);
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.brand-upload-card > input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.brand-upload-card > .field-error {
    grid-column: 1 / -1;
}

.brand-color-setting {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr);
    align-items: center;
    gap: 28px;
    padding: 22px;
}

.brand-color-control {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.brand-color-picker {
    display: grid;
    gap: 8px;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
}

.brand-color-swatch {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
    overflow: hidden;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    background: var(--brand-primary);
    cursor: pointer;
}

.brand-color-swatch::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 4px;
    pointer-events: none;
}

.brand-color-swatch input {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.brand-color-hex input {
    text-transform: uppercase;
}

.brand-color-preview {
    display: grid;
    grid-template-columns: 42px minmax(130px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #d7e1ee);
    border-left: 3px solid var(--brand-primary);
    border-radius: 7px;
    background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

.brand-color-preview-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.brand-color-preview-icon svg {
    width: 20px;
    height: 20px;
}

.brand-color-preview > span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.brand-color-preview small {
    color: #71819b;
    font-size: 10px;
    font-weight: 750;
}

.brand-color-preview strong {
    color: #172033;
    font-size: 14px;
}

.brand-color-preview > a {
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.brand-color-preview .btn {
    min-height: 40px;
    pointer-events: none;
}

.landing-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
}

.landing-template-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.landing-template-card:hover,
.landing-template-card:focus-within,
.landing-template-card:has(input:checked) {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
}

.landing-template-card:has(input:checked) {
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.landing-template-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.landing-template-card-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.landing-template-card-icon svg {
    width: 20px;
    height: 20px;
}

.landing-template-card-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.landing-template-card-copy strong {
    color: #0f172a;
    font-size: 14px;
}

.landing-template-card-copy small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.landing-template-card-copy > span {
    color: #7b8aa2;
    font-size: 10px;
    font-weight: 700;
}

.landing-template-state {
    align-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-size: 10px;
    font-weight: 800;
}

.landing-template-card.is-unavailable {
    cursor: not-allowed;
    opacity: .64;
}

.landing-template-card > .field-error {
    grid-column: 1 / -1;
}

.landing-template-assistant-action {
    display: flex;
    justify-content: flex-end;
    margin: 0 22px 14px;
}

.landing-template-assistant-action .btn {
    min-height: 42px;
}

.landing-template-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 22px 22px;
    padding: 12px 14px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #52627b;
    background: #f8fafc;
}

.landing-template-help > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.landing-template-help p {
    display: grid;
    gap: 3px;
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

.landing-template-help strong {
    color: #172033;
    font-size: 12px;
}

.landing-template-help code {
    color: #172033;
    font-size: 10px;
    font-weight: 800;
}

.admin-path-setting {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(320px, 1.25fr);
    align-items: end;
    gap: 18px;
    padding: 22px 22px 14px;
}

.admin-path-input {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    overflow: hidden;
}

.admin-path-input i {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d7e1ee;
    color: #64748b;
    background: #f8fafc;
    font-style: normal;
    font-size: 15px;
}

.admin-path-input input {
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 12px;
    color: #0f172a;
    background: transparent;
    font-family: var(--asv-font-family);
}

.admin-path-preview {
    display: flex;
    min-width: 0;
    min-height: 64px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    background: #f8fafc;
}

.admin-path-preview > svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.admin-path-preview > span {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.admin-path-preview small {
    color: #64748b;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.admin-path-preview strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-security-note {
    margin: 0 22px 20px;
    padding: 10px 12px;
    border-left: 3px solid var(--brand-primary);
    color: #52627b;
    background: var(--brand-primary-subtle);
    font-size: 11px;
    line-height: 1.5;
}

.company-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 28px;
}

.company-settings-actions .btn {
    min-height: 42px;
}

@media (max-width: 1180px) {
    .settings-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .brand-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-color-setting {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .settings-category-grid,
    .settings-quick-grid,
    .company-settings-fields.two-columns,
    .admin-path-setting,
    .brand-color-control {
        grid-template-columns: 1fr;
    }

    .settings-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .brand-upload-grid {
        grid-template-columns: 1fr;
    }

    .landing-template-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .settings-hub {
        gap: 20px;
    }

    .settings-search > span {
        display: none;
    }

    .settings-search {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .settings-category-grid {
        grid-template-columns: 1fr;
    }

    .settings-category-card {
        min-height: 205px;
    }

    .settings-area-placeholder {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .settings-area-status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .company-settings-section-header,
    .company-settings-fields,
    .brand-upload-grid,
    .brand-color-setting,
    .landing-template-grid,
    .admin-path-setting {
        padding-right: 16px;
        padding-left: 16px;
    }

    .brand-color-preview {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .brand-color-preview > a,
    .brand-color-preview .btn {
        display: none;
    }

    .company-settings-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .company-settings-actions .btn {
        width: 100%;
    }

    .landing-template-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .landing-template-state {
        grid-column: 2;
        justify-self: start;
    }

    .landing-template-help {
        margin-right: 16px;
        margin-left: 16px;
    }
}

/* Financial settings and gateway portal */
.financial-settings-page,
.payment-methods-page {
    gap: 20px;
}

.financial-settings-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 24px;
    border-top: 3px solid var(--brand-primary);
}

.financial-overview-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

.financial-overview-heading > span,
.payment-methods-heading > div > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.financial-overview-heading svg,
.payment-methods-heading svg {
    width: 23px;
    height: 23px;
}

.financial-overview-heading small,
.payment-methods-heading small {
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 850;
}

.financial-overview-heading h2,
.payment-methods-heading h2 {
    margin: 4px 0 5px;
    color: #0f172a;
    font-size: 21px;
}

.financial-overview-heading p,
.payment-methods-heading p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}

.financial-overview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    margin: 0;
    border: 1px solid #e0e8f3;
    border-radius: 7px;
    background: #f8fafc;
}

.financial-overview-stats > div {
    min-width: 130px;
    padding: 13px 16px;
    border-right: 1px solid #e0e8f3;
}

.financial-overview-stats > div:last-child {
    border-right: 0;
}

.financial-overview-stats dt {
    color: #71819b;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.financial-overview-stats dd {
    margin: 5px 0 0;
    color: #172033;
    font-size: 17px;
    font-weight: 850;
}

.financial-settings-directory {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
}

.financial-settings-directory > header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 22px;
    border-bottom: 1px solid #e7edf6;
}

.financial-settings-directory h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.financial-settings-directory header p {
    margin: 4px 0 0;
    color: #71819b;
    font-size: 11px;
}

.financial-settings-directory > header > span,
.payment-methods-heading > strong {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.financial-settings-list {
    display: grid;
}

.financial-settings-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    min-height: 88px;
    padding: 15px 22px;
    border-bottom: 1px solid #edf1f6;
}

.financial-settings-row:last-child {
    border-bottom: 0;
}

a.financial-settings-row {
    color: inherit;
    transition: background .18s ease;
}

a.financial-settings-row:hover,
a.financial-settings-row:focus-visible {
    outline: 0;
    background: var(--brand-primary-subtle);
}

.financial-row-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 7px;
    color: #71819b;
    background: #f1f5f9;
}

.financial-settings-row.is-primary .financial-row-icon {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.financial-row-icon svg {
    width: 19px;
    height: 19px;
}

.financial-row-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.financial-row-copy strong {
    color: #172033;
    font-size: 13px;
}

.financial-row-copy small {
    color: #71819b;
    font-size: 11px;
    line-height: 1.45;
}

.financial-row-meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.financial-row-meta i {
    padding: 5px 9px;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.financial-row-meta b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-primary);
    font-size: 11px;
    white-space: nowrap;
}

.financial-row-meta b svg {
    width: 15px;
    height: 15px;
    transform: rotate(-90deg);
}

.payment-methods-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid #dfe7f2;
}

.payment-methods-heading > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.payment-methods-heading .management-development-control {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.management-development-control > strong {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.management-development-control form {
    margin: 0;
}

.management-development-control .btn {
    white-space: nowrap;
}

.gateway-tabs {
    display: flex;
    width: fit-content;
    gap: 4px;
    padding: 4px;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    background: #f8fafc;
}

.gateway-tabs a {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 5px;
    color: #63738d;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
}

.gateway-tabs a:hover,
.gateway-tabs a.is-active {
    color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 2px 8px rgba(28, 53, 88, 0.08);
}

.gateway-tabs a.is-active {
    box-shadow: inset 0 -2px 0 var(--brand-primary), 0 2px 8px rgba(28, 53, 88, 0.08);
}

.gateway-tabs strong {
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 999px;
    color: #52627b;
    background: #edf2f8;
    font-size: 9px;
}

.gateway-tabs a.is-active strong {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.module-directory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.module-search-box {
    position: relative;
    display: flex;
    width: min(310px, 38vw);
    height: 44px;
    align-items: center;
}

.module-search-box > svg {
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    color: #718096;
    pointer-events: none;
}

.module-search-box input {
    width: 100%;
    height: 100%;
    padding: 0 38px 0 39px;
    border: 1px solid #d4dfed;
    border-radius: 7px;
    outline: 0;
    color: #25324a;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.module-search-box input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.module-search-box input::placeholder { color: #8a98ac; }

.module-search-box button {
    position: absolute;
    right: 7px;
    display: none;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #607088;
    background: #f0f4f9;
    cursor: pointer;
    font-size: 17px;
}

.module-search-box button[data-visible] { display: grid; }
.module-search-box button svg { width: 15px; height: 15px; }
.module-search-empty { margin-top: 14px; }

.gateway-module-card[hidden],
.gateway-module-grid[hidden],
.module-search-empty[hidden] {
    display: none !important;
}

@media (max-width: 680px) {
    .module-directory-toolbar { align-items: stretch; flex-direction: column; }
    .module-search-box { width: 100%; }
}

/* Payment policy settings */
.payments-settings-page { gap: 20px; }
.payments-settings-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 22px;
    border-top: 3px solid var(--brand-primary);
}
.payments-settings-intro-copy,
.payments-settings-section-head,
.payments-gateway-link { display: flex; align-items: center; gap: 14px; }
.payments-settings-intro-copy > span,
.payments-settings-section-head > span,
.payments-gateway-link > span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}
.payments-settings-intro-copy svg,
.payments-settings-section-head svg,
.payments-gateway-link > span svg { width: 21px; height: 21px; }
.payments-settings-intro-copy small { color: var(--brand-primary); font-size: 10px; font-weight: 850; }
.payments-settings-intro h2,
.payments-settings-section h2,
.payments-gateway-link h2 { margin: 3px 0 4px; color: #0f172a; font-size: 17px; }
.payments-settings-intro p,
.payments-settings-section-head p,
.payments-gateway-link p { margin: 0; color: #71819b; font-size: 11px; line-height: 1.5; }
.payments-settings-intro dl { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); margin: 0; border: 1px solid #e0e8f3; border-radius: 7px; overflow: hidden; }
.payments-settings-intro dl div { padding: 11px 14px; border-right: 1px solid #e0e8f3; background: #f8fafc; }
.payments-settings-intro dl div:last-child { border-right: 0; }
.payments-settings-intro dt { color: #71819b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.payments-settings-intro dd { margin: 4px 0 0; color: #172033; font-size: 16px; font-weight: 850; }
.payments-settings-form { display: grid; gap: 16px; }
.payments-settings-section { overflow: hidden; padding: 0; }
.payments-settings-section-head { padding: 17px 20px; border-bottom: 1px solid #e4ebf4; }
.payments-currency-field { width: min(100%, 560px); padding: 18px 20px 21px; }
.payments-currency-field select {
    width: 100%;
    min-height: 42px;
    padding: 0 40px 0 12px;
    color: #172033;
    border: 1px solid #cfdaea;
    border-radius: 7px;
    outline: 0;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 700;
}
.payments-currency-field select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.payments-cycle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; }
.payments-cycle-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 15px; border: 1px solid #dfe7f2; border-radius: 8px; background: #fff; transition: border-color .18s ease, background .18s ease; }
.payments-cycle-card.is-active { border-color: #a9c8fa; background: var(--brand-primary-subtle); }
.payments-cycle-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.payments-cycle-toggle input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand-primary); }
.payments-cycle-toggle span { display: grid; min-width: 0; gap: 3px; }
.payments-cycle-toggle strong { color: #172033; font-size: 13px; }
.payments-cycle-toggle small { color: #71819b; font-size: 10px; line-height: 1.4; }
.payments-cycle-multiplier { display: flex; align-items: center; gap: 7px; color: #52627a; font-size: 11px; }
.payments-cycle-multiplier svg { width: 15px; height: 15px; color: var(--brand-primary); }
.payments-discount-field { display: grid; gap: 6px; margin-top: auto; color: #52627a; font-size: 10px; font-weight: 750; }
.payments-discount-field > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) 34px; border: 1px solid #cfdaea; border-radius: 7px; overflow: hidden; background: #fff; }
.payments-discount-field input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 0; outline: 0; color: #172033; font-family: var(--asv-font-family); font-size: 12px; }
.payments-discount-field i { display: grid; place-items: center; border-left: 1px solid #e0e8f3; color: #64748b; font-style: normal; }
.payments-monthly-note { display: flex; align-items: center; gap: 7px; margin-top: auto; color: #16834b; font-size: 10px; font-weight: 750; }
.payments-monthly-note svg { width: 15px; height: 15px; }
.payments-proration-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin: 18px 20px 20px;
    padding: 15px;
    border: 1px solid #dfe7f2;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.payments-proration-option.is-active { border-color: var(--brand-primary-border); background: var(--brand-primary-subtle); }
.payments-proration-option:has(input:focus-visible) { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.payments-proration-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.payments-proration-check {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #8190a6;
    background: #f0f4f9;
}
.payments-proration-check svg { width: 20px; height: 20px; }
.payments-proration-option.is-active .payments-proration-check { color: var(--brand-primary); background: var(--brand-primary-soft); }
.payments-proration-copy { display: grid; gap: 4px; min-width: 0; }
.payments-proration-copy strong { color: #172033; font-size: 13px; }
.payments-proration-copy small { color: #71819b; font-size: 11px; line-height: 1.45; }
.payments-proration-copy em { color: #52627a; font-size: 10px; font-style: normal; font-weight: 750; }
.payments-proration-example { display: grid; gap: 4px; min-width: 180px; padding: 11px 13px; border-left: 1px solid #dfe7f2; }
.payments-proration-example small { color: #71819b; font-size: 9px; font-weight: 800; }
.payments-proration-example strong { color: #172033; font-size: 13px; }
.payments-gateway-link { padding: 16px 20px; }
.payments-gateway-link div { min-width: 0; flex: 1; }
.payments-gateway-link .btn { flex: 0 0 auto; }
.payments-settings-actions { margin-top: 0; }
.product-monthly-price-editor { grid-template-columns: minmax(0, 520px); }
.product-monthly-price-editor .product-billing-toggle { grid-template-columns: minmax(0, 1fr); }
.product-price-preview > a {
    display: block;
    padding: 10px 12px;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: var(--brand-primary-subtle);
}
.product-price-preview > a:hover { border-color: var(--brand-primary-border); }
@media (max-width: 1080px) {
    .payments-settings-intro { grid-template-columns: 1fr; }
    .payments-cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .payments-settings-intro { padding: 18px 16px; }
    .payments-settings-intro dl { grid-template-columns: 1fr; }
    .payments-settings-intro dl div { border-right: 0; border-bottom: 1px solid #e0e8f3; }
    .payments-settings-intro dl div:last-child { border-bottom: 0; }
    .payments-cycle-grid { grid-template-columns: 1fr; padding: 15px; }
    .payments-settings-section-head { align-items: flex-start; padding: 15px; }
    .payments-currency-field { padding: 15px; }
    .payments-proration-option { grid-template-columns: 42px minmax(0, 1fr); margin: 15px; }
    .payments-proration-example { grid-column: 1 / -1; min-width: 0; padding: 11px 0 0; border-top: 1px solid #dfe7f2; border-left: 0; }
    .payments-gateway-link { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
    .payments-gateway-link div { flex-basis: calc(100% - 58px); }
    .payments-gateway-link .btn { width: 100%; }
    .product-monthly-price-editor { grid-template-columns: 1fr; }
}

.gateway-module-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.gateway-module-card {
    display: grid;
    flex: 1 1 calc((100% - 28px) / 3);
    min-width: 0;
    min-height: 278px;
    grid-template-rows: 68px auto auto auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: #dbe4f0;
    box-shadow: 0 14px 34px rgba(30, 54, 90, 0.08);
}

.gateway-module-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gateway-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--gateway-brand-background, #f4f7fb);
}

.gateway-brand::after {
    position: absolute;
    right: -34px;
    bottom: -72px;
    width: 190px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    content: "";
}

.gateway-brand img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    max-width: 140px;
    height: 30px;
    object-fit: contain;
}

.gateway-module-mercado-pago .gateway-brand img {
    max-width: 150px;
    height: 44px;
}

.gateway-brand > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: rgba(8, 27, 65, 0.18);
}

.gateway-brand i {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 999px;
    color: #101828;
    background: rgba(255, 255, 255, 0.78);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.gateway-module-content {
    padding: 14px 16px 11px;
}

.gateway-module-content > small {
    display: block;
    margin-bottom: 5px;
    color: var(--brand-primary);
    font-size: 8px;
    font-weight: 800;
}

.gateway-module-card h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 15px;
}

.gateway-module-card p {
    margin: 0;
    color: #71819b;
    font-size: 10px;
    line-height: 1.5;
}

.gateway-module-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

.gateway-module-card li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    color: #40516d;
    background: var(--brand-primary-subtle);
    font-size: 8px;
    font-weight: 750;
}

.gateway-feature-pix img {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    object-fit: contain;
}

.gateway-feature-pill.gateway-feature-pix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.gateway-feature-pill.gateway-feature-pix img {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.gateway-module-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 16px 12px;
}

.gateway-module-meta > span {
    display: grid;
    min-width: 0;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 1px 7px;
    padding: 7px 8px;
    border: 1px solid #e2e9f3;
    border-radius: 7px;
    background: #f8fafc;
}

.gateway-module-meta svg {
    width: 13px;
    height: 13px;
    grid-row: 1 / span 2;
    color: var(--brand-primary);
}

.gateway-module-meta small {
    color: #8290a5;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

.gateway-module-meta strong {
    min-width: 0;
    overflow: hidden;
    color: #273650;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gateway-module-card footer {
    padding: 10px 16px;
    border-top: 1px solid #e7edf6;
    background: #fbfcfe;
}

.gateway-module-card footer small {
    color: #8290a5;
    font-size: 9px;
}

.gateway-module-card footer .btn {
    min-height: 31px;
    padding: 6px 11px;
    font-size: 10px;
}

.gateway-detail-hero {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

.gateway-detail-brand {
    display: grid;
    min-height: 142px;
    place-items: center;
    padding: 24px;
    background: var(--gateway-brand-background, #f4f7fb);
}

.gateway-detail-brand img {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 58px;
    object-fit: contain;
}

.gateway-detail-copy {
    align-self: center;
    padding: 22px 26px;
}

.gateway-detail-copy > span {
    color: var(--brand-primary);
    font-size: 9px;
    font-weight: 800;
}

.gateway-detail-copy h2 {
    margin: 6px 0;
    color: #172033;
    font-size: 21px;
}

.gateway-detail-copy p {
    max-width: 680px;
    margin: 0 0 10px;
    color: #63738d;
    font-size: 11px;
    line-height: 1.55;
}

.gateway-detail-copy small {
    color: #8290a5;
    font-size: 9px;
}

.gateway-detail-state {
    display: flex;
    min-width: 150px;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    padding: 22px 26px;
    border-left: 1px solid #e2e9f3;
    background: #fbfcfe;
}

.gateway-detail-state small {
    color: #8290a5;
    font-size: 8px;
    font-weight: 800;
}

.gateway-detail-state strong {
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.gateway-detail-state.is-enabled strong {
    color: #15803d;
}

.gateway-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 16px;
}

.gateway-input-group.is-boolean {
    align-content: start;
}

.gateway-boolean-control {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    border: 1px solid #d5dfed;
    border-radius: 7px;
    background: #f8fafc;
    cursor: pointer;
}

.gateway-boolean-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gateway-boolean-control > span {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .18s ease;
}

.gateway-boolean-control > span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .24);
    transition: transform .18s ease;
}

.gateway-boolean-control input:checked + span { background: var(--brand-primary); }
.gateway-boolean-control input:checked + span::after { transform: translateX(16px); }
.gateway-boolean-control input:focus-visible + span { outline: 3px solid var(--brand-primary-soft); outline-offset: 2px; }
.gateway-boolean-control strong { color: #172033; font-size: 12px; }

.gateway-insecure-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
}

.gateway-insecure-note svg { width: 15px; height: 15px; }

.gateway-credentials-panel {
    overflow: hidden;
    padding: 0;
}

.gateway-section-header,
.gateway-activation-panel > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gateway-section-header {
    padding: 19px 22px;
    border-bottom: 1px solid #e5ebf4;
}

.gateway-section-header > span,
.gateway-activation-panel > header > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 7px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.gateway-section-header svg,
.gateway-activation-panel header svg {
    width: 18px;
    height: 18px;
}

.gateway-section-header h2,
.gateway-activation-panel h2,
.gateway-guide-panel h2 {
    margin: 0 0 4px;
    color: #172033;
    font-size: 14px;
}

.gateway-section-header p,
.gateway-activation-panel p {
    margin: 0;
    color: #8290a5;
    font-size: 9px;
}

.gateway-credential-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
}

.gateway-credential-fields .field-group:first-child {
    grid-column: 1 / -1;
}

.gateway-credential-fields .field-group > small {
    color: #8290a5;
    font-size: 9px;
    line-height: 1.45;
}

.gateway-credential-fields .field-group em {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #15803d;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
}

.gateway-credential-fields .field-group em svg {
    width: 12px;
    height: 12px;
}

.gateway-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid #e5ebf4;
    background: #fbfcfe;
}

.gateway-form-actions svg {
    width: 14px;
    height: 14px;
}

.gateway-settings-sidebar {
    display: grid;
    gap: 12px;
}

.gateway-connection-panel,
.gateway-activation-panel,
.gateway-guide-panel {
    padding: 18px;
}

.gateway-connection-panel > header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gateway-connection-panel header small {
    color: #8290a5;
    font-size: 8px;
    font-weight: 800;
}

.gateway-connection-panel header h2 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 14px;
}

.gateway-status-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 3px solid #e7edf5;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 5px #f4f7fb;
}

.gateway-status-dot.is-success {
    border-color: #dcfce7;
    background: #16a34a;
    box-shadow: 0 0 0 5px #f0fdf4;
}

.gateway-status-dot.is-error {
    border-color: #fee2e2;
    background: #dc2626;
    box-shadow: 0 0 0 5px #fff7f7;
}

.gateway-connection-panel dl {
    margin: 17px 0 12px;
}

.gateway-connection-panel dl > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid #e8edf5;
}

.gateway-connection-panel dt,
.gateway-connection-panel dd {
    margin: 0;
    font-size: 9px;
}

.gateway-connection-panel dt { color: #8290a5; }
.gateway-connection-panel dd { color: #273650; font-weight: 750; text-align: right; }

.gateway-connection-panel > p {
    margin: 0 0 14px;
    padding: 10px;
    border-radius: 6px;
    color: #63738d;
    background: #f7f9fc;
    font-size: 9px;
    line-height: 1.5;
}

.gateway-activation-panel > header {
    margin-bottom: 15px;
}

.gateway-activation-panel .btn:disabled {
    color: #8a98ad;
    background: #e8edf4;
    cursor: not-allowed;
    opacity: 1;
}

.gateway-activation-panel .btn.is-danger {
    color: #b42318;
    background: #fff1f1;
}

.gateway-guide-panel ol {
    display: grid;
    gap: 9px;
    margin: 12px 0 0;
    padding-left: 18px;
    color: #63738d;
    font-size: 9px;
    line-height: 1.5;
}

@media (max-width: 1080px) {
    .gateway-settings-layout {
        grid-template-columns: 1fr;
    }

    .gateway-settings-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gateway-guide-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .gateway-detail-hero {
        grid-template-columns: 1fr;
    }

    .gateway-detail-brand {
        min-height: 88px;
        padding: 16px;
    }

    .gateway-detail-copy {
        padding: 18px;
    }

    .gateway-detail-state {
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding: 13px 18px;
        border-top: 1px solid #e2e9f3;
        border-left: 0;
    }

    .gateway-credential-fields,
    .gateway-settings-sidebar {
        grid-template-columns: 1fr;
    }

    .gateway-credential-fields {
        padding: 18px;
    }

    .gateway-credential-fields .field-group:first-child,
    .gateway-guide-panel {
        grid-column: auto;
    }

    .gateway-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 14px 18px;
    }
}

.gateway-empty-state {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 36px;
    text-align: left;
}

.gateway-empty-state > span {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.gateway-empty-state svg {
    width: 24px;
    height: 24px;
}

.gateway-empty-state h2 {
    margin: 0 0 6px;
    color: #172033;
    font-size: 17px;
}

.gateway-empty-state p {
    margin: 0;
    color: #71819b;
    font-size: 12px;
}

.gateway-empty-state code {
    color: var(--brand-primary-strong);
    font-family: "Segoe UI", Inter, sans-serif;
    font-weight: 750;
}

@media (max-width: 1080px) {
    .financial-settings-overview {
        grid-template-columns: 1fr;
    }

    .financial-overview-stats {
        width: 100%;
    }

    .gateway-module-card { flex-basis: calc((100% - 14px) / 2); }
}

@media (max-width: 680px) {
    .financial-settings-overview,
    .financial-settings-row {
        padding-right: 16px;
        padding-left: 16px;
    }

    .financial-settings-overview {
        gap: 20px;
    }

    .financial-overview-heading {
        align-items: flex-start;
    }

    .financial-overview-stats {
        grid-template-columns: 1fr;
    }

    .financial-overview-stats > div {
        border-right: 0;
        border-bottom: 1px solid #e0e8f3;
    }

    .financial-overview-stats > div:last-child {
        border-bottom: 0;
    }

    .financial-settings-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .financial-row-meta {
        grid-column: 2;
        justify-content: space-between;
    }

    .payment-methods-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-methods-heading .management-development-control {
        width: 100%;
        align-items: stretch;
        justify-content: space-between;
    }

    .management-development-control .btn {
        width: 100%;
    }

    .gateway-module-grid {
        display: block;
    }

    .gateway-module-card + .gateway-module-card {
        margin-top: 14px;
    }

    .gateway-module-card {
        min-height: 278px;
    }

    .gateway-module-meta strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .gateway-empty-state {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
}

/* Shared gateway configuration console */
.modules-hub-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 26px 0 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #dce5f1;
}

.modules-hub-page .modules-hub-intro,
.product-automation-settings-page .modules-hub-intro {
    margin-top: -12px;
}

.modules-hub-intro > div > span,
.modules-category-card > div > small {
    color: var(--brand-primary);
    font-size: 9px;
    font-weight: 800;
}

.modules-hub-intro h2 {
    margin: 7px 0 5px;
    color: #142038;
    font-size: 23px;
}

.modules-hub-intro p,
.modules-category-card p {
    margin: 0;
    color: #687893;
    font-size: 11px;
    line-height: 1.55;
}

.modules-hub-intro dl {
    display: flex;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background: #fff;
}

.modules-hub-intro dl div {
    min-width: 105px;
    padding: 12px 16px;
}

.modules-hub-intro dl div + div { border-left: 1px solid #dce5f1; }
.modules-hub-intro dt { color: #7b8aa1; font-size: 8px; }
.modules-hub-intro dd { margin: 3px 0 0; color: #17233b; font-size: 18px; font-weight: 800; }

.modules-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.modules-category-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    overflow: hidden;
    padding: 22px 22px 0;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.modules-category-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 35%, #dce5f1);
    box-shadow: 0 18px 38px rgba(31, 56, 96, .11);
    transform: translateY(-2px);
}

.modules-category-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.modules-category-icon svg { width: 22px; height: 22px; }
.modules-category-card h2 { margin: 5px 0 6px; color: #142038; font-size: 17px; }
.modules-category-card footer {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    margin: 4px -22px 0;
    padding: 14px 22px;
    border-top: 1px solid #e3eaf3;
    color: #718096;
    background: #fbfcfe;
    font-size: 10px;
}

.modules-category-card footer strong { color: #24324a; }
.modules-category-card footer b { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-primary); }
.modules-category-card footer svg { width: 13px; height: 13px; transform: rotate(-90deg); }

/* Plugin directory */
.plugin-directory-actions{display:flex;align-items:center;gap:8px}.plugin-directory-actions form{margin:0}.external-auth-actions{display:grid;width:100%;min-width:0;gap:10px;margin-top:18px}.external-auth-actions>span{display:flex;align-items:center;gap:12px;color:#718096;font-size:12px;font-weight:700;text-align:center}.external-auth-actions>span::before,.external-auth-actions>span::after{content:"";height:1px;background:#dbe4f0;flex:1}.external-auth-button{box-sizing:border-box;display:flex;width:100%;min-width:0;align-items:center;justify-content:center;gap:10px;min-height:44px;border:1px solid #cfdbea;border-radius:8px;background:#fff;color:#111827;text-decoration:none;font-size:14px;font-weight:800;transition:border-color .18s,box-shadow .18s}.external-auth-button:hover{border-color:var(--brand-primary);box-shadow:0 7px 20px color-mix(in srgb,var(--brand-primary) 9%,transparent)}.external-auth-button i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:#4285f4;font-size:17px;font-style:normal;font-weight:900;box-shadow:0 0 0 1px #dbe4f0}.external-auth-button--google{width:100%;max-width:none;background:#fff;color:#111827}
.external-auth-button--discord:hover{border-color:#5865f2;box-shadow:0 7px 20px rgba(88,101,242,.12)}.external-auth-button--discord i{width:26px;height:24px;color:#5865f2;background:transparent;border-radius:0;box-shadow:none;font-size:0}.discord-auth-mark{font-size:0}.external-connection-mark--discord{color:#fff;background:#5865f2;font-size:0}.external-auth-button--discord i::before,.discord-auth-mark::before,.external-connection-mark--discord::before{content:"";display:block;width:18px;height:15px;background:currentColor;mask:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQwIDUxMiIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJEaXNjb3JkIiBkYXRhLXByb3ZpZGVyLWljb249ImRpc2NvcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MjQuNSA2OS44YTEuNSAxLjUgMCAwIDAtLjgtLjdBNDg1LjEgNDg1LjEgMCAwIDAgNDA0LjEgMzJhMS44IDEuOCAwIDAgMC0xLjkuOSAzMzcuNSAzMzcuNSAwIDAgMC0xNC45IDMwLjYgNDQ3LjggNDQ3LjggMCAwIDAtMTM0LjQgMCAzMDkuNSAzMDkuNSAwIDAgMC0xNS4xLTMwLjYgMS45IDEuOSAwIDAgMC0xLjktLjlBNDgzLjcgNDgzLjcgMCAwIDAgMTE2LjEgNjkuMWExLjcgMS43IDAgMCAwLS44LjdDMzkuMSAxODMuNyAxOC4yIDI5NC43IDI4LjQgNDA0LjRhMiAyIDAgMCAwIC44IDEuNEE0ODcuNyA0ODcuNyAwIDAgMCAxNzYuMSA0ODBhMS45IDEuOSAwIDAgMCAyLjEtLjcgMzQ4LjIgMzQ4LjIgMCAwIDAgMzAuMS00OC44IDMyMS4yIDMyMS4yIDAgMCAxLTQ3LjItMjIuNyAxLjkgMS45IDAgMCAxLS4yLTMuMWMzLjItMi40IDYuNC01IDkuNy03LjhhMS44IDEuOCAwIDAgMSAxLjktLjNjOTkuMSA0NS4yIDIwNi43IDQ1LjIgMzA0LjYgMGExLjggMS44IDAgMCAxIDEuOS4yYzMuMiAyLjcgNi40IDUuMyA5LjYgNy44YTEuOSAxLjkgMCAwIDEtLjIgMy4xIDMwOS4yIDMwOS4yIDAgMCAxLTQ3LjIgMjIuNyAzNDguMiAzNDguMiAwIDAgMCAzMC4xIDQ4LjggMS45IDEuOSAwIDAgMCAyLjEuNyA0ODYgNDg2IDAgMCAwIDE0Ny4yLTc0LjIgMS45IDEuOSAwIDAgMCAuOC0xLjRjMTIuMi0xMjYuNy0yMC41LTIzNi44LTg2LjktMzM0LjZ6TTIyMi41IDMzNy42Yy0yOSAwLTUyLjgtMjYuNi01Mi44LTU5LjJzMjMuMy01OS4zIDUyLjgtNTkuM2MyOS43IDAgNTMuMyAyNi44IDUyLjggNTkuMyAwIDMyLjYtMjMuMyA1OS4yLTUyLjggNTkuMnptMTk1LjQgMGMtMjkgMC01Mi44LTI2LjYtNTIuOC01OS4yczIzLjMtNTkuMyA1Mi44LTU5LjNjMjkuNyAwIDUzLjMgMjYuOCA1Mi44IDU5LjMgMCAzMi42LTIzLjIgNTkuMi01Mi44IDU5LjJ6Ii8+Cjwvc3ZnPgo=") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQwIDUxMiIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJEaXNjb3JkIiBkYXRhLXByb3ZpZGVyLWljb249ImRpc2NvcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MjQuNSA2OS44YTEuNSAxLjUgMCAwIDAtLjgtLjdBNDg1LjEgNDg1LjEgMCAwIDAgNDA0LjEgMzJhMS44IDEuOCAwIDAgMC0xLjkuOSAzMzcuNSAzMzcuNSAwIDAgMC0xNC45IDMwLjYgNDQ3LjggNDQ3LjggMCAwIDAtMTM0LjQgMCAzMDkuNSAzMDkuNSAwIDAgMC0xNS4xLTMwLjYgMS45IDEuOSAwIDAgMC0xLjktLjlBNDgzLjcgNDgzLjcgMCAwIDAgMTE2LjEgNjkuMWExLjcgMS43IDAgMCAwLS44LjdDMzkuMSAxODMuNyAxOC4yIDI5NC43IDI4LjQgNDA0LjRhMiAyIDAgMCAwIC44IDEuNEE0ODcuNyA0ODcuNyAwIDAgMCAxNzYuMSA0ODBhMS45IDEuOSAwIDAgMCAyLjEtLjcgMzQ4LjIgMzQ4LjIgMCAwIDAgMzAuMS00OC44IDMyMS4yIDMyMS4yIDAgMCAxLTQ3LjItMjIuNyAxLjkgMS45IDAgMCAxLS4yLTMuMWMzLjItMi40IDYuNC01IDkuNy03LjhhMS44IDEuOCAwIDAgMSAxLjktLjNjOTkuMSA0NS4yIDIwNi43IDQ1LjIgMzA0LjYgMGExLjggMS44IDAgMCAxIDEuOS4yYzMuMiAyLjcgNi40IDUuMyA5LjYgNy44YTEuOSAxLjkgMCAwIDEtLjIgMy4xIDMwOS4yIDMwOS4yIDAgMCAxLTQ3LjIgMjIuNyAzNDguMiAzNDguMiAwIDAgMCAzMC4xIDQ4LjggMS45IDEuOSAwIDAgMCAyLjEuNyA0ODYgNDg2IDAgMCAwIDE0Ny4yLTc0LjIgMS45IDEuOSAwIDAgMCAuOC0xLjRjMTIuMi0xMjYuNy0yMC41LTIzNi44LTg2LjktMzM0LjZ6TTIyMi41IDMzNy42Yy0yOSAwLTUyLjgtMjYuNi01Mi44LTU5LjJzMjMuMy01OS4zIDUyLjgtNTkuM2MyOS43IDAgNTMuMyAyNi44IDUyLjggNTkuMyAwIDMyLjYtMjMuMyA1OS4yLTUyLjggNTkuMnptMTk1LjQgMGMtMjkgMC01Mi44LTI2LjYtNTIuOC01OS4yczIzLjMtNTkuMyA1Mi44LTU5LjNjMjkuNyAwIDUzLjMgMjYuOCA1Mi44IDU5LjMgMCAzMi42LTIzLjIgNTkuMi01Mi44IDU5LjJ6Ii8+Cjwvc3ZnPgo=") center/contain no-repeat}.external-auth-button--discord i::before{width:26px;height:21px}
.google-auth-settings{gap:18px}.google-auth-heading{display:flex;align-items:center;gap:16px;padding:20px;border-top:3px solid #1768e5}.google-auth-heading>div{min-width:0;flex:1}.google-auth-heading small,.google-auth-heading h2,.google-auth-heading p{margin:0}.google-auth-heading small{color:#1768e5;font-size:10px;font-weight:900}.google-auth-heading h2{margin-top:4px;font-size:20px}.google-auth-heading p{margin-top:5px;color:#66748a;font-size:13px}.google-auth-heading>i{padding:6px 9px;border-radius:6px;background:#e9f7ef;color:#087a3f;font-size:11px;font-style:normal;font-weight:800}.google-auth-mark{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid #d7e2f0;border-radius:8px;background:#fff;color:#4285f4;font-size:25px;font-weight:900;box-shadow:inset 0 -3px 0 #34a853}.google-auth-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:18px;align-items:start}.google-auth-form,.google-auth-callbacks{overflow:hidden}.google-auth-form>header,.google-auth-callbacks>header{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid #dce5f0}.google-auth-form>header>span,.google-auth-callbacks>header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:#eaf2ff;color:#1768e5}.google-auth-form header div,.google-auth-callbacks header div{min-width:0;flex:1}.google-auth-form h3,.google-auth-form p,.google-auth-callbacks h3,.google-auth-callbacks p{margin:0}.google-auth-form h3,.google-auth-callbacks h3{font-size:16px}.google-auth-form p,.google-auth-callbacks p{margin-top:3px;color:#728099;font-size:11px}.google-auth-form>header>small{display:flex;align-items:center;gap:5px;color:#15803d;font-size:10px;font-weight:800}.google-auth-form-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px 20px}.google-auth-form-body label>span:first-child,.google-auth-form-body legend{display:block;margin-bottom:7px;color:#13213a;font-size:12px;font-weight:800}.google-auth-form-body fieldset{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;border:0}.google-auth-form-body legend{grid-column:1/-1}.google-auth-toggle{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:13px;border:1px solid #d5e0ee;border-radius:8px;cursor:pointer}.google-auth-toggle input{position:absolute;opacity:0}.google-auth-toggle>span{width:34px;height:20px;border-radius:10px;background:#cbd5e1;position:relative;transition:.18s}.google-auth-toggle>span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.18s}.google-auth-toggle input:checked+span{background:#1768e5}.google-auth-toggle input:checked+span::after{transform:translateX(14px)}.google-auth-toggle div strong,.google-auth-toggle div small{display:block}.google-auth-toggle div strong{font-size:12px}.google-auth-toggle div small{margin-top:2px;color:#75839a;font-size:10px;line-height:1.35}.secret-saved-note{display:flex!important;align-items:center;gap:4px;margin-top:6px;color:#15803d!important;font-size:10px!important}.google-auth-form>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid #dce5f0}.google-auth-form>footer>span{display:flex;align-items:center;gap:6px;color:#66748a;font-size:11px}.google-auth-callbacks>div{padding:14px 18px;border-bottom:1px solid #e2e8f0}.google-auth-callbacks>div label{display:block;margin-bottom:6px;color:#66748a;font-size:10px;font-weight:800;text-transform:uppercase}.google-auth-callbacks>div span{display:flex;align-items:center;gap:6px}.google-auth-callbacks code{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;font-family:Inter,"Segoe UI",sans-serif;font-size:11px}.google-auth-callbacks button{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:1px solid #d4dfec;border-radius:7px;background:#fff;color:#64748b}.google-auth-callbacks ul{display:grid;gap:10px;margin:0;padding:16px 18px;list-style:none}.google-auth-callbacks li{display:flex;align-items:center;gap:7px;color:#58677e;font-size:11px}.google-auth-callbacks li svg{color:#16a34a}.google-auth-callbacks>a{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 18px 18px;min-height:40px;border:1px solid #a9c8fa;border-radius:8px;color:#1768e5;text-decoration:none;font-size:12px;font-weight:800}
.discord-auth-heading{border-top-color:#5865f2}.discord-auth-heading small{color:#5865f2}.discord-auth-mark{color:#fff;background:#5865f2;border-color:#5865f2;box-shadow:none}.discord-auth-settings .google-auth-form>header>span,.discord-auth-settings .google-auth-callbacks>header>span{color:#5865f2;background:#eef0ff}.discord-auth-settings .google-auth-callbacks>a{color:#5865f2;border-color:#c7ccff}
.nfse-heading{border-top-color:var(--brand-primary)}.nfse-heading small{color:var(--brand-primary)}.nfse-mark{color:var(--brand-primary);background:var(--brand-primary-soft);border-color:var(--brand-primary-border);box-shadow:none}.nfse-mark svg{width:25px;height:25px}.nfse-settings .google-auth-form>header>span,.nfse-settings .google-auth-callbacks>header>span{color:var(--brand-primary);background:var(--brand-primary-soft)}.nfse-settings .google-auth-callbacks>a{color:var(--brand-primary);border-color:var(--brand-primary-border)}.nfse-wide-field{grid-column:1/-1}.google-auth-form-body .input-with-icon select{width:100%;min-width:0;height:42px;flex:1;padding:0 34px 0 40px;border:0;border-radius:0;outline:0;background:transparent;color:#172033;font-family: var(--asv-font-family);font-size:12px;font-weight:650;appearance:none}.google-auth-form-body .input-with-icon:has(select)::after{content:"";position:absolute;right:14px;width:8px;height:8px;border-right:2px solid #8aa0bc;border-bottom:2px solid #8aa0bc;transform:translateY(-2px) rotate(45deg);pointer-events:none}.nfse-notes>div span{min-width:0}.nfse-notes>div code{white-space:normal}
.nfse-notes form{display:grid;margin:0 18px 12px}.nfse-notes form .btn{width:100%;justify-content:center}.nfse-form-actions{display:flex;justify-content:flex-end}.invoice-nfse-download-button{border-color:var(--brand-primary-border)!important;color:var(--brand-primary)!important;background:var(--brand-primary-soft)!important}
.nfse-notes>div{border-bottom:0}.nfse-notes form .btn{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid var(--brand-primary-border);border-radius:8px;background:var(--brand-primary-soft);color:var(--brand-primary);font-family: var(--asv-font-family);font-size:12px;font-weight:800;line-height:1;box-shadow:none}.nfse-notes form .btn svg{width:16px;height:16px;flex:0 0 16px}.nfse-notes form .btn:hover{border-color:var(--brand-primary);background:var(--brand-primary-subtle);box-shadow:0 4px 12px color-mix(in srgb,var(--brand-primary) 12%,transparent)}
.nfse-settings .nfse-actions .btn.secondary,.nfse-settings .nfse-search .btn.secondary{color:var(--brand-primary);background:var(--brand-primary-soft);border:1px solid var(--brand-primary-border)}.nfse-settings .nfse-actions .btn.secondary:hover,.nfse-settings .nfse-search .btn.secondary:hover{background:var(--brand-primary-subtle);border-color:var(--brand-primary)}
.nfse-settings .google-auth-form>header>small,.nfse-settings .secret-saved-note{color:var(--brand-primary)!important}.nfse-settings .nfse-heading>i{background:var(--brand-primary-soft);color:var(--brand-primary)}.nfse-settings .nfse-notes li svg{color:var(--brand-primary)!important}.nfse-settings .nfse-notes header>span{color:var(--brand-primary);background:var(--brand-primary-soft)}
.invoice-nfse-download-button.is-disabled{cursor:not-allowed;opacity:.62}
.nfse-file-picker{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 13px;border:1px solid #ccd8e7;border-radius:7px;background:#fff;color:#172033;cursor:pointer}.nfse-file-picker:focus-within{border-color:color-mix(in srgb,var(--brand-primary) 58%,#ccd8e7);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 10%,transparent)}.nfse-file-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.nfse-file-picker-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:6px;background:var(--brand-primary-soft);color:var(--brand-primary)}.nfse-file-picker-icon svg{width:15px;height:15px}.nfse-file-picker-text{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12px;font-weight:750}.nfse-file-picker-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8799;font-size:10px;font-weight:600}
.nfse-external-only[hidden]{display:none!important}
.nfse-company-only[hidden]{display:none!important}.nfse-certificate-link{display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:var(--brand-primary);font-size:10px;font-weight:700;text-decoration:none}.nfse-certificate-link:hover{text-decoration:underline}.nfse-certificate-link svg{width:13px;height:13px}
.nfse-autofill-feedback{display:block;margin-top:5px;color:var(--brand-primary);font-size:10px;font-weight:700}
.nfse-settings .nfse-help{color:#66748a;font-size:13px;line-height:1.65;margin:0}.nfse-settings .nfse-inset{padding:0 20px 20px}.nfse-notes>div p{font-size:13px;line-height:1.6;overflow-wrap:anywhere}.nfse-notes>div span{font-size:13px;line-height:1.6}.nfse-settings .nfse-check{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:13px;line-height:1.6;cursor:pointer}.nfse-settings .nfse-check input{width:18px;height:18px;min-width:18px;margin:3px 0 0;accent-color:var(--brand-primary)}.nfse-settings .nfse-check span{margin:0}.nfse-operation-form{gap:16px}.nfse-settings textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #ccd8e7;border-radius:7px;resize:vertical;font-family: var(--asv-font-family);font-size:13px}.nfse-settings textarea:focus{outline:2px solid var(--brand-primary-border);border-color:var(--brand-primary)}.nfse-search{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:20px}.nfse-search>label{display:grid;gap:8px;flex:1;max-width:340px;min-width:180px;font-size:13px;font-weight:700}.nfse-search input{width:100%;min-height:44px;padding:10px;border:1px solid #ccd8e7;border-radius:7px;font:inherit}.nfse-search input:focus{outline:2px solid var(--brand-primary-border);border-color:var(--brand-primary)}.nfse-search .field-error{flex-basis:100%}.nfse-document{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(180px,auto);gap:20px;padding:22px 20px;border-bottom:1px solid #e2e8f0;align-items:start}.nfse-document>div{min-width:0;overflow-wrap:anywhere}.nfse-document strong{font-size:14px}.nfse-document p,.nfse-document small{font-size:12px;color:#66748a;line-height:1.6;margin:6px 0 0}.nfse-document .status-pill{white-space:normal}.nfse-settings .nfse-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.nfse-actions form{display:grid;gap:10px;max-width:100%;margin:0}.nfse-settings .btn{min-height:44px;gap:8px}.nfse-settings .btn:disabled{opacity:.5;cursor:not-allowed}.nfse-empty{display:grid;justify-items:center;gap:10px;padding:40px 20px;text-align:center}.nfse-empty svg{width:28px;height:28px;color:var(--brand-primary)}.nfse-empty p{margin:0;color:#66748a;font-size:13px}.nfse-settings .field-error{color:#b42318;font-size:12px}.nfse-settings .nfse-notes{min-width:0}
@media(max-width:900px){.nfse-document{grid-template-columns:1fr 1fr}.nfse-document .nfse-actions{grid-column:1/-1}.nfse-settings .nfse-notes{order:0}}@media(max-width:600px){.nfse-document{grid-template-columns:1fr;gap:14px;padding:18px 15px}.nfse-search{padding:18px 15px}.nfse-search>label{max-width:none;width:100%;flex-basis:100%}.nfse-search .btn{width:100%}.nfse-settings .nfse-inset{padding:0 15px 18px}.nfse-settings .google-auth-form>header{padding:17px 15px}.nfse-settings .nfse-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1050px){.google-auth-layout{grid-template-columns:1fr}.google-auth-callbacks{order:-1}}@media(max-width:700px){.plugin-directory-actions{width:100%;justify-content:flex-end}.google-auth-heading{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start}.google-auth-heading>i{grid-column:2;margin:0;justify-self:start}.google-auth-form-body{grid-template-columns:1fr;padding:18px 15px}.google-auth-form-body fieldset{grid-template-columns:1fr}.google-auth-form>footer{align-items:stretch;flex-direction:column}.google-auth-form>footer .btn{width:100%}}
.google-auth-form-body>label{min-width:0}.google-auth-form-body .input-with-icon,.google-auth-form-body .password-field{position:relative;display:flex;align-items:center;width:100%;min-width:0;min-height:44px;overflow:hidden;border:1px solid #ccd8e7;border-radius:7px;background:#fff;transition:border-color .18s,box-shadow .18s}.google-auth-form-body .input-with-icon:focus-within,.google-auth-form-body .password-field:focus-within{border-color:color-mix(in srgb,var(--brand-primary) 58%,#ccd8e7);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 10%,transparent)}.google-auth-form-body .input-with-icon>svg,.google-auth-form-body .password-field>svg{left:13px;width:16px;height:16px}.google-auth-form-body .input-with-icon input,.google-auth-form-body .password-field input{width:100%;min-width:0;height:42px;flex:1;padding:0 12px 0 40px;border:0;border-radius:0;outline:0;background:transparent;color:#172033;font-family: var(--asv-font-family);font-size:12px;font-weight:650;text-overflow:ellipsis}.google-auth-form-body .password-field input{padding-right:46px}.google-auth-form-body .password-toggle{top:0;right:0;width:42px;height:42px;border-radius:0}.google-auth-form-body .password-toggle svg{width:16px;height:16px}.google-auth-form-body .field-error{display:block;margin-top:6px;color:#b42318;font-size:10px;font-weight:700}
.plugins-directory-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 18px;
    padding: 18px 20px;
    border: 1px solid #dce5f1;
    border-top: 3px solid var(--brand-primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 56, 96, .07);
}

.plugins-directory-intro > div:first-child { display: flex; align-items: center; gap: 14px; min-width: 0; }
.plugins-directory-intro > div:first-child > span {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}
.plugins-directory-intro > div:first-child > span svg { width: 21px; height: 21px; }
.plugins-directory-intro small { color: var(--brand-primary); font-size: 9px; font-weight: 800; }
.plugins-directory-intro h2 { margin: 3px 0 3px; color: #142038; font-size: 18px; }
.plugins-directory-intro p { max-width: 720px; margin: 0; color: #687893; font-size: 11px; line-height: 1.5; }
.plugins-directory-intro dl { display: flex; flex: 0 0 auto; margin: 0; overflow: hidden; border: 1px solid #dce5f1; border-radius: 8px; }
.plugins-directory-intro dl div { min-width: 94px; padding: 10px 14px; }
.plugins-directory-intro dl div + div { border-left: 1px solid #dce5f1; }
.plugins-directory-intro dt { color: #7b8aa1; font-size: 8px; }
.plugins-directory-intro dd { margin: 2px 0 0; color: #17233b; font-size: 17px; font-weight: 800; }

.plugins-directory-toolbar { margin-bottom: 16px; }
.plugin-category-filters { display: flex; align-items: center; gap: 8px; margin: -3px 0 16px; overflow-x: auto; padding: 3px 1px 5px; scrollbar-width: thin; }
.plugin-category-filters button { display: inline-flex; min-height: 36px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 10px 0 12px; border: 1px solid #d9e3ef; border-radius: 8px; color: #607089; background: #fff; font-family: var(--asv-font-family); font-size: 10px; font-weight: 800; cursor: pointer; transition: border-color .15s,box-shadow .15s,color .15s,background .15s; }
.plugin-category-filters button span { display: inline-flex; align-items: center; gap: 6px; }
.plugin-category-filters button svg { width: 14px; height: 14px; }
.plugin-category-filters button strong { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 999px; color: #64748b; background: #edf2f8; font-size: 9px; }
.plugin-category-filters button:hover { border-color: color-mix(in srgb,var(--brand-primary) 38%,#d9e3ef); color: var(--brand-primary); }
.plugin-category-filters button.is-active { border-color: var(--brand-primary); color: #fff; background: var(--brand-primary); box-shadow: 0 7px 16px color-mix(in srgb,var(--brand-primary) 18%,transparent); }
.plugin-category-filters button.is-active strong { color: var(--brand-primary); background: #fff; }
.plugins-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plugins-directory-grid[hidden],.plugin-directory-card[hidden]{display:none!important}
.plugin-directory-card { display: flex; min-width: 0; min-height: 286px; flex-direction: column; overflow: hidden; padding: 0; }
.plugin-directory-card > header { display: flex; align-items: center; gap: 11px; padding: 15px 16px; border-bottom: 1px solid #e4eaf3; background: #f8fbff; }
.plugin-directory-card > header > span { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 8px; color: var(--brand-primary); background: var(--brand-primary-soft); }
.plugin-directory-card > header > span svg { width: 19px; height: 19px; }
.plugin-directory-card > header > div { min-width: 0; }
.plugin-directory-card > header small { display: block; color: var(--brand-primary); font-size: 8px; font-weight: 800; }
.plugin-directory-card h3 { margin: 2px 0 0; overflow: hidden; color: #172033; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.plugin-directory-card > header i { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #586a84; background: #eaf0f7; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.plugin-directory-card > header i.is-active { color: #078342; background: #dcf8e8; }
.plugin-directory-card > header i.has-warning { color: #a14a05; background: #fff0d8; }
.plugin-directory-body { flex: 1; padding: 14px 16px 12px; }
.plugin-directory-body > p { margin: 0; color: #677894; font-size: 10px; line-height: 1.55; }
.plugin-directory-body ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.plugin-directory-body li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #dde6f2; border-radius: 999px; color: #41526c; background: #f8fafc; font-size: 8px; font-weight: 700; }
.plugin-directory-body li svg { width: 11px; height: 11px; color: var(--brand-primary); }
.plugin-directory-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 16px 12px; border: 1px solid #e2e9f3; border-radius: 7px; background: #f8fafc; }
.plugin-directory-meta span { min-width: 0; padding: 8px 10px; }
.plugin-directory-meta span + span { border-left: 1px solid #e2e9f3; }
.plugin-directory-meta small { display: block; color: #8290a5; font-size: 7px; text-transform: uppercase; }
.plugin-directory-meta strong { display: block; margin-top: 2px; overflow: hidden; color: #273650; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.plugin-directory-warning { display: flex; align-items: center; gap: 7px; margin: 0 16px 12px; padding: 8px 9px; border: 1px solid #f2d7b5; border-radius: 7px; color: #8d490e; background: #fff8ed; font-size: 9px; line-height: 1.4; }
.plugin-directory-warning svg { width: 14px; height: 14px; flex: 0 0 14px; }
.plugin-directory-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px; padding: 10px 16px; border-top: 1px solid #e7edf6; background: #fbfcfe; }
.plugin-directory-card > footer > small { min-width: 0; overflow: hidden; color: #8290a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.plugin-directory-card > footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-primary); }
.plugin-directory-card > footer a svg { width: 11px; height: 11px; }
.plugin-directory-card > footer form { margin: 0; }
.plugin-directory-card > footer .btn { min-height: 31px; gap: 6px; padding: 6px 11px; font-size: 10px; }
.plugin-directory-card > footer .btn svg { width: 13px; height: 13px; }
.plugins-empty-state { margin-top: 4px; }
.plugins-owner-note { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: #687893; font-size: 10px; }
.plugins-owner-note svg { width: 14px; height: 14px; }

@media (max-width: 1120px) {
    .plugins-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .plugins-directory-intro { align-items: stretch; flex-direction: column; padding: 15px; }
    .plugins-directory-intro dl { width: 100%; }
    .plugins-directory-intro dl div { width: 50%; }
    .plugins-directory-grid { grid-template-columns: 1fr; }
    .plugin-category-filters { margin-right: -16px; padding-right: 16px; }
    .plugin-directory-card { min-height: 0; }
}

.security-api-section {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid #dce5f1;
}

.security-single-card-grid { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* Access logs */
.admin-access-logs-page { container-type: inline-size; }
.access-log-hero { margin-top: 12px; }
.access-log-filters {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background: #f6f8fb;
}
.access-log-filters a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 6px;
    color: #65748c;
    font-size: 10px;
    font-weight: 800;
}
.access-log-filters a.is-active { color: #fff; background: var(--brand-primary); }
.session-hero-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.session-type-filters a { gap: 7px; }
.session-type-filters a span { min-width: 18px; padding: 2px 5px; border-radius: 999px; color: #65758d; background: #edf2f8; font-size: 9px; text-align: center; }
.session-type-filters a.is-active span { color: var(--brand-primary); background: #fff; }
.access-log-list { margin-top: 16px; overflow: hidden; }
.access-log-item {
    display: grid;
    grid-template-columns: 44px minmax(240px, 1fr) minmax(430px, 1.2fr);
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    background: #fff;
}
.access-log-item + .access-log-item { border-top: 1px solid #e5ebf3; }
.access-log-actor-badge {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: #1768e5;
    background: #eaf2ff;
    font-size: 9px;
    font-weight: 800;
}
.access-log-actor-badge.is-admin { color: #7445b8; background: #f2ebff; }
.access-log-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.access-log-facts div { min-width: 0; padding: 1px 16px; border-left: 1px solid #e2e9f2; }
.access-log-facts dt { color: #8090a7; font-size: 9px; text-transform: uppercase; }
.access-log-facts dd { overflow: hidden; margin: 4px 0 0; color: #17233b; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.access-log-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 13px 20px;
    border-top: 1px solid #e5ebf3;
    color: #718096;
    background: #fbfcfe;
    font-size: 10px;
}
.access-log-pagination a,
.access-log-pagination .is-disabled { padding: 7px 10px; border: 1px solid #dce5f1; border-radius: 6px; font-weight: 800; }
.access-log-pagination a { color: var(--brand-primary); background: #fff; }
.access-log-pagination .is-disabled { color: #a7b1c0; background: #f2f5f8; }

@container (max-width: 950px) {
    .access-log-item { grid-template-columns: 44px minmax(0, 1fr); }
    .access-log-facts { grid-column: 2 / -1; }
}

@container (max-width: 650px) {
    .access-log-hero { grid-template-columns: 44px minmax(0, 1fr); }
    .access-log-filters { grid-column: 1 / -1; width: 100%; }
    .access-log-filters a { flex: 1; justify-content: center; padding-inline: 7px; }
    .session-hero-actions { grid-column: 1 / -1; align-items: stretch; width: 100%; }
    .session-type-filters a { min-width: 0; gap: 4px; }
    .access-log-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .access-log-facts { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 10px; }
    .access-log-facts div { padding: 0; border-left: 0; }
    .access-log-pagination { justify-content: space-between; padding-inline: 16px; }
}

/* Admin sessions */
.admin-sessions-page {
    container-type: inline-size;
}

.session-access-hero {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 22px;
    border-top: 3px solid var(--brand-primary);
}

.session-access-hero-icon,
.session-device-icon,
.session-access-unavailable > span,
.session-access-empty > span,
.session-security-note > span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.session-access-hero-icon { width: 52px; height: 52px; }
.session-access-hero-icon svg { width: 24px; height: 24px; }
.session-access-kicker { color: var(--brand-primary); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.session-access-hero h2 { margin: 4px 0; color: #111d34; font-size: 20px; }
.session-access-hero p { margin: 0; color: #718096; font-size: 12px; }
.session-terminate-others { white-space: nowrap; }

.session-access-list { margin-top: 16px; overflow: hidden; }
.session-access-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e9f2;
}
.session-access-list-header h2 { margin: 0 0 3px; color: #111d34; font-size: 16px; }
.session-access-list-header p { margin: 0; color: #7b8aa1; font-size: 11px; }
.session-access-list-header > span { display: inline-flex; align-items: center; gap: 7px; color: #718096; font-size: 10px; white-space: nowrap; }
.session-access-list-header > span svg { width: 14px; height: 14px; color: var(--brand-primary); }

.session-access-item {
    display: grid;
    grid-template-columns: 44px minmax(210px, 1fr) minmax(280px, .8fr) 104px;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    background: #fff;
}
.session-access-item + .session-access-item { border-top: 1px solid #e5ebf3; }
.session-access-item.is-current { background: color-mix(in srgb, var(--brand-primary) 3%, #fff); }
.session-device-icon svg { width: 20px; height: 20px; }
.session-device-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.session-device-title h3 { margin: 0; color: #142038; font-size: 14px; }
.session-device-main p { margin: 5px 0 0; color: #718096; font-size: 11px; }
.session-current-badge,
.session-active-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 9px;
    border-radius: 999px;
    color: #08783f;
    background: #e1f8e9;
    font-size: 9px;
    font-weight: 800;
}
.session-active-badge { color: #40516d; background: #eef2f7; }
.session-access-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.session-access-facts div { min-width: 0; padding: 1px 16px; border-left: 1px solid #e2e9f2; }
.session-access-facts dt { color: #8090a7; font-size: 9px; text-transform: uppercase; }
.session-access-facts dd { overflow: hidden; margin: 4px 0 0; color: #17233b; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.session-access-action { display: flex; justify-content: flex-end; }
.session-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.session-terminate-button,
.session-ban-button,
.session-protected-label {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #d9e2ee;
    border-radius: 7px;
    color: #52627b;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 10px;
    font-weight: 800;
}
.session-terminate-button { cursor: pointer; }
.session-terminate-button:hover { border-color: #efb2b2; color: #c82c2c; background: #fff8f8; }
.session-ban-button { cursor: pointer; color: #9a3412; border-color: #fed7aa; background: #fffaf5; }
.session-ban-button:hover { color: #c2410c; border-color: #fb923c; background: #fff7ed; }
.session-terminate-button svg,
.session-ban-button svg,
.session-protected-label svg { width: 14px; height: 14px; }
.session-protected-label { border-color: #cfeada; color: #15824b; background: #f5fcf8; }

.session-access-unavailable,
.session-access-empty,
.session-security-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 20px;
}
.session-access-unavailable h2,
.session-access-empty h2,
.session-security-note h2 { margin: 0 0 4px; color: #142038; font-size: 14px; }
.session-access-unavailable p,
.session-access-empty p,
.session-security-note p { margin: 0; color: #718096; font-size: 11px; }
.session-security-note { border: 1px solid #dce5f1; border-radius: 8px; background: #f8fbff; }
.session-security-note > a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--brand-primary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.session-security-note > a svg { width: 13px; height: 13px; transform: rotate(-90deg); }

@container (max-width: 900px) {
    .session-access-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .session-access-facts { grid-column: 2 / -1; width: 100%; }
    .session-access-action { grid-column: 3; grid-row: 1; }
}

@container (max-width: 650px) {
    .session-access-hero { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
    .session-access-hero-icon { width: 44px; height: 44px; }
    .session-terminate-others { grid-column: 1 / -1; width: 100%; }
    .session-access-list-header { align-items: flex-start; flex-direction: column; gap: 8px; }
    .session-access-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .session-device-icon { width: 40px; height: 40px; }
    .session-access-facts { grid-column: 1 / -1; }
    .session-access-facts div:first-child { padding-left: 0; border-left: 0; }
    .session-access-action { grid-column: 1 / -1; grid-row: auto; justify-content: stretch; }
    .session-access-action form,
    .session-row-actions,
    .session-terminate-button,
    .session-ban-button,
    .session-protected-label { width: 100%; }
    .session-row-actions { align-items: stretch; }
    .session-row-actions form { display: flex; }
    .session-security-note { align-items: flex-start; flex-wrap: wrap; }
    .session-security-note > a { width: 100%; margin: 2px 0 0 58px; }
}

.security-api-section > header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.security-api-section > header > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.security-api-section > header svg {
    width: 18px;
    height: 18px;
}

.security-api-section > header h2 {
    margin: 0 0 3px;
    color: #142038;
    font-size: 18px;
}

.security-api-section > header p {
    margin: 0;
    color: #687893;
    font-size: 11px;
    line-height: 1.5;
}

.admin-error-logs-page {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
}

.admin-error-logs-page .admin-topbar {
    margin-bottom: 18px;
}

.error-log-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 104, 229, .08), rgba(255, 255, 255, .9) 44%),
        #fff;
    box-shadow: 0 20px 45px rgba(31, 56, 96, .08);
}

.error-log-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.error-log-kicker svg {
    width: 15px;
    height: 15px;
}

.error-log-hero h2 {
    margin: 7px 0 4px;
    color: #111c31;
    font-size: 23px;
}

.error-log-hero p {
    max-width: 720px;
    margin: 0;
    color: #62718a;
    font-size: 12px;
    line-height: 1.6;
}

.error-log-hero code {
    padding: 2px 6px;
    border-radius: 6px;
    background: #edf4ff;
    color: #17458f;
    font-family: "Segoe UI", Inter, sans-serif;
    font-size: 11px;
}

.error-log-hero dl {
    display: flex;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 8px;
    background: #fff;
}

.error-log-hero-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.error-log-hero dl div {
    min-width: 96px;
    padding: 9px 13px;
}

.error-log-hero dl div + div {
    border-left: 1px solid #dce5f1;
}

.error-log-hero dt {
    color: #7b8aa1;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.error-log-hero dd {
    margin: 4px 0 0;
    color: #17233b;
    font-size: 16px;
    font-weight: 850;
}

.error-log-clear-button {
    display: inline-flex;
    min-height: 50px;
    padding: 0 17px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: stretch;
    border: 1px solid #b4232f;
    border-radius: 7px;
    color: #fff;
    background: #c62f3d;
    box-shadow: 0 7px 16px rgba(180, 35, 47, .18);
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.error-log-clear-button svg {
    width: 16px;
    height: 16px;
}

.error-log-clear-button:hover {
    border-color: #981b27;
    background: #aa2230;
    box-shadow: 0 9px 20px rgba(180, 35, 47, .24);
}

.error-log-clear-button:focus-visible {
    outline: 3px solid rgba(198, 47, 61, .22);
    outline-offset: 2px;
}

.error-log-list {
    display: grid;
    gap: 10px;
}

.error-log-card {
    overflow: hidden;
    border-color: #dce5f1;
    background: #fff;
}

.error-log-card > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #e5edf6;
    background: #fbfdff;
}

.error-log-level {
    display: inline-flex;
    min-width: 74px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #9f1239;
    background: #ffe4e6;
    font-size: 10px;
    font-weight: 900;
}

.error-log-card h2 {
    margin: 0;
    color: #101a2e;
    font-size: 14px;
    line-height: 1.35;
}

.error-log-card header p {
    margin: 2px 0 0;
    color: #728097;
    font-size: 11px;
}

.error-log-body {
    display: grid;
    grid-template-columns: minmax(110px, .35fr) minmax(210px, .75fr) minmax(300px, 1.4fr);
    gap: 9px;
    padding: 10px 16px;
}

.error-log-fact strong {
    display: block;
    margin-bottom: 4px;
    color: #24324a;
    font-size: 10px;
    font-weight: 850;
}

.error-log-fact {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid #e4ebf5;
    border-radius: 7px;
    background: #fff;
}

.error-log-fact p {
    margin: 0;
    color: #5f6f88;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.error-log-message {
    background: #f8fbff;
}

.error-log-reference {
    color: #17458f !important;
    font-weight: 800;
    letter-spacing: 0;
}

.error-log-details {
    border-top: 1px solid #e5edf6;
    background: #0f172a;
}

.error-log-details summary {
    cursor: pointer;
    padding: 9px 16px;
    color: #dbeafe;
    font-size: 11px;
    font-weight: 850;
}

.error-log-details pre {
    max-height: 360px;
    margin: 0;
    overflow: auto;
    padding: 0 16px 14px;
    color: #d9e7ff;
    font-family: Consolas, "Segoe UI", monospace;
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.error-log-empty {
    display: flex;
    min-height: 370px;
    gap: 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 38px 24px 48px;
    text-align: center;
}

.error-log-empty-mascot {
    position: relative;
    display: grid;
    width: 252px;
    height: 224px;
    place-items: center;
    flex: 0 0 auto;
    isolation: isolate;
}

.error-log-empty-mascot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(62deg, transparent 0 49.2%, rgba(34, 211, 238, .2) 49.7% 50.3%, transparent 50.8%),
        linear-gradient(118deg, transparent 0 49.2%, rgba(23, 104, 229, .2) 49.7% 50.3%, transparent 50.8%),
        linear-gradient(90deg, transparent 0 49.6%, rgba(96, 165, 250, .13) 49.8% 50.2%, transparent 50.4%);
    filter: blur(.4px);
    opacity: .9;
    pointer-events: none;
}

.error-log-empty-mascot::after {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: 168px;
    height: 3px;
    z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(23, 104, 229, .38), rgba(34, 211, 238, .5), rgba(23, 104, 229, .38), transparent);
    box-shadow: 0 7px 20px rgba(23, 104, 229, .2);
    transform: translateX(-50%);
    pointer-events: none;
}

.error-log-empty-mascot img {
    display: block;
    width: 146px;
    height: 219px;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(23, 104, 229, .32));
    animation: error-log-mascot-float 4.2s ease-in-out infinite;
    will-change: transform, filter;
}

@keyframes error-log-mascot-float {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 20px 28px rgba(23, 104, 229, .28));
    }
    50% {
        transform: translateY(-9px);
        filter: drop-shadow(0 28px 34px rgba(34, 211, 238, .36));
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-log-empty-mascot img {
        animation: none;
        will-change: auto;
    }
}

.error-log-empty h2 {
    margin: 0 0 5px;
    color: #142038;
    font-size: 26px;
}

.error-log-empty p {
    margin: 0;
    color: #687893;
    font-size: 14px;
    line-height: 1.5;
}

.error-log-clear-dialog form {
    padding: 0 22px 22px;
}

.product-automation-settings-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.product-automation-intro dl {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
}

.product-automation-hub-grid {
    grid-template-columns: minmax(320px, 520px);
}

.product-settings-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.product-automation-card {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}

.product-automation-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-bottom: 1px solid #dfe8f5;
}

.product-automation-card-head > span,
.product-automation-summary > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid #cfe0f7;
    border-radius: 8px;
    color: #1768e5;
    background: #edf5ff;
}

.product-automation-card-head svg,
.product-automation-summary > span svg {
    width: 22px;
    height: 22px;
}

.product-automation-card-head small,
.product-automation-summary > small {
    color: #1768e5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-automation-card-head h2,
.product-automation-summary h2 {
    margin: 3px 0 4px;
    color: #111827;
    font-size: 19px;
}

.product-automation-card-head p,
.product-automation-summary p {
    margin: 0;
    color: #5f6f8d;
    font-size: 13px;
    line-height: 1.45;
}

.product-automation-section {
    padding: 22px 24px;
    border-bottom: 1px solid #edf2f8;
}

.product-category-field {
    max-width: 620px;
    margin: 0;
}

.product-category-field small {
    display: block;
    margin-top: 8px;
    color: #697997;
    font-size: 12px;
    line-height: 1.45;
}

.product-url-mode {
    display: grid;
    gap: 12px;
}

.product-url-mode-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.product-url-mode-title > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    color: #1768e5;
    background: #edf5ff;
}

.product-url-mode-title strong {
    display: block;
    color: #111827;
    font-size: 14px;
}

.product-url-mode-title small {
    display: block;
    margin-top: 2px;
    color: #71819b;
    font-size: 12px;
}

.product-url-mode label {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #d8e4f4;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.product-url-mode label.is-active,
.product-url-mode label:has(input:checked) {
    border-color: #1f6feb;
    background: #f4f8ff;
    box-shadow: 0 12px 30px rgba(31, 111, 235, .09);
}

.product-url-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.product-url-mode label > span {
    min-width: 0;
    flex: 1;
}

.product-url-mode label > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: #b5c3d8;
}

.product-url-mode label > i svg {
    width: 21px;
    height: 21px;
}

.product-url-mode label.is-active > i,
.product-url-mode label:has(input:checked) > i {
    color: #1768e5;
    accent-color: #1f6feb;
}

.product-url-mode b,
.product-url-mode small {
    display: block;
}

.product-url-mode b {
    color: #111827;
    font-size: 14px;
}

.product-url-mode small {
    margin-top: 5px;
    color: #53627c;
    font-size: 12px;
    word-break: break-all;
}

.product-automation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f8fafc;
}

.product-automation-summary {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
    padding: 22px;
}

.product-automation-summary div {
    display: grid;
    gap: 8px;
    margin: 2px 0 4px;
    padding: 14px;
    border: 1px solid #dbe7f6;
    border-radius: 8px;
    background: #f8fbff;
}

.product-automation-summary div strong {
    color: #111827;
    font-size: 13px;
}

.product-automation-summary code {
    display: block;
    color: #1768e5;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    white-space: normal;
    word-break: break-all;
}

.management-module-card footer .btn:disabled {
    color: #718096;
    background: #edf2f7;
    cursor: default;
    opacity: 1;
}

.module-card-next-step {
    color: #7b899d;
    font-size: 9px;
    font-weight: 700;
}

@media (max-width: 760px) {
    .modules-hub-intro { align-items: stretch; flex-direction: column; }
    .modules-hub-intro dl { width: 100%; }
    .modules-hub-intro dl div { width: 50%; }
    .modules-category-grid { grid-template-columns: 1fr; }
    .admin-error-logs-page { padding: 22px 16px 36px; }
    .error-log-hero { grid-template-columns: 1fr; padding: 16px; }
    .error-log-hero-actions { flex-direction: column; }
    .error-log-hero dl { width: 100%; }
    .error-log-hero dl div { width: 50%; min-width: 0; }
    .error-log-clear-button { min-height: 42px; }
    .error-log-empty { min-height: 330px; padding: 30px 8px 92px; }
    .error-log-empty-mascot { width: 196px; height: 176px; }
    .error-log-empty-mascot::after { width: 132px; }
    .error-log-empty-mascot img { width: 114px; height: 171px; }
    .error-log-empty h2 { font-size: 21px; }
    .error-log-empty p { font-size: 13px; }
    .error-log-body { grid-template-columns: minmax(90px, .4fr) minmax(0, 1fr); }
    .error-log-card > header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .error-log-action { grid-column: 1 / -1; }
    .error-log-level { width: max-content; }
    .product-automation-hub-grid { grid-template-columns: 1fr; }
    .product-settings-detail-grid { grid-template-columns: 1fr; }
    .product-automation-intro dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-automation-summary { position: static; }
    .product-automation-actions { flex-direction: column-reverse; }
    .product-automation-actions .btn { width: 100%; }
}

.gateway-console {
    --gateway-border: #dce5f1;
    --gateway-muted: #66758e;
    --gateway-ink: #142038;
}

.gateway-console-heading {
    display: grid;
    gap: 18px;
    margin: 2px 0 20px;
}

.gateway-console-heading .back-link {
    width: max-content;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 750;
}

.gateway-console-heading .back-link svg {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}

.gateway-console-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
}

.gateway-console-logo {
    display: grid;
    width: 86px;
    height: 64px;
    flex: 0 0 auto;
    place-items: center;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--gateway-brand-background, #eef4ff) 40%, #dce5f1);
    border-radius: 8px;
    background: var(--gateway-brand-background, #eef4ff);
}

.gateway-console-logo img {
    display: block;
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
}

.gateway-console-logo svg {
    width: 28px;
    height: 28px;
    color: var(--brand-primary);
}

.gateway-console-identity {
    min-width: 0;
}

.gateway-pix-automatic-link {
    min-height: 38px;
    margin-left: auto;
    flex: 0 0 auto;
    gap: 7px;
}

.gateway-pix-automatic-link svg { width: 15px; height: 15px; }

.gateway-console-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.gateway-console-name h2 {
    margin: 0;
    color: var(--gateway-ink);
    font-size: 23px;
    line-height: 1.2;
}

.gateway-state-pill,
.gateway-feature-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-weight: 750;
    white-space: nowrap;
}

.gateway-state-pill {
    padding: 5px 9px;
    color: #5d6b81;
    background: #e9eef5;
    font-size: 10px;
}

.gateway-state-pill.is-enabled {
    color: #15753b;
    background: #dcf7e6;
}

.gateway-console-identity > p {
    max-width: 760px;
    margin: 5px 0 9px;
    color: var(--gateway-muted);
    font-size: 12px;
    line-height: 1.5;
}

.gateway-console-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    color: #8290a5;
    font-size: 10px;
}

.gateway-author-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--brand-primary);
    font-weight: 750;
}

.gateway-author-link:hover {
    color: var(--brand-primary-strong);
    text-decoration: underline;
}

.gateway-author-link svg {
    width: 10px;
    height: 10px;
}

.gateway-feature-pill {
    padding: 3px 7px;
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
    font-size: 9px;
}

.gateway-console-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 18px;
}

.gateway-config-card,
.gateway-operations-card {
    border-color: var(--gateway-border);
    box-shadow: 0 16px 36px rgba(26, 46, 81, .08);
}

.gateway-config-card {
    overflow: hidden;
    padding: 0;
}

.gateway-config-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--gateway-border);
}

.gateway-config-icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.gateway-config-icon svg {
    width: 18px;
    height: 18px;
}

.gateway-config-header h2,
.gateway-operations-header h2 {
    margin: 0;
    color: var(--gateway-ink);
    font-size: 16px;
}

.gateway-config-header p {
    margin: 3px 0 0;
    color: var(--gateway-muted);
    font-size: 10px;
}

.gateway-security-note {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 5px;
    color: #52637c;
    font-size: 9px;
    font-weight: 700;
}

.gateway-security-note svg {
    width: 12px;
    height: 12px;
    color: #16834a;
}

.gateway-config-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    padding: 24px 22px 28px;
}

.gateway-input-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.gateway-input-group[hidden] {
    display: none !important;
}

.gateway-input-group.is-environment {
    grid-column: 1 / -1;
    max-width: 380px;
}

.gateway-input-group.is-checkout-name {
    grid-column: auto;
    max-width: none;
}

.gateway-input-group.is-checkout-name > small {
    min-height: 0;
}

.gateway-config-body:has(.gateway-input-group.is-checkout-name) .gateway-input-group.is-environment {
    grid-column: auto;
    max-width: none;
}

.gateway-field-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #25324a;
    font-size: 11px;
    font-weight: 750;
}

.gateway-field-label b {
    color: var(--brand-primary);
}

.gateway-field-label em {
    color: #8a97aa;
    font-size: 8px;
    font-style: normal;
    font-weight: 650;
    text-transform: uppercase;
}

.gateway-input-control,
.gateway-select-control {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
}

.gateway-input-control > svg {
    position: absolute;
    left: 13px;
    z-index: 1;
    width: 15px;
    height: 15px;
    color: #8795aa;
    pointer-events: none;
}

.gateway-input-control input,
.gateway-select-control select {
    width: 100%;
    height: 44px;
    min-width: 0;
    border: 1px solid #ced9e8;
    border-radius: 7px;
    outline: 0;
    color: #1e2b43;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 11px;
    font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.gateway-input-control input {
    padding: 0 43px 0 39px;
}

.gateway-file-control input[type="file"] {
    padding: 12px 13px 0 10px;
    cursor: pointer;
}

.gateway-file-control > svg {
    display: none;
}

.gateway-file-control input[type="file"]::file-selector-button {
    margin: -4px 10px 0 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: var(--brand-primary);
    font-family: var(--asv-font-family);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.gateway-select-control select {
    appearance: none;
    padding: 0 40px 0 13px;
    cursor: pointer;
}

.gateway-select-control > svg {
    position: absolute;
    right: 13px;
    width: 15px;
    height: 15px;
    color: #66758e;
    pointer-events: none;
}

.gateway-input-control input:hover,
.gateway-select-control select:hover {
    border-color: #aebed2;
}

.gateway-input-control input:focus,
.gateway-select-control select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.gateway-input-control input::placeholder {
    color: #9aa6b7;
    font-weight: 500;
}

.gateway-secret-toggle {
    position: absolute;
    right: 7px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #718096;
    background: transparent;
    cursor: pointer;
}

.gateway-secret-toggle:hover,
.gateway-secret-toggle.is-visible {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.gateway-secret-toggle svg {
    width: 15px;
    height: 15px;
}

.gateway-input-group > small {
    min-height: 14px;
    color: #7c8ba1;
    font-size: 9px;
    line-height: 1.45;
}

.gateway-saved-value {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 4px;
    color: #13733c;
    font-size: 8px;
    font-weight: 750;
}

.gateway-saved-value svg {
    width: 11px;
    height: 11px;
}

.gateway-config-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 22px;
    border-top: 1px solid var(--gateway-border);
    background: #fafcff;
}

.gateway-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #31415b;
}

.gateway-doc-link > svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.gateway-doc-link span {
    display: grid;
    gap: 1px;
}

.gateway-doc-link strong {
    font-size: 10px;
}

.gateway-doc-link small {
    color: #8290a5;
    font-size: 8px;
}

.gateway-config-actions .btn {
    min-width: 150px;
}

.gateway-operations-card {
    position: sticky;
    top: 18px;
    overflow: hidden;
    padding: 0;
}

.gateway-operations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 20px 16px;
    border-bottom: 1px solid var(--gateway-border);
}

.gateway-operations-header > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-primary);
    font-size: 8px;
    font-weight: 800;
}

.gateway-readiness-list {
    display: grid;
    padding: 10px 20px 4px;
}

.gateway-readiness-list > div {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
}

.gateway-readiness-list > div:not(:last-child)::after {
    position: absolute;
    top: 43px;
    bottom: -15px;
    left: 13px;
    width: 1px;
    background: #dce4ef;
    content: "";
}

.gateway-readiness-list > div > span {
    display: grid;
    width: 28px;
    height: 28px;
    z-index: 1;
    place-items: center;
    border: 1px solid #d4deeb;
    border-radius: 50%;
    color: #718096;
    background: #fff;
    font-size: 9px;
    font-weight: 800;
}

.gateway-readiness-list > div.is-complete > span {
    border-color: #bceacd;
    color: #13733c;
    background: #e8f9ee;
}

.gateway-readiness-list > div.is-error > span {
    border-color: #fecaca;
    color: #b42318;
    background: #fff0f0;
}

.gateway-readiness-list strong,
.gateway-readiness-list small {
    display: block;
}

.gateway-readiness-list strong {
    color: #25324a;
    font-size: 11px;
}

.gateway-readiness-list small {
    margin-top: 3px;
    color: #7c8ba1;
    font-size: 8px;
    line-height: 1.35;
}

.gateway-runtime-details {
    margin: 12px 20px 0;
    padding: 4px 0;
    border-top: 1px solid var(--gateway-border);
    border-bottom: 1px solid var(--gateway-border);
}

.gateway-runtime-details > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.gateway-runtime-details dt,
.gateway-runtime-details dd {
    margin: 0;
    font-size: 9px;
}

.gateway-webhook-box {
    margin: 14px 20px 0;
    padding: 13px;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: #f8fbff;
}

.gateway-webhook-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gateway-webhook-heading > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 7px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.gateway-webhook-heading svg {
    width: 15px;
    height: 15px;
}

.gateway-webhook-heading strong,
.gateway-webhook-heading small {
    display: block;
}

.gateway-webhook-heading strong {
    color: #25324a;
    font-size: 10px;
}

.gateway-webhook-heading small {
    margin-top: 2px;
    color: #7c8ba1;
    font-size: 8px;
}

.gateway-webhook-copy {
    display: flex;
    min-width: 0;
    margin-top: 10px;
}

.gateway-webhook-copy input {
    width: 100%;
    height: 35px;
    min-width: 0;
    padding: 0 10px;
    border: 1px solid #ced9e8;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: #34445f;
    background: #fff;
    font-size: 8px;
}

.gateway-webhook-copy button {
    display: grid;
    width: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid var(--brand-primary);
    border-radius: 0 6px 6px 0;
    color: #fff;
    background: var(--brand-primary);
    cursor: pointer;
}

.gateway-webhook-copy button.is-copied {
    border-color: #159447;
    background: #159447;
}

.gateway-webhook-copy svg {
    width: 14px;
    height: 14px;
}

.gateway-webhook-box > p {
    margin: 8px 0 0;
    color: #7c8ba1;
    font-size: 8px;
    line-height: 1.45;
}

.gateway-runtime-details dt {
    color: #7c8ba1;
}

.gateway-runtime-details dd {
    color: #2c3a52;
    font-weight: 750;
    text-align: right;
}

.gateway-connection-message {
    margin: 12px 20px 0;
    padding: 10px 11px;
    border-radius: 6px;
    color: #607088;
    background: #f3f6fa;
    font-size: 9px;
    line-height: 1.45;
}

.gateway-connection-message.is-success {
    color: #156f3a;
    background: #edf9f1;
}

.gateway-connection-message.is-error {
    color: #a22921;
    background: #fff1f1;
}

.gateway-operation-actions {
    display: grid;
    gap: 8px;
    padding: 15px 20px;
}

.gateway-operation-actions form {
    margin: 0;
}

.gateway-operation-actions .btn {
    min-height: 40px;
}

.gateway-operation-actions .btn svg {
    width: 15px;
    height: 15px;
}

.gateway-operation-actions .btn:disabled {
    color: #8996aa;
    background: #e8edf4;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.gateway-operation-actions .btn.is-danger {
    border-color: #f2caca;
    color: #b42318;
    background: #fff3f3;
}

.gateway-help-box {
    margin: 0 20px 20px;
    padding: 13px;
    border: 1px solid #e2e8f1;
    border-radius: 7px;
    background: #fafcff;
}

.gateway-help-box > strong {
    color: #2b3950;
    font-size: 10px;
}

.gateway-help-box ul {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 15px;
    color: #718096;
    font-size: 8px;
    line-height: 1.4;
}

@media (max-width: 1080px) {
    .gateway-console-layout {
        grid-template-columns: 1fr;
    }

    .gateway-operations-card {
        position: static;
    }

    .gateway-readiness-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .gateway-readiness-list > div:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 680px) {
    .gateway-console-heading {
        gap: 14px;
        margin-bottom: 16px;
    }

    .gateway-console-title {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .gateway-pix-automatic-link { width: 100%; margin-left: 0; }

    .gateway-console-logo {
        width: 68px;
        height: 56px;
        padding: 10px;
    }

    .gateway-console-name {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .gateway-console-name h2 {
        font-size: 19px;
    }

    .gateway-console-meta {
        gap: 5px 8px;
    }

    .gateway-config-header {
        align-items: flex-start;
        padding: 17px;
    }

    .gateway-security-note {
        display: none;
    }

    .gateway-config-body {
        grid-template-columns: 1fr;
        padding: 19px 17px 22px;
    }

    .gateway-input-group.is-environment {
        grid-column: auto;
        max-width: none;
    }

    .gateway-config-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 15px 17px;
    }

    .gateway-config-actions .btn {
        width: 100%;
    }

    .gateway-doc-link {
        justify-content: center;
    }

    .gateway-readiness-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .gateway-readiness-list > div:not(:last-child)::after {
        display: block;
    }
}

/* Communication, e-mail and support settings */
.communication-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 930px;
    padding: 5px;
    border: 1px solid #dbe5f2;
    border-radius: 8px;
    background: #f8fafc;
}

.communication-tabs > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #64748b;
    text-decoration: none;
}

.communication-tabs > a.active {
    border-color: #cddcf0;
    color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

.communication-tabs > a > svg {
    width: 20px;
    height: 20px;
    justify-self: center;
}

.communication-tabs > a > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.communication-tabs strong {
    color: #172033;
    font-size: 13px;
}

.communication-tabs small {
    color: #71819b;
    font-size: 10px;
}

.communication-panel,
.email-template-list,
.email-template-editor,
.email-live-preview {
    padding: 0;
    overflow: hidden;
}

.communication-panel-header,
.email-live-preview > header {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 16px 20px;
    border-bottom: 1px solid #e7edf6;
}

.communication-panel-header > span,
.email-live-preview > header > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.communication-panel-header > span svg,
.email-live-preview > header > span svg {
    width: 21px;
    height: 21px;
}

.communication-panel-header > div,
.email-live-preview > header > div {
    min-width: 0;
}

.communication-panel-header h2,
.email-live-preview h2,
.email-template-list h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.communication-panel-header p,
.email-live-preview p,
.email-template-list p {
    margin: 4px 0 0;
    color: #71819b;
    font-size: 11px;
}

.smtp-state {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    color: #64748b;
    background: #edf1f6;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.smtp-state.is-enabled {
    color: #137a3d;
    background: #dcf8e7;
}

.smtp-settings-form {
    display: grid;
}

.smtp-master-toggle {
    margin: 18px 20px 0;
    border: 1px solid var(--brand-primary-border);
    border-radius: 7px;
    background: var(--brand-primary-subtle);
}

.smtp-fields-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) 110px minmax(150px, .7fr) repeat(2, minmax(180px, 1fr));
    gap: 14px;
    padding: 18px 20px;
}

.smtp-fields-grid .field-group:nth-child(4),
.smtp-fields-grid .field-group:nth-child(5),
.smtp-fields-grid .field-group:nth-child(6),
.smtp-fields-grid .field-group:nth-child(7) {
    grid-column: span 1;
}

.smtp-fields-grid select,
.email-template-editor textarea,
.support-identity-fields textarea {
    width: 100%;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #0f172a;
    background: #fff;
    font-family: var(--asv-font-family);
}

.smtp-fields-grid select {
    min-height: 46px;
    padding: 0 12px;
}

.settings-toggle-row {
    display: flex;
    position: relative;
    align-items: center;
    gap: 18px;
    min-height: 64px;
    padding: 12px 14px;
    cursor: pointer;
}

.settings-toggle-row > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-toggle-row strong {
    color: #172033;
    font-size: 12px;
}

.settings-toggle-row small {
    color: #71819b;
    font-size: 10px;
    line-height: 1.4;
}

.settings-toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-row > i {
    display: block;
    position: relative;
    width: 40px;
    height: 22px;
    flex: 0 0 auto;
    margin-left: auto;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background .16s ease;
}

.settings-toggle-row > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
    content: "";
    transition: transform .16s ease;
}

.settings-toggle-row input:checked + i {
    background: var(--brand-primary);
}

.settings-toggle-row input:checked + i::after {
    transform: translateX(18px);
}

.settings-toggle-row input:focus-visible + i {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.compact-toggle {
    min-height: 56px;
    margin: 0 20px;
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid #e7edf6;
}

.communication-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
}

.smtp-test-form {
    display: flex;
    justify-content: flex-start;
    margin: -57px 20px 20px;
}

.smtp-test-form .btn svg {
    width: 16px;
    height: 16px;
}

.email-template-workspace {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.email-template-list {
    grid-row: span 2;
}

.email-template-list > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 76px;
    padding: 16px 18px;
    border-bottom: 1px solid #e7edf6;
}

.email-template-list > header > span {
    display: inline-flex;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-size: 11px;
    font-weight: 800;
}

.email-template-list nav {
    display: grid;
    padding: 8px;
}

.email-template-list nav > a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 72px;
    padding: 9px 10px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.email-template-list nav > a.active {
    background: var(--brand-primary-soft);
}

.email-template-list nav > a > svg {
    width: 18px;
    height: 18px;
    justify-self: center;
    color: var(--brand-primary);
}

.email-template-list nav > a > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.email-template-list nav strong {
    color: #172033;
    font-size: 11px;
}

.email-template-list nav small {
    overflow: hidden;
    color: #71819b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-template-list nav i {
    padding: 4px 6px;
    border-radius: 999px;
    color: #64748b;
    background: #edf1f6;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.email-template-list nav i.enabled {
    color: #137a3d;
    background: #dcf8e7;
}

.email-template-editor-body {
    display: grid;
    gap: 16px;
    padding: 18px 20px 0;
}

.email-template-editor-body .compact-toggle {
    margin: -4px 0 0;
}

.email-template-editor textarea,
.support-identity-fields textarea {
    min-height: 150px;
    resize: vertical;
    padding: 12px;
    line-height: 1.5;
}

.template-variables {
    display: grid;
    gap: 8px;
}

.template-variables > strong {
    color: #52627b;
    font-size: 10px;
    text-transform: uppercase;
}

.template-variables > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.template-variables code {
    padding: 5px 7px;
    border: 1px solid #dbe5f2;
    border-radius: 5px;
    color: var(--brand-primary);
    background: #f8fafc;
    font-size: 10px;
}

.email-template-editor .communication-form-actions {
    padding-right: 0;
    padding-left: 0;
}

.email-template-editor .communication-form-actions.has-delete {
    justify-content: space-between;
}

.email-template-editor .communication-form-actions .btn svg {
    width: 15px;
    height: 15px;
}

.email-template-delete-warning {
    margin: 0;
    color: #536177;
    font-size: 12px;
    line-height: 1.6;
}

.email-live-preview iframe {
    display: block;
    width: 100%;
    min-height: 310px;
    border: 0;
    background: #fff;
}

.email-category-bar {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(620px, 2fr) auto;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    padding: 16px 18px;
}

.email-template-create-button {
    min-height: 44px;
    padding-inline: 16px;
    white-space: nowrap;
}

.email-template-create-button svg {
    width: 16px;
    height: 16px;
}

.email-category-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.email-category-heading > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-category-heading svg {
    width: 20px;
    height: 20px;
}

.email-category-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
}

.email-category-heading p {
    margin: 3px 0 0;
    color: #71819b;
    font-size: 10px;
}

.email-category-bar nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

.email-category-bar nav a {
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid #e0e8f3;
    border-radius: 7px;
    color: #52627b;
    background: #fff;
    text-decoration: none;
}

.email-category-bar nav a:hover,
.email-category-bar nav a.active {
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
    background: var(--brand-primary-subtle);
}

.email-category-bar nav svg {
    width: 16px;
    height: 16px;
}

.email-category-bar nav span {
    overflow: hidden;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-category-bar nav i {
    min-width: 20px;
    padding: 3px 5px;
    border-radius: 999px;
    color: #71819b;
    background: #edf1f6;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.email-template-workspace {
    grid-template-columns: 280px minmax(470px, 1fr) minmax(390px, .82fr);
    gap: 16px;
}

.email-template-list {
    grid-row: auto;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
}

.email-template-list nav {
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.email-template-group-label {
    display: block;
    padding: 11px 10px 5px;
    color: #8290a5;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.email-template-list nav > a {
    min-height: 66px;
    margin-bottom: 2px;
    border: 1px solid transparent;
}

.email-template-list nav > a:hover {
    border-color: #e0e8f3;
    background: #f8fafc;
}

.email-template-list nav > a.active {
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-soft);
}

.email-template-list nav strong,
.email-template-list nav small {
    line-height: 1.35;
}

.email-template-list nav small {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.email-template-editor,
.email-live-preview {
    align-self: start;
}

.email-editor-header {
    padding-right: 16px;
}

.email-category-chip {
    margin-left: auto;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    font-size: 8px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
}

.email-template-editor-body {
    gap: 14px;
    padding: 16px 18px 0;
}

.email-custom-template-fields {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 12px;
}

.email-template-group-link {
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 8px;
    background: var(--brand-primary-subtle);
}

.email-template-group-link legend {
    padding: 0 6px;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
}

.email-template-group-link > p {
    margin: 0 0 11px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.email-template-group-link > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.email-template-group-link label {
    min-width: 0;
    cursor: pointer;
}

.email-template-group-link label > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.email-template-group-link label > span {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    color: #52627b;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.email-template-group-link label > span svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.email-template-group-link label b {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-template-group-link input:checked + span {
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
    box-shadow: inset 3px 0 0 var(--brand-primary);
}

.email-template-group-link input:focus-visible + span {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
    outline-offset: 2px;
}

.email-template-create-dialog {
    width: min(700px, calc(100vw - 32px));
}

.email-template-create-body {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
}

.email-template-create-body .email-template-group-link > div {
    max-height: 220px;
    overflow-y: auto;
    padding: 2px;
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 11px;
    line-height: 1.4;
}

.email-html-field,
.email-html-label {
    display: grid;
    gap: 5px;
}

.email-html-label > span {
    color: #172033;
    font-size: 11px;
    font-weight: 750;
}

.email-html-label > small {
    color: #71819b;
    font-size: 9px;
}

.email-html-editor {
    overflow: hidden;
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    background: #fff;
}

.email-html-editor:focus-within {
    border-color: var(--brand-primary-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.email-html-toolbar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.email-format-actions,
.email-editor-modes,
.email-preview-size {
    display: flex;
    align-items: center;
    gap: 3px;
}

.email-format-actions > span {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: #dbe5f2;
}

.email-format-actions button,
.email-editor-modes button,
.email-preview-size button {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #52627b;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
}

.email-format-actions button:hover,
.email-format-actions button.active,
.email-format-actions button[aria-pressed="true"],
.email-editor-modes button.active,
.email-preview-size button.active {
    border-color: #cfdef2;
    color: var(--brand-primary);
    background: #fff;
}

.email-format-actions button svg {
    width: 15px;
    height: 15px;
}

.email-editor-modes {
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    background: #eef3f8;
}

.email-editor-modes button {
    height: 28px;
}

.email-link-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 8px;
    z-index: 8;
    width: min(390px, calc(100% - 16px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 7px;
    padding: 10px;
    border: 1px solid #cddcf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.email-link-panel[hidden] {
    display: none;
}

.email-link-panel label {
    display: grid;
    gap: 4px;
}

.email-link-panel label span {
    color: #52627b;
    font-size: 9px;
    font-weight: 750;
}

.email-link-panel input {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid #d7e1ee;
    border-radius: 6px;
    font-family: var(--asv-font-family);
}

.email-link-panel .btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 9px;
}

.email-editor-canvas,
.email-editor-source {
    width: 100%;
    min-height: 430px;
    margin: 0;
    padding: 22px;
    border: 0;
    outline: 0;
    color: #172033;
    background: #fff;
    font: 14px/1.65 Arial, sans-serif;
    resize: vertical;
}

.email-editor-canvas {
    display: none;
    overflow: auto;
}

.email-editor-canvas h1,
.email-editor-canvas h2 {
    color: #0f172a;
    line-height: 1.3;
}

.email-editor-canvas a {
    color: var(--brand-primary);
}

.email-editor-canvas a.button {
    display: inline-block;
    padding: 12px 19px;
    border-radius: 6px;
    color: #fff;
    background: var(--brand-primary);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    font-weight: 750;
    text-decoration: none;
}

.email-variable-token {
    display: inline;
    margin: 0 1px;
    padding: 1px 3px;
    border: 0;
    border-bottom: 1px dashed var(--brand-primary-border);
    border-radius: 3px;
    color: inherit;
    background: var(--brand-primary-soft);
    font-family: var(--asv-font-family);
    vertical-align: baseline;
}

.email-variable-token:hover {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-editor-source {
    display: block;
    color: var(--brand-primary-soft);
    background: #101827;
    font: 12px/1.65 Consolas, "Courier New", monospace;
    tab-size: 2;
}

.email-html-editor.is-enhanced .email-editor-canvas {
    display: block;
}

.email-html-editor.is-enhanced .email-editor-source {
    display: none;
}

.email-html-editor.is-enhanced.is-html-mode .email-editor-canvas {
    display: none;
}

.email-html-editor.is-enhanced.is-html-mode .email-editor-source {
    display: block;
}

.email-html-editor.is-html-mode .email-format-actions {
    opacity: .42;
    pointer-events: none;
}

.template-variables > p {
    margin: -4px 0 0;
    color: #8290a5;
    font-size: 9px;
}

.template-variables button {
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.template-variables button:hover code {
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-live-preview {
    position: sticky;
    top: 16px;
}

.email-live-preview > header {
    padding-right: 12px;
}

.email-preview-size {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px;
    border: 1px solid #dbe5f2;
    border-radius: 7px;
    background: #f1f5f9;
}

.email-preview-size button {
    min-width: 54px;
    height: 27px;
    padding: 0 7px;
    font-size: 8px;
}

.email-preview-stage {
    min-height: 640px;
    display: flex;
    justify-content: center;
    overflow: auto;
    padding: 14px;
    background: #e9eff6;
}

.email-preview-envelope {
    display: grid;
    gap: 4px;
    padding: 12px 15px;
    border-bottom: 1px solid #dce5f0;
    background: #fff;
}

.email-preview-envelope span {
    color: #8290a5;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.email-preview-envelope strong {
    overflow: hidden;
    color: #172033;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-live-preview iframe {
    width: 100%;
    min-height: 610px;
    border: 1px solid #d4dfec;
    border-radius: 6px;
    background: #eef3f9;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    transition: width .2s ease;
}

.email-live-preview.is-mobile-preview iframe {
    width: min(390px, 100%);
}

@media (max-width: 1480px) {
    .email-template-workspace {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .email-template-list {
        grid-row: span 2;
    }

    .email-live-preview {
        grid-column: 2;
        position: static;
    }
}

@media (max-width: 1120px) {
    .email-category-bar {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .email-template-create-button {
        justify-self: start;
    }

    .email-template-workspace {
        grid-template-columns: 1fr;
    }

    .email-template-list,
    .email-live-preview {
        grid-row: auto;
        grid-column: auto;
        position: static;
        max-height: none;
    }

    .email-template-list nav {
        max-height: 370px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .email-template-group-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .email-category-bar nav {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .email-category-bar nav a {
        min-width: 140px;
    }

    .email-template-list nav {
        grid-template-columns: 1fr;
    }

    .email-custom-template-fields,
    .email-template-group-link > div {
        grid-template-columns: 1fr;
    }

    .email-template-create-button {
        width: 100%;
    }

    .email-html-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .email-format-actions {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .email-editor-modes {
        align-self: stretch;
    }

    .email-editor-modes button {
        flex: 1;
    }

    .email-editor-canvas,
    .email-editor-source {
        min-height: 360px;
        padding: 16px;
    }

    .email-link-panel {
        right: auto;
        left: 8px;
        grid-template-columns: 1fr 1fr;
    }

    .email-link-panel label {
        grid-column: 1 / -1;
    }

    .email-live-preview > header {
        flex-wrap: wrap;
    }

    .email-preview-size {
        width: 100%;
        margin-left: 55px;
    }

    .email-preview-size button {
        flex: 1;
    }
}

.support-settings-form {
    display: grid;
    gap: 18px;
}

.support-identity-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.support-bcc-field,
.support-signature-field {
    grid-column: 1 / -1;
}

.support-bcc-field > small:not(.field-error) {
    color: #71819b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.support-rules-list {
    display: grid;
}

.support-rules-list .settings-toggle-row {
    margin: 0 20px;
    border-bottom: 1px solid #e7edf6;
}

.support-rules-list .settings-toggle-row:last-child {
    border-bottom: 0;
}

@media (max-width: 1180px) {
    .smtp-fields-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 880px) {
    .email-template-workspace {
        grid-template-columns: 1fr;
    }

    .email-template-list {
        grid-row: auto;
    }

    .email-template-list nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .smtp-fields-grid,
    .support-identity-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .communication-tabs,
    .smtp-fields-grid,
    .support-identity-fields,
    .email-template-list nav {
        grid-template-columns: 1fr;
    }

    .communication-tabs > a {
        min-height: 54px;
    }

    .communication-panel-header,
    .email-live-preview > header {
        align-items: flex-start;
    }

    .smtp-state {
        margin-left: 0;
    }

    .smtp-test-form {
        margin: 0 16px 16px;
    }

    .communication-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .communication-form-actions .btn,
    .smtp-test-form .btn {
        width: 100%;
    }

    .support-bcc-field,
    .support-signature-field {
        grid-column: auto;
    }
}

.status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #e2e8f0;
    color: #334155;
}

.status.active,
.status.paid {
    color: #166534;
    background: #dcfce7;
}

.status.open {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.status.overdue {
    color: #991b1b;
    background: #fee2e2;
}

.status.customer_reply,
.status.urgent {
    color: #9f1239;
    background: #ffe4e6;
}

.status.in_progress {
    color: #92400e;
    background: #fef3c7;
}

.status.answered {
    color: #166534;
    background: #dcfce7;
}

.status.closed {
    color: #475569;
    background: #e2e8f0;
}

.status.paused {
    color: #92400e;
    background: #fef3c7;
}

.status.canceled {
    color: #475569;
    background: #e2e8f0;
}

.client-list,
.invoice-list {
    display: grid;
    gap: 12px;
}

.client-row,
.invoice-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.client-row strong,
.client-row span,
.invoice-row strong,
.invoice-row span {
    display: block;
}

.client-hero-band {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-bottom: 16px;
    padding: 30px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e, var(--brand-primary-strong));
}

.client-hero-band h2 {
    margin: 0;
    font-size: 32px;
}

.client-hero-band p:not(.eyebrow) {
    margin-bottom: 0;
    color: rgba(255, 255, 255, .78);
}

.client-hero-band .eyebrow {
    color: rgba(255, 255, 255, .78);
}

.client-hero-band strong {
    font-size: 36px;
    white-space: nowrap;
}

.client-hero-band strong span {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
}

.invoice-meta {
    display: flex;
    gap: 12px;
    align-items: center;
}

.operations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.operation-panel {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(219, 227, 238, .92);
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
}

.operation-header {
    min-height: 46px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.operation-header h2 {
    margin: 0;
    font-size: 19px;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #166534;
    font-size: 12px;
    font-weight: 800;
}

.live-indicator i,
.staff-row > i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.access-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.access-summary > div {
    min-width: 0;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.access-summary svg {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--primary);
    fill: currentColor;
}

.access-summary span,
.access-summary strong {
    display: block;
}

.access-summary span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.access-summary strong {
    color: var(--text);
    font-size: 20px;
}

.compact-feed,
.activity-feed,
.staff-list {
    display: grid;
}

.feed-row,
.activity-row,
.staff-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;
    border-top: 1px solid var(--line);
}

.feed-row > div,
.activity-row > div,
.staff-row > div {
    min-width: 0;
}

.feed-row strong,
.feed-row span,
.activity-row strong,
.activity-row span,
.staff-row strong,
.staff-row small {
    display: block;
}

.feed-row span,
.activity-row span,
.staff-row small,
.feed-row > small,
.activity-row > small {
    color: var(--muted);
    font-size: 12px;
}

.feed-row span,
.activity-row span {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-row > small,
.activity-row > small {
    flex: 0 0 auto;
}

.billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.billing-grid > div {
    min-width: 0;
    padding: 18px;
}

.billing-grid > div:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.billing-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
}

.billing-grid span,
.billing-grid strong {
    display: block;
}

.billing-grid span {
    color: var(--muted);
    font-size: 12px;
}

.billing-grid strong {
    margin-top: 7px;
    color: var(--text);
    font-size: 22px;
    overflow-wrap: anywhere;
}

.staff-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #334155;
    font-weight: 800;
}

.staff-row > i {
    margin-left: auto;
    flex: 0 0 auto;
}

.activity-panel {
    grid-row: span 2;
}

.activity-feed {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 5px;
}

.support-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.support-summary a {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.support-summary span,
.support-summary strong {
    display: block;
}

.support-summary span {
    color: var(--muted);
    font-size: 12px;
}

.support-summary strong {
    margin-top: 7px;
    font-size: 25px;
}

.support-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}

.support-actions > a:not(.btn) {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.empty-state {
    margin: 0;
    padding: 18px 0;
    color: var(--muted);
    line-height: 1.55;
}

/* Admin overview */
.admin-dashboard {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
}

.admin-dashboard .admin-topbar {
    margin-bottom: 26px;
}

.admin-main .page-heading h1 {
    color: #0b1324;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.2;
}

.admin-main .page-heading p {
    margin: 7px 0 0;
    color: var(--dashboard-muted);
    font-size: 13px;
}

.admin-dashboard .topbar-actions {
    gap: 9px;
}

.dashboard-search {
    width: min(290px, 26vw);
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    color: #7b8799;
    border: 1px solid var(--dashboard-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dashboard-search:focus-within {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.dashboard-search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.dashboard-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #172033;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
}

.dashboard-search input::placeholder {
    color: #8995a7;
}

.admin-dashboard .icon-action {
    position: relative;
    border-color: var(--dashboard-line, #dfe6f1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.notification-action i {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 6px;
    height: 6px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-primary-strong);
    box-sizing: content-box;
}

.admin-profile {
    min-width: 208px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 12px 6px 7px;
    border-color: var(--dashboard-line, #dfe6f1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.user-avatar {
    width: 34px;
    height: 34px;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 50%;
    background: #172554;
    font-size: 13px;
    font-weight: 800;
}

.admin-profile .user-details {
    min-width: 0;
}

.admin-profile .user-details strong,
.admin-profile .user-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile .user-details strong {
    color: #172033;
    font-size: 13px;
    font-weight: 750;
}

.admin-profile .user-details small {
    margin-top: 2px;
    color: var(--dashboard-muted, #68758a);
    font-size: 10px;
    font-weight: 600;
}

.admin-dashboard .stats-grid {
    gap: 14px;
}

.admin-dashboard .stat-card {
    position: relative;
    min-height: 154px;
    padding: 19px 20px;
    color: #111827;
    border: 1px solid var(--dashboard-line);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    overflow: hidden;
}

.admin-dashboard .stat-card::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--brand-primary);
    opacity: 0;
    transition: opacity .18s ease;
}

.admin-dashboard .stat-card:hover::after,
.admin-dashboard .stat-card.featured::after {
    opacity: 1;
}

.admin-dashboard .stat-card.featured {
    color: #111827;
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    background: #fff;
}

.admin-dashboard .stat-card.featured span,
.admin-dashboard .stat-card.featured small {
    color: var(--dashboard-muted);
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-dashboard .stat-card-top > span:first-child {
    color: #4b5870;
    font-size: 12px;
    font-weight: 750;
}

.stat-icon {
    width: 34px;
    height: 34px;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary) !important;
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.stat-card:nth-child(2) .stat-icon {
    color: var(--brand-primary-strong) !important;
    background: var(--brand-primary-soft);
}

.stat-card:nth-child(3) .stat-icon {
    color: var(--brand-primary-strong) !important;
    background: var(--brand-primary-soft);
}

.stat-card:nth-child(4) .stat-icon {
    color: #475569 !important;
    background: #f1f5f9;
}

.stat-icon svg {
    width: 17px;
    height: 17px;
}

.admin-dashboard .stat-card strong {
    margin: 16px 0 5px;
    color: #090f1d;
    font-size: 27px;
    font-weight: 750;
    line-height: 1.1;
}

.admin-dashboard .stat-card small {
    color: var(--dashboard-muted);
    font-size: 11px;
}

.admin-dashboard .operations-grid {
    gap: 14px;
    margin-top: 14px;
}

.admin-dashboard .operation-panel {
    padding: 0;
    border-color: var(--dashboard-line);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.admin-dashboard .operation-header {
    min-height: 62px;
    align-items: center;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid #e8edf4;
}

.operation-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.operation-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary-strong);
    border-radius: 8px;
    background: #eef2ff;
}

.operation-icon svg {
    width: 16px;
    height: 16px;
}

.admin-dashboard .operation-header h2 {
    color: #182135;
    font-size: 14px;
    font-weight: 750;
}

.admin-dashboard .access-summary,
.admin-dashboard .billing-grid,
.admin-dashboard .staff-list,
.admin-dashboard .activity-feed,
.admin-dashboard .support-summary {
    margin: 16px 18px;
}

.admin-dashboard .compact-feed {
    margin: 0 18px 10px;
}

.admin-dashboard .access-summary > div,
.admin-dashboard .support-summary a {
    background: #f8fafc;
    border-color: #e4eaf2;
}

.admin-dashboard .billing-grid {
    border-color: #e4eaf2;
}

.admin-dashboard .billing-grid > div {
    padding: 20px 18px;
}

.admin-dashboard .billing-grid span {
    font-size: 11px;
    font-weight: 650;
}

.admin-dashboard .billing-grid strong {
    color: #090f1d;
    font-size: 21px;
    font-weight: 700;
}

.admin-dashboard .feed-row,
.admin-dashboard .activity-row,
.admin-dashboard .staff-row {
    padding: 12px 4px;
    border-color: #edf1f6;
}

.admin-dashboard .feed-row strong,
.admin-dashboard .activity-row strong,
.admin-dashboard .staff-row strong {
    color: #202a3d;
    font-size: 12px;
    font-weight: 700;
}

.admin-dashboard .support-actions {
    padding: 0 18px 18px;
}

.dashboard-search-empty {
    margin: 16px 0 0;
    padding: 28px;
    color: var(--dashboard-muted);
    border: 1px dashed #cdd6e3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    text-align: center;
    font-size: 13px;
}

[data-admin-search-item][hidden] {
    display: none;
}

/* Client administration */
.admin-clients,
.admin-client-create {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
}

.client-directory {
    padding: 0;
    overflow: hidden;
}

.client-directory-header {
    padding: 20px 22px;
    border-bottom: 1px solid #e8edf4;
}

.client-directory-header h2,
.form-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 16px;
}

.client-directory-header p,
.form-section-heading p {
    margin: 5px 0 0;
    color: #68758a;
    font-size: 11px;
}

.client-directory-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-directory-actions .btn {
    gap: 8px;
}

.client-directory-actions .btn svg {
    width: 16px;
    height: 16px;
}

.client-table-wrap {
    overflow-x: auto;
}

.client-directory-empty-state {
    min-height: 286px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 15px;
    padding: 46px 24px 52px;
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--brand-primary) 2.5%, #fff) 100%);
    text-align: center;
}

.client-directory-empty-state[hidden] {
    display: none;
}

.client-directory-empty-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary-border);
    border-radius: 14px;
    background: var(--brand-primary-soft);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.client-directory-empty-icon svg {
    width: 25px;
    height: 25px;
}

.client-directory-empty-state h3 {
    margin: 0;
    color: #172033;
    font-size: 18px;
    line-height: 1.3;
}

.client-directory-empty-state p {
    max-width: 440px;
    margin: 6px 0 0;
    color: #68758a;
    font-size: 12px;
    line-height: 1.6;
}

.client-directory-empty-state .btn {
    min-height: 40px;
    gap: 8px;
}

.client-directory-empty-state .btn svg {
    width: 16px;
    height: 16px;
}

.client-directory-search-empty {
    min-height: 240px;
}

.client-table {
    width: 100%;
    border-collapse: collapse;
}

.client-table th,
.client-table td {
    padding: 15px 18px;
    border-bottom: 1px solid #edf1f6;
    text-align: left;
    vertical-align: middle;
}

.client-table th {
    color: #7b8799;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.client-table td {
    color: #263247;
    font-size: 12px;
}

.client-table tbody tr {
    transition: background .16s ease;
}

.client-table tbody tr:hover {
    background: #fafcff;
}

.client-table tbody tr[data-client-row-url] {
    cursor: pointer;
}

.client-table tbody tr[data-client-row-url]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.client-table td > strong,
.client-table td > small,
.client-identity strong,
.client-identity small {
    display: block;
}

.client-table td > small,
.client-identity small {
    margin-top: 3px;
    color: #7b8799;
    font-size: 10px;
}

.client-identity {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 8px;
    background: #243b76;
    font-size: 12px;
    font-weight: 800;
}

/* Refined client directory */
.admin-clients .client-directory {
    border-color: #dfe6f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
}

.admin-clients .client-directory-header {
    min-height: 94px;
    padding: 20px 22px;
    background: #fff;
}

.admin-clients .client-directory-header h2 {
    font-size: 17px;
}

.client-directory-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-directory-title > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 13%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.client-directory-title svg {
    width: 18px;
    height: 18px;
}

.admin-clients .client-directory-actions {
    gap: 12px;
}

.client-directory-summary {
    min-height: 44px;
    display: flex;
    align-items: stretch;
    border: 1px solid #e1e8f1;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}

.client-directory-summary > span {
    min-width: 72px;
    display: grid;
    align-content: center;
    gap: 1px;
    padding: 5px 12px;
    border-right: 1px solid #e1e8f1;
}

.client-directory-summary > span:last-child {
    border-right: 0;
}

.client-directory-summary small {
    color: #7a879a;
    font-size: 9px;
    font-weight: 700;
}

.client-directory-summary strong {
    color: #172033;
    font-size: 13px;
}

.admin-clients .client-table {
    table-layout: fixed;
}

.admin-clients .client-table th,
.admin-clients .client-table td {
    padding-right: 20px;
    padding-left: 20px;
}

.admin-clients .client-table th {
    height: 46px;
    color: #718097;
    background: #f7f9fc;
    letter-spacing: 0;
}

.admin-clients .client-table th:first-child {
    width: 26%;
}

.admin-clients .client-table th:nth-child(2) {
    width: 18%;
}

.admin-clients .client-table th:nth-child(3) {
    width: 10%;
}

.admin-clients .client-table th:nth-child(4),
.admin-clients .client-table th:nth-child(5) {
    width: 11%;
}

.admin-clients .client-table th:nth-child(6) {
    width: 14%;
}

.admin-clients .client-table th:last-child {
    width: 112px;
}

.admin-clients .client-table td {
    height: 84px;
    font-size: 13px;
}

.admin-clients .client-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
}

.product-plans-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-catalog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.product-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    padding: 20px 22px;
}

.product-catalog-toolbar > div:first-child {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-catalog-toolbar > div:first-child > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 13%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.product-catalog-toolbar h2,
.product-catalog-toolbar p {
    margin: 0;
}

.product-catalog-toolbar h2 {
    color: #172033;
    font-size: 17px;
}

.product-catalog-toolbar p {
    margin-top: 4px;
    color: #68758a;
    font-size: 12px;
}

.product-catalog-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex: 0 0 auto;
}

.product-catalog-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-left: auto;
    padding: 0 4px;
    border: 1px solid #e2eaf4;
    border-radius: 8px;
    background: #fbfdff;
}

.product-catalog-summary span {
    min-width: 68px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
}

.product-catalog-summary span + span {
    border-left: 1px solid #e2eaf4;
}

.product-catalog-summary small {
    color: #718096;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

.product-catalog-summary strong {
    color: #101827;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}

.product-catalog-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.product-catalog-form {
    display: grid;
    gap: 14px;
}

.product-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f6;
}

.product-form-header > span,
.catalog-row-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 13%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.product-form-header h2,
.product-form-header p {
    margin: 0;
}

.product-form-header h2 {
    color: #172033;
    font-size: 17px;
}

.product-form-header p {
    margin-top: 4px;
    color: #68758a;
    font-size: 12px;
}

.product-catalog-form label {
    display: grid;
    gap: 7px;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
}

.product-catalog-form input,
.product-catalog-form select,
.product-catalog-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    color: #172033;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 13px;
    font-weight: 700;
}

.product-catalog-form textarea {
    min-height: 86px;
    padding-top: 12px;
    resize: vertical;
}

.catalog-slug-field,
.catalog-link-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    background: #f8fafc;
}

.catalog-slug-field b {
    flex: 0 0 auto;
    padding-left: 12px;
    color: #66758d;
    font-size: 12px;
}

.product-catalog-form .catalog-slug-field input,
.catalog-link-copy input {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.catalog-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.catalog-toggle {
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: 9px;
}

.catalog-toggle input {
    width: 17px;
    min-height: 17px;
    flex: 0 0 auto;
}

.catalog-toggle span {
    color: #4f5f76;
    font-size: 12px;
}

.catalog-inline-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: #66758d;
    border: 1px dashed #cbd8ea;
    border-radius: 8px;
    background: #f8fafc;
}

.catalog-inline-empty p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
}

.field-error {
    color: #b42318;
    font-size: 11px;
    font-weight: 800;
}

.product-catalog-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.product-catalog-panel {
    padding: 0;
    overflow: hidden;
}

.catalog-list,
.catalog-group-list,
.catalog-group-products {
    display: grid;
}

.catalog-group-list {
    gap: 16px;
}

.catalog-group-card {
    overflow: visible;
    border: 1px solid #dfe8f3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.catalog-group-card:has(.catalog-manage-menu.is-open) {
    position: relative;
    z-index: 30;
}

.catalog-group-head {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(190px, auto) minmax(360px, .8fr);
    align-items: center;
    gap: 20px;
    padding: 22px 24px 20px;
    border-bottom: 1px solid #dde7f3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.catalog-group-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
}

.catalog-group-identity .catalog-row-icon {
    width: 46px;
    height: 46px;
    border-color: color-mix(in srgb, var(--brand-primary) 22%, #d8e4f3);
    background: #eef5ff;
}

.catalog-group-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.catalog-group-count,
.catalog-management-badge {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #52617b;
    padding: 7px 10px;
    border: 1px solid #e3ebf5;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 11px;
    white-space: nowrap;
}

.catalog-management-badge {
    color: #31527f;
    background: #eef5ff;
}

.catalog-management-badge svg {
    width: 14px;
    height: 14px;
}

.catalog-group-actions {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.catalog-group-actions .btn,
.catalog-manage-trigger {
    min-height: 38px;
    white-space: nowrap;
}

.catalog-manage-menu {
    position: relative;
    z-index: 5;
}

.catalog-manage-menu.is-open {
    z-index: 40;
}

.catalog-manage-trigger {
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #172033;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.catalog-manage-trigger:hover,
.catalog-manage-trigger:focus-visible,
.catalog-manage-menu.is-open .catalog-manage-trigger {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 24%, #dbe5f1);
    background: #f4f8ff;
    outline: 0;
}

.catalog-manage-trigger svg {
    width: 18px;
    height: 18px;
}

.catalog-manage-trigger > span {
    width: 4px;
    height: 4px;
    display: block;
    border-radius: 999px;
    background: currentColor;
}

.catalog-manage-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 190px;
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.catalog-manage-dropdown[hidden] {
    display: none;
}

.catalog-manage-dropdown button {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    color: #273449;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.catalog-manage-dropdown button:hover,
.catalog-manage-dropdown button:focus-visible {
    background: #f4f7fb;
    outline: 0;
}

.catalog-manage-dropdown button.danger {
    color: #b42318;
}

.catalog-manage-dropdown button.danger:hover,
.catalog-manage-dropdown button.danger:focus-visible {
    background: #fff1f0;
}

.catalog-manage-dropdown svg {
    width: 15px;
    height: 15px;
}

.catalog-products-divider {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 24px 0 86px;
    color: #64748b;
    border-bottom: 1px solid #e9eff7;
    background: #fbfdff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.catalog-products-divider svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.catalog-group-products {
    margin: 14px 20px 18px 86px;
    border: 1px solid #e4ebf5;
    border-radius: 10px;
    background: #fbfdff;
}

.catalog-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 40px minmax(190px, 1fr) auto minmax(280px, .95fr);
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    border-top: 1px solid #edf1f6;
}

.catalog-row.product-row {
    grid-template-columns: 34px minmax(180px, 1fr) minmax(105px, auto) auto minmax(270px, .82fr);
    border-top: 1px solid #e9eff7;
    background: #fbfdff;
    padding: 12px 14px;
    gap: 12px;
}

.catalog-group-products .catalog-row:first-child {
    border-top: 0;
}

.catalog-group-products-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 20px 18px 86px;
    padding: 13px 14px;
    color: #66758d;
    border: 1px dashed #cbd8ea;
    border-radius: 10px;
    background: #f8fafc;
}

.catalog-row.product-row .catalog-row-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.catalog-row.product-row .catalog-row-main strong,
.catalog-row.product-row .catalog-row-price strong {
    font-size: 12px;
}

.catalog-row.product-row .catalog-description-html,
.catalog-row.product-row .catalog-description-html small,
.catalog-row.product-row .catalog-description-html div,
.catalog-row.product-row .catalog-row-price small {
    font-size: 10px;
}

.catalog-row.product-row .catalog-row-main code {
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 10px;
}

.catalog-row.product-row .catalog-link-copy input,
.catalog-row.product-row .catalog-link-copy button {
    height: 32px;
}

.catalog-group-products-empty p {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
}

.catalog-row-main,
.catalog-row-main strong,
.catalog-row-main small,
.catalog-row-main code,
.catalog-row-price,
.catalog-row-price strong,
.catalog-row-price small {
    min-width: 0;
    display: block;
}

.catalog-row-main strong {
    color: #111b2e;
    font-size: 13px;
}

.catalog-group-head .catalog-row-main > strong {
    font-size: 16px;
    line-height: 1.2;
}

.catalog-group-head .catalog-description-html,
.catalog-group-head .catalog-description-html div,
.catalog-group-head .catalog-description-html p,
.catalog-group-head .catalog-description-html small {
    font-size: 12px;
}

.catalog-group-head .catalog-row-main code {
    margin-top: 8px;
    padding: 5px 8px;
    font-size: 11px;
}

.catalog-description-html,
.catalog-description-html div,
.catalog-description-html p,
.catalog-description-html ul,
.catalog-description-html ol,
.catalog-description-html small {
    margin: 0;
    color: #6c7a91;
    font-size: 11px;
    line-height: 1.55;
}

.catalog-description-html {
    display: grid;
    gap: 5px;
    margin-top: 4px;
}

.catalog-description-html ul,
.catalog-description-html ol {
    padding-left: 18px;
}

.catalog-description-html hr,
.catalog-html-copy hr,
.rich-editor-canvas hr {
    width: 100%;
    height: 1px;
    margin: 8px 0;
    border: 0;
    background: #dce6f2;
}

.catalog-description-html img,
.catalog-html-copy img {
    display: inline-block;
    max-width: min(100%, 180px);
    max-height: 120px;
    border-radius: 8px;
    vertical-align: middle;
}

.catalog-description-html a,
.catalog-html-copy a {
    color: var(--brand-primary);
    font-weight: 800;
}

.catalog-description-html .text-size-sm,
.catalog-html-copy .text-size-sm {
    font-size: 11px;
}

.catalog-description-html .text-size-md,
.catalog-html-copy .text-size-md {
    font-size: 13px;
}

.catalog-description-html .text-size-lg,
.catalog-html-copy .text-size-lg {
    font-size: 16px;
}

.catalog-description-html .text-size-xl,
.catalog-html-copy .text-size-xl {
    font-size: 20px;
    font-weight: 800;
}

.catalog-row-main small,
.catalog-row-price small {
    margin-top: 4px;
    color: #6c7a91;
    font-size: 11px;
}

.catalog-row-main code {
    width: fit-content;
    max-width: 100%;
    margin-top: 7px;
    padding: 4px 7px;
    overflow: hidden;
    color: #285087;
    border-radius: 7px;
    background: #eef5ff;
    font-size: 11px;
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-row-price strong {
    color: #111b2e;
    font-size: 13px;
}

.catalog-link-copy input {
    height: 38px;
    color: #52617b;
    font-size: 11px;
}

.catalog-link-copy button {
    width: 42px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border: 0;
    border-left: 1px solid #d8e2ef;
    background: #fff;
    cursor: pointer;
}

.catalog-link-copy button.is-copied {
    color: #067647;
    background: #ecfdf3;
}

.catalog-link-copy svg {
    width: 17px;
    height: 17px;
}

.catalog-empty-state {
    margin: 0;
    border-top: 1px solid #edf1f6;
    border-radius: 0;
    box-shadow: none;
}

.catalog-dialog {
    width: min(640px, calc(100% - 32px));
    max-height: min(760px, calc(100vh - 40px));
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e2ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.catalog-dialog::backdrop {
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
}

.catalog-dialog .product-catalog-form {
    display: flex;
    max-height: min(760px, calc(100vh - 40px));
    flex-direction: column;
    gap: 0;
}

.catalog-dialog-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 18px;
    border-bottom: 1px solid #edf1f6;
}

.catalog-dialog-heading .product-form-header {
    min-width: 0;
    padding: 0;
    border: 0;
}

.catalog-dialog-heading .icon-action {
    flex: 0 0 auto;
}

.catalog-dialog-body {
    display: grid;
    gap: 14px;
    flex: 1 1 auto;
    max-height: calc(100vh - 230px);
    padding: 20px 22px;
    overflow-y: auto;
}

.catalog-rich-editor .rich-editor-canvas {
    min-height: 150px;
    max-height: 280px;
}

.catalog-rich-editor .rich-editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.catalog-rich-editor .rich-editor-toolbar::-webkit-scrollbar {
    display: none;
}

.catalog-rich-editor .rich-editor-toolbar button {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 900;
}

.catalog-rich-editor .rich-editor-size {
    flex: 0 0 126px;
    width: 126px;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
}

.catalog-rich-editor .rich-editor-toolbar span[aria-hidden="true"] {
    flex: 0 0 1px;
}

.catalog-html-editor .email-editor-canvas:empty::before {
    content: attr(data-placeholder);
    color: #71819b;
    pointer-events: none;
}

.catalog-html-field .email-html-label small {
    max-width: none;
}

.catalog-dialog .catalog-html-editor .email-html-toolbar {
    min-height: 46px;
    padding: 8px 10px;
}

.catalog-dialog .catalog-html-editor .email-format-actions {
    gap: 4px;
}

.catalog-dialog .catalog-html-editor .email-format-actions button,
.catalog-dialog .catalog-html-editor .email-editor-modes button {
    min-height: 32px;
}

.catalog-dialog .catalog-html-editor .email-editor-canvas,
.catalog-dialog .catalog-html-editor .email-editor-source {
    min-height: 170px;
    height: 170px;
    max-height: 220px;
    padding: 18px 20px;
    font-family: "Plus Jakarta Sans", Inter, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.58;
}

.catalog-dialog .catalog-html-editor .email-editor-source {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.catalog-dialog-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #edf1f6;
    background: #f8fafc;
    box-shadow: 0 -12px 24px rgba(248, 250, 252, .9);
}

.admin-products-page .topbar {
    margin-bottom: 12px;
}

.product-catalog-toolbar {
    gap: 20px;
    margin-top: 20px;
    padding: 18px 24px;
    border-color: #dfe8f3;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.product-catalog-toolbar > div:first-child > span {
    width: 48px;
    height: 48px;
    border-color: #dbe8ff;
    background: #eef5ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}

.product-catalog-toolbar h2 {
    font-size: 16px;
}

.product-catalog-side {
    gap: 24px;
}

.product-catalog-summary {
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
}

.product-catalog-summary span {
    min-width: 54px;
    height: auto;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    column-gap: 8px;
    row-gap: 1px;
    padding: 0;
}

.product-catalog-summary span + span {
    border-left: 1px solid #e2eaf4;
    padding-left: 18px;
}

.product-catalog-summary svg {
    grid-row: 1 / 3;
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.product-catalog-summary strong {
    font-size: 20px;
}

.product-catalog-summary small {
    font-size: 10px;
}

.product-catalog-toolbar-actions .btn {
    min-height: 40px;
    border-radius: 8px;
}

.product-catalog-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 20px;
}

.catalog-search-field {
    width: min(430px, 100%);
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
}

.catalog-search-field svg {
    width: 15px;
    height: 15px;
    color: #8492a6;
}

.catalog-search-field input {
    width: 100%;
    min-width: 0;
    height: 38px;
    color: #172033;
    border: 0;
    background: transparent;
    font-family: var(--asv-font-family);
    font-size: 12px;
    outline: 0;
}

.catalog-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-filter-actions select {
    min-width: 160px;
    height: 40px;
    padding: 0 12px;
    color: #172033;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 800;
}

.catalog-view-switch {
    display: flex;
    align-items: center;
    gap: 5px;
}

.catalog-view-switch button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    color: #64748b;
    background: #fff;
    cursor: pointer;
}

.catalog-view-switch button.is-active {
    color: #fff;
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.catalog-view-switch button svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.35;
}

.product-catalog-grid {
    margin-top: 16px;
}

.catalog-group-list {
    gap: 16px;
}

.catalog-group-card {
    border-color: #dbe5f1;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.catalog-group-head {
    grid-template-columns: minmax(330px, 1fr) auto auto;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 0;
    background: #fff;
}

.catalog-group-identity {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
}

.catalog-group-identity .catalog-row-icon {
    width: 44px;
    height: 44px;
}

.catalog-group-meta {
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.catalog-group-number {
    min-width: 48px;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid #e6edf6;
}

.catalog-group-number strong {
    color: #111b2e;
    font-size: 18px;
    line-height: 1;
}

.catalog-group-number small {
    color: #7a8799;
    font-size: 10px;
    font-weight: 800;
}

.catalog-group-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-collapse-trigger {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #172033;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.catalog-collapse-trigger svg {
    width: 17px;
    height: 17px;
    transition: transform .18s ease;
}

.catalog-group-card.is-collapsed .catalog-collapse-trigger svg {
    transform: rotate(-90deg);
}

.catalog-group-body {
    padding: 0 22px 18px 106px;
}

.catalog-group-products {
    margin: 0;
    border-color: #dfe8f3;
    border-radius: 8px;
    background: #fff;
}

.catalog-row.product-row {
    grid-template-columns: 40px minmax(170px, 1fr) minmax(112px, .38fr) minmax(86px, .28fr) minmax(108px, .36fr) minmax(190px, .82fr) auto 38px 38px;
    min-height: 72px;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    background: #fff;
}

.catalog-row.product-row .catalog-row-icon {
    width: 36px;
    height: 36px;
}

.catalog-row.product-row .catalog-row-main strong {
    font-size: 13px;
}

.catalog-row.product-row .catalog-row-main code {
    background: transparent;
    color: #2356b7;
    padding: 0;
}

.catalog-row-price small,
.catalog-row-status small,
.catalog-row-module small,
.catalog-row-link small {
    display: block;
    margin-bottom: 4px;
    color: #7a8799;
    font-size: 10px;
    font-weight: 800;
}

.catalog-row-price strong,
.catalog-row-module strong {
    color: #111b2e;
    font-size: 12px;
    line-height: 1.2;
}

.catalog-row-price em {
    margin-left: 3px;
    color: #52617b;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.catalog-row-status {
    color: #111b2e;
    font-size: 12px;
    font-weight: 800;
}

.catalog-dot-success,
.catalog-dot-muted {
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 999px;
    background: #12b76a;
}

.catalog-dot-muted {
    background: #98a2b3;
}

.catalog-row-link a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-service-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: #eef4fb;
    color: #0b1630;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-service-action svg {
    width: 15px;
    height: 15px;
    color: var(--brand-primary);
}

.product-service-hero {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
}

.product-service-hero > span,
.product-service-section-head > span,
.product-service-side article > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe0fb;
    border-radius: 8px;
    background: #eef5ff;
    color: var(--brand-primary);
}

.product-service-hero h2 {
    margin: 2px 0 4px;
    color: #07122a;
    font-size: 22px;
}

.product-service-hero small,
.product-service-hero p,
.product-service-section-head p,
.product-service-side p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.product-service-hero p,
.product-service-side p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-service-status {
    min-width: 150px;
    display: grid;
    justify-items: end;
    gap: 4px;
}

.product-service-status strong {
    color: #07122a;
    font-size: 18px;
}

.product-service-switcher {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: #fff;
}

.product-service-switcher > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: #50627d;
    font-size: 12px;
    font-weight: 850;
}

.product-service-switcher > span svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.product-service-switcher > div {
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.product-service-switcher a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    flex: 0 0 auto;
    color: #172033;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.product-service-switcher a.active {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, #dbe6f4);
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}

.product-service-switcher small {
    color: #6b7890;
    font-size: 10px;
    font-weight: 750;
}

.product-service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    margin-top: 16px;
}

.product-service-layout-full {
    grid-template-columns: minmax(0, 1fr);
}

.product-service-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
    border: 1px solid #dbe6f4;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.product-service-tabs a {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-right: 1px solid #e4edf7;
    color: #60708a;
    text-decoration: none;
    position: relative;
}

.product-service-tabs a:last-child {
    border-right: 0;
}

.product-service-tabs a::after {
    content: "";
    height: 3px;
    position: absolute;
    right: 20%;
    bottom: 0;
    left: 20%;
    border-radius: 999px 999px 0 0;
    background: transparent;
}

.product-service-tabs a > svg {
    width: 18px;
    height: 18px;
}

.product-service-tabs strong {
    display: block;
    color: #24324a;
    font-size: 13px;
}

.product-service-tabs small {
    display: block;
    margin-top: 2px;
    color: #7a8799;
    font-size: 11px;
}

.product-service-tabs a.active {
    background: #f3f7ff;
    color: var(--brand-primary);
}

.product-service-tabs a.active::after {
    background: var(--brand-primary);
}

.product-service-tabs a.active strong {
    color: var(--brand-primary);
}

.product-service-form {
    gap: 18px;
    padding: 22px;
}

.product-service-form .catalog-html-editor .email-editor-canvas {
    min-height: 170px;
    max-height: 260px;
    padding: 18px 20px;
    overflow-y: auto;
}

.product-service-form .catalog-html-editor .email-editor-source {
    min-height: 170px;
    max-height: 260px;
}

.product-service-form .catalog-html-field {
    margin-bottom: 0;
}

.product-service-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5edf7;
}

.product-service-section-head h2 {
    margin: 0 0 3px;
    color: #07122a;
    font-size: 17px;
}

.product-service-section-head h2 em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 8px;
    padding: 3px 9px;
    color: var(--brand-primary);
    border: 1px solid #d8e6fb;
    border-radius: 999px;
    background: #eef5ff;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    vertical-align: middle;
}

.product-module-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.product-module-fields [data-service-config-field][hidden],
.product-module-fields [data-service-config-heading][hidden] {
    display: none !important;
}

.product-module-field-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 11px;
    margin-top: 4px;
    padding: 13px 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 9px;
    background: var(--brand-primary-subtle);
}

.product-module-field-heading > span {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.product-module-field-heading > span svg {
    width: 17px;
    height: 17px;
}

.product-module-field-heading > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.product-module-field-heading strong {
    color: #172033;
    font-size: 12px;
}

.product-module-field-heading small {
    margin: 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}

.product-module-fields label {
    min-width: 0;
}

.product-module-fields label.is-wide {
    grid-column: 1 / -1;
}

.product-module-fields small {
    margin-top: -3px;
    color: #7a8799;
    font-size: 11px;
    line-height: 1.35;
}

.product-service-actions {
    padding: 0;
    border: 0;
}

.product-service-side {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 18px;
}

.product-service-side article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e2eaf5;
    border-radius: 8px;
    background: #fbfdff;
}

.product-service-side strong {
    display: block;
    margin-bottom: 3px;
    color: #111b2e;
    font-size: 13px;
}

.product-billing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-billing-grid article {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.product-billing-grid article.is-active {
    border-color: color-mix(in srgb, var(--brand-primary) 24%, #dce7f4);
    background: #f8fbff;
    box-shadow: 0 10px 24px rgba(23, 104, 229, .06);
}

.product-billing-toggle {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.product-billing-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--brand-primary);
}

.product-billing-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 8px;
}

.product-billing-fields label {
    display: grid;
    gap: 5px;
}

.product-billing-fields label span {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.product-billing-fields input {
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #d3dfed;
    border-radius: 8px;
    color: #111b2e;
    background: #fff;
    font-size: 13px;
    font-weight: 850;
}

.product-billing-fields input:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 45%, #d3dfed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
    outline: 0;
}

.product-billing-grid strong,
.product-billing-grid small {
    display: block;
}

.product-billing-grid strong {
    color: #111b2e;
    font-size: 13px;
    line-height: 1.15;
}

.product-billing-grid small {
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.25;
}

.product-billing-base {
    min-height: 22px;
    display: flex !important;
    align-items: center;
    padding-top: 7px;
    border-top: 1px dashed #dce7f4;
    color: #697994 !important;
    font-size: 10px !important;
    font-weight: 750;
}

.product-price-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-price-preview span {
    padding: 10px 12px;
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #fbfdff;
}

.product-price-preview strong,
.product-price-preview small {
    display: block;
}

.product-price-preview strong {
    color: #64748b;
    font-size: 11px;
}

.product-price-preview small {
    margin-top: 4px;
    color: #111b2e;
    font-size: 14px;
    font-weight: 800;
}

.catalog-copy-square {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.catalog-copy-square.is-copied {
    color: #067647;
    background: #ecfdf3;
}

.catalog-copy-square svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 700px) {
    .product-module-fields { grid-template-columns: 1fr; }
    .product-module-fields label.is-wide,
    .product-module-field-heading { grid-column: auto; }
}
.catalog-delete-product-form { display: contents; }
.catalog-delete-product { color: #b4232f; }
.catalog-delete-product:hover { border-color: #efb2b7; background: #fff5f5; }

.catalog-add-product {
    width: 100%;
    min-height: 34px;
    margin-top: 12px;
    color: var(--brand-primary);
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.catalog-group-products-empty {
    margin: 0;
    min-height: 72px;
    justify-content: space-between;
    border-radius: 8px;
}

.catalog-group-products-empty > div {
    min-width: 0;
    margin-right: auto;
}

.catalog-group-products-empty p {
    margin: 3px 0 0;
    color: #7a8799;
    font-size: 11px;
    font-weight: 700;
}

.catalog-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.catalog-insights article {
    min-height: 96px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .045);
}

.catalog-insights article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 10px;
    background: #eef5ff;
}

.catalog-insights article:first-child > span {
    color: #067647;
    background: #dcfae6;
}

.catalog-insights strong,
.catalog-insights p {
    margin: 0;
}

.catalog-insights strong {
    color: #172033;
    font-size: 12px;
}

.catalog-insights p {
    margin-top: 5px;
    color: #66758d;
    font-size: 11px;
    line-height: 1.55;
}

.catalog-insights a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    color: var(--brand-primary);
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .product-catalog-actions {
        grid-template-columns: 1fr;
    }

    .catalog-row,
    .catalog-row.product-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .catalog-group-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .catalog-group-meta {
        justify-content: flex-start;
    }

    .catalog-group-count,
    .catalog-management-badge,
    .catalog-group-actions,
    .catalog-row-price,
    .catalog-service-action,
    .catalog-link-copy {
        width: 100%;
    }

    .catalog-group-actions {
        grid-template-columns: 1fr;
    }

    .catalog-products-divider {
        padding-left: 74px;
    }

    .catalog-group-products,
    .catalog-group-products-empty {
        margin-left: 74px;
    }

    .product-catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-service-layout,
    .product-service-hero {
        grid-template-columns: 1fr;
    }

    .product-billing-grid,
    .product-price-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-service-status {
        justify-items: start;
    }

    .product-catalog-side {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .product-plans-overview,
    .catalog-form-grid {
        grid-template-columns: 1fr;
    }

    .product-catalog-side {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .product-catalog-summary {
        width: 100%;
        justify-content: stretch;
        margin-left: 0;
    }

    .product-catalog-summary span {
        min-width: 0;
        flex: 1 1 0;
    }

    .product-catalog-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .product-service-tabs {
        grid-template-columns: 1fr;
    }

    .product-service-tabs a {
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid #e4edf7;
    }

    .product-service-tabs a:last-child {
        border-bottom: 0;
    }

    .product-billing-grid,
    .product-price-preview {
        grid-template-columns: 1fr;
    }

    .catalog-dialog-actions {
        flex-direction: column-reverse;
    }

    .catalog-row,
    .catalog-row.product-row {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: flex-start;
        gap: 12px;
        padding: 15px;
    }

    .catalog-group-list {
        gap: 12px;
        padding: 12px;
    }

    .catalog-group-head {
        padding: 15px;
    }

    .catalog-group-identity {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
    }

    .catalog-group-identity .catalog-row-icon {
        width: 36px;
        height: 36px;
    }

    .catalog-group-count,
    .catalog-row .status,
    .catalog-row-price,
    .catalog-service-action,
    .catalog-link-copy {
        grid-column: 1 / -1;
    }

    .catalog-group-products,
    .catalog-group-products-empty {
        margin: 0 15px 15px;
    }

    .catalog-products-divider {
        min-height: 38px;
        padding: 0 15px;
    }

    .catalog-slug-field {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-slug-field b {
        padding: 9px 12px 0;
    }
}

.catalog-shell { min-height: 100vh; overflow-x: clip; background: #f4f8fd; }

.catalog-topbar {
    width: 100%;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary) 2%, #07132b),
        color-mix(in srgb, var(--brand-primary) 1%, #061027)
    );
    box-shadow: 0 12px 28px rgba(7, 19, 43, .16);
}
.catalog-topbar-inner { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); align-items: center; width: min(1260px, calc(100vw - 56px)); min-height: 68px; margin: 0 auto; gap: 24px; }
.catalog-order-screen .catalog-topbar-inner { width: min(1240px, calc(100% - 32px)); }

.catalog-checkout-screen .catalog-topbar-inner,
.checkout-payment-page { width: min(1240px, calc(100% - 32px)); }
.checkout-payment-page { margin: 0 auto; padding: 28px 0 54px; }
.checkout-payment-page .catalog-order-steps { margin-bottom: 24px; }
.catalog-order-steps > div.is-complete > span { color: #fff; border-color: #22a865; background: #22a865; }
.catalog-order-steps > div.is-complete > span svg { width: 17px; height: 17px; color: #fff; stroke-width: 2.4; }
.catalog-order-steps > div.is-complete strong { color: #25764e; }
.checkout-payment-page .invoice-payment-layout { margin-top: 0; }
.checkout-payment-page .invoice-payment-layout { grid-template-columns: minmax(0, 1fr) 348px; gap: 22px; }
.checkout-payment-page .invoice-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 8px 10px; border-radius: 7px; }
.checkout-payment-page .invoice-back-link:hover { background: #eaf2ff; }
.checkout-payment-page .invoice-methods-card { border-radius: 8px; box-shadow: 0 16px 42px rgba(22, 48, 82, .07); }
.checkout-payment-page .invoice-methods-card > header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 18px; }
.checkout-section-eyebrow { display: block; margin-bottom: 5px; color: var(--brand-primary); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.checkout-security-seal { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #dce7f4; border-radius: 999px; color: #39705a; background: #f1fbf6; font-size: 11px; font-weight: 800; }
.checkout-security-seal svg { width: 15px; height: 15px; }
.checkout-payment-page .invoice-method-grid { padding-inline: 24px; }
.checkout-payment-page .invoice-method-option { min-height: 72px; border-radius: 8px; background: #fbfdff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.checkout-payment-page .invoice-method-option:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28, 78, 140, .07); }
.checkout-payment-page .invoice-method-option:has(input:checked) { background: color-mix(in srgb, var(--brand-primary) 5%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.checkout-payment-page .invoice-method-panel { margin: 22px 24px 24px; border-top-color: #e2eaf4; }
.checkout-payment-page .invoice-payment-summary { position: sticky; top: 88px; border-radius: 8px; box-shadow: 0 16px 42px rgba(22, 48, 82, .07); }
.checkout-payment-page .invoice-summary-service { margin-top: 2px; background: #f5f9ff; }
.checkout-payment-page .invoice-summary-breakdown .is-discount { color: #16834f; }
.checkout-payment-page .invoice-summary-footer { padding-top: 16px; border-top: 1px solid #e6edf6; }
.checkout-payment-page .invoice-secure-note { margin-top: 0; }
.checkout-payment-state { display: grid; place-items: center; padding: 30px 20px 34px; }
.checkout-payment-state[hidden] { display: none; }
.checkout-payment-state-card { width: min(430px, 100%); padding: 36px; border: 1px solid #e2e9f2; border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 30px rgba(7, 19, 43, .08); text-align: center; }
.checkout-payment-state-icon,
.checkout-payment-approved-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, #fff); }
.checkout-payment-state-icon svg { width: 26px; height: 26px; animation: checkout-spin .9s linear infinite; }
.checkout-payment-approved-icon { display: none; color: #fff; background: #22a865; }
.checkout-payment-approved-icon svg { width: 29px; height: 29px; }
.checkout-payment-state-card h2 { margin: 0 0 8px; font-size: 24px; }
.checkout-payment-state-card p { margin: 0; color: #68768d; font-size: 13px; line-height: 1.55; }
.checkout-payment-progress { height: 4px; margin-top: 24px; overflow: hidden; border-radius: 4px; background: #e9eff7; }
.checkout-payment-progress i { display: block; width: 42%; height: 100%; background: var(--brand-primary); animation: checkout-progress 1.1s ease-in-out infinite alternate; }
.checkout-payment-state.is-approved .checkout-payment-state-icon { display: none; }
.checkout-payment-state.is-approved .checkout-payment-approved-icon { display: grid; }
.checkout-payment-state.is-approved .checkout-payment-progress i { width: 100%; animation: none; background: #22a865; }
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@keyframes checkout-progress { from { transform: translateX(-10%); } to { transform: translateX(150%); } }
@media (max-width: 760px) {
    .checkout-payment-page { width: min(100% - 20px, 1240px); padding-top: 18px; }
    .checkout-payment-page .invoice-methods-card > header { align-items: flex-start; padding-inline: 18px; }
    .checkout-security-seal { display: none; }
    .checkout-payment-page .invoice-method-grid { padding-inline: 18px; }
    .checkout-payment-page .invoice-method-panel { margin-inline: 18px; }
}
.catalog-brand img { display: block; width: 136px; max-height: 42px; object-fit: contain; }
.catalog-brand { justify-self: start; }
.catalog-nav { display: flex; align-items: center; justify-self: center; gap: 20px; }
.catalog-nav > a, .catalog-products-menu > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 68px; color: #fff; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 800; text-decoration: none; }
.catalog-nav > a.active,
.catalog-nav > a:hover,
.catalog-products-menu > summary.active,
.catalog-products-menu[open] > summary,
.catalog-products-menu > summary:hover { border-bottom-color: var(--brand-primary); }
.catalog-nav svg { width: 13px; height: 13px; }
.catalog-products-menu {
    position: relative;
    display: flex;
}
.catalog-products-menu summary { list-style: none; cursor: pointer; }
.catalog-products-menu summary::-webkit-details-marker { display: none; }
.catalog-products-menu > summary svg { transition: transform .16s ease; }
.catalog-products-menu[open] > summary svg { transform: rotate(180deg); }
.catalog-products-dropdown {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    z-index: 60;
    width: 350px;
    display: grid;
    gap: 8px;
    padding: 10px;
    transform: translateX(-50%);
    border: 1px solid #d9e5f3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(7, 19, 43, .24);
}
.catalog-products-dropdown::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    border-top: 1px solid rgba(164, 191, 232, .28);
    border-left: 1px solid rgba(164, 191, 232, .28);
    background: #fff;
}

.catalog-products-dropdown header { position: relative; z-index: 1; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 8px 10px; border-bottom: 1px solid #e6edf6; }
.catalog-products-dropdown header > span,
.catalog-products-dropdown a > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--brand-primary); border-radius: 8px; background: var(--brand-primary-soft); }
.catalog-products-dropdown header svg,
.catalog-products-dropdown a > span svg { width: 18px; height: 18px; }
.catalog-products-dropdown header div,
.catalog-products-dropdown a div { min-width: 0; display: grid; gap: 2px; }
.catalog-products-dropdown strong { color: #14243d; font-size: 12px; font-weight: 900; }
.catalog-products-dropdown small { overflow: hidden; color: #70819a; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.catalog-products-dropdown a {
    position: relative;
    z-index: 1;
    min-height: 54px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    color: #253650;
    border-radius: 8px;
    text-decoration: none;
}
.catalog-products-dropdown a > svg { width: 14px; height: 14px; color: #8496ae; transform: rotate(-90deg); }
.catalog-products-dropdown a:hover { background: var(--brand-primary-soft); }
.catalog-products-dropdown a:hover strong,
.catalog-products-dropdown a:hover > svg { color: var(--brand-primary); }
.catalog-products-all { border: 1px solid var(--brand-primary-border); background: var(--brand-primary-subtle); }
.catalog-products-groups { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.catalog-account-menu { position: relative; justify-self: end; flex: 0 0 auto; }
.catalog-account-menu summary { list-style: none; cursor: pointer; }
.catalog-account-menu summary::-webkit-details-marker { display: none; }
.catalog-client-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; color: #fff; border: 1px solid rgba(255, 255, 255, .32); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 800; text-decoration: none; transition: border-color .16s ease, background .16s ease; }
.catalog-client-button svg { width: 17px; height: 17px; }
.catalog-client-button svg:last-child { width: 14px; height: 14px; margin-left: 2px; transition: transform .16s ease; }
.catalog-client-avatar { position: relative; width: 27px; height: 27px; display: grid; flex: 0 0 27px; overflow: hidden; place-items: center; color: var(--brand-on-primary); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: var(--brand-primary); font-size: 11px; font-weight: 900; }
.catalog-client-avatar > span { position: relative; z-index: 1; }
.catalog-client-avatar > img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .16s ease; }
.catalog-client-avatar > img.is-loaded { opacity: 1; }
.catalog-client-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-account-menu[open] .catalog-client-button,
.catalog-client-button:hover { border-color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .08); }
.catalog-account-menu.is-authenticated .catalog-client-button { padding: 0 4px; border-color: transparent; background: transparent; }
.catalog-account-menu.is-authenticated[open] .catalog-client-button,
.catalog-account-menu.is-authenticated .catalog-client-button:hover { border-color: transparent; background: rgba(255, 255, 255, .07); }
.catalog-account-menu[open] .catalog-client-button svg:last-child { transform: rotate(180deg); }
.catalog-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 70;
    width: 280px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(7, 19, 43, .24);
}
.catalog-account-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 24px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-top: 1px solid #dce6f2;
    border-left: 1px solid #dce6f2;
    background: #fff;
}
.catalog-account-dropdown a { position: relative; z-index: 1; min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 9px; color: #172a47; border-radius: 8px; text-decoration: none; }
.catalog-account-dropdown a:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
.catalog-account-dropdown a > svg { width: 18px; height: 18px; justify-self: center; }
.catalog-account-dropdown a span { min-width: 0; display: grid; gap: 2px; }
.catalog-account-dropdown strong { font-size: 12px; font-weight: 850; }
.catalog-account-dropdown small { overflow: hidden; color: #6d7f99; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.catalog-page { width: min(1140px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 48px; }
.catalog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0 22px; }
.catalog-header img { width: 142px; max-height: 44px; object-fit: contain; }
.catalog-header a { color: var(--brand-primary); font-size: 13px; font-weight: 800; text-decoration: none; }

.catalog-hero { display: grid; grid-template-columns: minmax(0, .98fr) minmax(410px, .88fr); gap: 22px; align-items: center; padding: 0 0 24px; color: #07122a; border-bottom: 1px solid #dce7f3; background: transparent; box-shadow: none; }
.catalog-hero small { color: var(--brand-primary); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.catalog-hero h1, .catalog-hero p { margin: 0; }
.catalog-html-copy { display: grid; gap: 8px; color: #536987; font-size: 15px; line-height: 1.65; }
.catalog-html-copy p, .catalog-html-copy ul, .catalog-html-copy ol { margin: 0; }
.catalog-html-copy ul, .catalog-html-copy ol { padding-left: 20px; }
.catalog-hero h1 { margin-top: 8px; color: #07122a; font-size: clamp(34px, 3.4vw, 44px); line-height: 1.04; letter-spacing: 0; }
.catalog-hero p { max-width: 640px; margin-top: 9px; color: #536987; font-size: 14px; line-height: 1.56; }

.catalog-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; border: 1px solid #dce7f3; border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, .04); }
.catalog-benefits article { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 15px; }
.catalog-benefits article + article { border-left: 1px solid #e0e8f3; }
.catalog-benefits span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: var(--brand-primary); border-radius: 999px; background: var(--brand-primary-soft); }
.catalog-benefits svg { width: 23px; height: 23px; }
.catalog-benefits strong, .catalog-benefits p { margin: 0; }
.catalog-benefits strong { color: #111b2e; font-size: 13px; font-weight: 850; }
.catalog-benefits p { margin-top: 4px; color: #536987; font-size: 12px; line-height: 1.45; }

.catalog-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 20px 0 14px; }
.catalog-filter-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.catalog-filter-tabs a { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 33px; padding: 0 17px; color: #233552; border: 1px solid #dce7f3; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 7px 16px rgba(15, 23, 42, .03); }
.catalog-filter-tabs a.active, .catalog-filter-tabs a:hover { color: var(--brand-on-primary); border-color: var(--brand-primary); background: var(--brand-primary); }
.catalog-sort { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 10px 0 12px; color: #64748b; border: 1px solid #dce7f3; border-radius: 8px; background: #fff; font-size: 11px; box-shadow: 0 7px 16px rgba(15, 23, 42, .03); }
.catalog-sort svg { width: 15px; height: 15px; }
.catalog-sort select { min-width: 124px; height: 35px; padding: 0 24px 0 2px; color: #111b2e; border: 0; outline: 0; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.catalog-sort:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); }

.catalog-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.catalog-groups { display: grid; gap: 12px; margin-top: 0; }
.catalog-public-group { overflow: visible; border: 1px solid #dce6f2; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .04); scroll-margin-top: 92px; }
.catalog-public-group > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #e6edf6; background: #fff; }
.catalog-public-group > header > div { min-width: 0; display: flex; gap: 13px; }
.catalog-public-group > header > div > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--brand-primary); border-radius: 8px; background: color-mix(in srgb, var(--brand-primary) 8%, #fff); }
.catalog-public-group h2 { margin: 0 0 4px; color: #111b2e; font-size: 18px; }
.catalog-public-group > header > a { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 6px; flex: 0 0 auto; color: var(--brand-primary); border: 0; background: transparent; font-size: 11px; font-weight: 850; text-decoration: none; }
.catalog-public-group > header > a svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.catalog-products.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 16px; gap: 15px; }

.catalog-product-card, .catalog-public-empty { position: relative; display: grid; gap: 13px; min-height: 252px; padding: 16px; border: 1px solid #dce6f2; border-radius: 8px; background: #fff; }
.catalog-product-card.is-selected { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), 0 18px 34px color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.catalog-plan-ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 18px; color: var(--brand-on-primary); border-radius: 7px; background: var(--brand-primary); box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-primary) 26%, transparent); font-size: 10px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.catalog-product-card-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.catalog-product-card-head > div { min-width: 0; flex: 1 1 auto; }
.catalog-product-card-head > span, .catalog-public-empty > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: var(--brand-primary); border-radius: 8px; background: color-mix(in srgb, var(--brand-primary) 8%, #fff); }
.catalog-product-card h2, .catalog-product-card p, .catalog-public-empty h2, .catalog-public-empty p { margin: 0; }
.catalog-product-card h2 { color: #111b2e; font-size: 17px; }
.catalog-product-card p, .catalog-public-empty p { margin-top: 5px; color: #68758a; font-size: 12px; line-height: 1.5; }
.catalog-product-card .catalog-html-copy { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 78px; padding: 2px 0 0; overflow: visible; color: #5f6f89; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }

.catalog-product-card .catalog-html-copy *,
.catalog-public-group .catalog-html-copy *,
.catalog-hero .catalog-html-copy * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.catalog-product-card .catalog-html-copy * {
    min-width: 0 !important;
    position: relative !important;
    inset: auto !important;
    float: none !important;
    overflow-wrap: anywhere !important;
}

.catalog-product-card .catalog-html-copy :where(div, section, article, header, footer, aside, main) {
    width: 100% !important;
}

.catalog-product-card .catalog-html-copy > :first-child {
    margin-top: 0 !important;
}

.catalog-product-card .catalog-html-copy > :last-child {
    margin-bottom: 0 !important;
}

.catalog-product-card .catalog-html-copy :where(h1, h2, h3) {
    margin: 0 0 8px !important;
    color: #0f172a !important;
    letter-spacing: 0 !important;
    line-height: 1.22 !important;
}

.catalog-product-card .catalog-html-copy h1 {
    font-size: clamp(20px, 1.55rem, 26px) !important;
}

.catalog-product-card .catalog-html-copy h2 {
    font-size: clamp(18px, 1.35rem, 22px) !important;
}

.catalog-product-card .catalog-html-copy h3 {
    font-size: 17px !important;
}

.catalog-product-card .catalog-html-copy :where(p, li, span, small, div) {
    line-height: 1.55 !important;
}

.catalog-product-card .catalog-html-copy :where(p, ul, ol) {
    margin: 0 0 10px !important;
}

.catalog-product-card .catalog-html-copy :where(ul, ol) {
    display: grid;
    gap: 7px;
    padding-left: 18px !important;
}

.catalog-product-card .catalog-html-copy :where(img, video, iframe, table) {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

.catalog-product-card .catalog-html-copy :where(table) {
    border-collapse: collapse;
    overflow: hidden;
}

.catalog-product-card .catalog-html-copy :where(a, button, .btn, [class*="button"]) {
    max-width: 100% !important;
    white-space: normal !important;
}

.catalog-product-card .catalog-html-copy :where([class*="chip"], [class*="badge"], [class*="tag"]) {
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.catalog-card-price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.catalog-card-price strong { color: #111b2e; font-size: 24px; line-height: 1; }
.catalog-card-price small { color: #68758a; font-size: 11px; font-weight: 800; }
.catalog-product-card .btn {
    align-self: end;
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    gap: 9px;
    padding: 0 21px;
    color: var(--brand-on-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 76%, #fff);
    border-radius: 9px;
    background: var(--brand-primary);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 26%, transparent);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.catalog-product-card .btn:hover {
    background: var(--brand-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

.catalog-product-card .btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke-width: 2;
}

.landing-hero {
    position: relative;
    width: min(1260px, calc(100vw - 56px));
    min-height: 390px;
    display: grid;
    grid-template-columns: minmax(390px, .94fr) minmax(360px, .76fr);
    align-items: center;
    gap: 34px;
    margin: 18px 50% 0;
    padding: 46px 56px 64px;
    overflow: hidden;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--brand-primary) 44%, transparent), transparent 25%),
        radial-gradient(circle at 44% 52%, rgba(41, 175, 255, .15), transparent 30%),
        linear-gradient(135deg, #06132c 0%, #071c3a 54%, #061229 100%);
    box-shadow: 0 26px 70px rgba(7, 19, 43, .2), 0 0 0 12px rgba(255, 255, 255, .46);
    transform: translateX(-50%);
}

.landing-hero::before,
.landing-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.landing-hero::before {
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--brand-primary) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 12%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, transparent, #000 32%, #000 88%, transparent);
    opacity: .45;
    transform: perspective(700px) rotateX(62deg) translateY(130px) scale(1.15);
    transform-origin: bottom center;
}

.landing-hero::after {
    width: 390px;
    height: 390px;
    right: 40px;
    top: 6px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 62%);
    filter: blur(2px);
}

.landing-hero-grid {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 22% 68%, var(--brand-primary-bright) 0 3px, transparent 4px),
        radial-gradient(circle at 70% 28%, var(--brand-primary) 0 3px, transparent 4px),
        radial-gradient(circle at 92% 54%, var(--brand-primary-bright) 0 4px, transparent 5px);
    opacity: .8;
}

.landing-hero-copy,
.landing-hero-visual {
    position: relative;
    z-index: 1;
}

.landing-hero-copy small,
.landing-section-heading small,
.landing-panel-showcase small,
.landing-why small {
    display: inline-flex;
    color: var(--brand-primary-bright);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.landing-hero-copy small {
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--brand-primary-bright) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.landing-hero h1 {
    max-width: 590px;
    margin: 16px 0 12px;
    color: #fff;
    font-size: clamp(38px, 4.2vw, 58px);
    line-height: 1.04;
}

.landing-hero p {
    max-width: 450px;
    margin: 0;
    color: rgba(238, 245, 255, .86);
    font-size: 16px;
    line-height: 1.52;
}

.landing-hero-copy > div {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.landing-hero .btn {
    min-height: 44px;
    gap: 9px;
    padding: 0 21px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 76%, #fff);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 26%, transparent);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.landing-hero .btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

.landing-hero .btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke-width: 2;
}

.landing-hero .btn.ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(255, 255, 255, .04);
    text-decoration: none;
}

.landing-hero-visual {
    min-height: 310px;
    display: grid;
    place-items: center;
}

.landing-hero-visual > img {
    width: min(330px, 82%);
    height: auto;
    display: block;
    filter: drop-shadow(0 34px 58px rgba(0, 179, 255, .34));
}

.landing-tech-ring {
    position: absolute;
    width: 410px;
    height: 190px;
    border: 1px solid rgba(50, 200, 255, .26);
    border-radius: 50%;
    transform: rotate(-16deg);
    box-shadow: 0 0 42px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.landing-benefits {
    position: relative;
    z-index: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1120px, calc(100vw - 120px));
    margin: -36px 50% 0;
    border-radius: 10px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .12);
    transform: translateX(-50%);
}

.landing-all-products {
    overflow: hidden;
    border: 1px solid #dce6f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.landing-all-products > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid #e5edf7;
}

.landing-all-products > header > div:first-child {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.landing-all-products > header > div:first-child > span {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary-border);
    border-radius: 10px;
    background: var(--brand-primary-soft);
}

.landing-all-products h2,
.landing-all-products p {
    margin: 0;
}

.landing-all-products h2 {
    color: #07122a;
    font-size: 20px;
}

.landing-all-products p {
    margin-top: 4px;
    color: #536987;
    font-size: 13px;
}

.landing-product-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 34%);
    gap: 16px;
    padding: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary-border) transparent;
}

.landing-product-slider .catalog-product-card {
    min-height: 326px;
    scroll-snap-align: start;
}

.landing-section-heading {
    margin-top: 28px;
}

.landing-section-heading h2 {
    margin: 6px 0 5px;
    color: #07122a;
    font-size: 28px;
}

.landing-section-heading p {
    margin: 0;
    color: #536987;
    font-size: 14px;
}

.landing-panel-showcase {
    display: grid;
    grid-template-columns: minmax(280px, .56fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 32px;
    padding: 32px;
    overflow: hidden;
    color: #fff;
    border-radius: 12px;
    background:
        radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--brand-primary) 34%, transparent), transparent 24%),
        linear-gradient(135deg, #061127 0%, #071832 100%);
    box-shadow: 0 22px 54px rgba(7, 19, 43, .22);
}

.landing-panel-showcase h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: 31px;
    line-height: 1.12;
}

.landing-panel-showcase p {
    margin: 0;
    color: rgba(238, 245, 255, .82);
    font-size: 14px;
    line-height: 1.6;
}

.landing-panel-showcase ul {
    display: grid;
    gap: 12px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.landing-panel-showcase li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 800;
}

.landing-panel-showcase li svg {
    width: 17px;
    height: 17px;
}

.landing-panel-showcase figure {
    position: relative;
    min-height: 310px;
    margin: 0;
}

.landing-panel-showcase figure > img {
    position: absolute;
    display: block;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    box-shadow: 0 24px 52px rgba(0, 0, 0, .26);
}

.landing-panel-client {
    right: -18px;
    top: 0;
    width: 78%;
}

.landing-panel-admin {
    left: 0;
    bottom: 0;
    width: 58%;
    opacity: .92;
}

.landing-why {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .04);
}

.landing-why > div,
.landing-why article {
    padding: 24px;
}

.landing-why article {
    border-left: 1px solid #e5edf7;
}

.landing-why h2,
.landing-why strong,
.landing-why p {
    margin: 0;
}

.landing-why h2 {
    margin-top: 8px;
    color: #07122a;
    font-size: 25px;
}

.landing-why p {
    margin-top: 8px;
    color: #536987;
    font-size: 13px;
    line-height: 1.55;
}

.landing-why article span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    color: var(--brand-primary);
    border-radius: 10px;
    background: var(--brand-primary-soft);
}

.landing-why strong {
    color: #07122a;
    font-size: 14px;
}

.landing-footer {
    box-sizing: border-box;
    width: min(1260px, calc(100vw - 56px));
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: 34px;
    margin: 22px auto -48px;
    padding: 38px 48px 28px;
    color: rgba(238, 245, 255, .78);
    background: #061127;
    box-shadow: 0 0 0 100vmax #061127;
    clip-path: inset(0 -100vmax);
}

.landing-footer img {
    width: 150px;
    display: block;
    margin-bottom: 14px;
}

.landing-footer p {
    max-width: 290px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.landing-footer nav {
    display: grid;
    align-content: start;
    gap: 9px;
}

.landing-footer strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.landing-footer a {
    color: rgba(238, 245, 255, .72);
    font-size: 13px;
    text-decoration: none;
}

.landing-footer a:hover {
    color: #fff;
}

.landing-footer > span {
    grid-column: 1 / -1;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 12px;
}

.catalog-support-cta {
    position: relative;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    width: min(1220px, calc(100vw - 32px));
    margin: 28px 50% 0;
    padding: 24px 28px;
    overflow: hidden;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, transparent);
    border-radius: 14px;
    background:
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--brand-primary) 42%, transparent), transparent 30%),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--brand-primary-bright) 28%, transparent), transparent 30%),
        linear-gradient(135deg, #061127 0%, #081936 50%, #0b2353 100%);
    box-shadow: 0 24px 54px rgba(7, 19, 43, .24);
    transform: translateX(-50%);
}

.catalog-support-cta::before,
.catalog-support-cta::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: .35;
}

.catalog-support-cta::before {
    width: 92px;
    height: 92px;
    left: -28px;
    top: -26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;
    transform: rotate(18deg);
}

.catalog-support-cta::after {
    width: 150px;
    height: 150px;
    right: 16%;
    bottom: -104px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 28%, transparent);
    filter: blur(24px);
}

.catalog-support-cta-icon {
    position: relative;
    z-index: 1;
    width: 132px;
    height: 78px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.catalog-support-cta-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.catalog-support-cta > div {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.catalog-support-cta strong {
    display: block;
    color: var(--brand-on-primary);
    font-size: 20px;
    font-weight: 900;
}

.catalog-support-cta p {
    max-width: 620px;
    margin: 6px 0 0;
    color: rgba(238, 245, 255, .78);
    font-size: 14px;
    line-height: 1.5;
}

.catalog-support-cta a {
    position: relative;
    z-index: 1;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    color: #fff;
    border-radius: 9px;
    background: var(--brand-primary);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 16px 30px color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

.catalog-support-cta a:hover {
    background: var(--brand-primary-strong);
}

.catalog-support-cta a svg {
    width: 17px;
    height: 17px;
}

.public-support-page {
    display: grid;
    gap: 22px;
}

.public-support-hero {
    display: block;
    padding-bottom: 30px;
    border-bottom: 1px solid #dce7f3;
}

.public-support-hero small {
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.public-support-hero h1 {
    margin: 10px 0;
    color: #07122a;
    font-size: clamp(34px, 4.2vw, 48px);
    line-height: 1.04;
}

.public-support-hero p {
    max-width: 650px;
    margin: 0;
    color: #536987;
    font-size: 15px;
    line-height: 1.65;
}

.public-support-contact span,
.public-support-side span {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.public-support-contact h2,
.public-support-side h2 {
    color: #111b2e;
    font-size: 14px;
}

.public-support-contact p,
.public-support-side p {
    margin: 4px 0 0;
    color: #536987;
    font-size: 12px;
    line-height: 1.5;
}

.public-support-contact a {
    color: var(--brand-primary);
    font-weight: 800;
    text-decoration: none;
}

.public-support-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.public-support-form,
.public-support-side article {
    border: 1px solid #dce6f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .04);
}

.public-support-form {
    overflow: hidden;
    border-radius: 10px;
}

.public-support-form > header {
    display: flex;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid #e6edf6;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.public-support-form > header > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary-border);
    border-radius: 10px;
    background: var(--brand-primary-soft);
}

.public-support-form h2,
.public-support-form p {
    margin: 0;
}

.public-support-form h2 {
    color: #111b2e;
    font-size: 20px;
}

.public-support-form > header p {
    margin-top: 4px;
    color: #536987;
    font-size: 13px;
    line-height: 1.45;
}

.public-support-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding: 24px;
}

.public-support-fields label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #07122a;
    font-size: 12px;
    font-weight: 850;
}

.public-support-fields label.is-wide {
    grid-column: 1 / -1;
}

.public-support-fields input,
.public-support-fields select,
.public-support-fields textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    color: #172033;
    border: 1px solid #d9e5f3;
    border-radius: 9px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    outline: 0;
    font-family: var(--asv-font-family);
    font-size: 13px;
    font-weight: 750;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.public-support-fields textarea {
    min-height: 128px;
    padding-top: 12px;
    line-height: 1.55;
    resize: vertical;
}

.public-support-fields input:focus,
.public-support-fields select:focus,
.public-support-fields textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.public-support-form footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e6edf6;
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
}

.public-support-form footer .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.public-support-form footer .btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.public-support-form footer .btn.secondary {
    color: #172033;
    border: 1px solid #dce6f2;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}

.public-support-form footer .btn.secondary:hover {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 24%, #dce6f2);
    background: var(--brand-primary-subtle);
}

.public-support-form footer .btn.primary {
    color: var(--brand-on-primary);
    border: 1px solid var(--brand-primary);
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-strong) 100%);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}

.public-support-form footer .btn.primary:hover {
    background: var(--brand-primary-strong);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.public-support-side {
    display: grid;
    gap: 14px;
}

.public-support-side article {
    display: grid;
    gap: 11px;
    padding: 18px;
}

.public-support-side article.public-support-contact {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.public-support-contact > div {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
}

.public-support-contact > div + div {
    border-top: 1px solid #e0e8f3;
}

.public-support-side h2 {
    margin: 0;
}

.catalog-billing-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
}

.catalog-billing-options span {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid #dce6f2;
    border-radius: 8px;
    background: #f8fbff;
}

.catalog-billing-options b {
    color: #64748b;
    font-size: 11px;
}

.catalog-billing-options strong {
    font-size: 15px;
}

.catalog-billing-options small {
    color: #15803d;
    font-size: 11px;
}

.catalog-billing-options s {
    color: #94a3b8;
    margin-right: 4px;
}

.catalog-public-empty {
    grid-column: 1 / -1;
    place-items: center;
    min-height: 220px;
    text-align: center;
}

.catalog-public-empty.compact {
    min-height: 90px;
    margin: 18px;
    grid-template-columns: auto 1fr;
    place-items: center start;
    text-align: left;
}

.catalog-order-shell {
    display: grid;
    grid-template-columns: minmax(310px, 440px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 20px;
}

.catalog-order-page {
    width: min(1240px, calc(100% - 32px));
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
}

.catalog-order-page > .catalog-support-cta {
    margin-top: 32px;
}

.catalog-order-steps {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: auto minmax(34px, 1fr) auto minmax(34px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 auto 22px;
}

.catalog-order-steps > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7a879b;
}

.catalog-order-steps > div > span {
    width: 30px;
    height: 30px;
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid #dce6f2;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 900;
}

.catalog-order-steps strong,
.catalog-order-steps small {
    display: block;
    white-space: nowrap;
}

.catalog-order-steps strong { color: #172033; font-size: 13px; }
.catalog-order-steps small { margin-top: 2px; font-size: 11px; }
.catalog-order-steps > i { height: 1px; background: #dce6f2; }
.catalog-order-steps > div.is-active { color: var(--brand-primary); }
.catalog-order-steps > div.is-active > span { color: var(--brand-on-primary); border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-primary) 24%, transparent); }
.catalog-order-steps > div.is-active strong { color: var(--brand-primary); }

.catalog-order-summary,
.catalog-order-form {
    border: 1px solid #dce6f2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.catalog-order-summary {
    display: grid;
    gap: 14px;
    padding: 21px;
}

.catalog-order-summary .catalog-order-product {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.catalog-order-back {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 14px;
    padding: 7px 10px 7px 8px;
    color: #52627a;
    border: 1px solid #e2e9f3;
    border-radius: 7px;
    background: #f8faff;
    font-size: 11px;
    font-weight: 800;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.catalog-order-back:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
}

.catalog-order-back svg {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
}

.catalog-order-plan-head { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; }
.catalog-order-plan-head > span { width: 54px; height: 54px; display: grid; place-items: center; color: var(--brand-primary); border-radius: 9px; background: var(--brand-primary-soft); }
.catalog-order-plan-head > span svg { width: 28px; height: 28px; }
.catalog-order-plan-head small { display: block; margin-bottom: 3px; color: var(--brand-primary); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.catalog-order-summary .catalog-order-plan-head h1 { margin: 0; color: #07122a; font-size: 24px; line-height: 1.12; }
.catalog-order-summary .catalog-order-plan-head p { margin: 4px 0 0; color: #68758a; font-size: 12px; font-weight: 700; }

.catalog-order-summary .catalog-order-product > .catalog-html-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 18px;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.catalog-order-summary .catalog-html-copy *,
.catalog-order-summary .catalog-html-copy *::before,
.catalog-order-summary .catalog-html-copy *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.catalog-order-summary .catalog-html-copy :where(img, video, iframe, table) {
    max-width: 100% !important;
}

.catalog-order-summary .catalog-html-copy :where(img, video) {
    height: auto !important;
}

.catalog-order-specs {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
}

.catalog-order-specs > div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #e1e9f4;
    border-radius: 7px;
    background: #f8faff;
}

.catalog-order-specs > div > span {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
}

.catalog-order-specs > div > span svg { width: 16px; height: 16px; }
.catalog-order-specs dt { min-width: 0; color: #40516b; font-size: 12px; font-weight: 750; }
.catalog-order-specs dd { margin: 0; color: #172033; font-size: 12px; font-weight: 900; text-align: right; }

.catalog-order-product,
.catalog-order-form {
    display: grid;
    gap: 16px;
}

.catalog-order-product > span,
.catalog-order-form > header > span,
.catalog-order-empty > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}

.catalog-order-product h1,
.catalog-order-product p,
.catalog-order-form h2,
.catalog-order-form p,
.catalog-order-empty p {
    margin: 0;
}

.catalog-order-product h1 {
    color: #07122a;
    font-size: 26px;
    line-height: 1.12;
}

.catalog-order-product > small,
.catalog-order-form small {
    color: #6f7d93;
    font-size: 11px;
    font-weight: 800;
}

.catalog-order-product strong {
    color: #07122a;
    font-size: 30px;
}

.catalog-order-product p {
    color: #657389;
    font-size: 13px;
    font-weight: 850;
}

.catalog-order-form {
    padding: 25px;
}

.catalog-order-form > header {
    position: relative;
    display: block;
    min-height: 64px;
    margin-bottom: 20px;
    padding: 2px 150px 16px 0;
    border-bottom: 1px solid #e6edf6;
    overflow: visible;
}

.catalog-order-form > header::before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -20px;
    width: 230px;
    height: 74px;
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 17%, transparent);
    border-radius: 50%;
    background:
        radial-gradient(circle at 72% 22%, var(--brand-primary) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 55%, var(--brand-primary-bright) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 68%, var(--brand-primary) 0 1.5px, transparent 2.5px);
    opacity: .7;
    transform: rotate(7deg);
    pointer-events: none;
}

.catalog-order-form > header::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: -51px;
    width: 128px;
    height: 128px;
    z-index: 3;
    background:
        var(--brand-mascot-image) center / contain no-repeat,
        radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 14%, transparent) 0 30%, color-mix(in srgb, var(--brand-primary) 6%, transparent) 48%, transparent 72%);
    filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--brand-primary) 18%, transparent));
    pointer-events: none;
}

.catalog-order-form h2 {
    color: #07122a;
    font-size: 26px;
}

.catalog-order-form > header p {
    margin-top: 3px;
    color: #657389;
    font-size: 14px;
}

.catalog-order-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.catalog-order-fields label {
    display: grid;
    align-content: start;
    align-self: start;
    gap: 8px;
    min-width: 0;
    color: #07122a;
    font-size: 12px;
    font-weight: 850;
}

.catalog-order-fields label:only-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(260px, 1.25fr) minmax(180px, .75fr);
    column-gap: 18px;
}

.catalog-order-fields label:only-child > span { grid-column: 1 / -1; }
.catalog-order-fields label:only-child > .catalog-order-control { grid-column: 1; }
.catalog-order-fields label:only-child > small { grid-column: 2; align-self: center; margin: 0; }

.catalog-order-fields label > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #52627a;
    font-size: 10px;
    text-transform: uppercase;
}

.catalog-order-fields label > span svg {
    width: 15px;
    height: 15px;
    color: var(--brand-primary);
}

.catalog-order-fields label.is-wide {
    grid-column: 1 / -1;
}

.catalog-order-control {
    position: relative;
    min-width: 0;
}

.catalog-order-control > i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #738199;
    transform: translateY(-50%);
    pointer-events: none;
}

.catalog-order-control > i svg { width: 15px; height: 15px; }

.catalog-order-control input,
.catalog-order-control select,
.catalog-order-control textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 13px;
    color: #172033;
    border: 1px solid #d9e5f3;
    border-radius: 8px;
    background: #fff;
    outline: 0;
    font-family: var(--asv-font-family);
    font-weight: 750;
}

.catalog-order-control.has-icon input,
.catalog-order-control.has-icon select,
.catalog-order-control.has-icon textarea { padding-left: 39px; }

.catalog-order-control.has-password input { padding-right: 48px; }

.catalog-os-select { display: none; }

.catalog-order-control.has-enhanced-select > select { display: none; }

.catalog-os-select.is-enhanced {
    position: relative;
    display: block;
    width: 100%;
}

.catalog-os-trigger {
    width: 100%;
    min-height: 54px;
    padding: 7px 12px 7px 9px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    color: #172033;
    text-align: left;
    border: 1px solid #d9e5f3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.catalog-os-trigger:hover { background: #fbfdff; border-color: #bed3ef; }

.catalog-os-trigger:focus-visible,
.catalog-os-select.is-open .catalog-os-trigger {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
    outline: 0;
}

.catalog-os-trigger > span:nth-child(2),
.catalog-os-options button > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.catalog-os-trigger strong,
.catalog-os-options strong {
    overflow: hidden;
    color: #111c32;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-os-trigger small,
.catalog-os-options small {
    overflow: hidden;
    margin: 0;
    color: #74829a;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-os-trigger > svg {
    width: 17px;
    height: 17px;
    color: #75849a;
    transition: transform 160ms ease;
}

.catalog-os-select.is-open .catalog-os-trigger > svg { transform: rotate(180deg); }

.catalog-os-logo {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid #dce8f7;
    border-radius: 8px;
    background: #f5f9ff;
}

.catalog-os-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.catalog-os-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    z-index: 40;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(24, 48, 82, .16);
}

.catalog-os-search {
    height: 39px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #dfe8f3;
    border-radius: 7px;
    background: #f7faff;
}

.catalog-os-search svg { width: 15px; height: 15px; color: #728198; }

.catalog-os-search input {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
}

.catalog-os-search input:focus { border: 0; box-shadow: none; }

.catalog-order-control .catalog-os-search input:focus {
    border: 0;
    box-shadow: none;
}

.catalog-os-options {
    max-height: min(330px, 50vh);
    display: grid;
    gap: 3px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.catalog-os-options button {
    width: 100%;
    min-height: 50px;
    padding: 5px 9px 5px 6px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    color: #172033;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}

.catalog-os-options button[hidden] { display: none; }

.catalog-os-options button:hover,
.catalog-os-options button:focus-visible {
    border-color: #d7e6f8;
    background: #f5f9ff;
    outline: 0;
}

.catalog-os-options button[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, #dbe7f5);
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.catalog-os-options button > svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
    opacity: 0;
}

.catalog-os-options button[aria-selected="true"] > svg { opacity: 1; }

.catalog-os-empty {
    margin: 6px 0 3px;
    color: #74829a;
    font-size: 10px;
    text-align: center;
}

.catalog-order-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    color: #71809a;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.catalog-order-password-toggle:hover,
.catalog-order-password-toggle:focus-visible {
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    outline: 0;
}

.catalog-order-password-toggle span,
.catalog-order-password-toggle svg { width: 17px; height: 17px; }
.catalog-order-password-toggle .is-hiding { display: none; }
.catalog-order-password-toggle.is-visible .is-showing { display: none; }
.catalog-order-password-toggle.is-visible .is-hiding { display: grid; }

.catalog-password-strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-top: -1px;
}

.catalog-password-strength > span {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: #e6edf6;
}

.catalog-password-strength > span > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #d7e0ec;
    transition: width 180ms ease, background-color 180ms ease;
}

.catalog-password-strength > small {
    min-width: 88px;
    margin: 0;
    color: #74829a;
    text-align: right;
    white-space: nowrap;
}

.catalog-password-strength[data-level="1"] > span > i { width: 34%; background: #dc3545; }
.catalog-password-strength[data-level="2"] > span > i { width: 67%; background: #e7a008; }
.catalog-password-strength[data-level="3"] > span > i { width: 100%; background: #19ad6f; }
.catalog-password-strength[data-level="1"] > small { color: #c52c3c; }
.catalog-password-strength[data-level="2"] > small { color: #a87500; }
.catalog-password-strength[data-level="3"] > small { color: #13845a; }

.catalog-order-control textarea {
    padding-top: 12px;
    resize: vertical;
}

.catalog-order-control input:focus,
.catalog-order-control select:focus,
.catalog-order-control textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

.catalog-order-fields label small {
    margin-top: -2px;
    color: #74829a;
    max-width: 100%;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 650;
}

.catalog-order-empty {
    display: flex;
    gap: 13px;
    padding: 15px;
    border: 1px dashed #cfe0f7;
    border-radius: 8px;
    background: #f8fbff;
}

.catalog-order-empty strong {
    display: block;
    margin-bottom: 3px;
    color: #172033;
}

.catalog-order-billing {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.catalog-order-fields + .catalog-order-billing {
    margin-top: 10px;
}

.catalog-order-billing > header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.catalog-order-billing > header > span {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.catalog-order-billing > header strong,
.catalog-order-billing > header small { display: block; }
.catalog-order-billing > header strong { color: #172033; font-size: 12px; }
.catalog-order-billing > header small { margin-top: 2px; color: #74829a; font-size: 10px; }

.catalog-order-cycles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
}

.catalog-order-cycles label {
    position: relative;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #dce6f2;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.catalog-order-cycles label:hover,
.catalog-order-cycles label.is-selected {
    border-color: var(--brand-primary);
    background: var(--brand-primary-subtle);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.catalog-order-cycles input { position: absolute; opacity: 0; pointer-events: none; }
.catalog-order-cycles label > span { display: flex; align-items: center; min-width: 0; }
.catalog-order-cycles strong { color: #172033; font-size: 12px; }
.catalog-order-cycles em { position: absolute; top: 50%; right: 8px; padding: 2px 6px; color: var(--brand-primary-strong); border-radius: 999px; background: var(--brand-primary-soft); font-size: 9px; font-style: normal; font-weight: 900; transform: translateY(-50%); }
.catalog-order-cycles label:has(em) > span { padding-right: 40px; }

.catalog-order-cycles label.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    color: var(--brand-on-primary);
    border-radius: 50%;
    background: var(--brand-primary);
    font-size: 10px;
    font-weight: 900;
    transform: translateY(-50%);
}

.catalog-order-cycles label.is-selected:has(em) em { right: 31px; }
.catalog-order-cycles label.is-selected:has(em) > span { padding-right: 66px; }

.catalog-order-trial-status {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 9px;
    background: var(--brand-primary-subtle);
}

.catalog-order-trial-status > span {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.catalog-order-trial-status > span svg { width: 18px; height: 18px; }
.catalog-order-trial-status strong,
.catalog-order-trial-status small { display: block; }
.catalog-order-trial-status strong { color: #172033; font-size: 12px; }
.catalog-order-trial-status small { margin-top: 3px; color: #65758d; font-size: 10px; line-height: 1.45; }
.catalog-order-trial-status.is-used { border-color: #dce6f2; background: #f8fbff; }
.catalog-order-trial-status.is-used > span { color: #52627a; background: #eaf0f7; }

.catalog-order-payable {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(170px, 190px);
    align-items: center;
    gap: 18px;
    padding: 11px 11px 11px 15px;
    border: 1px solid #dce6f2;
    border-radius: 9px;
    background: #fff;
}

.catalog-order-payable-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.catalog-order-payable-label > svg { width: 21px; height: 21px; flex: 0 0 21px; color: #68758a; }
.catalog-order-payable-label strong,
.catalog-order-payable-label small { display: block; }
.catalog-order-payable-label strong { color: #172033; font-size: 12px; }
.catalog-order-payable-label small { margin-top: 2px; color: #7a879b; font-size: 9px; }
.catalog-order-payable-price { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.catalog-order-payable-price > strong { color: #07122a; font-size: 25px; }
.catalog-order-payable-price > span { color: #68758a; font-size: 10px; }
.catalog-order-payable-price > .catalog-order-current-price { display: inline-flex; align-items: baseline; gap: 5px; color: #68758a; font-size: 10px; white-space: nowrap; }
.catalog-order-current-price > strong { color: #07122a; font-size: 25px; }
.catalog-order-current-price > span { color: #68758a; font-size: 10px; }
.catalog-order-payable-price b { font-weight: 800; }
.catalog-order-payable-price > .catalog-order-payable-base { color: #68758a; font-size: 11px; font-weight: 750; }
.catalog-order-payable-base s { color: #68758a; }
.catalog-order-payable-price > [hidden] { display: none; }
.catalog-order-payable-price:has(.catalog-order-payable-renewal) { display: grid; grid-template-columns: auto auto; align-items: baseline; }
.catalog-order-payable-renewal { grid-column: 1 / -1; color: #68758a; font-size: 9px; font-weight: 700; text-align: right; }

.catalog-order-coupon {
    margin-top: -7px;
    border: 1px solid #e1e9f3;
    border-radius: 9px;
    background: #fbfcfe;
}

.catalog-order-coupon > button {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: #52627a;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.catalog-order-coupon > button > svg:first-child { width: 17px; height: 17px; color: var(--brand-primary); }
.catalog-order-coupon > button > svg:last-child { width: 14px; height: 14px; transition: transform .18s ease; }
.catalog-order-coupon > button[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.catalog-order-coupon > button span { font-size: 11px; }
.catalog-order-coupon > button strong { color: #172033; font-size: 12px; }

.catalog-order-coupon > div {
    padding: 0 12px 12px 39px;
}

.catalog-order-coupon > div[hidden] { display: none; }
.catalog-order-coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.catalog-order-coupon > div > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.catalog-order-coupon input { min-width: 0; height: 38px; padding: 0 11px; border: 1px solid #d9e5f3; border-radius: 7px; background: #fff; font-family: var(--asv-font-family); font-size: 11px; font-weight: 750; outline: 0; }
.catalog-order-coupon input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.catalog-order-coupon [data-order-coupon-apply] { min-width: 76px; padding: 0 14px; color: var(--brand-on-primary); border: 0; border-radius: 7px; background: var(--brand-primary); font-size: 11px; font-weight: 850; cursor: pointer; }
.catalog-order-coupon small { display: block; margin-top: 6px; color: #74829a; font-size: 9px; font-weight: 650; }
.catalog-order-coupon small.is-valid { color: #087a4b; }
.catalog-order-coupon small.is-invalid { color: #b4232f; }
.catalog-order-coupon [data-order-coupon-apply]:disabled { cursor: wait; opacity: .65; }

.catalog-order-form footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid #e6edf6;
}

.catalog-order-continue {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 22px;
    color: var(--brand-on-primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 78%, #fff);
    border-radius: 8px;
    background: var(--brand-primary);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--brand-primary) 24%, transparent);
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.catalog-order-continue b {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    transition: transform .16s ease;
}

.catalog-order-continue:hover {
    background: var(--brand-primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 15px 28px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

.catalog-order-continue:hover b { transform: translateX(3px); }

@media (max-width: 900px) {
    .catalog-topbar-inner { display: flex; flex-wrap: wrap; padding: 12px 0; }
    .catalog-brand { order: 1; }
    .catalog-account-menu { order: 2; }
    .catalog-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 14px; overflow: visible; }
    .catalog-nav > a,
    .catalog-products-menu > summary { min-height: 42px; white-space: nowrap; }
    .catalog-products-dropdown {
        left: 0;
        width: min(350px, calc(100vw - 32px));
        transform: none;
    }

    .catalog-products-dropdown::before {
        left: 24px;
        transform: rotate(45deg);
    }

    .catalog-account-dropdown { width: min(280px, calc(100vw - 32px)); }
    .catalog-hero,
    .landing-hero,
    .landing-panel-showcase,
    .landing-why,
    .landing-footer,
    .catalog-products,
    .catalog-products.compact {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        transform: none;
    }

    .landing-hero {
        padding: 38px 22px 72px;
    }

    .landing-hero h1 {
        font-size: clamp(34px, 11vw, 48px);
    }

    .landing-hero-visual {
        min-height: 270px;
    }

    .landing-benefits {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 14px 0 0;
        transform: none;
    }

    .landing-benefits article + article {
        border-top: 1px solid #e0e8f3;
        border-left: 0;
    }

    .landing-all-products > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-product-slider {
        grid-auto-columns: minmax(270px, 86%);
        padding: 14px;
    }

    .landing-panel-showcase {
        padding: 24px;
    }

    .landing-panel-showcase figure {
        min-height: 260px;
    }

    .landing-panel-client {
        width: 88%;
    }

    .landing-panel-admin {
        width: 68%;
    }

    .landing-why article {
        border-top: 1px solid #e5edf7;
        border-left: 0;
    }

    .landing-footer {
        width: min(100%, calc(100vw - 56px));
        margin-right: auto;
        margin-left: auto;
        margin-bottom: -48px;
        padding: 28px 24px 22px;
    }

    .catalog-benefits {
        grid-template-columns: 1fr;
    }

    .public-support-hero,
    .public-support-shell,
    .public-support-fields {
        grid-template-columns: 1fr;
    }

    .catalog-benefits article + article {
        border-top: 1px solid #e0e8f3;
        border-left: 0;
    }

    .catalog-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-sort {
        width: 100%;
        justify-content: space-between;
    }

    .catalog-order-shell,
    .catalog-order-fields {
        grid-template-columns: 1fr;
    }

    .catalog-order-fields label:only-child {
        grid-template-columns: 1fr;
    }

    .catalog-order-fields label:only-child > .catalog-order-control,
    .catalog-order-fields label:only-child > small {
        grid-column: 1;
    }

    .catalog-os-options { max-height: min(290px, 44vh); }

    .catalog-order-payable {
        grid-template-columns: 1fr auto;
    }

    .catalog-order-payable .catalog-order-continue {
        grid-column: 1 / -1;
    }

    .catalog-order-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .catalog-order-steps > i { display: none; }

    .catalog-order-steps > div {
        align-items: flex-start;
    }

    .catalog-order-steps small { white-space: normal; }

    .catalog-public-group > header {
        flex-direction: column;
    }

    .catalog-support-cta {
        grid-template-columns: 92px minmax(0, 1fr);
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 20px;
        transform: none;
    }

    .catalog-support-cta-icon {
        width: 104px;
        height: 64px;
    }

    .catalog-support-cta a {
        grid-column: 1 / -1;
        width: 100%;
    }

    .catalog-order-form footer {
        display: grid;
    }

    .public-support-form footer {
        display: grid;
    }
}

.admin-clients .client-identity {
    gap: 12px;
}

.admin-clients .client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    box-shadow: 0 7px 16px rgba(30, 58, 120, .16);
}

.admin-clients .client-identity strong,
.admin-clients .client-table td > strong {
    color: #172033;
    font-size: 12px;
}

.client-count,
.client-date {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.client-count > i,
.client-date > i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 7px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.client-count > i svg,
.client-date > i svg {
    width: 14px;
    height: 14px;
}

.client-count > span,
.client-date > span {
    display: grid;
    gap: 2px;
}

.client-count strong,
.client-date strong {
    color: #172033;
    font-size: 13px;
}

.client-count small,
.client-date small {
    color: #8390a3;
    font-size: 9px;
    font-weight: 650;
}

.client-row-action-cell {
    text-align: right !important;
}

.client-row-action {
    width: auto;
    min-width: 90px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    color: var(--brand-primary);
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    font-size: 11px;
    font-weight: 800;
}

.client-row-action:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, #dce5f0);
    background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
    transform: translateX(2px);
}

.client-row-action svg {
    width: 16px;
    height: 16px;
}

.status.suspended {
    color: #92400e;
    background: #fef3c7;
}

.client-create-toolbar {
    margin: -8px 0 16px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 750;
}

.back-link svg {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
}

.form-errors {
    display: grid;
    gap: 5px;
    margin: 0 0 16px;
}

.client-create-form {
    padding: 0;
    overflow: hidden;
}

.form-section {
    display: grid;
    grid-template-columns: minmax(190px, .38fr) minmax(0, 1fr);
    gap: 34px;
    padding: 26px;
    border-bottom: 1px solid #e8edf4;
}

.form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.form-section-heading > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 8px;
    background: #eef3ff;
}

.form-section-heading svg {
    width: 17px;
    height: 17px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-grid label {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
    color: #344158;
    font-size: 12px;
    font-weight: 750;
}

.form-grid input,
.form-grid select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: #172033;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    font-size: 13px;
}

.form-grid input:focus,
.form-grid select:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.form-grid label > small {
    color: #7b8799;
    font-size: 10px;
    font-weight: 600;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px;
    background: #f8fafc;
}

.form-actions .btn {
    gap: 8px;
}

.form-actions .btn svg {
    width: 17px;
    height: 17px;
}

/* Refined client creation flow */
.admin-client-create .client-create-toolbar {
    margin-top: -6px;
    margin-bottom: 18px;
}

.admin-client-create .client-create-form {
    border-color: #dfe6f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
}

.admin-client-create .form-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 30px 30px;
}

.admin-client-create .form-section + .form-section {
    background: #fbfcfe;
}

.admin-client-create .form-section-heading {
    align-items: center;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9eef5;
}

.admin-client-create .form-section-heading > span {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 13%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}

.admin-client-create .form-section-heading h2 {
    font-size: 17px;
}

.admin-client-create .form-section-heading p {
    margin-top: 3px;
    font-size: 11px;
}

.admin-client-create .form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 20px;
}

.admin-client-create .field-name,
.admin-client-create .field-company {
    grid-column: span 6;
}

.admin-client-create .field-document,
.admin-client-create .field-birth,
.admin-client-create .field-phone {
    grid-column: span 4;
}

.admin-client-create .field-email,
.admin-client-create .field-password {
    grid-column: span 5;
}

.admin-client-create .field-status {
    grid-column: span 2;
}

.admin-client-create .form-grid label {
    gap: 8px;
    color: #243047;
}

.admin-client-create .form-grid input,
.admin-client-create .form-grid select {
    height: 46px;
    padding: 0 14px;
    border-color: #d6dfeb;
    background: #fff;
}

.admin-client-create .form-grid input::placeholder {
    color: #98a4b5;
    font-weight: 500;
}

.admin-client-create .form-actions {
    align-items: center;
    padding: 18px 30px;
    border-top: 0;
    background: #f6f8fb;
}

.admin-client-create .form-actions .btn {
    min-height: 44px;
}

@media (max-width: 1100px) {
    .admin-client-create .field-document,
    .admin-client-create .field-birth,
    .admin-client-create .field-phone,
    .admin-client-create .field-email,
    .admin-client-create .field-password,
    .admin-client-create .field-status {
        grid-column: span 6;
    }
}

@media (max-width: 700px) {
    .admin-client-create .form-section {
        gap: 18px;
        padding: 20px 16px 22px;
    }

    .admin-client-create .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .admin-client-create .form-grid > label {
        grid-column: 1;
    }

    .admin-client-create .form-actions {
        padding: 14px 16px;
    }
}

/* Client profile */
.admin-client-profile {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
}

.profile-back-link {
    margin: -8px 0 16px;
}

.client-profile-header {
    min-height: 138px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px;
    border-color: var(--dashboard-line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.client-profile-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 17px;
}

.profile-avatar {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 8px;
    background: #1e3a78;
    font-size: 24px;
    font-weight: 800;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-name-row h2 {
    margin: 0;
    color: #121a2b;
    font-size: 23px;
}

.client-profile-identity p {
    margin: 7px 0 5px;
    color: #536177;
    font-size: 12px;
}

.client-profile-identity p span {
    margin-inline: 4px;
    color: #a2adbc;
}

.client-profile-identity small {
    color: #7b8799;
    font-size: 10px;
}

.client-profile-header .btn {
    gap: 8px;
    flex: 0 0 auto;
}

.client-profile-header .btn svg {
    width: 15px;
    height: 15px;
}

.client-profile-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 14px 0;
    padding: 0 14px;
    overflow-x: auto;
    border: 1px solid var(--dashboard-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .04);
    scrollbar-width: none;
}

.client-profile-tabs::-webkit-scrollbar {
    display: none;
}

.client-profile-tabs a {
    position: relative;
    min-width: 0;
    min-height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 12px;
    color: #68758a;
    border-right: 1px solid #edf1f6;
    font-size: 12px;
    transition: color .16s ease, background .16s ease;
}

.client-profile-tabs a:last-child {
    border-right: 0;
}

.client-profile-tabs a::after {
    position: absolute;
    right: 22%;
    bottom: -1px;
    left: 22%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    content: '';
}

.client-profile-tabs a > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: #8290a4;
}

.client-profile-tabs a > strong {
    min-width: 0;
    font-weight: 750;
}

.client-profile-tabs a:hover {
    color: var(--brand-primary-strong);
    background: #f8faff;
}

.client-profile-tabs a.active {
    color: var(--brand-primary-strong);
    background: #f5f8ff;
    box-shadow: none;
}

.client-profile-tabs a.active::after {
    background: var(--brand-primary);
}

.client-profile-tabs a.active > svg {
    color: var(--brand-primary);
}

.client-profile-tabs a span {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    color: #59677d;
    background: #edf1f6;
    font-size: 9px;
}

.client-profile-tabs a.active span {
    color: #fff;
    background: var(--brand-primary);
}

.client-profile-content,
.client-edit-form,
.email-preview-panel {
    padding: 0;
    overflow: hidden;
    border-color: var(--dashboard-line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.profile-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #e8edf4;
}

.profile-metrics > div {
    min-width: 0;
    padding: 24px 26px;
    border-right: 1px solid #e8edf4;
}

.profile-metrics > div:last-child {
    border-right: 0;
}

.profile-metrics span,
.profile-metrics strong {
    display: block;
}

.profile-metrics span {
    color: #7b8799;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.profile-metrics strong {
    margin-top: 8px;
    color: #111827;
    font-size: 22px;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-details-grid > section {
    min-width: 0;
    padding: 24px;
}

.profile-details-grid > section + section {
    border-left: 1px solid #e8edf4;
}

.profile-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
}

.profile-section-title svg {
    width: 17px;
    height: 17px;
    color: var(--brand-primary);
}

.profile-section-title h3 {
    margin: 0;
    color: #172033;
    font-size: 14px;
}

.profile-details-grid dl {
    margin: 0;
}

.profile-details-grid dl > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #edf1f6;
}

.profile-details-grid dt {
    color: #7b8799;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.profile-details-grid dd {
    min-width: 0;
    margin: 0;
    color: #263247;
    font-size: 12px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.profile-content-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px;
    border-bottom: 1px solid #e8edf4;
}

.profile-content-header > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.profile-content-header > div > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.profile-content-header h2 {
    margin: 0;
    color: #172033;
    font-size: 15px;
}

.profile-content-header p {
    margin: 4px 0 0;
    color: #7b8799;
    font-size: 10px;
}

.profile-content-header > strong {
    flex: 0 0 auto;
    color: #68758a;
    font-size: 10px;
}

.profile-table-wrap {
    overflow-x: auto;
}

.profile-data-table {
    width: 100%;
    border-collapse: collapse;
}

.profile-data-table th,
.profile-data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #edf1f6;
    text-align: left;
    vertical-align: middle;
}

.profile-data-table th {
    color: #7b8799;
    background: #f8fafc;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-data-table td {
    color: #344158;
    font-size: 11px;
}

.profile-data-table td > strong,
.profile-data-table td > small {
    display: block;
}

.profile-data-table td > small {
    margin-top: 3px;
    color: #8a96a8;
    font-size: 9px;
}

.profile-data-table tbody tr:hover {
    background: #fafcff;
}

.client-email-history .profile-content-header {
    border-bottom: 1px solid #e7edf6;
}

.email-history-list {
    display: grid;
}

.email-history-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border-bottom: 1px solid #edf1f6;
    background: #fff;
}

.email-history-item:last-child {
    border-bottom: 0;
}

.email-history-item:hover {
    background: #fafcff;
}

.email-history-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-history-item.status-failed .email-history-icon {
    color: #b91c1c;
    background: #fee2e2;
}

.email-history-icon svg {
    width: 18px;
    height: 18px;
}

.email-history-main {
    min-width: 0;
}

.email-history-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.email-history-title strong {
    min-width: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-history-title .status {
    flex: 0 0 auto;
}

.email-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 7px;
}

.email-history-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #667792;
    font-size: 11px;
}

.email-history-meta svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #8a98ad;
}

.email-history-main p {
    margin: 7px 0 0;
    color: #9f1239;
    font-size: 11px;
    line-height: 1.45;
}

.email-preview-button {
    gap: 7px;
    min-width: 96px;
}

.email-preview-button svg {
    width: 15px;
    height: 15px;
}

.profile-empty {
    padding: 34px 20px;
    text-align: center;
}

.table-icon-action {
    width: 34px;
    height: 34px;
}

.table-icon-action svg {
    width: 16px;
    height: 16px;
}

.status.queued {
    color: #92400e;
    background: #fef3c7;
}

.status.sent {
    color: #166534;
    background: #dcfce7;
}

.status.failed {
    color: #991b1b;
    background: #fee2e2;
}

.status.paused {
    color: #92400e;
    background: #fef3c7;
}

.status.canceled {
    color: #475569;
    background: #e2e8f0;
}

.email-preview-panel {
    margin-top: 14px;
}

.email-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid #e8edf4;
}

.email-preview-header span {
    color: var(--brand-primary);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.email-preview-header h2 {
    margin: 5px 0 0;
    color: #172033;
    font-size: 16px;
}

.email-preview-header p {
    margin: 5px 0 0;
    color: #7b8799;
    font-size: 10px;
}

.email-preview-frame {
    width: 100%;
    height: 520px;
    display: block;
    border: 0;
    background: #fff;
}

.email-text-preview {
    min-height: 260px;
    margin: 0;
    padding: 24px;
    color: #263247;
    background: #fff;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.email-preview-dialog {
    width: min(980px, calc(100% - 32px));
    max-height: min(860px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    color: #172033;
    border: 1px solid #dce6f1;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .3);
}

.email-preview-dialog::backdrop {
    background: rgba(2, 6, 23, .62);
    backdrop-filter: blur(3px);
}

.email-preview-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #e1e8f2;
    background: #fff;
}

.email-preview-dialog-header span {
    color: var(--brand-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.email-preview-dialog-header h2 {
    margin: 6px 0 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.email-preview-dialog-header p {
    margin: 6px 0 0;
    color: #667792;
    font-size: 12px;
}

.email-preview-dialog-header .icon-action {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.email-preview-dialog-toolbar {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-bottom: 1px solid #e1e8f2;
    background: #f8fafc;
}

.email-preview-dialog-toolbar strong {
    min-width: 0;
    color: #991b1b;
    font-size: 12px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-preview-dialog-toolbar .btn {
    margin-left: auto;
}

.email-preview-dialog-body {
    height: min(640px, calc(100vh - 210px));
    min-height: 360px;
    padding: 18px;
    overflow: auto;
    background: #eaf0f7;
}

.email-preview-dialog-body .email-preview-frame {
    width: min(720px, 100%);
    height: 100%;
    min-height: 560px;
    margin: 0 auto;
    border: 1px solid #d7e1ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

.client-edit-form .profile-content-header {
    background: #fff;
}

.profile-edit-section {
    border-bottom: 0;
}

.client-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 14px;
    padding: 18px 20px;
    border-color: #fecaca;
    background: #fff;
    box-shadow: 0 8px 24px rgba(127, 29, 29, .045);
}

.client-danger-zone > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.danger-zone-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #b91c1c;
    border-radius: 8px;
    background: #fef2f2;
}

.danger-zone-icon svg {
    width: 17px;
    height: 17px;
}

.client-danger-zone h2 {
    margin: 0;
    color: #7f1d1d;
    font-size: 14px;
}

.client-danger-zone p {
    margin: 4px 0 0;
    color: #7b8799;
    font-size: 10px;
}

.danger-button {
    color: #fff;
    background: #b91c1c;
}

.danger-button:hover {
    background: #991b1b;
}

.confirm-dialog {
    width: min(460px, calc(100% - 32px));
    padding: 0;
    color: #172033;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.confirm-dialog::backdrop {
    background: rgba(2, 6, 23, .58);
    backdrop-filter: blur(2px);
}

.confirm-dialog-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 22px;
    border-bottom: 1px solid #edf1f6;
}

.confirm-dialog-heading > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #b91c1c;
    border-radius: 8px;
    background: #fef2f2;
}

.confirm-dialog-heading svg {
    width: 18px;
    height: 18px;
}

.confirm-dialog-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 17px;
}

.confirm-dialog-heading p {
    margin: 5px 0 0;
    color: #7b8799;
    font-size: 11px;
}

.confirm-dialog form {
    padding: 20px 22px 22px;
}

.confirm-dialog label {
    display: grid;
    gap: 9px;
    color: #536177;
    font-size: 11px;
}

.confirm-dialog input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: #172033;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    outline: 0;
}

.confirm-dialog input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.confirm-dialog-actions .btn {
    gap: 8px;
}

.confirm-dialog-actions svg {
    width: 16px;
    height: 16px;
}

.access-ban-dialog form { display: grid; gap: 15px; }
.access-ban-dialog label { color: #26344b; font-weight: 700; }
.access-ban-dialog label > span { color: #8290a5; font-weight: 500; }
.access-ban-dialog select,
.access-ban-dialog input,
.access-ban-dialog textarea {
    width: 100%;
    padding: 11px 12px;
    color: #172033;
    border: 1px solid #dbe3ee;
    border-radius: 8px;
    background: #fff;
    font-family: var(--asv-font-family);
    font-size: 12px;
    outline: 0;
}
.access-ban-dialog select:focus,
.access-ban-dialog input:focus,
.access-ban-dialog textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }
.access-ban-dialog textarea { min-height: 76px; resize: vertical; }
.access-ban-target { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #e1e8f1; border-radius: 8px; background: #f8fafc; }
.access-ban-target strong { color: #172033; font-size: 13px; }
.access-ban-target span,
.access-ban-help { color: #718096; font-size: 10px; line-height: 1.5; }
.access-ban-help { margin: -7px 0 0; }
.access-ban-dialog .confirm-dialog-actions { margin-top: 3px; }
.access-ban-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-left: auto; }
.access-ban-source-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid #dce5f0; border-radius: 999px; background: #f5f8fc; color: #546278; font-size: 9px; font-weight: 800; }
.access-ban-source-badge.is-automatic { border-color: #f4cf9d; background: #fff7e8; color: #9a5a05; }
.manual-access-ban-dialog { width: min(520px, calc(100vw - 28px)); }

.access-ban-item { grid-template-columns: 44px minmax(220px, 1fr) minmax(280px, .8fr) auto; }
.access-ban-facts { grid-template-columns: repeat(2, minmax(125px, 1fr)); }
.access-ban-revoke { display: flex; justify-content: flex-end; }
.access-ban-revoke .btn { min-height: 36px; white-space: nowrap; }

@container (max-width: 950px) {
    .access-ban-item { grid-template-columns: 44px minmax(0, 1fr) auto; }
    .access-ban-facts { grid-column: 2 / -1; }
    .access-ban-revoke { grid-column: 3; grid-row: 1; }
}

@container (max-width: 650px) {
    .access-ban-hero-actions { width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; }
    .access-ban-hero-actions .btn { width: 100%; }
    .access-ban-item { grid-template-columns: 40px minmax(0, 1fr); }
    .access-ban-facts,
    .access-ban-revoke { grid-column: 1 / -1; grid-row: auto; }
    .access-ban-facts div:first-child { padding-left: 0; border-left: 0; }
    .access-ban-revoke .btn { width: 100%; }
}

.access-blocked-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f2f6fb; color: #172033; }
.access-blocked-card { width: min(520px, 100%); padding: 34px; border: 1px solid #dbe5f1; border-top: 3px solid #1768e5; border-radius: 8px; background: #fff; box-shadow: 0 22px 55px rgba(20, 37, 63, .1); text-align: center; }
.access-blocked-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 8px; background: #eaf2ff; color: #1768e5; }
.access-blocked-icon svg { width: 23px; height: 23px; }
.access-blocked-kicker { display: block; margin-bottom: 7px; color: #1768e5; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.access-blocked-card h1 { margin: 0; font-size: 23px; line-height: 1.25; }
.access-blocked-card > p { margin: 9px auto 0; max-width: 430px; color: #65738a; font-size: 13px; line-height: 1.55; }
.access-blocked-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; border: 1px solid #e2e8f1; border-radius: 8px; text-align: left; }
.access-blocked-card dl div { padding: 12px 14px; }
.access-blocked-card dl div + div { border-left: 1px solid #e2e8f1; }
.access-blocked-card dt { color: #7a879a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.access-blocked-card dd { margin: 4px 0 0; color: #172033; font-size: 12px; font-weight: 800; }
.access-blocked-card .access-blocked-note { margin-top: 16px; font-size: 11px; }
.access-blocked-card.is-warning { border-top-color: #d78b18; }
.access-blocked-card.is-warning .access-blocked-icon { background: #fff5df; color: #a96508; }
@media (max-width: 520px) {
    .access-blocked-page { padding: 14px; }
    .access-blocked-card { padding: 26px 20px; }
    .access-blocked-card dl { grid-template-columns: 1fr; }
    .access-blocked-card dl div + div { border-left: 0; border-top: 1px solid #e2e8f1; }
}

.order-delete-dialog-body {
    padding: 20px 22px 22px;
}

.order-delete-dialog-body > p {
    margin: 0;
    color: #536177;
    font-size: 12px;
    line-height: 1.6;
}

.product-unsaved-dialog-body {
    padding: 18px 22px 22px;
}

.product-unsaved-dialog .confirm-dialog-actions {
    margin-top: 0;
}

.success-alert {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.client-ticket-page > .success-alert,
.admin-ticket-page > .success-alert {
    width: min(720px, 100%);
    min-height: 42px;
    display: flex;
    align-items: center;
    margin: 12px 0 10px;
    padding: 10px 14px;
    color: #15803d;
    font-size: 13px;
    font-weight: 750;
    background: #ecfdf3;
    border-color: #bbf7d0;
    box-shadow: 0 8px 22px rgba(22, 101, 52, .06);
}

.toast-stack .client-ticket-page > .success-alert,
.toast-stack .admin-ticket-page > .success-alert,
.toast-stack .success-alert {
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 12px 58px 12px 20px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}

.ticket-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.ticket-tabs a {
    padding: 11px 14px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    border-bottom: 3px solid transparent;
}

.ticket-tabs a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.ticket-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 16px;
    align-items: start;
}

.ticket-create-panel {
    position: sticky;
    top: 24px;
}

.admin-ticket-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.admin-ticket-workspace[hidden] {
    display: none;
}

.admin-ticket-compose-grid {
    grid-template-columns: minmax(0, 1fr);
}

.admin-ticket-compose-grid:has(.support-compose-panel[hidden]) {
    display: none;
}

.admin-ticket-compose-fields {
    grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.35fr) minmax(170px, .52fr);
}

.result-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.ticket-list {
    display: grid;
}

.ticket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.ticket-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.ticket-main {
    min-width: 0;
}

.ticket-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ticket-main p,
.ticket-message {
    margin: 9px 0;
    color: #475569;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ticket-message > :first-child {
    margin-top: 0;
}

.ticket-message > :last-child {
    margin-bottom: 0;
}

.ticket-message p,
.ticket-message ul,
.ticket-message ol,
.ticket-message blockquote {
    margin: 9px 0;
}

.ticket-message ul,
.ticket-message ol {
    padding-left: 22px;
}

.ticket-message a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ticket-message img {
    display: block;
    max-width: min(100%, 520px);
    max-height: 320px;
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.ticket-message blockquote {
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
    background: var(--surface-soft);
}

.ticket-message .text-size-sm,
.rich-editor-canvas .text-size-sm {
    font-size: 13px;
}

.ticket-message .text-size-md,
.rich-editor-canvas .text-size-md {
    font-size: 15px;
}

.ticket-message .text-size-lg,
.rich-editor-canvas .text-size-lg {
    font-size: 18px;
}

.ticket-message .text-size-xl,
.rich-editor-canvas .text-size-xl {
    font-size: 22px;
    font-weight: 800;
}

.ticket-main small {
    color: var(--muted);
}

.ticket-update {
    width: 150px;
    display: grid;
    gap: 8px;
}

.ticket-update label span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.ticket-update select {
    height: 38px;
    padding: 0 9px;
    font-size: 12px;
}

.client-ticket-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
}

.client-ticket-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 18px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}

.client-ticket-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.client-ticket-tabs a.active {
    color: var(--primary);
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.client-ticket-tabs span {
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #334155;
    font-size: 12px;
    background: var(--surface-soft);
}

.ticket-compose-panel {
    margin-bottom: 16px;
}

.ticket-compose-form {
    margin-top: 18px;
}

.ticket-compose-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 16px;
}

.ticket-compose-actions {
    display: flex;
    justify-content: flex-end;
}

.ticket-compose-actions .btn {
    min-width: 190px;
}

.client-ticket-list-panel {
    width: 100%;
}

.rich-editor-field {
    min-width: 0;
}

.rich-editor {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.rich-editor:focus-within {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-color: var(--primary);
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.rich-editor-toolbar button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.rich-editor-toolbar button:hover,
.rich-editor-toolbar button:focus-visible,
.rich-editor-toolbar button.is-active,
.rich-editor-toolbar button[aria-pressed="true"] {
    border-color: var(--line);
    color: var(--primary);
    background: var(--surface-soft);
    outline: 0;
}

.rich-editor-toolbar button.is-active,
.rich-editor-toolbar button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--brand-primary) 32%, transparent);
    background: var(--brand-primary-soft);
}

.rich-editor-toolbar button svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
}

.rich-editor-size {
    width: 108px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    background: #fff;
}

.rich-editor-size:focus {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-color: var(--primary);
}

.rich-editor-toolbar span[aria-hidden="true"] {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--line);
}

.rich-editor-canvas {
    min-height: 210px;
    max-height: 420px;
    padding: 14px;
    overflow-y: auto;
    color: var(--text);
    font-weight: 400;
    line-height: 1.6;
    outline: 0;
}

.rich-editor-canvas:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.rich-editor-canvas p,
.rich-editor-canvas ul,
.rich-editor-canvas ol {
    margin: 0 0 10px;
}

.rich-editor-canvas ul,
.rich-editor-canvas ol {
    padding-left: 22px;
}

.rich-editor-canvas a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rich-editor-canvas img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    margin: 10px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.rich-editor.is-enhanced .rich-editor-source {
    display: none;
}

.rich-editor.is-markdown-editor .rich-editor-canvas {
    display: none;
}

.rich-editor-markdown {
    width: 100%;
    min-height: 210px;
    max-height: 420px;
    padding: 14px;
    color: var(--text);
    border: 0;
    outline: 0;
    resize: vertical;
    font-family: var(--asv-font-family);
    line-height: 1.65;
    background: #fff;
}

.rich-editor-markdown::placeholder {
    color: var(--muted);
}

.editor-link-modal {
    width: min(500px, calc(100% - 32px));
    max-height: calc(100vh - 32px);
    padding: 20px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.editor-link-modal::backdrop {
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}

.editor-link-modal.is-fallback {
    position: fixed;
    inset: 0;
    z-index: 120;
    width: auto;
    max-height: none;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .42);
}

.editor-link-dialog {
    width: 100%;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

.editor-link-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.editor-link-head strong {
    color: #101827;
    font-size: 17px;
}

.editor-link-head button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #65758f;
    border: 0;
    border-radius: 8px;
    background: #f3f6fb;
    cursor: pointer;
}

.editor-link-dialog label {
    display: grid;
    gap: 7px;
}

.editor-link-dialog label span {
    color: #34445f;
    font-size: 13px;
    font-weight: 800;
}

.editor-link-dialog input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: #101827;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    outline: 0;
    font-family: var(--asv-font-family);
}

.editor-link-dialog input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.editor-link-dialog input.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.editor-link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
}

.client-support-page {
    --support-line: #dbe5f1;
    --support-muted: #53647f;
    padding: 34px 42px 38px;
    background:
        radial-gradient(circle at 62% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.support-ticket-tabs {
    margin-bottom: 22px;
}

.support-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid var(--support-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.support-toolbar .support-ticket-tabs {
    margin-bottom: 0;
}

.support-toolbar .btn {
    min-width: 126px;
    min-height: 42px;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

.support-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, .9fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.support-compose-panel[hidden] {
    display: none;
}

.support-dashboard-grid .support-compose-panel {
    grid-column: 1 / -1;
}

.support-compose-panel,
.support-recent-panel,
.support-ticket-state {
    border-color: var(--support-line);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.support-compose-panel,
.support-recent-panel {
    padding: 22px;
}

.support-compose-panel .panel-header,
.support-recent-panel .panel-header {
    margin-bottom: 16px;
}

.support-compose-panel .panel-header h2,
.support-recent-panel .panel-header h2 {
    font-size: 18px;
}

.support-compose-form {
    gap: 16px;
    margin-top: 0;
}

.support-compose-fields {
    grid-template-columns: minmax(0, 1fr) minmax(190px, .68fr) minmax(150px, .44fr);
    gap: 16px;
}

.support-compose-fields input,
.support-compose-fields select {
    border-color: #d8e3f0;
}

.client-profile-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.client-profile-header-actions form {
    margin: 0;
}

.client-impersonating {
    padding-top: 54px;
}

.client-impersonation-bar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 10000;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 8px 18px;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
}

.client-impersonation-bar > span,
.client-impersonation-bar form,
.client-impersonation-bar button {
    display: flex;
    align-items: center;
}

.client-impersonation-bar > span {
    min-width: 0;
    gap: 8px;
}

.client-impersonation-bar strong,
.client-impersonation-bar small {
    color: inherit;
}

.client-impersonation-bar small {
    padding-left: 8px;
    border-left: 1px solid color-mix(in srgb, var(--brand-on-primary) 38%, transparent);
    opacity: .82;
}

.client-impersonation-bar svg {
    width: 17px;
    height: 17px;
}

.client-impersonation-bar form {
    margin: 0;
}

.client-impersonation-bar button {
    min-height: 36px;
    gap: 7px;
    padding: 7px 12px;
    color: var(--brand-primary);
    border: 0;
    border-radius: 8px;
    background: var(--brand-on-primary);
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

@media (max-width: 640px) {
    .client-impersonating {
        padding-top: 68px;
    }

    .client-impersonation-bar {
        min-height: 68px;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
    }

    .client-impersonation-bar > span {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px 7px;
        font-size: 12px;
    }

    .client-impersonation-bar small {
        width: 100%;
        padding-left: 24px;
        border-left: 0;
    }

    .client-impersonation-bar button {
        min-width: 42px;
        justify-content: center;
        padding-inline: 10px;
    }

    .client-impersonation-bar button span {
        display: none;
    }

    .client-profile-header-actions,
    .client-profile-header-actions form,
    .client-profile-header-actions .btn {
        width: 100%;
    }
}

.ticket-related-service-field {
    grid-column: 1 / -1;
}

.ticket-related-service-field > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ticket-related-service-field > span small {
    color: #71819b;
    font-size: 12px;
    font-weight: 600;
}

.ticket-related-service-field > small {
    color: #65758f;
    font-size: 12px;
    line-height: 1.45;
}

.support-rich-editor .rich-editor-canvas {
    min-height: 188px;
}

.support-rich-editor .rich-editor-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.support-rich-editor .rich-editor-toolbar::-webkit-scrollbar {
    display: none;
}

.support-rich-editor .rich-editor-size {
    width: 132px;
    flex: 0 0 132px;
}

.support-compose-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.support-compose-footer .ticket-attachment-note {
    min-width: 0;
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 10px 14px;
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 35%, transparent);
    border-radius: 8px;
    color: #53647f;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.ticket-attachment-note:hover,
.ticket-attachment-note.is-dragging {
    border-color: color-mix(in srgb, var(--brand-primary) 70%, transparent);
    background: #f8fbff;
}

.ticket-attachment-note input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.support-compose-footer .ticket-attachment-note > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
    margin-top: 1px;
}

.support-compose-footer .ticket-attachment-note > div {
    min-width: 0;
    line-height: 1.25;
    overflow: hidden;
    padding-top: 1px;
}

.ticket-attachment-note > div > strong {
    white-space: normal;
}

.ticket-attachment-note svg {
    width: 18px;
    height: 18px;
}

.ticket-attachment-note strong {
    color: var(--primary);
}

.ticket-attachment-note small {
    display: block;
    margin-top: 4px;
    color: #6b7890;
    font-size: 12px;
    white-space: normal;
}

.support-compose-footer .btn {
    width: 170px;
    min-height: 46px;
    gap: 9px;
    justify-self: end;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.support-compose-footer .btn svg {
    width: 17px;
    height: 17px;
}

.support-recent-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 18px;
}

.support-recent-list {
    display: grid;
}

.support-recent-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto 18px;
    gap: 14px;
    align-items: center;
    min-height: 72px;
    padding: 14px 0;
    border-bottom: 1px solid #e3ebf5;
}

.support-recent-row > strong {
    color: var(--primary);
    font-size: 14px;
}

.support-recent-row span,
.support-recent-row b,
.support-recent-row small {
    display: block;
    min-width: 0;
}

.support-recent-row b {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-recent-row small {
    margin-top: 6px;
    color: var(--support-muted);
    font-size: 12px;
}

.support-recent-row > svg {
    width: 17px;
    height: 17px;
    color: #172554;
    transform: rotate(-90deg);
}

.support-view-all {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: auto -22px -22px;
    color: var(--primary);
    font-weight: 800;
    border-top: 1px solid #e3ebf5;
}

.support-view-all svg {
    width: 17px;
    height: 17px;
    transform: rotate(-90deg);
}

.support-ticket-state {
    margin-top: 0;
    min-height: 0;
    padding: 22px;
    overflow: hidden;
}

.support-ticket-state.has-tickets {
    padding: 20px 22px;
}

.support-ticket-state .panel-header {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5edf7;
}

.support-ticket-state .panel-header h2 {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.support-ticket-state .result-count {
    color: #65758f;
    font-size: 12px;
    font-weight: 800;
}

.support-ticket-state .ticket-list {
    gap: 12px;
}

.support-ticket-state .ticket-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 92px;
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
}

.support-ticket-state .ticket-row:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .055);
}

.support-ticket-state .ticket-row:first-child {
    padding-top: 16px;
    border-top: 1px solid #e3ebf5;
}

.support-ticket-state .ticket-title {
    align-items: flex-start;
    justify-content: flex-start;
}

.support-ticket-state .ticket-title strong {
    color: #101827;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.35;
}

.support-ticket-state .ticket-message {
    max-width: 760px;
    margin: 7px 0 9px;
    color: #40506b;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.support-ticket-state .ticket-main small {
    color: #65758f;
    font-size: 12px;
    line-height: 1.4;
}

.ticket-row-side {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: stretch;
}

.ticket-row-arrow {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    color: #17366f;
}

.ticket-row-arrow svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}

.support-empty-state {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 34%),
        #fff;
}

.support-empty-state > span {
    width: 68px;
    height: 56px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--brand-primary-soft), var(--brand-primary-soft));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.support-empty-state svg {
    width: 32px;
    height: 32px;
}

.support-empty-state h2 {
    margin: 10px 0 0;
    color: #101827;
    font-size: 20px;
    font-weight: 800;
}

.support-empty-state p {
    margin: 0;
    color: var(--support-muted);
}

.support-empty-state .btn {
    min-width: 220px;
    margin-top: 10px;
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, transparent);
    background: #fff;
}

.client-ticket-page .page-heading {
    gap: 4px;
}

.ticket-back-link {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.ticket-back-link svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

.ticket-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.ticket-conversation-panel,
.ticket-detail-sidebar {
    border-color: var(--support-line);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.ticket-conversation-panel {
    padding: 0;
    overflow: hidden;
}

.ticket-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.ticket-detail-header h2 {
    margin: 10px 0 4px;
    color: #101827;
    font-size: 24px;
    line-height: 1.22;
}

.ticket-detail-header p {
    margin: 0;
    color: #65758f;
    font-size: 13px;
}

.ticket-thread {
    display: grid;
    gap: 18px;
    padding: 24px;
    background: #fff;
}

.ticket-message-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
}

.ticket-message-card.is-client {
    grid-template-columns: minmax(0, 1fr) 42px;
}

.ticket-message-card.is-client .ticket-message-avatar {
    grid-column: 2;
}

.ticket-message-card.is-client .ticket-message-body {
    grid-row: 1;
    grid-column: 1;
}

.ticket-message-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    border-radius: 50%;
    background: #102a63;
}

.ticket-message-card.is-client .ticket-message-avatar {
    background: var(--primary);
}

.ticket-message-card.is-system .ticket-message-avatar {
    color: var(--primary);
    background: var(--brand-primary-soft);
}

.ticket-message-body {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fbfdff;
}

.ticket-message-card.is-client .ticket-message-body {
    background: var(--brand-primary-subtle);
}

.ticket-message-card.is-system .ticket-message-body {
    background: #fff;
}

.ticket-message-body header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #65758f;
    font-size: 12px;
}

.ticket-message-body header strong {
    color: #101827;
    font-size: 14px;
}

.ticket-message-body header span {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    background: var(--brand-primary-soft);
}

.ticket-message-body header time {
    margin-left: auto;
    white-space: nowrap;
}

.ticket-message-body .ticket-message {
    margin: 0;
    color: #26364f;
    font-size: 14px;
    line-height: 1.6;
}

.ticket-reply-form {
    display: grid;
    gap: 16px;
    padding: 24px;
    border-top: 1px solid #e5edf7;
    background: #fbfdff;
}

.ticket-reply-form .rich-editor-canvas {
    min-height: 170px;
}

.ticket-reply-footer {
    align-items: center;
}

.ticket-closed-note {
    display: grid;
    gap: 4px;
    margin: 24px;
    padding: 16px;
    color: #475569;
    border: 1px solid #e3ebf5;
    border-radius: 8px;
    background: #fbfdff;
}

.ticket-closed-note strong {
    color: #101827;
}

.ticket-detail-sidebar {
    position: sticky;
    top: 24px;
    padding: 22px;
}

.ticket-summary-card {
    display: grid;
    gap: 18px;
}

.ticket-summary-card dl {
    display: grid;
    gap: 0;
    margin: 0;
}

.ticket-summary-card dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid #e5edf7;
}

.ticket-summary-card dt,
.ticket-summary-card dd {
    margin: 0;
    font-size: 13px;
}

.ticket-summary-card dt {
    color: #65758f;
}

.ticket-summary-card dd {
    color: #101827;
    font-weight: 800;
    text-align: right;
}

.ticket-related-service-summary dd {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.ticket-related-service-summary dd a {
    color: var(--brand-primary);
    text-decoration: none;
}

.ticket-related-service-summary dd a:hover {
    text-decoration: underline;
}

.ticket-related-service-summary dd small {
    color: #65758f;
    font-size: 12px;
    font-weight: 600;
}

.admin-ticket-center,
.admin-ticket-page {
    --support-line: #dbe5f1;
    --support-muted: #53647f;
}

.admin-ticket-list-panel {
    border-color: var(--support-line);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.support-queue-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: -4px 0 16px;
}

.support-queue-summary article {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 16px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

.support-queue-summary article.attention {
    border-color: #ffd5d9;
    background: linear-gradient(180deg, #fff, #fff7f8);
}

.support-queue-summary span {
    color: #53647f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.support-queue-summary strong {
    color: #101827;
    font-size: 26px;
    line-height: 1;
}

.support-queue-summary small {
    color: #6b7b95;
    font-size: 12px;
}

.admin-ticket-list-panel {
    overflow: hidden;
}

.admin-ticket-list-panel .panel-header {
    margin: -2px 0 0;
    padding: 22px 22px 20px;
    border-bottom: 1px solid #e5edf7;
}

.admin-ticket-list-panel .ticket-list {
    gap: 0;
    padding: 14px 22px 18px;
}

.admin-ticket-row-v2 {
    grid-template-columns: 210px minmax(0, 1fr) minmax(150px, 170px);
    align-items: center;
    gap: 18px;
    min-height: 116px;
    padding: 0;
    border-top: 1px solid #e8eff7;
    background: #fff;
}

.admin-ticket-row-v2:first-child {
    border-top: 0;
}

.admin-ticket-row-v2:hover {
    background: #fbfdff;
}

.admin-ticket-client {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    align-self: center;
}

.admin-ticket-client > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border-radius: 50%;
    background: #102a63;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .11);
}

.admin-ticket-client div,
.admin-ticket-content {
    min-width: 0;
}

.admin-ticket-client strong,
.admin-ticket-client small,
.admin-ticket-title-line strong,
.admin-ticket-content p,
.admin-ticket-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ticket-client strong {
    display: block;
    color: #101827;
    font-size: 14px;
    font-weight: 800;
}

.admin-ticket-client small {
    display: block;
    margin-top: 2px;
    color: #6b7b95;
    font-size: 12px;
}

.admin-ticket-content {
    display: grid;
    gap: 7px;
    align-self: center;
    align-content: center;
}

.admin-ticket-title-line strong {
    display: block;
    color: #101827;
    font-size: 15px;
    font-weight: 800;
}

.admin-ticket-content p {
    max-width: 760px;
    margin: 0;
    color: #40506b;
    font-size: 13px;
}

.admin-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-ticket-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #65758f;
    font-size: 12px;
    font-weight: 700;
}

.admin-ticket-meta svg {
    width: 14px;
    height: 14px;
    color: var(--brand-primary-strong);
}

.admin-ticket-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    justify-items: stretch;
    gap: 8px;
    min-width: 0;
    align-self: center;
    padding-top: 0;
}

.admin-ticket-side .status {
    width: auto;
    max-width: 170px;
    align-self: flex-end;
}

.admin-ticket-side .btn {
    min-width: 92px;
    min-height: 34px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 8px;
    box-shadow: none;
}

.admin-ticket-side .btn.primary {
    color: var(--brand-primary-strong);
    border: 1px solid #cfe0fb;
    background: var(--brand-primary-subtle);
}

.admin-ticket-side .btn.primary:hover {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.ticket-status-inline {
    display: inline-grid;
    grid-template-columns: minmax(178px, 220px) auto;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid #e1eaf6;
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .035);
}

.ticket-status-inline label {
    display: grid;
    gap: 6px;
}

.ticket-status-inline label span {
    color: #53647f;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.ticket-status-inline select {
    min-height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    font-family: var(--asv-font-family);
    font-weight: 700;
}

.ticket-status-inline .btn.primary {
    min-width: 92px;
    min-height: 38px;
    color: #fff;
    border: 0;
    background: var(--primary);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.ticket-status-inline .btn.primary:hover {
    background: var(--primary-dark);
}

.admin-ticket-page .ticket-message-card.is-admin {
    grid-template-columns: minmax(0, 1fr) 42px;
}

.admin-ticket-page .ticket-message-card.is-admin .ticket-message-avatar {
    grid-column: 2;
    background: var(--primary);
}

.admin-ticket-page .ticket-message-card.is-admin .ticket-message-body {
    grid-row: 1;
    grid-column: 1;
    background: var(--brand-primary-subtle);
}

.client-ticket-page,
.admin-ticket-page {
    background:
        linear-gradient(180deg, rgba(239, 246, 255, .72), rgba(248, 251, 255, .96) 280px),
        #f4f8fc;
}

.client-ticket-page .client-topbar,
.admin-ticket-page .admin-topbar {
    margin-bottom: 28px;
}

.client-ticket-page .page-heading h1,
.admin-ticket-page .page-heading h1 {
    margin-top: 2px;
    font-size: 31px;
    line-height: 1.08;
}

.client-ticket-page .page-heading p,
.admin-ticket-page .page-heading p {
    margin-top: 8px;
    color: #30415f;
    font-weight: 700;
}

.client-ticket-page .ticket-back-link,
.admin-ticket-page .ticket-back-link {
    margin: 0;
    color: var(--brand-primary-strong);
    font-size: 12px;
    letter-spacing: 0;
}

.client-ticket-page .ticket-page-back,
.admin-ticket-page .ticket-page-back {
    margin: -12px 0 12px;
}

.client-ticket-page .ticket-detail-shell,
.admin-ticket-page .ticket-detail-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    max-width: 1460px;
}

.client-ticket-page .ticket-conversation-panel,
.admin-ticket-page .ticket-conversation-panel,
.client-ticket-page .ticket-detail-sidebar,
.admin-ticket-page .ticket-detail-sidebar {
    border: 1px solid #dce7f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .055);
}

.client-ticket-page .ticket-detail-header,
.admin-ticket-page .ticket-detail-header {
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid #e4edf7;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 36%),
        #fff;
}

.client-ticket-page .ticket-detail-header h2,
.admin-ticket-page .ticket-detail-header h2 {
    margin: 10px 0 5px;
    max-width: 760px;
    font-size: 22px;
    line-height: 1.25;
}

.client-ticket-page .ticket-detail-header p,
.admin-ticket-page .ticket-detail-header p {
    color: #62728c;
    font-size: 12.5px;
}

.client-ticket-page .ticket-detail-header .btn,
.admin-ticket-page .ticket-detail-header .btn {
    min-width: 124px;
    min-height: 42px;
    background: var(--brand-primary-soft);
    border: 1px solid #dbe8fb;
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline label {
    gap: 6px;
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline label span {
    color: #53647f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline select {
    width: 188px;
    min-height: 34px;
    color: #101827;
    font-size: 12.5px;
    padding: 0 28px 0 10px;
    border-color: #d7e2f0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline .btn.primary {
    min-width: 82px;
    min-height: 34px;
    padding-inline: 12px;
    font-size: 13px;
    color: #fff;
    border: 0;
    background: var(--primary);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.admin-ticket-page .ticket-detail-header .ticket-status-inline .btn.primary:hover {
    background: var(--primary-dark);
}

.client-ticket-page .ticket-thread,
.admin-ticket-page .ticket-thread {
    position: relative;
    gap: 0;
    padding: 26px 28px;
    background:
        linear-gradient(90deg, rgba(239, 246, 255, .72), transparent 160px),
        #fbfdff;
}

.client-ticket-page .ticket-thread::before,
.admin-ticket-page .ticket-thread::before {
    content: "";
    position: absolute;
    top: 34px;
    bottom: 34px;
    left: 48px;
    width: 1px;
    background: linear-gradient(180deg, transparent, #cfdcf0 8%, #cfdcf0 92%, transparent);
}

.client-ticket-page .ticket-message-card,
.client-ticket-page .ticket-message-card.is-client,
.admin-ticket-page .ticket-message-card,
.admin-ticket-page .ticket-message-card.is-admin {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    padding: 0 0 22px;
}

.client-ticket-page .ticket-message-card:last-child,
.admin-ticket-page .ticket-message-card:last-child {
    padding-bottom: 0;
}

.client-ticket-page .ticket-message-card.is-client .ticket-message-avatar,
.client-ticket-page .ticket-message-card.is-client .ticket-message-body,
.admin-ticket-page .ticket-message-card.is-client .ticket-message-avatar,
.admin-ticket-page .ticket-message-card.is-client .ticket-message-body,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-avatar,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-body {
    grid-column: auto;
    grid-row: auto;
}

.client-ticket-page .ticket-message-avatar,
.admin-ticket-page .ticket-message-avatar {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border: 4px solid #fbfdff;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

.client-ticket-page .ticket-message-card.is-client .ticket-message-avatar,
.admin-ticket-page .ticket-message-card.is-client .ticket-message-avatar {
    color: #fff;
    background: #102a63;
}

.client-ticket-page .ticket-message-card.is-admin .ticket-message-avatar,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-avatar {
    color: #fff;
    background: var(--brand-primary);
}

.client-ticket-page .ticket-message-body,
.admin-ticket-page .ticket-message-body,
.client-ticket-page .ticket-message-card.is-client .ticket-message-body,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-body {
    padding: 0;
    border: 1px solid #dfe8f5;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

.client-ticket-page .ticket-message-card.is-admin .ticket-message-body,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-body {
    border-color: var(--brand-primary-border);
    background: #fff;
}

.client-ticket-page .ticket-message-card.is-system .ticket-message-body,
.admin-ticket-page .ticket-message-card.is-system .ticket-message-body {
    border-style: dashed;
    background: #fff;
}

.client-ticket-page .ticket-message-body header,
.admin-ticket-page .ticket-message-body header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid #edf3fa;
    background: #fff;
}

.client-ticket-page .ticket-message-card.is-admin .ticket-message-body header,
.admin-ticket-page .ticket-message-card.is-admin .ticket-message-body header {
    background: var(--brand-primary-subtle);
}

.client-ticket-page .ticket-message-body header div,
.admin-ticket-page .ticket-message-body header div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.client-ticket-page .ticket-message-body header small,
.admin-ticket-page .ticket-message-body header small {
    color: #6b7b95;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.client-ticket-page .ticket-message-body header strong,
.admin-ticket-page .ticket-message-body header strong {
    color: #101827;
    font-size: 14px;
    line-height: 1.25;
}

.client-ticket-page .ticket-message-body header span,
.admin-ticket-page .ticket-message-body header span {
    min-height: 22px;
    padding: 0 9px;
    color: var(--brand-primary-strong);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--brand-primary-soft);
}

.client-ticket-page .ticket-message-card.is-client .ticket-message-body header span,
.admin-ticket-page .ticket-message-card.is-client .ticket-message-body header span {
    color: #17366f;
    background: #e8eef9;
}

.client-ticket-page .ticket-message-body header time,
.admin-ticket-page .ticket-message-body header time {
    color: #6b7b95;
    font-size: 12px;
    white-space: nowrap;
}

.client-ticket-page .ticket-message-body .ticket-message,
.admin-ticket-page .ticket-message-body .ticket-message {
    margin: 0;
    padding: 15px 16px 17px;
    color: #1f2f46;
    font-size: 13.5px;
    line-height: 1.65;
}

.client-ticket-page .ticket-reply-form,
.admin-ticket-page .ticket-reply-form {
    gap: 14px;
    padding: 24px;
    border-top: 1px solid #e4edf7;
    background: #f8fbff;
}

.client-ticket-page .ticket-reply-form > .rich-editor-field,
.admin-ticket-page .ticket-reply-form > .rich-editor-field {
    display: block;
    min-width: 0;
}

.client-ticket-page .ticket-reply-form > .rich-editor-field > span,
.admin-ticket-page .ticket-reply-form > .rich-editor-field > span {
    display: block;
    margin: 0 0 10px;
    color: #101827;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.client-ticket-page .ticket-reply-form .rich-editor,
.admin-ticket-page .ticket-reply-form .rich-editor {
    border-color: #dbe5f1;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.client-ticket-page .ticket-reply-form .rich-editor-toolbar,
.admin-ticket-page .ticket-reply-form .rich-editor-toolbar {
    min-height: 48px;
    padding: 8px 12px;
    background: #fbfdff;
}

.client-ticket-page .ticket-reply-form .rich-editor-canvas,
.admin-ticket-page .ticket-reply-form .rich-editor-canvas {
    min-height: 150px;
    padding: 16px;
    font-size: 14px;
}

.client-ticket-page .ticket-reply-footer,
.admin-ticket-page .ticket-reply-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.client-ticket-page .ticket-reply-footer .btn,
.admin-ticket-page .ticket-reply-footer .btn {
    width: auto;
    min-width: 138px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.client-ticket-page .ticket-reply-footer .btn svg,
.admin-ticket-page .ticket-reply-footer .btn svg {
    flex: 0 0 auto;
}

.client-ticket-page .ticket-detail-sidebar,
.admin-ticket-page .ticket-detail-sidebar {
    padding: 18px;
}

.client-ticket-page .ticket-summary-card,
.admin-ticket-page .ticket-summary-card {
    gap: 14px;
}

.client-ticket-page .ticket-summary-card > .status,
.admin-ticket-page .ticket-summary-card > .status {
    width: 100%;
    justify-content: center;
    min-height: 28px;
}

.client-ticket-page .ticket-summary-card dl div,
.admin-ticket-page .ticket-summary-card dl div {
    align-items: center;
    padding: 12px 0;
}

.client-ticket-page .ticket-summary-card dt,
.client-ticket-page .ticket-summary-card dd,
.admin-ticket-page .ticket-summary-card dt,
.admin-ticket-page .ticket-summary-card dd {
    font-size: 12.5px;
}

@media (max-width: 980px) {
    .auth-wrap,
    .app-layout,
    .content-grid,
    .stats-grid,
    .client-stats {
        grid-template-columns: 1fr;
    }

    .admin-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .client-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .app-layout.sidebar-collapsed {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .auth-hero {
        min-height: auto;
        padding: 34px;
    }

    .auth-panel {
        display: none;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .side-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-footer {
        margin-top: 24px;
    }

    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 18px 14px;
    }

    .client-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        padding: 18px 14px;
    }

    .admin-sidebar .sidebar-brand-logo {
        max-width: 168px;
        transform: translateX(-8px);
    }

    .client-sidebar .sidebar-brand-logo {
        max-width: 168px;
        transform: translateX(-8px);
    }

    .admin-sidebar .side-nav {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 24px;
    }

    .client-sidebar .side-nav {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 24px;
    }

    .admin-sidebar .side-nav a,
    .admin-sidebar .side-nav-toggle {
        padding-inline: 11px;
        font-size: 13px;
    }

    .client-sidebar .side-nav a {
        padding-inline: 11px;
        font-size: 13px;
    }

    .admin-sidebar .side-submenu {
        margin-left: 12px;
    }

    .admin-sidebar .sidebar-footer {
        margin-top: auto;
    }

    .client-sidebar .sidebar-footer {
        margin-top: auto;
    }

    .admin-main {
        padding: 24px;
    }

    .client-main {
        padding: 24px;
    }

    .admin-main .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-main .topbar-actions {
        width: 100%;
    }

    .admin-main .dashboard-search {
        width: auto;
        flex: 1;
    }

    .admin-main .admin-profile {
        min-width: 190px;
    }

    .operations-grid,
    .ticket-workspace,
    .client-ticket-workspace {
        grid-template-columns: 1fr;
    }

    .activity-panel {
        grid-row: auto;
    }

    .ticket-create-panel {
        position: static;
    }

    .ticket-compose-fields {
        grid-template-columns: 1fr;
    }

    .support-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .support-compose-fields {
        grid-template-columns: 1fr;
    }

    .dashboard-search {
        width: min(260px, 32vw);
    }
}

@media (max-width: 640px) {
    body.dashboard-shell {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .admin-layout {
        grid-template-columns: 1fr;
    }

    .client-layout {
        grid-template-columns: 1fr;
    }

    .auth-page,
    .main-content {
        padding: 16px;
    }

    .auth-card,
    .auth-hero,
    .panel,
    .stat-card {
        padding: 20px;
    }

    .admin-login-card {
        padding: 0;
    }

    .admin-login-brand {
        min-height: 88px;
        padding: 20px;
    }

    .admin-login-brand img {
        width: 128px;
    }

    .admin-login-brand span {
        max-width: 112px;
        justify-content: flex-end;
        text-align: right;
    }

    .admin-login-body {
        padding: 24px 20px;
    }

    .auth-hero h1 {
        font-size: 38px;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 30;
        width: 100%;
        height: 68px;
        padding: 10px 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .18);
    }

    .sidebar-brand {
        min-width: 0;
        min-height: 0;
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    .app-layout.sidebar-collapsed {
        grid-template-columns: 1fr;
    }

    .sidebar-brand-logo {
        width: 148px;
        max-height: 46px;
        object-fit: contain;
        object-position: left center;
    }

    .sidebar-brand-mark {
        display: none !important;
    }

    .admin-sidebar .sidebar-brand-logo {
        width: 138px;
        transform: none;
    }

    .client-sidebar .sidebar-brand-logo {
        width: 138px;
        transform: none;
    }

    .admin-sidebar .sidebar-brand {
        justify-content: flex-start;
    }

    .client-sidebar .sidebar-brand {
        justify-content: flex-start;
    }

    .side-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: flex;
        gap: 2px;
        margin: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        background: color-mix(in srgb, var(--brand-primary) 1%, rgba(3, 7, 18, .98));
        border-top: 1px solid rgba(148, 163, 184, .2);
        box-shadow: 0 -10px 30px rgba(15, 23, 42, .16);
        scrollbar-width: none;
    }

    .side-nav::-webkit-scrollbar {
        display: none;
    }

    .side-nav a,
    .side-nav-toggle {
        min-width: 72px;
        min-height: 58px;
        padding: 5px 8px;
        flex: 1 0 72px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        font-size: 10px;
        line-height: 1.15;
        text-align: center;
    }

    .side-nav > a.active::before,
    .side-nav-toggle.active::before {
        top: -6px;
        left: 25%;
        width: 50%;
        height: 3px;
        border-radius: 0 0 999px 999px;
    }

    .side-nav svg {
        width: 20px;
        height: 20px;
    }

    .side-nav-group {
        display: flex;
        flex: 1 0 72px;
    }

    .side-nav-group .side-nav-toggle {
        width: 100%;
    }

    .side-nav-toggle .submenu-chevron {
        display: none;
    }

    .side-submenu {
        position: fixed;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 12px;
        z-index: 45;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: auto;
        margin: 0;
        padding: 10px;
        border-color: color-mix(in srgb, var(--brand-primary-bright) 25%, transparent);
        background: color-mix(in srgb, var(--brand-primary) 2%, rgba(8, 15, 31, .98));
        box-shadow: 0 18px 45px rgba(2, 6, 23, .35);
    }

    .side-submenu::before {
        display: none;
    }

    .side-submenu a {
        min-width: 0;
        min-height: 64px;
        padding: 9px;
        flex-direction: row;
        text-align: left;
    }

    .admin-clients,
    .admin-client-create {
        padding: 20px 16px 24px;
    }

    .client-directory-header {
        align-items: flex-start;
        padding: 16px;
    }

    .client-directory-actions {
        width: 100%;
        justify-content: space-between;
    }

    .client-table-wrap {
        padding: 8px 14px 14px;
        overflow: visible;
    }

    .client-directory-empty-state {
        min-height: 250px;
        padding: 38px 20px 42px;
        border: 1px solid #e8edf4;
        border-radius: 10px;
    }

    .client-directory-empty-state .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .client-table,
    .client-table tbody,
    .client-table tr,
    .client-table td {
        display: block;
        width: 100%;
    }

    .client-table thead {
        display: none;
    }

    .client-table tr {
        padding: 14px 0;
        border-bottom: 1px solid #e8edf4;
    }

    .client-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }

    .client-table td::before {
        color: #7b8799;
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .client-table td:first-child {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    .client-identity {
        min-width: 0;
        text-align: left;
    }

    .form-section {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        padding: 14px 16px;
    }

    .form-actions .btn {
        flex: 1;
    }

    .sidebar-footer {
        margin: 0;
    }

    .sidebar-footer .text-button {
        width: 44px;
        min-height: 44px;
        padding: 0;
        justify-content: center;
        color: rgba(255, 255, 255, .82);
        background: rgba(255, 255, 255, .08);
    }

    .sidebar-footer .text-button span {
        display: none;
    }

    .main-content {
        min-width: 0;
    }

    .client-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .client-summary-card {
        min-height: 104px;
        padding: 16px;
    }

    .client-profile {
        width: 100%;
        min-width: 0;
    }

    .client-section-header {
        align-items: flex-start;
        padding: 14px;
    }

    .client-section-header p {
        max-width: 220px;
    }

    .client-service-list,
    .client-invoice-list {
        padding: 0 14px;
    }

    .client-service-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .client-service-row .status {
        grid-column: 2;
        width: max-content;
    }

    .service-product-price {
        grid-column: 3;
        grid-row: 1;
    }

    .client-invoice-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .client-invoice-row .status {
        grid-column: 1;
        width: max-content;
    }

    .client-invoice-row > strong {
        grid-column: 2;
        grid-row: 1;
    }

    .topbar {
        margin: 4px 0 18px;
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar h1 {
        font-size: 26px;
        line-height: 1.15;
    }

    .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 42px 42px minmax(0, 1fr);
    }

    .admin-dashboard {
        padding: 20px 16px 24px;
    }

    .admin-dashboard .admin-topbar {
        margin: 0 0 18px;
    }

    .admin-main .page-heading h1 {
        font-size: 25px;
    }

    .admin-main .page-heading p {
        font-size: 12px;
    }

    .admin-main .topbar-actions {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .dashboard-search {
        width: 100%;
    }

    .admin-main .admin-profile {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .user-chip {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 7px 11px;
        overflow: hidden;
    }

    .user-chip span,
    .user-chip small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .icon-action {
        width: 42px;
        height: 42px;
    }

    .client-hero-band,
    .invoice-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-grid,
    .client-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        min-width: 0;
        padding: 16px;
    }

    .admin-dashboard .stat-card {
        min-height: 142px;
        padding: 15px;
    }

    .admin-dashboard .stat-card strong {
        font-size: 22px;
    }

    .stat-card span,
    .stat-card small {
        font-size: 12px;
    }

    .stat-card strong {
        margin: 9px 0 5px;
        font-size: 22px;
        overflow-wrap: anywhere;
    }

    .content-grid {
        gap: 12px;
        margin-top: 12px;
    }

    .operations-grid {
        gap: 12px;
        margin-top: 12px;
    }

    .operation-panel {
        padding: 16px;
    }

    .admin-dashboard .operation-panel {
        padding: 0;
    }

    .admin-dashboard .operation-header {
        padding: 13px 14px;
    }

    .admin-dashboard .access-summary,
    .admin-dashboard .billing-grid,
    .admin-dashboard .staff-list,
    .admin-dashboard .activity-feed,
    .admin-dashboard .support-summary {
        margin: 14px;
    }

    .admin-dashboard .compact-feed {
        margin: 0 14px 8px;
    }

    .admin-dashboard .support-actions {
        padding: 0 14px 14px;
    }

    .operation-header {
        min-height: 0;
    }

    .access-summary,
    .billing-grid,
    .support-summary {
        grid-template-columns: 1fr 1fr;
    }

    .access-summary > div,
    .billing-grid > div,
    .support-summary a {
        padding: 12px;
    }

    .billing-grid strong {
        font-size: 18px;
    }

    .feed-row,
    .activity-row {
        align-items: flex-start;
    }

    .ticket-tabs {
        overflow-x: auto;
    }

    .client-ticket-tabs {
        width: 100%;
        display: flex;
        overflow-x: auto;
    }

    .support-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 10px;
    }

    .support-toolbar .btn {
        width: 100%;
    }

    .ticket-tabs a {
        flex: 0 0 auto;
    }

    .client-ticket-tabs a {
        flex: 1 0 auto;
        justify-content: center;
    }

    .ticket-workspace {
        gap: 12px;
    }

    .support-queue-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .admin-ticket-row-v2 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .admin-ticket-side {
        justify-items: stretch;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .admin-ticket-side .status {
        width: auto;
        max-width: 160px;
        justify-self: start;
    }

    .ticket-compose-panel,
    .client-ticket-list-panel {
        padding: 18px;
    }

    .ticket-compose-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .client-support-page {
        padding: 16px;
    }

    .support-compose-panel,
    .support-recent-panel,
    .support-ticket-state {
        padding: 18px;
    }

    .support-compose-footer {
        grid-template-columns: 1fr;
    }

    .support-compose-footer .btn {
        width: 100%;
    }

    .support-recent-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .support-recent-row > strong {
        grid-column: 1 / -1;
    }

    .support-recent-row > svg {
        display: none;
    }

    .support-view-all {
        margin-inline: -18px;
        margin-bottom: -18px;
    }

    .ticket-detail-shell {
        grid-template-columns: 1fr;
    }

    .ticket-detail-sidebar {
        position: static;
        order: -1;
    }

    .ticket-detail-header {
        flex-direction: column;
        padding: 18px;
    }

    .ticket-status-inline {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .ticket-status-inline .btn.primary {
        width: 100%;
    }

    .admin-ticket-page .ticket-detail-header .ticket-status-inline {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-ticket-page .ticket-detail-header .ticket-status-inline select,
    .admin-ticket-page .ticket-detail-header .ticket-status-inline .btn.primary {
        width: 100%;
    }

    .ticket-detail-header h2 {
        font-size: 20px;
    }

    .ticket-thread,
    .ticket-reply-form {
        padding: 18px;
    }

    .ticket-message-card,
    .ticket-message-card.is-client,
    .admin-ticket-page .ticket-message-card.is-admin {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ticket-message-card.is-client .ticket-message-avatar,
    .ticket-message-card.is-client .ticket-message-body,
    .admin-ticket-page .ticket-message-card.is-client .ticket-message-avatar,
    .admin-ticket-page .ticket-message-card.is-client .ticket-message-body,
    .admin-ticket-page .ticket-message-card.is-admin .ticket-message-avatar,
    .admin-ticket-page .ticket-message-card.is-admin .ticket-message-body {
        grid-column: auto;
        grid-row: auto;
    }

    .ticket-message-avatar {
        width: 36px;
        height: 36px;
    }

    .ticket-message-body header {
        flex-wrap: wrap;
    }

    .ticket-message-body header time {
        width: 100%;
        margin-left: 0;
    }

    .rich-editor-canvas {
        min-height: 180px;
    }

    .ticket-row {
        grid-template-columns: 1fr;
    }

    .ticket-title {
        align-items: flex-start;
    }

    .ticket-update {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .panel-header {
        align-items: center;
    }

    .panel-header h2 {
        font-size: 19px;
    }

    .panel-header .btn {
        flex: 0 0 auto;
    }

    .table-wrap {
        overflow: visible;
    }

    table,
    tbody,
    tr,
    td {
        display: block;
        width: 100%;
    }

    thead {
        display: none;
    }

    tbody {
        display: grid;
        gap: 10px;
    }

    tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 12px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
    }

    tbody td {
        min-width: 0;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 800;
    }

    tbody td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        color: var(--muted);
        font-size: 12px;
    }

    tbody td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    tbody td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        font-weight: 800;
        text-align: right;
    }

    .client-row {
        min-width: 0;
        padding: 12px;
    }

    .client-row > div {
        min-width: 0;
    }

    .client-row strong,
    .client-row span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .client-hero-band strong {
        font-size: 30px;
    }
}

@media (min-width: 641px) {
    /* Hard reset for the collapsed sidebar so later responsive rules do not push
       the expand button into the navigation icons. */
    .app-layout.sidebar-collapsed .admin-sidebar,
    .app-layout.sidebar-collapsed .client-sidebar {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 14px 18px !important;
    }

    .app-layout.sidebar-collapsed .admin-sidebar .sidebar-brand,
    .app-layout.sidebar-collapsed .client-sidebar .sidebar-brand {
        width: 100%;
        min-height: 0;
        display: grid;
        justify-items: center;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
    }

    .app-layout.sidebar-collapsed .admin-sidebar .sidebar-brand-logo,
    .app-layout.sidebar-collapsed .client-sidebar .sidebar-brand-logo {
        display: none !important;
    }

    .app-layout.sidebar-collapsed .admin-sidebar .sidebar-brand-mark,
    .app-layout.sidebar-collapsed .client-sidebar .sidebar-brand-mark {
        display: block !important;
        width: 34px;
        height: 34px;
        margin: 0 auto;
        transform: none;
    }

    .app-layout.sidebar-collapsed .admin-sidebar .sidebar-collapse-toggle,
    .app-layout.sidebar-collapsed .client-sidebar .sidebar-collapse-toggle {
        position: static !important;
        width: 32px;
        height: 32px;
        transform: none !important;
    }

    .app-layout.sidebar-collapsed .admin-sidebar .side-nav,
    .app-layout.sidebar-collapsed .client-sidebar .side-nav {
        width: 100%;
        display: grid;
        justify-items: center;
        gap: 8px;
        margin-top: 0 !important;
    }
}

/* Admin settings */
.admin-settings {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.settings-overview {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.settings-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    border-bottom: 1px solid #e7edf6;
}

.settings-intro-icon,
.settings-section-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.settings-intro-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
}

.settings-intro-icon svg {
    width: 23px;
    height: 23px;
}

.settings-intro h2,
.settings-section h3 {
    margin: 0;
    color: #0f172a;
}

.settings-intro h2 {
    font-size: 20px;
}

.settings-intro p,
.settings-section p {
    margin: 5px 0 0;
    color: #64748b;
    line-height: 1.5;
}

.settings-sections {
    display: grid;
}

.settings-section {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 20px 26px;
    border-bottom: 1px solid #e7edf6;
}

.settings-section:last-child {
    border-bottom: 0;
}

.settings-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.settings-section-icon svg {
    width: 21px;
    height: 21px;
}

.settings-section-content {
    min-width: 0;
}

.settings-section-label {
    display: block;
    margin-bottom: 3px;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.settings-section h3 {
    font-size: 16px;
}

.settings-section p {
    font-size: 13px;
}

.settings-section-state {
    min-width: 96px;
    padding: 8px 12px;
    border: 1px solid #dbe5f2;
    border-radius: 6px;
    color: #334155;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 720px) {
    .admin-settings {
        gap: 18px;
    }

    .settings-intro {
        align-items: flex-start;
        padding: 20px;
    }

    .settings-section {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 0;
        padding: 18px 20px;
    }

    .settings-section-state {
        grid-column: 2;
        justify-self: start;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .client-directory-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .client-directory-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .client-directory-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
        white-space: normal;
        text-align: center;
    }

    .client-table tbody {
        display: block;
    }

    .client-table tbody tr {
        display: block;
        padding: 14px 0;
        border: 0;
        border-bottom: 1px solid #e8edf4;
        border-radius: 0;
        background: transparent;
    }

    .client-table tbody td,
    .client-table tbody td:nth-child(n) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 6px 0;
        color: #263247;
        text-align: right;
        font-size: 12px;
        font-weight: 400;
    }

    .client-table tbody td:first-child {
        align-items: flex-start;
        padding-bottom: 11px;
    }

    .admin-client-profile {
        padding: 20px 16px 24px;
    }

    .client-profile-header {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 16px;
    }

    .client-profile-identity {
        align-items: flex-start;
        gap: 12px;
    }

    .profile-avatar {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }

    .profile-name-row h2 {
        font-size: 18px;
    }

    .client-profile-identity p {
        overflow-wrap: anywhere;
    }

    .client-profile-header .btn {
        width: 100%;
    }

    .client-profile-tabs {
        display: flex;
        justify-content: flex-start;
        padding: 0;
    }

    .client-profile-tabs a {
        min-width: 118px;
        min-height: 56px;
        padding-inline: 11px;
        flex: 0 0 118px;
    }

    .client-profile-tabs a::after {
        right: 18px;
        left: 18px;
    }

    .profile-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-metrics > div {
        padding: 17px 16px;
    }

    .profile-metrics > div:nth-child(2) {
        border-right: 0;
    }

    .profile-metrics > div:nth-child(-n+2) {
        border-bottom: 1px solid #e8edf4;
    }

    .profile-metrics strong {
        font-size: 18px;
    }

    .profile-details-grid {
        grid-template-columns: 1fr;
    }

    .profile-details-grid > section {
        padding: 20px 16px;
    }

    .profile-details-grid > section + section {
        border-top: 1px solid #e8edf4;
        border-left: 0;
    }

    .profile-details-grid dl > div {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .profile-content-header,
    .email-preview-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 16px;
    }

    .profile-content-header > strong {
        padding-left: 30px;
    }

    .email-history-item {
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: flex-start;
        padding: 16px;
    }

    .email-history-icon {
        width: 36px;
        height: 36px;
    }

    .email-history-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .email-history-title strong {
        white-space: normal;
    }

    .email-preview-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .email-preview-dialog {
        width: calc(100% - 18px);
        max-height: calc(100vh - 18px);
    }

    .email-preview-dialog-header,
    .email-preview-dialog-toolbar {
        padding-inline: 16px;
    }

    .email-preview-dialog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .email-preview-dialog-toolbar .btn {
        width: 100%;
        margin-left: 0;
    }

    .email-preview-dialog-body {
        height: calc(100vh - 236px);
        min-height: 300px;
        padding: 10px;
    }

    .email-preview-dialog-body .email-preview-frame {
        min-height: 500px;
    }

    .profile-table-wrap {
        padding: 4px 14px 12px;
        overflow: visible;
    }

    .profile-data-table,
    .profile-data-table tbody,
    .profile-data-table tr,
    .profile-data-table td {
        display: block;
        width: 100%;
    }

    .profile-data-table thead {
        display: none;
    }

    .profile-data-table tbody {
        display: block;
    }

    .profile-data-table tbody tr {
        display: block;
        padding: 13px 0;
        border: 0;
        border-bottom: 1px solid #e8edf4;
        border-radius: 0;
        background: transparent;
    }

    .profile-data-table tbody td,
    .profile-data-table tbody td:nth-child(n) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 0;
        color: #344158;
        border: 0;
        text-align: right;
        font-size: 11px;
        font-weight: 400;
    }

    .profile-data-table tbody td::before {
        flex: 0 0 auto;
        color: #7b8799;
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .profile-data-table tbody td > strong,
    .profile-data-table tbody td > small {
        max-width: 68%;
        overflow-wrap: anywhere;
    }

    .email-preview-header .btn {
        width: 100%;
    }

    .email-preview-frame {
        height: 440px;
    }

    .profile-edit-section {
        padding: 20px 16px;
    }

    .client-danger-zone {
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .client-danger-zone > .btn {
        width: 100%;
    }

    .confirm-dialog-heading,
    .confirm-dialog form {
        padding: 18px;
    }

    .confirm-dialog-actions {
        flex-direction: column-reverse;
    }

    .confirm-dialog-actions .btn {
        width: 100%;
    }
}

/* Client authentication */
.client-auth {
    padding: 0;
    place-items: stretch;
    overflow-x: hidden;
    background: #07111f;
}

.client-auth .auth-wrap {
    width: 100%;
    max-width: none;
    display: block;
}

.client-login-experience {
    --scene-x: 0px;
    --scene-y: 0px;
    --scene-tilt-x: 0deg;
    --scene-tilt-y: 0deg;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr);
    background: #07111f;
}

.client-login-brand {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(36px, 5vw, 72px);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.client-auth-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #07111f;
}

.client-auth-background::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .72;
    background: linear-gradient(125deg, color-mix(in srgb, var(--brand-primary) 17%, transparent), transparent 42%, rgba(6, 182, 212, .08));
}

.auth-grid-plane {
    position: absolute;
    inset: -16%;
    opacity: .18;
    transform: perspective(900px) rotateX(58deg) rotateZ(-10deg) translate3d(var(--scene-x), var(--scene-y), 0);
    transform-origin: 54% 58%;
    transition: transform .18s ease-out;
    background-image:
        linear-gradient(color-mix(in srgb, var(--brand-primary-bright) 55%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--brand-primary-bright) 55%, transparent) 1px, transparent 1px);
    background-size: 54px 54px;
}

.auth-data-panel {
    position: absolute;
    display: grid;
    align-content: end;
    gap: 11px;
    padding: 20px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 8px;
    background: rgba(8, 21, 39, .7);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
    backdrop-filter: blur(8px);
    transition: transform .2s ease-out;
}

.auth-data-panel span {
    display: block;
    height: 7px;
    border-radius: 2px;
    background: rgba(191, 219, 254, .15);
}

.auth-data-panel span:nth-child(1) {
    width: 44%;
    background: #22d3ee;
}

.auth-data-panel span:nth-child(2) {
    width: 76%;
}

.auth-data-panel span:nth-child(3) {
    width: 58%;
}

.auth-data-panel span:nth-child(4) {
    width: 88%;
    background: rgba(168, 85, 247, .48);
}

.auth-data-panel span:nth-child(5) {
    width: 66%;
}

.auth-data-panel-main {
    top: 17%;
    right: 7%;
    width: min(310px, 36vw);
    height: 190px;
    transform: perspective(900px) rotateX(var(--scene-tilt-x)) rotateY(var(--scene-tilt-y)) translate3d(var(--scene-x), var(--scene-y), 0);
}

.auth-data-panel-side {
    right: 31%;
    bottom: 12%;
    width: 190px;
    height: 118px;
    opacity: .7;
    transform: translate3d(calc(var(--scene-x) * -.6), calc(var(--scene-y) * -.6), 0);
}

.auth-flow-line {
    position: absolute;
    height: 1px;
    transform-origin: left center;
    transition: transform .2s ease-out;
}

.auth-flow-line-one {
    top: 42%;
    left: 9%;
    width: 54%;
    background: #22d3ee;
    transform: rotate(-17deg) translateX(var(--scene-x));
}

.auth-flow-line-two {
    right: 8%;
    bottom: 32%;
    width: 38%;
    background: #d946ef;
    transform: rotate(24deg) translateX(calc(var(--scene-x) * -.7));
}

.client-login-logo,
.client-brand-message,
.client-brand-status {
    position: relative;
    z-index: 2;
}

.client-login-logo {
    width: min(250px, 44%);
}

.client-login-logo img,
.client-login-mobile-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.client-brand-message {
    width: min(560px, 86%);
    margin-block: auto;
    padding-block: 72px;
}

.client-brand-kicker {
    display: block;
    margin-bottom: 18px;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.client-brand-message h1 {
    max-width: 540px;
    margin: 0;
    font-size: clamp(38px, 4.2vw, 64px);
    line-height: 1.08;
}

.client-brand-message p {
    max-width: 500px;
    margin: 22px 0 0;
    color: #c7d6e9;
    font-size: 16px;
    line-height: 1.75;
}

.client-brand-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-brand-status > span {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 2px solid rgba(103, 232, 249, .28);
    border-radius: 50%;
    background: #22d3ee;
    box-sizing: content-box;
}

.client-brand-status strong,
.client-brand-status small {
    display: block;
}

.client-brand-status strong {
    font-size: 12px;
}

.client-brand-status small {
    margin-top: 3px;
    color: #8fa4bd;
    font-size: 10px;
}

.client-login-panel {
    min-width: 0;
    display: grid;
    place-items: center;
    padding: clamp(32px, 5vw, 78px);
    border-left: 1px solid #dce4ef;
    background: #f7f9fc;
}

.client-login-card {
    width: min(430px, 100%);
}

.client-login-mobile-brand {
    display: none;
}

.client-login-heading > span {
    display: block;
    margin-bottom: 13px;
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.client-login-heading h2 {
    margin: 0;
    color: #0b1324;
    font-size: 34px;
    line-height: 1.15;
}

.client-login-heading p {
    margin: 11px 0 0;
    color: #68758a;
    font-size: 13px;
    line-height: 1.6;
}

.client-login-alert {
    margin-top: 24px;
    font-size: 12px;
}

.client-login-form {
    gap: 18px;
    margin-top: 30px;
}

.client-login-form label {
    gap: 9px;
    color: #263247;
    font-size: 12px;
}

.client-login-form label > span:first-child {
    font-size: 12px;
}

.client-login-form input {
    height: 52px;
    border-color: #d7e0eb;
    background: #fff;
    font-size: 13px;
}

.client-login-form input::placeholder {
    color: #97a3b4;
}

.client-login-form input[type="date"]:required:invalid {
    color: #97a3b4;
}

.client-login-form input[type="date"]:required:invalid::-webkit-datetime-edit {
    color: #97a3b4;
}

.client-login-form input[type="date"]:valid,
.client-login-form input[type="date"]:valid::-webkit-datetime-edit {
    color: #263247;
}

.password-field {
    position: relative;
    display: block;
}

.input-with-icon {
    position: relative;
    min-width: 0;
    display: block;
}

.input-with-icon > svg,
.password-field > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 2;
    width: 17px;
    height: 17px;
    color: #7b8799;
    pointer-events: none;
    transform: translateY(-50%);
}

.input-with-icon:focus-within > svg,
.password-field:focus-within > svg {
    color: var(--brand-primary);
}

.client-login-form .input-with-icon input {
    padding-left: 42px;
}

.password-field input {
    padding-left: 42px;
    padding-right: 52px;
}

.password-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #68758a;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

.client-login-submit {
    min-height: 52px;
    margin-top: 4px;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.client-login-footer {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid #e1e7ef;
    text-align: center;
    font-size: 11px;
}

.client-login-footer span {
    color: #7b8799;
}

.client-login-footer a {
    margin-left: 5px;
    color: var(--brand-primary);
    font-weight: 800;
}

@media (max-width: 820px) {
    .client-login-experience {
        grid-template-columns: 1fr;
    }

    .client-login-brand {
        min-height: 250px;
        padding: 28px 28px 48px;
    }

    .client-login-logo,
    .client-brand-status {
        display: none;
    }

    .client-brand-message {
        width: min(520px, 100%);
        margin: 0;
        padding: 36px 0 0;
    }

    .client-brand-message h1 {
        font-size: 36px;
    }

    .client-brand-message p {
        margin-top: 14px;
        font-size: 13px;
    }

    .client-login-panel {
        min-height: calc(100svh - 250px);
        align-items: start;
        padding: 34px 24px 44px;
        border-top: 1px solid #dce4ef;
        border-left: 0;
    }

    .client-login-mobile-brand {
        width: 172px;
        display: block;
        margin-bottom: 30px;
        padding: 9px 12px;
        border-radius: 8px;
        background: #07111f;
    }
}

@media (max-width: 520px) {
    .client-auth {
        padding: 0;
    }

    .client-login-brand {
        min-height: 190px;
        padding: 22px 20px 38px;
    }

    .client-brand-message {
        padding-top: 20px;
    }

    .client-brand-kicker {
        margin-bottom: 10px;
        font-size: 10px;
    }

    .client-brand-message h1 {
        max-width: 330px;
        font-size: 28px;
    }

    .client-brand-message p {
        display: none;
    }

    .auth-data-panel-main {
        top: 12%;
        right: -20%;
        width: 240px;
        height: 145px;
    }

    .auth-data-panel-side {
        display: none;
    }

    .client-login-panel {
        min-height: calc(100svh - 190px);
        padding: 28px 20px 38px;
    }

    .client-login-mobile-brand {
        width: 150px;
        margin-bottom: 24px;
    }

    .client-login-heading h2 {
        font-size: 28px;
    }

    .client-login-form {
        margin-top: 24px;
    }

    .client-login-footer {
        display: grid;
        gap: 6px;
    }

    .client-login-footer a {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-grid-plane,
    .auth-data-panel,
    .auth-flow-line {
        transition: none;
    }
}

/* Unified client login scene */
.client-login-experience {
    --cursor-x: 50%;
    --cursor-y: 50%;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}

.client-login-brand {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    display: block;
    padding: 0;
    pointer-events: none;
}

.client-login-logo {
    position: absolute;
    top: clamp(26px, 4vw, 48px);
    left: clamp(28px, 5vw, 72px);
    z-index: 4;
    width: clamp(230px, 22vw, 310px);
    display: block;
    pointer-events: auto;
}

.client-login-logo img {
    image-rendering: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .26));
    transform: translateZ(0);
}

.client-brand-status {
    position: absolute;
    top: clamp(34px, 4.4vw, 55px);
    right: clamp(28px, 5vw, 72px);
    z-index: 4;
    display: flex;
}

.client-auth-background::before {
    opacity: 1;
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 34%),
        linear-gradient(305deg, rgba(217, 70, 239, .1), transparent 30%),
        #07111f;
}

.auth-grid-plane {
    inset: -30%;
    opacity: .14;
    transform: perspective(1100px) rotateX(63deg) rotateZ(-8deg) translate3d(var(--scene-x), var(--scene-y), 0);
    transform-origin: center 62%;
    background-size: 64px 64px;
}

.auth-cursor-field {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.client-login-experience.is-pointer-active .auth-cursor-field {
    opacity: 1;
}

.auth-cursor-field span,
.auth-cursor-field i {
    position: absolute;
    top: var(--cursor-y);
    left: var(--cursor-x);
    display: block;
    transition: top .06s linear, left .06s linear;
}

.auth-cursor-horizontal {
    width: 220px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .75), transparent);
    transform: translate(-50%, -50%);
}

.auth-cursor-vertical {
    width: 1px;
    height: 220px;
    background: linear-gradient(180deg, transparent, rgba(103, 232, 249, .56), transparent);
    transform: translate(-50%, -50%);
}

.auth-cursor-field i {
    width: 13px;
    height: 13px;
    border: 1px solid #67e8f9;
    border-radius: 2px;
    background: rgba(7, 17, 31, .82);
    box-shadow: 0 0 18px rgba(34, 211, 238, .55);
    transform: translate(-50%, -50%) rotate(45deg);
}

.auth-focus-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(670px, 62vw);
    aspect-ratio: 1.45;
    border: 1px solid rgba(103, 232, 249, .14);
    border-radius: 8px;
    transform: translate(calc(-50% + var(--scene-x)), calc(-50% + var(--scene-y))) rotate(-5deg);
    transition: transform .2s ease-out;
}

.auth-focus-frame::before,
.auth-focus-frame::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-color: #22d3ee;
    opacity: .8;
}

.auth-focus-frame::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.auth-focus-frame::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.auth-data-panel {
    opacity: .52;
    background: rgba(7, 17, 31, .58);
}

.auth-data-panel-main {
    top: 17%;
    right: 8%;
    width: min(270px, 23vw);
    height: 155px;
}

.auth-data-panel-side {
    right: auto;
    bottom: 11%;
    left: 7%;
    width: 210px;
    height: 126px;
}

.auth-data-panel-third {
    top: 22%;
    left: 10%;
    width: 170px;
    height: 102px;
    opacity: .36;
    transform: translate3d(calc(var(--scene-x) * -.45), calc(var(--scene-y) * -.45), 0);
}

.auth-flow-line-one {
    top: 36%;
    left: 3%;
    width: 34%;
}

.auth-flow-line-two {
    right: 2%;
    bottom: 27%;
    width: 33%;
}

.auth-flow-line {
    animation: auth-flow-pulse 3.4s ease-in-out infinite;
}

.auth-signal {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 0 7px rgba(34, 211, 238, .08);
    transition: transform .2s ease-out;
    animation: auth-signal-pulse 2.6s ease-in-out infinite;
}

.auth-signal-one {
    top: 29%;
    left: 31%;
    transform: translate3d(var(--scene-x), var(--scene-y), 0);
}

.auth-signal-two {
    right: 25%;
    bottom: 22%;
    background: #d946ef;
    box-shadow: 0 0 0 7px rgba(217, 70, 239, .08);
    transform: translate3d(calc(var(--scene-x) * -.7), calc(var(--scene-y) * -.7), 0);
    animation-delay: -1.1s;
}

.auth-signal-three {
    right: 13%;
    top: 46%;
    width: 5px;
    height: 5px;
    transform: translate3d(calc(var(--scene-x) * .4), calc(var(--scene-y) * .4), 0);
    animation-delay: -.55s;
}

@keyframes auth-flow-pulse {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}

@keyframes auth-signal-pulse {
    0%,
    100% {
        filter: brightness(.9);
    }

    50% {
        filter: brightness(1.8);
    }
}

.client-login-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 118px 24px 52px;
    border: 0;
    background: transparent;
}

.client-login-card {
    position: relative;
    width: min(438px, 100%);
    padding: 38px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 8px;
    background: rgba(248, 250, 252, .92);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .32);
    backdrop-filter: blur(20px);
}

.client-login-card::before {
    content: '';
    position: absolute;
    top: -1px;
    right: 34px;
    left: 34px;
    height: 3px;
    background: var(--brand-primary);
}

.client-login-heading > span {
    color: var(--brand-primary-strong);
}

.client-login-heading h2 {
    font-size: 31px;
}

.client-login-submit {
    background: var(--brand-primary-strong);
}

.client-login-submit:hover {
    background: #173ea8;
}

@media (max-width: 760px) {
    .client-login-logo {
        top: 24px;
        left: 24px;
        width: 196px;
    }

    .client-brand-status {
        top: 27px;
        right: 24px;
    }

    .client-brand-status small {
        display: none;
    }

    .client-login-panel {
        min-height: 100svh;
        padding: 104px 20px 30px;
        border: 0;
    }

    .client-login-card {
        padding: 30px;
    }

    .auth-data-panel-main {
        top: 15%;
        right: -80px;
        width: 230px;
    }

    .auth-data-panel-side {
        bottom: 4%;
        left: -70px;
    }

    .auth-data-panel-third {
        display: none;
    }

    .auth-focus-frame {
        width: 84vw;
    }
}

@media (max-width: 520px) {
    .client-login-logo {
        top: 21px;
        left: 20px;
        width: 178px;
    }

    .client-brand-status {
        top: 25px;
        right: 20px;
    }

    .client-brand-status div {
        display: none;
    }

    .client-login-panel {
        padding: 88px 16px 24px;
    }

    .client-login-card {
        padding: 28px 22px;
    }

    .client-login-heading h2 {
        font-size: 27px;
    }

    .client-login-footer {
        display: grid;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-flow-line,
    .auth-signal {
        animation: none;
    }
}

/* Light SaaS authentication surface */
.client-login-experience {
    background: #edf2f8;
}

.client-auth-background {
    background: #edf2f8;
}

.client-auth-background::before {
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 34%),
        linear-gradient(300deg, rgba(217, 70, 239, .07), transparent 31%),
        #edf2f8;
}

.auth-grid-plane {
    inset: -34%;
    opacity: .32;
    background-image:
        linear-gradient(rgba(100, 116, 139, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .2) 1px, transparent 1px);
    background-size: 58px 58px;
    animation: auth-grid-travel 14s linear infinite;
}

.auth-focus-frame {
    width: min(630px, 58vw);
    border-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
    background: rgba(255, 255, 255, .14);
    animation: auth-frame-breathe 5s ease-in-out infinite;
}

.auth-data-panel {
    opacity: .78;
    border-color: rgba(148, 163, 184, .34);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .1);
    backdrop-filter: blur(10px);
    animation: auth-panel-breathe 4.8s ease-in-out infinite;
}

.auth-data-panel-side {
    animation-delay: -1.7s;
}

.auth-data-panel-third {
    animation-delay: -3.1s;
}

.auth-data-panel span {
    background: rgba(71, 85, 105, .17);
}

.auth-data-panel span:nth-child(1) {
    background: var(--brand-primary-strong);
}

.auth-data-panel span:nth-child(4) {
    background: rgba(192, 38, 211, .58);
}

.auth-flow-line-one {
    background: var(--brand-primary-strong);
}

.auth-flow-line-two {
    background: #c026d3;
}

.auth-flow-line {
    animation: auth-flow-pulse 3.4s ease-in-out infinite;
}

.auth-signal {
    animation: auth-signal-pulse 2.6s ease-in-out infinite;
}

.client-login-panel {
    padding: 38px 20px;
}

.client-login-card {
    width: min(410px, 100%);
    padding: 32px;
    border: 1px solid #dbe3ee;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .16);
    backdrop-filter: none;
}

.client-login-card::before {
    right: 0;
    left: 0;
    height: 3px;
}

.client-login-card-brand {
    width: 220px;
    display: block;
    margin: 0 auto 28px;
    padding: 0;
    text-align: center;
}

.client-login-card-brand img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: auto;
    filter: none;
}

.client-login-heading {
    text-align: center;
}

.client-login-heading h2 {
    font-size: 28px;
}

.client-login-form {
    margin-top: 26px;
}

.client-login-form input {
    height: 50px;
    background: #f9fbfd;
}

.client-login-submit {
    min-height: 50px;
}

.client-login-footer {
    margin-top: 26px;
    padding-top: 20px;
}

.client-password-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.client-password-title > span {
    color: #111827;
    font-size: inherit;
    font-weight: inherit;
}

.client-password-title a {
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.client-password-title a:hover {
    text-decoration: underline;
}

.client-password-card .client-login-card-brand {
    margin-bottom: 24px;
}

.client-password-card .client-login-heading h2 {
    margin-bottom: 8px;
}

.client-password-card .client-login-heading p {
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.55;
}

.client-password-card .client-login-form {
    margin-top: 24px;
}

.client-password-card .client-login-form label {
    gap: 9px;
}

.client-password-card .input-with-icon {
    min-height: 52px;
}

.client-password-card .input-with-icon input {
    height: 50px;
    padding-right: 16px;
}

.password-page-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, #dbe3ee);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
    color: var(--brand-primary);
}

.password-page-icon svg {
    width: 20px;
    height: 20px;
}

.password-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #52627a;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.password-back-link svg {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
}

.password-back-link:hover {
    color: var(--brand-primary);
}

.password-request-again {
    margin-top: 24px;
}

.invoice-method-form {
    display: grid;
    gap: 14px;
}

.invoice-payment-action {
    width: fit-content;
    min-height: 42px;
    justify-self: end;
}

.invoice-payment-alert {
    margin: 14px 0 0;
}

@keyframes auth-grid-travel {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 58px 58px;
    }
}

@keyframes auth-frame-breathe {
    0%,
    100% {
        border-color: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    }

    50% {
        border-color: rgba(192, 38, 211, .3);
    }
}

@keyframes auth-panel-breathe {
    0%,
    100% {
        opacity: .6;
    }

    50% {
        opacity: .88;
    }
}

@media (max-width: 520px) {
    .client-login-panel {
        padding: 22px 16px;
    }

    .client-login-card {
        padding: 26px 22px;
    }

    .client-login-card-brand {
        width: 190px;
        margin-bottom: 24px;
    }

    .auth-data-panel-main {
        right: -100px;
    }

    .auth-focus-frame {
        width: 90vw;
    }
}

/* Client registration */
.client-register-panel {
    padding-block: 34px;
}

.client-register-card {
    width: min(720px, 100%);
}

.client-register-card .client-login-card-brand {
    width: 210px;
    margin-bottom: 22px;
}

.client-register-card .client-login-heading h2 {
    font-size: 26px;
}

.client-register-card .client-login-heading p {
    margin-top: 7px;
}

.client-register-form {
    gap: 20px;
    margin-top: 22px;
}

.client-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 16px;
}

.client-register-grid label {
    min-width: 0;
}

.country-phone-field {
    min-width: 0;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 0;
    height: 50px;
    overflow: visible;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    background: #f9fbfd;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.country-phone-field:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}

.phone-country-control {
    position: relative;
    min-width: 0;
    display: block;
}

.phone-country-trigger {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    color: #263247;
    border: 0;
    border-right: 1px solid #d7e0eb;
    border-radius: 8px 0 0 8px;
    background: transparent;
    cursor: pointer;
}

.phone-country-trigger:focus-visible,
.country-phone-field.open .phone-country-trigger {
    outline: 0;
    color: var(--brand-primary-strong);
}

.phone-country-trigger img,
.phone-country-menu img {
    width: 24px;
    height: 17px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid rgba(100, 116, 139, .2);
    border-radius: 2px;
}

.phone-country-trigger strong {
    font-size: 12px;
    white-space: nowrap;
}

.form-stack label .phone-country-abbreviation,
.phone-country-abbreviation {
    display: inline-flex;
    align-items: center;
    align-self: center;
    color: #64748b;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.phone-country-trigger svg {
    width: 15px;
    height: 15px;
    margin-left: auto;
    transition: transform .18s ease;
}

.country-phone-field.open .phone-country-trigger svg {
    transform: rotate(180deg);
}

.phone-country-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: min(286px, calc(100vw - 40px));
    max-height: 280px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}

.phone-country-menu[hidden] {
    display: none;
}

.phone-country-menu button {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 26px 50px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: #344158;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-size: 11px;
    cursor: pointer;
}

.phone-country-menu button:hover,
.phone-country-menu button:focus-visible {
    outline: 0;
    background: var(--brand-primary-soft);
}

.phone-country-menu button[aria-selected="true"] {
    color: var(--brand-primary-strong);
    background: #e8f0ff;
}

.phone-country-menu button strong {
    font-size: 11px;
}

.phone-country-menu button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-phone-country-native] {
    display: none;
}

.country-phone-field > input[type="tel"] {
    width: 100%;
    height: 48px;
    padding-inline: 14px;
    border: 0;
    border-radius: 0 8px 8px 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.country-phone-field > input[type="tel"]:focus {
    border: 0;
    outline: 0;
    box-shadow: none;
}

.admin-main .phone-country-trigger {
    height: 42px;
}

.admin-main .country-phone-field {
    height: 44px;
    background: #fff;
}

.admin-main .country-phone-field > input[type="tel"] {
    height: 42px;
}

.register-full-field {
    grid-column: 1 / -1;
}

.client-register-card .client-login-alert {
    display: grid;
    gap: 4px;
}

.client-register-card .client-login-alert span {
    display: block;
}

@media (max-width: 640px) {
    .client-register-panel {
        align-items: start;
        padding: 16px;
    }

    .client-register-card {
        padding: 26px 22px;
    }

    .client-register-card .client-login-card-brand {
        width: 190px;
    }

    .client-register-grid {
        grid-template-columns: 1fr;
    }

    .register-full-field {
        grid-column: auto;
    }

    .country-phone-field {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    .client-dashboard {
        padding: 28px;
    }

    .client-dashboard-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 980px) {
    .client-dashboard .client-summary-grid,
    .client-metric-grid {
        grid-template-columns: 1fr;
    }

    .client-help-card {
        display: none;
    }
}

@media (max-width: 640px) {
    .client-dashboard {
        padding: 16px;
    }

    .client-dashboard .page-heading h1 {
        font-size: 28px;
    }

    .client-dashboard-topbar {
        align-items: flex-start;
    }

    .client-dashboard .client-profile {
        min-width: 0;
        width: 100%;
    }

    .client-metric-card {
        min-height: 112px;
        padding: 20px;
    }

    .metric-sparkline {
        display: none;
    }

    .featured-service-head,
    .featured-service-meta,
    .next-billing-content,
    .client-dashboard-invoices .client-invoice-row {
        grid-template-columns: 1fr;
    }

    .featured-service-icon {
        width: 64px;
        height: 64px;
    }

    .featured-service-card {
        margin-inline: 18px;
    }

    .featured-service-meta .btn {
        width: 100%;
    }

    .next-billing-card .btn {
        width: calc(100% - 36px);
        margin-inline: 18px;
    }

    .client-dashboard .client-section-header,
    .client-dashboard-invoices,
    .next-billing-content,
    .next-billing-value,
    .quick-action-grid {
        padding-inline: 18px;
    }

    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .panel-footer {
        display: grid;
        gap: 4px;
    }
}

/* Client dashboard premium palette */
.client-dashboard {
    --client-premium-blue: var(--brand-primary-strong);
    --client-premium-blue-dark: #172554;
    --client-premium-blue-soft: var(--brand-primary-soft);
    --client-premium-line: #dbe5f1;
}

.client-dashboard .client-workspace-panel,
.client-dashboard .client-summary-card,
.quick-action-grid a,
.featured-service-card,
.client-main .notification-action,
.client-main .client-profile-menu,
.client-account-dropdown,
.next-billing-card .btn {
    border-color: var(--client-premium-line);
}

.client-summary-card::after,
.client-summary-card:nth-child(2)::after,
.client-summary-card:nth-child(3)::after {
    background: var(--client-premium-blue);
}

.client-metric-card:nth-child(2) .metric-sparkline,
.client-metric-card:nth-child(3) .metric-sparkline {
    border-bottom-color: var(--client-premium-blue);
}

.client-summary-card {
    border-color: var(--client-premium-line);
}

.client-summary-card:nth-child(1) {
    border-color: var(--client-premium-line);
}

.client-summary-icon,
.client-summary-card:nth-child(2) .client-summary-icon,
.client-summary-card:nth-child(3) .client-summary-icon,
.featured-service-icon,
.quick-action-grid a > svg:first-child,
.quick-action-grid a:nth-child(1) > svg:first-child,
.quick-action-grid a:nth-child(2) > svg:first-child,
.quick-action-grid a:nth-child(4) > svg:first-child {
    color: var(--client-premium-blue);
    background: var(--client-premium-blue-soft);
}

.metric-sparkline {
    background: transparent;
    border-bottom-color: var(--client-premium-blue);
}

.client-panel-link,
.next-billing-card .btn,
.quick-action-grid a > svg:last-child,
.client-main .notification-action:hover,
.client-account-dropdown a:hover,
.client-account-dropdown button:hover {
    color: var(--client-premium-blue);
}

.featured-service-card {
    background:
        radial-gradient(circle at 92% 22%, rgba(29, 78, 216, .09), transparent 28%),
        #fff;
}

.next-billing-content time {
    color: var(--client-premium-blue);
    border-color: #dbe7ff;
    background: var(--client-premium-blue-soft);
}

.billing-illustration {
    color: var(--client-premium-blue);
    background: linear-gradient(135deg, var(--brand-primary-soft), #dbe7ff);
}

.invoice-status-icon.status-open {
    color: var(--client-premium-blue);
    background: var(--brand-primary-soft);
}

.status.open {
    color: var(--brand-primary-strong);
    background: var(--brand-primary-soft);
}

.status.active,
.status.paid {
    color: #166534;
    background: #dcfce7;
}

.status.overdue {
    color: #991b1b;
    background: #fee2e2;
}

.client-main .client-topbar-actions {
    display: flex;
    align-items: center;
}

.client-main .notification-action,
.client-main .client-profile-menu {
    height: 56px;
}

.client-main .client-profile-menu {
    min-width: 220px;
    min-height: 0;
    padding: 8px 12px;
    gap: 10px;
}

/* Client invoices */
.client-invoices-page {
    --invoice-line: #dce6f1;
    --invoice-muted: #667792;
}

.client-email-page {
    --invoice-line: #dce6f1;
    --invoice-muted: #667792;
}

.client-email-overview {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.client-email-overview article,
.client-email-support {
    min-width: 0;
    min-height: 96px;
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    color: inherit;
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .055);
}

.client-email-overview article {
    grid-template-columns: 46px minmax(0, 1fr);
    border-bottom: 3px solid var(--primary);
}

.client-email-support {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
}

.client-email-overview article > span,
.client-email-support > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.client-email-overview svg,
.client-email-support svg {
    width: 19px;
    height: 19px;
}

.client-email-overview small,
.client-email-support small {
    color: var(--invoice-muted);
    font-size: 12px;
}

.client-email-overview strong,
.client-email-support strong {
    display: block;
    color: #101827;
    font-size: 22px;
    line-height: 1.1;
}

.client-email-overview p {
    margin: 5px 0 0;
    color: var(--invoice-muted);
    font-size: 12px;
}

.client-email-support strong {
    margin-bottom: 5px;
    font-size: 15px;
}

.client-email-support > svg {
    width: 16px;
    height: 16px;
    justify-self: end;
    color: #8a98ad;
    transform: rotate(-90deg);
}

.client-email-history {
    overflow: hidden;
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
}

.client-email-history .profile-content-header {
    background: #fff;
}

.client-email-list .email-history-main p {
    max-width: 880px;
    color: #667792;
}

.client-email-list {
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    gap: 8px;
    padding: 10px;
    background: #fff;
}

.client-email-column {
    display: grid;
    gap: 6px;
}

.client-email-list .client-email-item {
    margin: 0;
    min-height: 74px;
    padding: 13px 15px;
    border: 1px solid #e5edf6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.client-email-list .email-history-icon {
    width: 34px;
    height: 34px;
}

.client-email-list .email-preview-button {
    min-width: 108px;
    min-height: 34px;
}

.client-email-empty {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.client-email-pagination {
    border-top: 1px solid #e7edf6;
}

.admin-invoices-page {
    --invoice-line: #dce6f1;
    --invoice-muted: #667792;
}

.invoice-overview {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(190px, 1fr));
    margin-bottom: 20px;
    border: 1px solid var(--invoice-line);
    border-bottom: 3px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.invoice-overview article {
    min-width: 0;
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 14px 20px;
    border-left: 1px solid #e6edf5;
}

.invoice-overview article:first-child {
    border-left: 0;
}

.invoice-overview-primary {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
}

.invoice-overview-primary > div {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.invoice-overview-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.invoice-overview-icon svg {
    width: 20px;
    height: 20px;
}

.invoice-overview small,
.invoice-detail-strip small {
    color: var(--invoice-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.invoice-overview strong {
    color: #0f172a;
    font-size: 22px;
    line-height: 1.1;
}

.invoice-overview strong.is-overdue {
    color: #b4232f;
}

.invoice-next-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.invoice-next-value b {
    color: #465773;
    font-size: 13px;
    white-space: nowrap;
}

.invoice-overview p {
    margin: 0;
    color: var(--invoice-muted);
    font-size: 12px;
}

.invoice-overview p b {
    margin: 0 3px;
    color: #9aa7b9;
}

.invoice-ledger {
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .065);
    overflow: hidden;
}

.invoice-ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
}

.invoice-ledger-header h2 {
    margin: 0;
    color: #101827;
    font-size: 20px;
}

.invoice-ledger-header p {
    margin: 5px 0 0;
    color: var(--invoice-muted);
    font-size: 13px;
}

.invoice-ledger-header > span {
    padding: 7px 11px;
    color: #465773;
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    background: #f8fafc;
}

.invoice-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 24px 14px;
    border-bottom: 1px solid var(--invoice-line);
    overflow-x: auto;
}

.invoice-filters a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #5b6c86;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.invoice-filters a:hover {
    color: var(--primary);
    background: #f4f7fb;
}

.invoice-filters a.active {
    color: var(--primary);
    background: var(--brand-primary-soft);
}

.invoice-filters a span {
    min-width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 50%;
    font-size: 11px;
    background: rgba(255, 255, 255, .72);
}

.invoice-list-head,
.invoice-ledger-item > a {
    display: grid;
    grid-template-columns: 120px minmax(230px, 1.35fr) minmax(150px, .7fr) 120px minmax(130px, .55fr) 38px;
    align-items: center;
    gap: 18px;
}

.invoice-list-head {
    min-height: 42px;
    padding: 0 24px;
    color: #728199;
    border-bottom: 1px solid #e8eef5;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    background: #f8fafc;
}

.invoice-ledger-list {
    display: grid;
}

.admin-invoice-select {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 24px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
}

.invoice-bulk-form {
    gap: 14px;
}

.invoice-ledger-item {
    position: relative;
    border-bottom: 1px solid #e8eef5;
    background: #fff;
}

.invoice-ledger-item:last-child {
    border-bottom: 0;
}

.invoice-ledger-item::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: #dce6f1;
    content: "";
}

.invoice-ledger-item.status-open::before {
    background: #dce6f1;
}

.invoice-ledger-item.status-overdue::before {
    background: #dce6f1;
}

.invoice-ledger-item.status-paid::before {
    background: #dce6f1;
}

.invoice-ledger-item > a {
    min-height: 88px;
    padding: 14px 24px;
    color: inherit;
    transition: background .18s ease;
}

.invoice-ledger-item > a:hover {
    background: #fbfdff;
}

.invoice-number,
.invoice-service,
.invoice-date,
.invoice-amount {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.invoice-number {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px;
}

.invoice-number i {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.invoice-number i svg {
    width: 17px;
    height: 17px;
}

.invoice-ledger-item b {
    min-width: 0;
    color: #111827;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-ledger-item small {
    min-width: 0;
    color: #718099;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-service b,
.invoice-amount b {
    font-size: 14px;
}

.invoice-ledger-item em.status {
    display: inline-flex;
    font-style: normal;
}

.invoice-expand {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #52647f;
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    background: #fff;
}

.invoice-expand svg {
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
    transition: transform .18s ease;
}

.invoice-detail-strip {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(130px, .55fr) minmax(200px, .8fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 24px 18px 78px;
    border-top: 1px dashed #dce6f1;
    background: #f8fbff;
}

.invoice-detail-strip > div:not(.invoice-detail-actions) {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.invoice-detail-strip strong {
    min-width: 0;
    color: #1c2738;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.invoice-empty-state {
    min-height: 300px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 34px;
    text-align: center;
}

.invoice-empty-state > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.invoice-empty-state h3,
.invoice-empty-state p {
    margin: 0;
}

.invoice-empty-state p {
    color: var(--invoice-muted);
}

.invoice-pagination {
    padding: 16px 24px;
    border-top: 1px solid var(--invoice-line);
}

.admin-invoice-ledger-item > a {
    grid-template-columns: 120px minmax(220px, 1.1fr) minmax(220px, 1.1fr) 120px minmax(130px, .55fr) 38px;
    padding-left: 72px;
}

.admin-invoice-list-head {
    grid-template-columns: 34px 120px minmax(220px, 1.1fr) minmax(220px, 1.1fr) 120px minmax(130px, .55fr) 38px;
}

.admin-invoice-list-head > span:first-child {
    display: grid;
    place-items: center;
}

.client-profile-invoice-ledger {
    --invoice-line: #dce6f1;
    --invoice-muted: #667792;
}

.profile-invoice-list-head,
.profile-invoice-ledger-item > a {
    grid-template-columns: 120px minmax(260px, 1.4fr) minmax(150px, .75fr) 120px minmax(130px, .55fr) 38px;
}

.invoice-client-flow-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
}

.invoice-client-flow-card > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--brand-primary);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--brand-primary-border);
}

.invoice-client-flow-card svg {
    width: 19px;
    height: 19px;
}

.invoice-client-flow-card > div {
    min-width: 0;
    flex: 1;
}

.invoice-client-flow-card strong {
    display: block;
    color: #172033;
    font-size: 14px;
}

.invoice-client-flow-card p {
    margin: 4px 0 0;
    color: #667792;
    font-size: 12px;
    line-height: 1.45;
}

.admin-invoice-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 18px;
    align-items: start;
}

.admin-invoice-edit-form,
.admin-invoice-actions {
    padding: 0;
    overflow: hidden;
}

.admin-invoice-form-grid {
    padding: 22px 24px;
}

.admin-invoice-form-grid .wide {
    grid-column: 1 / -1;
}

.admin-invoice-actions dl {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 4px 24px 20px;
}

.admin-invoice-actions dl > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-invoice-actions dt {
    color: #667792;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-invoice-actions dd {
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.admin-invoice-actions form,
.admin-invoice-actions > .btn {
    margin: 0 24px 12px;
}

.admin-invoice-actions .btn svg,
.admin-invoice-edit-form .btn svg {
    width: 16px;
    height: 16px;
}

.client-invoice-page {
    --payment-line: #dce6f1;
    --payment-muted: #667792;
}

.invoice-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 18px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.invoice-back-link svg {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
}

.invoice-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    gap: 20px;
    align-items: start;
}

.invoice-payment-main {
    min-width: 0;
    display: grid;
    gap: 18px;
}

.invoice-payment-card,
.invoice-methods-card,
.invoice-payment-summary {
    border: 1px solid var(--payment-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .06);
}

.invoice-payment-card {
    overflow: hidden;
}

.invoice-payment-heading {
    min-height: 142px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 28px;
    border-bottom: 1px solid var(--payment-line);
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.invoice-payment-heading > div {
    min-width: 0;
}

.invoice-payment-heading > div > span {
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.invoice-payment-heading h2 {
    margin: 9px 0 5px;
    color: #101827;
    font-size: 24px;
}

.invoice-payment-heading p,
.invoice-methods-card header p,
.invoice-payment-complete p,
.invoice-methods-empty p {
    margin: 0;
    color: var(--payment-muted);
    font-size: 13px;
}

.invoice-payment-facts {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
}

.invoice-payment-facts > div {
    min-width: 0;
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px 24px;
    border-left: 1px solid var(--payment-line);
}

.invoice-payment-facts > div:first-child {
    border-left: 0;
}

.invoice-payment-facts small,
.invoice-summary-total small {
    color: var(--payment-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.invoice-payment-facts strong {
    min-width: 0;
    color: #111827;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-payment-facts > div:first-child strong {
    font-size: 22px;
}

.invoice-methods-card {
    padding: 24px;
}

.invoice-methods-card > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--payment-line);
}

.invoice-methods-card > header > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.catalog-checkout-screen .checkout-payment-page .invoice-methods-card > header > .checkout-security-seal {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 32px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    color: #26734c;
    background: #f1fbf6;
    border: 1px solid #cfe8da;
    border-radius: 999px;
    box-shadow: none;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.catalog-checkout-screen .checkout-payment-page .invoice-methods-card > header > .checkout-security-seal svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: currentColor;
}

@media (max-width: 760px) {
    .catalog-checkout-screen .checkout-payment-page .invoice-methods-card > header > .checkout-security-seal {
        display: none;
    }
}

.invoice-methods-card h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 18px;
}

.invoice-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 20px;
}

.invoice-method-option {
    position: relative;
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid var(--payment-line);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.invoice-method-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, transparent);
    background: #f8fbff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.invoice-method-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.invoice-method-logo {
    width: 54px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 7px;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    background: #fff;
}

.invoice-method-logo img {
    display: block;
    width: 100%;
    max-height: 28px;
    object-fit: contain;
}

.invoice-method-option > span:nth-child(3) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.invoice-method-option strong,
.invoice-method-option small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-method-option strong {
    color: #111827;
    font-size: 13px;
}

.invoice-method-option small {
    color: var(--payment-muted);
    font-size: 10px;
}

.invoice-method-option > i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
}

.invoice-method-option:has(input:checked) > i {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
}

.invoice-method-option > i svg {
    width: 13px;
    height: 13px;
}

.invoice-method-notice,
.invoice-secure-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #65758f;
    font-size: 11px;
}

.invoice-method-notice {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--payment-line);
}

.invoice-method-notice svg,
.invoice-secure-note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--primary);
}

.invoice-payment-complete,
.invoice-methods-empty {
    min-height: 124px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 4px 2px;
}

.invoice-payment-complete > span,
.invoice-methods-empty > span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--primary);
    border-radius: 50%;
    background: var(--brand-primary-soft);
}

.invoice-payment-complete strong,
.invoice-methods-empty strong {
    display: block;
    margin-bottom: 4px;
    color: #111827;
}

.invoice-methods-empty .btn {
    margin-left: auto;
}

.invoice-payment-summary {
    position: sticky;
    top: 20px;
    padding: 22px;
}

.invoice-payment-summary > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--payment-line);
}

.invoice-payment-summary > header > span {
    color: #111827;
    font-size: 16px;
    font-weight: 850;
}

.invoice-summary-total {
    display: grid;
    gap: 7px;
    padding: 24px 0;
}

.invoice-summary-total strong {
    color: #0f172a;
    font-size: 30px;
}

.invoice-payment-summary dl {
    display: grid;
    margin: 0 0 22px;
    border-top: 1px solid var(--payment-line);
}

.invoice-payment-summary dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--payment-line);
}

.invoice-payment-summary dt {
    color: var(--payment-muted);
    font-size: 12px;
}

.invoice-payment-summary dd {
    max-width: 165px;
    margin: 0;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-payment-summary .btn + .btn {
    margin-top: 9px;
}

.invoice-download-button {
    gap: 8px;
}

.invoice-download-button svg {
    width: 16px;
    height: 16px;
}

.invoice-secure-note {
    align-items: flex-start;
    margin: 18px 0 0;
    line-height: 1.45;
}

/* Invoice checkout workspace */
.invoice-page-heading > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.invoice-page-heading h1 {
    margin: 0;
}

.invoice-page-heading p {
    margin: 7px 0 0;
    color: #52647f;
    font-size: 14px;
    font-weight: 650;
}

.invoice-page-heading small {
    display: block;
    margin-top: 6px;
    color: #718099;
    font-size: 11px;
}

.invoice-payment-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}

.invoice-payment-card {
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
}

.invoice-payment-facts > div {
    min-height: 118px;
}

.invoice-payment-facts > div:first-child strong {
    font-size: 21px;
}

.invoice-payment-facts > div.is-overdue strong,
.invoice-payment-facts > div.is-overdue span {
    color: #be1e2d;
}

.invoice-payment-facts > div > span,
.invoice-payment-facts > div > a {
    color: #718099;
    font-size: 11px;
}

.invoice-payment-facts > div > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    font-weight: 800;
}

.invoice-payment-facts > div > a svg {
    width: 13px;
    height: 13px;
    transform: rotate(-90deg);
}

.invoice-methods-card {
    padding: 22px;
}

.invoice-methods-card > header {
    display: block;
    padding-bottom: 16px;
}

.invoice-methods-card h2 {
    font-size: 17px;
}

.invoice-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 18px;
}

.invoice-method-option {
    min-height: 66px;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 10px 12px;
}

.invoice-method-logo {
    width: 42px;
    height: 38px;
    padding: 6px;
}

.invoice-awaiting-payment,
.invoice-overdue-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 23%, #dce6f1);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

.invoice-awaiting-payment > svg,
.invoice-overdue-notice > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--primary);
}

.invoice-awaiting-payment strong,
.invoice-overdue-notice strong {
    display: block;
    color: #172033;
    font-size: 12px;
}

.invoice-awaiting-payment p,
.invoice-overdue-notice p {
    margin: 3px 0 0;
    color: #60708a;
    font-size: 11px;
}

.invoice-overdue-notice {
    border-color: #ffd3d7;
    background: #fff7f7;
}

.invoice-overdue-notice > svg,
.invoice-overdue-notice strong {
    color: #bd2331;
}

.invoice-payment-summary {
    padding: 22px;
}

.invoice-summary-identity {
    display: grid;
    gap: 4px;
    padding: 16px 0 2px;
    border-top: 1px solid #dfe7f1;
}

.invoice-summary-identity strong {
    color: #172033;
    font-size: 13px;
    font-weight: 900;
}

.invoice-summary-identity span {
    color: #6a7990;
    font-size: 11px;
}

.invoice-summary-service {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}

.invoice-summary-service > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.invoice-summary-service > span svg {
    width: 23px;
    height: 23px;
}

.invoice-summary-service strong,
.invoice-summary-service small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-summary-service strong {
    color: #172033;
    font-size: 13px;
}

.invoice-summary-service small {
    margin-top: 4px;
    color: #6a7990;
    font-size: 11px;
}

.invoice-payment-summary dl.invoice-summary-breakdown {
    margin: 0;
    padding: 8px 0 14px;
    border-top: 0;
    border-bottom: 1px solid var(--payment-line);
}

.invoice-payment-summary dl.invoice-summary-breakdown > div {
    padding: 7px 0;
    border: 0;
}

.invoice-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
}

.invoice-summary-total small {
    color: #172033;
    font-size: 13px;
}

.invoice-summary-total strong {
    font-size: 22px;
}

.invoice-summary-total strong.danger {
    color: #bd1e2d;
}

.invoice-summary-due {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 13px;
    color: #39506f;
    border: 1px solid #dce6f1;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 800;
}

.invoice-summary-due.danger {
    color: #b9202d;
    border-color: #ffd2d6;
    background: #fff4f5;
}

.invoice-summary-due svg {
    width: 17px;
    height: 17px;
}

.invoice-summary-pay {
    margin-bottom: 9px;
}

.invoice-secure-note > span strong {
    color: #25334a;
}

.invoice-support-band {
    min-height: 72px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 18px;
    border: 1px solid var(--payment-line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
}

.invoice-support-band > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: var(--primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.invoice-support-band > span svg {
    width: 21px;
    height: 21px;
}

.invoice-support-band strong {
    color: #172033;
    font-size: 12px;
}

.invoice-support-band p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
}

.invoice-support-band .btn svg {
    width: 14px;
    height: 14px;
    transform: rotate(-90deg);
}

.invoice-payment-sidebar {
    min-width: 0;
}

.invoice-payment-sidebar .invoice-support-band {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px 14px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(22, 48, 82, .055);
}

.invoice-payment-sidebar .invoice-support-band .btn {
    width: max-content;
    min-height: 34px;
    grid-column: auto;
    justify-self: end;
    justify-content: center;
    gap: 6px;
    padding-inline: 11px;
    border-radius: 7px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-primary) 16%, transparent);
    font-size: 11px;
}

.invoice-payment-sidebar .invoice-support-band > span {
    width: 38px;
    height: 38px;
}

.invoice-payment-sidebar .invoice-support-band strong,
.invoice-payment-sidebar .invoice-support-band p {
    white-space: nowrap;
}

.checkout-client-return {
    grid-column: 1 / -1;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.checkout-payment-page .checkout-client-return .invoice-back-link {
    margin: 0;
}

.catalog-checkout-screen .checkout-payment-page .invoice-payment-sidebar {
    position: sticky;
    top: 88px;
    align-self: start;
}

.catalog-checkout-screen .checkout-payment-page .invoice-payment-sidebar .invoice-payment-summary {
    position: static;
}

.catalog-checkout-screen .checkout-payment-page.catalog-page {
    width: min(1240px, calc(100% - 32px));
}

.catalog-order-screen .catalog-order-page.catalog-page,
.catalog-checkout-screen .checkout-payment-page.catalog-page {
    padding-top: 44px;
}

@media (max-width: 1060px) {
    .catalog-checkout-screen .checkout-payment-page .invoice-payment-sidebar {
        position: static;
    }
}

@media (max-width: 760px) {
    .catalog-order-screen .catalog-order-page.catalog-page,
    .catalog-checkout-screen .checkout-payment-page.catalog-page {
        padding-top: 26px;
    }
}

@media (max-width: 1060px) {
    .invoice-payment-layout {
        grid-template-columns: 1fr;
    }

    .invoice-payment-summary {
        position: static;
    }
}

@media (max-width: 1300px) and (min-width: 1061px) {
    .invoice-payment-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-payment-facts > div:nth-child(3) {
        border-left: 0;
    }

    .invoice-payment-facts > div:nth-child(n+3) {
        border-top: 1px solid var(--payment-line);
    }
}

@media (max-width: 760px) {
    .invoice-payment-heading {
        min-height: 0;
        padding: 20px;
    }

    .invoice-payment-heading h2 {
        font-size: 20px;
    }

    .invoice-payment-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-payment-facts > div:nth-child(3) {
        border-left: 0;
    }

    .invoice-payment-facts > div:nth-child(n+3) {
        border-top: 1px solid var(--payment-line);
    }

    .invoice-methods-card {
        padding: 18px;
    }

    .invoice-method-grid {
        grid-template-columns: 1fr;
    }

    .invoice-methods-empty {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .invoice-methods-empty .btn {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 1180px) {
    .client-email-overview {
        grid-template-columns: 1fr;
    }

    .client-email-list {
        grid-template-columns: 1fr;
    }

    .client-email-column + .client-email-column {
        border-top: 0;
    }

    .invoice-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-overview article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e6edf5;
    }

    .invoice-overview article:nth-child(4) {
        border-top: 1px solid #e6edf5;
    }

    .invoice-list-head {
        display: none;
    }

    .invoice-ledger-item > a {
        grid-template-columns: 105px minmax(220px, 1fr) 140px 110px 38px;
    }

    .admin-invoice-ledger-item > a {
        grid-template-columns: 105px minmax(190px, 1fr) minmax(190px, 1fr) 110px 38px;
    }

    .profile-invoice-ledger-item > a {
        grid-template-columns: 105px minmax(220px, 1fr) 140px 110px 38px;
    }

    .admin-invoice-edit-grid {
        grid-template-columns: 1fr;
    }

    .invoice-ledger-item > a .invoice-date {
        display: none;
    }
}

@media (max-width: 760px) {
    .client-email-overview {
        gap: 12px;
    }

    .client-email-overview article,
    .client-email-support {
        min-height: 86px;
        padding: 16px;
    }

    .client-email-support {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .client-email-support > svg {
        display: none;
    }

    .invoice-overview {
        grid-template-columns: 1fr;
    }

    .invoice-overview article,
    .invoice-overview article:nth-child(2),
    .invoice-overview article:nth-child(3),
    .invoice-overview article:nth-child(4) {
        min-height: 88px;
        border-top: 1px solid #e6edf5;
        border-left: 0;
    }

    .invoice-overview article:first-child {
        border-top: 0;
    }

    .invoice-ledger-header {
        align-items: flex-start;
        padding: 18px;
    }

    .invoice-filters {
        padding: 0 18px 12px;
    }

    .invoice-ledger-item > a {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 16px 18px;
    }

    .admin-invoice-ledger-item > a {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 16px 18px 16px 58px;
    }

    .admin-invoice-select {
        top: 18px;
        left: 18px;
        transform: none;
    }

    .profile-invoice-ledger-item > a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .admin-invoice-form-grid {
        padding: 18px;
    }

    .invoice-client-flow-card {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-client-flow-card > span {
        width: 38px;
        height: 38px;
    }

    .invoice-client-flow-card .btn {
        width: 100%;
    }

    .admin-invoice-actions dl {
        padding-inline: 18px;
    }

    .admin-invoice-actions form,
    .admin-invoice-actions > .btn {
        margin-inline: 18px;
    }

    .invoice-ledger-item > a .invoice-number,
    .invoice-ledger-item > a .invoice-date {
        display: none;
    }

    .invoice-ledger-item > a .invoice-service {
        grid-column: 1;
    }

    .invoice-ledger-item > a > span:nth-child(4) {
        grid-column: 1;
    }

    .invoice-ledger-item > a .invoice-amount {
        grid-column: 1;
    }

    .invoice-expand {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .invoice-detail-strip {
        grid-template-columns: 1fr;
        padding: 16px 18px 18px;
    }

    .invoice-detail-actions {
        justify-content: stretch;
    }

    .invoice-detail-actions .btn {
        flex: 1;
    }
}

.client-main .client-profile-menu .user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 14px;
}

.client-main .client-profile-menu .user-details strong {
    font-size: 14px;
    line-height: 1.15;
}

.client-main .client-profile-menu .user-details small {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.15;
}

.client-main .client-topbar-actions {
    gap: 9px;
}

.client-main .notification-action {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-color: var(--dashboard-line, #dfe6f1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.client-main .client-profile-menu {
    min-width: 208px;
    height: auto;
    min-height: 48px;
    padding: 6px 12px 6px 7px;
    gap: 11px;
    border-color: var(--dashboard-line, #dfe6f1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.client-main .client-profile-menu > svg:last-child {
    display: block;
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: #23324c;
    transition: transform .18s ease;
}

.client-main .client-profile-menu .user-details {
    min-width: 0;
}

.client-main .client-profile-menu .user-details strong,
.client-main .client-profile-menu .user-details small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-main .client-profile-menu .user-details strong {
    color: #172033;
    font-size: 13px;
    font-weight: 750;
    line-height: normal;
}

.client-main .client-profile-menu .user-details small {
    margin-top: 2px;
    color: var(--dashboard-muted, #68758a);
    font-size: 10px;
    font-weight: 600;
    line-height: normal;
}

.client-main .client-topbar {
    margin-bottom: 30px;
}

.client-main .page-heading h1 {
    color: #0b1324;
    font-size: 32px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
}

.client-main .page-heading p {
    margin: 10px 0 0;
    color: #40506b;
    font-weight: 650;
}

.client-main .client-account-dropdown {
    border: 1px solid #dbe5f1;
    outline: 0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}

.client-main .client-profile-menu:focus {
    outline: 0;
}

.client-main .client-profile-menu:focus-visible,
.client-main .notification-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-primary) 14%, transparent);
    outline-offset: 2px;
}

/* Compact service and billing cards */
.client-featured-service,
.next-billing-card {
    min-height: 238px;
}

.client-featured-service {
    display: flex;
    flex-direction: column;
}

.client-featured-service .client-section-header,
.next-billing-card .client-section-header {
    min-height: 52px;
    padding-top: 16px;
    padding-bottom: 8px;
}

.client-featured-service .client-section-header h2,
.next-billing-card .client-section-header h2 {
    font-size: 17px;
    font-weight: 800;
}

.client-dashboard-panel-empty {
    padding: 18px 24px 24px;
}

.featured-service-card {
    margin: 0 20px 20px;
}

.featured-service-head {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 78px;
    padding: 10px 16px;
}

.featured-service-icon {
    width: 68px;
    height: 64px;
}

.featured-service-icon svg {
    width: 26px;
    height: 26px;
}

.featured-service-head h3 {
    color: #101827;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.18;
}

.featured-service-head p {
    margin-top: 5px;
    color: #40506b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.featured-service-head div > span {
    margin-top: 3px;
    color: #6b7890;
    font-size: 11px;
    font-weight: 650;
}

.featured-service-meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, auto);
    gap: 14px;
    padding: 12px 18px;
}

.featured-service-meta > div {
    gap: 4px;
}

.featured-service-meta span {
    font-size: 11px;
    font-weight: 650;
}

.featured-service-meta strong {
    font-size: 14px;
    font-weight: 800;
}

.featured-service-meta .btn {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 13px;
}

.next-billing-card {
    padding-bottom: 20px;
}

.next-billing-content {
    grid-template-columns: 56px minmax(0, 1fr) 60px;
    gap: 14px;
    padding: 8px 20px 14px;
}

.next-billing-content time {
    width: 56px;
    height: 58px;
}

.next-billing-content time strong {
    font-size: 21px;
    font-weight: 800;
}

@media (max-width: 640px) {
    .sidebar-collapse-toggle {
        display: none !important;
    }

    .app-layout.sidebar-collapsed {
        grid-template-columns: 1fr !important;
    }

    .client-dashboard .client-summary-grid,
    .client-metric-grid {
        grid-template-columns: 1fr;
    }

    .client-featured-service {
        min-height: auto;
    }

    .client-featured-service .client-section-header {
        min-height: 50px;
        padding: 14px 18px 8px;
        gap: 10px;
    }

    .client-featured-service .client-section-header h2 {
        font-size: 16px;
    }

    .client-dashboard-panel-empty {
        padding: 16px 18px 20px;
    }

    .client-featured-service .client-panel-link {
        font-size: 12px;
        white-space: nowrap;
    }

    .featured-service-card {
        margin: 0 18px 18px;
    }

    .featured-service-head {
        grid-template-columns: 56px minmax(0, 1fr) auto !important;
        gap: 12px;
        min-height: 74px;
        padding: 10px 14px;
    }

    .featured-service-icon {
        width: 56px;
        height: 56px;
    }

    .featured-service-icon svg {
        width: 22px;
        height: 22px;
    }

    .featured-service-head h3 {
        font-size: 16px;
    }

    .featured-service-head p {
        font-size: 12px;
    }

    .featured-service-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        padding: 12px 14px 14px;
    }

    .featured-service-meta > div {
        min-width: 0;
        align-content: start;
    }

    .featured-service-meta span {
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 26px;
        font-size: 10px;
        line-height: 1.12;
    }

    .featured-service-meta strong {
        display: block;
        font-size: 13px;
        line-height: 1.15;
        word-break: keep-all;
    }

    .featured-service-meta .btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 40px;
        margin-top: 2px;
        font-size: 13px;
        white-space: nowrap;
    }
}

.next-billing-content time span {
    margin-top: -8px;
    font-size: 10px;
    font-weight: 800;
}

.next-billing-content div strong {
    color: #172033;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.next-billing-content div span {
    margin-top: 4px;
    color: #40506b;
    font-size: 12px;
    font-weight: 650;
}

.billing-illustration {
    width: 58px;
    height: 58px;
}

.billing-illustration svg {
    width: 30px;
    height: 30px;
}

.next-billing-value {
    gap: 10px;
    padding: 0 20px 18px;
}

.next-billing-value strong {
    font-size: 18px;
    font-weight: 800;
}

.next-billing-value span {
    color: #65758f;
    font-size: 13px;
    font-weight: 650;
}

.next-billing-card .btn {
    width: calc(100% - 40px);
    min-height: 38px;
    margin: 0 20px;
    font-size: 13px;
}

/* Compact lateral notifications override the earlier in-flow alert layout. */
.toast-stack {
    position: fixed;
    top: 108px;
    right: 22px;
    z-index: 9999;
    width: min(390px, calc(100vw - 32px));
    margin: 0;
    pointer-events: none;
}

.toast-stack .alert,
.toast-stack .success-alert,
.toast-stack .warning-alert,
.toast-stack .error-alert {
    width: 100%;
    min-height: 68px;
    gap: 12px;
    padding: 11px 44px 11px 13px;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
    pointer-events: auto;
}

.toast-stack .alert::before,
.toast-stack .success-alert::before,
.toast-stack .warning-alert::before,
.toast-stack .error-alert::before {
    width: 38px;
    height: 38px;
    box-shadow: none;
    font-size: 13px;
}

.toast-stack .toast-message {
    gap: 2px;
}

.toast-stack .toast-message strong {
    font-size: 12px;
    line-height: 1.35;
}

.toast-stack .toast-message small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.toast-stack .toast-close {
    right: 8px;
    width: 27px;
    height: 27px;
}

@media (max-width: 640px) {
    .toast-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
        margin: 0;
    }

    .main-content .toast-stack .alert,
    .main-content .toast-stack .success-alert,
    .main-content .toast-stack .warning-alert,
    .main-content .toast-stack .error-alert {
        min-height: 64px;
        padding: 10px 42px 10px 12px;
    }
}

.smtp-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 18px;
}

.smtp-settings-panel,
.smtp-test-panel {
    padding: 0;
    overflow: hidden;
}

.smtp-settings-form {
    display: grid;
}

.smtp-master-toggle {
    margin: 18px 20px 6px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 8px;
    background: var(--brand-primary-subtle);
}

.smtp-config-section {
    display: grid;
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 20px;
    border-top: 1px solid #e7edf6;
}

.smtp-config-section > header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.smtp-config-section > header > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.smtp-config-section > header svg {
    width: 17px;
    height: 17px;
}

.smtp-config-section h3 {
    margin: 1px 0 0;
    color: #172033;
    font-size: 14px;
}

.smtp-config-section header p {
    margin: 4px 0 0;
    color: #71819b;
    font-size: 11px;
    line-height: 1.45;
}

.email-mailer-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.email-mailer-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    min-height: 76px;
    padding: 14px;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.email-mailer-option input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--brand-primary);
    flex: 0 0 auto;
}

.email-mailer-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-subtle);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.email-mailer-option span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.email-mailer-option strong {
    color: #172033;
    font-size: 13px;
}

.email-mailer-option small {
    color: #667892;
    font-size: 11px;
    line-height: 1.4;
}

.smtp-connection-grid,
.smtp-auth-grid,
.smtp-sender-grid {
    display: grid;
    gap: 13px;
}

.smtp-connection-grid {
    grid-template-columns: minmax(0, 1.15fr) 78px minmax(0, 1fr);
}

.smtp-auth-grid,
.smtp-sender-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.smtp-config-section select {
    width: 100%;
    min-height: 46px;
    padding: 0 11px;
    border: 1px solid #d7e1ee;
    border-radius: 7px;
    color: #0f172a;
    background: #fff;
    font-family: var(--asv-font-family);
}

.smtp-config-section .field-group {
    min-width: 0;
}

.smtp-config-section input,
.smtp-config-section select {
    min-width: 0;
}

.smtp-certificate-toggle {
    grid-column: 2;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
}

.smtp-settings-actions {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 14px 20px;
    border-top: 1px solid #e7edf6;
    background: #fbfcfe;
}

.smtp-settings-actions > span {
    margin-right: auto;
    color: #71819b;
    font-size: 11px;
}

.smtp-test-panel {
    position: sticky;
    top: 16px;
}

.smtp-test-panel > header {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e7edf6;
}

.smtp-test-panel > header > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.smtp-test-panel > header svg {
    width: 19px;
    height: 19px;
}

.smtp-test-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.smtp-test-panel header p {
    margin: 4px 0 0;
    color: #71819b;
    font-size: 11px;
    line-height: 1.4;
}

.smtp-test-summary {
    display: grid;
    padding: 8px 18px;
}

.smtp-test-summary > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border-bottom: 1px solid #edf1f6;
}

.smtp-test-summary > div:last-child {
    border-bottom: 0;
}

.smtp-test-summary span {
    color: #8290a5;
    font-size: 10px;
    font-weight: 700;
}

.smtp-test-summary strong {
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smtp-delivery-test-form {
    display: grid;
    gap: 12px;
    padding: 17px 18px;
    border-top: 1px solid #e7edf6;
    background: #f8fafc;
}

.smtp-delivery-test-form .btn {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.smtp-delivery-test-form .btn svg {
    width: 16px;
    height: 16px;
}

.smtp-test-panel > footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 18px;
    color: #71819b;
    font-size: 11px;
    line-height: 1.45;
}

.smtp-test-panel > footer svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

@media (max-width: 1220px) {
    .smtp-workspace {
        grid-template-columns: 1fr;
    }

    .smtp-test-panel {
        position: static;
    }

    .smtp-test-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .smtp-test-summary > div {
        grid-template-columns: 1fr;
        align-content: center;
        gap: 4px;
        border-right: 1px solid #edf1f6;
        border-bottom: 0;
    }

    .smtp-test-summary > div:last-child {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .smtp-config-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 16px;
    }

    .email-mailer-options,
    .smtp-connection-grid,
    .smtp-auth-grid,
    .smtp-sender-grid,
    .smtp-test-summary {
        grid-template-columns: 1fr;
    }

    .smtp-certificate-toggle {
        grid-column: 1;
    }

    .smtp-test-summary > div {
        border-right: 0;
        border-bottom: 1px solid #edf1f6;
    }

    .smtp-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .smtp-settings-actions .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .admin-clients .client-directory-actions {
        grid-template-columns: 1fr;
    }

    .admin-clients .client-directory-summary {
        width: 100%;
    }

    .admin-clients .client-directory-summary > span {
        min-width: 0;
        flex: 1;
    }

    .admin-clients .client-table tbody td,
    .admin-clients .client-table tbody td:nth-child(n) {
        height: auto;
        min-height: 36px;
        padding: 8px 0;
    }

    .admin-clients .client-table tbody td:first-child {
        min-height: 56px;
        align-items: center;
    }

    .admin-clients .client-count,
    .admin-clients .client-date {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .admin-clients .client-row-action-cell {
        min-height: 48px;
    }
}

/* Checkout purchase composition must win over the legacy invoice workspace. */
@media (min-width: 981px) {
    .catalog-checkout-screen .checkout-payment-page .invoice-payment-layout {
        grid-template-columns: minmax(0, 1fr) 348px;
        gap: 22px;
    }
}

.catalog-checkout-screen .checkout-payment-page .invoice-methods-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.catalog-checkout-screen .checkout-payment-page .invoice-payment-summary {
    align-self: start;
    position: static;
}

.catalog-checkout-screen .checkout-payment-page .invoice-payment-sidebar {
    position: static;
}

/* Compact client services and service workspace */
.client-services-page .services-collection-header {
    min-height: 36px;
    padding: 0 2px 10px;
    border-bottom: 0;
}

.client-services-page .services-collection-header h2 {
    margin: 0;
    color: #42516a;
    font-size: 13px;
    font-weight: 750;
}

.client-services-page .services-collection-header > span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #dce5f0;
    border-radius: 6px;
    color: #65738a;
    background: #fff;
    font-size: 10px;
    font-weight: 750;
}

.client-services-page .services-list {
    gap: 10px;
    padding: 0;
}

.client-services-page .service-card-layout {
    display: grid;
    grid-template-columns: minmax(250px, .78fr) minmax(520px, 1.7fr) 176px;
    align-items: stretch;
}

.client-services-page .service-card-identity {
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: center;
    gap: 14px;
    padding: 20px 21px 20px 23px;
    border-right: 1px solid #e3eaf3;
    background: color-mix(in srgb, var(--primary, #1768e5) 2%, #fff);
}

.client-services-page .service-card-icon {
    width: 48px;
    height: 48px;
}

.client-services-page .service-card-identity h3 {
    font-size: 16px;
}

.client-services-page .service-card-title-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.client-services-page .service-card-title-line h3 {
    min-width: 0;
}

.client-services-page .service-card-title-line .status {
    flex: 0 0 auto;
}

.client-services-page .service-card-tools {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px;
    border-left: 1px solid #e3eaf3;
    background: #fbfcfe;
}

.client-services-page .service-card-tools .btn {
    min-height: 34px;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    font-size: 11px;
}

.client-services-page .service-card-tools .btn.primary {
    min-width: 0;
}

.client-services-page .service-card-tools .btn svg {
    width: 15px;
    height: 15px;
}

.client-services-page .service-card-tools .btn.primary svg {
    transform: rotate(-90deg);
}

.client-services-page .service-card-facts {
    margin: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background: #fbfcfe;
}

.client-services-page .service-card-facts > div {
    min-height: 104px;
    padding: 17px 18px;
}

.client-services-page .service-card-actions {
    min-height: 50px;
    padding: 7px 16px 7px 19px;
}

.client-services-page .service-health b {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    background: #dbe4ef;
}

.client-services-page .service-card-actions .btn.primary {
    min-width: 150px;
}

.client-services-page .service-card-actions .btn.primary svg {
    transform: rotate(-90deg);
}

.service-manage-page {
    padding: 30px clamp(24px, 3vw, 46px) 48px;
    background: #f3f6fa;
}

.service-manage-back {
    width: max-content;
    margin: -8px 0 16px;
}

.service-manage-hero {
    min-height: 94px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px 22px;
    border: 1px solid #dbe5f1;
    border-bottom: 3px solid var(--primary, #1768e5);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(17, 38, 73, .06);
}

.service-manage-hero .service-card-icon {
    width: 54px;
    height: 54px;
}

.service-manage-hero h2 {
    margin: 0;
    color: #101828;
    font-size: 21px;
    line-height: 1.25;
}

.service-manage-hero p {
    margin: 5px 0 0;
    color: #71809a;
    font-size: 11px;
}

.service-manage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 18px;
}

.service-manage-main,
.service-manage-side {
    display: grid;
    gap: 16px;
}

.service-side-icon {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 7px;
    color: var(--primary, #1768e5);
    background: #eaf2ff;
}

.service-side-icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 980px) {
    .service-manage-grid {
        grid-template-columns: 1fr;
    }

    .service-manage-side {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1120px) {
    .client-services-page .service-card-layout {
        grid-template-columns: minmax(0, 1fr) 176px;
    }

    .client-services-page .service-card-identity {
        border-right: 0;
    }

    .client-services-page .service-card-facts {
        grid-column: 1 / -1;
        grid-row: 2;
        border-top: 1px solid #e5ebf3;
    }

    .client-services-page .service-card-facts > div {
        min-height: 72px;
        padding: 11px 16px;
    }

    .client-services-page .service-card-tools {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 720px) {
    .client-services-page .service-card-layout {
        grid-template-columns: 1fr;
    }

    .client-services-page .service-card-identity {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        padding: 16px 16px 15px 18px;
    }

    .client-services-page .service-card-icon {
        width: 42px;
        height: 42px;
    }

    .client-services-page .service-card-tools {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: 1fr;
        padding: 12px 14px 13px 17px;
        border-top: 1px solid #e5ebf3;
        border-left: 0;
    }

    .client-services-page .service-card-tools .btn {
        width: 100%;
    }

    .client-services-page .service-card-facts {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
    }

    .client-services-page .service-card-actions .service-health b,
    .client-services-page .service-card-actions .service-health span:last-child {
        display: none;
    }

    .client-services-page .service-card-actions .btn.primary {
        min-width: 0;
    }

    .service-manage-page {
        padding: 22px 16px 96px;
    }

    .service-manage-hero {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 16px;
    }

    .service-manage-hero .service-card-icon {
        width: 48px;
        height: 48px;
    }

    .service-manage-hero > .status {
        grid-column: 2;
        justify-self: start;
    }

    .service-manage-side {
        grid-template-columns: 1fr;
    }

}

/* Client service operations */
.service-hero-copy { min-width: 0; }
.service-hero-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--primary, #1768e5);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}
.service-hero-state { display: grid; justify-items: end; gap: 5px; }
.service-hero-state small { color: #8a98ad; font-size: 9px; }
.runtime-status { display: inline-flex; align-items: center; gap: 7px; color: #58677e; font-size: 11px; font-weight: 750; }
.runtime-status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #98a2b3; box-shadow: 0 0 0 3px #eef1f5; }
.runtime-status.is-online { color: #087a45; }
.runtime-status.is-online i { background: #18ad67; box-shadow: 0 0 0 3px #dff8eb; }
.runtime-status.is-installing,
.runtime-status.is-starting,
.runtime-status.is-stopping { color: #9a5b08; }
.runtime-status.is-installing i,
.runtime-status.is-starting i,
.runtime-status.is-stopping i { background: #e79518; box-shadow: 0 0 0 3px #fff1d7; }
.runtime-status.is-error { color: #b42336; }
.runtime-status.is-error i { background: #df354d; box-shadow: 0 0 0 3px #ffe3e7; }
.service-command-panel { margin: 0; overflow: hidden; border-color: #d7e2ef; border-top: 3px solid var(--primary, #1768e5); border-radius: 8px; box-shadow: 0 16px 38px rgba(17, 38, 73, .07); }
.service-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 24px 20px; }
.service-section-heading > div { min-width: 0; }
.service-control-title { display: flex; align-items: center; gap: 13px; }
.service-control-mark { width: 50px; height: 50px; display: grid; flex: 0 0 50px; place-items: center; border-radius: 8px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 9%, #fff); }
.service-control-mark svg { width: 27px; height: 27px; }
.service-section-kicker { display: block; margin-bottom: 3px; color: var(--primary, #1768e5); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.service-section-heading h2 { margin: 0; color: #101828; font-size: 23px; font-weight: 800; line-height: 1.2; }
.service-server-name-line { display: flex; min-width: 0; align-items: center; gap: 8px; }
.service-server-name-line h2 { min-width: 0; overflow-wrap: anywhere; }
.service-name-edit { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; padding: 0; border: 1px solid #d7e1ee; border-radius: 6px; color: #58677e; background: #fff; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.service-name-edit:hover { border-color: var(--primary, #1768e5); color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 5%, #fff); }
.service-name-edit:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 16%, transparent); outline-offset: 2px; }
.service-name-edit svg { width: 15px; height: 15px; }
.service-section-heading p { margin: 5px 0 0; color: #71809a; font-size: 11px; line-height: 1.5; }
.service-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.service-heading-actions form { margin: 0; }
.service-module-label { flex: 0 0 auto; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--primary, #1768e5) 18%, #d9e4f2); border-radius: 6px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 4%, #fff); font-size: 9px; font-weight: 800; }
.service-panel-link { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid var(--primary, #1768e5); border-radius: 7px; color: #fff; background: var(--primary, #1768e5); font-family: var(--asv-font-family); font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary, #1768e5) 16%, transparent); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.service-panel-link svg { width: 15px; height: 15px; }
.service-panel-link:hover { background: var(--primary-dark, #1258c7); box-shadow: 0 9px 18px color-mix(in srgb, var(--primary, #1768e5) 22%, transparent); transform: translateY(-1px); }
.service-panel-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 18%, transparent); outline-offset: 2px; }
.service-command-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 24px 24px; }
.service-command-bar form { min-width: 0; margin: 0; }
.service-command { width: 100%; min-width: 0; min-height: 76px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #d7e1ee; border-radius: 8px; color: #344054; background: #fff; font-family: var(--asv-font-family); text-align: left; cursor: pointer; box-shadow: 0 5px 14px rgba(17, 38, 73, .035); transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.service-command-icon { width: 40px; height: 40px; display: grid; flex: 0 0 40px; place-items: center; border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 8%, #fff); }
.service-command-icon svg { width: 18px; height: 18px; }
.service-command-copy { min-width: 0; display: grid; gap: 4px; }
.service-command-copy strong { font-size: 12px; line-height: 1.15; }
.service-command-copy small { color: #7b899e; font-size: 9px; font-weight: 650; line-height: 1.25; }
.service-command:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary, #1768e5) 52%, #d7e1ee); color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 2%, #fff); box-shadow: 0 10px 22px rgba(17, 38, 73, .08); transform: translateY(-2px); }
.service-command.is-primary { border-color: var(--primary, #1768e5); color: #fff; background: var(--primary, #1768e5); box-shadow: 0 9px 20px color-mix(in srgb, var(--primary, #1768e5) 20%, transparent); }
.service-command.is-primary .service-command-icon { color: #fff; background: rgba(255, 255, 255, .15); }
.service-command.is-primary .service-command-copy small { color: rgba(255, 255, 255, .76); }
.service-command.is-primary:hover:not(:disabled) { color: #fff; background: var(--primary-dark, #1258c7); }
.service-command:disabled { color: #aab3c1; border-color: #e2e7ee; background: #f5f7fa; cursor: not-allowed; box-shadow: none; opacity: 1; }
.service-command:disabled .service-command-icon { color: #aab3c1; background: #e9edf2; }
.service-command:disabled .service-command-copy small { color: #aab3c1; }
.service-command.is-loading .service-command-icon svg { animation: service-command-pulse .8s ease-in-out infinite alternate; }
.service-command.is-loading .service-command-copy small { color: inherit; opacity: .72; }
@keyframes service-command-pulse { to { opacity: .35; transform: scale(.86); } }
.service-runtime-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 20px 24px 22px; border-top: 1px solid #e5ebf3; background: #fbfcfe; }
.service-runtime-grid > div { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 11px; padding: 6px 18px; border-right: 1px solid #e1e8f1; }
.service-runtime-grid > div:first-child { padding-left: 0; }
.service-runtime-grid > div:last-child { padding-right: 0; border-right: 0; }
.service-runtime-icon { width: 38px; height: 38px; display: grid; grid-row: 1 / 3; align-self: center; place-items: center; border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 8%, #fff); }
.service-runtime-icon svg { width: 17px; height: 17px; }
.service-runtime-grid dt { align-self: end; margin: 0 0 4px; color: #7b899e; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.service-runtime-grid dd { align-self: start; margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 12px; font-weight: 800; }
.service-controls-unavailable { display: flex; align-items: center; gap: 13px; margin: 0 20px 20px; padding: 16px; border: 1px solid #e1e8f1; border-radius: 7px; background: #f8fafc; }
.service-controls-unavailable > svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--primary, #1768e5); }
.service-controls-unavailable strong { display: block; margin-bottom: 3px; color: #172033; font-size: 12px; }
.service-controls-unavailable p { margin: 0; color: #71809a; font-size: 10px; line-height: 1.5; }
.service-access-panel,
.service-connection-panel { margin: 0; padding: 22px; border-color: #d7e2ef; border-radius: 8px; box-shadow: 0 14px 32px rgba(17, 38, 73, .06); }
.service-side-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.service-side-heading .service-side-icon { width: 42px; height: 42px; flex-basis: 42px; }
.service-side-heading .service-side-icon svg { width: 19px; height: 19px; }
.service-access-panel h2,
.service-connection-panel h2 { margin: 0; color: #101828; font-size: 16px; line-height: 1.3; }
.service-access-panel p { margin: 0 0 18px; color: #71809a; font-size: 10px; line-height: 1.6; }
.service-access-panel form { margin: 0; }
.service-access-panel .btn { min-height: 46px; justify-content: center; gap: 9px; font-size: 11px; }
.service-access-panel .btn + .btn,
.service-access-panel form + .btn { margin-top: 8px; }
.service-access-panel .btn svg { width: 16px; height: 16px; }
.service-connection-panel dl { display: grid; margin: 4px 0 0; }
.service-connection-panel dl div { min-width: 0; display: grid; gap: 5px; padding: 11px 0; border-bottom: 1px solid #e6ecf3; }
.service-connection-panel dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.service-connection-panel dt { color: #7b899e; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.service-connection-panel dd { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 11px; font-weight: 750; }
.service-connection-panel .service-access-password { gap: 7px; }
.service-secret-control { display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px; gap: 6px; }
.service-secret-control input { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #d3deeb; border-radius: 6px; outline: 0; color: #172033; background: #f8fafc; font-family: var(--asv-font-family); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.service-secret-control input:focus { border-color: var(--primary, #1768e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1768e5) 12%, transparent); }
.service-secret-control button { width: 32px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid #d3deeb; border-radius: 6px; color: #58677e; background: #fff; cursor: pointer; }
.service-secret-control button:hover { border-color: var(--primary, #1768e5); color: var(--primary, #1768e5); background: #f7faff; }
.service-secret-control button svg { width: 14px; height: 14px; }
.service-secret-control button .is-hiding { display: none; }
.service-secret-control button.is-visible .is-showing { display: none; }
.service-secret-control button.is-visible .is-hiding { display: inline-flex; }
.service-secret-unavailable { display: block; color: #71809a; font-size: 9px; font-weight: 600; line-height: 1.45; }
.service-password-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 28px 70px rgba(8, 21, 43, .24); }
.service-password-dialog::backdrop { background: rgba(7, 17, 34, .58); backdrop-filter: blur(3px); }
.service-password-dialog form { margin: 0; }
.service-password-dialog header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #e4eaf2; }
.service-password-dialog header > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: var(--primary, #1768e5); background: #eaf2ff; }
.service-password-dialog header > span svg { width: 18px; height: 18px; }
.service-password-dialog h2 { margin: 0; color: #101828; font-size: 15px; }
.service-password-dialog header p { margin: 3px 0 0; color: #71809a; font-size: 10px; }
.service-password-confirmation { margin: 0; color: #53657f; font-size: 12px; line-height: 1.55; }
.vps-reinstall-dialog { width: min(720px, calc(100vw - 32px)); }
.vps-reinstall-body { display: grid; gap: 18px; padding: 18px 20px; }
.vps-reinstall-body section { display: grid; gap: 10px; }
.vps-reinstall-body h3 { color: #17233a; font-size: 12px; margin: 0; }
.vps-reinstall-systems { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 250px; overflow: auto; padding: 2px; }
.vps-reinstall-systems label,
.vps-reinstall-password label { cursor: pointer; position: relative; }
.vps-reinstall-systems input,
.vps-reinstall-password input { opacity: 0; pointer-events: none; position: absolute; }
.vps-reinstall-systems label > span,
.vps-reinstall-password label > span { align-items: center; border: 1px solid #d8e2ef; border-radius: 7px; display: grid; gap: 3px 10px; min-height: 64px; padding: 10px 12px; }
.vps-reinstall-systems label > span { grid-template-columns: 34px minmax(0, 1fr); }
.vps-reinstall-systems img { grid-row: 1 / 3; height: 26px; max-width: 26px; object-fit: contain; width: 26px; }
.vps-reinstall-systems b,
.vps-reinstall-password b { color: #142039; font-size: 11px; }
.vps-reinstall-systems small,
.vps-reinstall-password small,
.vps-reinstall-confirm small { color: #73829a; font-size: 9px; line-height: 1.4; }
.vps-reinstall-systems input:checked + span,
.vps-reinstall-password input:checked + span { background: #f1f6ff; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(23, 104, 229, .08); }
.vps-reinstall-password { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vps-reinstall-password label > span { grid-template-columns: 30px minmax(0, 1fr); }
.vps-reinstall-password svg { color: var(--primary); grid-row: 1 / 3; height: 18px; width: 18px; }
.vps-reinstall-password b,
.vps-reinstall-password small { grid-column: 2; min-width: 0; }
.vps-reinstall-password-fields { background: #f8faff; border: 1px solid #d8e2ef; border-radius: 7px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
.vps-reinstall-password-fields[hidden] { display: none; }
.vps-reinstall-password-fields > label { color: #34445f; display: grid; font-size: 10px; font-weight: 700; gap: 6px; }
.vps-reinstall-password-fields .password-field { align-items: stretch; background: #fff; border: 1px solid #cbd8e8; border-radius: 6px; display: flex; min-height: 40px; min-width: 0; overflow: hidden; position: relative; width: 100%; }
.vps-reinstall-password-fields .password-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 104, 229, .08); }
.vps-reinstall-password-fields .password-field input { background: transparent; border: 0; border-radius: 0; flex: 1 1 auto; font-family: var(--asv-font-family); font-size: 11px; min-width: 0; outline: 0; padding: 0 11px; width: 100%; }
.vps-reinstall-password-fields .password-toggle { align-items: center; align-self: stretch; background: #fff; border: 0; border-left: 1px solid #e1e8f1; border-radius: 0; color: #667791; display: inline-flex; flex: 0 0 38px; height: auto; inset: auto; justify-content: center; padding: 0; position: static; width: 38px; }
.vps-reinstall-password-fields .password-toggle svg { height: 15px; width: 15px; }
.vps-reinstall-password-fields .catalog-password-strength { grid-column: 1 / -1; margin: 0; }
.vps-reinstall-confirm { align-items: flex-start; background: #fff7f7; border: 1px solid #f4cccc; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; padding: 12px; }
.vps-reinstall-confirm input { accent-color: #d92d20; margin-top: 2px; }
.vps-reinstall-confirm span { display: grid; gap: 3px; }
.vps-reinstall-confirm b { color: #9f2424; font-size: 11px; }
.service-password-dialog header .icon-action { width: 34px; height: 34px; padding: 0; border: 1px solid #d7e1ee; border-radius: 7px; color: #475467; background: #fff; box-shadow: none; }
.service-password-dialog header .icon-action:hover { border-color: var(--primary, #1768e5); color: var(--primary, #1768e5); background: #f7faff; }
.service-password-dialog header .icon-action svg { width: 15px; height: 15px; }
.service-password-fields { display: grid; gap: 14px; padding: 20px; }
.service-password-fields label { display: grid; gap: 7px; color: #344054; font-size: 10px; font-weight: 750; }
.service-password-fields input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #ccd8e7; border-radius: 7px; color: #101828; background: #fff; font-family: var(--asv-font-family); font-size: 12px; }
.service-password-fields input:focus { border-color: var(--primary, #1768e5); outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 14%, transparent); }
.service-password-fields .field-error { color: #b42336; font-size: 9px; font-weight: 650; }
.service-password-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #e4eaf2; background: #f8fafc; }
.service-password-dialog footer .btn { min-height: 38px; gap: 7px; padding: 0 14px; border-radius: 7px; font-size: 11px; }
.service-password-dialog footer .btn svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
    .service-hero-state { grid-column: 2; justify-items: start; }
    .service-section-heading { align-items: flex-start; padding: 17px 16px 14px; }
    .service-section-heading h2 { font-size: 19px; }
    .service-control-mark { width: 44px; height: 44px; flex-basis: 44px; }
    .service-control-mark svg { width: 23px; height: 23px; }
    .service-module-label { display: none; }
    .service-panel-link { min-height: 34px; padding: 0 11px; }
    .service-command-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px 18px; }
    .service-command-bar form,
    .service-command { width: 100%; min-width: 0; }
    .service-command { min-height: 68px; padding: 10px; gap: 9px; }
    .service-command-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .service-runtime-grid { grid-template-columns: 1fr; padding: 8px 16px; }
    .service-runtime-grid > div,
    .service-runtime-grid > div:first-child,
    .service-runtime-grid > div:last-child { min-height: 70px; padding: 10px 0; border-right: 0; border-bottom: 1px solid #e6ecf3; }
    .service-runtime-grid > div:last-child { border-bottom: 0; }
    .service-controls-unavailable { margin: 0 16px 16px; }
}

@media (max-width: 560px) {
    .service-section-heading { flex-wrap: wrap; }
    .service-heading-actions { width: 100%; padding-left: 57px; }
    .service-panel-link { width: 100%; }
    .service-command-bar { grid-template-columns: 1fr; }
    .service-command { min-height: 70px; padding: 11px 13px; }
    .service-command-icon { width: 38px; height: 38px; flex-basis: 38px; }
}

@media (max-width: 460px) {
    .service-password-dialog footer { display: grid; grid-template-columns: 90px minmax(0, 1fr); }
}

/* Client service management workspace */
.service-manage-heading { display: grid; gap: 0; }
.service-manage-page > .service-manage-back { margin: -10px 0 14px; font-size: 12px; }

/* Painel modular de hospedagem */
.hosting-service-layout { display: grid; gap: 16px; min-width: 0; }
.hosting-service-workspace { padding: 22px; border-top: 3px solid var(--primary, #1768e5); }
.hosting-service-header { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-bottom: 20px; }
.hosting-service-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--primary, #1768e5) 18%, #dce5f1); border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 7%, #fff); }
.hosting-service-mark svg { width: 25px; height: 25px; }
.hosting-service-identity { min-width: 0; display: grid; gap: 5px; }
.hosting-service-identity > small { color: var(--primary, #1768e5); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.hosting-service-identity > span { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hosting-service-identity h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #081229; font-size: 24px; line-height: 1.2; }
.hosting-domain-visit { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #d5e0ed; border-radius: 6px; color: var(--primary, #1768e5); background: #fff; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.hosting-domain-visit:hover { border-color: var(--primary, #1768e5); color: #fff; background: var(--primary, #1768e5); }
.hosting-domain-visit:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 18%, transparent); outline-offset: 2px; }
.hosting-domain-visit svg { width: 13px; height: 13px; }
.hosting-service-identity p { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #60708d; font-size: 13px; }
.hosting-service-identity p b { width: 3px; height: 3px; border-radius: 50%; background: #9eabc0; }
.hosting-runtime-status { min-height: 25px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; color: #087a42; background: #e6f8ed; font-size: 11px; font-style: normal; font-weight: 800; }
.hosting-runtime-status b { width: 6px; height: 6px; border-radius: 50%; background: #20ba68; }
.hosting-runtime-status.is-suspended { color: #a64813; background: #fff2e7; }
.hosting-runtime-status.is-suspended b { background: #ee7b2e; }
.hosting-runtime-status.is-error, .hosting-runtime-status.is-unknown { color: #9e2d37; background: #fdecef; }
.hosting-runtime-status.is-error b, .hosting-runtime-status.is-unknown b { background: #d84b58; }
.hosting-resource-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dbe4f0; border-radius: 7px; overflow: hidden; background: #fbfcfe; }
.hosting-resource-summary article { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-right: 1px solid #e0e7f1; }
.hosting-resource-summary article:last-child { border-right: 0; }
.hosting-resource-summary article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; color: var(--primary, #1768e5); background: #eaf2ff; }
.hosting-resource-summary article > span svg { width: 18px; height: 18px; }
.hosting-resource-summary article > div { min-width: 0; display: grid; gap: 4px; }
.hosting-resource-summary small { color: #687793; font-size: 11px; font-weight: 700; }
.hosting-resource-summary strong { overflow-wrap: anywhere; color: #101a31; font-size: 14px; }
.hosting-resource-summary strong em { color: #75819a; font-size: 11px; font-style: normal; font-weight: 600; }
.hosting-resource-summary i, .hosting-resource-detail dd > i { height: 4px; display: block; overflow: hidden; border-radius: 99px; background: #dce5f1; }
.hosting-resource-summary i b, .hosting-resource-detail dd > i b { height: 100%; display: block; border-radius: inherit; background: var(--primary, #1768e5); }
.hosting-resource-summary mark, .hosting-resource-detail mark { padding: 3px 6px; border-radius: 4px; color: #1768e5; background: #e9f2ff; font-size: 10px; font-weight: 800; }
.hosting-quick-actions { padding: 20px 0; border-bottom: 1px solid #e0e7f1; }
.hosting-quick-actions > header { margin-bottom: 11px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hosting-quick-actions h3, .hosting-detail-grid h3 { margin: 0; color: #101a31; font-size: 15px; }
.hosting-quick-actions > header p, .hosting-detail-grid header p { margin: 0; color: #76839a; font-size: 12px; }
.hosting-quick-actions > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hosting-quick-actions form { min-width: 0; }
.hosting-quick-actions button { width: 100%; min-height: 66px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 10px; border: 1px solid #d9e3f0; border-radius: 7px; color: #12203a; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.hosting-quick-actions button:hover { border-color: color-mix(in srgb, var(--primary, #1768e5) 48%, #d9e3f0); background: #f8fbff; transform: translateY(-1px); }
.hosting-quick-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 18%, transparent); outline-offset: 2px; }
.hosting-quick-actions button > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--primary, #1768e5); background: #eaf2ff; }
.hosting-quick-actions button > span svg { width: 17px; height: 17px; }
.hosting-quick-actions button > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hosting-quick-actions button > small { min-width: 0; overflow: hidden; color: #75829a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hosting-quick-actions button > svg { grid-column: 3; grid-row: 1 / 3; width: 13px; height: 13px; color: #8b99af; }
.hosting-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.hosting-detail-grid > section { min-width: 0; overflow: hidden; border: 1px solid #dce5f0; border-radius: 7px; background: #fff; }
.hosting-service-information { display: flex; flex-direction: column; }
.hosting-detail-grid section > header { min-height: 44px; margin: 0; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #e4eaf2; background: #fbfcfe; }
.hosting-detail-grid section > header h3 { font-size: 14px; }
.hosting-resource-detail dl, .hosting-service-information dl { margin: 0; }
.hosting-resource-detail dl { padding: 4px 14px 8px; }
.hosting-resource-detail dl > div { min-height: 42px; display: grid; grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr); align-items: center; gap: 12px; }
.hosting-resource-detail dt { display: flex; align-items: center; gap: 9px; color: #33425b; font-size: 12px; font-weight: 700; }
.hosting-resource-detail dt span { color: #63738d; }
.hosting-resource-detail dt svg { width: 14px; height: 14px; }
.hosting-resource-detail dd { margin: 0; display: grid; grid-template-columns: minmax(70px, 1fr) auto auto; align-items: center; gap: 10px; }
.hosting-resource-detail dd strong { min-width: 90px; color: #34425b; font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
.hosting-email-create { margin: 18px 14px 14px; padding-top: 16px; border-top: 1px solid #e4eaf2; }
.hosting-email-create > header { margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.hosting-email-create > header > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: var(--primary, #1768e5); background: #eaf2ff; }
.hosting-email-create > header > span svg { width: 15px; height: 15px; }
.hosting-email-create > header div { min-width: 0; display: grid; gap: 2px; }
.hosting-email-create h4 { margin: 0; color: #101a31; font-size: 13px; }
.hosting-email-create p { margin: 0; color: #718098; font-size: 11px; }
.hosting-email-create-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(180px, .8fr) auto; align-items: end; gap: 10px; }
.hosting-email-create-fields > label { min-width: 0; display: grid; gap: 6px; color: #45546d; font-size: 11px; font-weight: 700; }
.hosting-email-address { min-width: 0; height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #d3deeb; border-radius: 6px; background: #fff; }
.hosting-email-address:focus-within { border-color: var(--primary, #1768e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1768e5) 12%, transparent); }
.hosting-email-address input { width: 100%; min-width: 0; padding: 0 10px; border: 0; outline: 0; color: #162138; background: transparent; font-family: var(--asv-font-family); font-size: 11px; font-weight: 700; }
.hosting-email-address strong { max-width: 180px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; border-left: 1px solid #dbe4ef; color: #52627b; background: #f1f5fa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hosting-email-password { height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; overflow: hidden; border: 1px solid #d3deeb; border-radius: 6px; background: #fff; }
.hosting-email-password:focus-within { border-color: var(--primary, #1768e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #1768e5) 12%, transparent); }
.hosting-email-password input { width: 100%; min-width: 0; padding: 0 10px; border: 0; outline: 0; color: #162138; background: transparent; font-family: var(--asv-font-family); font-size: 11px; font-weight: 700; }
.hosting-email-password button { width: 34px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid #dbe4ef; color: #64738a; background: #f7f9fc; cursor: pointer; }
.hosting-email-password button:hover { color: var(--primary, #1768e5); background: #edf4ff; }
.hosting-email-password button svg { width: 14px; height: 14px; }
.hosting-email-create-fields > .btn { min-width: 82px; min-height: 38px; padding-inline: 13px; gap: 6px; }
.hosting-email-create-fields > .btn svg { width: 14px; height: 14px; }
.hosting-service-information dl { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(42px, 1fr); align-content: stretch; padding: 4px 14px 8px; }
.hosting-service-information dl > div { min-width: 0; min-height: 42px; display: grid; grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr); align-items: center; gap: 10px; padding-right: 12px; border-bottom: 1px solid #edf1f6; }
.hosting-service-information dl > div:nth-child(even) { padding-right: 0; padding-left: 12px; border-left: 1px solid #edf1f6; }
.hosting-service-information dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.hosting-service-information dt { color: #4f5e76; font-size: 11px; font-weight: 700; }
.hosting-service-information dd { min-width: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: #111b31; font-size: 11px; font-weight: 750; text-align: right; }
.hosting-service-information dd span { min-width: 0; overflow-wrap: anywhere; }
.hosting-service-information dd button { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #6e7d94; background: #f1f5fa; cursor: pointer; }
.hosting-service-information dd button:hover { color: var(--primary, #1768e5); background: #e9f2ff; }
.hosting-service-information dd button svg { width: 12px; height: 12px; }
.hosting-service-information dd.is-panel-name { color: #dc7d00; font-style: italic; }
.hosting-service-information dd.is-service-status { color: #14844b; }
.hosting-service-information dd.is-service-status > i { width: 7px; height: 7px; border-radius: 50%; background: #20b86a; box-shadow: 0 0 0 3px #e5f8ed; }
.hosting-service-information dd .service-secret-control { flex: 0 1 230px; width: min(230px, 100%); min-width: 0; grid-template-columns: minmax(0, 1fr) 24px 24px; gap: 4px; }
.hosting-service-information dd .service-secret-control input { height: 26px; padding-inline: 8px; font-size: 11px; text-align: right; }
.hosting-service-information dd .service-secret-control button { width: 24px; height: 26px; }
.hosting-service-information footer { margin-top: auto; padding: 12px 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid #e4eaf2; }
.hosting-service-information footer .service-side-command { min-width: 0; margin: 0; padding-inline: 10px; font-size: 11px; }
.hosting-service-unavailable { margin-top: 0; }
.hosting-activity-panel { min-height: 190px; }

@media (max-width: 1180px) {
    .hosting-resource-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hosting-resource-summary article:nth-child(2) { border-right: 0; }
    .hosting-resource-summary article:nth-child(-n+2) { border-bottom: 1px solid #e0e7f1; }
    .hosting-quick-actions > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hosting-detail-grid { grid-template-columns: 1fr; }
    .hosting-detail-grid > section + section { margin-left: 0; padding-left: 0; border-left: 0; }
}

@media (max-width: 700px) {
    .hosting-service-workspace { padding: 16px; }
    .hosting-service-header { grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding-bottom: 16px; }
    .hosting-service-mark { width: 44px; height: 44px; }
    .hosting-service-header > form { grid-column: 1 / -1; width: 100%; }
    .hosting-service-header .service-panel-launch { width: 100%; }
    .hosting-service-identity h2 { font-size: 18px; }
    .hosting-resource-summary { grid-template-columns: 1fr; }
    .hosting-resource-summary article { border-right: 0; border-bottom: 1px solid #e0e7f1; }
    .hosting-resource-summary article:last-child { border-bottom: 0; }
    .hosting-quick-actions > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hosting-resource-detail dl > div { grid-template-columns: 1fr; gap: 7px; padding: 9px 0; }
    .hosting-service-information dl { grid-template-columns: 1fr; }
    .hosting-service-information dl > div,
    .hosting-service-information dl > div:nth-child(even),
    .hosting-service-information dl > div:nth-last-child(-n+2) { padding-right: 0; padding-left: 0; border-left: 0; border-bottom: 1px solid #edf1f6; }
    .hosting-service-information dl > div:last-child { border-bottom: 0; }
    .hosting-service-information footer { grid-template-columns: 1fr; }
    .hosting-email-create-fields { grid-template-columns: 1fr; }
    .hosting-email-create-fields > .btn { width: 100%; }
}

@media (max-width: 420px) {
    .hosting-quick-actions > div { grid-template-columns: 1fr; }
    .hosting-resource-detail dd { grid-template-columns: minmax(60px, 1fr) auto; }
    .hosting-resource-detail dd mark { display: none; }
}
.service-contract-summary {
    min-height: 104px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto minmax(190px, auto);
    align-items: center;
    gap: 17px;
    margin-bottom: 16px;
    padding: 17px 22px;
    border: 1px solid #dbe5f1;
    border-bottom: 3px solid var(--primary, #1768e5);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(17, 38, 73, .055);
}
.service-contract-summary .service-card-icon { width: 52px; height: 52px; }
.service-contract-summary h2 { margin: 2px 0 0; color: #101828; font-size: 20px; line-height: 1.25; }
.service-contract-summary .status { justify-self: start; }
.service-contract-renewal { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding-left: 22px; border-left: 1px solid #e3eaf3; }
.service-contract-renewal > svg { width: 18px; height: 18px; color: #728097; }
.service-contract-renewal span { display: grid; gap: 5px; }
.service-contract-renewal small { color: #71809a; font-size: 9px; font-weight: 750; }
.service-contract-renewal strong { color: #172033; font-size: 13px; }

.service-manage-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.service-control-workspace,
.service-activity-panel,
.service-file-access-panel,
.service-commercial-panel { margin: 0; border-color: #dbe5f1; border-radius: 8px; box-shadow: 0 12px 30px rgba(17, 38, 73, .055); }
.service-control-workspace { overflow: hidden; padding: 22px; }
.service-control-header { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-bottom: 21px; }
.service-control-header .service-control-mark { width: 56px; height: 56px; flex-basis: 56px; }
.service-control-header .service-control-mark svg { width: 29px; height: 29px; }
.service-control-heading { min-width: 0; display: grid; align-content: center; gap: 5px; }
.service-control-heading h2 { margin: 0; font-size: 25px; line-height: 1.15; }
.service-control-meta { display: flex; min-width: 0; align-items: center; gap: 10px; margin: 0; color: #607089; font-size: 11px; font-weight: 700; line-height: 1.25; }
.service-control-meta > b { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: #8390a4; }
.service-control-meta > span:not(.runtime-status) { display: inline-flex; min-width: 0; align-items: center; gap: 6px; overflow-wrap: anywhere; color: var(--primary, #1768e5); }
.service-control-meta svg { width: 13px; height: 13px; }
.service-control-header > form { margin: 0; }
.service-panel-launch { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--primary, #1768e5); border-radius: 7px; color: #fff; background: var(--primary, #1768e5); font-family: var(--asv-font-family); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px color-mix(in srgb, var(--primary, #1768e5) 20%, transparent); transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.service-panel-launch:hover { background: var(--primary-dark, #1258c7); transform: translateY(-1px); box-shadow: 0 11px 22px color-mix(in srgb, var(--primary, #1768e5) 24%, transparent); }
.service-panel-launch:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #1768e5) 18%, transparent); outline-offset: 2px; }
.service-panel-launch svg { width: 16px; height: 16px; }

.service-power-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #e3eaf3; }
.service-power-grid form { min-width: 0; margin: 0; }
.service-power-command { width: 100%; min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; border: 1px solid #d8e1ed; border-radius: 7px; color: #344054; background: #fff; font-family: var(--asv-font-family); font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.service-power-command svg { width: 21px; height: 21px; }
.service-power-command:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary, #1768e5) 46%, #d8e1ed); color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 3%, #fff); transform: translateY(-1px); }
.service-power-command.is-primary { color: #fff; border-color: var(--primary, #1768e5); background: var(--primary, #1768e5); box-shadow: 0 9px 20px color-mix(in srgb, var(--primary, #1768e5) 20%, transparent); }
.service-power-command.is-primary:hover:not(:disabled) { color: #fff; background: var(--primary-dark, #1258c7); }
.service-power-command:disabled { color: #a5afbd; border-color: #e1e6ed; background: #f4f6f9; cursor: not-allowed; box-shadow: none; }
.service-power-command.is-loading svg { animation: service-command-pulse .8s ease-in-out infinite alternate; }

.service-runtime-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 18px 0; }
.service-runtime-overview > div { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 12px; padding: 4px 17px; border-right: 1px solid #e1e8f1; }
.service-runtime-overview > div:first-child { padding-left: 0; }
.service-runtime-overview > div:last-child { padding-right: 0; border-right: 0; }
.service-runtime-overview > div > span:first-child { width: 42px; height: 42px; display: grid; grid-row: 1 / 3; place-items: center; border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 8%, #fff); }
.service-runtime-overview > div > span:first-child svg { width: 19px; height: 19px; }
.service-runtime-overview dt { align-self: end; margin: 0 0 5px; color: #7a879a; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.service-runtime-overview dd { align-self: start; margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 12px; font-weight: 800; }
.service-connection-state { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #dce7f5; border-radius: 7px; color: #627188; background: #f7faff; font-size: 10px; font-weight: 700; }
.service-connection-state > span { display: inline-flex; align-items: center; gap: 7px; }
.service-connection-state > span > i { width: 7px; height: 7px; border-radius: 50%; background: #24b467; }
.service-connection-state > b { width: 3px; height: 3px; border-radius: 50%; background: #98a4b5; }
.service-ready-state { margin-left: auto; }
.service-ready-state svg { width: 16px; height: 16px; color: #20a75f; }

.service-activity-panel { overflow: hidden; }
.service-activity-panel > header { min-height: 58px; display: flex; align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid #e5ebf3; }
.service-activity-panel > header > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 8%, #fff); }
.service-activity-panel > header svg { width: 17px; height: 17px; }
.service-activity-panel h2 { margin: 0; color: #172033; font-size: 15px; }
.service-activity-content { min-height: 176px; display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 20px; padding: 18px 22px; }
.service-activity-content ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.service-activity-content li { position: relative; min-height: 44px; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 11px; color: #607089; font-size: 11px; }
.service-activity-content li:not(:last-child)::after { position: absolute; top: 28px; bottom: -16px; left: 5px; width: 1px; content: ""; background: #dce4ee; }
.service-activity-content li i { width: 10px; height: 10px; z-index: 1; border: 2px solid #fff; border-radius: 50%; background: #aab4c2; box-shadow: 0 0 0 1px #dbe3ed; }
.service-activity-content li.is-primary i { background: var(--primary, #1768e5); }
.service-activity-content li.is-success i { background: #21ad62; }
.service-activity-content time { color: #7b899e; font-size: 10px; }
.service-activity-visual { width: 176px; height: 132px; display: block; justify-self: center; object-fit: contain; object-position: center; opacity: .72; filter: saturate(.86); }

.service-manage-side { gap: 12px; }
.service-file-access-panel,
.service-commercial-panel { padding: 16px; }
.service-file-access-panel .service-side-heading,
.service-commercial-panel .service-side-heading { gap: 10px; margin-bottom: 10px; }
.service-file-access-panel .service-side-heading .service-side-icon,
.service-commercial-panel .service-side-heading .service-side-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}
.service-file-access-panel .service-side-heading .service-side-icon svg,
.service-commercial-panel .service-side-heading .service-side-icon svg { width: 17px; height: 17px; }
.service-file-access-panel .service-side-heading h2,
.service-commercial-panel .service-side-heading h2 {
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}
.service-file-access-panel dl,
.service-commercial-panel dl { display: grid; margin: 0; }
.service-file-access-panel dl > div { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid #e5ebf3; }
.service-file-access-panel dt,
.service-commercial-panel dt { color: #7a879a; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.service-file-access-panel dd,
.service-commercial-panel dd { margin: 0; color: #172033; font-size: 11px; font-weight: 800; overflow-wrap: anywhere; }
.service-file-access-panel dl > div:not(.service-access-password) dd { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; }
.service-file-access-panel dd > button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid #d8e2ee; border-radius: 6px; color: #63728a; background: #fff; cursor: pointer; }
.service-file-access-panel dd > button:hover { color: var(--primary, #1768e5); border-color: color-mix(in srgb, var(--primary, #1768e5) 38%, #d8e2ee); }
.service-file-access-panel dd > button svg { width: 15px; height: 15px; }
.service-file-access-panel .service-secret-control { grid-template-columns: minmax(0, 1fr) 34px 34px; }
.service-side-command { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--primary, #1768e5) 22%, #d9e4f2); border-radius: 7px; color: var(--primary, #1768e5); background: color-mix(in srgb, var(--primary, #1768e5) 4%, #fff); font-family: var(--asv-font-family); font-size: 10px; font-weight: 800; text-decoration: none; cursor: pointer; }
.service-side-command:hover { border-color: color-mix(in srgb, var(--primary, #1768e5) 48%, #d9e4f2); background: color-mix(in srgb, var(--primary, #1768e5) 7%, #fff); }
.service-side-command svg { width: 16px; height: 16px; }
.service-commercial-panel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-top: 4px; }
.service-commercial-panel dl > div { min-width: 0; display: grid; gap: 4px; padding: 9px 10px; border-top: 1px solid #e5ebf3; }
.service-commercial-panel dl > div:nth-child(odd) { padding-left: 0; border-right: 1px solid #e5ebf3; }
.service-commercial-panel dl > div:nth-child(even) { padding-right: 0; }

@media (max-width: 1180px) {
    .service-manage-grid { grid-template-columns: 1fr; }
    .service-manage-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .service-contract-summary { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
    .service-contract-renewal { grid-column: 2 / -1; justify-content: flex-start; padding: 13px 0 0; border-top: 1px solid #e5ebf3; border-left: 0; }
    .service-control-header { grid-template-columns: 48px minmax(0, 1fr); }
    .service-control-header .service-control-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .service-control-header > form { grid-column: 1 / -1; }
    .service-panel-launch { width: 100%; }
    .service-power-grid { grid-template-columns: 1fr; }
    .service-runtime-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-runtime-overview > div { min-height: 68px; border-bottom: 1px solid #e5ebf3; }
    .service-runtime-overview > div:nth-child(2) { border-right: 0; }
    .service-runtime-overview > div:nth-last-child(-n+2) { border-bottom: 0; }
    .service-activity-content { grid-template-columns: 1fr; }
    .service-activity-visual { display: none; }
}

@media (max-width: 640px) {
    .vps-reinstall-systems,
    .vps-reinstall-password { grid-template-columns: 1fr; }
    .vps-reinstall-password-fields { grid-template-columns: 1fr; }
    .service-manage-page > .service-manage-back { margin-bottom: 12px; }
    .service-contract-summary { grid-template-columns: 44px minmax(0, 1fr); padding: 15px; }
    .service-contract-summary .service-card-icon { width: 44px; height: 44px; }
    .service-contract-summary > .service-contract-upgrade { grid-column: 2; justify-self: stretch; }
    .service-contract-summary > .status { grid-column: 2; justify-self: start; }
    .service-contract-renewal { grid-column: 1 / -1; }
    .service-control-workspace { padding: 16px; }
    .service-control-heading h2 { font-size: 20px; }
    .service-control-meta { align-items: flex-start; flex-wrap: wrap; }
    .service-runtime-overview { grid-template-columns: 1fr; }
    .service-runtime-overview > div,
    .service-runtime-overview > div:first-child,
    .service-runtime-overview > div:last-child { min-height: 66px; padding: 8px 0; border-right: 0; border-bottom: 1px solid #e5ebf3; }
    .service-runtime-overview > div:last-child { border-bottom: 0; }
    .service-connection-state { align-items: flex-start; flex-wrap: wrap; padding: 12px; }
    .service-ready-state { width: 100%; margin-left: 0; }
    .service-manage-side { grid-template-columns: 1fr; }
    .service-activity-content { padding: 14px 16px; }
    .service-activity-content li { grid-template-columns: 12px minmax(0, 1fr); padding: 5px 0; }
    .service-activity-content time { grid-column: 2; }
}

/* Professional orders workspace */
.orders-history-page {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
    background: #f3f6fa;
}

.orders-history-topbar {
    min-height: 0;
    margin-bottom: 26px;
    padding-bottom: 0;
    border-bottom: 0;
}

.orders-history-page .topbar-actions {
    gap: 9px;
}

.orders-history-page .orders-search {
    width: min(290px, 26vw);
}

.orders-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.order-overview-item {
    min-width: 0;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 17px;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .045);
}

.order-overview-item > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}

.order-overview-item.approved > span {
    color: #16803d;
    background: #eaf8ef;
}

.order-overview-item.pending > span {
    color: #b7791f;
    background: #fff7df;
}

.order-overview-item > span svg {
    width: 20px;
    height: 20px;
}

.order-overview-item div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.order-overview-item small {
    color: #65738a;
    font-size: 11px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-overview-item strong {
    color: #101a2d;
    font-size: 22px;
    line-height: 1;
}

.orders-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr)) repeat(2, minmax(150px, .9fr)) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 18px;
    padding: 17px 18px;
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
}

.orders-filter-bar label {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.orders-filter-bar label > span {
    color: #526078;
    font-size: 10px;
    font-weight: 800;
}

.orders-filter-bar select,
.orders-filter-bar input {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    color: #172033;
    border: 1px solid #d8e1ed;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.orders-filter-bar select:focus,
.orders-filter-bar input:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, #d8e1ed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.orders-filter-actions {
    display: flex;
    gap: 8px;
}

.orders-filter-actions .btn {
    min-height: 42px;
    gap: 7px;
    white-space: nowrap;
}

.orders-filter-actions svg {
    width: 15px;
    height: 15px;
}

.orders-bulk-form {
    gap: 14px;
}

.orders-history-panel {
    border: 1px solid #d9e3f0;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.orders-history-columns,
.orders-history-row {
    grid-template-columns: 34px minmax(210px, 1.5fr) minmax(118px, .8fr) minmax(112px, .75fr) minmax(138px, .95fr) minmax(76px, .5fr) minmax(118px, .78fr) minmax(104px, .68fr) minmax(100px, auto);
    gap: 14px;
    padding-right: 20px;
    padding-left: 20px;
}

.orders-history-columns {
    min-height: 48px;
    background: #f7f9fc;
    letter-spacing: 0;
}

.orders-history-row {
    min-height: 76px;
}

.orders-history-row:hover {
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
}

.order-row-service {
    gap: 4px;
}

.order-row-service > a {
    min-width: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-row-service > a b {
    margin-right: 5px;
    color: var(--brand-primary);
}

.order-row-service small {
    font-size: 10px;
    font-weight: 650;
}

.order-row-field strong,
.order-row-value strong {
    font-size: 12px;
}

.order-row-field .status {
    min-height: 24px;
    padding: 0 10px;
    font-size: 10px;
}

.order-row-value {
    min-height: 38px;
    padding-left: 14px;
}

.order-row-value strong {
    font-size: 13px;
}

.order-row-details {
    min-height: 34px;
    justify-self: stretch;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, #d9e3f0);
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
}

.order-row-details svg {
    width: 15px;
    height: 15px;
    transform: none;
}

.orders-history-footer {
    min-height: 66px;
    padding: 11px 20px;
    border-top: 1px solid #e2e9f2;
    background: #fbfcfe;
}

.orders-pagination {
    gap: 7px;
}

.orders-pagination a,
.orders-pagination span {
    width: 36px;
    height: 36px;
}

.orders-pagination a.active {
    color: #fff;
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.orders-bulk-actions {
    min-height: 40px;
}

.order-action {
    min-height: 40px;
    font-size: 12px;
}

@media (max-width: 1320px) {
    .orders-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .orders-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .orders-filter-actions {
        align-self: stretch;
    }
}

@media (max-width: 1180px) {
    .orders-history-columns {
        display: none;
    }

    .orders-history-row {
        grid-template-columns: 30px repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
        padding: 18px 20px;
    }

    .orders-history-list > .empty-state {
        padding: 18px 16px;
    }

    .order-row-select {
        grid-column: 1;
        grid-row: 1;
    }

    .order-row-service {
        grid-column: 2 / -1;
    }

    .orders-history-row > .order-row-field,
    .orders-history-row > .order-row-value {
        grid-column: auto;
        min-height: 0;
        padding: 0;
        border: 0;
    }

    .orders-history-row > .order-row-field:nth-child(3),
    .orders-history-row > .order-row-field:nth-child(5),
    .orders-history-row > .order-row-field:nth-child(7) {
        grid-column: 2;
    }

    .orders-history-row > .order-row-field:nth-child(4),
    .orders-history-row > .order-row-field:nth-child(6),
    .orders-history-row > .order-row-value:nth-child(8) {
        grid-column: 3;
    }

    .orders-history-row .order-row-field > span,
    .orders-history-row .order-row-value > span {
        display: block;
        font-size: 9px;
        text-transform: uppercase;
    }

    .order-row-details {
        grid-column: 2 / -1;
        grid-row: auto;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .orders-history-page {
        padding: 20px 16px 96px;
    }

    .orders-history-heading {
        gap: 12px;
        padding: 22px 0 18px;
    }

    .orders-history-heading h1 {
        font-size: 25px;
    }

    .orders-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .order-overview-item {
        min-height: 78px;
        padding: 13px;
    }

    .order-overview-item:last-child {
        grid-column: 1 / -1;
    }

    .order-overview-item > span {
        width: 36px;
        height: 36px;
    }

    .orders-filter-bar {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .orders-filter-actions,
    .orders-filter-actions .btn {
        width: 100%;
    }

    .orders-filter-actions .btn {
        flex: 1;
    }

    .orders-history-row {
        position: relative;
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 18px 16px;
    }

    .order-row-select {
        position: absolute;
        top: 18px;
        right: 16px;
    }

    .order-row-service,
    .orders-history-row > .order-row-field,
    .orders-history-row > .order-row-value,
    .order-row-details {
        grid-column: 1 !important;
    }

    .order-row-service {
        padding-right: 32px;
    }

    .orders-history-row > .order-row-field,
    .orders-history-row > .order-row-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .order-row-details {
        width: 100%;
        margin-top: 3px;
    }

    .orders-history-footer {
        align-items: stretch;
        padding: 16px;
    }

    .orders-pagination {
        justify-content: center;
    }

    .orders-bulk-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .order-action {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }
}

/* Shared workspace header: admin and client */
.coupons-page {
    --coupon-line: #dce5f0;
    padding-bottom: 48px;
    background: #f3f7fc;
}

.coupon-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid var(--coupon-line);
    border-radius: 8px;
    background: #fff;
}

.coupon-summary article {
    min-width: 0;
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-left: 1px solid #e8edf4;
}

.coupon-summary article:first-child { border-left: 0; }
.coupon-summary article > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--brand-primary); border-radius: 7px; background: var(--brand-primary-soft); }
.coupon-summary svg { width: 18px; height: 18px; }
.coupon-summary small { display: block; color: #6d7c93; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.coupon-summary strong { display: block; margin-top: 4px; color: #0f172a; font-size: 22px; }

.coupon-layout { display: block; }
.coupon-list-panel, .coupon-editor-panel { min-width: 0; overflow: hidden; border: 1px solid var(--coupon-line); border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .05); }
.coupon-section-heading { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #e8edf4; }
.coupon-section-heading h2, .coupon-section-heading p { margin: 0; }
.coupon-section-heading h2 { color: #111827; font-size: 19px; }
.coupon-section-heading p { margin-top: 5px; color: #667792; font-size: 12px; }
.coupon-section-heading small { display: block; margin-bottom: 4px; color: var(--brand-primary); font-size: 9px; font-weight: 900; }
.coupon-filters { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e8edf4; background: #f9fbfd; }
.coupon-filters label { min-width: 0; position: relative; }
.coupon-filters label svg { position: absolute; top: 50%; left: 11px; width: 15px; color: #718096; transform: translateY(-50%); }
.coupon-filters input, .coupon-filters select { width: 100%; height: 38px; border: 1px solid #d7e1ed; border-radius: 7px; background: #fff; font-family: var(--asv-font-family); font-size: 11px; }
.coupon-filters input { padding: 0 10px 0 34px; }
.coupon-filters select { padding: 0 8px; }
.coupon-list { display: grid; }
.coupon-row { min-width: 0; display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid #e8edf4; }
.coupon-row:last-child { border-bottom: 0; }
.coupon-row.is-selected { box-shadow: inset 3px 0 var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 3%, #fff); }
.coupon-row-main { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; align-items: center; }
.coupon-row-main > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand-primary); border-radius: 7px; background: var(--brand-primary-soft); }
.coupon-row-main svg { width: 18px; }
.coupon-code-line { display: flex; align-items: center; gap: 8px; }
.coupon-code-line > strong { color: var(--brand-primary); font-size: 14px; font-weight: 900; line-height: 1.2; }
.coupon-code-line .status { min-height: 20px; padding: 0 7px; font-size: 8px; }
.coupon-row h3 { margin: 4px 0 0; color: #3f4c61; font-size: 11px; font-weight: 700; line-height: 1.3; }
.coupon-row p { max-width: 100%; margin: 3px 0 0; color: #718096; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-row dl { display: flex; gap: 20px; margin: 0; }
.coupon-row dl div { min-width: 62px; }
.coupon-row dt { color: #7c899d; font-size: 9px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.coupon-row dd { margin: 4px 0 0; color: #263248; font-size: 12px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.coupon-row-actions { display: flex; gap: 5px; margin-left: 28px; }
.coupon-row-actions form { margin: 0; }
.coupon-row-actions .icon-action { width: 32px; height: 32px; }
.coupon-row-actions .coupon-state-action.is-pause { color: #64748b; }
.coupon-row-actions .coupon-state-action.is-activate { color: var(--brand-primary); border-color: color-mix(in srgb, var(--brand-primary) 24%, #d7e1ed); background: color-mix(in srgb, var(--brand-primary) 6%, #fff); }
.coupon-row-actions .is-danger { color: #b4232f; }
.coupon-empty { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 30px; text-align: center; }
.coupon-empty > svg { width: 34px; height: 34px; color: var(--brand-primary); }
.coupon-empty h3, .coupon-empty p { margin: 0; }
.coupon-empty h3 { font-size: 15px; }.coupon-empty p { color: #718096; font-size: 11px; }
.coupon-pagination { padding: 12px 16px; border-top: 1px solid #e8edf4; }

.coupon-form { display: grid; }
.coupon-form fieldset { min-width: 0; display: grid; gap: 12px; margin: 0; padding: 16px 20px; border: 0; }
.coupon-form legend { margin: 0 0 2px; padding: 0; color: #55637a; font-size: 9px; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.coupon-form label { min-width: 0; display: grid; gap: 6px; color: #46556d; font-size: 10px; font-weight: 800; }
.coupon-form input:not([type="checkbox"]), .coupon-form select, .coupon-form textarea { width: 100%; min-width: 0; border: 1px solid #d7e1ed; border-radius: 7px; background: #fff; font-family: var(--asv-font-family); font-size: 11px; outline: 0; }
.coupon-form input:not([type="checkbox"]), .coupon-form select { height: 40px; padding: 0 11px; }
.coupon-form textarea { resize: vertical; padding: 10px; }
.coupon-form input:focus, .coupon-form select:focus, .coupon-form textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent); }
.coupon-fields { display: grid; gap: 10px; }.coupon-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.coupon-fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.coupon-field-help { margin: 0; color: #718096; font-size: 9px; line-height: 1.4; }
.coupon-field-help strong, .coupon-field-help span { display: block; }.coupon-field-help strong { color: #46556d; font-size: 10px; }.coupon-field-help span { margin-top: 2px; }
.coupon-check-grid { display: grid; gap: 0; }
.coupon-check-grid.cycles { grid-template-columns: 1fr; }
.coupon-check-grid label { min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; background: transparent; }
.coupon-form input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--brand-primary); }
.coupon-no-cycles { margin: 0; padding: 12px; color: #718096; border: 1px dashed #d7e1ed; border-radius: 7px; font-size: 11px; text-align: center; background: #fbfcfe; }
.coupon-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.coupon-rules label { min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e6ebf2; }
.coupon-rules label > input { grid-column: 2; grid-row: 1; }
.coupon-rules label > span { min-width: 0; grid-column: 1; grid-row: 1; }
.coupon-rules .coupon-rule-active { grid-column: 1 / -1; }
.coupon-rules strong, .coupon-rules small { display: block; }.coupon-rules strong { color: #263248; font-size: 10px; }.coupon-rules small { margin-top: 2px; color: #718096; font-size: 8px; font-weight: 600; line-height: 1.35; }
.coupon-rules input[type="checkbox"] { width: 32px; height: 18px; position: relative; appearance: none; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background-color .18s ease; }
.coupon-rules input[type="checkbox"]::before { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .22); content: ""; transition: transform .18s ease; }
.coupon-rules input[type="checkbox"]:checked { background: var(--brand-primary); }
.coupon-rules input[type="checkbox"]:checked::before { transform: translateX(14px); }
.coupon-form footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px; background: #fff; }
.coupon-config-dialog .coupon-form footer .btn { min-height: 38px; gap: 7px; padding: 0 14px; font-size: 12px; border-radius: 7px; }
.coupon-config-dialog .coupon-form footer .btn svg { width: 16px; height: 16px; }

.coupon-config-dialog {
    width: min(820px, calc(100% - 32px));
    max-width: none;
    max-height: min(90dvh, 860px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .26);
}

.coupon-config-dialog::backdrop { background: rgba(6, 15, 32, .58); backdrop-filter: blur(3px); }
.coupon-modal-shell { height: min(88dvh, 800px); max-height: min(88dvh, 800px); display: grid; grid-template-rows: 78px minmax(0, 1fr); }
.coupon-modal-heading { height: 78px; min-height: 78px; align-items: center; padding: 11px 18px; overflow: hidden; background: #fbfcfe; }
.coupon-modal-heading .product-form-header { min-width: 0; display: flex; align-items: center; gap: 12px; }
.coupon-modal-heading .product-form-header > div { min-width: 0; }
.coupon-modal-heading .product-form-header > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--brand-primary); border-radius: 7px; background: var(--brand-primary-soft); }
.coupon-modal-heading .product-form-header > span svg { width: 18px; height: 18px; }
.coupon-modal-heading small { color: var(--brand-primary); font-size: 8px; font-weight: 900; }
.coupon-modal-heading h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.2; }
.coupon-modal-heading p { max-width: 560px; margin: 2px 0 0; color: #718096; font-size: 9px; line-height: 1.3; white-space: normal; }
.coupon-modal-heading .coupon-modal-close { width: 34px; height: 34px; flex: 0 0 auto; color: #64748b; border-color: transparent; border-radius: 7px; background: transparent; }
.coupon-modal-heading .coupon-modal-close svg { width: 17px; height: 17px; }
.coupon-modal-heading .coupon-modal-close:hover { color: #172033; border-color: #dce4ee; background: #f1f5f9; }
.coupon-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.coupon-modal-body > .form-errors { margin: 14px 18px 0; }
.coupon-config-dialog .coupon-form { min-height: 100%; padding-top: 16px; }
.coupon-config-dialog .coupon-core-settings { padding-top: 18px; }
.coupon-config-dialog .coupon-form legend,
.coupon-config-dialog .coupon-subheading {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #55637a;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}
.coupon-config-dialog .coupon-form legend::after,
.coupon-config-dialog .coupon-subheading::after {
    height: 1px;
    flex: 1 1 auto;
    background: #dfe6ef;
    content: "";
}
.coupon-config-dialog .coupon-subheading { margin: 7px 0 -2px; }
.coupon-config-dialog .coupon-eligibility-settings,
.coupon-config-dialog .coupon-rules-settings { margin: 4px 20px 0; padding: 14px 0 8px; border-top: 0; }
.coupon-eligibility-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.coupon-eligibility-columns section { min-width: 0; }
.coupon-config-dialog .coupon-check-grid label:has(input:checked) { color: var(--brand-primary); }
.coupon-config-dialog .coupon-form footer { position: sticky; z-index: 2; bottom: 0; margin-top: 8px; border-top: 1px solid #e4eaf2; }

@media (max-width: 1250px) { .coupon-row { grid-template-columns: minmax(260px, 1fr) auto auto; } }
@media (max-width: 760px) {
    .coupon-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coupon-summary article:nth-child(3) { border-left: 0; }.coupon-summary article:nth-child(n+3) { border-top: 1px solid #e8edf4; }
    .coupon-filters { grid-template-columns: 1fr; }.coupon-filters .btn { width: 100%; }
    .coupon-row { grid-template-columns: 1fr; }.coupon-row dl { justify-content: space-between; }.coupon-row-actions { justify-content: flex-end; margin-left: 0; }
    .coupon-fields.two, .coupon-fields.three, .coupon-rules { grid-template-columns: 1fr; }
    .coupon-eligibility-columns { grid-template-columns: 1fr; gap: 12px; }
    .coupon-check-grid, .coupon-check-grid.cycles { grid-template-columns: 1fr; }
    .coupon-form footer .btn { flex: 1; }
}

:root {
    --workspace-header-gap: 18px;
    --workspace-header-margin: 26px;
    --workspace-header-control: 44px;
}

.admin-layout > .admin-main > .topbar,
.client-layout > .client-main > .topbar {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--workspace-header-gap);
    margin: 0 0 var(--workspace-header-margin);
    padding: 0;
    border: 0;
}

.admin-layout > .admin-main > .topbar .page-heading,
.client-layout > .client-main > .topbar .page-heading {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 7px;
}

.admin-layout > .admin-main > .topbar .page-heading h1,
.client-layout > .client-main > .topbar .page-heading h1 {
    margin: 0;
    color: #0b1324;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
}

.admin-layout > .admin-main > .topbar .page-heading p,
.client-layout > .client-main > .topbar .page-heading p {
    margin: 0;
    color: var(--dashboard-muted, #68758a);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.admin-layout > .admin-main > .topbar .topbar-actions,
.client-layout > .client-main > .topbar .topbar-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 9px;
}

.settings-page-topbar .settings-topbar-search {
    width: min(290px, 26vw);
    margin: 0;
}

.admin-layout > .admin-main > .topbar .icon-action,
.client-layout > .client-main > .topbar .icon-action {
    width: var(--workspace-header-control);
    height: var(--workspace-header-control);
    min-width: var(--workspace-header-control);
    min-height: var(--workspace-header-control);
    flex: 0 0 var(--workspace-header-control);
}

.admin-layout > .admin-main > .topbar .admin-profile,
.client-layout > .client-main > .topbar .client-profile-menu {
    height: var(--workspace-header-control);
    min-height: var(--workspace-header-control);
    display: flex;
    align-items: center;
    margin: 0;
    box-sizing: border-box;
}

.admin-layout > .admin-main > .topbar .admin-profile,
.client-layout > .client-main > .topbar .client-profile-menu {
    padding-top: 4px;
    padding-bottom: 4px;
}

.client-layout > .client-main > .topbar .client-account-menu {
    display: flex;
    align-items: center;
}

@media (max-width: 820px) {
    .admin-layout > .admin-main > .topbar,
    .client-layout > .client-main > .topbar {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .admin-layout > .admin-main > .topbar .topbar-actions,
    .client-layout > .client-main > .topbar .topbar-actions {
        width: 100%;
    }

    .admin-layout > .admin-main > .topbar .dashboard-search {
        width: auto;
        flex: 1 1 auto;
    }
}

@media (max-width: 640px) {
    .admin-layout > .admin-main > .topbar .page-heading h1,
    .client-layout > .client-main > .topbar .page-heading h1 {
        font-size: 25px;
    }

    .admin-layout > .admin-main > .topbar .topbar-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--workspace-header-control);
    }

    .admin-layout > .admin-main > .topbar .admin-profile {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .client-layout > .client-main > .topbar .topbar-actions {
        display: grid;
        grid-template-columns: var(--workspace-header-control) minmax(0, 1fr);
    }

    .client-layout > .client-main > .topbar .client-account-menu,
    .client-layout > .client-main > .topbar .client-profile-menu {
        width: 100%;
        min-width: 0;
    }
}

/* Client account */
.client-services-page {
    padding: 30px clamp(24px, 3vw, 46px) 48px;
    background: #f3f6fa;
}

.services-kicker {
    display: block;
    color: var(--primary, #1768e5);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.services-overview {
    min-height: 144px;
    display: grid;
    grid-template-columns: minmax(340px, 1.1fr) minmax(500px, 1fr);
    align-items: stretch;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-bottom: 3px solid var(--primary, #1768e5);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(17, 38, 73, .07);
}

.services-overview-intro {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    border-right: 1px solid #e2e9f2;
}

.services-overview-icon {
    width: 58px;
    height: 58px;
    display: grid;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid #d5e3fb;
    border-radius: 8px;
    color: var(--primary, #1768e5);
    background: #eef5ff;
}

.services-overview-icon svg {
    width: 27px;
    height: 27px;
}

.services-overview-intro h2 {
    margin: 6px 0 5px;
    color: #0b1324;
    font-size: 22px;
    line-height: 1.2;
}

.services-overview-intro p {
    margin: 0;
    color: #68758a;
    font-size: 13px;
    line-height: 1.45;
}

.services-overview-stats {
    display: grid;
    grid-template-columns: .7fr 1fr 1.2fr;
    margin: 0;
}

.services-overview-stats > div {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 22px 25px;
    border-right: 1px solid #e2e9f2;
}

.services-overview-stats > div:last-child {
    border-right: 0;
}

.services-overview-stats dt {
    color: #71809a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.services-overview-stats dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #101828;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.services-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.services-filter {
    width: max-content;
    max-width: 100%;
    display: flex;
    gap: 3px;
    padding: 3px;
    overflow-x: auto;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
}

.services-filter a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #58677f;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.services-filter a b {
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #64748b;
    background: #eef2f7;
    font-size: 10px;
}

.services-filter a:hover,
.services-filter a.active {
    color: var(--primary, #1768e5);
    border-color: #d8e5fb;
    background: #f5f9ff;
}

.services-filter a.active b {
    color: var(--primary, #1768e5);
    background: #e5efff;
}

.services-support-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #1768e5);
    font-size: 12px;
    font-weight: 750;
}

.services-support-link svg {
    width: 17px;
    height: 17px;
}

.services-collection {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.services-collection-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e9f2;
}

.services-collection-header h2 {
    margin: 5px 0 0;
    color: #101828;
    font-size: 18px;
    line-height: 1.2;
}

.services-collection-header > span {
    color: #71809a;
    font-size: 11px;
    font-weight: 700;
}

.services-list {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.service-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17, 38, 73, .045);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.service-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    content: "";
    background: #94a3b8;
}

.service-card.service-status-active::before {
    background: var(--primary, #1768e5);
}

.service-card:hover {
    border-color: #bfd3f1;
    box-shadow: 0 12px 26px rgba(26, 63, 116, .075);
    transform: translateY(-1px);
}

.service-card-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 20px 22px 17px 25px;
}

.service-card-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #d6e4fa;
    border-radius: 8px;
    color: var(--primary, #1768e5);
    background: #eef5ff;
}

.service-card-icon svg {
    width: 23px;
    height: 23px;
}

.service-reference {
    display: block;
    margin-bottom: 3px;
    color: var(--primary, #1768e5);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.service-card-identity h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: #101828;
    font-size: 17px;
    line-height: 1.3;
}

.service-card-identity p {
    margin: 4px 0 0;
    color: #71809a;
    font-size: 11px;
}

.service-card-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 22px 0 25px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #f8fafc;
}

.service-card-facts > div {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 5px;
    min-height: 94px;
    padding: 15px 17px;
    border-right: 1px solid #e1e8f2;
}

.service-card-facts > div:last-child {
    border-right: 0;
}

.service-card-facts span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #71809a;
    font-size: 10px;
    font-weight: 700;
}

.service-card-facts span svg {
    width: 14px;
    height: 14px;
    color: var(--primary, #1768e5);
}

.service-card-facts strong {
    overflow-wrap: anywhere;
    color: #152033;
    font-size: 14px;
    line-height: 1.25;
}

.service-card-facts small {
    overflow-wrap: anywhere;
    color: #7b8aa1;
    font-size: 10px;
    line-height: 1.35;
}

.service-card-facts small.is-overdue,
.service-financial-state.overdue {
    color: #c02636;
}

.service-financial-state.clear,
.service-financial-state.paid {
    color: #16834a;
}

.service-financial-state.open {
    color: var(--primary, #1768e5);
}

.service-card-actions {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 22px 12px 25px;
}

.service-card-actions > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-card-actions .btn {
    min-height: 34px;
    gap: 7px;
    padding: 0 13px;
    font-size: 11px;
}

.service-card-actions .btn svg {
    width: 15px;
    height: 15px;
}

.service-health {
    color: #66758d;
    font-size: 11px;
    font-weight: 650;
}

.service-health i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
}

.service-health i.online {
    background: #22b65c;
    box-shadow: 0 0 0 4px #e4f8eb;
}

.services-empty-state {
    min-height: 330px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 42px 24px;
    text-align: center;
}

.services-empty-state > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--primary, #1768e5);
    background: #eaf2ff;
}

.services-empty-state > span svg {
    width: 27px;
    height: 27px;
}

.services-empty-state h3 {
    margin: 4px 0 0;
    color: #101828;
    font-size: 18px;
}

.services-empty-state p {
    max-width: 440px;
    margin: 0 0 5px;
    color: #71809a;
    font-size: 12px;
    line-height: 1.55;
}

.services-pagination {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid #e2e9f2;
}

.services-pagination > span {
    color: #71809a;
    font-size: 11px;
}

.services-pagination > div {
    display: flex;
    gap: 5px;
}

.services-pagination a,
.services-pagination div > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #dce5f0;
    border-radius: 7px;
    color: #607089;
    background: #fff;
    font-size: 11px;
    font-weight: 750;
}

.services-pagination a.active {
    color: #fff;
    border-color: var(--primary, #1768e5);
    background: var(--primary, #1768e5);
}

.services-pagination svg {
    width: 15px;
    height: 15px;
    transform: rotate(90deg);
}

.services-pagination a:last-child svg,
.services-pagination div > span:last-child svg {
    transform: rotate(-90deg);
}

@media (max-width: 1120px) {
    .services-overview {
        grid-template-columns: 1fr;
    }

    .services-overview-intro {
        border-right: 0;
        border-bottom: 1px solid #e2e9f2;
    }

    .service-card-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card-facts > div:nth-child(2) {
        border-right: 0;
    }

    .service-card-facts > div:nth-child(-n+2) {
        border-bottom: 1px solid #e1e8f2;
    }
}

@media (max-width: 720px) {
    .client-services-page {
        padding: 22px 16px 96px;
    }

    .services-overview-intro {
        align-items: flex-start;
        padding: 20px;
    }

    .services-overview-stats {
        grid-template-columns: 1fr 1fr;
    }

    .services-overview-stats > div {
        min-height: 84px;
        padding: 16px 18px;
    }

    .services-overview-stats > div:nth-child(2) {
        border-right: 0;
    }

    .services-overview-stats > div:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid #e2e9f2;
    }

    .services-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .services-filter {
        width: 100%;
    }

    .services-filter a {
        flex: 1 0 auto;
        justify-content: center;
    }

    .services-support-link {
        align-self: flex-end;
    }

    .services-collection-header {
        min-height: 68px;
        padding: 15px 17px;
    }

    .services-list {
        gap: 12px;
        padding: 12px;
    }

    .service-card-identity {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 17px 16px 14px 19px;
    }

    .service-card-icon {
        width: 42px;
        height: 42px;
    }

    .service-card-identity > .status {
        grid-column: 2;
        justify-self: start;
    }

    .service-card-facts {
        grid-template-columns: 1fr 1fr;
        margin: 0 14px 0 17px;
    }

    .service-card-facts > div {
        min-height: 90px;
        padding: 13px;
    }

    .service-card-actions {
        align-items: stretch;
        flex-direction: column;
        padding: 14px 14px 15px 17px;
    }

    .service-card-actions > div:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .service-card-actions .btn {
        justify-content: center;
    }

    .services-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .services-overview-intro {
        gap: 13px;
    }

    .services-overview-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .services-overview-intro h2 {
        font-size: 18px;
    }

    .services-overview-stats dd {
        font-size: 16px;
    }

    .service-card-facts {
        grid-template-columns: 1fr;
    }

    .service-card-facts > div {
        border-right: 0;
        border-bottom: 1px solid #e1e8f2;
    }

    .service-card-facts > div:nth-child(2) {
        border-bottom: 1px solid #e1e8f2;
    }

    .service-card-facts > div:last-child {
        border-bottom: 0;
    }
}

.client-account-page {
    padding: 30px clamp(24px, 3vw, 46px) 44px;
    background: #f3f6fa;
}

.account-tabs {
    width: max-content;
    max-width: 100%;
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .035);
}

.account-tabs a {
    min-width: 210px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 13px;
    color: #69768a;
    border: 1px solid transparent;
    border-radius: 7px;
}

.account-tabs a > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.account-tabs a > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.account-tabs strong,
.account-tabs small {
    display: block;
}

.account-tabs strong {
    color: #172033;
    font-size: 12px;
}

.account-tabs small {
    color: #7a879a;
    font-size: 10px;
}

.account-tabs a.active {
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 24%, #dce5f0);
    background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}

.account-tabs a.active strong {
    color: var(--brand-primary-strong);
}

.account-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 18px;
}

.account-form-panel,
.account-summary-panel,
.account-security-panel {
    border-color: #dce5f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.account-form-panel {
    padding: 0;
    overflow: hidden;
}

.account-panel-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    border-bottom: 1px solid #e3eaf3;
}

.account-panel-header > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.account-panel-header svg {
    width: 19px;
    height: 19px;
}

.account-panel-header h2,
.account-panel-header p {
    margin: 0;
}

.account-panel-header h2 {
    color: #111b2e;
    font-size: 17px;
}

.account-panel-header p {
    margin-top: 3px;
    color: #748197;
    font-size: 11px;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px 20px 24px;
}

.account-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.account-field > span:first-child {
    color: #25324a;
    font-size: 11px;
    font-weight: 800;
}

.account-field > span:first-child small,
.account-field > small {
    color: #8490a2;
    font-size: 10px;
    font-weight: 600;
}

.account-field > input,
.account-field select,
.account-phone-control > input,
.account-field .password-field {
    width: 100%;
    height: 44px;
    min-width: 0;
    color: #172033;
    border: 1px solid #d7e1ed;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    font-size: 13px;
    font-weight: 650;
}

.account-field > input,
.account-phone-control > input {
    padding: 0 13px;
}

.account-field > input:focus,
.account-field select:focus,
.account-phone-control > input:focus,
.account-field .password-field:focus-within {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, #d7e1ed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.account-phone-control {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
}

.account-phone-control select {
    padding: 0 10px;
    border-radius: 8px 0 0 8px;
    border-right: 0;
    text-transform: uppercase;
}

.account-phone-control > input {
    border-radius: 0 8px 8px 0;
}

.client-account-page .country-phone-field {
    height: 44px;
    grid-template-columns: 142px minmax(0, 1fr);
    border-color: #d7e1ed;
    border-radius: 8px;
    background: #fff;
}

.client-account-page .phone-country-trigger,
.client-account-page .country-phone-field > input[type="tel"] {
    height: 42px;
    color: #172033;
    font-size: 13px;
    font-weight: 650;
}

.client-account-page .phone-country-trigger {
    gap: 7px;
    padding: 0 10px;
}

.client-account-page .phone-country-trigger img,
.client-account-page .phone-country-menu img {
    width: 23px;
    height: 16px;
}

.client-account-page .phone-country-menu {
    width: 310px;
}

.account-form-actions {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 20px;
    border-top: 1px solid #e3eaf3;
    background: #fbfcfe;
}

.account-form-actions > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #718096;
    font-size: 10px;
    font-weight: 650;
}

.account-form-actions > span svg,
.account-form-actions .btn svg {
    width: 15px;
    height: 15px;
}

.account-form-actions .btn {
    min-height: 42px;
    gap: 8px;
    padding-inline: 18px;
}

.account-summary-panel,
.account-security-panel {
    padding: 24px 22px;
}

.account-summary-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #172554;
    font-size: 20px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(23, 37, 84, .18);
}

.profile-avatar {
    position: relative;
    overflow: hidden;
}

.profile-avatar > span {
    position: relative;
    z-index: 1;
}

.profile-avatar > img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
    opacity: 0;
    transition: opacity .16s ease;
}

.profile-avatar > img.is-loaded {
    opacity: 1;
}

.client-layout > .client-main > .topbar .client-profile-menu {
    width: 232px;
    min-width: 232px;
    max-width: 232px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 15px;
    align-items: center;
    column-gap: 10px;
    overflow: hidden;
}

.client-layout > .client-main > .topbar .client-profile-menu .user-avatar {
    grid-column: 1;
}

.client-layout > .client-main > .topbar .client-profile-menu .user-details {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.client-layout > .client-main > .topbar .client-profile-menu .user-details strong,
.client-layout > .client-main > .topbar .client-profile-menu .user-details small {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-layout > .client-main > .topbar .client-profile-menu > svg:last-child {
    grid-column: 3;
    width: 15px;
    height: 15px;
    margin: 0;
}

.account-summary-panel h2,
.account-summary-panel > p,
.account-security-panel h2,
.account-security-panel > p {
    margin: 0;
}

.account-summary-panel h2 {
    margin-top: 15px;
    color: #111b2e;
    font-size: 18px;
}

.account-summary-panel > p {
    margin-top: 4px;
    color: #728096;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.account-summary-panel dl {
    display: grid;
    gap: 0;
    margin: 22px 0 0;
}

.account-summary-panel dl > div {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e5ebf3;
}

.account-summary-panel dt {
    color: #748197;
    font-size: 10px;
}

.account-summary-panel dd {
    max-width: 150px;
    margin: 0;
    color: #1d293d;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.security-fields {
    max-width: 650px;
    display: grid;
    gap: 18px;
    padding: 22px 20px 26px;
}

.account-field .password-field {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.account-field .password-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
}

.account-field .password-toggle {
    position: static;
    inset: auto;
    width: 42px;
    height: auto;
    align-self: stretch;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    padding: 0;
    color: #68758a;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.account-field .password-toggle svg {
    width: 17px;
    height: 17px;
}

.account-security-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: var(--brand-primary-soft);
}

.account-security-icon svg {
    width: 21px;
    height: 21px;
}

.account-security-panel h2 {
    margin-top: 16px;
    color: #111b2e;
    font-size: 17px;
}

.account-security-panel > p {
    margin-top: 7px;
    color: #718096;
    font-size: 11px;
    line-height: 1.55;
}

.account-security-panel ul {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 18px 0 0 18px;
    color: #42516a;
    border-top: 1px solid #e5ebf3;
    font-size: 11px;
}

.client-account-page .form-errors {
    margin-bottom: 16px;
}

@media (max-width: 1040px) {
    .account-workspace {
        grid-template-columns: 1fr;
    }

    .account-summary-panel,
    .account-security-panel {
        order: -1;
    }
}

@media (max-width: 640px) {
    .client-account-page {
        padding: 20px 16px 96px;
    }

    .account-tabs {
        width: 100%;
    }

    .client-layout > .client-main > .topbar .client-profile-menu {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .account-tabs a {
        min-width: 0;
        flex: 1;
    }

    .account-tabs small {
        display: none;
    }

    .account-form-grid {
        grid-template-columns: 1fr;
        padding: 18px 16px 22px;
    }

    .account-panel-header,
    .account-form-actions {
        padding-inline: 16px;
    }

    .account-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .account-form-actions .btn {
        width: 100%;
    }

    .security-fields {
        padding-inline: 16px;
    }
}

/* Final responsive corrections for the invoice payment workspace. */
@media (min-width: 761px) {
    .client-invoice-page .invoice-payment-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .client-invoice-page .invoice-payment-facts > div:nth-child(n+3) {
        border-top: 0;
    }

    .client-invoice-page .invoice-payment-facts > div:nth-child(3) {
        border-left: 1px solid var(--payment-line);
    }
}

.client-invoice-page .invoice-method-option strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.18;
}

@media (max-width: 1400px) and (min-width: 761px) {
    .client-invoice-page .invoice-method-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.client-invoice-page .invoice-payment-facts > div {
    min-width: 0;
    padding-inline: 16px;
}

.client-invoice-page .invoice-payment-facts > div strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 15px;
}

.client-invoice-page .invoice-payment-facts > div:first-child strong {
    font-size: 19px;
}

.client-invoice-page .invoice-payment-facts > div.is-overdue strong {
    font-size: 16px;
}

/* Canonical desktop composition for the client invoice checkout. */
@media (min-width: 1181px) {
    .client-invoice-page .invoice-payment-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 18px;
    }

    .client-invoice-page .invoice-payment-facts > div {
        min-height: 144px;
        padding: 20px 22px;
    }

    .client-invoice-page .invoice-method-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
        gap: 10px;
    }
}

.client-invoice-page .invoice-back-link {
    margin-bottom: 31px;
}

.client-invoice-page .invoice-methods-card {
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
}

.client-invoice-page .invoice-payment-summary {
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
}

.client-invoice-page .invoice-summary-breakdown dt,
.client-invoice-page .invoice-summary-breakdown dd {
    font-size: 12px;
}

.client-invoice-page .invoice-summary-breakdown > div {
    padding-block: 9px;
}

.client-invoice-page .invoice-summary-total {
    padding-block: 22px;
}

.client-invoice-page .invoice-payment-summary > .btn {
    min-height: 49px;
}

.client-invoice-page .invoice-secure-note {
    margin-top: 22px;
}

.client-invoice-page .invoice-payment-summary {
    overflow: hidden;
    padding: 0;
    border: 1px solid #dce7f5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .08);
}

.client-invoice-page .invoice-payment-summary > header {
    align-items: flex-start;
    padding: 22px 22px 18px;
    border-bottom: 1px solid #e5edf7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.client-invoice-page .invoice-payment-summary > header h2 {
    margin: 2px 0 0;
    color: #121a2d;
    font-size: 25px;
    line-height: 1.05;
    letter-spacing: 0;
}

.client-invoice-page .invoice-summary-eyebrow {
    display: block;
    color: #1768e5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.client-invoice-page .invoice-payment-summary > header .status {
    margin-top: 3px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(23, 104, 229, .08);
}

.client-invoice-page .invoice-summary-body {
    padding: 18px 22px 0;
}

.client-invoice-page .invoice-summary-identity {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 15px;
    border-top: 0;
}

.client-invoice-page .invoice-summary-identity strong {
    color: #121a2d;
    font-size: 14px;
}

.client-invoice-page .invoice-summary-service {
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid #e2ebf6;
    border-radius: 8px;
    background: #f8fbff;
}

.client-invoice-page .invoice-summary-service > span {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(23, 104, 229, .08);
}

.client-invoice-page .invoice-payment-summary dl.invoice-summary-breakdown {
    padding: 4px 0 15px;
    border-bottom: 1px solid #e1eaf5;
}

.client-invoice-page .invoice-payment-summary dl.invoice-summary-breakdown > div {
    padding-block: 8px;
}

.client-invoice-page .invoice-summary-breakdown dt {
    color: #66748a;
    font-weight: 650;
}

.client-invoice-page .invoice-summary-breakdown dd {
    color: #111827;
    font-weight: 900;
}

.client-invoice-page .invoice-summary-total {
    margin: 0 -22px;
    padding: 17px 22px 20px;
    background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
}

.client-invoice-page .invoice-summary-total small {
    color: #121a2d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.client-invoice-page .invoice-summary-total strong {
    color: #111827;
    font-size: 27px;
    line-height: 1;
}

.client-invoice-page .invoice-summary-footer {
    display: grid;
    gap: 12px;
    padding: 0 22px 22px;
}

.client-invoice-page .invoice-summary-due {
    min-height: 46px;
    margin: 0;
    padding: 11px 13px;
    border-radius: 8px;
    background: #f8fbff;
}

.client-invoice-page .invoice-payment-summary > .btn,
.client-invoice-page .invoice-download-button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    border-color: #dce6f1;
    border-radius: 8px;
    background: #eef4fa;
    color: #121a2d;
    font-size: 15px;
    font-weight: 900;
}

.client-invoice-page .invoice-download-button:hover {
    border-color: #cbd8e7;
    background: #e5edf6;
}

.client-invoice-page .invoice-secure-note {
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 3px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #e5edf7;
}

.client-invoice-page .invoice-secure-note > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef5ff;
}

.client-invoice-page .invoice-secure-note svg {
    width: 15px;
    height: 15px;
}

.client-invoice-page .invoice-secure-note strong {
    display: block;
    color: #25334a;
    font-size: 12px;
    font-weight: 900;
}

.client-invoice-page .invoice-secure-note p {
    margin: 2px 0 0;
    color: #71809a;
    font-size: 8px;
    line-height: 1.35;
}

/* Transparent checkout fields: scoped to the invoice page to preserve the portal layout. */
.client-invoice-page [hidden] {
    display: none !important;
}

.client-invoice-page .invoice-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.client-invoice-page .invoice-card-fields .wide {
    grid-column: 1 / -1;
}

.client-invoice-page .invoice-gateway-select {
    width: min(260px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #d7e1ed;
    border-radius: 7px;
    background: #f8fafc;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
    position: relative;
}

.client-invoice-page .invoice-gateway-select > span {
    grid-column: 1 / -1;
    margin: 0;
    color: #607089;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.client-invoice-page .invoice-gateway-select select {
    min-width: 0;
    border: 0;
    outline: 0;
    color: #172033;
    background: transparent;
    font-family: var(--asv-font-family);
    font-size: 13px;
    font-weight: 800;
    appearance: none;
}

.client-invoice-page .invoice-gateway-select svg {
    width: 15px;
    height: 15px;
    color: #718098;
}

.client-invoice-page .invoice-gateway-select.is-custom-gateway {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
}

.client-invoice-page .invoice-gateway-select.is-custom-gateway select,
.client-invoice-page .invoice-gateway-select.is-custom-gateway > svg {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.client-invoice-page .invoice-gateway-trigger {
    width: 100%;
    min-width: 0;
    min-height: 33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    color: #111b2e;
    background: #fff;
    font-family: var(--asv-font-family);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(215, 225, 237, .95);
    transition: box-shadow .18s ease, background .18s ease;
}

.client-invoice-page .invoice-gateway-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 2px solid #718098;
    border-bottom: 2px solid #718098;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}

.client-invoice-page .invoice-gateway-trigger[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(225deg);
}

.client-invoice-page .invoice-gateway-trigger:hover,
.client-invoice-page .invoice-gateway-trigger[aria-expanded="true"] {
    background: #fafdff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 34%, #d7e1ed);
}

.client-invoice-page .invoice-gateway-trigger strong {
    min-width: 0;
    overflow: hidden;
    color: #111b2e;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-invoice-page .invoice-gateway-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;
    width: 100%;
    min-width: 220px;
    padding: 5px;
    border: 1px solid #d7e1ed;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .14);
}

.client-invoice-page .invoice-gateway-menu button {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    color: #26364e;
    background: transparent;
    font-family: var(--asv-font-family);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.client-invoice-page .invoice-gateway-menu button:hover,
.client-invoice-page .invoice-gateway-menu button[aria-selected="true"] {
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
}

.client-invoice-page .invoice-gateway-menu button[aria-selected="true"]::after {
    content: "";
    width: 7px;
    height: 11px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(42deg);
}

.client-invoice-page .invoice-provider-tools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    flex: 0 0 auto;
    max-width: min(280px, 42%);
}

.client-invoice-page .invoice-provider-tools .invoice-provider-safe {
    max-width: none;
    padding-top: 0;
    color: #7a879a;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
}

.client-invoice-page .invoice-card-redirect {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #dce5ef;
    border-radius: 7px;
    background: #f8fafc;
}

.client-invoice-page .invoice-card-redirect[hidden] {
    display: none !important;
}

.client-invoice-page .invoice-card-redirect > svg {
    width: 22px;
    height: 22px;
    color: var(--brand-primary);
}

.client-invoice-page .invoice-card-redirect strong {
    display: block;
    color: #172033;
    font-weight: 900;
}

.client-invoice-page .invoice-card-redirect p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.client-invoice-page .invoice-card-fields label {
    min-width: 0;
}

.client-invoice-page .invoice-card-fields label > span {
    display: block;
    margin-bottom: 7px;
    color: #34445d;
    font-size: 11px;
    font-weight: 800;
}

.client-invoice-page .mp-secure-field,
.client-invoice-page .invoice-card-fields input,
.client-invoice-page .invoice-card-fields select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    color: #172033;
    border: 1px solid #d7e1ed;
    border-radius: 7px;
    outline: none;
    background: #fff;
    font-family: var(--asv-font-family);
}

.client-invoice-page .mp-secure-field {
    padding: 0;
    overflow: hidden;
}

.client-invoice-page .mp-secure-field iframe {
    height: 42px !important;
}

.client-invoice-page .invoice-card-fields input:focus,
.client-invoice-page .invoice-card-fields select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.client-invoice-page .invoice-card-fields input[readonly] {
    color: #52647f;
    background: #f7f9fc;
}

.client-invoice-page .invoice-inline-action {
    width: max-content;
    min-height: 42px;
    grid-column: 1 / -1;
    justify-self: end;
    margin-top: 2px;
}

.client-invoice-page .invoice-paypal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.client-invoice-page .invoice-checkout-security {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 13px 0 0;
    color: #6a7990;
    font-size: 10px;
}

.client-invoice-page .invoice-checkout-security svg {
    width: 14px;
    height: 14px;
    color: var(--brand-primary);
}

@media (max-width: 760px) {
    .client-invoice-page .invoice-card-fields {
        grid-template-columns: 1fr;
    }

    .client-invoice-page .invoice-card-redirect {
        grid-template-columns: 1fr;
    }

    .client-invoice-page .invoice-inline-action {
        width: 100%;
    }
}

/* Polished PIX checkout. */
.client-invoice-page .invoice-method-logo.method-pix {
    display: grid;
    grid-template: none;
    place-items: center;
    gap: 0;
}

.client-invoice-page .invoice-method-logo.method-pix img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.client-invoice-page .invoice-pix-workspace {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    background: #fff;
}

.client-invoice-page .invoice-pix-scan {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 6px;
}

.client-invoice-page .invoice-pix-qr {
    position: relative;
    width: 220px;
    padding: 12px;
    border: 1px solid #cedbea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

.client-invoice-page .invoice-pix-qr::before,
.client-invoice-page .invoice-pix-qr::after {
    position: absolute;
    width: 22px;
    height: 22px;
    content: '';
    pointer-events: none;
}

.client-invoice-page .invoice-pix-qr::before {
    top: 7px;
    left: 7px;
    border-top: 2px solid var(--brand-primary);
    border-left: 2px solid var(--brand-primary);
}

.client-invoice-page .invoice-pix-qr::after {
    right: 7px;
    bottom: 7px;
    border-right: 2px solid var(--brand-primary);
    border-bottom: 2px solid var(--brand-primary);
}

.client-invoice-page .invoice-pix-scan > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #53647c;
    font-size: 10px;
    font-weight: 750;
    text-align: center;
}

.client-invoice-page .invoice-pix-scan > span img {
    width: 15px;
    height: 15px;
}

.client-invoice-page .invoice-pix-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    width: min(100%, 760px);
    margin-inline: auto;
}

.client-invoice-page .invoice-pix-copy-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 7px;
}

.client-invoice-page .invoice-pix-copy-heading strong,
.client-invoice-page .invoice-pix-copy-heading small {
    display: block;
}

.client-invoice-page .invoice-pix-copy-heading strong {
    color: #172033;
    font-size: 13px;
}

.client-invoice-page .invoice-pix-copy-heading small {
    margin-top: 3px;
    color: #6a7990;
    font-size: 10px;
}

.client-invoice-page .invoice-pix-copy-heading > span {
    flex: 0 0 auto;
    color: #34445d;
    font-size: 10px;
    font-weight: 800;
}

.client-invoice-page .invoice-provider-safe {
    max-width: none;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    padding-top: 0;
    color: #7a879a;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.client-invoice-page .invoice-provider-safe svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.client-invoice-page .invoice-pix-copy .invoice-copy-control {
    min-width: 0;
}

.client-invoice-page .invoice-pix-copy .invoice-copy-control input {
    color: #34445d;
    background: #f8fafc;
    font-size: 12px;
}

.client-invoice-page .invoice-pix-copy .invoice-copy-control button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-inline: 14px;
    background: #f8fafc;
}

.client-invoice-page .invoice-pix-copy .invoice-copy-control button svg {
    width: 15px;
    height: 15px;
}

.client-invoice-page .invoice-pix-copy .invoice-awaiting-payment {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 6px;
    padding: 9px 12px;
    border-color: color-mix(in srgb, var(--brand-primary) 14%, #e1e8f0);
    background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

.client-invoice-page .invoice-pix-copy > p {
    min-height: 10px;
    margin-top: 3px;
}

.client-invoice-page .invoice-pix-copy .invoice-awaiting-payment > span {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--brand-primary) 25%, #fff);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: invoice-pix-loading 1s linear infinite;
}

/* Keep the invoice summary and its support action in one sticky sidebar. */
@media (min-width: 1061px) {
    .invoice-payment-sidebar {
        position: sticky;
        top: 20px;
        align-self: start;
    }

    .invoice-payment-sidebar .invoice-payment-summary {
        position: static;
    }

    .catalog-checkout-screen .checkout-payment-page .invoice-payment-sidebar {
        position: sticky;
        top: 88px;
    }
}

.client-invoice-page .invoice-boleto-workspace {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    background: #fff;
}

.client-invoice-page .invoice-boleto-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.client-invoice-page .invoice-boleto-icon svg {
    width: 25px;
    height: 25px;
}

@media (max-width: 760px) {
    .client-invoice-page .invoice-pix-workspace {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .client-invoice-page .invoice-pix-copy-heading {
        display: grid;
        gap: 7px;
    }

    .client-invoice-page .invoice-pix-copy .invoice-copy-control {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .client-invoice-page .invoice-pix-copy .invoice-copy-control button {
        min-width: 46px;
        padding-inline: 0;
    }

    .client-invoice-page .invoice-pix-copy .invoice-copy-control button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .client-invoice-page .invoice-boleto-workspace {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .client-invoice-page .invoice-boleto-icon {
        width: 44px;
        height: 44px;
    }
}

/* Refined transparent card checkout. */
.client-invoice-page .invoice-card-surface {
    width: min(100%, 900px);
    margin: 16px auto 0;
    padding: 20px;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    background: #fff;
}

.client-invoice-page .invoice-card-fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "number number number number number number number number number number number number"
        "holder holder holder holder holder holder expiry expiry expiry security security security"
        "installments installments installments installments installments installments document document document document document document";
    gap: 14px;
    margin: 0;
}

.client-invoice-page .invoice-asaas-card-fields {
    grid-template-areas:
        "number number number number number number number number number number number number"
        "holder holder holder holder holder holder expiry expiry security security installments installments"
        "document document document document postal postal postal postal address address address address";
}

.client-invoice-page .invoice-card-fields > label {
    min-width: 0;
    margin: 0;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-number {
    grid-area: number;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-expiry {
    grid-area: expiry;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-security {
    grid-area: security;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-holder {
    grid-area: holder;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-installments {
    grid-area: installments;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-document {
    grid-area: document;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-postal {
    grid-area: postal;
}

.client-invoice-page .invoice-card-fields > label.invoice-card-address-number {
    grid-area: address;
}

.client-invoice-page .invoice-card-number-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid #d7e1ed;
    border-radius: 7px;
    background: #fbfcfe;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.client-invoice-page .invoice-card-number-control:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
}

.client-invoice-page .invoice-card-number-control .mp-secure-field {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 7px 0 0 7px;
    background: transparent;
    box-shadow: none;
}

.client-invoice-page .invoice-card-brand {
    min-width: 82px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-right: 6px;
    padding: 0 8px;
    color: #6a7990;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    font-size: 10px;
    white-space: nowrap;
}

.client-invoice-page .invoice-card-brand svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.client-invoice-page .invoice-card-brand img {
    width: 28px;
    height: 18px;
    object-fit: contain;
}

.client-invoice-page .invoice-card-brand b {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
}

.client-invoice-page .invoice-card-brand.is-detected {
    color: #26364e;
    border-color: color-mix(in srgb, var(--brand-primary) 14%, #e2e8f0);
    background: color-mix(in srgb, var(--brand-primary) 3%, #fff);
}

.client-invoice-page .invoice-card-brand.is-detected > svg {
    display: none !important;
}

.client-invoice-page .invoice-card-fields > label > span {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 7px;
    color: #34445d;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.client-invoice-page .invoice-card-fields > label > span svg {
    display: none;
}

.client-invoice-page .invoice-card-fields input,
.client-invoice-page .invoice-card-fields select,
.client-invoice-page .invoice-card-fields .mp-secure-field {
    min-width: 0;
    height: 44px;
    color: #172033;
    border-color: #d7e1ed;
    border-radius: 7px;
    background: #fbfcfe;
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.client-invoice-page .invoice-card-fields input,
.client-invoice-page .invoice-card-fields select {
    padding: 0 13px;
}

.client-invoice-page .invoice-card-fields input::placeholder {
    color: #7a879a;
    font-size: 13px;
    opacity: 1;
}

.client-invoice-page .invoice-card-fields input:focus,
.client-invoice-page .invoice-card-fields select:focus,
.client-invoice-page .invoice-card-fields .mp-secure-field:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent);
    outline: 0;
}

.client-invoice-page .invoice-card-document input[readonly] {
    color: #516078;
    background: #f4f7fa;
}

.client-invoice-page .invoice-card-fields select {
    appearance: auto;
}

.client-invoice-page .invoice-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid #e1e8f0;
}

.client-invoice-page .invoice-card-actions .invoice-checkout-security {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #607089;
    font-size: 11px;
    line-height: 1.4;
}

.client-invoice-page .invoice-card-actions .invoice-checkout-security svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--brand-primary);
}

.client-invoice-page .invoice-card-actions .btn {
    min-width: 190px;
    min-height: 44px;
    margin: 0;
    padding-inline: 20px;
}

@media (max-width: 1100px) {
    .client-invoice-page .invoice-card-fields {
        grid-template-areas:
            "number number number number number number number number number number number number"
            "holder holder holder holder holder holder holder holder holder holder holder holder"
            "expiry expiry expiry expiry expiry expiry security security security security security security"
            "installments installments installments installments installments installments document document document document document document";
    }

    .client-invoice-page .invoice-asaas-card-fields {
        grid-template-areas:
            "number number number number number number number number number number number number"
            "holder holder holder holder holder holder holder holder holder holder holder holder"
            "expiry expiry expiry expiry security security security security installments installments installments installments"
            "document document document document postal postal postal postal address address address address";
    }
}

@media (max-width: 760px) {
    .client-invoice-page .invoice-card-surface {
        padding: 14px;
    }

    .client-invoice-page .invoice-card-fields > label {
        grid-column: 1 / -1;
    }

    .client-invoice-page .invoice-card-fields {
        grid-template-columns: 1fr;
        grid-template-areas:
            "number"
            "holder"
            "expiry"
            "security"
            "installments"
            "document"
            "postal"
            "address";
    }

    .client-invoice-page .invoice-card-brand {
        min-width: 48px;
        padding-inline: 7px;
    }

    .client-invoice-page .invoice-card-brand b {
        display: none;
    }

    .client-invoice-page .invoice-card-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .client-invoice-page .invoice-card-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* Admin error pages */
.error-standalone-layout {
    min-height: 100vh;
    display: block;
    background:
        linear-gradient(180deg, #f7faff 0%, #eef4fb 100%);
}

.error-page {
    min-height: 100vh;
    padding-bottom: 42px;
}

.error-page .error-topbar {
    border-bottom: 0;
}

.error-brand {
    width: 168px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.error-brand img {
    max-width: 168px;
    max-height: 44px;
    object-fit: contain;
}

.error-hero-panel {
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    margin-top: 26px;
    padding: 34px;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, color-mix(in srgb, var(--brand-primary) 5%, #ffffff) 100%);
    box-shadow: 0 22px 54px rgba(14, 28, 52, .09);
}

.error-code-card {
    min-height: 250px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #dbe6f2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 9%, #ffffff), #ffffff);
}

.error-code-card::before,
.error-code-card::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
    border-radius: 999px;
}

.error-code-card::before {
    width: 178px;
    height: 178px;
}

.error-code-card::after {
    width: 112px;
    height: 112px;
}

.error-code-card span {
    position: relative;
    z-index: 1;
    color: #07152c;
    font-size: 74px;
    font-weight: 900;
    line-height: 1;
}

.error-code-card svg {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 32px;
    height: 32px;
    color: var(--brand-primary);
}

.error-copy {
    max-width: 720px;
}

.error-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 8px 10px;
    color: #31415a;
    border: 1px solid #dbe6f1;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
}

.error-kicker svg {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
}

.error-copy h2 {
    margin: 0;
    color: #07152c;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.08;
}

.error-copy p {
    max-width: 560px;
    margin: 14px 0 0;
    color: #5d6c83;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.error-actions .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 7px;
}

.error-actions .btn svg {
    width: 17px;
    height: 17px;
}

.error-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.error-shortcuts a {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 16px;
    color: #132038;
    text-decoration: none;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.error-shortcuts a:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, #d8e3ef);
    box-shadow: 0 16px 32px rgba(14, 28, 52, .08);
}

.error-shortcuts span {
    width: 42px;
    height: 42px;
    grid-row: span 2;
    display: grid;
    place-items: center;
    color: var(--brand-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 9%, #eef5ff);
}

.error-shortcuts svg {
    width: 20px;
    height: 20px;
}

.error-shortcuts strong,
.error-shortcuts small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.error-shortcuts strong {
    font-size: 14px;
    font-weight: 900;
}

.error-shortcuts small {
    color: #6b7890;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .error-hero-panel {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .error-code-card {
        min-height: 180px;
    }

    .error-shortcuts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .error-page {
        padding-bottom: 24px;
    }

    .error-page .error-topbar {
        align-items: flex-start;
    }

    .error-brand {
        justify-content: flex-start;
    }

    .error-hero-panel {
        margin-top: 16px;
        padding: 18px;
    }

    .error-code-card {
        min-height: 142px;
    }

    .error-code-card span {
        font-size: 50px;
    }

    .error-code-card svg {
        right: 16px;
        bottom: 16px;
        width: 26px;
        height: 26px;
    }

    .error-copy h2 {
        font-size: 28px;
    }

    .error-copy p {
        font-size: 13px;
    }

    .error-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .error-actions .btn {
        width: 100%;
    }
}

/* Shared administrative action controls. */
.admin-layout .admin-main .btn {
    min-height: 38px;
    gap: 8px;
    padding: 0 15px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.2;
}

.admin-layout .admin-main .btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.admin-layout .admin-main .btn.compact {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 11px;
}

.admin-layout .admin-main .icon-action[data-dialog-close] {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: #64748b;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
}

.admin-layout .admin-main .icon-action[data-dialog-close] svg {
    width: 17px;
    height: 17px;
}

.admin-layout .admin-main .icon-action[data-dialog-close]:hover {
    color: #172033;
    border-color: #dce4ee;
    background: #f1f5f9;
}

@media (max-width: 760px) {
    .admin-layout .admin-main .btn { min-height: 42px; }
    .admin-layout .admin-main .btn.compact { min-height: 38px; }
}
/* Modular VPS service panel */
.service-contract-summary.is-vps {
    grid-template-columns: auto minmax(180px, 1fr) auto auto auto auto auto;
}
.service-contract-vps-metric {
    align-items: center;
    border-left: 1px solid #dbe5f1;
    display: flex;
    gap: 12px;
    min-width: 150px;
    padding-left: 24px;
}
.service-contract-vps-metric > svg { color: var(--primary); height: 22px; width: 22px; }
.service-contract-vps-metric span { display: grid; gap: 3px; }
.service-contract-vps-metric small { color: #71809a; font-size: 11px; font-weight: 700; }
.service-contract-vps-metric strong { color: #0b1733; font-size: 14px; }
.vps-service-layout { display: grid; gap: 18px; }
.vps-service-workspace { border-top: 3px solid var(--primary); padding: 22px; }
.vps-service-header { align-items: center; display: grid; gap: 16px; grid-template-columns: auto minmax(0, 1fr) auto; }
.vps-service-mark,
.vps-spec-grid article > span {
    align-items: center;
    background: #edf4ff;
    border: 1px solid #d4e2f7;
    color: var(--primary);
    display: inline-flex;
    justify-content: center;
}
.vps-service-mark { border-radius: 7px; height: 54px; width: 54px; }
.vps-service-mark svg { height: 26px; width: 26px; }
.vps-service-identity { min-width: 0; }
.vps-service-identity > small { align-items: center; color: #52647f; display: flex; font-size: 12px; font-weight: 700; gap: 6px; margin-bottom: 4px; }
.vps-service-identity > small svg { color: var(--primary); height: 14px; width: 14px; }
.vps-service-identity > span { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.vps-service-identity h2 { color: #07142e; font-size: 23px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
.vps-service-identity p { color: #60718d; font-size: 12px; margin: 5px 0 0; }
.vps-service-identity p b { background: #a9b7ca; border-radius: 50%; display: inline-block; height: 3px; margin: 0 8px 2px; width: 3px; }
.vps-operation-progress { display: grid; gap: 6px; margin-top: 12px; max-width: 360px; }
.vps-operation-progress.is-hidden { display: none; }
.vps-operation-progress > span { align-items: center; color: #47617f; display: flex; font-size: 10px; justify-content: space-between; }
.vps-operation-progress strong { color: #174d91; font-size: 11px; }
.vps-operation-progress em { font-style: normal; font-weight: 800; }
.vps-operation-progress > i { background: #e1e9f4; border-radius: 999px; display: block; height: 5px; overflow: hidden; }
.vps-operation-progress > i b { background: var(--primary); border-radius: inherit; display: block; height: 100%; min-width: 4px; transition: width 300ms ease; }
.vps-service-actions { align-items: center; display: flex; gap: 14px; }
.vps-service-actions form { margin: 0; }
.vps-service-power-actions,
.vps-service-tool-actions { align-items: center; display: flex; gap: 8px; }
.vps-service-tool-actions { border-left: 1px solid #dbe5f1; padding-left: 14px; }
.vps-service-power-actions button {
    align-items: center;
    background: #fff;
    border: 1px solid #cfdbeb;
    border-radius: 7px;
    color: #17233a;
    cursor: pointer;
    display: inline-flex;
    font: 700 13px/1 "Plus Jakarta Sans", "Segoe UI", sans-serif;
    gap: 9px;
    height: 44px;
    justify-content: center;
    min-width: 126px;
    padding: 0 17px;
}
.vps-service-power-actions button svg { height: 18px; width: 18px; }
.vps-service-power-actions button.is-danger svg { color: #e13d3d; }
.vps-service-tool-actions .vps-service-tool {
    align-items: center;
    background: #f7faff;
    border: 1px solid #d9e5f4;
    border-radius: 7px;
    color: #315074;
    cursor: pointer;
    display: grid;
    gap: 9px;
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 48px;
    min-width: 132px;
    padding: 7px 12px;
    text-align: left;
}
.vps-service-tool-actions .vps-service-tool > svg { background: #eaf2ff; border-radius: 6px; box-sizing: content-box; color: var(--primary); height: 16px; padding: 7px; width: 16px; }
.vps-service-tool-actions .vps-service-tool > span { display: grid; gap: 3px; min-width: 0; }
.vps-service-tool-actions .vps-service-tool strong { color: #193354; font-size: 12px; line-height: 1; }
.vps-service-tool-actions .vps-service-tool small { color: #74859d; font-size: 9px; font-weight: 600; line-height: 1; white-space: nowrap; }
.vps-service-tool-actions .vps-service-tool.is-console { background: #edf5ff; border-color: #bfd7f8; }
.vps-service-tool-actions .vps-service-tool:hover { border-color: #a9c8ef; background: #f0f6ff; }
.vps-service-actions button:disabled { background: #f3f6fa; color: #9aa8ba; cursor: not-allowed; }
.vps-service-tool-actions .vps-service-tool:disabled { border-color: #dbe3ee; opacity: .58; }
.vps-service-tool-actions .vps-service-tool:disabled > svg,
.vps-service-tool-actions .vps-service-tool:disabled strong,
.vps-service-tool-actions .vps-service-tool:disabled small { color: #8291a6; }
.vps-spec-grid { border-top: 1px solid #dbe5f1; display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 20px; padding-top: 18px; }
.vps-spec-grid article { align-items: center; border: 1px solid #dbe5f1; border-radius: 7px; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 68px; padding: 10px; }
.vps-spec-grid article > span { border: 0; border-radius: 6px; height: 38px; width: 38px; }
.vps-spec-grid article > span svg { height: 18px; width: 18px; }
.vps-spec-grid article > span.is-system-image { background: #fff; border: 1px solid #dbe5f1; }
.vps-spec-grid article > span.is-system-image img { display: block; height: 24px; max-width: 24px; object-fit: contain; width: 24px; }
.vps-spec-grid article div { display: grid; gap: 4px; min-width: 0; }
.vps-spec-grid article small { color: #697a94; font-size: 10px; font-weight: 700; }
.vps-spec-grid article strong { color: #111d34; font-size: 13px; overflow-wrap: anywhere; }
.vps-spec-grid article.is-copyable strong { font-size: 11px; white-space: nowrap; }
.vps-spec-grid article > button,
.vps-service-information dd > button { background: transparent; border: 0; color: #7b8ca5; cursor: pointer; padding: 3px; }
.vps-spec-grid article > button svg,
.vps-service-information dd > button svg { height: 15px; width: 15px; }
.vps-detail-grid { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vps-resource-detail,
.vps-service-information { background: #fff; border: 1px solid #d7e1ee; border-radius: 7px; min-width: 0; overflow: hidden; }
.vps-resource-detail > header,
.vps-service-information > header { border-bottom: 1px solid #dbe5f1; padding: 16px 20px; }
.vps-resource-detail h3,
.vps-service-information h3 { color: #0c1830; font-size: 15px; margin: 0; }
.vps-resource-detail dl { display: grid; margin: 0; padding: 8px 20px; }
.vps-resource-detail dl > div { align-items: center; border-bottom: 1px solid #edf1f6; display: grid; gap: 20px; grid-template-columns: 155px minmax(0, 1fr); min-height: 58px; }
.vps-resource-detail dl > div:last-child { border-bottom: 0; }
.vps-resource-detail dt { align-items: center; color: #263551; display: flex; font-size: 12px; font-weight: 700; gap: 10px; }
.vps-resource-detail dt span { color: #57708f; display: inline-flex; }
.vps-resource-detail dt svg { height: 17px; width: 17px; }
.vps-resource-detail dd { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(95px, auto) minmax(80px, 1fr) auto; margin: 0; }
.vps-resource-detail dd strong { color: #34435c; font-size: 11px; white-space: nowrap; }
.vps-resource-detail dd i { background: #dfe7f1; border-radius: 999px; display: block; height: 5px; overflow: hidden; }
.vps-resource-detail dd i b { background: var(--primary); border-radius: inherit; display: block; height: 100%; }
.vps-resource-detail dd mark { background: #eaf2ff; border-radius: 4px; color: var(--primary); font-size: 10px; font-weight: 800; padding: 4px 6px; }
.vps-resource-detail > footer { align-items: center; border-top: 1px solid #dbe5f1; color: #65758e; display: flex; font-size: 11px; min-height: 50px; padding: 0 20px; }
.vps-resource-detail > footer span { align-items: center; display: flex; gap: 8px; }
.vps-resource-detail > footer svg { color: var(--primary); height: 15px; width: 15px; }
.vps-empty-detail { color: #65758e; font-size: 12px; margin: 0; min-height: 180px; padding: 22px 20px; }
.vps-service-information dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0 20px; }
.vps-service-information dl > div { align-items: center; border-bottom: 1px solid #e5ebf3; display: grid; gap: 12px; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); min-height: 54px; padding: 8px 0; }
.vps-service-information dl > div:nth-child(odd) { border-right: 1px solid #e5ebf3; padding-right: 14px; }
.vps-service-information dl > div:nth-child(even) { padding-left: 14px; }
.vps-service-information dt { color: #596b86; font-size: 11px; }
.vps-service-information dd { align-items: center; color: #0d1930; display: flex; font-size: 11px; font-weight: 700; gap: 5px; justify-content: flex-end; margin: 0; min-width: 0; }
.vps-service-information dd > span:not(.service-secret-control) { overflow-wrap: anywhere; text-align: right; }
.vps-service-information .service-secret-control { max-width: 230px; }
.vps-service-information > footer { border-top: 1px solid #dbe5f1; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 12px 20px; }
.vps-service-unavailable { margin-top: 20px; }
.vps-console-dialog { width: min(1120px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 30px 90px rgba(4, 17, 39, .34); }
.vps-console-dialog::backdrop { background: rgba(5, 15, 31, .68); backdrop-filter: blur(5px); }
.vps-console-dialog[open] { display: grid; grid-template-rows: 68px minmax(0, 1fr) 54px; }
.vps-console-dialog > header { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #dfe7f1; background: #fff; }
.vps-console-dialog > header > span { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; border-radius: 7px; background: var(--primary, #1768e5); box-shadow: 0 8px 18px rgba(23, 104, 229, .2); }
.vps-console-dialog > header > span svg { width: 19px; height: 19px; }
.vps-console-dialog > header > div { min-width: 0; }
.vps-console-dialog h2 { margin: 0; color: #0c1830; font-size: 16px; line-height: 1.25; }
.vps-console-dialog header p { margin: 3px 0 0; overflow: hidden; color: #6d7d94; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vps-console-dialog header > i { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; color: #276445; border: 1px solid #ccebd9; border-radius: 7px; background: #effaf4; font-size: 9px; font-style: normal; font-weight: 800; white-space: nowrap; }
.vps-console-dialog header > i b { width: 7px; height: 7px; border-radius: 50%; background: #21b66f; box-shadow: 0 0 0 3px #dff5e9; }
.vps-console-dialog .icon-action { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; color: #65758d; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; }
.vps-console-dialog .icon-action:hover { color: #15233b; border-color: #dce5ef; background: #f5f8fc; }
.vps-console-dialog .icon-action svg { width: 17px; height: 17px; }
.vps-console-stage { position: relative; min-height: 0; overflow: hidden; background: #07111f; }
.vps-console-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; outline: 0; background: #07111f; }
.vps-console-screen canvas { max-width: 100%; max-height: 100%; }
.vps-console-loading,
.vps-console-error { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; color: #dce8f8; text-align: center; background: #07111f; }
.vps-console-loading[hidden],
.vps-console-error[hidden],
.vps-console-screen[hidden] { display: none; }
.vps-console-loading > span,
.vps-console-error > span { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 4px; color: #5ea1ff; border: 1px solid #23446f; border-radius: 8px; background: #10223a; }
.vps-console-loading > span { animation: vps-console-spin 1s linear infinite; }
.vps-console-loading svg,
.vps-console-error svg { width: 21px; height: 21px; }
.vps-console-loading strong,
.vps-console-error strong { color: #f4f8ff; font-size: 15px; }
.vps-console-loading p,
.vps-console-error p { max-width: 430px; margin: 0; color: #92a5bf; font-size: 11px; line-height: 1.5; }
.vps-console-error button { min-height: 38px; margin-top: 7px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; color: #fff; border: 0; border-radius: 7px; background: var(--primary, #1768e5); font-size: 10px; font-weight: 800; cursor: pointer; }
.vps-console-error button svg { width: 14px; height: 14px; }
.vps-console-dialog > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; border-top: 1px solid #dfe7f1; background: #f8fafc; }
.vps-console-dialog > footer > span { display: inline-flex; align-items: center; gap: 7px; color: #63738b; font-size: 9px; }
.vps-console-dialog > footer > span svg { width: 14px; height: 14px; color: #20a968; }
.vps-console-dialog > footer > div { display: flex; align-items: center; gap: 8px; }
.vps-console-dialog > footer .btn { min-height: 36px; padding: 0 16px; font-size: 10px; }
.vps-console-dialog > footer .vps-console-key-command { color: #25466f; }
.vps-console-dialog > footer .vps-console-key-command[hidden] { display: none; }
@keyframes vps-console-spin { to { transform: rotate(360deg); } }
@media (max-width: 1250px) {
    .service-contract-summary.is-vps { grid-template-columns: auto minmax(160px, 1fr) auto auto auto auto; }
    .service-contract-summary.is-vps .service-contract-vps-metric:last-child { display: none; }
    .vps-service-header { grid-template-columns: auto minmax(0, 1fr); }
    .vps-service-actions { grid-column: 1 / -1; justify-content: flex-end; }
    .vps-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .service-contract-summary.is-vps { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
    .service-contract-summary.is-vps .service-contract-vps-metric { display: none; }
    .vps-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vps-service-workspace { padding: 16px; }
    .vps-service-header { align-items: start; gap: 12px; }
    .vps-service-mark { height: 46px; width: 46px; }
    .vps-service-identity h2 { font-size: 19px; }
    .vps-service-actions { align-items: stretch; display: grid; gap: 10px; grid-template-columns: 1fr; }
    .vps-service-power-actions,
    .vps-service-tool-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vps-service-tool-actions { border-left: 0; border-top: 1px solid #dbe5f1; padding-left: 0; padding-top: 10px; }
    .vps-service-actions form,
    .vps-service-actions button { min-width: 0; width: 100%; }
    .vps-spec-grid { grid-template-columns: 1fr 1fr; }
    .vps-spec-grid article.is-copyable { grid-column: 1 / -1; }
    .vps-detail-grid { gap: 14px; }
    .vps-resource-detail dl > div { gap: 8px; grid-template-columns: 1fr; padding: 10px 0; }
    .vps-resource-detail dd { grid-template-columns: auto minmax(70px, 1fr) auto; }
    .vps-service-information dl { grid-template-columns: 1fr; padding: 0 16px; }
    .vps-service-information dl > div:nth-child(odd) { border-right: 0; padding-right: 0; }
    .vps-service-information dl > div:nth-child(even) { padding-left: 0; }
    .vps-service-information > footer { grid-template-columns: 1fr; padding: 12px 16px; }
    .vps-console-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
    .vps-console-dialog[open] { grid-template-rows: 62px minmax(0, 1fr) 50px; }
    .vps-console-dialog > header { grid-template-columns: 36px minmax(0, 1fr) 34px; gap: 9px; padding: 0 12px; }
    .vps-console-dialog > header > span { width: 36px; height: 36px; }
    .vps-console-dialog header > i { display: none; }
    .vps-console-dialog h2 { font-size: 14px; }
    .vps-console-dialog > footer { justify-content: flex-end; padding: 0 12px; }
    .vps-console-dialog > footer > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vps-console-loading > span { animation: none; } }
/* Affiliate program */
.affiliate-admin-page,.affiliate-client-page{gap:18px}.affiliate-hero,.affiliate-client-hero{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-top:3px solid var(--brand-primary)}
.affiliate-hero-copy,.affiliate-panel-head,.affiliate-client-empty,.affiliate-link-panel header,.affiliate-balance-panel header{display:flex;align-items:center;gap:14px;min-width:0}.affiliate-hero-copy>span,.affiliate-panel-head>span,.affiliate-client-empty>span,.affiliate-link-panel header>span,.affiliate-balance-panel header>span{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:8px;background:var(--brand-primary-soft);color:var(--brand-primary)}
.affiliate-hero-copy svg,.affiliate-panel-head svg,.affiliate-client-empty svg,.affiliate-link-panel header svg,.affiliate-balance-panel header svg{width:21px;height:21px}.affiliate-hero small,.affiliate-client-hero small,.affiliate-client-empty small{font-size:10px;font-weight:800;color:var(--brand-primary)}.affiliate-hero h2,.affiliate-panel-head h2,.affiliate-client-hero h2,.affiliate-client-empty h2,.affiliate-link-panel h2,.affiliate-balance-panel h2{margin:3px 0 2px;font-size:18px;letter-spacing:0}.affiliate-hero p,.affiliate-panel-head p,.affiliate-client-hero p,.affiliate-client-empty p,.affiliate-link-panel p,.affiliate-balance-panel p{margin:0;color:#71809a;font-size:12px}
.affiliate-summary{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));margin:0}.affiliate-summary div{padding:3px 22px;border-left:1px solid #dce5f0}.affiliate-summary dt,.affiliate-row-metrics dt{font-size:9px;text-transform:uppercase;color:#74829a}.affiliate-summary dd,.affiliate-row-metrics dd{margin:3px 0 0;font-weight:800;font-size:15px}
.affiliate-admin-grid,.affiliate-client-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.affiliate-settings-panel,.affiliate-link-panel,.affiliate-balance-panel{padding:0 22px 22px}.affiliate-panel-head,.affiliate-link-panel header,.affiliate-balance-panel header{padding:18px 0;border-bottom:1px solid #dce5f0;margin-bottom:18px}.affiliate-switch{display:flex;align-items:center;gap:10px;padding:13px 14px;margin-bottom:16px;border:1px solid var(--brand-primary-border);background:var(--brand-primary-subtle);border-radius:7px;font-size:12px}.affiliate-switch input{position:absolute;opacity:0}.affiliate-switch span{width:36px;height:20px;padding:2px;border-radius:10px;background:#c9d4e3;transition:.2s}.affiliate-switch span:before{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #73829a80;transition:.2s}.affiliate-switch input:checked+span{background:var(--brand-primary)}.affiliate-switch input:checked+span:before{transform:translateX(16px)}
.affiliate-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.affiliate-form-grid label,.affiliate-link-panel label{display:grid;gap:6px;min-width:0;font-size:11px;font-weight:750;color:#25324a}.affiliate-form-grid .span-2{grid-column:1/-1}.affiliate-form-grid input,.affiliate-form-grid select,.affiliate-link-panel input,.affiliate-ledger-row select,.affiliate-ledger-row input{width:100%;min-width:0;height:42px;border:1px solid #cfdaea;border-radius:7px;background:#fff;padding:0 12px;color:#111c31;font-family: var(--asv-font-family);letter-spacing:0}.affiliate-form-grid small{font-size:9px;line-height:1.4;color:#7c899f;font-weight:500}.field-with-suffix,.field-with-prefix{display:flex;align-items:center;border:1px solid #cfdaea;border-radius:7px;overflow:hidden;background:#fff}.field-with-suffix input,.field-with-prefix input{border:0;border-radius:0}.field-with-suffix i,.field-with-prefix i{font-size:10px;color:#63728c;padding:0 11px;white-space:nowrap;font-style:normal}.field-with-prefix i{border-right:1px solid #dce5f0}.affiliate-form-actions{display:flex;justify-content:flex-end;gap:8px}.affiliate-settings-panel>.btn,.affiliate-form-actions{margin-top:18px}
.affiliate-list-panel,.affiliate-ledger-panel,.affiliate-client-ledger{padding:0 22px}.affiliate-list-head,.affiliate-client-ledger>header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid #dce5f0}.affiliate-list-head h2,.affiliate-client-ledger h2{margin:0;font-size:15px}.affiliate-list-head p,.affiliate-client-ledger header p{margin:3px 0 0;color:#76849b;font-size:10px}.affiliate-list-head>strong{font-size:11px;color:var(--brand-primary)}.affiliate-row{display:grid;grid-template-columns:minmax(210px,1.25fr) minmax(200px,1fr) minmax(300px,1.5fr) auto;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid #e1e8f1}.affiliate-row:last-child{border-bottom:0}.affiliate-person{display:flex;align-items:center;gap:10px;min-width:0}.affiliate-person>span{display:grid;place-items:center;width:38px;height:38px;border-radius:7px;background:var(--brand-primary-soft);color:var(--brand-primary)}.affiliate-person>span svg{width:18px}.affiliate-person div{display:grid;min-width:0}.affiliate-person strong,.affiliate-person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.affiliate-person strong{font-size:12px}.affiliate-person small{font-size:10px;color:#77859b}.status-pill{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:12px;background:#edf1f6;color:#6c7990;font-size:9px;font-style:normal;font-weight:800}.status-pill.is-active{background:#dff8e8;color:#07823d}.affiliate-link{display:grid;gap:3px;min-width:0}.affiliate-link small{font-size:8px;color:#7a889f}.affiliate-link a{display:flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:11px;font-weight:750;text-decoration:none;overflow:hidden}.affiliate-link a svg{width:12px;flex:0 0 auto}.affiliate-link span{font-size:9px;color:#7a889f}.affiliate-row-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin:0}.affiliate-row-metrics div{padding-left:12px;border-left:1px solid #e1e8f1}.affiliate-row-metrics dd{font-size:11px}.affiliate-row-actions{display:flex;gap:6px}.affiliate-row-actions form{margin:0}.icon-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid #cfdaea;border-radius:7px;background:#fff;color:#64748b;cursor:pointer}.icon-btn svg{width:16px;height:16px}
.affiliate-empty{display:grid;justify-items:center;padding:36px;text-align:center;color:#76849b}.affiliate-empty>svg{width:26px}.affiliate-empty strong{margin-top:8px;color:#172238}.affiliate-empty p{margin:4px 0;font-size:11px}.affiliate-empty.compact{padding:24px}.affiliate-ledger-row,.affiliate-client-ledger article{display:grid;grid-template-columns:minmax(220px,1fr) auto auto minmax(280px,auto);align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid #e1e8f1}.affiliate-ledger-row>div,.affiliate-client-ledger article>div{display:grid}.affiliate-ledger-row strong,.affiliate-client-ledger article strong{font-size:11px}.affiliate-ledger-row small,.affiliate-client-ledger article small{font-size:9px;color:#78869d}.affiliate-ledger-row>b,.affiliate-client-ledger article>b{font-size:11px}.affiliate-ledger-row form{display:flex;gap:6px}.affiliate-ledger-row select{width:128px}.affiliate-ledger-row input{width:145px}.affiliate-ledger-row .btn{height:38px}.commission-status{padding:5px 8px;border-radius:10px;background:#edf1f6;color:#617089;font-size:9px;font-weight:800}.commission-status.is-reserved{background:#fff3d7;color:#9b6700}.commission-status.is-available{background:#e0f1ff;color:#075fa7}.commission-status.is-paid{background:#dff8e8;color:#07823d}.commission-status.is-canceled{background:#ffe5e5;color:#b42323}
.affiliate-client-hero{padding:20px 22px}.affiliate-client-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.affiliate-client-stats article{display:flex;align-items:center;gap:10px;min-width:0;padding:15px;border:1px solid #d6e0ec;border-radius:7px;background:#fff}.affiliate-client-stats article>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:var(--brand-primary-soft);color:var(--brand-primary)}.affiliate-client-stats svg{width:17px}.affiliate-client-stats div{display:grid;min-width:0}.affiliate-client-stats small{font-size:9px;color:#738198}.affiliate-client-stats strong{font-size:14px;overflow:hidden;text-overflow:ellipsis}.affiliate-copy-field{display:flex;gap:7px}.affiliate-copy-field input{flex:1;background:#f6f9fd}.affiliate-link-panel form{display:grid;gap:12px;margin-top:16px}.affiliate-link-panel form .btn{justify-self:end}.affiliate-coupon-note{display:flex;align-items:center;gap:10px;padding:12px;margin-top:15px;border-radius:7px;background:var(--brand-primary-soft);color:var(--brand-primary)}.affiliate-coupon-note svg{width:19px}.affiliate-coupon-note span{display:grid}.affiliate-coupon-note small{font-size:8px}.affiliate-coupon-note strong{font-size:12px}.affiliate-balance-panel dl{margin:0}.affiliate-balance-panel dl div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #e1e8f1}.affiliate-balance-panel dt{font-size:11px;color:#68778f}.affiliate-balance-panel dd{margin:0;font-size:12px;font-weight:800}.affiliate-client-ledger article{grid-template-columns:1fr auto auto}.affiliate-client-ledger article:last-child{border-bottom:0}.affiliate-client-empty{padding:42px 28px;justify-content:center}.affiliate-client-empty>span{width:52px;height:52px;flex-basis:52px}
.affiliate-join-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);gap:28px;padding:28px;border-top:3px solid var(--brand-primary);align-items:start}.affiliate-join-copy{display:flex;gap:15px;align-items:flex-start}.affiliate-join-copy>span{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:8px;background:var(--brand-primary-soft);color:var(--brand-primary)}.affiliate-join-copy>span svg{width:23px;height:23px}.affiliate-join-copy small{font-size:10px;font-weight:800;color:var(--brand-primary)}.affiliate-join-copy h2{margin:4px 0 4px;font-size:20px;letter-spacing:0}.affiliate-join-copy p{max-width:620px;margin:0;color:#6f7e95;font-size:12px;line-height:1.55}.affiliate-join-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:24px 0 0;padding-left:63px}.affiliate-join-terms div{min-width:0;padding:0 16px;border-left:1px solid #dce5f0}.affiliate-join-terms div:first-child{padding-left:0;border-left:0}.affiliate-join-terms dt{font-size:9px;color:#76849a;text-transform:uppercase;font-weight:750}.affiliate-join-terms dd{margin:4px 0 0;color:#172238;font-size:12px;font-weight:800;line-height:1.35}.affiliate-join-form{display:grid;gap:9px;padding:18px 0 0;border-left:1px solid #dce5f0;padding-left:28px}.affiliate-join-form>label{font-size:12px;font-weight:800;color:#172238}.affiliate-join-form .field-with-prefix{height:44px}.affiliate-join-form input{width:100%;min-width:0;height:42px;border:0;padding:0 12px;color:#111c31;font-family: var(--asv-font-family);font-size:12px;letter-spacing:0;outline:0}.affiliate-join-form>small{color:#738198;font-size:10px;overflow-wrap:anywhere}.affiliate-join-form>small strong{color:var(--brand-primary)}.affiliate-join-form .btn{justify-self:end;margin-top:5px}
.affiliate-withdrawal-panel{padding:0 22px}.affiliate-withdrawal-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end;padding:18px 0;border-bottom:1px solid #e1e8f1}.affiliate-withdrawal-form label{display:grid;gap:6px;font-size:11px;font-weight:750;color:#25324a}.affiliate-withdrawal-form input,.affiliate-withdrawal-form select{width:100%;min-width:0;height:42px;border:1px solid #cfdaea;border-radius:7px;background:#fff;padding:0 12px;color:#111c31;font-family: var(--asv-font-family);letter-spacing:0}.affiliate-withdrawal-form .btn{height:42px;white-space:nowrap}.affiliate-withdrawal-history{display:grid}.affiliate-withdrawal-history article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid #e1e8f1}.affiliate-withdrawal-history article:last-child{border-bottom:0}.affiliate-withdrawal-history strong{font-size:12px}.affiliate-withdrawal-history small,.affiliate-withdrawal-history p{font-size:10px;color:#77859b}.affiliate-withdrawal-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(110px,.5fr) minmax(220px,1fr) auto minmax(360px,auto);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #e1e8f1}.affiliate-withdrawal-row:last-child{border-bottom:0}.affiliate-withdrawal-row>div{display:grid;gap:3px;min-width:0}.affiliate-withdrawal-row strong,.affiliate-withdrawal-row b{font-size:12px}.affiliate-withdrawal-row small{font-size:8px;color:#7a889f;font-weight:800}.affiliate-withdrawal-row span:not(.commission-status){font-size:10px;color:#71809a;overflow-wrap:anywhere}.affiliate-withdrawal-row form{display:flex;gap:6px}.affiliate-withdrawal-row select,.affiliate-withdrawal-row input{height:38px;border:1px solid #cfdaea;border-radius:7px;background:#fff;padding:0 10px;color:#111c31;font:inherit}.commission-status.is-pending{background:#fff3d7;color:#9b6700}.commission-status.is-approved{background:#e0f1ff;color:#075fa7}.commission-status.is-rejected{background:#ffe5e5;color:#b42323}
@media(max-width:1180px){.affiliate-admin-grid,.affiliate-client-grid{grid-template-columns:1fr}.affiliate-row{grid-template-columns:1fr 1fr}.affiliate-row-metrics{order:3;grid-column:1/-1}.affiliate-row-actions{justify-content:flex-end}.affiliate-client-stats{grid-template-columns:repeat(3,1fr)}.affiliate-join-panel{grid-template-columns:1fr}.affiliate-join-form{padding-left:63px;border-left:0;border-top:1px solid #dce5f0}.affiliate-withdrawal-form,.affiliate-withdrawal-row{grid-template-columns:1fr 1fr}.affiliate-withdrawal-row form{grid-column:1/-1}}
@media(max-width:720px){.affiliate-hero,.affiliate-client-hero{align-items:flex-start;gap:16px;flex-direction:column}.affiliate-summary{width:100%;grid-template-columns:1fr}.affiliate-summary div{display:flex;justify-content:space-between;padding:9px 0;border-left:0;border-top:1px solid #dce5f0}.affiliate-form-grid{grid-template-columns:1fr}.affiliate-form-grid .span-2{grid-column:auto}.affiliate-row{grid-template-columns:1fr}.affiliate-row-metrics{grid-column:auto;grid-template-columns:1fr 1fr;gap:8px}.affiliate-row-actions{justify-content:flex-start}.affiliate-ledger-row,.affiliate-client-ledger article{grid-template-columns:1fr auto}.affiliate-ledger-row form{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.affiliate-ledger-row form .btn{grid-column:1/-1}.affiliate-ledger-row select,.affiliate-ledger-row input{width:100%}.affiliate-client-stats{grid-template-columns:1fr 1fr}.affiliate-admin-page,.affiliate-client-page{gap:12px}.affiliate-join-panel{padding:20px}.affiliate-join-terms{grid-template-columns:1fr 1fr;padding-left:0;gap:12px;margin-top:20px}.affiliate-join-terms div,.affiliate-join-terms div:first-child{padding:0 0 10px;border-left:0;border-bottom:1px solid #dce5f0}.affiliate-join-form{padding-left:0}.affiliate-withdrawal-form,.affiliate-withdrawal-row{grid-template-columns:1fr}.affiliate-withdrawal-row form{display:grid;grid-template-columns:1fr}.affiliate-withdrawal-row select,.affiliate-withdrawal-row input{width:100%}}
@media(max-width:460px){.affiliate-client-stats{grid-template-columns:1fr}.affiliate-row-metrics{grid-template-columns:1fr}.affiliate-settings-panel,.affiliate-link-panel,.affiliate-balance-panel,.affiliate-list-panel,.affiliate-ledger-panel,.affiliate-client-ledger,.affiliate-withdrawal-panel{padding-left:14px;padding-right:14px}}

/* Affiliate controls follow the shared panel scale and typography. */
.affiliate-admin-page,.affiliate-client-page{font-family:"Plus Jakarta Sans","Segoe UI",sans-serif}
.affiliate-list-head h2,.affiliate-client-ledger h2{font-size:16px}.affiliate-list-head p,.affiliate-client-ledger header p{font-size:11px;line-height:1.45}.affiliate-person strong{font-size:13px}.affiliate-person small{font-size:11px}.affiliate-link small,.affiliate-row-metrics dt{font-size:9px;font-weight:750}.affiliate-link a{font-size:12px}.affiliate-link span{font-size:10px}.affiliate-row-metrics dd{font-size:13px}.affiliate-row-actions .icon-btn{width:36px;height:36px}.affiliate-row-actions .icon-btn.is-danger{border-color:#f1b8b8;color:#c62828;background:#fff7f7}.status-pill.is-blocked{background:#ffe5e5;color:#b42323}
.affiliate-balance-admin{padding:0 22px 22px}.affiliate-balance-admin .affiliate-panel-head{padding:18px 0;margin-bottom:16px;border-bottom:1px solid #dce5f0}.affiliate-balance-adjust-form{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(180px,.8fr) minmax(260px,1.6fr) auto;gap:12px;align-items:end}.affiliate-balance-adjust-form label{display:grid;gap:6px;min-width:0;color:#25324a;font-size:12px;font-weight:750}.affiliate-balance-adjust-form input,.affiliate-balance-adjust-form select{width:100%;min-width:0;height:42px;border:1px solid #cfdaea;border-radius:7px;background:#fff;padding:0 12px;color:#111c31;font-family: var(--asv-font-family);letter-spacing:0}.affiliate-balance-adjust-form .field-with-prefix input{border:0;border-radius:0}.affiliate-balance-adjust-form .btn{height:42px;white-space:nowrap;font-family: var(--asv-font-family);font-size:12px;font-weight:750}
.affiliate-withdrawal-hint{margin:12px 0 4px;color:#68778f;font-size:11px;line-height:1.45}.affiliate-withdrawal-form label{font-size:12px}.affiliate-withdrawal-form input,.affiliate-withdrawal-form select,.affiliate-withdrawal-form .btn{font-family:inherit;font-size:12px}.affiliate-withdrawal-form .btn{font-weight:750}.affiliate-list-head>strong{font-size:12px}
.affiliate-client-page .affiliate-copy-field input{font-family:"Plus Jakarta Sans","Segoe UI",sans-serif;font-size:14px;line-height:1.2;letter-spacing:0;color:#1b2a43}.affiliate-client-page .btn{gap:8px;min-height:46px;padding-inline:18px;font-family:"Plus Jakarta Sans","Segoe UI",sans-serif;font-size:13px;font-weight:800;letter-spacing:0}.affiliate-client-page .btn svg{width:17px;height:17px;flex:0 0 auto}.affiliate-client-page .affiliate-copy-field .icon-btn{gap:0;flex:0 0 36px;width:36px;height:42px}.affiliate-client-page .affiliate-copy-field .icon-btn svg{width:17px;height:17px}
.affiliate-client-page .affiliate-copy-field .icon-btn .copy-default-icon,.affiliate-client-page .affiliate-copy-field .icon-btn .copy-success-icon{display:grid;place-items:center}.affiliate-client-page .affiliate-copy-field .icon-btn .copy-success-icon{display:none}.affiliate-client-page .affiliate-copy-field .icon-btn.is-copied{border-color:#a9dfc0;background:#edf9f2;color:#159451}.affiliate-client-page .affiliate-copy-field .icon-btn.is-copied .copy-default-icon{display:none}.affiliate-client-page .affiliate-copy-field .icon-btn.is-copied .copy-success-icon{display:grid}
.affiliate-client-page .affiliate-copy-feedback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1180px){.affiliate-balance-adjust-form{grid-template-columns:1fr 1fr}.affiliate-balance-adjust-form .span-2{grid-column:1/-1}.affiliate-balance-adjust-form .btn{justify-self:end}}
@media(max-width:720px){.affiliate-balance-adjust-form{grid-template-columns:1fr}.affiliate-balance-adjust-form .span-2{grid-column:auto}.affiliate-balance-adjust-form .btn{justify-self:stretch}.affiliate-balance-admin{padding-left:14px;padding-right:14px}}

/* Cloudflare Turnstile plugin */
.turnstile-heading{border-top-color:var(--brand-primary)}.turnstile-heading small{color:var(--brand-primary)}.turnstile-mark{color:var(--brand-primary);background:var(--brand-primary-soft);border-color:var(--brand-primary-border);box-shadow:none}.turnstile-mark svg{width:24px;height:24px}.turnstile-status{background:var(--brand-primary-soft)!important;color:var(--brand-primary)!important}.turnstile-status.is-configured{background:var(--brand-primary-soft)!important;color:var(--brand-primary)!important}.turnstile-wide-field{grid-column:1/-1}.turnstile-help-card{overflow:hidden}.turnstile-help-card>header>span,.cloudflare-turnstile-settings .google-auth-form>header>span{color:var(--brand-primary);background:var(--brand-primary-soft)}.cloudflare-turnstile-settings .google-auth-toggle input:checked+span{background:var(--brand-primary)}.asv-turnstile-widget{box-sizing:border-box;width:100%;min-width:0;min-height:65px;display:block;overflow:hidden}.asv-turnstile-widget>div,.asv-turnstile-widget iframe{width:100%!important;max-width:100%!important}.turnstile-help-card>ul{padding-top:17px}.turnstile-help-card>a{margin-bottom:10px;color:var(--brand-primary);border-color:var(--brand-primary-border)}.turnstile-help-card>a:last-of-type{margin-bottom:18px}
@media(max-width:700px){.turnstile-heading{grid-template-columns:48px minmax(0,1fr)}.turnstile-status{grid-column:2;margin:0;justify-self:start}.turnstile-layout{gap:12px}}

/* Two-factor authentication plugin */
.two-factor-heading{border-top-color:var(--brand-primary)}.two-factor-heading small{color:var(--brand-primary)}.two-factor-mark{color:var(--brand-primary);background:var(--brand-primary-soft);border-color:var(--brand-primary-border);box-shadow:none}.two-factor-mark svg{width:24px;height:24px}.two-factor-layout{align-items:start}.two-factor-methods{display:grid;gap:12px;margin:0;padding:0;border:0}.two-factor-methods legend{margin:0 0 10px;color:#25324a;font-size:12px;font-weight:800}.two-factor-method-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:14px;border:1px solid #cfdaea;border-radius:9px;background:#fff;cursor:pointer}.two-factor-method-card input{position:absolute;opacity:0}.two-factor-method-card>span{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:var(--brand-primary-soft);color:var(--brand-primary)}.two-factor-method-card>span svg{width:21px;height:21px}.two-factor-method-card strong,.two-factor-method-card small{display:block}.two-factor-method-card strong{font-size:13px;color:#192640}.two-factor-method-card small{margin-top:3px;color:#75849b;font-size:11px;line-height:1.45}.two-factor-method-card>i{width:18px;height:18px;border:2px solid #c4d0e0;border-radius:50%;background:#fff}.two-factor-method-card:has(input:checked){border-color:var(--brand-primary);background:var(--brand-primary-subtle);box-shadow:0 0 0 2px var(--brand-primary-soft)}.two-factor-method-card:has(input:checked)>i{border:5px solid var(--brand-primary)}.two-factor-method-error{display:block;margin-bottom:10px}.two-factor-help-card>header>span,.two-factor-settings .google-auth-form>header>span{color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-help-card>ul{padding-top:17px}.two-factor-help-card>a{margin-bottom:10px;color:var(--brand-primary);border-color:var(--brand-primary-border)}
.two-factor-client-panel{grid-column:1;padding:0 22px 22px}.two-factor-client-panel .account-panel-header{padding:18px 0;border-bottom:1px solid #dce5f0}.two-factor-client-panel .account-panel-header>span{color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-client-status{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:10px;white-space:nowrap}.two-factor-client-body{padding-top:18px}.two-factor-current,.two-factor-hint{margin:0;color:#61718a;font-size:12px;line-height:1.5}.two-factor-current{display:flex;align-items:center;gap:7px;color:#273752}.two-factor-current svg{width:16px;height:16px;color:var(--brand-primary)}.two-factor-preference-form{display:grid;gap:14px;margin-top:16px}.two-factor-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.two-factor-choice{position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:12px;border:1px solid #cfdaea;border-radius:8px;cursor:pointer}.two-factor-choice input{position:absolute;opacity:0}.two-factor-choice>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-choice>span svg{width:17px;height:17px}.two-factor-choice strong{font-size:12px;color:#20304a}.two-factor-choice small{font-size:10px;color:#77869c;line-height:1.4}.two-factor-choice.is-selected,.two-factor-choice:has(input:checked){border-color:var(--brand-primary);background:var(--brand-primary-subtle)}.two-factor-preference-form .btn{justify-self:start;min-height:40px}.auth-simple-shell{display:grid;place-items:center;min-height:100vh;padding:24px;background:#f3f6fa}.auth-simple-card{width:min(460px,100%);padding:32px;border:1px solid #dbe5f1;border-radius:12px;background:#fff;box-shadow:0 20px 55px rgba(30,55,90,.1);text-align:center}.auth-simple-brand{display:block;margin:0 auto 20px}.auth-simple-brand img{display:block;width:min(180px,65%);height:auto;margin:0 auto}.two-factor-challenge-icon{display:grid;place-items:center;width:52px;height:52px;margin:4px auto 16px;border-radius:12px;color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-challenge-icon svg{width:25px;height:25px}.auth-simple-card h1{margin:0;color:#13213a;font-size:24px}.auth-simple-subtitle{margin:8px 0 20px;color:#6f7e95;font-size:13px;line-height:1.5}.challenge-choice-grid{margin-top:8px}.challenge-choice-grid form{min-width:0}.two-factor-choice-button{display:grid;justify-items:center;gap:7px;width:100%;min-height:132px;padding:18px 12px;border:1px solid #cfdaea;border-radius:9px;background:#fff;color:#21314c;cursor:pointer;font:inherit}.two-factor-choice-button:hover{border-color:var(--brand-primary);background:var(--brand-primary-subtle)}.two-factor-choice-button svg{width:24px;height:24px;color:var(--brand-primary)}.two-factor-choice-button strong{font-size:12px}.two-factor-choice-button small{color:#77869c;font-size:10px;line-height:1.4}.two-factor-selected-method{display:flex;align-items:center;gap:10px;padding:12px;text-align:left;border:1px solid var(--brand-primary-border);border-radius:8px;background:var(--brand-primary-subtle)}.two-factor-selected-method>span{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--brand-primary);background:#fff}.two-factor-selected-method strong,.two-factor-selected-method small{display:block}.two-factor-selected-method strong{font-size:12px;color:#20304a}.two-factor-selected-method small{margin-top:3px;color:#6f7e95;font-size:10px;line-height:1.4}.two-factor-code-form{margin-top:16px;text-align:left}.two-factor-code-form label{display:grid;gap:6px;color:#25324a;font-size:12px;font-weight:750}.two-factor-code-form input{height:46px;padding:0 12px;border:1px solid #cbd8e8;border-radius:8px;text-align:center;letter-spacing:5px;font-size:20px;font-weight:800}.two-factor-code-form .btn{margin-top:2px}.two-factor-change-form{margin-top:13px}.link-button,.auth-simple-back{border:0;background:none;color:var(--brand-primary);font-family: var(--asv-font-family);font-size:11px;font-weight:750;text-decoration:none;cursor:pointer}.auth-simple-back{display:inline-block;margin-top:20px}.two-factor-setup-box{display:grid;gap:10px;padding:16px;text-align:left;border:1px solid #cfdaea;border-radius:9px;background:#f8fbff}.two-factor-setup-box h2{margin:0;color:#20304a;font-size:14px}.two-factor-setup-box p{margin:0;color:#6f7e95;font-size:11px;line-height:1.5}.two-factor-setup-box code{display:block;padding:11px 10px;overflow-wrap:anywhere;border:1px solid #dbe5f1;border-radius:7px;background:#fff;color:#172238;text-align:center;font-size:15px;font-weight:800;letter-spacing:2px}.two-factor-uri-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--brand-primary);font-size:11px;font-weight:750;text-decoration:none}.two-factor-uri-link svg{width:14px;height:14px}
@media(max-width:720px){.two-factor-client-panel{padding-left:14px;padding-right:14px}.two-factor-choice-grid{grid-template-columns:1fr}.auth-simple-card{padding:24px 18px}.challenge-choice-grid{grid-template-columns:1fr}}

/* Admin two-factor method cards: keep the shared form grid from constraining the copy. */
.two-factor-settings .google-auth-form{min-width:0}
.two-factor-settings .google-auth-form-body{display:block;min-width:0;overflow:visible}
.two-factor-settings .two-factor-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-items:start;width:100%;min-width:0;clear:both}
.two-factor-settings .two-factor-methods legend{grid-column:1/-1}
.two-factor-settings .two-factor-method-card{width:100%;min-width:0;box-sizing:border-box;align-items:start}
.two-factor-settings .two-factor-method-card>span:nth-of-type(2){display:block;width:auto;height:auto;min-width:0;place-items:initial;border-radius:0;background:transparent;color:inherit}
.two-factor-settings .two-factor-method-card>span:nth-of-type(2) strong,.two-factor-settings .two-factor-method-card>span:nth-of-type(2) small{min-width:0;overflow-wrap:normal;word-break:normal}
.two-factor-settings .google-auth-form>footer{position:static;clear:both;margin-top:20px}
@media(max-width:720px){.two-factor-settings .two-factor-methods{grid-template-columns:1fr}.two-factor-settings .two-factor-methods legend{grid-column:auto}}
.two-factor-admin-panel{grid-column:1/-1}
.two-factor-qr{display:grid;place-items:center;width:100%;padding:10px;border:1px solid var(--brand-primary-border);border-radius:10px;background:#fff}.two-factor-qr svg{display:block;width:min(232px,100%);height:auto}.two-factor-runtime-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #dce5f0}.two-factor-runtime-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:start;gap:11px;padding:14px;border:1px solid #d5e0ed;border-radius:9px;background:#fff}.two-factor-runtime-card>span{display:grid;place-items:center;width:40px;height:40px;border-radius:9px}.two-factor-runtime-card>span svg{width:19px;height:19px}.two-factor-runtime-card.is-ready>span{color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-runtime-card.needs-action>span{color:#a35a00;background:#fff4dd}.two-factor-runtime-card small,.two-factor-runtime-card strong,.two-factor-runtime-card p{display:block;margin:0}.two-factor-runtime-card small{color:#7b8799;font-size:9px;font-weight:800;letter-spacing:.03em}.two-factor-runtime-card strong{margin-top:3px;color:#17253e;font-size:12px}.two-factor-runtime-card p{margin-top:5px;color:#6c7b91;font-size:10px;line-height:1.45}.two-factor-runtime-card>a{align-self:center;display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:10px;font-weight:800;text-decoration:none;white-space:nowrap}.two-factor-runtime-card>a svg{width:13px;height:13px}.two-factor-dependency-alert{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:11px 12px;border:1px solid #f2c77c;border-radius:8px;background:#fff8e8;color:#70450b;font-size:11px;line-height:1.45}.two-factor-dependency-alert>svg{flex:none;width:17px;height:17px;margin-top:1px}.two-factor-dependency-alert a{color:var(--brand-primary);font-weight:800}.two-factor-choice small{overflow-wrap:anywhere}
@media(max-width:980px){.two-factor-runtime-grid{grid-template-columns:1fr}.two-factor-runtime-card{grid-template-columns:40px minmax(0,1fr)}.two-factor-runtime-card>a{grid-column:2;justify-self:start}}
@media(max-width:520px){.two-factor-setup-box{padding:13px}.two-factor-qr{padding:7px}.two-factor-runtime-card{grid-template-columns:36px minmax(0,1fr);padding:12px}.two-factor-runtime-card>span{width:36px;height:36px}}
.two-factor-settings .two-factor-methods,.two-factor-settings .two-factor-runtime-grid{grid-template-columns:1fr}.two-factor-settings .two-factor-method-card{align-items:center}.two-factor-settings .two-factor-runtime-card{grid-template-columns:40px minmax(0,1fr) auto}.two-factor-settings .two-factor-runtime-card>a{grid-column:auto;justify-self:end}
@media(max-width:720px){.two-factor-settings .two-factor-runtime-card{grid-template-columns:40px minmax(0,1fr)}.two-factor-settings .two-factor-runtime-card>a{grid-column:2;justify-self:start}}
.two-factor-choice.is-disabled{cursor:not-allowed;opacity:.62;background:#f6f8fb}.two-factor-choice.is-disabled:has(input:checked){border-color:#cfdaea;box-shadow:none}
.security-config-grid{display:grid;min-width:0}.security-config-grid.has-extensions{grid-template-columns:minmax(390px,1.15fr) minmax(340px,.85fr)}.security-password-form{display:flex;min-width:0;flex-direction:column}.security-password-form .security-fields{width:100%;max-width:none;flex:1}.security-password-form .account-form-actions{margin-top:auto}.security-section-heading{display:flex;align-items:center;gap:10px;margin:20px 20px 0}.security-section-heading>span,.two-factor-inline-header>span,.two-factor-inline-intro>span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:8px;color:var(--brand-primary);background:var(--brand-primary-soft)}.security-section-heading svg,.two-factor-inline-header svg,.two-factor-inline-intro svg{width:16px;height:16px}.security-section-heading h3,.security-section-heading p,.two-factor-inline-header h3,.two-factor-inline-header p,.two-factor-inline-intro h4,.two-factor-inline-intro p{margin:0}.security-section-heading h3,.two-factor-inline-header h3{color:#172033;font-size:13px}.security-section-heading p,.two-factor-inline-header p,.two-factor-inline-intro p{margin-top:2px;color:#77859a;font-size:10px;line-height:1.4}.security-extension-column{min-width:0;padding:20px;border-left:1px solid #e3eaf3;background:#fbfcfe}.two-factor-inline-panel{min-width:0;height:100%;overflow:hidden;border:1px solid #dce5f0;border-radius:9px;background:#fff}.two-factor-inline-header{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px;border-bottom:1px solid #e3eaf3}.two-factor-inline-header>strong{padding:5px 8px;border-radius:999px;color:var(--brand-primary);background:var(--brand-primary-soft);font-size:9px}.two-factor-inline-body,.two-factor-inline-enrollment{padding:15px}.two-factor-inline-body .two-factor-preference-form{margin-top:12px}.two-factor-inline-body .two-factor-choice-grid{grid-template-columns:1fr}.two-factor-inline-body .two-factor-choice{padding:10px}.two-factor-inline-body .two-factor-preference-form .btn{width:100%;justify-self:stretch}.two-factor-inline-intro{display:flex;align-items:center;gap:10px;margin-bottom:12px}.two-factor-inline-intro h4{color:#172033;font-size:12px}.two-factor-inline-enrollment .two-factor-qr{width:min(216px,100%);margin:0 auto;padding:8px}.two-factor-inline-enrollment .two-factor-qr svg{width:min(196px,100%)}.two-factor-manual-key{margin-top:10px;border:1px solid #dce5f0;border-radius:8px;background:#fff}.two-factor-manual-key summary{padding:9px 10px;color:var(--brand-primary);font-size:10px;font-weight:800;cursor:pointer}.two-factor-manual-key code{display:block;margin:0 10px 9px;padding:9px;overflow-wrap:anywhere;border-radius:6px;background:#f5f8fc;color:#172033;text-align:center;font-size:11px;font-weight:800;letter-spacing:1.5px}.two-factor-manual-key a{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 10px 10px;color:var(--brand-primary);font-size:10px;font-weight:800;text-decoration:none}.two-factor-manual-key a svg{width:13px;height:13px}.two-factor-inline-confirm{display:grid;gap:8px;margin-top:12px}.two-factor-inline-confirm label{display:grid;gap:6px;color:#25324a;font-size:10px;font-weight:800}.two-factor-inline-confirm input{width:100%;height:42px;padding:0 10px;border:1px solid #ccd8e7;border-radius:8px;outline:0;color:#172033;text-align:center;font-family: var(--asv-font-family);font-size:18px;font-weight:800;letter-spacing:5px}.two-factor-inline-confirm input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-soft)}.two-factor-inline-confirm .btn{width:100%;min-height:40px}.two-factor-inline-cancel{text-align:center}.two-factor-inline-cancel button{padding:8px;border:0;background:transparent;color:#6f7e95;font-family: var(--asv-font-family);font-size:9px;font-weight:750;cursor:pointer}.two-factor-inline-cancel button:hover{color:var(--brand-primary)}
@media(max-width:1450px){.security-config-grid.has-extensions{grid-template-columns:1fr}.security-extension-column{border-top:1px solid #e3eaf3;border-left:0}.two-factor-inline-panel{height:auto}}
@media(max-width:640px){.security-section-heading{margin:16px 16px 0}.security-extension-column{padding:14px}.two-factor-inline-header{grid-template-columns:34px minmax(0,1fr)}.two-factor-inline-header>strong{grid-column:2;justify-self:start}.two-factor-inline-body,.two-factor-inline-enrollment{padding:13px}}

/* Compact security fields: the password form must not stretch to match the QR panel. */
.security-password-form{align-self:start}
.security-password-form .security-fields{flex:none;gap:14px;padding-top:18px;padding-bottom:20px}
.security-password-form .account-form-actions{margin-top:0}
.security-extension-column{align-self:start}
.two-factor-inline-panel{height:auto;align-self:start}

/* Keep inline 2FA actions proportional to the surrounding controls. */
.two-factor-inline-body .two-factor-preference-form .btn{width:auto;min-width:172px;min-height:36px;height:36px;padding:0 14px;gap:7px;justify-self:start;font-size:11px;line-height:1.2}
.two-factor-inline-body .two-factor-preference-form .btn svg,.two-factor-inline-confirm .btn svg{width:15px;height:15px;flex:0 0 15px}
.two-factor-inline-confirm .btn{min-height:38px;padding:0 14px;gap:7px;font-size:11px;line-height:1.2}
.two-factor-entry-reference{margin:0 0 10px;padding:9px 10px;border:1px solid var(--brand-primary-border);border-radius:8px;background:var(--brand-primary-subtle);color:#61718a;font-size:10px;line-height:1.45}.two-factor-entry-reference strong{color:var(--brand-primary)}.two-factor-inline-renew{text-align:center}.two-factor-inline-renew button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 9px;border:0;background:transparent;color:var(--brand-primary);font-family: var(--asv-font-family);font-size:9px;font-weight:800;cursor:pointer}.two-factor-inline-renew svg{width:13px;height:13px}
@media(max-width:640px){.two-factor-inline-body .two-factor-preference-form .btn{width:100%;justify-self:stretch}}
.two-factor-settings-layout{display:grid;gap:18px;min-width:0}.two-factor-config-form{min-width:0;overflow:hidden}.two-factor-config-body{display:grid;gap:22px;padding:20px}.two-factor-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-width:0}.two-factor-audience-card{min-width:0;margin:0;padding:16px;border:1px solid #d8e2ef;border-radius:10px;background:#fbfcfe}.two-factor-audience-header{display:flex;width:100%;align-items:center;gap:10px;padding:0 0 14px;border-bottom:1px solid #e1e8f2}.two-factor-audience-header>span:first-child,.two-factor-section-title>span{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:8px;color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-audience-header svg,.two-factor-section-title svg{width:17px;height:17px}.two-factor-audience-header strong,.two-factor-audience-header small{display:block}.two-factor-audience-header strong{color:#17233b;font-size:13px}.two-factor-audience-header small{margin-top:3px;color:#75839a;font-size:10px;line-height:1.4}.two-factor-method-list{display:grid;gap:10px;padding-top:14px}.two-factor-audience-card .two-factor-method-card{grid-template-columns:38px minmax(0,1fr) 18px;gap:10px;min-height:74px;padding:11px 12px;border-radius:8px;box-shadow:none}.two-factor-audience-card .two-factor-method-card>span:first-of-type{width:38px;height:38px;border-radius:8px}.two-factor-audience-card .two-factor-method-card>span:first-of-type svg{width:18px;height:18px}.two-factor-audience-card .two-factor-method-card strong{font-size:12px}.two-factor-audience-card .two-factor-method-card small{font-size:10px;line-height:1.4}.two-factor-audience-card .two-factor-method-card>i{position:relative;width:18px;height:18px;border:2px solid #bdcadb;border-radius:5px}.two-factor-audience-card .two-factor-method-card:has(input:checked)>i{border:0;background:var(--brand-primary)}.two-factor-audience-card .two-factor-method-card:has(input:checked)>i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}.two-factor-readiness{display:grid;gap:14px;padding-top:20px;border-top:1px solid #dce5f0}.two-factor-section-title{display:flex;align-items:center;gap:10px}.two-factor-section-title h4,.two-factor-section-title p{margin:0}.two-factor-section-title h4{color:#17233b;font-size:13px}.two-factor-section-title p{margin-top:2px;color:#75839a;font-size:10px}.two-factor-settings .two-factor-readiness .two-factor-runtime-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;border:0}.two-factor-settings .two-factor-readiness .two-factor-runtime-card{grid-template-columns:40px minmax(0,1fr);align-items:start}.two-factor-settings .two-factor-readiness .two-factor-runtime-card>a{grid-column:2;justify-self:start}.two-factor-explainer{overflow:hidden}.two-factor-explainer>header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #dce5f0}.two-factor-explainer>header>span{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:8px;color:var(--brand-primary);background:var(--brand-primary-soft)}.two-factor-explainer>header>span svg{width:18px;height:18px}.two-factor-explainer>header>div{min-width:0;flex:1}.two-factor-explainer h3,.two-factor-explainer p{margin:0}.two-factor-explainer h3{color:#17233b;font-size:15px}.two-factor-explainer p{margin-top:3px;color:#75839a;font-size:10px}.two-factor-explainer>header>a{display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:10px;font-weight:800;text-decoration:none;white-space:nowrap}.two-factor-explainer>header>a svg{width:13px;height:13px}.two-factor-explainer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.two-factor-explainer-grid article{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:9px;min-width:0;padding:16px 18px;border-right:1px solid #e2e9f2}.two-factor-explainer-grid article:last-child{border-right:0}.two-factor-explainer-grid article>svg{width:17px;height:17px;color:var(--brand-primary)}.two-factor-explainer-grid strong,.two-factor-explainer-grid small{display:block}.two-factor-explainer-grid strong{color:#263550;font-size:11px}.two-factor-explainer-grid small{margin-top:4px;color:#718198;font-size:9px;line-height:1.45}.two-factor-settings .two-factor-config-form>footer{margin-top:0}.two-factor-settings .two-factor-config-form>footer .btn{gap:7px}
@media(max-width:1080px){.two-factor-audience-grid{grid-template-columns:1fr}.two-factor-explainer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-factor-explainer-grid article:nth-child(2){border-right:0}.two-factor-explainer-grid article:nth-child(-n+2){border-bottom:1px solid #e2e9f2}}
@media(max-width:760px){.two-factor-config-body{padding:16px 14px}.two-factor-settings .two-factor-readiness .two-factor-runtime-grid{grid-template-columns:1fr}.two-factor-explainer>header{align-items:flex-start;padding:14px}.two-factor-explainer>header>a{margin-top:4px}.two-factor-explainer-grid{grid-template-columns:1fr}.two-factor-explainer-grid article,.two-factor-explainer-grid article:nth-child(2){border-right:0;border-bottom:1px solid #e2e9f2}.two-factor-explainer-grid article:last-child{border-bottom:0}}
@media(max-width:520px){.two-factor-config-form>header{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;padding:14px}.two-factor-config-form>header>small{grid-column:2;justify-self:start;margin-top:2px}.two-factor-audience-card{padding:13px}.two-factor-audience-header{align-items:flex-start}.two-factor-audience-card .two-factor-method-card{grid-template-columns:34px minmax(0,1fr) 18px;padding:10px}.two-factor-audience-card .two-factor-method-card>span:first-of-type{width:34px;height:34px}.two-factor-explainer>header{display:grid;grid-template-columns:38px minmax(0,1fr)}.two-factor-explainer>header>a{grid-column:2;justify-self:start}}

/* Connected login providers inside Minha conta. */
.security-extension-column{display:grid;gap:12px}
.external-connection-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:0;padding:14px;border:1px solid #dce5f0;border-radius:9px;background:#fff}
.external-connection-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--brand-primary);background:var(--brand-primary-soft);font-size:17px;font-style:normal;font-weight:900}
.external-connection-copy{min-width:0}.external-connection-copy h3,.external-connection-copy p{margin:0}.external-connection-copy h3{color:#172033;font-size:12px}.external-connection-copy p{margin-top:3px;color:#75849b;font-size:10px;line-height:1.45}.external-connection-copy .field-error{display:block;margin-top:6px}
.external-connection-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;color:var(--brand-primary);background:var(--brand-primary-soft);font-size:9px;white-space:nowrap}.external-connection-status svg{width:13px;height:13px}
.external-connection-action{min-height:34px;height:34px;padding:0 11px;gap:6px;font-size:10px;white-space:nowrap}.external-connection-action svg{width:14px;height:14px}
@media(max-width:640px){.external-connection-card{grid-template-columns:36px minmax(0,1fr);align-items:start;padding:12px}.external-connection-mark{width:36px;height:36px}.external-connection-status,.external-connection-action{grid-column:2;justify-self:start}}

/* Safe, schema-driven panel for general services. */
.general-service-workspace{display:grid;gap:16px;min-width:0}
.general-service-workspace .panel{margin:0;border-color:#dbe5f1;border-radius:8px;box-shadow:0 12px 30px rgba(17,38,73,.055)}
.general-service-intro{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:15px;padding:20px}
.general-service-icon,.general-service-section>header>span{display:grid;place-items:center;flex:none;border-radius:9px;color:var(--primary,#1768e5);background:color-mix(in srgb,var(--primary,#1768e5) 9%,#fff)}
.general-service-icon{width:52px;height:52px}.general-service-icon svg{width:25px;height:25px}
.general-service-intro h2,.general-service-intro p{margin:0}.general-service-intro h2{margin-top:3px;color:#172033;font-size:20px;line-height:1.25}.general-service-intro p{margin-top:5px;color:#6e7c92;font-size:11px;line-height:1.5}
.general-service-badge{display:inline-flex;width:max-content;max-width:100%;align-items:center;padding:6px 9px;border-radius:999px;color:#526075;background:#eef2f7;font-size:9px;font-weight:800;line-height:1.2}
.general-service-badge.is-primary{color:var(--primary,#1768e5);background:color-mix(in srgb,var(--primary,#1768e5) 10%,#fff)}.general-service-badge.is-success{color:#08733e;background:#e7f8ef}.general-service-badge.is-warning{color:#8a5200;background:#fff3d8}.general-service-badge.is-danger{color:#b42318;background:#feeceb}
.general-service-sections{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;min-width:0}.general-service-section{grid-column:span 12;min-width:0;overflow:hidden}.general-service-section.is-half{grid-column:span 6}.general-service-section.is-third{grid-column:span 4}
.general-service-section>header{display:flex;align-items:flex-start;gap:11px;padding:16px 18px;border-bottom:1px solid #e2e9f2}.general-service-section>header>span{width:38px;height:38px}.general-service-section>header>span svg{width:18px;height:18px}.general-service-section>header>div{min-width:0}.general-service-section>header h2,.general-service-section>header p{margin:0}.general-service-section>header h2{color:#172033;font-size:14px;line-height:1.3}.general-service-section>header p{margin-top:3px;color:#75839a;font-size:10px;line-height:1.45}
.general-service-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:5px 18px 12px}.general-service-section.is-list .general-service-items,.general-service-section.is-half .general-service-items,.general-service-section.is-third .general-service-items{grid-template-columns:1fr}.general-service-item{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:13px 10px;border-bottom:1px solid #e8edf4}.general-service-item:nth-last-child(-n+2){border-bottom:0}.general-service-section.is-list .general-service-item:not(:last-child),.general-service-section.is-half .general-service-item:not(:last-child),.general-service-section.is-third .general-service-item:not(:last-child){border-bottom:1px solid #e8edf4}.general-service-section.is-list .general-service-item:last-child,.general-service-section.is-half .general-service-item:last-child,.general-service-section.is-third .general-service-item:last-child{border-bottom:0}
.general-service-item>span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;color:var(--primary,#1768e5);background:color-mix(in srgb,var(--primary,#1768e5) 7%,#fff)}.general-service-item>span:first-child svg{width:17px;height:17px}.general-service-item small,.general-service-item strong,.general-service-item p{display:block;min-width:0;margin:0}.general-service-item small{color:#7a879a;font-size:8px;font-weight:800;text-transform:uppercase}.general-service-item strong{margin-top:4px;overflow-wrap:anywhere;color:#172033;font-size:12px;line-height:1.35}.general-service-item p{margin-top:4px;color:#718097;font-size:9px;line-height:1.45}.general-service-detail>button{width:31px;height:31px;display:grid;place-items:center;padding:0;border:1px solid #d8e2ee;border-radius:7px;color:#63728a;background:#fff;cursor:pointer}.general-service-detail>button:hover{color:var(--primary,#1768e5);border-color:color-mix(in srgb,var(--primary,#1768e5) 40%,#d8e2ee)}.general-service-detail>button svg{width:14px;height:14px}
.general-service-progress{display:grid;grid-template-columns:1fr;align-content:center}.general-service-progress>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.general-service-progress>div span{color:#59687f;font-size:10px;font-weight:750}.general-service-progress>div strong{margin:0}.general-service-progress-track{height:7px;overflow:hidden;border-radius:999px;background:#e9eef5}.general-service-progress-track i{display:block;height:100%;border-radius:inherit;background:var(--primary,#1768e5)}.general-service-progress.is-success .general-service-progress-track i{background:#20a75f}.general-service-progress.is-warning .general-service-progress-track i{background:#dc8b11}.general-service-progress.is-danger .general-service-progress-track i{background:#d92d20}
.general-service-action{display:grid;align-content:start;gap:5px;min-width:0;margin:0;padding:10px}.general-service-action button{min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;border:1px solid color-mix(in srgb,var(--primary,#1768e5) 30%,#d5dfeb);border-radius:8px;color:var(--primary,#1768e5);background:color-mix(in srgb,var(--primary,#1768e5) 4%,#fff);font-family: var(--asv-font-family);font-size:10px;font-weight:800;cursor:pointer}.general-service-action button:hover{border-color:var(--primary,#1768e5);background:color-mix(in srgb,var(--primary,#1768e5) 8%,#fff)}.general-service-action button.is-primary{border-color:var(--primary,#1768e5);color:#fff;background:var(--primary,#1768e5);box-shadow:0 8px 18px color-mix(in srgb,var(--primary,#1768e5) 18%,transparent)}.general-service-action button.is-primary:hover{background:var(--primary-dark,#1258c7)}.general-service-action button svg{width:15px;height:15px}.general-service-action small{color:#75839a;font-size:9px;line-height:1.4;text-align:center}
.general-service-empty{min-height:150px;display:flex;align-items:center;justify-content:center;gap:13px;padding:24px;text-align:left}.general-service-empty>svg{width:29px;height:29px;color:var(--primary,#1768e5)}.general-service-empty h2,.general-service-empty p{margin:0}.general-service-empty h2{color:#172033;font-size:14px}.general-service-empty p{margin-top:4px;color:#748299;font-size:10px;line-height:1.45}
@media(max-width:1100px){.general-service-section.is-third{grid-column:span 6}}
@media(max-width:760px){.general-service-intro{grid-template-columns:44px minmax(0,1fr);padding:16px}.general-service-icon{width:44px;height:44px}.general-service-intro>.general-service-badge{grid-column:2;justify-self:start}.general-service-section.is-half,.general-service-section.is-third{grid-column:span 12}.general-service-items{grid-template-columns:1fr;padding-inline:12px}.general-service-item,.general-service-item:nth-last-child(-n+2){border-bottom:1px solid #e8edf4}.general-service-item:last-child{border-bottom:0}.general-service-section>header{padding:14px}.general-service-empty{justify-content:flex-start}}
@media(max-width:420px){.general-service-item{grid-template-columns:32px minmax(0,1fr);padding-inline:4px}.general-service-progress{grid-template-columns:1fr}.general-service-progress>div strong{flex:none;white-space:nowrap}.general-service-item>span:first-child{width:32px;height:32px}.general-service-detail>button{grid-column:2;justify-self:start}.general-service-action{padding-inline:4px}}
.general-service-action{grid-column:1/-1;width:100%;box-sizing:border-box}.general-service-action label{display:grid;gap:5px;color:#44516a;font-size:11px;font-weight:700}.general-service-action textarea{width:100%;box-sizing:border-box;resize:vertical;border:1px solid #d5dfeb;border-radius:8px;padding:10px;font-family: var(--asv-font-family);font-size:12px;background:#fff}
.admin-service-page .admin-service-breadcrumb{margin:0 0 16px}.admin-service-breadcrumb a{display:inline-flex;align-items:center;gap:7px;color:#65748a;font-size:12px;font-weight:700;text-decoration:none}.admin-service-breadcrumb a:hover{color:var(--primary)}.admin-service-breadcrumb svg{width:15px;height:15px}.admin-service-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;margin-bottom:16px}.admin-service-hero-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--primary-soft,#edf4ff);color:var(--primary);flex:none}.admin-service-hero-icon svg{width:24px;height:24px}.admin-service-hero-content{min-width:0;flex:1}.admin-service-eyebrow{color:#8996a9;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.admin-service-hero h2{margin:3px 0 2px;font-size:21px}.admin-service-hero p{margin:0;color:#718096;font-size:12px}.admin-service-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.admin-service-card{padding:0;overflow:hidden}.admin-service-card-header{display:flex;align-items:center;gap:11px;padding:18px 20px;border-bottom:1px solid #edf1f6}.admin-service-card-header>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--primary-soft,#edf4ff);color:var(--primary)}.admin-service-card-header svg{width:17px;height:17px}.admin-service-card-header h2{margin:0;font-size:14px}.admin-service-card-header p{margin:3px 0 0;color:#8190a4;font-size:11px}.admin-service-data{margin:0;padding:7px 20px 14px}.admin-service-data>div{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 0;border-bottom:1px solid #f1f3f7}.admin-service-data>div:last-child{border-bottom:0}.admin-service-data dt{color:#7b899b;font-size:11px}.admin-service-data dd{margin:0;text-align:right;color:#27364a;font-size:12px;font-weight:800;overflow-wrap:anywhere}.admin-service-actions{padding:0}.admin-service-action-grid{display:flex;flex-wrap:wrap;gap:10px;padding:18px 20px}.admin-service-action{display:flex;align-items:center;gap:8px;margin:0}.admin-service-action input{height:36px;min-width:190px;border:1px solid #dbe3ee;border-radius:8px;padding:0 10px;font-family: var(--asv-font-family);font-size:12px}.admin-service-action button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:#fff;font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-action button svg{width:15px;height:15px}.admin-service-action-danger button{border-color:#e5b7bc;background:#fff7f7;color:#b4232f}.admin-service-empty{margin:0;color:#7d8a9d;font-size:12px}@media(max-width:760px){.admin-service-hero{align-items:flex-start;flex-wrap:wrap;padding:18px}.admin-service-hero .status-pill{margin-left:64px}.admin-service-columns{grid-template-columns:1fr}.admin-service-action-grid{display:grid;grid-template-columns:1fr}.admin-service-action,.admin-service-action input,.admin-service-action button{width:100%;min-width:0;box-sizing:border-box}.admin-service-action{display:grid}}
.admin-service-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}.admin-service-stat{display:flex;align-items:flex-start;gap:11px;padding:15px 16px;background:var(--surface,#fff);border:1px solid var(--border,#dbe3ee);border-radius:12px;min-width:0}.admin-service-stat>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand-primary-soft,#edf4ff);color:var(--brand-primary,var(--primary));flex:none}.admin-service-stat svg{width:16px;height:16px}.admin-service-stat small,.admin-service-stat em{display:block;color:#7b899b;font-size:10px;font-style:normal}.admin-service-stat strong{display:block;margin:3px 0;color:#172b4d;font-size:13px;overflow-wrap:anywhere}.admin-service-stat em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-service-stat em.is-good{color:#198754}.admin-service-stat em.is-muted{color:#8a96a8}.admin-service-inline-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary,var(--primary));font-size:11px;font-weight:800;text-decoration:none}.admin-service-inline-link svg{width:14px;height:14px}.admin-service-billing{margin-top:16px}.admin-service-invoice-list{padding:4px 20px 12px}.admin-service-invoice-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid #f1f3f7}.admin-service-invoice-list>div:last-child{border-bottom:0}.admin-service-invoice-list strong,.admin-service-invoice-list small{display:block}.admin-service-invoice-list strong{font-size:12px;color:#27364a}.admin-service-invoice-list small{margin-top:3px;color:#8491a3;font-size:10px}.admin-service-invoice-list>b{font-size:12px;color:#27364a}.admin-service-invoice-list mark{padding:4px 8px;border-radius:999px;background:#edf2f8;color:#53657d;font-size:10px;font-weight:800}.admin-service-invoice-list mark.status-paid{background:#e6f7ee;color:#16824b}.admin-service-invoice-list mark.status-overdue{background:#fff0f0;color:#b4232f}.admin-service-information{margin-top:16px}.admin-service-information-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#edf1f6}.admin-service-information-item{display:grid;gap:5px;padding:14px 18px;background:#fff;min-width:0}.admin-service-information-item span{color:#7b899b;font-size:10px;font-weight:700}.admin-service-information-item strong{color:#27364a;font-size:12px;overflow-wrap:anywhere}@media(max-width:900px){.admin-service-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.admin-service-overview{grid-template-columns:1fr}.admin-service-information-grid{grid-template-columns:1fr}.admin-service-invoice-list>div{grid-template-columns:1fr auto}.admin-service-invoice-list mark{justify-self:start}}
.admin-service-breadcrumb .back-link{color:var(--brand-primary);text-decoration:none}.admin-service-breadcrumb .back-link:hover{color:var(--brand-primary-strong,var(--brand-primary))}.admin-service-breadcrumb .back-link svg{transform:rotate(90deg)}
.admin-service-action-groups{padding:4px 20px 20px}.admin-service-action-group{padding:14px 0;border-bottom:1px solid #edf1f6}.admin-service-action-group:last-child{border-bottom:0}.admin-service-action-group h3{margin:0 0 10px;color:#68778c;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-service-action-row{display:flex;flex-wrap:wrap;gap:10px}.admin-service-action-group-danger{padding-bottom:0}.admin-service-action-group-danger h3{color:#b4232f}.admin-service-action-group-danger .admin-service-action button{border-color:#e5b7bc;background:#fff7f7;color:#b4232f}@media(max-width:760px){.admin-service-action-groups{padding:4px 16px 16px}.admin-service-action-row{display:grid;grid-template-columns:1fr}.admin-service-action-row .admin-service-action,.admin-service-action-row .admin-service-action button,.admin-service-action-row .admin-service-action input{width:100%;min-width:0;box-sizing:border-box}.admin-service-action-row .admin-service-action{display:grid}}
.admin-service-page>.main-content{display:flex;flex-direction:column}
.general-service-section.is-domain-dns .general-service-items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px}.general-service-section.is-domain-dns .general-service-detail{border:1px solid #e1e8f2;border-radius:12px;background:#fbfdff;padding:14px;box-shadow:0 4px 14px rgba(25,53,91,.04)}.general-service-section.is-domain-dns .general-service-action{grid-column:2;grid-row:1 / span 10;border:1px solid color-mix(in srgb,var(--primary,#1768e5) 22%,#e1e8f2);border-radius:12px;background:color-mix(in srgb,var(--primary,#1768e5) 3%,#fff);padding:16px}.general-service-section.is-domain-dns .general-service-action button{margin-top:6px}.general-service-section.is-domain-dns .general-service-action label+label{margin-top:4px}@media(max-width:760px){.general-service-section.is-domain-dns .general-service-items{grid-template-columns:1fr;padding:12px}.general-service-section.is-domain-dns .general-service-action{grid-column:1;grid-row:auto}}
.general-service-dns-empty{grid-column:1;display:grid;gap:5px;align-content:center;min-height:100px;padding:18px;border:1px dashed #cbd8e8;border-radius:12px;background:#f8fbff;color:#52627a}.general-service-dns-empty strong{font-size:13px;color:#243550}.general-service-dns-empty span{font-size:11px}
.general-service-download-content{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px}.general-service-download-content>span{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--brand-primary,var(--primary,#1768e5));background:var(--brand-primary-soft,color-mix(in srgb,var(--brand-primary,var(--primary,#1768e5)) 9%,#fff))}.general-service-download-content>span svg{width:18px;height:18px}.general-service-download-content strong,.general-service-download-content small{display:block}.general-service-download-content strong{color:#172033;font-size:12px}.general-service-download-content small{margin-top:4px;color:#718097;font-size:9px}.general-service-download-content .btn{white-space:nowrap}.general-service-download-content .btn svg{width:15px;height:15px}@media(max-width:620px){.general-service-download-content{grid-template-columns:40px minmax(0,1fr)}.general-service-download-content .btn{grid-column:1/-1;width:100%;justify-content:center}}
.admin-service-information{margin-top:16px}.admin-service-information-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#edf1f6}.admin-service-information-item{display:grid;gap:5px;padding:14px 18px;background:#fff;min-width:0}.admin-service-information-item span{color:#7b899b;font-size:10px;font-weight:700}.admin-service-information-item strong{color:#27364a;font-size:12px;overflow-wrap:anywhere}@media(max-width:760px){.admin-service-information-grid{grid-template-columns:1fr}}
.admin-service-edit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 20px}.admin-service-edit-form label{display:grid;gap:5px;color:#68778c;font-size:11px;font-weight:700}.admin-service-edit-form input,.admin-service-edit-form select{height:36px;border:1px solid #dbe3ee;border-radius:8px;padding:0 10px;background:#fff;color:#27364a;font-family: var(--asv-font-family);font-size:12px}.admin-service-edit-form button{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-edit-form button svg{width:15px;height:15px}@media(max-width:760px){.admin-service-edit-form{grid-template-columns:1fr}.admin-service-edit-form button{grid-column:auto;width:100%;justify-content:center}}
.admin-service-page>.main-content>.admin-service-technical{margin-bottom:16px}.admin-service-technical .admin-service-information-item{padding-top:17px;padding-bottom:17px}
.admin-service-integration-action{display:flex;align-items:center;gap:10px;margin:2px 20px 18px;padding-top:14px;border-top:1px solid #edf1f6}.admin-service-integration-action form{margin:0}.admin-service-integration-action button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--brand-primary,var(--primary));border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-integration-action button svg{width:15px;height:15px}.admin-service-integration-action small{color:#7b899b;font-size:10px}@media(max-width:760px){.admin-service-integration-action{align-items:flex-start;flex-direction:column}.admin-service-integration-action button{width:100%;justify-content:center}}
.admin-service-integration-header-action{margin-left:auto;flex:none}.admin-service-integration-header-action button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px solid var(--brand-primary,var(--primary));border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-integration-header-action button svg{width:14px;height:14px}@media(max-width:760px){.admin-service-integration-header-action{margin:10px 0 0;width:100%}.admin-service-integration-header-action button{width:100%;justify-content:center}}
.admin-service-current-secret{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:11px 12px;border:1px solid #e2e9f2;border-radius:9px;background:var(--brand-primary-subtle,#fbfdff)}.admin-service-current-secret strong,.admin-service-current-secret small{display:block}.admin-service-current-secret strong{color:#27364a;font-size:11px}.admin-service-current-secret small{margin-top:3px;color:#7b899b;font-size:10px}.admin-service-secret-status{display:inline-flex;align-items:center;gap:5px;color:#198754;font-size:10px;font-weight:800;white-space:nowrap}.admin-service-secret-status svg{width:14px;height:14px}@media(max-width:760px){.admin-service-current-secret{align-items:flex-start;flex-direction:column}}
.admin-service-masked-secret{letter-spacing:.14em}.admin-service-secret-note{display:block;margin-top:4px;color:#7b899b;font-size:10px}
.admin-service-technical-credentials{margin:0 20px;padding:14px 0 18px;border-top:1px solid #edf1f6}.admin-service-technical-credentials h3{margin:0 0 10px;color:#68778c;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-service-technical-credentials .admin-service-action-row{display:flex;flex-wrap:wrap;gap:10px}
.admin-service-technical-credentials .admin-service-action-group > h3:has(+ .admin-service-action-row){display:none}
.admin-service-technical-credentials .admin-service-action-row{justify-content:center}
.admin-service-technical-credentials .admin-service-action-group--main .admin-service-action-row{align-items:center;justify-content:center}
.admin-service-technical-credentials > h3{text-align:center}
@media(max-width:760px){.admin-service-technical-credentials .admin-service-action-group--main .admin-service-action-row{display:grid;grid-template-columns:1fr}.admin-service-technical-credentials .admin-service-action-group--main .admin-service-action,.admin-service-technical-credentials .admin-service-action-group--main .admin-service-action button{width:100%;max-width:none;box-sizing:border-box}.admin-service-technical-credentials .admin-service-action-group--main .admin-service-action{display:grid}}
.admin-service-card:has(.admin-service-replace-form){position:relative}.admin-service-replace-form{position:absolute;right:20px;bottom:36px;margin:0}.admin-service-replace-form button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--brand-primary,var(--primary));border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-replace-form button svg{width:15px;height:15px}.admin-service-replace-form button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:760px){.admin-service-replace-form{position:static;margin:0 20px 18px}.admin-service-replace-form button{width:100%}}
.admin-service-technical .admin-service-information-grid>.admin-service-information-item:last-child{grid-column:1/-1}.admin-service-technical-credentials .admin-service-action{max-width:420px}.admin-service-technical-credentials .admin-service-action input{min-width:220px}
.admin-service-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex:none}.admin-service-hero-actions .btn{gap:7px;font-family: var(--asv-font-family);font-size:12px;line-height:1;box-shadow:0 5px 14px color-mix(in srgb,var(--brand-primary,var(--primary)) 18%,transparent);transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}.admin-service-hero-actions .btn:hover{box-shadow:0 7px 18px color-mix(in srgb,var(--brand-primary,var(--primary)) 24%,transparent);transform:translateY(-1px)}.admin-service-hero-actions .btn:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-primary,var(--primary)) 20%,transparent);outline-offset:2px}.admin-service-hero-actions .btn svg{width:15px;height:15px;flex:none}.admin-service-dialog .service-password-fields select{width:100%;height:40px;border:1px solid #d4deeb;border-radius:8px;padding:0 36px 0 12px;background:#fff;color:#111c31;font-family: var(--asv-font-family);font-size:12px}.admin-service-dialog .service-password-fields select:focus{border-color:var(--brand-primary,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary,var(--primary)) 14%,transparent);outline:0}.admin-service-upgrade-empty{display:flex;align-items:flex-start;gap:12px;margin:20px;padding:16px;border:1px solid var(--brand-primary-border,#cfe0ff);border-radius:10px;background:var(--brand-primary-subtle,#f5f8ff);color:#344054}.admin-service-upgrade-empty>svg{width:20px;height:20px;flex:none;color:var(--brand-primary,var(--primary))}.admin-service-upgrade-empty strong{display:block;font-size:13px}.admin-service-upgrade-empty p{margin:4px 0 0;color:#718096;font-size:11px}@media(max-width:760px){.admin-service-hero-actions{width:100%;justify-content:space-between;padding-left:64px}.admin-service-hero-actions .btn{flex:1}.admin-service-hero .admin-service-hero-actions .status-pill{margin-left:0}.admin-service-upgrade-dialog footer{grid-template-columns:1fr}.admin-service-upgrade-dialog footer .btn{width:100%}}
.admin-service-columns{width:100%;max-width:none;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:stretch}.admin-service-card--compact{align-self:stretch;height:100%;display:flex;flex-direction:column}.admin-service-columns>.admin-service-card:nth-child(2) .admin-service-data{padding-top:3px;padding-bottom:7px}.admin-service-columns>.admin-service-card:nth-child(2) .admin-service-data>div{padding:8px 0}@media(max-width:900px){.admin-service-columns{max-width:none;grid-template-columns:1fr}}
.admin-service-edit-form .span-2{grid-column:1/-1}.admin-service-value-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.admin-service-value-line strong{min-width:0}.admin-service-edit-icon{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;padding:0;border:1px solid #d7e1ee;border-radius:7px;background:#fff;color:#66758d;cursor:pointer}.admin-service-edit-icon svg{width:14px;height:14px}.admin-service-edit-icon:hover,.admin-service-edit-icon:focus-visible{border-color:var(--brand-primary,var(--primary));color:var(--brand-primary,var(--primary));background:var(--brand-primary-soft,#edf4ff);outline:0}.admin-service-information-item.is-editable{gap:7px}.admin-service-dialog .service-password-fields{display:grid;gap:12px;padding:18px 20px}.admin-service-dialog .service-password-fields label{display:grid;gap:7px;color:#26344b;font-size:11px;font-weight:800}.admin-service-dialog .service-password-fields input{height:40px;border:1px solid #d4deeb;border-radius:8px;padding:0 12px;background:#fff;color:#111c31;font-family: var(--asv-font-family);font-size:12px}.admin-service-dialog .service-password-fields input:focus{border-color:var(--brand-primary,var(--primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary,var(--primary)) 14%,transparent);outline:0}@media(max-width:760px){.admin-service-edit-form .span-2{grid-column:auto}.admin-service-dialog footer{grid-template-columns:1fr}.admin-service-dialog footer .btn{width:100%}}
.admin-service-whmcs{padding:0;overflow:hidden}.admin-service-whmcs-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid #edf1f6;background:var(--surface,#fff)}.admin-service-whmcs-title{display:flex;align-items:center;gap:12px;min-width:0}.admin-service-whmcs-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--brand-primary-soft,#edf4ff);color:var(--brand-primary,var(--primary));flex:none}.admin-service-whmcs-icon svg{width:18px;height:18px}.admin-service-whmcs-header h2{margin:0;font-size:16px}.admin-service-whmcs-header p{margin:4px 0 0;color:#718096;font-size:12px}.admin-service-whmcs-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);align-items:start}.admin-service-whmcs-main{min-width:0}.admin-service-whmcs-side{border-left:1px solid #edf1f6;background:#fbfcff}.admin-service-whmcs-section{border-bottom:1px solid #edf1f6}.admin-service-whmcs-section:last-child{border-bottom:0}.admin-service-whmcs-section-header{padding:16px 20px 12px}.admin-service-whmcs-section-header h3{margin:0;font-size:13px}.admin-service-whmcs-section-header p{margin:3px 0 0;color:#8190a4;font-size:11px}.admin-service-whmcs-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 18px}.admin-service-whmcs-form label{display:grid;gap:5px;color:#68778c;font-size:11px;font-weight:700}.admin-service-whmcs-form input,.admin-service-whmcs-form select{height:36px;border:1px solid #dbe3ee;border-radius:8px;padding:0 10px;background:#fff;color:#27364a;font-family: var(--asv-font-family);font-size:12px}.admin-service-whmcs-form button{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:0;border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-whmcs-form button svg{width:15px;height:15px}.admin-service-whmcs-form .span-2{grid-column:1/-1}.admin-service-whmcs-table{display:grid;gap:1px;background:#edf1f6}.admin-service-whmcs-row{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr);align-items:center;gap:16px;padding:12px 20px;background:#fff}.admin-service-whmcs-row span{color:#7b899b;font-size:11px;font-weight:700}.admin-service-whmcs-row strong{color:#27364a;font-size:12px;overflow-wrap:anywhere}.admin-service-whmcs-row.is-editable{align-items:start}.admin-service-whmcs-row .admin-service-secret-note{grid-column:2/-1}.admin-service-whmcs-side-card{border-bottom:1px solid #edf1f6}.admin-service-whmcs-side-card:last-child{border-bottom:0}.admin-service-whmcs-side .admin-service-data{padding-top:0}.admin-service-whmcs-side .admin-service-data>div{padding:9px 0}.admin-service-whmcs-side .admin-service-data>div:first-child{padding-top:0}.admin-service-whmcs-side .admin-service-data>div:last-child{border-bottom:0}.admin-service-whmcs-side .admin-service-data dd{font-size:11px}.admin-service-whmcs-side .admin-service-data dt{font-size:10px}.admin-service-integration-action{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:14px 20px 18px;border-top:1px solid #edf1f6}.admin-service-integration-action form{margin:0}.admin-service-integration-action button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--brand-primary,var(--primary));border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-integration-action button svg{width:15px;height:15px}.admin-service-integration-action small{color:#7b899b;font-size:10px}.admin-service-action-groups--compact{padding:0 20px 18px}.admin-service-action-groups--compact .admin-service-action-group{padding:12px 0}.admin-service-action-groups--compact .admin-service-action-group h4{margin:0 0 10px;color:#68778c;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.admin-service-action-groups--compact .admin-service-action-row{display:flex;flex-wrap:wrap;gap:10px}.admin-service-action-groups--compact .admin-service-action{display:flex;align-items:center;gap:8px;margin:0}.admin-service-action-groups--compact .admin-service-action input{height:36px;min-width:170px;border:1px solid #dbe3ee;border-radius:8px;padding:0 10px;font-family: var(--asv-font-family);font-size:12px}.admin-service-action-groups--compact .admin-service-action button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--brand-primary,var(--primary));border-radius:8px;background:var(--brand-primary,var(--primary));color:var(--brand-on-primary,#fff);font-family: var(--asv-font-family);font-size:11px;font-weight:800;cursor:pointer}.admin-service-action-groups--compact .admin-service-action button svg{width:15px;height:15px}.admin-service-action-groups--compact .admin-service-action-danger button{border-color:#e5b7bc;background:#fff7f7;color:#b4232f}.admin-service-action-groups--compact .admin-service-action-group-danger h4{color:#b4232f}.admin-service-action-groups--compact .admin-service-empty{margin:0;color:#7d8a9d;font-size:12px}.admin-service-whmcs-side .admin-service-invoice-list{padding:0 20px 12px}.admin-service-whmcs-side .admin-service-invoice-list>div{grid-template-columns:minmax(0,1fr) auto auto}.admin-service-whmcs-side .admin-service-invoice-list strong{font-size:11px}.admin-service-whmcs-side .admin-service-invoice-list small,.admin-service-whmcs-side .admin-service-invoice-list b,.admin-service-whmcs-side .admin-service-invoice-list mark{font-size:10px}.admin-service-integration-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 20px 18px;background:#edf1f6;border:1px solid #edf1f6;border-radius:10px;overflow:hidden}.admin-service-integration-summary div{display:grid;gap:4px;padding:12px 14px;background:#fff;min-width:0}.admin-service-integration-summary span{color:#7b899b;font-size:10px;font-weight:700}.admin-service-integration-summary strong{color:#27364a;font-size:12px;overflow-wrap:anywhere}@media(max-width:760px){.admin-service-integration-summary{grid-template-columns:1fr}}@media(max-width:900px){.admin-service-whmcs-layout{grid-template-columns:1fr}.admin-service-whmcs-side{border-left:0;border-top:1px solid #edf1f6}.admin-service-whmcs-side-card:last-child{border-bottom:0}.admin-service-whmcs-form{grid-template-columns:1fr}.admin-service-whmcs-form button,.admin-service-whmcs-form .span-2{grid-column:auto;width:100%;justify-self:stretch}.admin-service-action-groups--compact .admin-service-action-row,.admin-service-action-groups--compact .admin-service-action,.admin-service-action-groups--compact .admin-service-action input,.admin-service-action-groups--compact .admin-service-action button{width:100%;min-width:0;box-sizing:border-box}.admin-service-action-groups--compact .admin-service-action{display:grid}.admin-service-whmcs-row{grid-template-columns:1fr}.admin-service-whmcs-row .admin-service-secret-note{grid-column:auto}.admin-service-integration-action button{width:100%;justify-content:center}.admin-service-integration-action{align-items:stretch}}
.admin-create-invoice-card { margin: 1.25rem 0; padding: 1.25rem; }
.admin-create-invoice-trigger-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.admin-create-invoice-trigger-card > div { display:flex; align-items:center; gap:.75rem; min-width:0; }
.admin-create-invoice-trigger-card h2 { margin:0; font-size:15px; }
.admin-create-invoice-trigger-card p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.admin-create-invoice-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--brand-primary-border); border-radius:9px; color:var(--brand-primary); background:var(--brand-primary-soft); }
.admin-create-invoice-icon svg { width:18px; height:18px; }
.admin-create-invoice-dialog { width:min(620px, calc(100vw - 2rem)); max-width:620px; }
.admin-create-invoice-dialog .catalog-dialog-heading > div { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.admin-create-invoice-dialog .catalog-dialog-heading > div > span { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:9px; color:var(--brand-primary); background:var(--brand-primary-soft); }
.admin-create-invoice-dialog .catalog-dialog-heading > div > span svg { width:19px; height:19px; }
.admin-create-invoice-dialog .catalog-dialog-heading h2 { margin:0; color:var(--text); font-size:16px; }
.admin-create-invoice-dialog .catalog-dialog-heading p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.admin-create-invoice-modal-body { display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; }
.admin-create-invoice-modal-body label { display:grid; gap:6px; color:var(--text); font-size:11px; font-weight:700; }
.admin-create-invoice-modal-body input { width:100%; min-height:40px; border:1px solid var(--line); border-radius:8px; padding:0 11px; background:#fff; color:var(--text); font-family: var(--asv-font-family); font-size:12px; outline:0; }
.admin-create-invoice-modal-body input:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.admin-create-invoice-dialog .admin-create-invoice-actions { justify-content:flex-end; }
@media (max-width:700px) { .admin-create-invoice-trigger-card { align-items:flex-start; flex-direction:column; } .admin-create-invoice-trigger-card .btn { width:100%; justify-content:center; } .admin-create-invoice-modal-body { grid-template-columns:1fr; } .admin-create-invoice-dialog .admin-create-invoice-actions { flex-direction:column-reverse; } .admin-create-invoice-dialog .admin-create-invoice-actions .btn { width:100%; justify-content:center; } }
.admin-create-invoice-form { align-items: end; gap: 1rem; }
.product-free-trial-settings{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:18px;margin-top:16px;padding:18px;border:1px solid var(--brand-primary-border);border-radius:10px;background:var(--brand-primary-subtle)}.product-free-trial-settings .catalog-toggle{margin:0;padding:0;border:0;background:transparent}.product-free-trial-settings .catalog-toggle span{display:grid;gap:3px}.product-free-trial-settings .catalog-toggle strong{color:var(--text);font-size:12px}.product-free-trial-settings .catalog-toggle small,.product-free-trial-settings>label>small{color:var(--muted);font-size:10px;line-height:1.4}.product-free-trial-settings>label:not(.catalog-toggle){display:grid;gap:6px;color:var(--text);font-size:11px;font-weight:700}.product-free-trial-settings input[type=number]{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fff;font:inherit}.product-free-trial-settings input[type=number]:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent);outline:0}@media(max-width:700px){.product-free-trial-settings{grid-template-columns:1fr}}
.admin-create-invoice-form label { display: grid; gap: .4rem; font-weight: 600; color: var(--text-primary, #17233d); }
.admin-create-invoice-form input { width: 100%; }
.admin-create-invoice-actions { display: flex; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; grid-column: 1 / -1; }
@media (min-width: 900px) { .admin-create-invoice-form { grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(170px, 1fr); } }
@media (max-width: 640px) { .admin-create-invoice-actions .btn { width: 100%; justify-content: center; } }

/* Admin order creation and client-scoped order controls */
.orders-create-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-primary-subtle), #fff 72%);
}
.orders-create-shortcut > div,
.order-create-toolbar,
.order-create-toolbar > span,
.order-create-summary > div,
.order-create-module-warning,
.order-create-actions > div {
    display: flex;
    align-items: center;
}
.orders-create-shortcut > div { gap: 12px; min-width: 0; }
.orders-create-shortcut > div > span,
.order-create-summary-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--brand-primary-border);
    border-radius: 10px;
    color: var(--brand-primary);
    background: #fff;
}
.orders-create-shortcut svg,
.order-create-summary-icon svg { width: 18px; height: 18px; }
.orders-create-shortcut strong,
.orders-create-shortcut small { display: block; }
.orders-create-shortcut strong { color: var(--text); font-size: 13px; }
.orders-create-shortcut small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }

.admin-order-create { gap: 16px; }
.order-create-toolbar { justify-content: space-between; gap: 16px; }
.order-create-toolbar > span { gap: 7px; color: var(--muted); font-size: 10px; font-weight: 650; }
.order-create-toolbar > span svg { width: 15px; height: 15px; color: var(--brand-primary); }
.order-create-selector,
.order-create-form { overflow: hidden; }
.order-create-selector { padding: 22px; }
.order-create-selector .form-section-heading { margin-bottom: 18px; }
.order-create-selector-form,
.order-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}
.order-create-selector-form label,
.order-create-grid label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
}
.order-create-selector-form select,
.order-create-grid input,
.order-create-grid select,
.order-create-grid textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 0 12px;
    background: #fff;
    color: var(--text);
    font-family: var(--asv-font-family);
    font-size: 12px;
    outline: 0;
}
.order-create-grid textarea { min-height: 108px; padding: 11px 12px; resize: vertical; }
.order-create-selector-form select:focus,
.order-create-grid input:focus,
.order-create-grid select:focus,
.order-create-grid textarea:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.order-create-grid label > small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.45; }
.order-create-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
    background: var(--brand-primary-subtle);
}
.order-create-summary > div { gap: 11px; min-width: 0; padding: 18px 22px; }
.order-create-summary > div + div { border-left: 1px solid var(--brand-primary-border); }
.order-create-summary span:last-child { min-width: 0; }
.order-create-summary small,
.order-create-summary strong,
.order-create-summary em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-create-summary small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.order-create-summary strong { margin-top: 3px; color: var(--text); font-size: 12px; }
.order-create-summary em { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.order-create-form .form-section { padding: 22px; }
.order-create-form .form-section + .form-section { border-top: 1px solid var(--line); }
.order-create-form .form-section-heading { margin-bottom: 18px; }
.order-create-billing .order-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-create-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.order-create-fields .wide { grid-column: 1 / -1; }
.order-create-module-warning {
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #b7791f 38%, transparent);
    border-radius: 9px;
    color: #7a4b0b;
    background: #fff9e8;
}
.order-create-module-warning > svg { width: 18px; height: 18px; flex: none; }
.order-create-module-warning strong,
.order-create-module-warning small { display: block; }
.order-create-module-warning strong { font-size: 11px; }
.order-create-module-warning small { margin-top: 2px; font-size: 9px; line-height: 1.4; }
.order-create-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 18px 22px;
    border-top: 1px solid var(--line);
    background: #fbfcff;
}
.order-create-actions > div { gap: 9px; min-width: 0; color: var(--muted); }
.order-create-actions > div > svg { width: 17px; height: 17px; flex: none; color: var(--brand-primary); }
.order-create-actions strong,
.order-create-actions small { display: block; }
.order-create-actions strong { color: var(--text); font-size: 10px; }
.order-create-actions small { margin-top: 2px; font-size: 9px; line-height: 1.4; }
.order-create-empty { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 190px; padding: 28px; text-align: left; }
.order-create-empty > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--brand-primary); background: var(--brand-primary-soft); }
.order-create-empty svg { width: 22px; height: 22px; }
.order-create-empty h2 { margin: 0; color: var(--text); font-size: 15px; }
.order-create-empty p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-service-header-actions,
.profile-service-row-actions { display: flex; align-items: center; gap: 8px; }
.profile-service-row-actions form { margin: 0; }
.profile-service-row-actions .btn { white-space: nowrap; }

@media (max-width: 900px) {
    .order-create-selector-form { grid-template-columns: 1fr 1fr; }
    .order-create-selector-form .btn { grid-column: 1 / -1; justify-content: center; }
    .order-create-summary { grid-template-columns: 1fr; }
    .order-create-summary > div + div { border-left: 0; border-top: 1px solid var(--brand-primary-border); }
}
@media (max-width: 700px) {
    .orders-create-shortcut,
    .order-create-toolbar,
    .profile-service-header-actions { align-items: stretch; flex-direction: column; }
    .orders-create-shortcut .btn,
    .profile-service-header-actions .btn { justify-content: center; }
    .order-create-toolbar > span { align-items: flex-start; }
    .order-create-selector { padding: 18px; }
    .order-create-selector-form,
    .order-create-billing .order-create-grid,
    .order-create-fields,
    .order-create-actions { grid-template-columns: 1fr; }
    .order-create-selector-form .btn,
    .order-create-fields .wide { grid-column: auto; }
    .order-create-actions .btn { width: 100%; justify-content: center; }
    .order-create-actions > div { margin-bottom: 4px; }
    .profile-service-row-actions { justify-content: flex-end; flex-wrap: wrap; }
}
.catalog-trial-badge{display:inline-flex;align-items:center;align-self:flex-start;margin:0 0 8px;padding:5px 9px;border:1px solid var(--brand-primary-border);border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:10px;font-weight:800}
.product-free-trial-settings{grid-template-columns:minmax(0,1.2fr) minmax(180px,.55fr) minmax(220px,.75fr)}.product-free-trial-settings select{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fff;color:var(--text);font-family: var(--asv-font-family);font-size:11px;outline:0}.product-free-trial-settings select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent)}@media(max-width:900px){.product-free-trial-settings{grid-template-columns:1fr}}

.product-stock-settings{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.55fr) minmax(210px,.5fr);gap:18px;align-items:center;padding:18px;border:1px solid var(--brand-primary-border);border-radius:10px;background:var(--brand-primary-subtle)}
.product-service-subsection-head{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.product-stock-settings .catalog-toggle{margin:0;padding:0;border:0;background:transparent}.product-stock-settings .catalog-toggle span{display:grid;gap:3px}.product-stock-settings .catalog-toggle strong,.product-stock-settings>label>span{color:var(--text);font-size:12px;font-weight:800}.product-stock-settings .catalog-toggle small,.product-stock-settings>label>small{color:var(--muted);font-size:10px;line-height:1.45}.product-stock-settings>label:not(.catalog-toggle){display:grid;gap:6px}.product-stock-settings input[type=number]{height:42px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#fff;color:var(--text);font-family: var(--asv-font-family);font-size:12px;outline:0}.product-stock-settings input[type=number]:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent)}
.product-stock-status{display:flex;min-height:72px;align-items:center;gap:10px;padding:12px;border:1px solid var(--brand-primary-border);border-radius:9px;background:#fff}.product-stock-status>svg{width:20px;height:20px;color:var(--brand-primary)}.product-stock-status span{display:grid;gap:3px}.product-stock-status strong{color:var(--text);font-size:12px}.product-stock-status small{color:var(--muted);font-size:10px;line-height:1.35}.product-stock-status.is-empty{border-color:#fecaca;background:#fff7f7}.product-stock-status.is-empty>svg{color:#dc2626}
.catalog-stock-summary{display:inline-flex;width:max-content;max-width:100%;align-items:center;margin-top:5px;padding:3px 7px;border-radius:999px;color:var(--brand-primary);background:var(--brand-primary-subtle);font-size:9px;font-weight:800}.catalog-stock-summary.is-empty{color:#b42318;background:#fff1f0}
@media(max-width:900px){.product-stock-settings{grid-template-columns:1fr}}

/* Organização comercial do produto: preço, teste e estoque */
.product-commerce-price{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
.product-commerce-price>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand-primary) 3%,#fff)}
.product-commerce-price>header div{display:grid;gap:3px}.product-commerce-price>header strong{color:var(--text);font-size:13px}.product-commerce-price>header small{color:var(--muted);font-size:10px;line-height:1.4}.product-commerce-price>header mark{padding:5px 8px;border:1px solid var(--brand-primary-border);border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:9px;font-weight:850}
.product-commerce-price>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);gap:12px;align-items:end;padding:16px}
.product-commerce-price-field{display:grid;gap:7px;min-width:0;color:var(--text);font-size:11px;font-weight:800}.product-commerce-money,.product-commerce-number{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease}.product-commerce-money:focus-within,.product-commerce-number:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent)}.product-commerce-money>b,.product-commerce-number>b{align-self:stretch;display:grid;place-items:center;padding:0 12px;border-right:1px solid var(--line);background:#f7f9fc;color:var(--muted);font-size:10px;font-weight:850}.product-commerce-money input,.product-commerce-number input{width:100%;height:42px;margin:0;padding:0 12px;border:0!important;border-radius:0!important;box-shadow:none!important;outline:0;background:#fff;color:var(--text);font-family: var(--asv-font-family);font-size:14px;font-weight:800}
.product-commerce-payment-link{display:flex;min-height:66px;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;color:var(--text);text-decoration:none;transition:border-color .16s ease,background .16s ease}.product-commerce-payment-link:hover{border-color:var(--brand-primary-border);background:var(--brand-primary-subtle)}.product-commerce-payment-link>svg{width:18px;flex:none;color:var(--brand-primary)}.product-commerce-payment-link span{display:grid;gap:3px}.product-commerce-payment-link strong{font-size:11px}.product-commerce-payment-link small{color:var(--muted);font-size:9px;line-height:1.4}
.product-commerce-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product-commerce-option{align-content:start;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease}.product-commerce-option.is-enabled{border-color:var(--brand-primary-border);box-shadow:0 8px 22px color-mix(in srgb,var(--brand-primary) 7%,transparent)}.product-commerce-option>header{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}.product-commerce-option>header>span{display:grid;width:38px;height:38px;place-items:center;border-radius:8px;background:var(--brand-primary-soft);color:var(--brand-primary)}.product-commerce-option>header svg{width:18px;height:18px}.product-commerce-option>header div{display:grid;gap:3px}.product-commerce-option>header strong{color:var(--text);font-size:13px}.product-commerce-option>header small{color:var(--muted);font-size:9px;line-height:1.4}
.product-commerce-toggle{margin:14px 16px!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:8px!important;background:#f8fafc!important}.product-commerce-toggle span{display:grid;gap:3px}.product-commerce-toggle strong{color:var(--text);font-size:11px}.product-commerce-toggle small{color:var(--muted);font-size:9px;line-height:1.4}
.product-commerce-option-fields{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:11px;padding:14px 16px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--brand-primary) 2%,#fff)}.product-commerce-option-fields>label{display:grid;align-content:start;gap:6px;min-width:0;color:var(--text);font-size:10px;font-weight:800}.product-commerce-option-fields>label>small{color:var(--muted);font-size:8px;font-weight:600;line-height:1.45}.product-commerce-option-fields select{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fff;color:var(--text);font-family: var(--asv-font-family);font-size:10px;outline:0}.product-commerce-option-fields select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent)}.product-commerce-number{grid-template-columns:minmax(0,1fr) auto}.product-commerce-number>b{border-right:0;border-left:1px solid var(--line)}
.product-commerce-option-fields[hidden]{display:none!important}
.product-commerce-option-fields.is-stock{grid-template-columns:minmax(0,1fr) minmax(170px,.75fr)}.product-commerce-stock-state{display:flex;min-height:72px;align-items:center;gap:10px;padding:11px;border:1px solid var(--brand-primary-border);border-radius:8px;background:#fff}.product-commerce-stock-state>svg{width:18px;height:18px;flex:none;color:var(--brand-primary)}.product-commerce-stock-state span{display:grid;gap:3px}.product-commerce-stock-state strong{color:var(--text);font-size:11px}.product-commerce-stock-state small{color:var(--muted);font-size:8px;line-height:1.4}.product-commerce-stock-state.is-empty{border-color:#fecaca;background:#fff7f7}.product-commerce-stock-state.is-empty>svg{color:#dc2626}
.product-service-form[data-service-section=precos] .product-service-actions{padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:1100px){.product-commerce-options{grid-template-columns:1fr}}
@media(max-width:700px){.product-commerce-price>div,.product-commerce-option-fields,.product-commerce-option-fields.is-stock{grid-template-columns:1fr}.product-commerce-price>header{align-items:flex-start}.product-commerce-payment-link{min-height:58px}.product-commerce-option>header,.product-commerce-toggle,.product-commerce-option-fields{padding-right:13px!important;padding-left:13px!important}.product-service-form[data-service-section=precos] .product-service-actions{display:grid;grid-template-columns:1fr}.product-service-form[data-service-section=precos] .product-service-actions .btn{width:100%;justify-content:center}}

/* Equipe e categorias do suporte */
.support-management-page{padding:30px clamp(24px,3vw,46px) 44px}.support-management-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.support-management-summary article{display:flex;align-items:center;gap:13px;min-height:86px;padding:16px 18px;border:1px solid #dfe7f1;border-radius:10px;background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.045)}.support-management-summary article>span,.support-management-create-card>header>span,.support-management-section>header>div>span,.support-category-guide>span{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;color:var(--brand-primary);border-radius:9px;background:var(--brand-primary-soft)}.support-management-summary svg,.support-management-create-card>header svg,.support-management-section>header>div>span svg,.support-category-guide>span svg{width:19px;height:19px}.support-management-summary small,.support-management-summary strong{display:block}.support-management-summary small{color:#738096;font-size:10px;font-weight:750}.support-management-summary strong{margin-top:2px;color:#172033;font-size:22px}.support-management-create-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;margin-bottom:18px}.support-management-create-grid.is-categories{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)}.support-management-create-card{padding:0;overflow:hidden}.support-management-create-card>header,.support-management-section>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid #e7edf5}.support-management-create-card>header{justify-content:flex-start}.support-management-create-card h2,.support-management-section h2,.support-category-guide h2{margin:0;color:#172033;font-size:16px}.support-management-create-card p,.support-management-section p,.support-category-guide p{margin:4px 0 0;color:#748196;font-size:10px;line-height:1.45}.support-management-create-card>form,.support-member-update-form,.support-role-editor form:first-child,.support-category-card>form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px 20px}.support-management-create-card label,.support-member-editor label,.support-role-editor label,.support-category-card label{display:grid;gap:6px;color:#536278;font-size:10px;font-weight:800}.support-management-create-card input,.support-management-create-card select,.support-member-editor input,.support-member-editor select,.support-role-editor input,.support-category-card input{width:100%;height:40px;border:1px solid #dbe4ef;border-radius:8px;padding:0 11px;background:#fff;color:#172033;font-family: var(--asv-font-family);font-size:11px;outline:0}.support-management-create-card input:focus,.support-management-create-card select:focus,.support-member-editor input:focus,.support-member-editor select:focus,.support-role-editor input:focus,.support-category-card input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 10%,transparent)}.support-management-create-card>form>label:first-of-type,.support-management-create-card>form>label:nth-of-type(2),.support-management-create-card>form>.support-permission-grid,.support-management-create-card>form>.btn{grid-column:1/-1}.support-management-passwords{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.support-management-create-card .btn,.support-member-editor .btn,.support-role-editor .btn,.support-category-card .btn{justify-self:start}.support-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0;padding:0;border:0}.support-permission-grid legend{grid-column:1/-1;margin-bottom:3px;color:#536278;font-size:10px;font-weight:850}.support-permission-grid>label{display:grid;grid-template-columns:17px minmax(0,1fr);align-items:start;gap:8px;padding:10px;border:1px solid #e2e9f2;border-radius:8px;background:#fbfcfe;cursor:pointer}.support-permission-grid input{width:15px;height:15px;margin:2px 0 0;accent-color:var(--brand-primary)}.support-permission-grid strong,.support-permission-grid small{display:block}.support-permission-grid strong{color:#35445a;font-size:10px}.support-permission-grid small{margin-top:2px;color:#8190a4;font-size:8px;line-height:1.35}.support-management-section{padding:0;overflow:hidden;margin-bottom:18px}.support-management-section>header>div{display:flex;align-items:center;gap:12px}.support-management-section>header>mark,.support-role-card summary>mark,.support-member-card summary>mark,.support-category-card-heading>mark{padding:6px 9px;color:#6b778a;border-radius:999px;background:#eef2f7;font-size:9px;font-weight:850}.support-member-list,.support-role-grid{display:grid;gap:10px;padding:14px}.support-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.support-member-card,.support-role-card{overflow:hidden;border:1px solid #e1e8f1;border-radius:9px;background:#fff}.support-member-card>summary,.support-role-card>summary{display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:12px;min-height:70px;padding:12px 14px;cursor:pointer;list-style:none}.support-member-card>summary::-webkit-details-marker,.support-role-card>summary::-webkit-details-marker{display:none}.support-member-card>summary>svg,.support-role-card>summary>svg{width:16px;height:16px;color:#7c899c;transition:transform .18s}.support-member-card[open]>summary>svg,.support-role-card[open]>summary>svg{transform:rotate(180deg)}.support-member-avatar,.support-role-card>summary>span:first-child{display:grid;width:42px;height:42px;place-items:center;color:var(--brand-primary);border-radius:9px;background:var(--brand-primary-soft);font-size:13px;font-weight:900}.support-role-card>summary>span:first-child svg{width:18px;height:18px}.support-member-card summary strong,.support-member-card summary small,.support-role-card summary strong,.support-role-card summary small{display:block}.support-member-card summary strong,.support-role-card summary strong{color:#26344a;font-size:12px}.support-member-card summary small,.support-role-card summary small{margin-top:3px;color:#7d8a9e;font-size:9px}.support-member-card summary mark.is-active,.support-category-card-heading mark.is-active{color:#13734a;background:#eaf8f1}.support-member-editor,.support-role-editor{border-top:1px solid #e7edf5;background:#fafcff}.support-member-editor>form:last-child,.support-role-editor>form:last-child,.support-category-card>form:last-child{padding:0 20px 18px}.support-member-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid #e7edf5;background:#fff}.support-member-toolbar>div strong,.support-member-toolbar>div small{display:block}.support-member-toolbar>div strong{color:#26344a;font-size:13px}.support-member-toolbar>div small{margin-top:3px;color:#7d8a9e;font-size:11px}.support-member-toolbar form{margin:0}.support-member-toolbar .btn{white-space:nowrap}.support-member-protected{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #dfe6ef;border-radius:8px;background:#f4f6f9;color:#69768a;font-size:11px;font-weight:750}.support-member-protected svg{width:15px;height:15px}.btn.danger{color:#b4232f;border-color:#efc6ca;background:#fff7f7}.btn.danger:hover{background:#feecee}.support-category-guide{display:grid;align-content:center;justify-items:start;gap:12px;padding:22px}.support-category-guide dl{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:4px 0 0;overflow:hidden;border:1px solid #e2e9f2;border-radius:9px;background:#e2e9f2}.support-category-guide dl>div{padding:12px;background:#fff}.support-category-guide dt{color:#7d899b;font-size:8px;font-weight:800}.support-category-guide dd{margin:3px 0 0;color:#172033;font-size:17px;font-weight:900}.support-category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}.support-category-card{overflow:hidden;border:1px solid #e1e8f1;border-radius:9px;background:#fbfcfe}.support-category-card-heading{grid-column:1/-1;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px}.support-category-card-heading>span{display:grid;width:38px;height:38px;place-items:center;color:var(--brand-primary);border-radius:8px;background:var(--brand-primary-soft)}.support-category-card-heading svg{width:17px;height:17px}.support-category-card-heading strong,.support-category-card-heading small{display:block}.support-category-card-heading strong{color:#27364a;font-size:12px}.support-category-card-heading small{margin-top:2px;color:#8190a4;font-size:9px}.support-management-toggle{grid-column:1/-1!important;display:grid!important;grid-template-columns:17px minmax(0,1fr);align-items:start;gap:9px!important;padding:10px;border:1px solid #e2e9f2;border-radius:8px;background:#fff}.support-management-toggle input{width:15px!important;height:15px!important;margin:2px 0 0;accent-color:var(--brand-primary)}.support-management-toggle strong,.support-management-toggle small{display:block}.support-management-toggle small{margin-top:2px;color:#8491a3;font-size:8px}.support-category-card>form>.btn{grid-column:1/-1}.support-management-create-grid.is-categories .support-management-create-card>form>label{grid-column:1/-1}
@media(max-width:1050px){.support-management-create-grid,.support-management-create-grid.is-categories{grid-template-columns:1fr}.support-role-grid,.support-category-list{grid-template-columns:1fr}}
@media(max-width:760px){.support-management-page{padding:20px 16px 28px}.support-management-summary{grid-template-columns:1fr}.support-management-create-card>form,.support-member-update-form,.support-role-editor form:first-child,.support-category-card>form,.support-permission-grid{grid-template-columns:1fr}.support-management-create-card>form>*,.support-member-update-form>*,.support-role-editor form:first-child>*,.support-category-card>form>*{grid-column:1!important}.support-management-passwords{grid-template-columns:1fr}.support-member-card>summary,.support-role-card>summary{grid-template-columns:40px minmax(0,1fr) 16px}.support-member-card>summary>mark,.support-role-card>summary>mark{grid-column:2;justify-self:start}.support-category-guide dl{grid-template-columns:1fr}.support-management-create-card .btn,.support-member-editor .btn,.support-role-editor .btn,.support-category-card .btn{width:100%;justify-content:center}}

/* Escala tipografica legivel da gestao de suporte */
.support-management-summary small,.support-management-create-card label,.support-member-editor label,.support-role-editor label,.support-category-card label,.support-permission-grid legend{font-size:12px}.support-management-create-card h2,.support-management-section h2,.support-category-guide h2{font-size:18px}.support-management-create-card p,.support-management-section p,.support-category-guide p{font-size:13px}.support-management-create-card input,.support-management-create-card select,.support-member-editor input,.support-member-editor select,.support-role-editor input,.support-category-card input{font-size:14px}.support-permission-grid strong,.support-member-card summary strong,.support-role-card summary strong,.support-category-card-heading strong{font-size:13px}.support-permission-grid small,.support-member-card summary small,.support-role-card summary small,.support-category-card-heading small,.support-management-toggle small{font-size:11px}.support-management-section>header>mark,.support-role-card summary>mark,.support-member-card summary>mark,.support-category-card-heading>mark{font-size:11px}.support-category-guide dt{font-size:11px}

/* Automações e CronJobs */
.automation-settings-page{gap:18px}.automation-section-link{display:flex}.automation-section-link>a{display:flex;align-items:center;gap:12px;width:min(100%,520px);padding:12px 14px;border:1px solid var(--brand-primary-border);border-radius:10px;background:var(--brand-primary-subtle);color:var(--text);text-decoration:none}.automation-section-link>a>svg:first-child{width:18px;color:var(--brand-primary)}.automation-section-link>a>svg:last-child{width:15px;margin-left:auto;transform:rotate(-90deg);color:var(--brand-primary)}.automation-section-link span{display:grid;gap:2px}.automation-section-link strong{font-size:12px}.automation-section-link small{color:var(--muted);font-size:10px}.automation-cron-panel{padding:0;overflow:hidden;border-top:3px solid var(--brand-primary)}.automation-cron-panel>header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}.automation-cron-panel>header>span,.automation-panel-heading>span,.automation-routines-panel>header>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--brand-primary-soft);color:var(--brand-primary)}.automation-cron-panel>header svg,.automation-panel-heading>span svg,.automation-routines-panel>header>span svg{width:20px;height:20px}.automation-cron-panel h2,.automation-panel-heading h2,.automation-routines-panel h2{margin:2px 0 3px;color:var(--text);font-size:16px}.automation-cron-panel p,.automation-panel-heading p,.automation-routines-panel p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.automation-cron-panel header small,.automation-panel-heading small{color:var(--brand-primary);font-size:9px;font-weight:800;letter-spacing:.05em}.automation-cron-panel header>i{padding:6px 9px;border:1px solid var(--brand-primary-border);border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:9px;font-style:normal;font-weight:800;white-space:nowrap}.automation-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:16px 22px;background:color-mix(in srgb,var(--brand-primary) 3%,#fff)}.automation-command-row code{display:block;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-size:11px;line-height:1.5;overflow-wrap:anywhere}.automation-command-row .btn{min-height:42px}.automation-cron-panel>footer{display:flex;flex-wrap:wrap;gap:18px;padding:12px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.automation-cron-panel>footer span{display:flex;align-items:center;gap:6px}.automation-cron-panel>footer svg{width:14px;color:var(--brand-primary)}.automation-billing-form{display:grid;gap:18px}.automation-billing-panel{padding:0;overflow:hidden}.automation-panel-heading,.automation-routines-panel>header{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid var(--line)}.automation-timeline{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch;padding:20px}.automation-stage-card{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:15px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:default}.automation-stage-card:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 12%,transparent)}.automation-stage-card.has-error{border-color:#d84b58}.automation-stage-number{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-primary);color:var(--brand-on-primary,#fff);font-size:11px;font-weight:850}.automation-stage-copy{display:grid;gap:4px;align-content:start}.automation-stage-copy strong{font-size:11px;line-height:1.35}.automation-stage-copy small{color:var(--muted);font-size:9px;line-height:1.5}.automation-days-field{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:6px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.automation-days-field input{width:100%;min-width:0;height:40px;padding:0 12px;border:0;outline:0;background:transparent;color:var(--text);font-family: var(--asv-font-family);font-size:14px;font-weight:800}.automation-days-field i{padding:0 11px;border-left:1px solid var(--line);color:var(--muted);font-size:9px;font-style:normal;white-space:nowrap}.automation-stage-card>.field-error{grid-column:1/-1;color:#b4232f;font-size:9px;line-height:1.4}.automation-stage-line{align-self:center;height:1px;background:var(--brand-primary-border);position:relative}.automation-stage-line:after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1px solid var(--brand-primary);border-right:1px solid var(--brand-primary);transform:translateY(-50%) rotate(45deg)}.automation-order-note{display:flex;align-items:center;gap:10px;margin:0 20px 20px;padding:11px 13px;border:1px solid var(--brand-primary-border);border-radius:9px;background:var(--brand-primary-subtle);color:var(--brand-primary)}.automation-order-note>svg{width:17px;flex:none}.automation-order-note span{display:grid;gap:2px}.automation-order-note strong{font-size:10px}.automation-order-note small{color:var(--muted);font-size:9px}.automation-routines-panel{padding:0;overflow:hidden}.automation-routines-panel>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}.automation-routines-panel article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:15px 17px;background:#fff}.automation-routines-panel article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--brand-primary-soft);color:var(--brand-primary)}.automation-routines-panel article>span svg{width:15px}.automation-routines-panel article>div{display:grid;gap:3px}.automation-routines-panel article strong{font-size:10px}.automation-routines-panel article small{color:var(--muted);font-size:9px;line-height:1.45}.automation-routines-panel article>i{grid-column:2;justify-self:start;padding:4px 7px;border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:8px;font-style:normal;font-weight:800}.automation-settings-actions{margin-top:0}
@media(max-width:1000px){.automation-timeline{grid-template-columns:1fr;gap:10px}.automation-stage-line{width:1px;height:20px;justify-self:center}.automation-stage-line:after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}.automation-routines-panel>div{grid-template-columns:1fr}}
@media(max-width:700px){.automation-section-link>a{width:100%}.automation-cron-panel>header{grid-template-columns:42px minmax(0,1fr)}.automation-cron-panel header>i{grid-column:1/-1;justify-self:start}.automation-command-row{grid-template-columns:1fr;padding:14px}.automation-command-row .btn{width:100%;justify-content:center}.automation-cron-panel>footer{display:grid;gap:9px;padding:12px 14px}.automation-timeline{padding:14px}.automation-panel-heading,.automation-routines-panel>header{align-items:flex-start;padding:16px 14px}.automation-order-note{margin:0 14px 14px}.automation-settings-actions{display:grid;grid-template-columns:1fr}.automation-settings-actions .btn{width:100%;justify-content:center}}

/* Comandos do agendador */
.automation-runtime-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border-bottom:1px solid var(--line)}
.automation-runtime-paths>div{display:grid;gap:5px;min-width:0;padding:13px 22px;background:#fff}
.automation-runtime-paths dt{color:var(--muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.automation-runtime-paths dd{min-width:0;margin:0;color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;overflow-wrap:anywhere}
.automation-cron-health{margin:18px 22px 0;overflow:hidden;border:1px solid #d7e3dc;border-radius:11px;background:#fff}.automation-cron-health>header{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid #e6eee9;background:#f5fbf7}.automation-cron-health>header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;color:#11724d;background:#dcf5e8}.automation-cron-health>header>span svg{width:19px;height:19px}.automation-cron-health>header>div{min-width:0}.automation-cron-health>header small,.automation-cron-health dt{display:block;color:#617084;font-size:10px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.automation-cron-health>header strong{display:block;margin-top:2px;color:#102035;font-size:15px}.automation-cron-health>header p{margin:3px 0 0;color:#60708a;font-size:12px;line-height:1.45}.automation-cron-health>header>i{padding:6px 10px;border-radius:999px;color:#11724d;background:#dcf5e8;font-size:11px;font-style:normal;font-weight:850;white-space:nowrap}.automation-cron-health>dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}.automation-cron-health>dl>div{display:grid;gap:4px;min-width:0;padding:14px 16px}.automation-cron-health>dl>div+div{border-left:1px solid #e8edf3}.automation-cron-health dd{margin:0;color:#14233a;font-size:14px;font-weight:800;overflow-wrap:anywhere}.automation-cron-health>dl small{color:#6d7b91;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.automation-cron-health.is-failed,.automation-cron-health.is-stale{border-color:#efc9ce}.automation-cron-health.is-failed>header,.automation-cron-health.is-stale>header{border-bottom-color:#f1dadd;background:#fff7f7}.automation-cron-health.is-failed>header>span,.automation-cron-health.is-stale>header>span,.automation-cron-health.is-failed>header>i,.automation-cron-health.is-stale>header>i{color:#a92938;background:#fde7e9}.automation-cron-health.is-never,.automation-cron-health.is-unavailable{border-color:#ead9af}.automation-cron-health.is-never>header,.automation-cron-health.is-unavailable>header{border-bottom-color:#efe2c4;background:#fffaf0}.automation-cron-health.is-never>header>span,.automation-cron-health.is-unavailable>header>span,.automation-cron-health.is-never>header>i,.automation-cron-health.is-unavailable>header>i{color:#8a5c0d;background:#ffefc9}
.automation-hosting-commands{display:grid;gap:14px;padding:18px 22px;background:color-mix(in srgb,var(--brand-primary) 3%,#fff)}
.automation-command-card{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
.automation-command-card.is-recommended{border-color:var(--brand-primary-border)}
.automation-command-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 16px 12px}
.automation-command-card>header small{color:var(--brand-primary);font-size:8px;font-weight:850;letter-spacing:.06em}
.automation-command-card>header h3{margin:3px 0 2px;color:var(--text);font-size:12px}
.automation-command-card>header p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}
.automation-command-card>header mark{padding:5px 8px;border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:8px;font-weight:800;white-space:nowrap}
.automation-command-card .automation-command-row{padding:12px 16px 16px;background:#fff}
.automation-command-label{display:block;padding:1px 16px 0;color:var(--muted);font-size:9px;font-weight:750}
.automation-cpanel-frequency{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:0 16px 14px}
.automation-cpanel-frequency span{display:grid;gap:5px;padding:9px;border:1px solid var(--line);border-radius:8px;text-align:center}
.automation-cpanel-frequency small{color:var(--muted);font-size:8px;line-height:1.2}
.automation-cpanel-frequency strong{color:var(--brand-primary);font-size:15px}
.automation-command-help{margin:-3px 16px 14px;color:var(--muted);font-size:9px;line-height:1.5}
.automation-command-help code{color:var(--text);font-weight:750}
.automation-environment-note{display:flex;align-items:flex-start;gap:11px;margin:18px 22px 0;padding:12px 14px;border:1px solid var(--brand-primary-border);border-radius:9px;background:var(--brand-primary-subtle);color:var(--brand-primary)}
.automation-environment-note>svg{width:17px;flex:none;margin-top:1px}
.automation-environment-note strong{display:block;font-size:10px}
.automation-environment-note p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.5}
.automation-environment-note+.automation-command-card{margin:14px 22px 18px}
@media(max-width:700px){.automation-runtime-paths{grid-template-columns:1fr}.automation-runtime-paths>div{padding:11px 14px}.automation-cron-health{margin:14px 14px 0}.automation-cron-health>header{grid-template-columns:38px minmax(0,1fr);padding:14px}.automation-cron-health>header>i{grid-column:1/-1;justify-self:start}.automation-cron-health>dl{grid-template-columns:1fr}.automation-cron-health>dl>div{padding:12px 14px}.automation-cron-health>dl>div+div{border-top:1px solid #e8edf3;border-left:0}.automation-hosting-commands{padding:14px}.automation-command-card>header{display:grid}.automation-command-card>header mark{justify-self:start}.automation-cpanel-frequency{grid-template-columns:repeat(5,minmax(52px,1fr));overflow-x:auto;padding-bottom:17px}.automation-environment-note{margin:14px 14px 0}.automation-environment-note+.automation-command-card{margin:12px 14px 14px}}
.automation-lifecycle-panel{padding:0;overflow:hidden}.automation-postdue-grid{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch;padding:20px}.automation-stage-card-danger .automation-stage-number{background:#b4232f}.automation-stage-card-danger{border-color:#ead3d6}.automation-stage-card-danger:focus-within{border-color:#b4232f;box-shadow:0 0 0 3px color-mix(in srgb,#b4232f 12%,transparent)}
@media(max-width:900px){.automation-postdue-grid{grid-template-columns:1fr;gap:10px}.automation-postdue-grid>.automation-stage-line{width:1px;height:20px;justify-self:center}.automation-postdue-grid>.automation-stage-line:after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}}
@media(max-width:700px){.automation-postdue-grid{padding:14px}}

/* Logs das automações */
.automation-logs-page{gap:18px}.automation-log-hero{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:20px 22px;border-top:3px solid var(--brand-primary)}.automation-log-hero-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:var(--brand-primary-soft);color:var(--brand-primary)}.automation-log-hero-icon svg{width:21px}.automation-log-hero small{color:var(--brand-primary);font-size:9px;font-weight:800;letter-spacing:.05em}.automation-log-hero h2{margin:3px 0;font-size:17px}.automation-log-hero p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.automation-log-hero dl{display:grid;grid-template-columns:repeat(2,minmax(95px,1fr));margin:0}.automation-log-hero dl>div{display:grid;gap:3px;padding:4px 18px;border-left:1px solid var(--line)}.automation-log-hero dt{color:var(--muted);font-size:9px}.automation-log-hero dd{margin:0;font-size:16px;font-weight:850}.automation-log-filters{align-self:start;width:max-content}.automation-log-filters a{gap:7px}.automation-log-filters a span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--brand-primary) 8%,#fff);font-size:9px}.automation-log-list{display:grid;gap:12px}.automation-log-card{padding:0;overflow:hidden;border-left:3px solid #1a9a55}.automation-log-card.has-failed{border-left-color:#c13b46}.automation-log-card>header{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}.automation-log-status{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#e8f8ef;color:#168149}.has-failed .automation-log-status{background:#fff0f1;color:#b4232f}.automation-log-status svg{width:17px}.automation-log-card h2{margin:0;font-size:13px}.automation-log-card header p{margin:3px 0 0;color:var(--muted);font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}.automation-log-card mark{padding:5px 9px;border-radius:999px;background:#e8f8ef;color:#168149;font-size:9px;font-weight:850}.automation-log-card.has-failed mark{background:#fff0f1;color:#b4232f}.automation-log-meta{display:flex;gap:24px;margin:0;padding:11px 18px;background:color-mix(in srgb,var(--brand-primary) 2%,#fff);border-bottom:1px solid var(--line)}.automation-log-meta div{display:flex;align-items:center;gap:7px}.automation-log-meta dt{color:var(--muted);font-size:9px}.automation-log-meta dd{margin:0;font-size:10px;font-weight:750}.automation-log-results{display:flex;flex-wrap:wrap;gap:1px;padding:14px 18px;background:var(--line)}.automation-log-results span{display:grid;gap:3px;min-width:115px;flex:1;padding:10px 12px;background:#fff}.automation-log-results small{color:var(--muted);font-size:8px}.automation-log-results strong{font-size:12px}.automation-log-error{display:grid;gap:4px;margin:14px 18px;padding:12px 14px;border:1px solid #ebc7cb;border-radius:8px;background:#fff7f7}.automation-log-error strong{color:#a51f2c;font-size:10px}.automation-log-error p{margin:0;color:#5e2930;font-size:10px;line-height:1.5;overflow-wrap:anywhere}.automation-log-error small{color:#8d6670;font-size:8px;line-height:1.5}
@media(max-width:760px){.automation-log-hero{grid-template-columns:46px minmax(0,1fr);padding:16px}.automation-log-hero dl{grid-column:1/-1;width:100%}.automation-log-hero dl>div:first-child{border-left:0}.automation-log-filters{display:grid;grid-template-columns:1fr;width:100%}.automation-log-filters a{justify-content:space-between}.automation-log-card>header{grid-template-columns:36px minmax(0,1fr)}.automation-log-card mark{grid-column:1/-1;justify-self:start}.automation-log-meta{display:grid;gap:7px}.automation-log-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}.automation-log-results span{min-width:0}.automation-log-error{margin:10px}}
.system-information-action.active {
    color: var(--brand-primary);
    border-color: var(--brand-primary-border);
    background: var(--brand-primary-subtle);
}

.system-information-page { gap: 22px; }
.system-info-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border-color, #dce5ef);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-primary-subtle), #fff 52%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}
.system-info-hero-icon, .system-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}
.system-info-hero-icon svg, .system-section-icon svg { width: 21px; height: 21px; }
.system-info-hero small { color: var(--brand-primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.system-info-hero h2 { margin: 3px 0 2px; color: #0f172a; font-size: 24px; line-height: 1.2; }
.system-info-hero p { margin: 0; color: #64748b; font-size: 14px; }
.license-status-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.license-status-pill svg { width: 16px; height: 16px; }
.license-status-pill.is-valid { color: #087443; background: #e8f8ef; }
.license-status-pill.is-invalid { color: #b42318; background: #fff0ef; }
.system-information-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .9fr); gap: 20px; align-items: start; }
.system-information-page .panel { margin: 0; border-radius: 12px; overflow: hidden; }
.system-license-panel > header, .system-version-panel > header, .system-license-api-panel > header, .system-updates-panel > header { padding: 22px 22px 18px; border-bottom: 1px solid #e7edf5; }
.system-license-panel > header > div, .system-version-panel > header, .system-license-api-panel > header, .system-updates-panel > header { display: flex; align-items: center; gap: 13px; }
.system-license-panel h2, .system-version-panel h2, .system-license-api-panel h2, .system-updates-panel h2 { margin: 0; color: #0f172a; font-size: 18px; line-height: 1.25; }
.system-license-panel header p, .system-version-panel header p, .system-license-api-panel header p, .system-updates-panel header p { margin: 3px 0 0; color: #64748b; font-size: 13px; line-height: 1.45; }
.system-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 8px 22px 18px; }
.system-detail-list > div { min-width: 0; padding: 14px 10px 14px 0; border-bottom: 1px solid #edf2f7; }
.system-detail-list > div:nth-child(even) { padding-left: 18px; border-left: 1px solid #edf2f7; }
.system-detail-list > div.is-wide { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.system-detail-list dt, .system-version-panel dt { margin-bottom: 5px; color: #718096; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.system-detail-list dd, .system-version-panel dd { margin: 0; color: #172033; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.system-detail-list code, .system-version-panel code { color: #334155; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.system-license-key { display: flex; align-items: center; gap: 9px; min-width: 0; }
.system-license-key code { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.system-license-key-toggle { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 1px solid var(--brand-primary-border); border-radius: 7px; color: var(--brand-primary); background: var(--brand-primary-soft); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.system-license-key-toggle:hover { border-color: var(--brand-primary); background: var(--brand-primary-subtle); }
.system-license-key-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 18%, transparent); outline-offset: 2px; }
.system-license-key-toggle:disabled { opacity: .58; cursor: wait; }
.system-license-key-toggle svg { width: 15px; height: 15px; }
.system-license-key-toggle .is-hide-icon { display: none; }
.system-license-key-toggle[aria-pressed="true"] .is-show-icon { display: none; }
.system-license-key-toggle[aria-pressed="true"] .is-hide-icon { display: inline-grid; }
.system-license-message { margin: 0 22px 18px; padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.system-license-message.is-valid { color: #087443; background: #eaf8f0; }
.system-license-message.is-invalid { color: #9f251b; background: #fff1f0; }
.system-license-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 0 22px 12px; }
.system-license-form label { min-width: 0; }
.system-license-form label > span { display: block; margin-bottom: 7px; color: #344054; font-size: 12px; font-weight: 800; }
.system-license-form input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid #cfdbea; border-radius: 8px; color: #172033; background: #fff; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.system-license-form input:focus { outline: 3px solid var(--brand-primary-soft); border-color: var(--brand-primary); }
.system-license-form .btn { align-self: end; }
.system-license-form + form { padding: 0 22px 22px; }
.system-license-api-panel dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 8px 22px 14px; }
.system-license-api-panel dl > div { min-width: 0; padding: 12px 0; border-bottom: 1px solid #edf1f6; }
.system-license-api-panel dl > div:nth-last-child(-n+2) { border-bottom: 0; }
.system-license-api-panel dl > div.is-wide { grid-column: 1 / -1; }
.system-license-api-panel dt { margin-bottom: 4px; color: #667085; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.system-license-api-panel dd { margin: 0; color: #172033; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.system-license-api-panel code { color: #344054; font-size: 12px; }
.license-api-state { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; }
.license-api-state.is-ready { color: #087443; background: #eaf8f0; }
.license-api-state.is-error { color: #9f251b; background: #fff1f0; }
.system-api-test-form { padding: 0 22px 22px; }
.system-license-form .field-error { display: block; margin-top: 6px; color: #b42318; font-size: 12px; }
.system-information-side { display: grid; gap: 20px; }
.system-version-panel dl { margin: 0; padding: 8px 22px 18px; }
.system-version-panel dl > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #edf2f7; }
.system-version-panel dl > div:last-child { border-bottom: 0; }
.system-updates-empty { display: grid; justify-items: center; padding: 28px 22px; text-align: center; }
.system-updates-empty > svg { width: 28px; height: 28px; margin-bottom: 10px; color: #0b8a52; }
.system-updates-empty strong { color: #172033; font-size: 15px; }
.system-updates-empty p { margin: 5px 0 0; color: #718096; font-size: 13px; line-height: 1.45; }
.system-update-list { padding: 10px 22px 20px; }
.system-update-item { padding: 15px 0; border-bottom: 1px solid #edf2f7; }
.system-update-item:last-child { border-bottom: 0; }
.system-update-item > div { display: flex; align-items: center; gap: 8px; }
.system-update-item > div span { color: var(--brand-primary); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.system-update-item > div b { padding: 3px 6px; border-radius: 5px; color: #b42318; background: #fff0ef; font-size: 10px; }
.system-update-item h3 { margin: 7px 0 4px; color: #172033; font-size: 15px; }
.system-update-item p { margin: 0 0 9px; color: #64748b; font-size: 13px; line-height: 1.5; }
.system-update-item a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-primary); font-size: 12px; font-weight: 800; text-decoration: none; }
.system-update-item a svg { width: 14px; height: 14px; }
.system-update-item > small { color: #087443; font-size: 12px; font-weight: 700; }
.system-update-operation { margin: 16px 22px 4px; padding: 14px; border: 1px solid var(--brand-primary-border); border-radius: 9px; background: var(--brand-primary-subtle); }
.system-update-operation.completed { border-color: #a7e1c3; background: #effaf4; }
.system-update-operation.failed, .system-update-operation.rolled_back { border-color: #f1b7b2; background: #fff5f4; }
.system-update-operation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.system-update-operation-heading > div { display: grid; gap: 2px; }
.system-update-operation-heading small { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.system-update-operation-heading strong { color: #172033; font-size: 14px; }
.system-update-operation-heading > span { color: var(--brand-primary); font-size: 12px; font-weight: 900; }
.system-update-progress { height: 7px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 12%, #e7edf5); }
.system-update-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--brand-primary); transition: width .3s ease; }
.system-update-operation > p { margin: 8px 0 0; color: #536278; font-size: 12px; line-height: 1.45; }
.system-update-operation-message { display: block; margin-top: 6px; color: #9f251b; font-size: 12px; line-height: 1.45; }
.system-update-install-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.system-update-install-form .btn { min-height: 36px; }
.system-update-install-form small { color: #667085; font-size: 11px; line-height: 1.4; }

.license-required-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f3f6fa; }
.license-required-card { width: min(500px, 100%); padding: 34px; border: 1px solid #dce5ef; border-radius: 14px; background: #fff; box-shadow: 0 22px 55px rgba(15, 23, 42, .1); }
.license-required-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 11px; color: var(--brand-primary); background: var(--brand-primary-soft); }
.license-required-mark svg { width: 23px; height: 23px; }
.license-required-card > small { color: var(--brand-primary); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.license-required-card h1 { margin: 7px 0 10px; color: #0f172a; font-size: 28px; line-height: 1.15; }
.license-required-card p { margin: 0 0 22px; color: #5f6f85; font-size: 15px; line-height: 1.55; }

@media (max-width: 980px) {
    .system-information-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .system-info-hero { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
    .license-status-pill { width: 100%; margin-left: 0; justify-content: center; }
    .system-detail-list { grid-template-columns: 1fr; }
    .system-detail-list > div:nth-child(even) { padding-left: 0; border-left: 0; }
    .system-license-form { grid-template-columns: 1fr; }
    .system-license-form .btn { width: 100%; }
    .system-license-form + form .btn { width: 100%; }
    .system-update-install-form .btn { width: 100%; justify-content: center; }
    .license-required-card { padding: 26px 22px; }
    .license-required-card h1 { font-size: 24px; }
}
@media(max-width:760px){.support-member-toolbar{align-items:stretch;flex-direction:column}.support-member-toolbar form,.support-member-toolbar .btn,.support-member-protected{width:100%}.support-member-toolbar .btn,.support-member-protected{justify-content:center}}
/* WHMCS protected migration */
.whmcs-import-page{gap:20px}.whmcs-import-page .settings-back-link{align-self:flex-start}.whmcs-import-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:24px;border:1px solid var(--brand-primary-border);background:linear-gradient(135deg,var(--brand-primary-subtle),#fff 60%)}.whmcs-import-hero-icon,.whmcs-upload-card>header>span,.whmcs-preview-dialog>header>span{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--brand-primary);background:var(--brand-primary-soft)}.whmcs-import-hero-icon svg,.whmcs-upload-card>header>span svg{width:22px;height:22px}.whmcs-import-kicker{display:block;margin-bottom:5px;color:var(--brand-primary);font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.whmcs-import-hero h2,.whmcs-upload-card h2,.whmcs-preview-heading h2,.whmcs-preview-dialog h2{margin:0;color:#0f172a;font-size:20px;line-height:1.25}.whmcs-import-hero p,.whmcs-upload-card header p,.whmcs-preview-heading p,.whmcs-preview-dialog header p{max-width:760px;margin:7px 0 0;color:#60708a;font-size:12px;line-height:1.65}.whmcs-import-hero ol{display:flex;gap:8px;margin:0;padding:0;list-style:none}.whmcs-import-hero li{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #dbe4ef;border-radius:9px;background:#fff;color:#4c5d77;font-size:11px;font-weight:750;white-space:nowrap}.whmcs-import-hero li strong{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:var(--brand-on-primary);background:var(--brand-primary)}
.whmcs-upload-card{padding:0;overflow:hidden}.whmcs-upload-card>header{display:flex;align-items:center;gap:14px;padding:22px 24px;border-bottom:1px solid #e3e9f2}.whmcs-upload-card form{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px}.whmcs-upload-card form>label{display:flex;min-width:0;flex-direction:column;gap:6px;color:#162238;font-size:11px;font-weight:800}.whmcs-upload-card form>label>small{min-height:32px;color:#6b7890;font-size:10px;font-weight:550;line-height:1.5}.whmcs-upload-card input[type=text],.whmcs-dialog-search{width:100%;min-height:46px;padding:0 14px;border:1px solid #cad7e7;border-radius:8px;background:#fff;color:#162238;font-family: var(--asv-font-family);outline:0}.whmcs-upload-card input:focus,.whmcs-dialog-search:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-soft)}.whmcs-file-control{position:relative;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;overflow:hidden;border:1px dashed var(--brand-primary-border);border-radius:8px;color:var(--brand-primary);background:var(--brand-primary-subtle);cursor:pointer}.whmcs-file-control input{position:absolute;inset:0;opacity:0;cursor:pointer}.whmcs-file-control b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whmcs-file-control svg{width:18px;flex:0 0 18px}.whmcs-safety-note{grid-column:1/-1;display:flex;gap:12px;padding:14px;border-radius:9px;color:#40516a;background:#f5f8fc}.whmcs-safety-note>svg{width:18px;color:var(--brand-primary);flex:0 0 18px}.whmcs-safety-note strong{font-size:11px}.whmcs-safety-note p{margin:3px 0 0;font-size:10px;line-height:1.6}.whmcs-upload-card .btn{grid-column:2;justify-self:end;gap:8px;background:var(--brand-primary)}
.whmcs-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 24px}.whmcs-preview-actions{display:flex;align-items:center;gap:9px}.whmcs-preview-actions form{margin:0}.whmcs-select-all,.whmcs-discard{gap:7px;min-height:40px;padding:0 13px;border:1px solid var(--brand-primary-border);color:var(--brand-primary);background:var(--brand-primary-subtle)}.whmcs-discard{border-color:#f0c9cc;color:#a52835;background:#fff7f7}.whmcs-preview-actions svg{width:16px}.whmcs-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.whmcs-category-card{min-width:0;overflow:hidden;border:1px solid #dae3ef}.whmcs-category-card.is-empty{opacity:.7}.whmcs-category-card>header{display:flex;align-items:center;gap:12px;padding:17px 18px}.whmcs-category-card>header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;color:var(--brand-primary);background:var(--brand-primary-soft);flex:0 0 38px}.whmcs-category-card>header>span svg{width:18px}.whmcs-category-card h2{margin:0;color:#122039;font-size:13px}.whmcs-category-card header p{margin:3px 0 0;color:#748198;font-size:9px}.whmcs-category-check{position:relative;margin-left:auto}.whmcs-category-check input{position:absolute;opacity:0}.whmcs-category-check span{display:block;width:22px;height:22px;border:1px solid #bdcbde;border-radius:6px;background:#fff;cursor:pointer}.whmcs-category-check input:checked+span{border-color:var(--brand-primary);background:var(--brand-primary)}.whmcs-category-check input:checked+span::after{content:'✓';display:grid;place-items:center;height:100%;color:var(--brand-on-primary);font-size:13px;font-weight:900}.whmcs-category-check input:focus-visible+span{box-shadow:0 0 0 3px var(--brand-primary-soft)}.whmcs-category-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #edf1f6}.whmcs-category-metrics strong{display:flex;align-items:baseline;gap:6px;padding:15px 18px;color:#15233b;font-size:18px}.whmcs-category-metrics strong+strong{border-left:1px solid #edf1f6}.whmcs-category-metrics small{color:#708099;font-size:9px;font-weight:650}.whmcs-category-metrics .has-issues{color:#a76213}.whmcs-category-card>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid #e5ebf3;color:#6d7a90;font-size:10px;font-weight:700;background:#fbfcfe}.whmcs-category-card>footer button{display:flex;align-items:center;gap:5px;border:0;color:var(--brand-primary);background:none;font-family: var(--asv-font-family);font-weight:850;cursor:pointer}.whmcs-category-card>footer button svg{width:14px;transform:rotate(-90deg)}
.whmcs-import-bar{position:sticky;z-index:30;bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:2px;padding:14px 16px;border:1px solid var(--brand-primary-border);border-radius:10px;background:color-mix(in srgb,#fff 94%,transparent);box-shadow:0 14px 35px rgba(15,23,42,.13);backdrop-filter:blur(14px)}.whmcs-import-bar strong{display:block;color:#17243b;font-size:12px}.whmcs-import-bar small{display:block;margin-top:3px;color:#6b7890;font-size:9px}.whmcs-import-bar .btn{gap:8px;min-width:180px;background:var(--brand-primary)}.whmcs-import-bar .btn:disabled{opacity:.45;cursor:not-allowed}
.whmcs-preview-dialog{width:min(1080px,calc(100vw - 40px));max-height:min(760px,calc(100vh - 40px));padding:0;overflow:hidden;border:1px solid #d5dfeb;border-radius:14px;background:#fff;box-shadow:0 25px 70px rgba(15,23,42,.25)}.whmcs-preview-dialog::backdrop{background:rgba(15,23,42,.52);backdrop-filter:blur(3px)}.whmcs-preview-dialog>header{display:flex;align-items:center;gap:13px;padding:18px 20px;border-bottom:1px solid #e3e9f1}.whmcs-preview-dialog>header>span{width:42px;height:42px;flex:0 0 42px}.whmcs-preview-dialog>header>div{min-width:0;flex:1}.whmcs-preview-dialog>header>button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;color:#65748b;background:#f4f7fb;cursor:pointer}.whmcs-preview-dialog>header>button svg{width:18px}.whmcs-dialog-search{display:flex;align-items:center;gap:9px;width:auto;margin:14px 20px}.whmcs-dialog-search svg{width:17px;color:#718099}.whmcs-dialog-search input{width:100%;border:0;outline:0;color:#17243a;font-family: var(--asv-font-family);font-size:11px}.whmcs-preview-table-wrap{max-height:calc(100vh - 280px);overflow:auto;border-block:1px solid #e7ecf3}.whmcs-preview-table{width:100%;border-collapse:collapse;table-layout:fixed}.whmcs-preview-table th{position:sticky;z-index:1;top:0;padding:10px 13px;color:#6b7890;background:#f7f9fc;font-size:9px;text-align:left;text-transform:uppercase;letter-spacing:.04em}.whmcs-preview-table th:first-child{width:95px}.whmcs-preview-table th:nth-child(2){width:28%}.whmcs-preview-table th:nth-child(3){width:13%}.whmcs-preview-table td{padding:12px 13px;border-top:1px solid #edf1f6;color:#26364f;font-size:10px;vertical-align:top}.whmcs-preview-table td>strong,.whmcs-preview-table td>small{display:block;overflow-wrap:anywhere}.whmcs-preview-table td>strong{font-size:11px}.whmcs-preview-table td>small{margin-top:4px;color:#738098;line-height:1.45}.whmcs-row-check{display:inline-flex;align-items:center;gap:7px;font-weight:750}.whmcs-row-check input{width:16px;height:16px;accent-color:var(--brand-primary)}.whmcs-row-check input:disabled+span{color:#a85b64}.whmcs-source-status,.whmcs-analysis{display:inline-flex;align-items:flex-start;gap:6px;padding:5px 7px;border-radius:6px;color:#506079;background:#f2f5f9;line-height:1.45}.whmcs-analysis svg{width:14px;height:14px;flex:0 0 14px}.whmcs-analysis.is-ready{color:#14734e;background:#eaf8f1}.whmcs-analysis.is-warning{color:#8a5a12;background:#fff6de}.whmcs-analysis.is-error{color:#a12b38;background:#fff0f1}.whmcs-preview-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;color:#69778d;font-size:10px}.whmcs-preview-dialog>footer .btn{min-height:40px;background:var(--brand-primary)}
@media(max-width:1050px){.whmcs-import-hero{grid-template-columns:auto 1fr}.whmcs-import-hero ol{grid-column:1/-1}.whmcs-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.whmcs-import-page{gap:14px}.whmcs-import-hero{grid-template-columns:1fr;padding:18px}.whmcs-import-hero-icon{width:42px;height:42px}.whmcs-import-hero h2{font-size:17px}.whmcs-import-hero ol{display:grid;grid-template-columns:1fr}.whmcs-import-hero li{white-space:normal}.whmcs-upload-card form{grid-template-columns:1fr;padding:18px}.whmcs-upload-card form>label>small{min-height:0}.whmcs-upload-card .btn{grid-column:1;width:100%;justify-self:stretch}.whmcs-preview-heading{align-items:flex-start;flex-direction:column;padding:18px}.whmcs-preview-actions{width:100%;align-items:stretch;flex-direction:column}.whmcs-preview-actions form,.whmcs-preview-actions button{width:100%}.whmcs-category-grid{grid-template-columns:1fr}.whmcs-import-bar{bottom:8px;align-items:stretch;flex-direction:column}.whmcs-import-bar .btn{width:100%}.whmcs-preview-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0}.whmcs-preview-table-wrap{max-height:calc(100dvh - 225px)}.whmcs-preview-table,.whmcs-preview-table tbody,.whmcs-preview-table tr,.whmcs-preview-table td{display:block}.whmcs-preview-table thead{display:none}.whmcs-preview-table tbody{padding:5px 14px}.whmcs-preview-table tr{padding:10px 0;border-bottom:1px solid #e7edf5}.whmcs-preview-table td{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px;padding:5px 0;border:0}.whmcs-preview-table td::before{content:attr(data-label);color:#75829a;font-size:8px;font-weight:850;text-transform:uppercase}.whmcs-preview-dialog>footer{padding:12px 14px}.whmcs-preview-dialog>footer .btn{min-width:150px}}
.whmcs-analysis{display:flex;width:100%;max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
.whmcs-analysis>span{min-width:0;overflow-wrap:anywhere;word-break:break-word}.whmcs-preview-table td>small{max-width:100%;overflow:hidden;white-space:normal;word-break:break-word}
.whmcs-import-bar{display:none}.whmcs-import-bar.is-active{display:flex}
/* Readable type scale for migration review on desktop and touch screens. */
.whmcs-import-kicker{font-size:12px}
.whmcs-import-hero p,.whmcs-upload-card header p,.whmcs-preview-heading p,.whmcs-preview-dialog header p{font-size:14px}
.whmcs-import-hero li{font-size:13px}
.whmcs-upload-card form>label{font-size:13px}
.whmcs-upload-card form>label>small,.whmcs-safety-note p{font-size:12px}
.whmcs-safety-note strong{font-size:13px}
.whmcs-category-card h2{font-size:15px}
.whmcs-category-card header p,.whmcs-category-metrics small{font-size:11px}
.whmcs-category-card>footer{font-size:12px}
.whmcs-import-bar strong{font-size:14px}
.whmcs-import-bar small{font-size:12px}
.whmcs-dialog-search input{font-size:13px}
.whmcs-preview-table th{font-size:11px}
.whmcs-preview-table td{font-size:13px}
.whmcs-preview-table td>strong{font-size:14px}
.whmcs-preview-dialog>footer{font-size:12px}
@media(max-width:700px){.whmcs-preview-table td::before{font-size:10px}}
.migration-review-notice{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border:1px solid #ead49c;color:#704f11;background:#fff9e8}
.migration-review-notice>svg{width:20px;height:20px;margin-top:1px;flex:0 0 20px}
.migration-review-notice strong{display:block;font-size:14px}
.migration-review-notice p{margin:4px 0 0;font-size:13px;line-height:1.55}
.whmcs-safety-note{align-items:center;justify-content:center;min-height:68px;padding:10px 14px;border:1px solid #fecaca;color:#991b1b;background:#fef2f2;text-align:center}
.pix-automatic-page > .panel { margin-top: 18px; min-width: 0; }
.pix-automatic-page .panel p { overflow-wrap: anywhere; line-height: 1.65; }
.pix-automatic-page .panel form { display: grid; gap: 14px; margin-top: 18px; }
.pix-automatic-page .panel form .btn { justify-self: start; }
.pix-automatic-page .panel label { line-height: 1.6; }
.pix-automatic-page .panel textarea { display: block; width: 100%; max-width: 100%; resize: vertical; }
.pix-automatic-page .panel input[type="checkbox"] { accent-color: var(--brand-primary); }
.pix-automatic-page .panel .btn:disabled { opacity: .55; cursor: not-allowed; }

.admin-pix-automatic-page { gap: 16px; }
.admin-pix-automatic-page .settings-back-link { margin: 0; }
.pix-auto-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 20px 22px;
    border-top: 3px solid var(--brand-primary);
}
.pix-auto-overview-copy,
.pix-auto-card-header,
.pix-auto-access-status,
.pix-auto-guidance,
.pix-auto-blocked-note,
.pix-auto-authorization-primary { display: flex; align-items: center; gap: 13px; min-width: 0; }
.pix-auto-main-icon,
.pix-auto-card-header > span,
.pix-auto-status-icon,
.pix-auto-authorization-primary > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}
.pix-auto-main-icon { width: 48px; height: 48px; border-radius: 10px; }
.pix-auto-main-icon svg { width: 23px; height: 23px; }
.pix-auto-overview-copy small,
.pix-auto-authorizations-header small { color: var(--brand-primary); font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.pix-auto-overview-copy h2 { margin: 3px 0 4px; color: #142038; font-size: 19px; }
.pix-auto-overview-copy p { max-width: 720px; margin: 0; color: #6d7c93; font-size: 11px; line-height: 1.55; }
.pix-auto-overview-metrics { display: grid; grid-template-columns: repeat(3, minmax(112px, 1fr)); margin: 0; overflow: hidden; border: 1px solid #dce5f1; border-radius: 8px; }
.pix-auto-overview-metrics > div { display: grid; align-content: center; gap: 5px; min-height: 60px; padding: 9px 13px; border-right: 1px solid #dce5f1; background: #f8fafc; }
.pix-auto-overview-metrics > div:last-child { border-right: 0; }
.pix-auto-overview-metrics dt { color: #7b899e; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.pix-auto-overview-metrics dd { margin: 0; color: #142038; font-size: 13px; font-weight: 850; }
.pix-auto-state { display: inline-flex; width: max-content; max-width: 100%; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1.2; }
.pix-auto-state.is-success { color: #13713b; background: #dcf7e6; }
.pix-auto-state.is-danger { color: #b42318; background: #fee7e6; }
.pix-auto-state.is-warning { color: #92540b; background: #fff1d6; }
.pix-auto-state.is-neutral { color: #5d6b81; background: #e9eef5; }
.pix-auto-configuration-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); align-items: start; gap: 16px; }
.pix-auto-control-card,
.pix-auto-checks-card,
.pix-auto-authorizations { overflow: hidden; padding: 0; border-color: #dce5f1; box-shadow: 0 16px 36px rgba(26, 46, 81, .07); }
.pix-auto-card-header { padding: 17px 20px; border-bottom: 1px solid #e2e9f3; }
.pix-auto-card-header > span { width: 39px; height: 39px; border-radius: 8px; }
.pix-auto-card-header > span svg { width: 18px; height: 18px; }
.pix-auto-card-header h2 { margin: 0; color: #142038; font-size: 15px; }
.pix-auto-card-header p { margin: 3px 0 0; color: #748198; font-size: 10px; line-height: 1.4; }
.pix-auto-control-body { display: grid; gap: 12px; padding: 18px 20px; }
.pix-auto-access-status { padding: 14px; border: 1px solid #dfe7f2; border-radius: 9px; background: #f9fbfd; }
.pix-auto-status-icon { width: 40px; height: 40px; border-radius: 9px; }
.pix-auto-status-icon.is-success { color: #16834a; background: #e4f8ec; }
.pix-auto-status-icon.is-danger { color: #c42c24; background: #fee9e8; }
.pix-auto-status-icon.is-neutral { color: #68778d; background: #eaf0f6; }
.pix-auto-status-icon svg { width: 19px; height: 19px; }
.pix-auto-access-status div { display: grid; min-width: 0; gap: 2px; }
.pix-auto-access-status small { color: #7a889d; font-size: 8px; font-weight: 800; }
.pix-auto-access-status strong { color: #172033; font-size: 13px; }
.pix-auto-access-status p { margin: 0; color: #718096; font-size: 9px; }
.pix-auto-guidance,
.pix-auto-blocked-note { align-items: flex-start; padding: 11px 13px; border-radius: 8px; }
.pix-auto-guidance { color: #52627a; background: var(--brand-primary-subtle); }
.pix-auto-guidance > svg,
.pix-auto-blocked-note > svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; }
.pix-auto-guidance > svg { color: var(--brand-primary); }
.pix-auto-guidance p,
.pix-auto-blocked-note p { margin: 0; font-size: 10px; line-height: 1.5; }
.pix-auto-blocked-note { border: 1px solid #f3d6a6; color: #814c0b; background: #fff8e9; }
.pix-auto-blocked-note > svg { color: #b96d0e; }
.pix-auto-blocked-note strong { display: block; margin-bottom: 3px; font-size: 11px; }
.pix-auto-control-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid #e2e9f3; background: #fbfcfe; }
.pix-auto-control-actions form { margin: 0 !important; }
.pix-auto-control-actions .btn { min-height: 38px; }
.pix-auto-activation-form { display: flex !important; max-width: 470px; align-items: flex-end; gap: 10px !important; }
.pix-auto-confirmation { display: flex; align-items: flex-start; gap: 8px; color: #53627a; font-size: 9px; line-height: 1.4 !important; }
.pix-auto-confirmation input,
.pix-auto-row-action input,
.pix-auto-recovery-confirm input { width: 15px; height: 15px; margin: 0; flex: 0 0 15px; accent-color: var(--brand-primary); }
.pix-auto-check-list { display: grid; }
.pix-auto-check-list > div { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #e7edf5; }
.pix-auto-check-list > div:last-child { border-bottom: 0; }
.pix-auto-check-list > div > span { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 7px; }
.pix-auto-check-list > div > span svg { width: 15px; height: 15px; }
.pix-auto-check-list .is-complete > span { color: #16834a; background: #e4f8ec; }
.pix-auto-check-list .is-pending > span { color: #ad650d; background: #fff2d9; }
.pix-auto-check-list strong { color: #26334a; font-size: 10px; }
.pix-auto-check-list p { margin: 3px 0 0; color: #77859a; font-size: 9px; line-height: 1.45 !important; }
.pix-auto-authorizations-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e2e9f3; }
.pix-auto-authorizations-header h2 { margin: 3px 0 2px; color: #142038; font-size: 16px; }
.pix-auto-authorizations-header p { margin: 0; color: #748198; font-size: 10px; }
.pix-auto-authorizations-header > span { padding: 5px 9px; border-radius: 999px; color: var(--brand-primary); background: var(--brand-primary-soft); font-size: 9px; font-weight: 800; white-space: nowrap; }
.pix-auto-authorization-row { display: grid; grid-template-columns: minmax(210px, 1.25fr) minmax(110px, .55fr) minmax(170px, .8fr) minmax(135px, .65fr) auto; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #e7edf5; }
.pix-auto-authorization-row:last-child { border-bottom: 0; }
.pix-auto-authorization-primary > span { width: 38px; height: 38px; border-radius: 9px; }
.pix-auto-authorization-primary > span svg { width: 18px; height: 18px; }
.pix-auto-authorization-primary div,
.pix-auto-authorization-data { display: grid; min-width: 0; gap: 3px; }
.pix-auto-authorization-primary strong,
.pix-auto-authorization-data strong { overflow: hidden; color: #172033; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pix-auto-authorization-primary small,
.pix-auto-authorization-data small,
.pix-auto-authorization-data span:not(.pix-auto-state),
.pix-auto-authorization-data em { color: #7a879a; font-size: 9px; font-style: normal; }
.pix-auto-row-action { display: grid !important; justify-items: end; gap: 6px !important; margin: 0 !important; }
.pix-auto-row-action label { display: flex; align-items: center; gap: 6px; color: #69778c; font-size: 8px; line-height: 1.2 !important; }
.pix-auto-recovery { display: grid !important; grid-column: 1 / -1; grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr) auto auto; align-items: end; gap: 12px !important; margin: 2px 0 0 !important; padding: 13px; border: 1px solid #f0d6ab; border-radius: 8px; background: #fffaf0; }
.pix-auto-recovery > div strong { color: #6f430d; font-size: 11px; }
.pix-auto-recovery > div p { margin: 3px 0 0; color: #876635; font-size: 9px; line-height: 1.4 !important; }
.pix-auto-recovery code { padding: 2px 4px; border-radius: 4px; background: #fff; }
.pix-auto-recovery > label:not(.pix-auto-recovery-confirm) { display: grid; gap: 5px; color: #6f5533; font-size: 9px; font-weight: 750; }
.pix-auto-recovery input[type="text"] { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d9c39c; border-radius: 7px; outline: 0; background: #fff; color: #172033; }
.pix-auto-recovery input[type="text"]:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.pix-auto-recovery-confirm { display: flex; align-items: center; gap: 7px; color: #6f5533; font-size: 9px; line-height: 1.35 !important; }
.pix-auto-empty { display: grid; justify-items: center; gap: 8px; padding: 48px 22px; text-align: center; }
.pix-auto-empty > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 13px; color: var(--brand-primary); background: var(--brand-primary-soft); }
.pix-auto-empty > span svg { width: 22px; height: 22px; }
.pix-auto-empty h3 { margin: 3px 0 0; color: #172033; font-size: 15px; }
.pix-auto-empty p { max-width: 520px; margin: 0; color: #718096; font-size: 10px; line-height: 1.55 !important; }

@media (max-width: 1180px) {
    .pix-auto-overview { grid-template-columns: 1fr; }
    .pix-auto-overview-metrics { width: 100%; }
    .pix-auto-configuration-grid { grid-template-columns: 1fr; }
    .pix-auto-authorization-row { grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(115px, .7fr)); }
    .pix-auto-row-action { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: center; }
    .pix-auto-row-action .btn { justify-self: end; }
    .pix-auto-recovery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .pix-automatic-page .panel form .btn { width: 100%; min-height: 44px; white-space: normal; }
    .pix-automatic-page .panel-header h2 { overflow-wrap: anywhere; min-width: 0; }
    .pix-auto-overview { padding: 17px; }
    .pix-auto-overview-copy { align-items: flex-start; }
    .pix-auto-overview-metrics { grid-template-columns: 1fr; }
    .pix-auto-overview-metrics > div { min-height: 54px; border-right: 0; border-bottom: 1px solid #dce5f1; }
    .pix-auto-overview-metrics > div:last-child { border-bottom: 0; }
    .pix-auto-card-header,
    .pix-auto-control-body,
    .pix-auto-control-actions,
    .pix-auto-authorizations-header,
    .pix-auto-authorization-row { padding-right: 15px; padding-left: 15px; }
    .pix-auto-control-actions,
    .pix-auto-activation-form { align-items: stretch; flex-direction: column; }
    .pix-auto-control-actions form,
    .pix-auto-control-actions .btn { width: 100%; max-width: none; }
    .pix-auto-authorization-row { grid-template-columns: 1fr 1fr; align-items: start; gap: 13px; }
    .pix-auto-authorization-primary { grid-column: 1 / -1; }
    .pix-auto-authorization-row > .pix-auto-authorization-data:nth-of-type(4) { grid-column: 1 / -1; }
    .pix-auto-row-action,
    .pix-auto-recovery { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .pix-auto-row-action { justify-items: stretch; }
    .pix-auto-row-action .btn { justify-self: stretch; }
    .pix-auto-authorizations-header { align-items: flex-start; }
}
.whmcs-safety-note>svg{width:20px;height:20px;color:#dc2626;flex:0 0 20px}
.whmcs-safety-note>div{min-width:0}
.whmcs-safety-note strong{font-size:16px;line-height:1.3}
.whmcs-safety-note p{margin:4px 0 0;font-size:14px;line-height:1.45}
@media(max-width:700px){.whmcs-safety-note{align-items:center;flex-direction:column;gap:7px}.whmcs-safety-note strong{font-size:15px}.whmcs-safety-note p{font-size:13px}}
.whmcs-server-limit-note{grid-column:1/-1;display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #f1d19a;border-radius:9px;color:#7c4a03;background:#fff8e7}
.whmcs-server-limit-note>svg{width:20px;height:20px;flex:0 0 20px}
.whmcs-server-limit-note strong{display:block;font-size:14px}
.whmcs-server-limit-note p{margin:4px 0 0;font-size:13px;line-height:1.55}
@media(max-width:700px){.whmcs-server-limit-note{align-items:center;flex-direction:column;text-align:center}}
.whmcs-upload-progress{grid-column:1/-1;display:grid;gap:9px;padding:15px 16px;border:1px solid var(--brand-primary-border);border-radius:10px;background:var(--brand-primary-subtle)}
.whmcs-upload-progress[hidden]{display:none}.whmcs-upload-progress>div{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#27364a;font-size:14px;font-weight:800}.whmcs-upload-progress>div strong{color:var(--brand-primary)}.whmcs-upload-progress>small{color:#68778c;font-size:12px;line-height:1.45}.whmcs-progress-track{display:block;height:7px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--brand-primary) 12%,#e4eaf2)}.whmcs-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--brand-primary);transition:width .18s ease}
.whmcs-background-analysis{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:26px;border:1px solid var(--brand-primary-border);background:linear-gradient(135deg,var(--brand-primary-subtle),#fff 64%)}.whmcs-background-analysis-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:14px;background:var(--brand-primary-soft);color:var(--brand-primary)}.whmcs-background-analysis-icon svg{width:23px;height:23px}.whmcs-background-analysis:not(.is-failed) .whmcs-background-analysis-icon svg{animation:whmcs-spin 1.4s linear infinite}.whmcs-background-analysis-copy{min-width:0}.whmcs-background-analysis h2{margin:0;color:#101828;font-size:20px;line-height:1.3}.whmcs-background-analysis p{max-width:720px;margin:7px 0 0;color:#60708a;font-size:14px;line-height:1.6}.whmcs-background-analysis-copy>small{display:block;margin-top:10px;color:#748399;font-size:12px}.whmcs-analysis-loader{display:flex;gap:6px;margin-top:14px}.whmcs-analysis-loader i{width:7px;height:7px;border-radius:50%;background:var(--brand-primary);animation:whmcs-pulse 1.25s ease-in-out infinite}.whmcs-analysis-loader i:nth-child(2){animation-delay:.15s}.whmcs-analysis-loader i:nth-child(3){animation-delay:.3s}.whmcs-background-analysis-actions{display:flex;align-items:center;gap:9px}.whmcs-background-analysis-actions form{margin:0}.whmcs-background-analysis-actions .btn{gap:7px;min-height:42px;white-space:nowrap}.whmcs-background-analysis-actions .btn:disabled{opacity:.48;cursor:not-allowed}.whmcs-background-analysis.is-failed{border-color:#f0c9cc;background:linear-gradient(135deg,#fff7f7,#fff 64%)}.whmcs-background-analysis.is-failed .whmcs-background-analysis-icon{color:#b4232f;background:#feecec}.whmcs-background-analysis.is-failed .whmcs-import-kicker{color:#b4232f}@keyframes whmcs-spin{to{transform:rotate(360deg)}}@keyframes whmcs-pulse{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.whmcs-background-analysis-icon svg,.whmcs-analysis-loader i{animation:none!important}}
@media(max-width:800px){.whmcs-background-analysis{grid-template-columns:auto minmax(0,1fr)}.whmcs-background-analysis-actions{grid-column:1/-1;align-items:stretch}.whmcs-background-analysis-actions,.whmcs-background-analysis-actions form,.whmcs-background-analysis-actions .btn{width:100%}.whmcs-background-analysis-actions .btn{justify-content:center}}
@media(max-width:520px){.whmcs-background-analysis{grid-template-columns:1fr;padding:19px}.whmcs-background-analysis-actions{flex-direction:column}.whmcs-upload-progress>div{align-items:flex-start;flex-direction:column;gap:4px}}
.admin-subscriptions-page { background: var(--body-bg, #f4f7fb); }
.admin-subscriptions-overview { overflow: hidden; margin-bottom: 18px; padding: 0; border-color: var(--brand-primary-border); }
.admin-subscriptions-overview > header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 20px; border-bottom: 1px solid #e7edf5; background: linear-gradient(110deg, var(--brand-primary-subtle), var(--surface, #fff) 52%); }
.admin-subscriptions-overview > header > div { min-width: 0; }
.admin-subscriptions-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--brand-primary); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-subscriptions-eyebrow svg { width: 14px; height: 14px; }
.admin-subscriptions-overview h2 { margin: 0; color: #101828; font-size: 18px; line-height: 1.3; }
.admin-subscriptions-overview p { margin: 4px 0 0; color: #66758a; font-size: 13px; line-height: 1.45; }
.admin-subscriptions-overview form { flex: none; margin: 0; }
.admin-subscriptions-overview form .btn { min-height: 40px; padding-inline: 15px; border-radius: 10px; white-space: nowrap; }
.admin-subscriptions-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.admin-subscriptions-summary article { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 16px 20px; background: var(--surface, #fff); }
.admin-subscriptions-summary article + article { border-left: 1px solid #e7edf5; }
.admin-subscriptions-summary article > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--brand-primary-soft); color: var(--brand-primary); }
.admin-subscriptions-summary article svg { width: 19px; height: 19px; }
.admin-subscriptions-summary article div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.admin-subscriptions-summary article small { overflow: hidden; color: #66758a; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscriptions-summary article strong { color: #101828; font-size: 22px; line-height: 1; }
.admin-subscriptions-panel { overflow: hidden; padding: 0; }
.admin-subscriptions-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid #e5ebf3; }
.admin-subscriptions-panel > header h2 { margin: 0; color: #101828; font-size: 16px; }
.admin-subscriptions-panel > header p { margin: 4px 0 0; color: #718096; font-size: 12px; }
.admin-subscriptions-panel > header > strong { padding: 7px 10px; border-radius: 8px; background: var(--brand-primary-soft); color: var(--brand-primary); font-size: 11px; white-space: nowrap; }
.admin-subscriptions-filters { padding: 14px 20px 0; }
.admin-subscriptions-columns { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(170px, .9fr) minmax(210px, 1.05fr) minmax(145px, .72fr) minmax(180px, auto); gap: 20px; padding: 11px 20px; border-top: 1px solid #e5ebf3; border-bottom: 1px solid #e5ebf3; background: #f7f9fc; }
.admin-subscriptions-columns span { color: #718096; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.admin-subscriptions-columns span:last-child { text-align: right; }
.admin-subscriptions-list { background: var(--surface, #fff); }
.admin-subscription-row { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(170px, .9fr) minmax(210px, 1.05fr) minmax(145px, .72fr) minmax(180px, auto); align-items: center; gap: 20px; min-height: 82px; padding: 14px 20px; border-bottom: 1px solid #e5ebf3; background: var(--surface, #fff); transition: background .16s ease, box-shadow .16s ease; }
.admin-subscription-row:hover { position: relative; z-index: 1; background: var(--brand-primary-subtle); box-shadow: inset 3px 0 0 var(--brand-primary); }
.admin-subscription-row > div:not(.admin-subscription-identity):not(.admin-subscription-actions) { display: grid; min-width: 0; gap: 5px; }
.admin-subscription-row small { color: #7b899b; font-size: 12px; font-weight: 700; }
.admin-subscription-row strong { overflow: hidden; color: #27364a; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-row > div > span:not(.status) { overflow: hidden; color: #8190a4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-row .admin-subscription-hint { overflow: hidden; max-width: 100%; color: #985353; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-field-label { display: none; }
.admin-subscription-statuses { display: flex; min-width: 0; align-items: center; gap: 6px; }
.admin-subscription-statuses .status { min-width: 0; padding: 5px 8px; font-size: 11px; white-space: nowrap; }
.admin-subscription-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
.admin-subscription-identity > span { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: var(--brand-primary-soft); color: var(--brand-primary); }
.admin-subscription-identity > span svg { width: 20px; height: 20px; }
.admin-subscription-identity > div { display: grid; min-width: 0; gap: 4px; }
.admin-subscription-identity a { overflow: hidden; color: #101828; font-size: 14px; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-identity a:hover { color: var(--brand-primary); }
.admin-subscription-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-subscription-actions form { margin: 0; }
.admin-subscription-actions .btn { min-height: 36px; padding: 8px 11px; border-radius: 9px; font-size: 12px; white-space: nowrap; }
.admin-subscription-actions .btn svg { width: 15px; height: 15px; }
.admin-subscription-actions > a svg { transform: rotate(-90deg); }
@media (max-width: 1280px) { .admin-subscriptions-columns, .admin-subscription-row { grid-template-columns: minmax(210px, 1.15fr) minmax(160px, .85fr) minmax(190px, 1fr) minmax(170px, auto); } .admin-subscriptions-columns span:nth-child(4), .admin-subscription-billing { display: none !important; } }
@media (max-width: 920px) { .admin-subscriptions-overview > header { align-items: flex-start; } .admin-subscriptions-summary article div { display: grid; gap: 4px; } .admin-subscriptions-columns { display: none; } .admin-subscription-row { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 16px 24px; padding: 18px 20px; } .admin-subscription-billing { display: grid !important; } .admin-subscription-field-label { display: block; margin-bottom: 1px; } .admin-subscription-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 2px; } }
@media (max-width: 680px) { .admin-subscriptions-overview > header { flex-direction: column; gap: 14px; } .admin-subscriptions-overview form, .admin-subscriptions-overview form .btn { width: 100%; } .admin-subscriptions-overview form .btn { justify-content: center; } .admin-subscriptions-summary { grid-template-columns: 1fr; } .admin-subscriptions-summary article + article { border-top: 1px solid #e7edf5; border-left: 0; } .admin-subscriptions-panel > header { align-items: flex-start; flex-direction: column; } .admin-subscriptions-filters { overflow-x: auto; flex-wrap: nowrap; } .admin-subscription-row { grid-template-columns: 1fr; padding: 17px; } .admin-subscription-actions { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-subscription-actions form, .admin-subscription-actions .btn { width: 100%; } .admin-subscription-actions .btn { justify-content: center; min-height: 42px; } }
@media (max-width: 430px) { .admin-subscription-statuses { align-items: flex-start; flex-direction: column; } .admin-subscription-actions { grid-template-columns: 1fr; } }
/* Conexões reutilizáveis dos módulos de gerenciamento */
.management-connections{overflow:hidden;margin:0 0 24px;padding:0;border:1px solid color-mix(in srgb,var(--brand-primary) 24%,#dce5f1);border-radius:20px;background:var(--surface,#fff);box-shadow:0 18px 48px rgba(24,39,75,.07)}
.management-connections-header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px 26px 20px}
.management-connections-heading{min-width:0}.management-connections-heading h2{margin:7px 0 5px;color:#101828;font-size:23px;line-height:1.2;letter-spacing:-.025em}.management-connections-heading p{max-width:720px;margin:0;color:#65758b;font-size:14px;line-height:1.55}
.management-connections-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--brand-primary);font-size:10px;font-weight:800;letter-spacing:.11em}.management-connections-kicker svg{width:15px;height:15px}
.management-connections-header>.btn{min-height:42px;padding-inline:18px;border-radius:11px;box-shadow:0 8px 20px color-mix(in srgb,var(--brand-primary) 22%,transparent)}
.management-connections-overview{display:grid;grid-template-columns:max-content max-content minmax(260px,1fr);align-items:center;gap:26px;padding:13px 26px;border-top:1px solid #e7edf5;border-bottom:1px solid #e7edf5;background:#f8fafd}
.management-connections-overview>div{display:flex;align-items:center;gap:10px}.management-connections-overview>div+div{padding-left:26px;border-left:1px solid #dfe7f1}.management-connections-overview>div>span:last-child{display:flex;align-items:baseline;gap:6px}.management-connections-overview strong{color:#14213a;font-size:17px}.management-connections-overview small{color:#738199;font-size:11px;font-weight:600}
.management-overview-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:var(--brand-primary-soft);color:var(--brand-primary)}.management-overview-icon.is-ready{background:#eaf8f0;color:#16864b}.management-overview-icon svg{width:15px;height:15px}
.management-connections-overview>p{display:flex;align-items:center;justify-self:end;gap:7px;margin:0;color:#78869a;font-size:11px}.management-connections-overview>p svg{width:14px;height:14px;color:var(--brand-primary)}
.management-connection-list{display:grid;gap:10px;padding:16px}
.management-connection-item{display:grid;grid-template-columns:48px minmax(200px,1fr) max-content max-content;align-items:center;gap:15px;min-height:76px;padding:13px 15px;border:1px solid #e0e8f2;border-radius:14px;color:inherit;text-decoration:none;background:var(--surface,#fff);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
.management-connection-item:hover{transform:translateY(-1px);border-color:var(--brand-primary-border);box-shadow:0 10px 26px rgba(24,39,75,.08)}.management-connection-item.is-selected{border-color:var(--brand-primary);background:var(--brand-primary-subtle);box-shadow:inset 3px 0 0 var(--brand-primary)}
.management-connection-icon{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--brand-primary-border);border-radius:13px;color:var(--brand-primary);background:var(--brand-primary-soft)}.management-connection-icon svg{width:21px;height:21px}
.management-connection-copy{display:flex;min-width:0;flex-direction:column;gap:4px}.management-connection-title{display:flex;align-items:center;gap:9px;min-width:0}.management-connection-title strong{overflow:hidden;color:#162137;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.management-connection-title em{padding:3px 6px;border-radius:6px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:8px;font-style:normal;font-weight:900;letter-spacing:.08em}.management-connection-copy small{overflow:hidden;color:#748299;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.management-connection-status{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}.management-connection-status svg{width:13px;height:13px}.management-connection-status.is-ready{background:#e9f8ef;color:#16864b}.management-connection-status.is-pending{background:#fff5e7;color:#a45d0b}
.management-connection-action{display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:11px;font-weight:800;white-space:nowrap}.management-connection-action svg{width:15px;height:15px;transform:rotate(-90deg);transition:transform .18s ease}.management-connection-item:hover .management-connection-action svg{transform:rotate(-90deg) translateY(2px)}
@media(max-width:900px){.management-connections-header{align-items:stretch;flex-direction:column;gap:16px;padding:20px}.management-connections-header>.btn{width:100%;justify-content:center}.management-connections-overview{grid-template-columns:1fr 1fr;padding:12px 20px}.management-connections-overview>p{grid-column:1/-1;justify-self:start}.management-connection-item{grid-template-columns:44px minmax(0,1fr) max-content}.management-connection-icon{width:44px;height:44px}.management-connection-action{grid-column:2/4;justify-content:flex-end;padding-top:9px;border-top:1px solid #e5ebf3}}
@media(max-width:560px){.management-connections-heading h2{font-size:20px}.management-connections-overview{grid-template-columns:1fr;gap:10px}.management-connections-overview>div+div{padding:0;border:0}.management-connections-overview>p{grid-column:auto;line-height:1.4}.management-connection-item{grid-template-columns:42px minmax(0,1fr);padding:13px}.management-connection-status{grid-column:2;justify-self:start}.management-connection-action{grid-column:1/3}.management-connection-title strong{white-space:normal}}
.domains-holder-form{display:grid;gap:20px}.domains-holder-heading{display:flex;gap:12px;align-items:center}.domains-holder-heading>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--brand-primary);background:var(--brand-primary-soft)}.domains-holder-heading svg{width:20px;height:20px}.domains-holder-heading h2{margin:0;font-size:18px}.domains-holder-heading p{margin:3px 0 0;color:var(--text-muted);font-size:13px}.domains-holder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.domains-holder-grid label{display:grid;gap:7px}.domains-holder-grid label.is-full{grid-column:1/-1}.domains-holder-grid label>span{font-weight:700;font-size:13px}.domains-holder-grid label>small:not(.field-error){color:var(--text-muted);font-size:12px;line-height:1.45}.domains-holder-grid input,.domains-holder-grid select{width:100%;min-height:44px;border:1px solid var(--brand-primary-border);border-radius:10px;background:var(--surface,#fff);color:inherit;padding:0 13px;outline:none}.domains-holder-grid input:focus,.domains-holder-grid select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-subtle)}.domains-holder-note{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-muted);font-size:12px}.domains-holder-note svg{width:16px;height:16px;color:var(--brand-primary)}@media(max-width:720px){.domains-holder-grid{grid-template-columns:1fr}}
.domains-account-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--brand-primary-border);border-radius:12px;background:var(--brand-primary-subtle)}.domains-account-identity>span{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:var(--brand-primary-soft);color:var(--brand-primary)}.domains-account-identity>span svg{width:18px;height:18px}.domains-account-identity strong{display:block;font-size:13px}.domains-account-identity p{margin:3px 0 0;color:var(--text-muted);font-size:12px;line-height:1.45}.domains-account-identity a{color:var(--brand-primary);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}@media(max-width:640px){.domains-account-identity{grid-template-columns:auto minmax(0,1fr)}.domains-account-identity a{grid-column:2;justify-self:start}}

/* Central de downloads */
.admin-downloads-page,.client-downloads-page{gap:22px}.download-overview{display:flex;align-items:center;justify-content:space-between;gap:28px;overflow:hidden;padding:24px 26px;border-color:var(--brand-primary-border);background:linear-gradient(120deg,var(--brand-primary-subtle),#fff 62%)}
.download-overview-copy{display:flex;align-items:center;gap:16px;min-width:0}.download-overview-icon,.download-section-heading>span{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;border:1px solid var(--brand-primary-border);border-radius:14px;background:var(--brand-primary-soft);color:var(--brand-primary)}.download-overview-icon svg,.download-section-heading>span svg{width:22px;height:22px}.download-overview-copy>div{min-width:0}.download-overview-copy small{color:var(--brand-primary);font-size:11px;font-weight:900;letter-spacing:.1em}.download-overview-copy h2{margin:5px 0 4px;color:#101828;font-size:22px;letter-spacing:-.025em}.download-overview-copy p{max-width:670px;margin:0;color:#66748a;font-size:13px;line-height:1.55}
.download-summary{display:grid;grid-template-columns:repeat(4,minmax(74px,1fr));min-width:390px;border:1px solid #e1e8f2;border-radius:14px;background:#fff}.download-summary>span{display:grid;gap:2px;padding:13px 16px;text-align:center}.download-summary>span+span{border-left:1px solid #e7edf5}.download-summary strong{color:#101828;font-size:19px}.download-summary small{color:#718096;font-size:10px;font-weight:700;white-space:nowrap}
.download-admin-grid{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(500px,1.28fr);align-items:start;gap:20px}.download-upload-panel,.download-library-panel{overflow:hidden;padding:0}.download-upload-panel{position:sticky;top:20px}.download-section-heading{display:flex;align-items:center;gap:13px;padding:20px 22px;border-bottom:1px solid #e3eaf3}.download-section-heading>span{flex-basis:42px;width:42px;height:42px;border-radius:12px}.download-section-heading>span svg{width:19px;height:19px}.download-section-heading>div{min-width:0}.download-section-heading h2{margin:0;color:#101828;font-size:17px}.download-section-heading p{margin:3px 0 0;color:#718096;font-size:12px;line-height:1.45}.download-library-heading>b{margin-left:auto;padding:6px 9px;border-radius:999px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:10px;white-space:nowrap}
.download-upload-panel form{display:grid;gap:17px;padding:21px 22px}.download-field{display:grid;gap:7px;min-width:0}.download-field>span,.download-access-options legend{color:#253047;font-size:13px;font-weight:800}.download-field>span>small{color:#8793a7;font-size:10px;font-weight:600}.download-field input,.download-field textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid #ced9e7;border-radius:10px;background:#fff;color:#172033;font-family: var(--asv-font-family);font-size:13px;outline:none}.download-field input{min-height:44px;padding:0 13px}.download-field textarea{padding:12px 13px;resize:vertical;line-height:1.5}.download-field input:focus,.download-field textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-subtle)}
.download-file-field{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:70px;padding:11px 12px;border:1px dashed var(--brand-primary-border);border-radius:12px;background:var(--brand-primary-subtle);cursor:pointer}.download-file-field>input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.download-file-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:11px;background:#fff;color:var(--brand-primary);box-shadow:0 3px 12px rgba(15,23,42,.06)}.download-file-icon svg{width:18px;height:18px}.download-file-copy{display:grid;min-width:0;gap:3px}.download-file-copy strong,.download-file-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.download-file-copy strong{color:#182238;font-size:12px}.download-file-copy small{color:#718096;font-size:10px}.download-file-field .btn{pointer-events:none}.download-file-error{margin-top:-11px}
.download-access-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;border:0}.download-access-options legend{grid-column:1/-1;margin:0 0 7px}.download-access-card{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;min-height:76px;padding:11px;border:1px solid #d7e1ed;border-radius:11px;background:#fff;cursor:pointer}.download-access-card>input{position:absolute;opacity:0;pointer-events:none}.download-access-card>span:nth-of-type(1){display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:#f4f7fb;color:#64748b}.download-access-card>span:nth-of-type(1) svg{width:16px;height:16px}.download-access-card>span:last-child{display:grid;gap:3px}.download-access-card strong{font-size:11px}.download-access-card small{color:#718096;font-size:9px;line-height:1.35}.download-access-card:has(input:checked){border-color:var(--brand-primary);background:var(--brand-primary-subtle);box-shadow:inset 0 0 0 1px var(--brand-primary)}.download-access-card:has(input:checked)>span:nth-of-type(1){background:var(--brand-primary-soft);color:var(--brand-primary)}
.download-product-picker{display:grid;gap:11px;padding:14px;border:1px solid var(--brand-primary-border);border-radius:12px;background:var(--brand-primary-subtle)}.download-product-picker[hidden]{display:none}.download-product-picker>div:first-child{display:grid;gap:3px}.download-product-picker>div:first-child strong{font-size:12px}.download-product-picker>div:first-child small,.download-products-empty{margin:0;color:#718096;font-size:10px;line-height:1.45}.download-product-options{display:grid;max-height:210px;overflow:auto;border:1px solid #dfe7f1;border-radius:10px;background:#fff}.download-product-options label{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 11px;cursor:pointer}.download-product-options label+label{border-top:1px solid #e9eef5}.download-product-options input{width:17px;height:17px;accent-color:var(--brand-primary)}.download-product-options label>span{display:grid;gap:2px}.download-product-options strong{font-size:11px}.download-product-options small{color:#7b879a;font-size:9px}
.download-publish-option{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #e1e8f1;border-radius:11px;background:#f8fafc;cursor:pointer}.download-publish-option>input[type=checkbox]{width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand-primary)}.download-publish-option>span{display:grid;gap:3px}.download-publish-option strong{font-size:12px}.download-publish-option small{color:#718096;font-size:10px;line-height:1.4}.download-submit{width:100%;gap:8px}.download-submit svg{width:17px;height:17px}
.download-admin-list{display:grid}.download-admin-item{display:grid;gap:14px;padding:19px 21px;border-bottom:1px solid #e4eaf2}.download-admin-item.is-paused{background:#fafbfc}.download-item-main{display:flex;align-items:flex-start;gap:13px}.download-item-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--brand-primary-soft);color:var(--brand-primary)}.download-item-icon svg{width:19px;height:19px}.download-item-copy{min-width:0;flex:1}.download-item-title{display:flex;align-items:center;gap:9px}.download-item-title h3{min-width:0;margin:0;color:#111827;font-size:15px;overflow-wrap:anywhere}.download-state{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.download-state.is-active{background:#e9f8ef;color:#16864b}.download-state.is-paused{background:#f0f2f5;color:#687386}.download-item-copy>p{display:-webkit-box;overflow:hidden;margin:6px 0 0;color:#69778c;font-size:12px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}.download-file-meta{display:flex;flex-wrap:wrap;gap:6px 13px;margin-top:8px;color:#8290a4;font-size:10px}.download-file-meta>span{display:inline-flex;align-items:center;gap:5px;min-width:0}.download-file-meta>span:first-child{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.download-file-meta svg{width:12px;height:12px}
.download-access-line{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:#f7f9fc}.download-access-label{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:#445168;font-size:10px}.download-access-label svg{width:14px;height:14px;color:var(--brand-primary)}.download-product-tags{display:flex;min-width:0;overflow:hidden;gap:5px}.download-product-tags span{overflow:hidden;max-width:150px;padding:4px 7px;border:1px solid var(--brand-primary-border);border-radius:999px;background:#fff;color:var(--brand-primary);font-size:9px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.download-item-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.download-item-footer>small{color:#8a96a8;font-size:9px;line-height:1.4}.download-item-actions{display:flex;align-items:center;gap:7px}.download-item-actions form{margin:0}.download-item-actions .btn{min-height:35px;padding:0 10px;font-size:10px;gap:5px}.download-item-actions .btn svg{width:14px;height:14px}.download-delete-button{display:grid;width:35px;height:35px;place-items:center;border:1px solid #f0d3d3;border-radius:8px;background:#fff;color:#b42318;cursor:pointer}.download-delete-button:hover{background:#fff2f1}.download-delete-button svg{width:15px;height:15px}.download-delete-form{padding:0 22px 22px}.download-empty-state,.client-download-empty{display:grid;justify-items:center;gap:9px;padding:54px 24px;text-align:center}.download-empty-state>span,.client-download-empty>span{display:grid;width:54px;height:54px;place-items:center;border-radius:16px;background:var(--brand-primary-soft);color:var(--brand-primary)}.download-empty-state h3,.client-download-empty h3{margin:4px 0 0;font-size:16px}.download-empty-state p,.client-download-empty p{max-width:450px;margin:0;color:#718096;font-size:12px;line-height:1.55}.download-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px}.download-pagination a,.download-pagination>span{display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:10px;font-weight:800;text-decoration:none}.download-pagination>span{color:#a2abba}.download-pagination svg{width:14px;height:14px}.download-pagination strong{color:#718096;font-size:10px}
.client-download-intro{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:17px;padding:24px 26px;border:1px solid var(--brand-primary-border);border-radius:16px;background:linear-gradient(120deg,var(--brand-primary-subtle),#fff);box-shadow:0 14px 34px rgba(15,23,42,.05)}.client-download-intro-icon{display:grid;width:56px;height:56px;place-items:center;border-radius:16px;background:var(--brand-primary);color:var(--brand-on-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--brand-primary) 22%,transparent)}.client-download-intro-icon svg{width:25px;height:25px}.client-download-intro>div:nth-child(2) small{color:var(--brand-primary);font-size:10px;font-weight:900;letter-spacing:.1em}.client-download-intro h2{margin:5px 0 3px;color:#101828;font-size:22px}.client-download-intro p{margin:0;color:#6b778c;font-size:13px}.client-download-intro>span{display:grid;min-width:126px;gap:2px;padding:13px 17px;border:1px solid #e0e8f2;border-radius:13px;background:#fff;text-align:center}.client-download-intro>span strong{color:var(--brand-primary);font-size:23px}.client-download-intro>span small{color:#718096;font-size:10px;font-weight:700}
.client-download-library{display:grid;gap:16px}.client-download-library>header h2{margin:0;color:#101828;font-size:18px}.client-download-library>header p{margin:4px 0 0;color:#718096;font-size:12px}.client-download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.client-download-card{display:flex;min-width:0;min-height:305px;flex-direction:column;padding:20px;border:1px solid #dde6f0;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.client-download-card:hover{transform:translateY(-2px);border-color:var(--brand-primary-border);box-shadow:0 18px 36px rgba(15,23,42,.08)}.client-download-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.client-download-card-top>span:first-child{display:grid;width:45px;height:45px;place-items:center;border-radius:13px;background:var(--brand-primary-soft);color:var(--brand-primary)}.client-download-card-top>span:first-child svg{width:20px;height:20px}.client-download-access{display:inline-flex;align-items:center;gap:5px;color:#64748b;font-size:9px;font-weight:800}.client-download-access svg{width:13px;height:13px;color:var(--brand-primary)}.client-download-card-copy{display:grid;gap:7px;margin:17px 0 15px}.client-download-card-copy h3{margin:0;color:#111827;font-size:16px;line-height:1.3;overflow-wrap:anywhere}.client-download-card-copy p{display:-webkit-box;overflow:hidden;margin:0;color:#69778c;font-size:12px;line-height:1.55;-webkit-box-orient:vertical;-webkit-line-clamp:3}.client-download-details{margin-top:auto;padding:11px 0;border-top:1px solid #e8edf4}.client-download-details>span{display:flex;align-items:center;gap:8px;min-width:0}.client-download-details svg{flex:0 0 auto;width:15px;height:15px;color:var(--brand-primary)}.client-download-details>span>span{display:grid;min-width:0;gap:3px}.client-download-details strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.client-download-details small{color:#8793a5;font-size:9px}.client-download-action{width:100%;min-height:42px;gap:7px;font-size:12px;text-decoration:none}.client-download-action svg{width:16px;height:16px}.client-download-empty{min-height:300px;border:1px dashed var(--brand-primary-border);border-radius:16px;background:var(--brand-primary-subtle)}.client-download-help{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;padding:16px 19px;border:1px solid #dce5ef;border-radius:14px;background:#fff}.client-download-help>span{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--brand-primary-soft);color:var(--brand-primary)}.client-download-help>span svg{width:19px;height:19px}.client-download-help strong{font-size:12px}.client-download-help p{margin:3px 0 0;color:#718096;font-size:10px;line-height:1.45}.client-download-help>a{display:inline-flex;align-items:center;gap:5px;color:var(--brand-primary);font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}.client-download-help>a svg{width:14px;height:14px}
@media(max-width:1180px){.download-overview{align-items:stretch;flex-direction:column}.download-summary{width:100%;min-width:0}.download-admin-grid{grid-template-columns:minmax(290px,.8fr) minmax(420px,1.2fr)}.client-download-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.download-admin-grid{grid-template-columns:1fr}.download-upload-panel{position:static}.client-download-intro{grid-template-columns:56px minmax(0,1fr)}.client-download-intro>span{grid-column:1/-1;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:8px}.client-download-intro>span strong{font-size:18px}}
@media(max-width:640px){.admin-downloads-page,.client-downloads-page{gap:16px}.download-overview{padding:19px}.download-overview-copy{align-items:flex-start}.download-overview-icon{flex-basis:42px;width:42px;height:42px}.download-overview-copy h2,.client-download-intro h2{font-size:19px}.download-summary{grid-template-columns:repeat(2,1fr)}.download-summary>span:nth-child(3){border-top:1px solid #e7edf5;border-left:0}.download-summary>span:nth-child(4){border-top:1px solid #e7edf5}.download-upload-panel form{padding:18px}.download-section-heading{padding:17px}.download-access-options{grid-template-columns:1fr}.download-file-field{grid-template-columns:38px minmax(0,1fr)}.download-file-field>.btn{grid-column:1/-1;width:100%}.download-item-footer{align-items:stretch;flex-direction:column}.download-item-actions{display:grid;grid-template-columns:1fr 1fr auto}.download-item-actions form,.download-item-actions .btn{width:100%}.download-access-line{align-items:flex-start;flex-direction:column}.download-product-tags{flex-wrap:wrap;overflow:visible}.download-product-tags span{max-width:100%}.client-download-intro{grid-template-columns:44px minmax(0,1fr);padding:19px}.client-download-intro-icon{width:44px;height:44px;border-radius:13px}.client-download-grid{grid-template-columns:1fr}.client-download-card{min-height:285px}.client-download-help{grid-template-columns:40px minmax(0,1fr)}.client-download-help>a{grid-column:2;justify-self:start}.download-delete-dialog{max-width:calc(100vw - 28px)}}

/* Legibilidade mínima da central de downloads */
.download-overview-copy small,.client-download-intro>div:nth-child(2) small{font-size:12px}.download-overview-copy p,.client-download-intro p{font-size:14px}.download-summary small,.download-section-heading p,.download-library-heading>b{font-size:12px}.download-field>span,.download-access-options legend{font-size:14px}.download-field input,.download-field textarea{font-size:14px}.download-field>span>small,.download-file-copy small,.download-access-card small,.download-product-picker>div:first-child small,.download-products-empty,.download-product-options small,.download-publish-option small{font-size:12px}.download-file-copy strong,.download-access-card strong,.download-product-picker>div:first-child strong,.download-product-options strong,.download-publish-option strong{font-size:14px}.download-access-card{min-height:94px}.download-product-options label{min-height:58px}.download-item-copy>p,.client-download-card-copy p{font-size:14px}.download-file-meta,.download-access-label,.download-product-tags span,.download-item-footer>small,.download-pagination a,.download-pagination>span,.download-pagination strong,.client-download-access,.client-download-intro>span small,.client-download-library>header p,.client-download-details strong,.client-download-details small,.client-download-help p,.client-download-help>a,.download-state{font-size:12px}.download-item-actions .btn{font-size:13px}.client-download-card-copy h3{font-size:17px}.client-download-help strong,.client-download-action{font-size:14px}
.download-access-card:has(input:focus-visible){outline:3px solid var(--brand-primary-border);outline-offset:2px}
.download-pagination-prev-icon{transform:rotate(180deg)}
@media(max-width:1180px){.download-admin-grid{grid-template-columns:1fr}.download-upload-panel{position:static}}

/* Modo de manutenção */
.maintenance-hub-state{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:#eef2f7;color:#667085}.maintenance-hub-state.is-active{background:#fff1f0;color:#b42318}
.maintenance-settings-page{gap:22px}.maintenance-admin-overview{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:17px;padding:23px 25px;border-color:var(--brand-primary-border);background:linear-gradient(120deg,var(--brand-primary-subtle),#fff 68%)}.maintenance-admin-overview>span{display:grid;width:54px;height:54px;place-items:center;border:1px solid var(--brand-primary-border);border-radius:15px;background:var(--brand-primary-soft);color:var(--brand-primary)}.maintenance-admin-overview>span svg{width:24px;height:24px}.maintenance-admin-overview small{color:var(--brand-primary);font-size:12px;font-weight:900;letter-spacing:.09em}.maintenance-admin-overview h2{margin:5px 0 3px;color:#101828;font-size:22px;letter-spacing:-.025em}.maintenance-admin-overview p{margin:0;color:#66748a;font-size:14px;line-height:1.5}.maintenance-state{padding:7px 11px;border-radius:999px;background:#edf2f7;color:#667085;font-size:13px}.maintenance-state.is-active{background:#fff0ef;color:#b42318}
.maintenance-settings-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);align-items:start;gap:20px}.maintenance-settings-card{overflow:hidden;padding:0}.maintenance-settings-card>header{display:flex;align-items:center;gap:13px;padding:20px 22px;border-bottom:1px solid #e4eaf2}.maintenance-settings-card>header>span{display:grid;flex:0 0 43px;width:43px;height:43px;place-items:center;border-radius:12px;background:var(--brand-primary-soft);color:var(--brand-primary)}.maintenance-settings-card>header>span svg{width:20px;height:20px}.maintenance-settings-card>header h2{margin:0;color:#101828;font-size:18px}.maintenance-settings-card>header p{margin:4px 0 0;color:#718096;font-size:14px;line-height:1.4}.maintenance-fields{display:grid;gap:19px;padding:22px}.maintenance-toggle{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:13px;padding:16px;border:1px solid #dce5ef;border-radius:13px;background:#f8fafc;cursor:pointer}.maintenance-toggle>input{position:absolute;width:1px;height:1px;opacity:0}.maintenance-toggle>span{position:relative;width:46px;height:26px;border-radius:999px;background:#cbd5e1;transition:.2s}.maintenance-toggle>span:after{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.2);content:"";transition:.2s}.maintenance-toggle>input:checked+span{background:var(--brand-primary)}.maintenance-toggle>input:checked+span:after{transform:translateX(20px)}.maintenance-toggle>input:focus-visible+span{outline:3px solid var(--brand-primary-border);outline-offset:3px}.maintenance-toggle>div{display:grid;gap:3px}.maintenance-toggle strong{color:#172033;font-size:15px}.maintenance-toggle small{color:#718096;font-size:13px;line-height:1.4}.maintenance-field{display:grid;gap:7px}.maintenance-field>span{color:#27364a;font-size:14px;font-weight:800}.maintenance-field input,.maintenance-field textarea{box-sizing:border-box;width:100%;border:1px solid #ced9e7;border-radius:11px;background:#fff;color:#172033;font-family: var(--asv-font-family);font-size:15px;outline:none}.maintenance-field input{min-height:46px;padding:0 13px}.maintenance-field textarea{padding:13px;resize:vertical;line-height:1.55}.maintenance-field input:focus,.maintenance-field textarea:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-subtle)}.maintenance-field>small{color:#718096;font-size:12px;line-height:1.45}.maintenance-field .form-error{color:#b42318}.maintenance-code-status{display:flex;align-items:center;gap:11px;padding:14px;border-radius:12px;background:var(--brand-primary-subtle)}.maintenance-code-status>span{display:grid;flex:0 0 37px;width:37px;height:37px;place-items:center;border-radius:10px;background:#fff;color:var(--brand-primary)}.maintenance-code-status svg{width:17px;height:17px}.maintenance-code-status>div{display:grid;gap:3px}.maintenance-code-status strong{font-size:14px}.maintenance-code-status small{color:#718096;font-size:12px;line-height:1.4}.maintenance-access-note{display:flex;align-items:flex-start;gap:9px;padding:13px;border:1px solid var(--brand-primary-border);border-radius:11px;color:#5f6d82;background:var(--brand-primary-subtle)}.maintenance-access-note>svg{flex:0 0 auto;width:18px;height:18px;color:var(--brand-primary)}.maintenance-access-note p{margin:0;font-size:13px;line-height:1.5}.maintenance-save{width:100%;min-height:45px;gap:8px}.maintenance-save svg{width:17px;height:17px}
.maintenance-body{min-height:100vh;background:#07152d}.maintenance-page{position:relative;display:grid;box-sizing:border-box;min-height:100vh;overflow:hidden;place-items:center;padding:34px;background:radial-gradient(circle at 90% 12%,color-mix(in srgb,var(--brand-primary) 24%,transparent),transparent 30%),linear-gradient(135deg,#07142a,#0b1b38 62%,#07142a)}.maintenance-page:before,.maintenance-page:after{position:absolute;border:1px solid color-mix(in srgb,var(--brand-primary) 26%,transparent);border-radius:50%;content:"";pointer-events:none}.maintenance-page:before{right:-180px;top:-270px;width:620px;height:620px}.maintenance-page:after{right:-92px;top:-182px;width:440px;height:440px}.maintenance-shell{position:relative;z-index:1;width:min(1120px,100%);overflow:hidden;border:1px solid color-mix(in srgb,var(--brand-primary) 32%,#243858);border-radius:25px;background:rgba(8,24,50,.92);box-shadow:0 30px 90px rgba(0,0,0,.34);backdrop-filter:blur(16px)}.maintenance-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid rgba(148,163,184,.16)}.maintenance-brand img{width:auto;max-width:150px;height:46px;object-fit:contain}.maintenance-brand>span{color:color-mix(in srgb,var(--brand-primary) 65%,#fff);font-size:12px;font-weight:900;letter-spacing:.12em}.maintenance-content{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:54px;padding:60px}.maintenance-copy{align-self:center}.maintenance-copy-icon{display:grid;width:54px;height:54px;place-items:center;margin-bottom:23px;border:1px solid color-mix(in srgb,var(--brand-primary) 46%,transparent);border-radius:16px;background:color-mix(in srgb,var(--brand-primary) 18%,transparent);color:color-mix(in srgb,var(--brand-primary) 58%,#fff)}.maintenance-copy-icon svg{width:25px;height:25px}.maintenance-copy>small{color:color-mix(in srgb,var(--brand-primary) 64%,#fff);font-size:12px;font-weight:900;letter-spacing:.12em}.maintenance-copy h1{max-width:690px;margin:12px 0 17px;color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.03;letter-spacing:-.045em}.maintenance-copy>p{max-width:680px;margin:0;color:#b9c6da;font-size:17px;line-height:1.7;white-space:pre-line}.maintenance-progress{height:4px;margin:30px 0;border-radius:999px;background:rgba(148,163,184,.16)}.maintenance-progress span{display:block;width:62%;height:100%;border-radius:inherit;background:var(--brand-primary);box-shadow:0 0 18px color-mix(in srgb,var(--brand-primary) 60%,transparent)}.maintenance-assurance{display:flex;align-items:flex-start;gap:11px;color:#99aac2;font-size:14px;line-height:1.55}.maintenance-assurance svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:color-mix(in srgb,var(--brand-primary) 62%,#fff)}.maintenance-assurance strong{color:#e4eaf3}.maintenance-access{align-self:center;padding:28px;border:1px solid rgba(148,163,184,.18);border-radius:20px;background:rgba(255,255,255,.07);box-shadow:0 18px 50px rgba(0,0,0,.16)}.maintenance-access-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--brand-primary) 20%,transparent);color:color-mix(in srgb,var(--brand-primary) 55%,#fff)}.maintenance-access-icon svg{width:21px;height:21px}.maintenance-access h2{margin:17px 0 7px;color:#fff;font-size:22px}.maintenance-access>p{margin:0 0 20px;color:#aab9cd;font-size:14px;line-height:1.55}.maintenance-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.maintenance-keypad form:last-child{grid-column:2}.maintenance-keypad button{width:100%;min-height:50px;border:1px solid rgba(148,163,184,.2);border-radius:11px;background:rgba(255,255,255,.06);color:#eef4ff;font-family: var(--asv-font-family);font-size:16px;font-weight:800;cursor:pointer;transition:.16s}.maintenance-keypad button:hover,.maintenance-keypad button:focus-visible{border-color:var(--brand-primary);background:color-mix(in srgb,var(--brand-primary) 20%,transparent);outline:none;transform:translateY(-1px)}.maintenance-code-form{display:grid;gap:11px}.maintenance-code-form label{color:#dce5f2;font-size:13px;font-weight:800}.maintenance-code-form input{box-sizing:border-box;width:100%;min-height:51px;padding:0 15px;border:1px solid rgba(148,163,184,.28);border-radius:11px;background:rgba(4,14,31,.62);color:#fff;font-family: var(--asv-font-family);font-size:21px;font-weight:800;letter-spacing:.32em;outline:none}.maintenance-code-form input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 18%,transparent)}.maintenance-code-form .btn{justify-content:center;min-height:47px;margin-top:3px;gap:7px}.maintenance-code-form .btn svg{width:17px;height:17px}.maintenance-error{color:#ffb4af;font-size:13px;line-height:1.4}.maintenance-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border-top:1px solid rgba(148,163,184,.16);color:#8192aa;font-size:12px}
@media(max-width:980px){.maintenance-settings-grid{grid-template-columns:1fr}.maintenance-content{grid-template-columns:1fr;gap:34px;padding:44px}.maintenance-access{max-width:520px}.maintenance-copy h1{font-size:clamp(34px,8vw,50px)}}
@media(max-width:640px){.maintenance-settings-page{gap:16px}.maintenance-admin-overview{grid-template-columns:46px minmax(0,1fr);padding:18px}.maintenance-admin-overview>span{width:46px;height:46px}.maintenance-admin-overview>.maintenance-state{grid-column:1/-1;justify-self:start}.maintenance-settings-card>header,.maintenance-fields{padding:17px}.maintenance-page{padding:16px}.maintenance-shell{border-radius:19px}.maintenance-brand{padding:17px 19px}.maintenance-brand img{max-width:115px;height:38px}.maintenance-brand>span{font-size:10px}.maintenance-content{gap:28px;padding:29px 20px}.maintenance-copy h1{font-size:34px}.maintenance-copy>p{font-size:16px}.maintenance-access{padding:21px}.maintenance-footer{align-items:flex-start;flex-direction:column;padding:16px 20px}}
.maintenance-content:not(.has-access){grid-template-columns:minmax(0,1fr);gap:0}.maintenance-content:not(.has-access) .maintenance-copy{max-width:760px}.maintenance-trigger-form{position:fixed;left:-10000px;width:1px;height:1px;overflow:hidden}.maintenance-trigger-focus{padding:0;border:0;background:none;color:inherit;font-family: var(--asv-font-family);cursor:default}.maintenance-trigger-focus:focus-visible{border-radius:4px;outline:2px solid color-mix(in srgb,var(--brand-primary) 60%,#fff);outline-offset:4px}

/* Configuração inicial do administrador */
.initial-setup-body{min-width:0;background:#eef3f9}.initial-setup-page{box-sizing:border-box;min-height:100vh;padding:24px;background:radial-gradient(circle at 94% 5%,var(--brand-primary-soft),transparent 25%),#eef3f9;color:#101828}.initial-setup-header{display:flex;align-items:center;justify-content:space-between;width:min(1420px,100%);min-height:58px;margin:0 auto 20px}.initial-setup-header>img{width:auto;max-width:142px;height:43px;object-fit:contain}.initial-setup-header>div{display:flex;align-items:center;gap:15px;color:#344054;font-size:14px;font-weight:800}.initial-setup-header form{margin:0}.initial-setup-header button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #d8e2ef;border-radius:9px;background:#fff;color:#53637a;font-family: var(--asv-font-family);font-size:13px;cursor:pointer}.initial-setup-header button:hover{border-color:var(--brand-primary-border);color:var(--brand-primary)}.initial-setup-header button svg{width:16px;height:16px}.initial-setup-shell{display:grid;grid-template-columns:minmax(280px,355px) minmax(0,1fr);width:min(1420px,100%);min-height:720px;margin:auto;overflow:hidden;border:1px solid var(--brand-primary-border);border-radius:23px;background:#fff;box-shadow:0 24px 70px rgba(31,48,78,.12)}.initial-setup-guide{display:flex;flex-direction:column;padding:42px 32px;background:linear-gradient(155deg,#08162e,#102546 68%,color-mix(in srgb,var(--brand-primary) 35%,#0b1c38));color:#fff}.initial-setup-intro>span{display:grid;width:46px;height:46px;place-items:center;margin-bottom:20px;border:1px solid color-mix(in srgb,var(--brand-primary) 48%,transparent);border-radius:13px;background:color-mix(in srgb,var(--brand-primary) 22%,transparent);color:color-mix(in srgb,var(--brand-primary) 52%,#fff)}.initial-setup-intro>span svg{width:22px;height:22px}.initial-setup-intro small{color:color-mix(in srgb,var(--brand-primary) 55%,#fff);font-size:12px;font-weight:900;letter-spacing:.11em}.initial-setup-intro h1{margin:10px 0 13px;font-size:29px;line-height:1.13;letter-spacing:-.035em}.initial-setup-intro p{margin:0;color:#aebcd0;font-size:15px;line-height:1.6}.initial-setup-steps{display:grid;gap:7px;margin-top:34px}.initial-setup-steps button{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:11px;border:1px solid transparent;border-radius:12px;background:transparent;color:#aab8cc;text-align:left;cursor:pointer}.initial-setup-steps button i{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(148,163,184,.24);border-radius:10px;background:rgba(255,255,255,.05);font-style:normal;font-size:13px;font-weight:900}.initial-setup-steps button span{display:grid;gap:2px}.initial-setup-steps button strong{color:#dce5f2;font-size:14px}.initial-setup-steps button small{font-size:12px}.initial-setup-steps button.is-active{border-color:color-mix(in srgb,var(--brand-primary) 42%,transparent);background:color-mix(in srgb,var(--brand-primary) 18%,transparent)}.initial-setup-steps button.is-active i{border-color:var(--brand-primary);background:var(--brand-primary);color:var(--brand-on-primary)}.initial-setup-steps button.is-complete i{border-color:color-mix(in srgb,var(--brand-primary) 55%,transparent);color:color-mix(in srgb,var(--brand-primary) 55%,#fff)}.initial-setup-security{display:flex;align-items:flex-start;gap:10px;margin-top:auto;padding-top:30px;color:#92a4bd}.initial-setup-security>svg{flex:0 0 auto;width:18px;height:18px;color:color-mix(in srgb,var(--brand-primary) 58%,#fff)}.initial-setup-security span{display:grid;gap:3px}.initial-setup-security strong{color:#dbe4f1;font-size:13px}.initial-setup-security small{font-size:12px;line-height:1.45}.initial-setup-workspace{display:flex;min-width:0;flex-direction:column;padding:34px 42px 28px}.initial-setup-progress{height:4px;margin-bottom:26px;overflow:hidden;border-radius:999px;background:#e8eef6}.initial-setup-progress span{display:block;width:25%;height:100%;border-radius:inherit;background:var(--brand-primary);transition:width .25s ease}.initial-setup-mobile-status{display:none}.initial-setup-workspace form{display:flex;min-height:0;flex:1;flex-direction:column}.initial-setup-panel{animation:initial-setup-enter .22s ease}.initial-setup-panel[hidden]{display:none!important}@keyframes initial-setup-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}.initial-setup-panel>header{display:flex;align-items:flex-start;gap:15px;padding-bottom:25px;border-bottom:1px solid #e4eaf2}.initial-setup-panel>header>span{display:grid;flex:0 0 45px;width:45px;height:45px;place-items:center;border-radius:13px;background:var(--brand-primary-soft);color:var(--brand-primary)}.initial-setup-panel>header>span svg{width:21px;height:21px}.initial-setup-panel>header small{color:var(--brand-primary);font-size:12px;font-weight:900;letter-spacing:.09em}.initial-setup-panel>header h2{margin:4px 0 5px;font-size:25px;line-height:1.15;letter-spacing:-.025em}.initial-setup-panel>header p{margin:0;color:#6c7b91;font-size:15px;line-height:1.5}.initial-setup-fields{display:grid;gap:20px;margin-top:28px}.initial-setup-fields.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.initial-setup-fields label,.initial-setup-color-control label{display:grid;gap:8px}.initial-setup-fields label.is-wide{grid-column:1/-1}.initial-setup-fields label>span:first-child,.initial-setup-color-control label>span:first-child{color:#27364a;font-size:14px;font-weight:800}.initial-setup-fields label em{margin-left:5px;color:#8b98aa;font-style:normal;font-size:12px;font-weight:600}.initial-setup-fields input,.initial-setup-color-control input[type=text]{box-sizing:border-box;width:100%;min-height:48px;padding:0 13px;border:1px solid #ced9e7;border-radius:10px;background:#fff;color:#172033;font-family: var(--asv-font-family);font-size:15px;outline:none}.initial-setup-fields input:focus,.initial-setup-color-control input[type=text]:focus{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--brand-primary-subtle)}.initial-setup-fields small{min-height:0;color:#78879c;font-size:12px;line-height:1.4}.initial-setup-fields .field-error,.initial-setup-upload-card .field-error,.initial-setup-color-control .field-error{color:#b42318}.initial-setup-fields .field-error:empty,.initial-setup-upload-card .field-error:empty,.initial-setup-color-control .field-error:empty{display:none}.initial-setup-input-icon{position:relative;display:block}.initial-setup-input-icon>svg{position:absolute;top:15px;left:14px;width:18px;height:18px;color:#75849a}.initial-setup-input-icon input{padding-left:42px}.initial-setup-color{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(330px,1.28fr);gap:28px;margin-top:30px}.initial-setup-color-control{padding:22px;border:1px solid #dfe7f1;border-radius:14px;background:#f8fafc}.initial-setup-color-input{display:grid;grid-template-columns:52px 1fr;gap:10px}.initial-setup-color-input input[type=color]{width:52px;height:48px;padding:4px;border:1px solid #ced9e7;border-radius:10px;background:#fff;cursor:pointer}.initial-setup-swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.initial-setup-swatches button{width:31px;height:31px;border:3px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #ced9e7;cursor:pointer}.initial-setup-swatches button:focus-visible{outline:3px solid var(--brand-primary-border);outline-offset:3px}.initial-setup-brand-preview{display:flex;min-height:280px;flex-direction:column;justify-content:center;padding:30px;border:1px solid var(--brand-primary-border);border-radius:17px;background:linear-gradient(145deg,var(--brand-primary-subtle),#fff);box-shadow:0 15px 35px rgba(32,50,80,.08)}.initial-setup-brand-preview>div{display:flex;align-items:center;gap:12px}.initial-setup-brand-preview>div>span{display:grid;width:48px;height:48px;place-items:center;border-radius:13px;background:var(--brand-primary);color:var(--brand-on-primary)}.initial-setup-brand-preview>div svg{width:21px;height:21px}.initial-setup-brand-preview strong{font-size:20px}.initial-setup-brand-preview p{max-width:390px;margin:22px 0;color:#64748b;font-size:15px;line-height:1.55}.initial-setup-preview-line{display:block;width:100%;height:7px;margin-bottom:22px;border-radius:999px;background:linear-gradient(90deg,var(--brand-primary) 38%,#e7edf5 38%)}.initial-setup-brand-preview button{align-self:flex-start;min-height:42px;padding:0 17px;border:0;border-radius:9px;background:var(--brand-primary);color:var(--brand-on-primary);font-family: var(--asv-font-family);font-size:14px;font-weight:800}.initial-setup-uploads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:27px}.initial-setup-upload-card{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px;border:1px solid #dce5ef;border-radius:13px;background:#fff;cursor:pointer;transition:.18s}.initial-setup-upload-card:hover{border-color:var(--brand-primary-border);box-shadow:0 10px 24px rgba(32,50,80,.07)}.initial-setup-upload-card>input{position:absolute;width:1px;height:1px;opacity:0}.initial-setup-upload-preview{display:grid;width:76px;height:64px;place-items:center;overflow:hidden;border-radius:10px;background:#eff4fa}.initial-setup-upload-preview img{max-width:68px;max-height:50px;object-fit:contain}.initial-setup-upload-preview.is-mascot img{max-height:59px}.initial-setup-upload-card>span:nth-child(2){display:grid;gap:4px}.initial-setup-upload-card strong{font-size:14px}.initial-setup-upload-card small{color:#748399;font-size:12px;line-height:1.35}.initial-setup-upload-action{display:inline-flex;align-items:center;gap:6px;color:var(--brand-primary);font-size:12px;font-weight:900}.initial-setup-upload-action svg{width:15px;height:15px}.initial-setup-upload-card>.field-error{grid-column:1/-1}.initial-setup-upload-note{margin:17px 0 0;color:#748399;font-size:13px}.initial-setup-review{margin-top:27px}.initial-setup-review-brand{display:flex;align-items:center;gap:18px;padding:20px;border:1px solid var(--brand-primary-border);border-radius:14px;background:var(--brand-primary-subtle)}.initial-setup-review-brand>span{display:grid;width:118px;height:68px;place-items:center;border-right:1px solid var(--brand-primary-border)}.initial-setup-review-brand img{max-width:100px;max-height:53px;object-fit:contain}.initial-setup-review-brand>div{display:grid;gap:3px}.initial-setup-review-brand small{color:var(--brand-primary);font-size:11px;font-weight:900;letter-spacing:.08em}.initial-setup-review-brand strong{font-size:20px}.initial-setup-review-brand p{margin:0;color:#69788d;font-size:13px}.initial-setup-review dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0;border:1px solid #e1e8f1;border-radius:13px}.initial-setup-review dl>div{min-width:0;padding:17px}.initial-setup-review dl>div+div{border-left:1px solid #e1e8f1}.initial-setup-review dt{margin-bottom:7px;color:#748399;font-size:11px;font-weight:900;text-transform:uppercase}.initial-setup-review dd{display:flex;align-items:center;gap:7px;margin:0;overflow-wrap:anywhere;color:#27364a;font-size:13px;font-weight:800}.initial-setup-review dd i{width:16px;height:16px;border-radius:5px;background:var(--brand-primary)}.initial-setup-ready-note{display:flex;align-items:flex-start;gap:11px;padding:16px;border-radius:12px;background:#eef9f2;color:#176b3a}.initial-setup-ready-note>svg{flex:0 0 auto;width:19px;height:19px}.initial-setup-ready-note span{display:grid;gap:3px}.initial-setup-ready-note strong{font-size:14px}.initial-setup-ready-note small{font-size:12px;line-height:1.4}.initial-setup-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;margin-top:auto;padding-top:28px;border-top:1px solid #e4eaf2}.initial-setup-actions>span{color:#7b899c;font-size:12px;text-align:center}.initial-setup-actions .btn{min-height:44px;gap:7px}.initial-setup-actions .btn svg{width:16px;height:16px}.initial-setup-actions [hidden]{display:none!important}
@media(max-width:1050px){.initial-setup-page{padding:15px}.initial-setup-shell{grid-template-columns:280px minmax(0,1fr)}.initial-setup-guide{padding:31px 23px}.initial-setup-workspace{padding:28px}.initial-setup-uploads{grid-template-columns:1fr}.initial-setup-color{grid-template-columns:1fr}.initial-setup-brand-preview{min-height:210px}.initial-setup-review dl{grid-template-columns:1fr}.initial-setup-review dl>div+div{border-top:1px solid #e1e8f1;border-left:0}}
@media(max-width:760px){.initial-setup-page{padding:0}.initial-setup-header{box-sizing:border-box;margin:0;padding:13px 17px;background:#fff;border-bottom:1px solid #e1e8f1}.initial-setup-header>img{max-width:105px;height:34px}.initial-setup-header>div>span{display:none}.initial-setup-shell{display:block;min-height:calc(100vh - 61px);border:0;border-radius:0;box-shadow:none}.initial-setup-guide{padding:18px 17px 14px}.initial-setup-intro,.initial-setup-security{display:none}.initial-setup-steps{display:flex;gap:7px;margin:0;overflow-x:auto;scrollbar-width:none}.initial-setup-steps::-webkit-scrollbar{display:none}.initial-setup-steps button{display:flex;flex:0 0 auto;width:auto;padding:5px;border-radius:10px}.initial-setup-steps button i{width:34px;height:34px}.initial-setup-steps button span{display:none}.initial-setup-workspace{min-height:calc(100vh - 123px);padding:22px 17px}.initial-setup-progress{margin-bottom:15px}.initial-setup-mobile-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;color:#64748b;font-size:12px}.initial-setup-mobile-status strong{color:#172033;font-size:14px}.initial-setup-panel>header>span{width:42px;height:42px}.initial-setup-panel>header h2{font-size:22px}.initial-setup-panel>header p{font-size:14px}.initial-setup-fields.two-columns{grid-template-columns:1fr}.initial-setup-fields label.is-wide{grid-column:auto}.initial-setup-color{gap:16px}.initial-setup-brand-preview{min-height:180px;padding:22px}.initial-setup-upload-card{grid-template-columns:64px minmax(0,1fr)}.initial-setup-upload-preview{width:62px;height:58px}.initial-setup-upload-action{grid-column:2}.initial-setup-review-brand{align-items:flex-start;flex-direction:column}.initial-setup-review-brand>span{width:100%;border-right:0;border-bottom:1px solid var(--brand-primary-border)}.initial-setup-actions{position:sticky;bottom:0;grid-template-columns:auto 1fr;margin:25px -17px -22px;padding:14px 17px;border-top:1px solid #dfe7f1;background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.initial-setup-actions>span{display:none}.initial-setup-actions [data-setup-next],.initial-setup-actions [data-setup-submit]{justify-self:end}}
.initial-setup-actions{display:flex}.initial-setup-actions>span{flex:1}.initial-setup-actions>div{display:flex;align-items:center;gap:10px}.initial-setup-actions>div [hidden]{display:none!important}
@media(max-width:760px){.initial-setup-actions{display:grid}.initial-setup-actions>div{justify-self:end}.initial-setup-actions>div .btn{padding-inline:14px}}

/* Envio administrativo: fila visível e compositor compacto */
.communication-settings-page .communication-tabs {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.communication-settings-page .email-queue-overview {
    padding: 0;
    overflow: hidden;
}

.email-queue-overview > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border-bottom: 1px solid #e3eaf3;
}

.email-queue-overview > header > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 9px;
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.email-queue-overview > header > span svg,
.email-queue-overview > header .btn svg {
    width: 17px;
    height: 17px;
}

.email-queue-overview h2 {
    margin: 0;
    color: #172033;
    font-size: 15px;
}

.email-queue-overview p {
    margin: 3px 0 0;
    color: #71819b;
    font-size: 10px;
}

.email-queue-overview dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.email-queue-overview dl > div {
    display: grid;
    gap: 3px;
    padding: 13px 18px;
    border-right: 1px solid #e3eaf3;
}

.email-queue-overview dl > div:last-child {
    border-right: 0;
}

.email-queue-overview dt {
    color: #71819b;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.email-queue-overview dd {
    margin: 0;
    color: #172033;
    font-size: 18px;
    font-weight: 850;
}

.communication-settings-page .admin-email-composer-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr);
    gap: 16px;
}

.communication-settings-page .admin-email-composer .email-template-editor-body {
    gap: 12px;
    padding: 14px 16px 0;
}

.email-campaign-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(245px, .72fr);
    gap: 12px;
}

.email-campaign-controls .email-campaign-confirm {
    min-height: 67px;
    padding: 10px 12px;
}

.email-campaign-controls .email-schedule-field {
    gap: 5px;
    padding: 9px 11px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #f8fafc;
}

.email-campaign-controls .email-schedule-field input {
    min-height: 35px;
}

.communication-settings-page .admin-email-composer .email-editor-canvas,
.communication-settings-page .admin-email-composer .email-editor-source {
    box-sizing: border-box;
    height: 250px;
    min-height: 250px;
    max-height: 380px;
    padding: 17px;
}

.communication-settings-page .admin-email-composer .template-variables {
    padding: 10px 0;
}

.communication-settings-page .admin-email-composer .communication-form-actions {
    position: sticky;
    z-index: 3;
    bottom: 0;
    margin: 0 -16px;
    padding: 12px 16px;
    border-top: 1px solid #dfe7f1;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
}

.communication-settings-page .admin-email-composer .communication-form-actions .btn {
    min-height: 39px;
}

.communication-settings-page .admin-email-composer-layout .email-preview-stage {
    min-height: 430px;
}

.communication-settings-page .admin-email-composer-layout .email-live-preview iframe {
    min-height: 400px;
}

.campaign-status.status-scheduled {
    color: #704d08;
    background: #fff3cf;
}

.campaign-status.status-processing {
    color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.campaign-status.status-failed {
    color: #b42318;
    background: #fee4e2;
}

@media (max-width: 1100px) {
    .communication-settings-page .admin-email-composer-layout {
        grid-template-columns: 1fr;
    }

    .communication-settings-page .email-live-preview {
        position: static;
    }
}

@media (max-width: 820px) {
    .communication-settings-page .communication-tabs,
    .email-queue-overview dl,
    .email-campaign-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .communication-settings-page .communication-tabs,
    .email-queue-overview dl,
    .email-campaign-controls {
        grid-template-columns: 1fr;
    }

    .email-queue-overview > header {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .email-queue-overview > header .btn {
        grid-column: 2;
        justify-self: start;
    }

    .email-queue-overview dl > div {
        grid-template-columns: 1fr auto;
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid #e3eaf3;
    }
}
/* Ambiente público de demonstração: identidade fixa e alterações simuladas. */
.asv-demo-bar{position:sticky;top:0;z-index:10000;min-height:54px;padding:9px 22px;display:flex;align-items:center;justify-content:center;gap:28px;color:var(--brand-on-primary);background:var(--brand-primary);box-shadow:0 8px 22px color-mix(in srgb,var(--brand-primary) 22%,transparent)}
.asv-demo-bar>span,.asv-demo-bar nav{display:flex;align-items:center;gap:9px}.asv-demo-bar svg{width:18px;height:18px}.asv-demo-bar small{opacity:.88}.asv-demo-bar nav a{padding:7px 12px;border:1px solid color-mix(in srgb,var(--brand-on-primary) 34%,transparent);border-radius:10px;color:inherit;text-decoration:none;font-weight:800}.asv-demo-bar nav a:hover{background:color-mix(in srgb,var(--brand-on-primary) 14%,transparent)}
@media(max-width:720px){.asv-demo-bar{position:relative;align-items:stretch;flex-direction:column;gap:8px;padding:10px 14px}.asv-demo-bar>span{flex-wrap:wrap}.asv-demo-bar small{width:100%;padding-left:27px}.asv-demo-bar nav{display:grid;grid-template-columns:1fr 1fr}.asv-demo-bar nav a{text-align:center;font-size:12px}}

/* Respiro lateral compartilhado dos painéis em monitores amplos. */
@media (min-width: 1181px) {
    .admin-layout > .admin-main.main-content,
    .client-layout > .client-main.main-content {
        padding-right: clamp(48px, 4vw, 80px);
        padding-left: clamp(48px, 4vw, 80px);
    }
}