/* Canonical Admin UI. The only shell, controls and surfaces used by every page. */
@font-face { font-family: "VideoMaker Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/admin/fonts/roboto-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "VideoMaker Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/admin/fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { font-family: "VideoMaker Roboto", Arial, sans-serif; color: var(--ink); background: var(--soft); --ink: #10172e; --muted: #5c7093; --soft: #f3f7fc; --panel: #fff; --line: #e2e9f3; --primary: #2463f5; --primary-dark: #174dd5; --success: #137b3b; --warning: #955507; --danger: #b52b41; --purple: #7557d6; --shadow: 0 8px 30px #26376b0a; --tt-ink: var(--ink); --tt-muted: var(--muted); --tt-border: var(--line); --tt-primary: var(--primary); --tt-success: var(--success); --tt-danger: var(--danger); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; font-size: 16px; line-height: 1.5; background: var(--soft); }
[hidden], .hidden { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #b3caff; outline-offset: 3px; }
input, select, textarea { min-width: 0; width: 100%; border: 1px solid #d4deed; border-radius: 6px; color: var(--ink); background: var(--panel); }
input, select { min-height: 46px; padding: 9px 14px; }
input[type="hidden"] { display: none; }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; height: 18px; padding: 0; flex: 0 0 18px; accent-color: var(--primary); }
textarea { padding: 12px 14px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: #f3f6fb; color: var(--muted); }
label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink); }
small, .input-help, .form-hint { color: var(--muted); font-size: 14px; line-height: 1.5; }
p { overflow-wrap: anywhere; }
h1, h2, h3, h4, p { margin-top: 0; }
h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
h4 { font-size: 17px; }
a { color: var(--primary); }
code { font: .84em/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button .ui-icon { pointer-events: none; }
.status-check { fill: currentColor; stroke: none; }
.status-check-mark { stroke: var(--checkmark-color, #fff); }
.sr-only, .tt-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 20px; color: #fff; background: var(--primary); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.eyebrow, .tt-eyebrow { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; }
.brand-lockup { display: flex; align-items: center; gap: 16px; }
.brand-mark { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#2873ff,#2057f0); font-size: 34px; font-weight: 700; box-shadow: inset 0 0 0 3px #ffffff1a; }
.brand-lockup strong { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.025em; }
.brand-lockup small { display: block; margin-top: 1px; font-size: 14px; line-height: 1.2; text-transform: uppercase; }
.primary-button, .ghost-button, .danger-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.primary-button { color: #fff; background: var(--primary); }
.primary-button:hover:not(:disabled) { background: var(--primary-dark); }
.ghost-button { color: var(--ink); border-color: var(--line); background: #f9fbfe; }
button:not([class]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #f9fbfe; }
.ghost-button:hover:not(:disabled) { color: var(--primary); border-color: #bdd0f3; background: #eef4ff; }
.text-button { color: var(--primary); padding: 6px 0; background: transparent; border: 0; }
.danger-button { color: var(--danger); border-color: #f2d4db; background: #fff4f5; }
.danger-button:hover:not(:disabled) { background: #fde8eb; }
.form-message, .tt-field-error { margin: 10px 0; color: var(--danger); font-size: 14px; }
.form-message:empty, .tt-field-error:empty { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.row-actions, .inline-actions, .dialog-actions, .release-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.toggle-row, .sepay-checkbox, .checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.toggle-row .toggle { display: none; }
.toggle-row input { accent-color: var(--primary); }
input[role="switch"] { appearance: none; position: relative; width: 44px; height: 26px; min-height: 26px; flex-basis: 44px; border: 0; border-radius: 20px; background: #c4d0e1; cursor: pointer; }
input[role="switch"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
input[role="switch"]:checked { background: var(--primary); }
input[role="switch"]:checked::before { left: 21px; }
.status-pill, .tag { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; color: var(--muted); background: #edf2f9; font-size: 13px; line-height: 1.5; font-weight: 500; }
.status-healthy, .tag.green { color: var(--success); background: #e1f5ea; }
.status-warning, .tag.amber { color: var(--warning); background: #fff3de; }
.status-failed, .tag.red { color: var(--danger); background: #fde9ee; }
.tag.blue { color: var(--primary); background: #eaf1ff; }
.admin-shell { display: grid; grid-template-columns: 290px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; align-self: start; width: 290px; height: 100vh; padding: 16px 10px 18px; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--line); background: var(--panel); }
.sidebar-brand { padding: 0 18px 32px; }
.sidebar nav { display: grid; gap: 8px; }
.nav-item { display: flex; align-items: center; gap: 19px; min-height: 54px; width: 100%; padding: 12px 22px; color: #425577; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 20px; line-height: 1.35; }
.nav-item:hover, .nav-item.active { color: var(--primary); background: #eaf1ff; }
.nav-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; }
.nav-icon .ui-icon { width: 28px; height: 28px; }
.nav-group { min-width: 0; }
.nav-chevron { width: 14px; margin-left: auto; }
.nav-parent[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 4px; padding: 6px 10px 6px 48px; }
.nav-subitem { min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; text-align: left; font-size: 14px; }
.nav-subitem:hover, .nav-subitem.active { color: var(--primary); background: #eaf1ff; }
.admin-build-marker { display: none; }
.admin-profile { display: grid; grid-template-columns: 46px minmax(0,1fr) 32px; align-items: center; gap: 16px; margin: auto -10px 0; padding: 18px 26px 0; border-top: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--primary); font-size: 23px; font-weight: 500; }
.admin-profile strong { display: block; color: #425577; font-size: 18px; font-weight: 400; overflow-wrap: anywhere; }
.admin-profile small { display: none; }
.admin-profile button { display: grid; place-items: center; width: 32px; height: 40px; padding: 0; color: #425577; border: 0; border-radius: 6px; background: transparent; }
.admin-profile button .ui-icon { width: 23px; height: 23px; }
.sidebar-menu-toggle { display: none; }
.main-content { min-width: 0; padding: 0 30px 30px; }
.utility-bar { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 6px 0; }
.admin-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px; }
.admin-breadcrumb strong { font-weight: 400; }
.global-search { display: flex; width: min(400px,38%); min-width: 0; margin-left: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.global-search input { height: 40px; min-height: 40px; border: 0; background: transparent; font-size: 14px; }
.global-search button { display: grid; place-items: center; min-height: 44px; width: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; }
.topbar { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 10px 0 12px; }
.page-heading { flex: 1 1 280px; min-width: 0; }
.topbar h1 { margin: 0 0 6px; font-size: clamp(28px,2.1vw,30px); line-height: 1.2; letter-spacing: -.025em; overflow-wrap: anywhere; }
.topbar p { margin: 0; color: var(--muted); font-size: 15px; }
.top-actions { display: flex; align-items: center; flex: 0 0 auto; flex-wrap: wrap; max-width: 100%; gap: 8px; margin-left: auto; }
.view-panel { min-width: 0; }
.surface, .panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.home-workflow, .home-attention, .people-workspace, .catalog-workspace, .sepay-admin, .release-workspace { min-width: 0; }
.setup-workspace { min-height: 280px; }
.workspace-section { margin-bottom: 24px; }
.surface-heading, .section-heading, .workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.surface-heading h2, .section-heading h2, .workspace-toolbar h2 { margin: 0 0 6px; }
.surface-heading p, .section-heading p, .workspace-toolbar p { margin: 0; color: var(--muted); font-size: 15px; }
.workspace-notice { margin: 0 0 20px; padding: 14px 18px; border-radius: 6px; color: var(--muted); background: #eaf1ff; font-size: 14px; }
.workspace-empty, .empty-state, .organization-loading { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.workspace-empty > .ui-icon { width: 36px; height: 36px; color: var(--primary); }
.workspace-empty strong, .empty-state strong { color: var(--ink); font-size: 18px; }
.workspace-empty p, .empty-state p { margin: 0; }
.admin-home { display: grid; gap: 24px; }
.home-launch { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 30px; padding: 30px; border: 1px solid #cfddfa; border-radius: 8px; background: #eaf1ff; }
.launch-copy { padding: 8px; }
.launch-copy .eyebrow { color: var(--primary); }
.launch-copy h2 { max-width: 580px; margin: 12px 0; font-size: 32px; line-height: 1.25; }
.launch-copy p { max-width: 590px; margin-bottom: 24px; color: var(--muted); font-size: 17px; }
.launch-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.launch-actions .primary-button { min-height: 48px; font-size: 17px; }
.launch-preview { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.launch-preview-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: var(--primary); background: #eaf1ff; }
.launch-preview-icon .ui-icon { width: 26px; height: 26px; }
.launch-preview strong { font-size: 25px; line-height: 1.25; }
.launch-preview p { margin: 0; color: var(--muted); font-size: 15px; }
.launch-preview-note { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.home-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.home-stat { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); text-align: left; }
.home-stat:hover { border-color: #b3caff; }
.home-stat-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; color: var(--primary); background: #eaf1ff; }
.home-stat small, .home-stat strong { display: block; }
.home-stat small { font-size: 14px; }
.home-stat strong { font-size: 30px; line-height: 1.2; }
.home-stat > .ui-icon:last-child { width: 14px; margin-left: auto; color: var(--muted); }
.home-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.home-step { position: relative; display: grid; justify-items: start; align-content: start; gap: 12px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); text-align: left; }
.home-step:hover { border-color: #b3caff; background: #f9fbff; }
.home-step-number { position: absolute; top: 18px; right: 18px; color: #8294b1; font-size: 13px; }
.home-step > .ui-icon { width: 28px; height: 28px; color: var(--primary); }
.home-step strong { font-size: 19px; }
.home-step p { margin: 0; color: var(--muted); font-size: 15px; }
.home-step > span:last-child { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 14px; }
.attention-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px; border-radius: 6px; background: #fff6e6; }
.attention-row > .ui-icon { width: 28px; height: 28px; color: var(--warning); }
.attention-row > div { flex: 1; min-width: 180px; }
.attention-row p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.home-bottom-links { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 12px; }
.search-form { display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-form > div { display: flex; align-items: center; min-width: 0; padding-left: 12px; border: 1px solid var(--line); border-radius: 6px; }
.search-form input { border: 0; background: transparent; }
.search-form .ui-icon { color: var(--muted); }
.table-scroll { max-width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { padding: 14px 16px; color: var(--muted); background: #f3f7fc; font-weight: 500; text-align: left; white-space: nowrap; }
.data-table td { padding: 18px 16px; border-bottom: 1px solid var(--line); color: #425577; vertical-align: middle; }
.data-table td > strong, .data-table td > small { display: block; }
.data-table td > .status-pill { margin-top: 6px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.people-table { min-width: 740px; }
.person-identity { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }
.person-identity strong, .person-identity small { display: block; }
.person-identity strong { font-size: 16px; font-weight: 500; }
.person-identity small { margin-top: 3px; }
.user-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; color: var(--primary); background: #eaf1ff; font-weight: 500; }
.user-avatar.large { width: 56px; height: 56px; flex-basis: 56px; font-size: 23px; }
.activity-pair { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.pagination-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.pagination-page { min-width: 34px; min-height: 36px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #f9fbfe; }
.pagination-page.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.pagination-size { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.pagination-size select { width: 70px; min-height: 36px; padding: 5px 8px; }
.offer-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.catalog-offer { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.catalog-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.catalog-symbol, .org-symbol, .bank-symbol, .release-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; color: var(--primary); background: #eaf1ff; }
.catalog-symbol .ui-icon, .org-symbol .ui-icon, .bank-symbol .ui-icon, .release-symbol .ui-icon { width: 25px; height: 25px; }
.catalog-offer h3 { margin: 0 0 10px; font-size: 25px; }
.catalog-offer > p { min-height: 44px; margin-bottom: 18px; color: var(--muted); font-size: 15px; }
.catalog-price strong, .catalog-price span { display: block; }
.catalog-price strong { font-size: 32px; line-height: 1.25; }
.catalog-price span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.catalog-benefits { display: grid; gap: 12px; margin: 22px 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.catalog-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; overflow-wrap: anywhere; }
.catalog-benefits .ui-icon { margin-top: 2px; color: var(--success); }
.catalog-metadata { margin-top: auto; border-radius: 6px; background: #f3f7fc; font-size: 14px; }
.catalog-metadata summary { padding: 12px; cursor: pointer; }
.catalog-metadata dl { display: grid; gap: 8px; margin: 0; padding: 0 12px 12px; }
.catalog-metadata dl > div { display: flex; justify-content: space-between; gap: 10px; }
.catalog-metadata dd { margin: 0; overflow-wrap: anywhere; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.catalog-actions > button { flex: 1; }
.release-feed { display: grid; gap: 20px; margin-bottom: 24px; }
.release-entry { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.release-entry-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.release-entry-heading h3 { margin: 0; font-size: 26px; }
.release-entry-heading p { margin: 3px 0 0; color: var(--muted); }
.release-entry-heading > .status-pill { margin-left: auto; }
.release-entry-body { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 20px; margin: 22px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.release-entry-body > div { display: grid; align-content: start; gap: 6px; min-width: 0; }
.release-artifacts { overflow-wrap: anywhere; }
.release-preparations { margin-block: 20px 28px; }
.release-preparations h3, .release-inspection h3 { margin-bottom: 0; font-size: 18px; }
.release-preparation-list { display: grid; gap: 12px; }
.release-preparation-entry { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.release-preparation-entry .surface-heading { flex-wrap: wrap; gap: 12px; }
.release-preparation-entry h4 { margin: 0; font-size: 18px; }
.release-preparation-entry p { margin-block: 8px; }
.release-preparation-url { overflow-wrap: anywhere; color: var(--muted); font-size: 14px; }
.release-inspection { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.release-inspection progress { display: block; width: 100%; height: 10px; margin-bottom: 14px; accent-color: var(--primary); }
.release-inspection details { margin-top: 18px; }
.release-inspection summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.release-package-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 0; }
.release-package-facts div { min-width: 0; }
.release-package-facts dt { font-size: 14px; color: var(--muted); }
.release-package-facts dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.release-error-summary { border-left: 3px solid var(--danger); padding: 10px 14px; background: var(--soft); margin-bottom: 18px; }
.release-error-summary a { color: var(--danger); }
#releaseDraftForm [aria-invalid="true"] { border-color: var(--danger); }
#releaseDraftForm .form-grid label > .input-help { margin-top: -4px; }
#releaseDraftPublishHint { margin-bottom: 0; }
.release-draft-dialog .dialog-actions > button { white-space: nowrap; }
@media (max-width: 480px) {
  .release-draft-dialog .dialog-actions { gap: 8px; }
  .release-draft-dialog .dialog-actions > button { flex: 1 1 auto; min-width: 0; padding-inline: 10px; }
}
#bootstrapperList { display: grid; gap: 12px; margin-bottom: 24px; }
#bootstrapperForm fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.artifact-chip { width: fit-content; padding: 4px 8px; border-radius: 6px; color: var(--muted); background: #f3f7fc; font-size: 13px; }
.admin-dialog { width: min(900px,calc(100vw - 40px)); max-height: calc(100dvh - 40px); padding: 28px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--panel); box-shadow: 0 24px 80px #10172e30; }
.admin-dialog::backdrop { background: #16244866; }
.small-dialog { width: min(600px,calc(100vw - 40px)); }
.user-dialog { width: min(980px,calc(100vw - 40px)); }
.dialog-shell { min-width: 0; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.dialog-heading h2 { margin: 0; font-size: 26px; }
.dialog-close { display: grid; place-items: center; width: 40px; min-height: 40px; flex: 0 0 40px; padding: 8px; border: 0; border-radius: 6px; color: var(--muted); background: #f3f7fc; }
.dialog-actions { justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.dialog-message { margin-top: 18px; }
.dialog-intro { color: var(--muted); }
.person-detail-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.person-detail-heading h3, .person-detail-heading p { margin: 0; }
.person-detail-heading p { color: var(--muted); }
.person-detail-heading > button { margin-left: auto; }
.person-detail-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0 0; }
.person-detail-facts > div { min-width: 0; background: var(--soft); padding: 14px; border-radius: 6px; }
.person-detail-facts dt { color: var(--muted); font-size: 13px; }
.person-detail-facts dd { margin: 6px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.person-detail-section { min-width: 0; padding-top: 24px; }
.person-detail-section > h3 { margin-bottom: 16px; }
.license-timeline { display: grid; gap: 14px; }
.license-timeline article { padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.license-timeline-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.license-timeline p { margin: 8px 0 4px; color: var(--muted); font-size: 14px; }
.license-timeline .row-actions { margin-top: 14px; }
.person-access-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.person-access-list { display: grid; gap: 12px; }
.person-access-list article { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.person-access-list article > .ui-icon { color: var(--primary); }
.person-access-list article > div { flex: 1; min-width: 130px; }
.person-access-list strong, .person-access-list small { display: block; }
.login-screen { display: grid; min-height: 100vh; place-items: center; padding: 40px; }
.login-layout { display: grid; align-items: center; grid-template-columns: minmax(0,1.2fr) minmax(320px,.85fr); gap: 80px; width: min(1120px,100%); }
.login-intro .brand-lockup { margin-bottom: 52px; }
.login-intro h1 { margin: 14px 0 18px; font-size: clamp(32px,3.2vw,48px); line-height: 1.2; letter-spacing: -.025em; }
.login-intro > p { max-width: 480px; margin-bottom: 30px; color: var(--muted); font-size: 18px; }
.login-capabilities { display: grid; gap: 22px; }
.login-capabilities article { display: flex; align-items: flex-start; gap: 14px; }
.login-capabilities .ui-icon { width: 24px; height: 24px; margin-top: 3px; color: var(--primary); }
.login-capabilities strong, .login-capabilities span { display: block; }
.login-capabilities span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.login-card { padding: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.login-lock { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 8px; color: var(--primary); background: #eaf1ff; }
.login-lock .ui-icon { width: 28px; height: 28px; }
.login-card h2 { font-size: 28px; }
.login-caption { margin: 10px 0 24px; color: var(--muted); }
.login-card form { display: grid; gap: 18px; }
.login-button { width: 100%; min-height: 48px; margin-top: 4px; }
.security-note { display: flex; align-items: flex-start; gap: 8px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.security-note .ui-icon { margin-top: 2px; color: var(--success); }
.toast-stack { position: fixed; z-index: 500; right: 24px; bottom: 24px; display: grid; gap: 10px; width: min(420px,calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid #b5ddc5; border-radius: 8px; color: var(--success); background: #effbf4; box-shadow: var(--shadow); }
.toast.error { color: var(--danger); background: #fff2f4; border-color: #f1c4d0; }
/* The modules use these same surfaces, headings, tables and form controls. */
.org-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.org-card { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.org-card header { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.org-card header > div { flex: 1; min-width: 120px; }
.org-card h3 { margin: 0; }
.org-card header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.org-card-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 22px 0 10px; }
.org-card-facts small, .org-card-facts strong { display: block; }
.org-card-facts strong { margin-top: 5px; font-size: 23px; }
.org-budget-note { color: var(--muted); font-size: 14px; }
.org-readiness { display: grid; gap: 10px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--line); }
.org-readiness > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.org-card > .primary-button { width: 100%; }
.organization-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; padding: 6px; border-radius: 8px; background: #f3f7fc; }
.organization-tab { min-height: 42px; padding: 9px 16px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 15px; }
.organization-tab.active { color: var(--primary); background: var(--panel); box-shadow: 0 1px 5px #1738780a; }
.organization-tab-content { min-width: 0; min-height: 180px; }
.organization-overview-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 24px; }
.organization-metrics, .usage-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.organization-metric, .usage-metric { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.organization-metric small, .organization-metric strong, .usage-metric small, .usage-metric strong { display: block; }
.organization-metric strong, .usage-metric strong { margin-top: 6px; font-size: 27px; }
.provider-logo { display: grid; place-items: center; color: var(--primary); background: #eaf1ff; border-radius: 8px; font-weight: 700; }
.video-policy-card, .pool-detail-panel, .pricing-model, .pricing-provider-summary, .cost-guide-section, .tt-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.provider-admin-card { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.provider-admin-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.provider-admin-heading > div { flex: 1; min-width: 120px; }
.provider-admin-heading h3 { margin: 0 0 4px; }
.provider-admin-heading p { margin: 0; color: var(--muted); font-size: 14px; }
.provider-admin-card dl { display: grid; gap: 12px; margin: 18px 0; }
.provider-admin-card dl > div { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(0,1fr); gap: 14px; font-size: 14px; }
.provider-admin-card dt { color: var(--muted); }
.provider-admin-card dd { margin: 0; overflow-wrap: anywhere; }
.provider-admin-card > button { width: 100%; }
.readiness-setup-link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--primary); background: #edf3ff; text-align: left; font-size: 14px; }
.readiness-explanation, .pool-next-step, .setup-center-note, .cost-guide-notice, .tt-next-note { padding: 16px 18px; border-radius: 6px; color: var(--muted); background: #edf3ff; font-size: 14px; }
.setup-center-hero, .organization-setup-hero, .tt-hero { padding: 24px; border: 1px solid #ccdcfa; border-radius: 8px; background: #eaf1ff; }
.setup-center-hero.complete, .organization-setup-hero.complete { border-color: #b9dfca; background: #e1f5ea; }
.setup-progress { color: var(--muted); font-size: 14px; }
.setup-stage-number, .pool-setup-steps b { display: grid; place-items: center; color: var(--primary); background: #eaf1ff; border-radius: 50%; }
.setup-stage.complete .setup-stage-number { color: var(--success); background: #e1f5ea; }
.setup-stage-list li { border-bottom: 1px solid var(--line); }
.organization-setup-steps { padding: 16px; border-radius: 8px; background: #f3f7fc; }
.pool-back-button { color: var(--primary); }
.pool-list-summary { margin-bottom: 20px; }
.pool-catalog, .pool-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.pool-record, .pool-member, .assignment-record { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.pool-record header, .pool-member header, .assignment-record header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pool-record h3 { margin: 0; }
.pool-record p, .pool-member p, .assignment-record p { margin: 8px 0; color: var(--muted); font-size: 14px; }
.pool-record > button { width: 100%; margin-top: 16px; }
.pool-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 18px 0; }
.pool-facts dt { color: var(--muted); font-size: 13px; }
.pool-facts dd { margin: 4px 0 0; font-size: 19px; font-weight: 500; }
.pool-member strong, .pool-member small { display: block; }
.pool-management-section { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.assignment-feed { display: grid; gap: 14px; }
.assignment-record > small { display: block; margin: 6px 0; }
.pool-detail-panel.standalone { min-width: 0; }
.cost-guide-limitations { color: var(--muted); font-size: 15px; }
.policy-focus-layout { min-width: 0; }
.pricing-provider-summary { margin-bottom: 20px; }
.pricing-provider-heading h3 { margin: 0 0 6px; }
.rate-preview { padding: 16px; border-radius: 6px; color: var(--primary); background: #edf3ff; font-size: 15px; }
.warning-text { color: var(--warning); }
.error-state { padding: 20px; border: 1px solid #f0c7d1; border-radius: 8px; color: var(--danger); background: #fff2f4; }
.success-state { padding: 16px; border-radius: 8px; color: var(--success); background: #e1f5ea; }
.warning-list { display: grid; gap: 8px; margin: 12px 0; padding-left: 20px; color: var(--warning); font-size: 14px; }
.success { color: var(--success); }
.budget-progress { display: grid; gap: 10px; margin: 20px 0; }
.budget-progress-track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--line); }
.budget-progress-track > span { display: block; height: 100%; background: var(--primary); }
.inline-budget-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.inline-budget-form > label { flex: 1; min-width: 150px; }
.log-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.filters select { width: auto; min-width: 140px; }
.disclosure-body { display: grid; gap: 16px; padding-top: 18px; }
.audit-table { min-width: 520px; }
.audit-data { max-width: 360px; margin-top: 8px; padding: 12px; border-radius: 6px; color: var(--muted); background: #f3f7fc; font-size: 13px; overflow-wrap: anywhere; }
.admin-disclosure, .cost-guide-details { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfe; }
.admin-disclosure > summary, .cost-guide-details > summary { cursor: pointer; font-weight: 500; }
.cost-guide-heading { display: flex; align-items: flex-start; gap: 16px; }
.cost-guide-heading > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 8px; color: var(--primary); background: #eaf1ff; }
.cost-guide-heading h3 { margin-bottom: 6px; }
.cost-guide-heading p { color: var(--muted); font-size: 15px; }
.cost-guide-formula { padding: 18px; border-radius: 6px; background: #edf3ff; }
.cost-guide-formula.kling { background: #eaf1ff; }
.cost-guide-chip.output { color: var(--purple); }
.cost-guide-formula span, .cost-guide-formula code, .cost-guide-formula small { display: block; }
.cost-guide-formula code { margin: 8px 0; font-size: 16px; }
.cost-guide-concepts article, .cost-guide-rules article, .cost-guide-flow li { padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.cost-guide-sources { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 18px; }
.tt-page-heading p, .tt-hero-copy p { color: var(--muted); font-size: 16px; }
.tt-hero-icon { display: grid; place-items: center; color: var(--primary); background: var(--panel); border-radius: 8px; }
.tt-hero.tt-success { color: var(--success); border-color: #b9dfca; background: #e1f5ea; }
.tt-hero.tt-warning { border-color: #efdab3; background: #fff6e6; }
.tt-hero.tt-success { color: var(--success); border-color: #b9dfca; background: #e1f5ea; }
.tt-hero.tt-warning { border-color: #efdab3; background: #fff6e6; }
.tt-steps > li { padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.tt-steps > li.is-current { color: var(--primary); border-color: #b3caff; background: #eaf1ff; }
.tt-steps > li.is-done { color: var(--success); background: #effbf4; }
.tt-metrics > article { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.tt-metrics > article strong { display: block; font-size: 26px; }
.tt-metrics > article small { display: block; }
.tt-step { padding: 10px; border-radius: 6px; color: var(--muted); }
.tt-step.active { color: var(--primary); background: var(--panel); }
.tt-badge { padding: 4px 10px; border-radius: 6px; color: var(--muted); background: #edf2f9; font-size: 13px; }
.tt-badge.green { color: var(--success); background: #e1f5ea; }
.tt-badge.amber { color: var(--warning); background: #fff3de; }
.tt-badge.red { color: var(--danger); background: #fde9ee; }
.tt-metric { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.tt-metric strong { font-size: 28px; }
.tt-inline-warning, .sepay-notice { padding: 14px 18px; border-radius: 6px; color: var(--danger); background: #fff1f4; }
.tt-inline-warning { color: var(--warning); background: #fff6e6; }
.tt-help, .tt-history { padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.tt-secret-hints > div, .tt-copy-row { padding: 14px; border-radius: 6px; background: #f3f7fc; }
.tt-loading, .tt-load-error { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tt-loading-bar { height: 20px; margin-bottom: 12px; border-radius: 6px; background: #eaf1ff; }
.sepay-status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 22px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sepay-status-bar p { margin: 0; color: var(--muted); }
.sepay-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 24px; align-items: start; }
.sepay-list-column { display: grid; gap: 24px; }
.sepay-card .section-heading { margin-bottom: 20px; }
.receiving-accounts { display: grid; gap: 16px; }
.receiving-account { padding: 20px; border: 1px solid var(--line); border-radius: 8px; }
.receiving-account.sepay-selected { border-color: #a6c2fa; background: #f6f9ff; }
.receiving-account header { display: flex; align-items: center; gap: 14px; }
.receiving-account h3 { margin: 0 0 4px; }
.receiving-account p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.account-number { display: block; margin-top: 16px; font-size: 25px; overflow-wrap: anywhere; }
.receiving-account footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sepay-order-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.sepay-webhook { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.sepay-webhook input { font-size: 13px; }
.sepay-webhook button { flex: 0 0 auto; white-space: nowrap; }
.sepay-editor fieldset { display: grid; gap: 10px; }
.sepay-editor fieldset > label:not(:first-child) { margin-top: 6px; }
.sepay-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sepay-link-note { padding: 12px; border-radius: 6px; color: var(--muted); background: #edf3ff; font-size: 14px; }
@media (max-width: 1300px) {
  .admin-shell { grid-template-columns: 248px minmax(0,1fr); }
  .sidebar { width: 248px; }
  .sidebar-brand { padding-inline: 8px; }
  .sidebar-brand strong { font-size: 21px; }
  .sidebar-brand small { font-size: 12px; }
  .nav-item { gap: 12px; padding: 12px 16px; font-size: 17px; }
  .admin-profile { padding-inline: 18px; gap: 10px; }
  .admin-profile strong { font-size: 16px; }
  .home-stat { padding: 16px; gap: 10px; }
  .home-stat-icon { display: none; }
  .home-stat strong { font-size: 27px; }
  .offer-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .home-launch, .sepay-layout, .organization-overview-grid { grid-template-columns: minmax(0,1fr); }
  .launch-preview { display: none; }
  .home-steps { grid-template-columns: minmax(0,1fr); }
  .home-step { grid-template-columns: 32px minmax(0,1fr); gap: 8px 14px; }
  .home-step p, .home-step > span:last-child { grid-column: 2; }
  .home-step-number { display: none; }
  .org-directory { grid-template-columns: minmax(0,1fr); }
  .pool-catalog, .pool-members { grid-template-columns: minmax(0,1fr); }
  .organization-metrics, .usage-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .admin-shell { display: block; }
  .sidebar { position: relative; width: 100%; height: auto; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-brand { padding: 0 0 16px; }
  .sidebar-menu-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; color: #425577; background: #eaf1ff; }
  .sidebar-menu-toggle > .ui-icon:last-child { margin-left: auto; }
  .sidebar:not(.is-navigation-open) nav { display: none; }
  .sidebar.is-navigation-open nav { margin-top: 12px; }
  .admin-profile { margin: 12px 0 0; padding: 12px 0 0; }
  .main-content { padding: 0 20px 28px; }
  .utility-bar { min-height: 40px; padding-block: 6px; }
  .global-search { display: none; }
  .admin-breadcrumb { gap: 8px; font-size: 13px; }
  .topbar { padding: 8px 0 12px; }
  .page-heading { flex-basis: 180px; }
  .topbar h1 { font-size: 26px; }
  .topbar p { font-size: 14px; }
  .surface, .panel { padding: 20px; }
  .surface-heading, .section-heading, .workspace-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .workspace-toolbar .search-form { width: 100%; }
  .search-form > div { flex: 1; }
  .home-launch { padding: 20px; }
  .launch-copy { padding: 0; }
  .launch-copy h2 { font-size: 27px; }
  .home-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .home-stat { padding: 16px; }
  .home-stat small { font-size: 13px; }
  .home-stat strong { font-size: 26px; }
  .home-stat > .ui-icon:last-child { display: none; }
  .offer-catalog, .person-access-grid, .release-entry-body { grid-template-columns: minmax(0,1fr); }
  .catalog-offer, .release-entry { padding: 22px; }
  .org-card { padding: 20px; }
  .org-card-facts strong { font-size: 21px; }
  .sepay-webhook { flex-direction: column; align-items: stretch; }
  .login-screen { padding: 24px 20px; }
  .login-layout { grid-template-columns: minmax(0,1fr); gap: 28px; width: min(480px,100%); }
  .login-intro > .eyebrow, .login-intro h1, .login-intro > p, .login-capabilities { display: none; }
  .login-intro .brand-lockup { margin-bottom: 0; }
  .login-card { padding: 24px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .admin-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; }
  .dialog-heading h2 { font-size: 24px; }
  .dialog-actions > button { flex: 1; }
  .toast-stack { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  :root { --ink: CanvasText; --muted: CanvasText; --soft: Canvas; --panel: Canvas; --line: CanvasText; --primary: LinkText; --checkmark-color: CanvasText; }
  .status-check { forced-color-adjust: none; fill: Canvas; stroke: CanvasText; }
  :is(.surface, .panel, .home-stat, .home-step, .catalog-offer, .org-card, .receiving-account, .release-entry, .tt-card, .primary-button, .ghost-button, .status-pill) { border: 1px solid CanvasText; }
  :is(button,a,input,select,textarea,summary):focus-visible { outline-color: Highlight; }
}