:root {
  --ink: #172033;
  --ink-soft: #273550;
  --muted: #6b7890;
  --line: #dfe5ee;
  --line-soft: #edf1f6;
  --surface: #ffffff;
  --soft: #f4f7fb;
  --canvas: #f2f5f9;
  --red: #a11a2e;
  --red-dark: #851424;
  --red-soft: #f8ecef;
  --blue: #172033;
  --blue-mid: #273b5d;
  --blue-bright: #315a8f;
  --blue-soft: #eaf0f8;
  --green: #16845b;
  --green-soft: #e7f6ef;
  --amber: #a66708;
  --amber-soft: #fff3df;
  --shadow-sm: 0 8px 24px rgba(23, 32, 51, .07);
  --shadow-md: 0 20px 55px rgba(23, 32, 51, .12);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; color: var(--ink); font: 14px/1.48 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Master application */
.master-app { min-height: 100vh; background: radial-gradient(circle at 88% 4%, rgba(49, 90, 143, .13), transparent 25rem), linear-gradient(180deg, #edf2f8 0, var(--canvas) 430px); }
.master-app::before { content: ""; position: fixed; inset: 0 0 auto; height: 4px; z-index: 30; background: linear-gradient(90deg, var(--blue) 0 76%, var(--red) 76% 100%); }
.master-header { min-height: 78px; background: rgba(255, 255, 255, .94); border-bottom: 1px solid rgba(208, 217, 229, .85); display: flex; align-items: center; padding: 4px 30px 0; gap: 14px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.brand-lockup { display: flex; align-items: center; text-decoration: none; padding: 0 !important; }
.brand-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-logo { display: block; width: 172px; height: auto; }
.brand-subtitle { margin: 4px 0 0 49px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .24em; font-weight: 850; }
.environment-badge { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #efc2cb; background: #fff7f8; color: var(--red) !important; border-radius: 999px; padding: 5px 9px; font-size: 9px !important; font-weight: 900; letter-spacing: .1em !important; text-transform: uppercase; }
.master-header nav { display: flex; align-items: center; gap: 6px; margin-left: 28px; }
.master-header nav a { color: #536078; text-decoration: none; padding: 10px 14px; border-radius: 10px; font-weight: 750; transition: .18s ease; }
.master-header nav a:hover { background: var(--soft); color: var(--ink); }
.master-header nav a.active { background: var(--blue); color: #fff; box-shadow: 0 7px 16px rgba(23, 32, 51, .16); }
.master-user-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 9px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 14px; }
.user-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--ink-soft), var(--ink)); font-size: 12px; font-weight: 900; }
.user-copy { display: grid; line-height: 1.2; min-width: 104px; }
.user-copy small { color: var(--muted); font-size: 9px; font-weight: 750; }
.user-copy strong { margin-top: 3px; font-size: 12px; }
.master-user-menu form { display: flex; }
.logout-button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: 17px; transition: .18s ease; }
.logout-button:hover { color: var(--red); background: var(--red-soft); }
.master-shell { max-width: 1580px; margin: auto; padding: 34px 30px 50px; }
.page-heading { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: 27px 28px; color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 72%, #31496d 100%); box-shadow: 0 18px 42px rgba(23, 32, 51, .17); }
.page-heading::after { content: ""; position: absolute; width: 260px; height: 260px; right: 14%; bottom: -205px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(161,26,46,.035); pointer-events: none; }
.page-heading > * { position: relative; z-index: 1; }
.page-heading h1 { font-size: clamp(29px, 3vw, 38px); line-height: 1.08; letter-spacing: -.03em; margin: 4px 0 7px; }
.page-heading p { margin: 0; color: #c7d1df; }
.page-heading .eyebrow { color: var(--red) !important; }
.eyebrow { margin: 0; font-size: 10px !important; font-weight: 900; color: var(--red) !important; letter-spacing: .15em; }
.page-status { display: flex; align-items: center; gap: 7px; margin-top: 14px; color: #aebbd0; font-size: 11px; font-weight: 700; }
.page-status span, .security-dot { width: 7px; height: 7px; border-radius: 50%; background: #1ea672; box-shadow: 0 0 0 4px rgba(30, 166, 114, .12); }
.primary { border: 0; background: var(--red); color: #fff; font-weight: 850; box-shadow: 0 8px 18px rgba(161, 26, 46, .22); }
.primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.page-primary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 18px; }
.page-primary span { font-size: 20px; font-weight: 500; line-height: 1; }
button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 10px 14px; font-weight: 750; transition: .18s ease; }
button:hover { border-color: #c8d2df; background: #fafbfd; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.kpi { position: relative; min-height: 142px; overflow: hidden; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 18px; padding: 20px 21px; box-shadow: var(--shadow-sm); transition: .2s ease; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 13px 32px rgba(23, 32, 51, .1); }
.kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--blue); }
.kpi.active::after { background: var(--green); }
.kpi.trial::after { background: var(--blue); }
.kpi.attention::after { background: var(--red); }
.kpi-icon { position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 11px; background: var(--soft); }
.kpi-icon::before, .kpi-icon::after { content: ""; position: absolute; border-radius: 3px; background: #7a879c; }
.kpi-icon::before { width: 15px; height: 3px; left: 10px; top: 11px; box-shadow: 0 6px 0 #7a879c, 0 12px 0 #7a879c; }
.kpi-icon::after { width: 3px; height: 3px; left: 6px; top: 11px; box-shadow: 0 6px 0 #7a879c, 0 12px 0 #7a879c; }
.kpi.active .kpi-icon { background: var(--green-soft); }
.kpi.trial .kpi-icon { background: var(--blue-soft); }
.kpi.attention .kpi-icon { background: var(--red-soft); }
.kpi span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.kpi strong { display: block; font-size: 34px; line-height: 1; margin-top: 15px; letter-spacing: -.03em; }
.kpi small { display: block; margin-top: 9px; color: #8a95a7; font-size: 10px; font-weight: 650; }
.workspace-card { background: rgba(255, 255, 255, .98); border: 1px solid #d5deeb; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 35px rgba(23, 32, 51, .09); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 22px; padding: 22px 23px; border-bottom: 1px solid #d5deeb; background: linear-gradient(110deg, #f8fafd 0%, var(--blue-soft) 100%); }
.toolbar h2 { margin: 4px 0 3px; font-size: 20px; letter-spacing: -.015em; }
.toolbar p { margin: 0; color: var(--muted); font-size: 12px; }
.search { width: min(460px, 45%); font-size: 11px; color: var(--muted); font-weight: 800; }
.search > span { display: block; margin-bottom: 6px; }
.search-control { position: relative; display: block; }
.search-control > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8591a3; font-size: 18px; z-index: 1; }
.search-control input { width: 100%; padding-left: 38px; background: #f9fbfd; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1040px; }
th { background: #f7f9fc; color: #68758c; text-align: left; text-transform: uppercase; letter-spacing: .055em; font-size: 10px; padding: 12px 16px; }
td { padding: 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #fbfcfe; }
.client-name strong { display: block; font-size: 14px; }
.client-name span, .cell-sub { color: var(--muted); font-size: 11px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 850; background: #edf2f8; }
.badge.active { background: var(--green-soft); color: var(--green); }
.badge.trial { background: var(--blue-soft); color: var(--blue); }
.badge.grace, .badge.read_only { background: var(--amber-soft); color: var(--amber); }
.badge.suspended, .badge.terminated { background: var(--red-soft); color: var(--red); }
.row-actions { min-width: 310px; white-space: nowrap; text-align: right; }
.row-actions button { padding: 7px 10px; font-size: 11px; }
.empty { text-align: center; color: var(--muted); padding: 52px; }

input, select, textarea { border: 1px solid #cdd6e4; border-radius: 9px; padding: 10px 11px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(49, 90, 143, .12); }
dialog { overflow: hidden; max-height: calc(100dvh - 32px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 0; width: min(880px, calc(100vw - 36px)); box-shadow: 0 28px 80px rgba(11, 20, 35, .28); color: var(--ink); background: #f3f6fa; }
dialog.wide { width: min(1120px, calc(100vw - 36px)); }
dialog::backdrop { background: rgba(10, 18, 31, .68); backdrop-filter: blur(5px); }
dialog form { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; background: linear-gradient(180deg, #edf2f8 0, #f7f9fc 210px, #f3f6fa 100%); }
.dialog-scroll-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 24px 26px 4px; scrollbar-gutter: stable; }
.dialog-head { position: sticky; top: 0; z-index: 4; flex: 0 0 auto; display: flex; align-items: start; justify-content: space-between; margin: 0; padding: 23px 26px 22px; color: #fff; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); box-shadow: 0 10px 24px rgba(23, 32, 51, .16); }
.dialog-head::after { content: ""; position: absolute; right: 76px; bottom: 0; width: 110px; height: 3px; background: var(--red); }
.dialog-head h2 { font-size: 24px; margin: 4px 0 0; letter-spacing: -.02em; }
.dialog-head .eyebrow { color: var(--red) !important; }
.dialog-head .section-note { color: #bdc9da; }
.icon-btn { width: 38px; height: 38px; padding: 0; border-color: rgba(255,255,255,.16); font-size: 22px; color: #fff; background: rgba(255,255,255,.08); }
.icon-btn:hover { border-color: rgba(255,255,255,.32); color: #fff; background: rgba(255,255,255,.14); }
.form-grid { display: grid; gap: 14px; margin-bottom: 16px; }
.form-grid.two { grid-template-columns: repeat(2, 1fr); }
.form-grid.three { grid-template-columns: repeat(3, 1fr); }
.form-grid.five { grid-template-columns: repeat(5, 1fr); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 850; color: #4c5870; }
textarea { resize: vertical; }
.domain-input { display: flex; }
.domain-input input { min-width: 0; flex: 1; border-radius: 9px 0 0 9px; }
.domain-input span { display: flex; align-items: center; padding: 0 10px; background: var(--soft); border: 1px solid #cdd6e4; border-left: 0; border-radius: 0 9px 9px 0; color: var(--muted); }
hr { border: 0; border-top: 1px solid #d6dfeb; margin: 22px 0; }
.dialog-actions { position: sticky; bottom: 0; z-index: 4; flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 9px; margin: 0; padding: 17px 26px; border-top: 1px solid #d7e0eb; background: #fff; box-shadow: 0 -10px 24px rgba(23, 32, 51, .07); }
.form-feedback { min-height: 20px; margin-top: 10px; color: var(--red); font-weight: 750; }
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.module-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; border: 1px solid #d7e0eb; border-radius: 13px; padding: 13px; background: #fff; box-shadow: 0 5px 14px rgba(23,32,51,.035); }
.module-card:has(input:checked) { border-color: #8aa4c6; background: #f0f5fb; box-shadow: inset 3px 0 0 var(--blue-bright); }
.module-card input { margin-top: 3px; }
.module-card strong, .module-card span { display: block; }
.module-card span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.section-note { color: var(--muted); margin-top: -8px; }

/* Branding modal */
.branding-dialog { width: min(1320px, calc(100vw - 36px)); }
.branding-intro { margin: 3px 0 0 !important; }
.branding-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
.branding-controls { display: grid; gap: 14px; }
.branding-section { border: 1px solid #d5deeb; border-radius: 16px; padding: 17px; background: #fff; box-shadow: 0 8px 20px rgba(23, 32, 51, .045); }
.branding-section h3 { margin: -17px -17px 15px; padding: 13px 17px; border-bottom: 1px solid #d9e2ed; border-radius: 16px 16px 0 0; color: var(--blue); background: linear-gradient(110deg, #f7f9fc, var(--blue-soft)); font-size: 15px; }
.brand-upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.brand-upload-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--soft); display: flex; flex-direction: column; gap: 9px; }
.brand-upload-card small { color: var(--muted); font-size: 10px; }
.asset-preview { height: 82px; border: 1px dashed #b9c5d6; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 850; }
.asset-preview img { display: block; max-width: calc(100% - 18px); max-height: calc(100% - 18px); object-fit: contain; }
.asset-preview.document { background: #fff; }
.asset-preview.favicon { width: 82px; align-self: center; }
.asset-preview.favicon img { max-width: 48px; max-height: 48px; }
.check-line { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 10px; font-weight: 750; }
.check-line input { margin: 0; }
.domain-panel { display: grid; grid-template-columns: 1fr 1.25fr .85fr; gap: 12px; align-items: end; }
.domain-panel > div { min-height: 63px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 2px; }
.field-title { font-size: 10px; font-weight: 850; color: var(--muted); }
.domain-status { font-size: 9px; font-weight: 850; color: var(--amber); }
.domain-status.verified, .domain-status.active { color: var(--green); }
.domain-status.failed { color: var(--red); }
.branding-preview-panel { position: sticky; top: 0; align-self: start; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--soft); }
.tenant-screen-preview { --tenant-primary: #a11a2e; --tenant-secondary: #172033; border: 1px solid #d5deea; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 12px 28px rgba(35, 48, 72, .09); }
.tenant-preview-header { height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e6ebf2; color: var(--tenant-secondary); }
.mini-logo { width: 58px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #9aa6b8; }
.mini-logo img, .paper-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tenant-preview-body { padding: 18px 14px; display: grid; gap: 9px; }
.tenant-preview-body span { height: 9px; background: #edf1f6; border-radius: 999px; }
.tenant-preview-body span:nth-child(2) { width: 78%; }
.tenant-preview-body span:nth-child(3) { width: 54%; }
.tenant-preview-body button { justify-self: start; margin-top: 5px; border: 0; background: var(--tenant-primary); color: #fff; font-size: 9px; padding: 8px 10px; }
.tenant-document-preview { margin-top: 14px; min-height: 108px; padding: 15px; background: #fff; border: 1px solid #d5deea; border-radius: 10px; display: flex; align-items: flex-start; gap: 12px; }
.paper-logo { width: 95px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #9aa6b8; font-weight: 900; }
.tenant-document-preview strong, .tenant-document-preview span { display: block; }
.tenant-document-preview span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.preview-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; }

/* Dedicated Master login */
.master-login-page { min-height: 100vh; background: #edf1f6; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.12fr) minmax(420px, .88fr); }
.login-brand-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(38px, 5vw, 76px); color: #fff; background: radial-gradient(circle at 85% 18%, rgba(161, 26, 46, .38), transparent 24rem), linear-gradient(145deg, #111a2b 0%, #172033 52%, #253651 100%); }
.login-brand-panel::before { content: ""; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -160px; bottom: -120px; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(161,26,46,.035); }
.login-brand-panel::after { content: ""; position: absolute; width: 6px; height: 36%; left: 0; top: 32%; background: var(--red); border-radius: 0 8px 8px 0; }
.login-brand-content, .login-brand-footer { position: relative; z-index: 1; }
.login-logo { display: block; width: min(305px, 70%); height: auto; margin-top: 10px; padding: 13px 17px; background: #fff; border-radius: 15px; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.login-master-label { margin: 12px 0 0 51px; color: #aeb9c9; font-size: 9px; font-weight: 850; letter-spacing: .27em; text-transform: uppercase; }
.login-brand-panel h1 { max-width: 620px; margin: clamp(38px, 6vh, 64px) 0 14px; font-size: clamp(34px, 4vw, 58px); line-height: 1.04; letter-spacing: -.045em; }
.login-lead { max-width: 610px; margin: 0; color: #b9c4d3; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.65; }
.login-feature-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(34px, 6vh, 64px); }
.login-feature-list > div { min-height: 132px; padding: 16px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.045); backdrop-filter: blur(8px); }
.feature-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(161,26,46,.2); color: #ff9cad; font-size: 9px; font-weight: 900; }
.login-feature-list p { margin: 14px 0 0; }
.login-feature-list strong, .login-feature-list small { display: block; }
.login-feature-list strong { color: #fff; font-size: 12px; }
.login-feature-list small { margin-top: 6px; color: #9eabbd; font-size: 10px; line-height: 1.5; }
.login-brand-footer { color: #7f8da2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.login-form-panel { display: grid; place-items: center; padding: 42px; background: #fff; }
.login-form-wrap { width: min(100%, 430px); }
.login-mobile-brand { display: none; }
.login-heading { position: relative; }
.login-heading .environment-badge { position: absolute; right: 0; top: -2px; }
.login-heading h2 { margin: 8px 0 7px; font-size: 35px; line-height: 1.1; letter-spacing: -.035em; }
.login-heading > p:last-child { margin: 0; color: var(--muted); }
.login-alert { margin-top: 22px; padding: 12px 14px; border-radius: 11px; font-size: 12px; font-weight: 750; }
.login-alert.error { color: #9f1530; background: var(--red-soft); border: 1px solid #f0bdc6; }
.login-alert.success { color: #126944; background: var(--green-soft); border: 1px solid #b8e1cf; }
.master-login-form { display: grid; gap: 18px; margin-top: 28px; }
.master-login-form label { gap: 8px; color: #344158; font-size: 11px; }
.login-input-wrap { position: relative; display: block; }
.login-input-wrap > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; fill: none; stroke: #8a96a8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-input-wrap input { width: 100%; height: 52px; padding: 0 72px 0 44px; border-radius: 12px; background: #f9fbfd; font-size: 13px; }
.password-toggle { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); padding: 7px 8px; border: 0; background: transparent; color: var(--red); font-size: 10px; }
.password-toggle:hover { background: var(--red-soft); }
.login-submit { min-height: 52px; margin-top: 4px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #fff; background: var(--red); box-shadow: 0 13px 28px rgba(161,26,46,.23); font-weight: 850; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(161,26,46,.28); }
.login-submit span:last-child { font-size: 20px; font-weight: 400; }
.login-security-note { display: flex; align-items: center; gap: 12px; margin-top: 27px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfd; }
.login-security-note p { margin: 0; }
.login-security-note strong, .login-security-note small { display: block; }
.login-security-note strong { font-size: 11px; }
.login-security-note small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.back-to-app { display: block; margin-top: 22px; color: var(--muted); text-align: center; text-decoration: none; font-size: 11px; font-weight: 750; }
.back-to-app:hover { color: var(--red); }

.plan-picker { display: grid; grid-template-columns: minmax(220px, .65fr) 1.35fr; gap: 16px; align-items: end; padding: 14px; margin-bottom: 10px; border: 1px solid #cad7e7; border-radius: 13px; background: linear-gradient(110deg, #f7f9fc 0%, var(--blue-soft) 100%); }
.plan-picker p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.plan-picker button { padding: 8px 11px; font-size: 12px; }
.module-group { display: inline-flex; width: max-content; margin: 5px 0 1px; padding: 2px 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.brand-wordmark { display: block; color: var(--ink); font-size: 28px; font-weight: 850; letter-spacing: .14em; line-height: 1; }
.login-logo.brand-wordmark { width: auto; color: var(--ink); font-size: clamp(28px, 3vw, 40px); letter-spacing: .08em; }
.brand-logo.brand-wordmark { width: auto; font-size: 22px; letter-spacing: .16em; }
.section-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 2px; }
.section-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.panel { background: #fff; border: 1px solid #d5deeb; border-radius: 16px; padding: 18px; box-shadow: 0 8px 20px rgba(23, 32, 51, .045); }
.panel + .panel { margin-top: 14px; }
.panel h3 { margin: 0 0 12px; }
.history { display: grid; gap: 8px; margin-top: 12px; }
.history article { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--soft); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.banner { margin: 0 0 14px; padding: 12px 14px; border-radius: 11px; font-weight: 750; }
.banner.error { color: #9f1530; background: var(--red-soft); border: 1px solid #f0bdc6; }
.banner.success { color: #126944; background: var(--green-soft); border: 1px solid #b8e1cf; }
.banner.info { color: var(--ink); background: var(--blue-soft); border: 1px solid #c9d7ea; }
.limit-line { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: end; }
.check-line { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.badge.draft, .badge.DRAFT, .badge.ready_to_provision { background: var(--soft); color: var(--ink-soft); }
.badge.provisioning { background: var(--amber-soft); color: var(--amber); }
.badge.active { background: var(--green-soft); color: var(--green); }
.badge.provisioning_failed { background: var(--red-soft); color: var(--red); }
.stage-list { display: grid; gap: 8px; margin: 12px 0; }
.stage-list p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -40px; background: #fff; padding: 8px 12px; z-index: 40; }
.skip-link:focus { top: 12px; }
@media (max-width: 1024px) {
  .master-shell { padding-inline: 20px; }
  .detail-head { align-items: stretch; flex-direction: column; }
}
@media (max-width: 390px) {
  .login-form-panel { padding: 16px; }
  .master-shell { padding-inline: 12px; }
}
@media (max-width: 850px) {
  .plan-picker, .limit-line { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {
  .login-shell { grid-template-columns: .95fr 1.05fr; }
  .login-feature-list { grid-template-columns: 1fr; gap: 8px; }
  .login-feature-list > div { min-height: 0; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 10px; }
  .login-feature-list p { margin: 0; }
  .branding-layout { grid-template-columns: 1fr; }
  .branding-preview-panel { position: static; }
  .domain-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
  .master-header { padding-inline: 18px; flex-wrap: wrap; }
  .master-header nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .user-copy { display: none; }
  .master-user-menu { padding: 5px; }
  .master-shell { padding: 24px 18px 40px; }
  .page-heading { align-items: start; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid.two, .form-grid.three, .form-grid.five, .module-grid { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .login-shell { display: block; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100vh; padding: 28px; }
  .login-mobile-brand { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 58px; }
  .login-mobile-brand img { width: 190px; }
  .login-mobile-brand span { margin: 5px 0 0 53px; color: var(--muted); font-size: 8px; text-transform: uppercase; font-weight: 850; letter-spacing: .22em; }
  .brand-upload-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 620px) {
  .brand-logo { width: 145px; }
  .brand-subtitle { margin-left: 40px; }
  .environment-badge { display: none; }
  .page-heading { flex-direction: column; }
  .page-primary { width: 100%; justify-content: center; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi { min-height: 125px; }
  .brand-upload-grid, .domain-panel { grid-template-columns: 1fr; }
  .row-actions { min-width: 0; }
  .login-form-panel { padding: 22px; }
  .login-heading .environment-badge { display: inline-flex; }
  .login-mobile-brand { margin-bottom: 44px; }
}