:root {
    --black: var(--upas-ui-color-night);
    --black-soft: var(--upas-ui-color-night-soft);
    --surface-dark: var(--upas-ui-color-panel);
    --surface-dark-raised: var(--upas-ui-color-panel-raised);
    --surface-light: #f5f9fd;
    --card: var(--upas-ui-color-surface);
    --ink: var(--upas-ui-color-text);
    --ink-soft: #334a63;
    --ink-muted: #52657a;
    --line: #cddceb;
    --line-dark: #2b3442;
    --white: var(--upas-ui-color-surface);
    --accent: #93bfff;
    --accent-strong: #2b78e4;
    --success: #19734a;
    --success-soft: #e8f6ef;
    --warning: #966100;
    --warning-soft: #fff4d6;
    --danger: #b42335;
    --danger-soft: #ffedef;
    --radius-sm: var(--upas-ui-radius-control);
    --radius-md: var(--upas-ui-radius-control);
    --radius-lg: var(--upas-ui-radius-panel);
    --shadow: var(--upas-ui-shadow-panel);
    --sidebar-width: 264px;
    --font-heading: var(--upas-ui-font-heading);
    --font-body: var(--upas-ui-font-body);
    --text-readable: .9375rem;
    --text-control: .9375rem;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; background: var(--surface-light); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 14px; background: var(--white); color: var(--black); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page-loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; align-content: center; gap: 12px; background: var(--black-soft); color: var(--white); text-align: center; }
.page-loader .upas-brand-logo { width: min(230px, 62vw); height: auto; aspect-ratio: 791 / 223; }
.page-loader strong { margin-top: 6px; font-family: var(--font-heading); font-size: 1.05rem; }
.page-loader > span:last-child { color: #aeb7c7; font-size: .88rem; }
.loader-spinner { width: 24px; height: 24px; margin-top: 12px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--white); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 16px 18px; overflow-y: auto; scrollbar-width: none; background: linear-gradient(180deg, #000 0%, #050b12 46%, #111827 100%); color: var(--white); border-right: 1px solid rgba(255,255,255,.12); }
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.brand-row { display: flex; align-items: center; justify-content: center; min-height: 54px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.brand-logo { display: block; width: 194px; max-width: 100%; height: 54px; object-fit: contain; object-position: center; }
.portal-label { align-self: flex-start; margin: 12px 4px 30px; padding: 5px 9px; color: #c5cedb; border: 1px solid #303744; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { display: grid; flex: 0 0 auto; gap: 3px; margin-top: 10px; overflow: visible; }
.nav-group-label { margin: 7px 12px 1px; color: rgba(255,255,255,.58); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 0; }
.nav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: transparent; color: rgba(255,255,255,.8); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font-family: var(--font-heading); font-size: .9rem; font-weight: 400; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.nav-item i { width: 18px; text-align: center; font-size: .92rem; }
.nav-item:hover { background: rgba(255,255,255,.07); color: var(--white); border-color: rgba(255,255,255,.1); }
.nav-item.active { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.14); }
.nav-item:focus-visible, .icon-button:focus-visible, .button:focus-visible, .account-toggle:focus-visible, .action-row:focus-visible, .readiness-value:focus-visible, .metric-card:focus-visible, .reference-panel summary:focus-visible, .credential-advanced summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sidebar-footer { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid #202631; }
.account-state-summary { display: grid; gap: 7px; }
.account-state-badge, .environment-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.account-state-badge.draft { color: #111827; background: #fffaf0; border-color: rgba(255,255,255,.9); }
.account-state-badge.pending { color: #fff7ed; background: #9a3412; border-color: #fb923c; }
.account-state-badge.complete { color: var(--white); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.account-state-badge.protected { color: #fff1f2; background: #991b1b; border-color: #fb7185; }
.account-state-summary p { margin: 0; color: #a5b1c2; font-size: .72rem; line-height: 1.4; }
.environment-badge { margin-top: 11px; color: #d6dfec; background: #171d26; border-color: #303744; font-weight: 600; }
.nav-backdrop { display: none; }

.main-content { min-height: 100vh; margin-left: var(--sidebar-width); padding: 28px; background: radial-gradient(circle at top right, rgba(255, 255, 255, .1), transparent 300px), linear-gradient(180deg, #05070a 0, #111827 286px, var(--surface-light) 286px, var(--surface-light) 100%); }
.main-content.setup-view-active { background: radial-gradient(circle at top right, rgba(255, 255, 255, .1), transparent 220px), linear-gradient(180deg, #05070a 0, #111827 112px, var(--surface-light) 112px, var(--surface-light) 100%); }
.main-content > * { width: 100%; max-width: none; margin-inline: 0; }
.page-header { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 14px; color: var(--white); }
.page-heading-group { display: flex; gap: 14px; align-items: flex-start; }
.eyebrow { margin: 0 0 4px; color: #41556c; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page-header h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.page-header .eyebrow { color: rgba(255,255,255,.66); }

.account-menu { position: relative; flex: 0 0 auto; }
.account-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 9px; color: var(--white); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-heading); font-size: .86rem; font-weight: 500; }
.account-toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.46); }
.account-avatar { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; color: var(--black); background: #fffaf0; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; font-size: .6rem; font-weight: 700; }
.account-state-dot { display: none; width: 10px; height: 10px; flex: 0 0 10px; margin-left: -12px; align-self: flex-end; background: #fff; border: 2px solid var(--black-soft); border-radius: 50%; }
.account-state-dot.pending { background: #fdba74; }
.account-state-dot.protected { background: #fda4af; }
.account-toggle-copy { min-width: 0; display: grid; gap: 2px; flex: 1; line-height: 1.05; text-align: left; }
.account-toggle-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.account-toggle-copy small { color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.account-toggle-copy small.draft, .account-toggle-copy small.complete { color: rgba(255,255,255,.9); }
.account-toggle-copy small.pending { color: #fdba74; }
.account-toggle-copy small.protected { color: #fda4af; }
.account-toggle > i { font-size: .72rem; transition: transform .2s ease; }
.account-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 230px; display: grid; gap: 3px; padding: 7px; background: #05070a; color: var(--white); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.account-dropdown-header { display: flex; gap: 11px; align-items: center; margin: 2px 2px 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.account-dropdown-header .account-avatar { color: var(--white); background: var(--black); }
.account-dropdown-header div { min-width: 0; display: grid; }
.account-dropdown-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.account-dropdown-header small { color: rgba(255,255,255,.62); font-size: .69rem; }
.account-dropdown button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; color: rgba(255,255,255,.78); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; text-align: left; font-family: var(--font-heading); font-size: .84rem; font-weight: 400; }
.account-dropdown button:hover, .account-dropdown button:focus-visible { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); outline: none; }
.account-dropdown button i { width: 16px; color: inherit; text-align: center; }
.account-dropdown button.danger { color: #fecaca; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.status-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 124px; margin-bottom: 18px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #000 0%, #111827 50%, #2f3744 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 14px 30px rgba(0,0,0,.22); overflow: hidden; }
.status-hero::after { display: none; }
.status-hero .eyebrow { color: rgba(255,255,255,.82); }
.status-hero .section-heading .eyebrow { position: relative; margin-bottom: 0; padding-bottom: 3px; }
.status-hero .section-heading .eyebrow::after { content: ""; position: absolute; right: -120px; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.28) 54%, transparent 100%); }
.status-hero .section-heading h2 { color: white; }
.overview-page-description { margin: 4px 0 0; color: rgba(255,255,255,.9); font-size: .84rem; line-height: 1.45; }
.client-logo-control { position: relative; align-self: center; width: 82px; height: 96px; }
.status-hero-icon { position: relative; width: 82px; height: 82px; display: grid; place-items: center; padding: 0; color: #707782; background: #fffaf0; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; cursor: pointer; font-size: 1.7rem; }
.status-hero-icon:hover { border-color: var(--white); }
.status-hero-icon:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.status-hero-icon img { width: 100%; height: 100%; padding: 12px; border-radius: 50%; object-fit: contain; }
.logo-upload-badge { position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--white); background: var(--black); border: 3px solid var(--white); border-radius: 50%; font-size: .72rem; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.logo-upload-label { position: absolute; top: calc(100% + 7px); left: 50%; color: rgba(255,255,255,.82); font-size: .7rem; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.logo-remove-button { position: absolute; top: 84px; left: 50%; padding: 0; color: #fecaca; background: transparent; border: 0; cursor: pointer; font-size: .67rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; transform: translateX(-50%); }
.logo-remove-button:hover, .logo-remove-button:focus-visible { color: var(--white); outline: none; }
.status-hero-content { position: relative; width: 100%; min-width: 0; max-width: none; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.status-hero-content > .section-heading { width: 100%; margin: 0; }
.status-hero h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.15rem, 2vw, 1.45rem); }
.status-hero-content > p { margin: 7px 0 10px; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.45; }
.status-hero-actions { display: flex; justify-content: flex-end; }
.status-hero-actions .button { min-width: 210px; color: var(--black); background: var(--white); border-color: var(--white); }
.status-hero-actions .button:hover:not(:disabled) { color: var(--black); background: #e8edf5; border-color: #e8edf5; }
.status-hero-actions .button:disabled { color: rgba(255,255,255,.58); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); opacity: 1; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading.compact { margin-bottom: 0; }
.section-heading h2 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; letter-spacing: 0; }
.subsection-heading { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.subsection-heading h3 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: 1.02rem; font-weight: 600; }
.subsection-title-with-help { display: flex; align-items: center; gap: 8px; }
.subsection-help-button { width: 22px; height: 22px; flex-basis: 22px; }

.pill { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.pill.draft { color: #dce4f0; background: #333d4c; }
.pill.complete { color: #d1fae5; background: #14532d; }
.pill.pending, .pill.required { color: var(--warning); background: var(--warning-soft); }
.pill.dirty { color: #fff7ed; background: #9a3412; }
.pill.neutral { color: #435068; background: #e9edf3; }
.pill.protected { color: #185c92; background: #e3f1ff; }
.status-hero #workspaceStatus { flex: 0 0 auto; padding: 6px 12px; color: #111827; background: #fffaf0; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 5px 14px rgba(0,0,0,.22); font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.status-hero #workspaceStatus.neutral { color: #f8fafc; background: #4b5563; border-color: #9ca3af; }
.status-hero #workspaceStatus.pending { color: #fff7ed; background: #9a3412; border-color: #fb923c; }
.status-hero #workspaceStatus.complete { color: #ecfdf5; background: #166534; border-color: #4ade80; }
.status-hero #workspaceStatus.draft { color: #111827; background: #fffaf0; border-color: rgba(255,255,255,.9); }
.load-error-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: -4px; margin-bottom: 18px; padding: 12px 14px; color: #7f1d1d; background: var(--danger-soft); border: 1px solid #efb5b5; border-radius: var(--radius-md); }
.load-error-banner > i { font-size: 1.1rem; }
.load-error-banner div { display: grid; }
.load-error-banner p { margin: 1px 0 0; color: #8b3d46; font-size: .82rem; }

.portal-view { display: none; animation: view-in .2s ease; }
.portal-view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card {
  min-height: 122px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--surface-dark-raised);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.metric-card:hover { border-color: rgba(147,191,255,.75); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--surface-dark-raised); box-shadow: 0 18px 38px rgba(0,0,0,.24); }
.metric-icon, .type-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--white); background: var(--black); border-radius: 11px; font-size: .86rem; }
.metric-card div { min-width: 0; display: grid; align-content: start; gap: 4px; }
.status-label { color: var(--ink-muted); font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.metric-card .metric-icon { width: 34px; height: 34px; flex-basis: 34px; color: var(--white); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; }
.metric-card .status-label { color: #a8b2c2; }
.metric-card strong { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; }
.metric-card p { margin: 0; color: #a8b2c2; font-size: 1rem; line-height: 1.4; }
.metric-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; color: #c7ddff; font-size: .78rem; font-weight: 700; }
.metric-action i { color: currentColor; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.home-next-step-intro { margin-top: -4px; }
.form-content-stack { grid-template-columns: minmax(0, 1fr); gap: 14px; }
#integrationForm,
#scopeForm,
#credentialsView > .form-content-stack,
#testView > .form-content-stack,
#billingView > .form-content-stack,
#billingView > .availability-banner {
    width: 100%;
    max-width: none;
}
#capabilityForm { width: 100%; max-width: none; }
#scopeForm { max-width: none; }
.content-column, .side-column { display: grid; align-content: start; gap: 14px; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 18px; }
.profile-content, .profile-side-column { display: grid; align-content: start; gap: 14px; }
.profile-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.profile-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.profile-overview .eyebrow { color: rgba(255,255,255,.7); }
.profile-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1.12rem; }
.profile-overview p:last-child { margin: 5px 0 0; color: rgba(255,255,255,.76); font-size: .88rem; }
.profile-overview p strong { color: var(--white); }
.required-key { color: #fca5a5; font-weight: 800; }
.profile-progress { width: min(250px, 34%); flex: 0 0 auto; display: grid; gap: 7px; color: var(--white); font-size: .82rem; text-align: right; }
.profile-progress-track { width: 100%; height: 7px; overflow: hidden; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; }
.profile-progress-track span { display: block; width: 0; height: 100%; background: #4ade80; border-radius: inherit; transition: width .25s ease; }
.profile-readiness-action { justify-self: end; min-height: 34px; margin-top: 4px; padding: 7px 11px; color: #064e3b; background: var(--white); border-color: var(--white); font-size: .76rem; }
.profile-readiness-action:hover { color: #052e24; background: #dcfce7; border-color: #dcfce7; }
.profile-section-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.profile-section-nav button { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 8px; padding: 10px 12px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.profile-section-nav button:hover { border-color: #91a8c1; background: #f9fbfd; }
.profile-section-nav button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.profile-section-nav i { grid-row: 1 / 3; width: 20px; color: var(--ink-muted); text-align: center; }
.profile-section-nav span { overflow: hidden; font-family: var(--font-heading); font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.profile-section-nav small { color: var(--warning); font-size: .7rem; }
.profile-section-nav button.complete { border-color: #9acdb4; background: var(--success-soft); }
.profile-section-nav button.complete i, .profile-section-nav button.complete small { color: var(--success); }
.profile-section-nav button.dirty { border-color: #d97706; background: #fff7ed; }
.profile-section-nav button.dirty i, .profile-section-nav button.dirty small { color: #9a3412; }
.profile-side-column .profile-data-card { overflow: hidden; }
.profile-side-column .section-heading {
    margin: -16px -16px 14px;
    padding: 12px 16px;
    color: var(--white);
    background: linear-gradient(135deg, #000 0%, var(--surface-dark) 50%, #2f3744 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.profile-side-column .section-heading h2,
.profile-side-column .section-heading .eyebrow { color: var(--white); }
.profile-side-column .section-heading .pill { color: var(--white); background: rgba(255,255,255,.18); }
.profile-side-column .section-heading .pill.dirty { color: #fff7ed; background: #9a3412; }
.profile-side-column .profile-collapsible-summary { color: var(--white); background: linear-gradient(135deg, #000 0%, var(--surface-dark) 50%, #2f3744 100%); }
.profile-side-column .profile-collapsible-summary:hover { background: linear-gradient(135deg, #080b10 0%, #1b2432 50%, #374151 100%); }
.profile-side-column .profile-collapsible-summary .details-title > i,
.profile-side-column .profile-collapsible-summary .eyebrow,
.profile-side-column .profile-collapsible-summary strong { color: var(--white); }
.profile-side-column .profile-collapsible-summary small { color: rgba(255,255,255,.7); }
.profile-side-column .profile-collapsible-summary .pill { color: var(--white); background: rgba(255,255,255,.18); }
.profile-side-column .profile-collapsible-summary .pill.dirty { color: #fff7ed; background: #9a3412; }
.profile-side-column .side-card-description { margin-bottom: 18px; color: var(--ink-muted); font-size: 1rem; }
.profile-side-column .field-grid { grid-template-columns: 1fr; }
.content-card, .form-card { padding: 16px; }
.profile-data-card { scroll-margin-top: 18px; border-color: var(--line); }
.profile-data-card.dirty { border-color: #d97706; }
.profile-data-card:focus { outline: 3px solid var(--accent); outline-offset: 3px; }
.profile-data-card > .section-heading { align-items: center; gap: 10px; }
.profile-collapsible { padding: 0; }
.profile-collapsible-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #f7f9fc; border-radius: inherit; cursor: pointer; list-style: none; }
.profile-collapsible-summary::-webkit-details-marker { display: none; }
.profile-collapsible-summary::marker { content: ""; }
.profile-collapsible-summary:hover { background: #eef2f6; }
.profile-collapsible-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.profile-collapsible-summary .details-title { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.profile-collapsible-summary .details-title > i { width: 14px; margin-top: 5px; color: var(--ink); font-size: .76rem; transition: transform .2s ease; }
.profile-collapsible[open] .profile-collapsible-summary .details-title > i { transform: rotate(90deg); }
.profile-collapsible-summary .details-title > span { min-width: 0; display: grid; gap: 2px; }
.profile-collapsible-summary .eyebrow { margin: 0; }
.profile-collapsible-summary strong { color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.profile-collapsible-summary small { color: var(--ink-muted); font-size: .84rem; font-weight: 400; line-height: 1.4; }
.profile-collapsible[open] .profile-collapsible-summary { border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.profile-collapsible-body { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .24s ease, opacity .18s ease; }
.profile-collapsible[open] .profile-collapsible-body { grid-template-rows: 1fr; opacity: 1; overflow: visible; }
.profile-collapsible-body-inner { min-height: 0; padding: 18px 16px 16px; }
.profile-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 14px; background: var(--white); border-top: 1px solid var(--line); }
.profile-data-card.dirty .profile-section-actions { position: sticky; bottom: 8px; z-index: 18; margin: 20px -8px -8px; padding: 12px 8px 8px; background: rgba(255,255,255,.96); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: 0 -8px 18px rgba(7,29,54,.06); backdrop-filter: blur(10px); }
.profile-section-actions .button { min-height: 40px; }
.profile-side-column .profile-section-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.profile-side-column .profile-section-actions .section-save-status,
.profile-side-column .profile-section-actions .profile-next-section { grid-column: 1 / -1; width: 100%; margin-right: 0; }
.profile-side-column .profile-section-actions .button { min-width: 0; width: 100%; white-space: normal; }
.profile-section-save:not(:disabled) { color: var(--white); background: #050b12; border-color: #050b12; box-shadow: 0 6px 14px rgba(0,0,0,.16); }
.profile-section-save:hover:not(:disabled) { background: #1f2937; border-color: #1f2937; }
.profile-section-save:disabled { color: #6b7280; background: #edf1f5; border-color: #d4dbe4; opacity: 1; }
.profile-section-discard:not(:disabled) { color: var(--ink-soft); border-color: #cbd5e1; }
.profile-section-discard:disabled { opacity: .45; }
.section-save-status { margin-right: auto; color: var(--ink-muted); font-size: .8rem; }
.section-save-status.unsaved { color: var(--warning); font-weight: 700; }
.section-save-status.error { color: var(--danger); font-weight: 700; }
.profile-next-section { color: var(--ink); background: #eef2f6; border-color: #cbd5e1; }
.profile-next-section:hover { background: #e2e8f0; border-color: #94a3b8; }
.profile-card-description { max-width: 700px; margin: 0; color: var(--ink-muted); font-size: 1rem; font-weight: 400; line-height: 1.5; }
.profile-logo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 24px; padding: 12px 14px; background: #f5f8fb; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.profile-logo-preview { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; color: var(--ink-muted); background: var(--white); border: 1px solid var(--line); border-radius: 50%; }
.profile-logo-preview img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.profile-logo-row > div { min-width: 0; }
.profile-logo-row strong { display: block; font-family: var(--font-heading); font-size: .9rem; }
.profile-logo-row p { margin: 2px 0 0; color: var(--ink-muted); font-size: .8rem; line-height: 1.4; }
.profile-logo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.profile-logo-actions .button { min-height: 36px; padding: 8px 10px; font-size: .76rem; }
.profile-field-group + .profile-field-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.profile-field-group-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.profile-field-group-heading > i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--ink); background: #edf2f7; border-radius: 50%; font-size: .78rem; }
.profile-field-group-heading h3 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: .92rem; }
.profile-field-group-heading p { margin: 3px 0 0; color: var(--ink-muted); font-size: .78rem; line-height: 1.4; }
.support-contact-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.support-contact-group legend { margin-bottom: 20px; color: var(--ink); font-size: .82rem; font-weight: 700; }
.home-grid .content-column > .content-card { padding: 18px; }
.home-grid .side-column > .content-card { overflow: hidden; }
.home-grid .side-column > .content-card > .section-heading {
    margin: -16px -16px 14px;
    padding: 12px 16px;
    color: white;
    background: linear-gradient(135deg, #000 0%, #111827 50%, #2f3744 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.home-grid .side-column > .content-card > .section-heading h2,
.home-grid .side-column > .content-card > .section-heading .eyebrow { color: white; }
.home-grid .side-column > .content-card > .section-heading .pill { color: white; background: rgba(255,255,255,.18); }
.full-span { grid-column: 1 / -1; }
.muted { color: var(--ink-muted); font-size: 1rem; line-height: 1.5; }
.action-list { display: grid; }
.action-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; gap: 12px; padding: 12px 2px 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.action-row:first-child { padding-top: 0; border-top: 0; }
.action-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.action-row > span:nth-child(2) { min-width: 0; display: grid; }
.action-row strong { font-size: 1rem; }
.action-row small { margin-top: 3px; color: var(--ink-muted); font-size: .9rem; line-height: 1.4; }
.action-row > i { color: #8b95a5; font-size: .68rem; }
.action-row .type-icon { width: 34px; height: 34px; flex-basis: 34px; background: #eef1f5; color: var(--ink); }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.summary-list li:last-child { border: 0; }
.summary-list strong { font-weight: 600; }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-grid.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-sync-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.account-sync-group { min-width: 0; }
.account-sync-group + .account-sync-group { padding-left: 22px; border-left: 1px solid var(--line); }
.field.full { grid-column: 1 / -1; }
.field { min-width: 0; display: grid; align-content: start; gap: 7px; color: var(--ink); font-size: .74rem; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 11px 13px; color: var(--ink); background: #f9fafc; border: 1px solid #cfd6e0; border-radius: var(--radius-sm); outline: none; font-size: .84rem; font-weight: 400; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: #6da2e7; box-shadow: 0 0 0 3px rgba(43,120,228,.12); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,35,53,.08); }
.field-help { color: var(--ink-muted); font-size: .9rem; font-weight: 400; line-height: 1.4; }
.field-error, .group-error { color: var(--danger); font-size: .9rem; font-weight: 500; line-height: 1.25; }
.field-error:empty { display: none; }
.field-error:not(:empty), .group-error:not(:empty) { display: flex; align-items: center; gap: 4px; }
.field-error i, .group-error i { position: static; width: auto; flex: 0 0 auto; color: currentColor; font-size: .95rem; opacity: 1; }
.group-error { min-height: 1.25rem; margin: 10px 0 0; }
.group-error:empty { display: flex; visibility: hidden; }

/* Match the established user-webforms form language. */
.data-field {
    position: relative;
    display: block;
    min-width: 0;
    margin: 4px 0 30px;
    color: var(--ink-muted);
    font-family: Calibri, Roboto, sans-serif;
    font-size: 1.1em;
    font-weight: 400;
}
.data-field > i {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 5px;
    width: 16px;
    color: var(--ink);
    opacity: .5;
    text-align: center;
    transition: color .3s ease-in-out, opacity .3s ease-in-out;
}
.data-field .field-label {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 30px;
    height: 45px;
    display: flex;
    align-items: center;
    max-width: calc(100% - 30px);
    color: var(--ink-muted);
    cursor: text;
    font: inherit;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s ease-in-out;
}
.data-field:has([required]) .field-label::after {
    content: "*";
    margin-left: 4px;
    color: var(--danger);
    font-size: .85em;
    font-weight: 700;
}
.optional-label { margin-left: 5px; color: var(--ink-muted); font-size: .72em; font-weight: 400; }
.data-field.has-context-help input, .data-field.has-context-help .upas-select { width: calc(100% - 36px); }
.data-field.has-url-action input { width: calc(100% - 72px); }
.data-field.has-url-action .field-label { max-width: calc(100% - 72px); }
.data-field.has-url-action .field-context-row { width: 68px; justify-content: flex-end; gap: 6px; }
.field-context-row { position: absolute; top: 9px; right: 0; width: 32px; min-height: 24px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }
.field-info-button { position: relative; width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; margin: 0; padding: 0; color: var(--white); background: var(--black); border: 2px solid var(--black); border-radius: 50%; box-shadow: 0 2px 4px rgba(3,7,13,.25); cursor: pointer; pointer-events: auto; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.field-info-button::after { content: ""; position: absolute; inset: 2px; border: 1px solid var(--white); border-radius: 50%; pointer-events: none; }
.field-info-glyph { position: relative; z-index: 1; display: block; width: 100%; color: var(--white); font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; transform: translateY(-.35px); }
.field-info-button:hover { color: var(--white); background: var(--surface-dark-raised); border-color: var(--black); box-shadow: 0 3px 7px rgba(3,7,13,.3); }
.field-info-button:active { box-shadow: 0 1px 2px rgba(3,7,13,.24); }
.field-info-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-info-button[aria-expanded="true"] { color: var(--white); background: var(--black); border-color: var(--black); box-shadow: 0 1px 2px rgba(3,7,13,.24); }
.field-url-button { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; margin: 0; padding: 0; color: var(--white); background: var(--black); border: 1px solid var(--black); border-radius: 6px; cursor: pointer; font-size: .7rem; }
.field-url-button:hover:not(:disabled) { background: var(--surface-dark-raised); }
.field-url-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-url-button:disabled { color: #7b8794; background: #edf1f5; border-color: #d4dbe4; cursor: not-allowed; }
.field-help-popover { position: fixed; z-index: 150; width: min(320px, calc(100vw - 24px)); padding: 14px 15px; color: var(--ink); background: var(--white); border: 1px solid #9fb4ca; border-radius: var(--radius-md); box-shadow: 0 16px 38px rgba(7,29,54,.2); }
.field-help-popover > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.field-help-popover strong { font-family: var(--font-heading); font-size: .9rem; }
.field-help-popover p { margin: 7px 0 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.5; }
.field-help-close { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; margin: -6px -7px 0 0; padding: 0; color: var(--ink-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.field-help-close:hover { color: var(--ink); background: #edf1f6; }
.field-help-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.data-field input,
.data-field select,
.data-field textarea {
    box-sizing: border-box;
    width: 90%;
    min-height: 45px;
    padding: 10px 10px 2px 30px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    outline: none;
    transition: border-color .5s ease-in-out;
}
.data-field textarea {
    min-height: 128px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    resize: vertical;
}
.data-field.url-list-field > i { top: 39px; left: 12px; }
.data-field.url-list-field textarea { padding-left: 38px; }
.data-field .password-field {
    display: block;
    width: 90%;
}
.data-field .password-field input {
    width: 100%;
    padding-right: 42px;
}
.data-field input:focus,
.data-field select:focus,
.data-field textarea:focus {
    background: transparent;
    border-color: var(--ink);
    box-shadow: none;
}
.data-field input[aria-invalid="true"],
.data-field select[aria-invalid="true"],
.data-field textarea[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: none;
}
.data-field:has(input:focus) .field-label,
.data-field:has(select:focus) .field-label,
.data-field:has(textarea:focus) .field-label,
.data-field:has(.upas-select-trigger:focus) .field-label,
.data-field:has(input[placeholder]:not([placeholder=" "])) .field-label,
.data-field.has-value .field-label {
    top: -15px;
    color: var(--ink);
    font-size: .78rem;
}
.data-field:has(input:focus) > i,
.data-field:has(select:focus) > i,
.data-field:has(textarea:focus) > i,
.data-field:has(.upas-select-trigger:focus) > i {
    color: var(--ink);
    opacity: 1;
}
.data-field.has-value:not(:focus-within) > i { color: var(--ink); opacity: .5; }
.data-field:has(textarea) { padding-top: 22px; }
.data-field:has(textarea) .field-label,
.data-field:has(textarea:focus) .field-label,
.data-field:has(textarea).has-value .field-label {
    top: 0;
    left: 0;
    height: auto;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
}
.data-field .field-help,
.data-field .field-error {
    display: block;
    width: 90%;
    margin-top: 5px;
    padding-left: 30px;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 400;
}
.data-field .field-error { position: absolute; top: 50px; left: 0; z-index: 2; margin: 0; padding-left: 0; }
.data-field:has([aria-invalid="true"]) .field-help { visibility: hidden; }
.data-field:has(textarea) .field-error { top: auto; bottom: 0; }
.data-field .field-error:empty { display: none; }
.country-autocomplete-panel, .geoapify-autocomplete-panel { position: absolute; z-index: 90; top: 47px; left: 0; width: 90%; max-height: 232px; overflow-y: auto; margin: 0; padding: 0; list-style: none; color: var(--ink); background: var(--white); border: 1px solid #aebdcd; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: 0 14px 28px rgba(7,29,54,.16); }
.country-autocomplete-panel[hidden], .geoapify-autocomplete-panel[hidden] { display: none; }
.country-autocomplete-panel li, .geoapify-autocomplete-panel li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px 9px 30px; border-top: 1px solid var(--line); cursor: pointer; font-size: .92rem; line-height: 1.35; }
.country-autocomplete-panel li:first-child, .geoapify-autocomplete-panel li:first-child { border-top: 0; }
.country-autocomplete-panel li:hover, .country-autocomplete-panel li.is-active, .geoapify-autocomplete-panel li:hover, .geoapify-autocomplete-panel li.is-active { color: var(--ink); background: #eef2f6; }
.country-autocomplete-panel li small { color: var(--ink-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.country-autocomplete-panel li.is-empty, .geoapify-autocomplete-panel li.is-empty { color: var(--ink-muted); cursor: default; }
.data-field .reveal-button { right: 10%; }
.data-field select.upas-select-hidden { display: none; }
.upas-select { position: relative; width: 90%; }
.upas-select-trigger {
    width: 100%;
    min-height: 40px;
    padding: 10px 30px 2px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .5s ease-in-out;
}
.upas-select-trigger::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: var(--ink);
}
.upas-select.open .upas-select-trigger,
.upas-select-trigger:focus,
.upas-select-trigger:focus-visible { border-bottom-color: var(--ink); }
.upas-select.open .upas-select-trigger::after {
    top: 10px;
    border-top-color: transparent;
    border-bottom-color: var(--ink);
}
.upas-select-trigger[aria-invalid="true"] { border-bottom-color: var(--danger); }
.upas-select-options {
    position: absolute;
    z-index: 80;
    top: calc(100% + 2px);
    right: 0;
    left: 0;
    display: none;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(7, 29, 54, .15);
    list-style: none;
}
.upas-select.open .upas-select-options { display: block; }
.upas-select-options li {
    padding: 8px 12px 8px 30px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    outline: none;
}
.upas-select-options li:first-child { border-top: 0; }
.upas-select-options li:hover,
.upas-select-options li:focus-visible,
.upas-select-options li.is-selected { color: var(--ink); background: #f1f3f6; }
.upas-select-options li[aria-disabled="true"] { display: none; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px; }
.reveal-button { position: absolute; top: 50%; right: 7px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; transform: translateY(-50%); color: var(--ink-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.reveal-button:hover { background: #edf1f6; }

.choice-list { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
.choice-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.choice-row:last-child { border: 0; }
.choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-check { width: 22px; height: 22px; display: grid; place-items: center; color: transparent; border: 1px solid #b7c0ce; border-radius: 7px; transition: .16s ease; }
.choice-check i { font-size: .68rem; }
.choice-row input:checked + .choice-check { color: var(--white); background: var(--black); border-color: var(--black); }
.choice-row input:focus-visible + .choice-check { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice-row > span:last-child { min-width: 0; display: grid; }
.choice-row strong { font-size: 1rem; }
.choice-row small { margin-top: 3px; color: var(--ink-muted); font-size: .9rem; line-height: 1.4; }
.capability-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.capability-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.capability-overview.complete .capability-overview-icon { background: rgba(255,255,255,.14); }
.capability-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.capability-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.capability-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.capability-overview-count { display: grid; gap: 3px; text-align: right; }
.capability-overview-count strong { color: var(--white); font-family: var(--font-heading); font-size: .88rem; }
.capability-overview-count small { color: rgba(255,255,255,.76); font-size: .72rem; }
.capability-choice-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.capability-card { min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.capability-card:has(input:checked) { background: #f3f7fb; border-color: #8094ad; box-shadow: inset 0 0 0 1px #8094ad; }
.capability-card.is-draft { border-color: #d97706; box-shadow: inset 0 0 0 1px #d97706; }
.capability-choice { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding: 18px; border: 0; border-radius: 0; }
.capability-choice:last-child { border: 0; }
.capability-choice input:checked ~ .choice-check { color: var(--white); background: var(--black); border-color: var(--black); }
.capability-choice input:focus-visible ~ .choice-check { outline: 3px solid var(--accent); outline-offset: 2px; }
.capability-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--white); background: var(--surface-dark); border-radius: 10px; }
.capability-copy { min-width: 0; display: grid; }
.capability-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.capability-title-row .pill { flex: 0 0 auto; font-size: .62rem; }
.capability-benefit { margin-top: 10px; color: var(--ink); font-size: .76rem; font-weight: 700; }
.capability-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 14px; color: var(--ink-muted); background: rgba(255,255,255,.72); border-top: 1px solid var(--line); font-size: .73rem; line-height: 1.4; }
.capability-card-footer > span { min-width: 0; }
.capability-card-footer strong { color: var(--ink); }
.capability-configure-action { min-height: 36px; flex: 0 0 auto; padding: 7px 10px; font-size: .72rem; }
.reference-panel { overflow: hidden; }
.reference-panel summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; cursor: pointer; list-style: none; }
.reference-panel summary::-webkit-details-marker { display: none; }
.reference-panel summary > span { display: grid; }
.reference-panel summary strong { color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.reference-panel summary > i { transition: transform .18s ease; }
.reference-panel[open] summary > i { transform: rotate(180deg); }
.reference-panel-body { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.scope-heading-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.security-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px; color: #274463; background: #edf6ff; border: 1px solid #cbe2f7; border-radius: var(--radius-sm); }
.security-note > i { margin-top: 2px; }
.security-note strong { font-size: 1rem; }
.security-note p { margin: 3px 0 0; font-size: .9rem; line-height: 1.45; }
.capability-modular-note { color: #263548; background: #f3f5f8; border-color: #d2dae4; }
.capability-modular-note > i { color: #111827; }
.account-sync-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.account-sync-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.account-sync-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.account-sync-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.account-sync-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.account-sync-overview-count { display: grid; gap: 3px; text-align: right; }
.account-sync-overview-count strong { color: var(--white); font-family: var(--font-heading); font-size: .88rem; }
.account-sync-overview-count small { color: rgba(255,255,255,.76); font-size: .72rem; }
.account-sync-prerequisite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; color: #78350f; background: #fff7ed; border: 1px solid #fdba74; border-radius: var(--radius-md); }
.account-sync-prerequisite[hidden] { display: none; }
.account-sync-prerequisite > i { color: #c2410c; }
.account-sync-prerequisite strong { color: #7c2d12; }
.account-sync-prerequisite p { margin: 3px 0 0; font-size: .82rem; line-height: 1.4; }
.integration-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.integration-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.integration-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.integration-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.integration-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.integration-overview-count { display: grid; gap: 3px; text-align: right; }
.integration-overview-count strong { color: var(--white); font-family: var(--font-heading); font-size: .88rem; }
.integration-overview-count small { color: rgba(255,255,255,.76); font-size: .72rem; }
.integration-config-card { padding: 0; overflow: hidden; }
.integration-section-summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; cursor: pointer; list-style: none; }
.integration-section-summary::-webkit-details-marker { display: none; }
.integration-section-summary > span:first-child { display: grid; }
.integration-section-summary .eyebrow { margin-bottom: 2px; }
.integration-section-summary strong { color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.integration-summary-meta { display: inline-flex; align-items: center; gap: 12px; }
.integration-summary-meta > i { color: var(--ink-muted); transition: transform .18s ease; }
.integration-config-card[open] .integration-summary-meta > i { transform: rotate(180deg); }
.integration-config-card.dirty { border-color: #d97706; box-shadow: inset 0 0 0 1px #d97706; }
.integration-section-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.integration-config-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; padding: 0; }
.integration-config-column { min-width: 0; padding: 18px; }
.integration-config-column + .integration-config-column { border-left: 1px solid var(--line); }
.integration-config-column.dirty { background: #fffaf0; box-shadow: inset 3px 0 0 #d97706; }
.integration-column-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.integration-column-heading .eyebrow { margin-bottom: 2px; }
.integration-column-heading h3 { margin: 0; color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.section-intro { margin: 13px 0 4px; color: var(--ink-muted); font-size: .82rem; line-height: 1.45; }
.field[data-transport-policy][hidden] { display: none; }
.qr-reference-panel .reference-panel-body { padding-top: 16px; }
.qr-learn-more-summary { min-height: 66px; }
.qr-learn-more-description { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.reference-panel summary > .qr-learn-more-action { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .78rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qr-learn-more-action i { font-size: .7rem; transition: transform .18s ease; }
.qr-reference-panel[open] .qr-learn-more-action i { transform: rotate(180deg); }
.qr-lifecycle { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.qr-lifecycle li { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--ink); text-align: center; font-size: .74rem; }
.qr-lifecycle li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 18px); width: calc(100% - 36px); height: 1px; background: #9aa8b8; }
.qr-lifecycle li span { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; color: var(--white); background: var(--surface-dark); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.qr-lifecycle li:last-child span { background: var(--success); }
.qr-terminal-states { margin: 13px 0 0; color: var(--ink-muted); font-size: .78rem; text-align: center; }
.qr-terminal-states strong { color: var(--ink); }
.qr-reference-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.qr-reference-notes .security-note { margin-top: 0; color: #263548; background: #f3f5f8; border-color: #d2dae4; }
.qr-reference-notes .security-note > i { color: #111827; }
.provisioning-flow { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.provisioning-flow li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.provisioning-flow li > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--white); background: var(--surface-dark); border-radius: 50%; font-size: .72rem; font-weight: 800; }
.provisioning-flow strong { color: var(--ink); font-size: .9rem; }
.provisioning-flow p { margin: 3px 0 0; color: var(--ink-muted); font-size: .82rem; line-height: 1.45; }
.callback-contract { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.callback-contract div { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; background: #f3f5f8; border: 1px solid #d2dae4; border-radius: var(--radius-sm); }
.callback-contract span { color: var(--ink-muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.callback-contract strong { color: var(--ink); font-size: .84rem; }
.callback-semantics { margin-top: 16px; }
.callback-reference { margin-top: 16px; overflow: hidden; background: #f8fafc; border: 1px solid #d2dae4; border-radius: var(--radius-sm); }
.callback-reference summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; cursor: pointer; list-style: none; }
.callback-reference summary::-webkit-details-marker { display: none; }
.callback-reference summary > span { display: grid; }
.callback-reference summary > span:last-child { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 7px; color: var(--ink); font-size: .74rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.callback-reference summary strong { color: var(--ink); font-size: .84rem; }
.callback-reference summary small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; font-weight: 400; }
.callback-reference summary i { transition: transform .18s ease; }
.callback-reference[open] summary i { transform: rotate(180deg); }
.callback-reference-body { padding: 0 13px 13px; border-top: 1px solid #d2dae4; }
.callback-reference-body .security-rules { margin-top: 10px; }
.callback-reference-body p { margin: 10px 0 0; color: var(--ink-muted); font-size: .78rem; line-height: 1.45; }
.form-actions { position: sticky; bottom: 8px; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; padding: 10px; background: rgba(245,249,253,.94); border: 1px solid rgba(205,220,235,.9); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(7,29,54,.1); backdrop-filter: blur(10px); }
.save-status { margin-right: auto; color: var(--ink-muted); font-size: .9rem; }
.save-status.unsaved { color: var(--warning); font-weight: 700; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: .86rem; font-weight: 700; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.button:hover:not(:disabled) { transform: none; }
.button.primary { color: var(--white); background: linear-gradient(135deg, #242a33, #050b12); border-color: #050b12; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #374151, #1f2937); border-color: #1f2937; }
.button.secondary { color: var(--ink); background: var(--white); border-color: #bfc7d2; }
.button.secondary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { background: #eef1f5; }
.button.ghost { color: var(--ink-soft); background: transparent; border-color: transparent; }
.button.danger { color: #991b1b; background: #fff7f7; border-color: #efb5b5; }
.button.danger:hover:not(:disabled) { color: var(--white); background: #991b1b; border-color: #991b1b; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.full-width { width: 100%; }
#credentialsView .content-card > .full-width,
#testView .content-card > .full-width,
#billingView .content-card > .full-width {
    width: auto;
    min-width: 220px;
    max-width: 100%;
}
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.credentials-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.credentials-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.credentials-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.credentials-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.credentials-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.credentials-overview .pill.complete { color: #ecfdf5; background: #166534; border-color: #4ade80; }
.credentials-overview .pill.pending { color: #fff7ed; background: #9a3412; border-color: #fb923c; }
.credential-environment { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 14px; padding: 15px 18px; }
.credential-environment h2 { margin: 2px 0 0; font-family: var(--font-heading); font-size: 1rem; }
.credential-environment p:last-child { margin: 4px 0 0; color: var(--ink-muted); font-size: .8rem; line-height: 1.4; }
.credential-environment-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 4px; padding: 4px; background: #e8edf3; border: 1px solid #d2dae4; border-radius: 11px; }
.credential-environment-tab { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; color: var(--ink-soft); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: .8rem; font-weight: 700; }
.credential-environment-tab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.credential-environment-tab.active { color: var(--white); background: var(--black); border-color: var(--black); box-shadow: 0 4px 10px rgba(0,0,0,.16); }
.credential-environment-tab:focus-visible { outline: 3px solid rgba(59,130,246,.28); outline-offset: 2px; }
.credentials-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); align-items: stretch; gap: 14px; }
.credential-pair-card, .credential-lifecycle-card { min-width: 0; }
.credential-pair-card .section-intro { margin-bottom: 16px; }
.credential-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.credential-value { min-width: 0; }
.credential-value-label { display: grid; gap: 2px; margin-bottom: 7px; }
.credential-value-label > span { color: var(--ink); font-size: .82rem; font-weight: 700; }
.credential-value-label small { color: var(--ink-muted); font-size: .7rem; }
.credential-display { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 9px 10px 9px 14px; background: #f3f5f8; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.credential-display code { overflow: hidden; color: var(--ink-soft); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.credential-display.protected-value { background: #eef1f5; }
.credential-lock { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--ink-muted); }
.credential-usage-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 11px 12px; color: var(--ink-soft); background: #f3f5f8; border-left: 3px solid var(--black); border-radius: 0 8px 8px 0; }
.credential-usage-note i { margin-top: 3px; color: var(--ink); }
.credential-usage-note p { margin: 0; font-size: .78rem; line-height: 1.45; }
.credential-lifecycle-card { display: flex; flex-direction: column; }
.credential-metadata { display: grid; margin: 0; border-top: 1px solid var(--line); }
.credential-metadata > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.credential-metadata dt { color: var(--ink-muted); font-size: .76rem; }
.credential-metadata dd { margin: 0; color: var(--ink); font-size: .76rem; font-weight: 700; text-align: right; }
.credential-lifecycle-card .prerequisite-message { min-height: 0; }
.credential-actions { display: grid; gap: 8px; margin-top: auto; }
.credential-actions .button { width: 100%; }
.credential-action-note { margin: 10px 0 0; color: var(--ink-muted); font-size: .72rem; line-height: 1.4; }
.credential-security-form { width: 100%; margin-top: 14px; }
.credential-security-form .form-actions { margin-top: 10px; }
.credential-security-card, .credential-restrictions-card { margin-bottom: 14px; }
.credential-advanced { overflow: hidden; padding: 0; }
.credential-advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 16px; cursor: pointer; list-style: none; }
.credential-advanced summary::-webkit-details-marker { display: none; }
.credential-advanced summary > span:first-child { min-width: 0; display: grid; }
.credential-advanced summary strong { color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.credential-advanced summary small { margin-top: 2px; color: var(--ink-muted); font-size: var(--text-readable); }
.advanced-summary-action { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.advanced-summary-action i { transition: transform .18s ease; }
.credential-advanced[open] .advanced-summary-action i { transform: rotate(180deg); }
.credential-advanced-body { padding: 15px 16px 16px; border-top: 1px solid var(--line); }
.credential-advanced-body > .section-intro { margin-top: 0; }
.credential-auth-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.credential-auth-choice { grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: 150px; padding: 13px; background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.credential-auth-choice:last-child { border: 1px solid var(--line); }
.credential-auth-choice:has(input:checked) { background: #f1f5f9; border-color: #7b8797; box-shadow: inset 0 0 0 1px #7b8797; }
.credential-auth-choice input[type="radio"] + .choice-check { border-radius: 50%; }
.credential-auth-choice > span:last-child { align-content: start; }
.credential-auth-choice .pill { justify-self: start; margin-top: 10px; }
.credential-method-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.credential-method-panel[hidden] { display: none; }
.credential-secret-guidance { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #f3f5f8; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.credential-secret-guidance div { display: grid; }
.credential-secret-guidance p { margin: 3px 0 0; color: var(--ink-muted); font-size: .8rem; line-height: 1.45; }
.browser-access-choice { padding: 12px; background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.browser-access-choice:last-child { border: 1px solid var(--line); }
.credential-restriction-fields { margin-top: 14px; }
.credential-security-card.dirty, .credential-restrictions-card.dirty { border-color: #d0a44c; box-shadow: inset 0 0 0 1px rgba(208,164,76,.24); }
.credentials-reference { overflow: hidden; margin-top: 14px; padding: 0; }
.credentials-reference summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none; }
.credentials-reference summary::-webkit-details-marker { display: none; }
.credentials-reference summary > span:first-child { min-width: 0; display: flex; align-items: center; gap: 12px; }
.credentials-reference summary > span:first-child > span:last-child { min-width: 0; display: grid; }
.credentials-reference summary > span:last-child { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .74rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.credentials-reference summary strong { color: var(--ink); font-size: .92rem; }
.credentials-reference summary small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; font-weight: 400; }
.credentials-reference summary i.fa-chevron-down { transition: transform .18s ease; }
.credentials-reference[open] summary i.fa-chevron-down { transform: rotate(180deg); }
.credentials-reference-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.credentials-reference-body .security-rules strong { color: var(--ink); }
.empty-state { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: #f3f4f6; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.empty-state.compact { padding: 14px; }
.empty-state div { display: grid; }
.empty-state strong { display: block; margin-bottom: 2px; font-size: 1rem; }
.empty-state p { margin: 0; color: var(--ink-muted); font-size: 1rem; line-height: 1.45; }
.security-rules, .feature-list { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.security-rules li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.security-rules i { margin-top: 3px; color: var(--success); }
.prerequisite-message { min-height: 38px; margin: 12px 0; padding: 9px 11px; color: #714c08; background: var(--warning-soft); border-radius: 8px; font-size: .8rem; }
.prerequisite-message.ready { color: var(--success); background: var(--success-soft); }
.test-meta { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0; padding-top: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); font-size: .8rem; }
.test-meta strong { color: var(--ink); }
.test-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.test-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.test-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.test-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.test-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.test-overview-meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.test-overview-meta strong { color: var(--white); font-family: var(--font-heading); font-size: .8rem; }
.test-overview-meta small { color: rgba(255,255,255,.72); font-size: .7rem; }
.test-overview .pill.complete { color: #ecfdf5; background: #166534; border-color: #4ade80; }
.test-overview .pill.pending { color: #fff7ed; background: #9a3412; border-color: #fb923c; }
.test-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.integration-test-card { min-width: 0; }
.integration-test-card .section-intro { min-height: 58px; }
.test-step-list { display: grid; gap: 0; margin: 14px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.test-step-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.test-step-list li > span { width: 25px; height: 25px; display: grid; place-items: center; color: var(--ink); background: #edf1f5; border: 1px solid #cbd3dd; border-radius: 50%; font-size: .7rem; font-weight: 800; }
.test-step-list li > div { min-width: 0; display: grid; }
.test-step-list strong { color: var(--ink); font-size: .82rem; }
.test-step-list small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; line-height: 1.4; }
.test-step-list li.running > span { color: var(--white); background: var(--black); border-color: var(--black); }
.test-step-list li.passed > span { color: var(--white); background: var(--success); border-color: var(--success); }
.test-step-list li.failed > span { color: var(--white); background: var(--danger); border-color: var(--danger); }
.qr-test-artifact { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; margin: 12px 0; padding: 12px; background: #f3f5f8; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qr-test-artifact[hidden] { display: none; }
.qr-test-artifact img { width: 104px; height: 104px; object-fit: contain; padding: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.qr-test-artifact div { min-width: 0; display: grid; gap: 3px; }
.qr-test-artifact span { color: var(--ink-muted); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; }
.qr-test-artifact strong { overflow-wrap: anywhere; color: var(--ink); font-size: .82rem; }
.qr-test-artifact small { color: var(--ink-muted); font-size: .72rem; }
.test-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.test-result > div { min-width: 0; display: grid; gap: 2px; padding: 9px 10px; background: #f3f5f8; border: 1px solid var(--line); border-radius: 8px; }
.test-result span { color: var(--ink-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.test-result strong { overflow: hidden; color: var(--ink); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.test-history-card { min-width: 0; }
.test-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.test-history-list:empty { display: none; }
.test-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; background: #f3f5f8; border: 1px solid var(--line); border-radius: 8px; }
.test-history-item > i { color: var(--success); }
.test-history-item.failed > i { color: var(--danger); }
.test-history-item div { min-width: 0; display: grid; }
.test-history-item strong { color: var(--ink); font-size: .78rem; }
.test-history-item small { overflow: hidden; color: var(--ink-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.test-history-item time { color: var(--ink-muted); font-size: .68rem; white-space: nowrap; }
.test-reference { overflow: hidden; margin-top: 14px; padding: 0; }
.test-reference summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none; }
.test-reference summary::-webkit-details-marker { display: none; }
.test-reference summary > span:first-child { min-width: 0; display: flex; align-items: center; gap: 12px; }
.test-reference summary > span:first-child > span:last-child { min-width: 0; display: grid; }
.test-reference summary > span:last-child { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .74rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.test-reference summary strong { color: var(--ink); font-size: .92rem; }
.test-reference summary small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; font-weight: 400; }
.test-reference summary i.fa-chevron-down { transition: transform .18s ease; }
.test-reference[open] summary i.fa-chevron-down { transform: rotate(180deg); }
.test-reference-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.test-scenario-list { display: grid; gap: 10px; }
.test-scenario { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; background: #f3f4f6; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.test-scenario > div { min-width: 0; }
.test-scenario strong { color: var(--ink); font-size: .92rem; }
.test-scenario p { margin: 3px 0 0; color: var(--ink-muted); font-size: .8rem; line-height: 1.4; }
.test-scenario .button { min-height: 38px; padding: 7px 11px; font-size: .76rem; }
.availability-banner { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 14px 16px; color: var(--ink); background: var(--warning-soft); border: 1px solid #ead8aa; border-radius: var(--radius-md); }
.availability-banner i { margin-top: 4px; color: var(--warning); }
.availability-banner strong { font-family: var(--font-heading); }
.availability-banner p { margin: 2px 0 0; color: var(--ink-soft); font-size: .86rem; }

.billing-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 14px; padding: 16px 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.billing-overview-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.billing-overview .eyebrow { margin: 0 0 2px; color: rgba(255,255,255,.7); }
.billing-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1rem; }
.billing-overview p:last-child { margin: 4px 0 0; color: rgba(255,255,255,.76); font-size: .8rem; line-height: 1.45; }
.billing-overview-meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.billing-overview-meta strong { color: var(--white); font-family: var(--font-heading); font-size: .8rem; }
.billing-overview-meta small { color: rgba(255,255,255,.72); font-size: .7rem; }
.billing-overview .pill.complete { color: #ecfdf5; background: #166534; border-color: #4ade80; }
.billing-overview .pill.pending { color: #fff7ed; background: #9a3412; border-color: #fb923c; }
.billing-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.billing-workspace > .content-card { min-width: 0; }
.billing-invoices-card, .subscription-actions-card { grid-column: 1 / -1; }
.billing-entitlements, .billing-detail-list { display: grid; margin: 14px 0; border-top: 1px solid var(--line); }
.billing-entitlements > div, .billing-detail-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.billing-entitlements dt, .billing-detail-list dt { color: var(--ink-soft); font-size: .78rem; }
.billing-entitlements dt { display: inline-flex; align-items: center; gap: 8px; }
.billing-entitlements dt i { width: 18px; color: var(--ink); text-align: center; }
.billing-entitlements dd, .billing-detail-list dd { margin: 0; color: var(--ink); font-size: .78rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.billing-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.billing-usage-list { display: grid; gap: 14px; margin-top: 14px; }
.billing-usage-list article { display: grid; gap: 6px; }
.billing-usage-list article > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .78rem; }
.billing-usage-list article strong { color: var(--ink); }
.usage-track { overflow: hidden; height: 7px; background: #e2e7ed; border-radius: 999px; }
.usage-track span { width: 0; height: 100%; display: block; background: var(--black); border-radius: inherit; }
.billing-usage-list small { color: var(--ink-muted); font-size: .7rem; }
.billing-usage-note { margin: 16px 0 0; padding: 10px 11px; color: var(--ink-muted); background: #f3f5f8; border-left: 3px solid var(--black); border-radius: 0 8px 8px 0; font-size: .72rem; line-height: 1.45; }
.payment-method-summary { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0; padding: 14px; background: #f3f5f8; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.payment-method-summary div { min-width: 0; display: grid; }
.payment-method-summary strong { color: var(--ink); font-size: .9rem; }
.payment-method-summary p { margin: 3px 0 0; color: var(--ink-muted); font-size: .78rem; line-height: 1.4; }
.billing-table-wrap { overflow-x: auto; }
.billing-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.billing-table th { padding: 9px 10px; color: var(--ink-muted); border-bottom: 1px solid var(--line); font-size: .68rem; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.billing-table td { padding: 11px 10px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.billing-table td:first-child { color: var(--ink); font-weight: 700; }
.billing-table td:last-child { text-align: right; }
.billing-invoices-card:has(#invoiceTableBody:empty) .billing-table-wrap { display: none; }
.subscription-action-list { display: grid; border-top: 1px solid var(--line); }
.subscription-action-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.subscription-action-list span { min-width: 0; display: grid; }
.subscription-action-list strong { color: var(--ink); font-size: .82rem; }
.subscription-action-list small { margin-top: 2px; color: var(--ink-muted); font-size: .72rem; line-height: 1.4; }

.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.plan-card { padding: 25px; box-shadow: none; }
.plan-card.selected { border-color: #8994a5; box-shadow: inset 0 0 0 1px #8994a5; }
.plan-price { margin: 8px 0 20px; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; }
.plan-price span { color: var(--ink-muted); font-family: var(--font-body); font-size: .9rem; font-weight: 500; }
.feature-list { margin-bottom: 24px; }
.feature-list li { position: relative; padding-left: 23px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.billing-empty { margin-bottom: 12px; }

.site-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 30px; padding: 18px 2px 4px; color: #6d7889; border-top: 1px solid #d8dde4; font-size: .67rem; }
.site-footer span:last-child { display: flex; gap: 16px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.review-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 14px; padding: 18px; color: var(--white); background: linear-gradient(135deg, #050b12 0%, #111827 58%, #242a33 100%); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px rgba(3,7,13,.2); }
.review-overview-icon, .review-submit-icon { width: 46px; height: 46px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; }
.review-overview .eyebrow { color: rgba(255,255,255,.7); }
.review-overview h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1.12rem; }
.review-overview p:last-child { margin: 5px 0 0; color: rgba(255,255,255,.76); font-size: .88rem; }
.review-overview-meta { min-width: 210px; display: grid; justify-items: end; gap: 8px; color: var(--white); font-size: .78rem; text-align: right; }
.review-progress-track { width: 100%; height: 7px; overflow: hidden; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
.review-progress-track span { display: block; width: 0; height: 100%; background: var(--white); border-radius: inherit; transition: width .25s ease; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .6fr); align-items: start; gap: 14px; }
.review-checklist { list-style: none; display: grid; gap: 9px; margin: 18px 0 0; padding: 0; }
.review-checklist-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 11px 12px; background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.review-checklist-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); background: var(--white); border: 1px solid #9aa8b8; border-radius: 50%; font-size: .68rem; }
.review-checklist-item.incomplete .review-checklist-icon { color: #9a3412; background: #fff7ed; border-color: #d97706; }
.review-checklist-item > div { min-width: 0; display: grid; }
.review-checklist-item strong { color: var(--ink); font-family: var(--font-heading); font-size: .82rem; }
.review-checklist-item small { margin-top: 2px; color: var(--ink-muted); font-size: .74rem; }
.review-checklist-item .button { min-height: 36px; padding: 7px 12px; }
.review-submit-card { position: sticky; top: 18px; display: grid; justify-items: start; }
.review-submit-card .review-submit-icon { margin-bottom: 18px; color: var(--white); background: var(--surface-dark); border-color: var(--surface-dark); }
.review-submit-card h2 { margin: 0; font-family: var(--font-heading); font-size: 1.12rem; }
.review-submit-card > p:not(.eyebrow) { margin: 10px 0 18px; color: var(--ink-muted); font-size: .8rem; line-height: 1.55; }
.review-submit-card > small { margin-top: 12px; color: var(--ink-muted); font-size: .7rem; line-height: 1.5; }

.modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(3,5,8,.72); backdrop-filter: blur(5px); }
.modal { width: min(520px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 26px 80px rgba(0,0,0,.35); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; color: var(--white); background: linear-gradient(135deg, #000 0%, #111827 58%, #2f3744 100%); }
.modal-heading { min-width: 0; display: flex; align-items: center; gap: 13px; }
.modal-header-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: none; font-size: 1.3rem; }
.modal-header .eyebrow { color: rgba(255,255,255,.72); }
.modal-header h2 { margin: 0; color: var(--white); font-family: var(--font-heading); font-size: 1.15rem; }
.modal-header .icon-button { color: var(--white); }
.modal-header .icon-button:hover, .modal-header .icon-button:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.72); }
.modal-body { margin: 0; padding: 20px 24px 0; color: var(--ink); font-size: .82rem; font-weight: 400; line-height: 1.55; }
.modal-body p { margin: 0 0 12px; }
.issued-secret-value { display: block; overflow-wrap: anywhere; padding: 12px 14px; color: var(--ink); background: #eef2f6; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .82rem; user-select: all; }
.modal-body .modal-introduction { margin-bottom: 18px; color: var(--ink); font-family: var(--font-heading); font-size: .88rem; font-weight: 600; line-height: 1.5; }
.modal-body ul { margin: 0; padding-left: 20px; }
.modal-body li + li { margin-top: 7px; }
.modal-body .logo-spec-list { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.modal-body .logo-spec-list li { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 16px; align-items: baseline; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.modal-body .logo-spec-list strong { color: var(--ink); font-family: var(--font-heading); font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.modal-body .logo-spec-list span { color: var(--ink-soft); font-size: .8rem; font-weight: 500; }
.consent-preview { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.consent-preview-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px; background: #f7f9fc; }
.consent-preview-identity > img, .consent-preview-placeholder { width: 64px; height: 64px; display: grid; place-items: center; object-fit: contain; padding: 7px; color: var(--ink-muted); background: var(--white); border: 1px solid var(--line); border-radius: 50%; }
.consent-preview-identity strong { display: block; color: var(--ink); font-family: var(--font-heading); font-size: 1rem; }
.consent-preview-identity p { margin: 5px 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.45; }
.consent-preview-note { margin: 0 !important; padding: 12px 18px; color: var(--ink-muted); background: var(--white); border-top: 1px solid var(--line); font-size: .74rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding: 0 24px 24px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 250; display: grid; gap: 9px; width: min(360px, calc(100vw - 36px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; color: var(--white); background: #1b222d; border: 1px solid #424c5c; border-radius: var(--radius-sm); box-shadow: 0 14px 40px rgba(0,0,0,.25); font-size: .75rem; }
.toast.success i { color: #82ddb2; }
.toast.error i { color: #ff9ba6; }
.mobile-only { display: none; }

/* Keep explanatory and operational content readable across dense portal pages. */
.field input, .field select, .field textarea { font-size: var(--text-control); }
.field, .profile-section-nav span, .profile-collapsible-summary small, .section-save-status,
.profile-logo-row p, .profile-field-group-heading p, .support-contact-group legend,
.field-help-popover p, .load-error-banner p { font-size: var(--text-readable); }

.capability-overview p:last-child, .account-sync-overview p:last-child,
.integration-overview p:last-child, .credentials-overview p:last-child,
.test-overview p:last-child, .billing-overview p:last-child,
.account-sync-prerequisite p, .section-intro, .qr-learn-more-description,
.provisioning-flow p, .callback-contract strong, .callback-reference summary strong,
.callback-reference summary small, .callback-reference-body p { font-size: var(--text-readable); }

.profile-progress, .capability-overview-count small,
.account-sync-overview-count small, .integration-overview-count small,
.test-overview-meta strong, .test-overview-meta small { font-size: var(--text-readable); }

.capability-benefit, .capability-card-footer, .capability-configure-action,
.reference-panel summary > .qr-learn-more-action, .qr-lifecycle li,
.qr-terminal-states, .callback-reference summary > span:last-child { font-size: var(--text-readable); }

.credential-environment p:last-child, .credential-environment-tab,
.credential-value-label > span, .credential-value-label small,
.credential-usage-note p, .credential-metadata dt, .credential-metadata dd,
.credential-action-note, .credential-secret-guidance p,
.credentials-reference summary > span:last-child, .credentials-reference summary small,
.prerequisite-message { font-size: var(--text-readable); }

.test-meta, .test-step-list strong, .test-step-list small,
.qr-test-artifact strong, .qr-test-artifact small, .test-result strong,
.test-history-item strong, .test-history-item small, .test-history-item time,
.test-reference summary > span:last-child, .test-reference summary small,
.test-scenario p, .test-scenario .button { font-size: var(--text-readable); }
.qr-test-artifact span, .test-result span { font-size: .75rem; }

.billing-overview-meta strong, .billing-overview-meta small,
.billing-entitlements dt, .billing-detail-list dt,
.billing-entitlements dd, .billing-detail-list dd,
.billing-usage-list article > div:first-child, .billing-usage-list small,
.billing-usage-note, .payment-method-summary p, .billing-table,
.subscription-action-list strong, .subscription-action-list small { font-size: var(--text-readable); }
.billing-table th { font-size: .75rem; }

.modal-body, .modal-body .logo-spec-list strong, .modal-body .logo-spec-list span,
.consent-preview-identity p, .consent-preview-note, .toast { font-size: var(--text-readable); }

body[data-theme="azure"] { --black: #08284a; --black-soft: #071d34; --surface-light: #eff5fb; --accent-strong: #1475c9; }
body[data-theme="azure"] .sidebar { background: #061d34; }

@media (max-width: 1200px) {
    .integration-config-columns { grid-template-columns: 1fr; }
    .integration-config-column + .integration-config-column { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 1050px) {
    :root { --sidebar-width: 232px; }
    .profile-layout { grid-template-columns: 1fr; }
    .profile-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-grid.three-columns { grid-template-columns: 1fr 1fr; }
    .field-grid.three-columns .credential-field:last-child { grid-column: 1 / -1; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .credentials-workspace { grid-template-columns: 1fr; }
    .test-workspace { grid-template-columns: 1fr; }
    .billing-workspace { grid-template-columns: 1fr; }
    .review-layout { grid-template-columns: 1fr; }
    .review-submit-card { position: static; }
    .billing-invoices-card, .subscription-actions-card { grid-column: auto; }
}

@media (max-width: 820px) {
    .mobile-only { display: grid; }
    .sidebar { width: min(300px, 88vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(0,0,0,.35); }
    body.navigation-open .sidebar { transform: translateX(0); }
    .nav-backdrop { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(0,0,0,.55); border: 0; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
    body.navigation-open .nav-backdrop { opacity: 1; pointer-events: auto; }
    .main-content { margin-left: 0; padding: 20px 18px; }
    .page-header { align-items: center; }
    .navigation-toggle { color: var(--white); border: 1px solid #424b58; }
    .account-toggle { min-width: 48px; width: 48px; padding: 8px; }
    .account-toggle-copy, .account-toggle > i { display: none; }
    .account-state-dot { display: block; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric-card { min-height: 92px; }
    .home-grid, .content-grid, .plan-grid { grid-template-columns: 1fr; }
    .account-sync-columns { grid-template-columns: 1fr; }
    .account-sync-group + .account-sync-group { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
    .profile-side-column { grid-template-columns: 1fr; }
    .profile-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .capability-choice-list { grid-template-columns: 1fr; }
    .capability-card-footer { align-items: stretch; flex-direction: column; }
    .capability-configure-action { width: 100%; }
    .qr-reference-notes { grid-template-columns: 1fr; }
    .credential-environment { align-items: stretch; flex-direction: column; }
    .credential-environment-tabs { width: 100%; }
    .full-span { grid-column: auto; }
}

@media (max-width: 560px) {
    .main-content { padding: 16px 12px; background: linear-gradient(180deg, var(--black-soft) 0 266px, var(--surface-light) 266px); }
    #credentialsView .content-card > .full-width,
    #testView .content-card > .full-width,
    #billingView .content-card > .full-width {
        width: 100%;
        min-width: 0;
    }
    .page-header { min-height: 48px; margin-bottom: 12px; }
    .status-hero { grid-template-columns: auto minmax(0, 1fr); min-height: 128px; padding: 16px; }
    .client-logo-control { width: 72px; height: 86px; }
    .status-hero-icon { width: 52px; height: 52px; }
    .status-hero-icon { font-size: 1rem; }
    .status-hero-icon img { padding: 6px; }
    .logo-upload-badge { right: -5px; bottom: -5px; width: 23px; height: 23px; border-width: 2px; font-size: .52rem; }
    .logo-upload-label { top: 57px; left: 26px; font-size: .62rem; }
    .logo-remove-button { top: 59px; left: 26px; font-size: .6rem; }
    .status-hero-content > .section-heading { position: static; }
    .metric-grid { grid-template-columns: 1fr; }
    .callback-contract { grid-template-columns: 1fr; }
    .test-scenario { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .test-scenario .button { grid-column: 1 / -1; width: 100%; }
    .load-error-banner { grid-template-columns: auto minmax(0, 1fr); }
    .load-error-banner .button { grid-column: 1 / -1; width: 100%; }
    .field-grid, .field-grid.three-columns { grid-template-columns: 1fr; }
    .field-grid.three-columns .credential-field:last-child { grid-column: auto; }
    .field.full { grid-column: auto; }
    .profile-overview { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
    .profile-progress { grid-column: 1 / -1; width: 100%; text-align: left; }
    .profile-section-nav { grid-template-columns: 1fr 1fr; }
    .capability-overview { grid-template-columns: auto minmax(0, 1fr); }
    .capability-overview-count { grid-column: 1 / -1; text-align: left; }
    .integration-overview { grid-template-columns: auto minmax(0, 1fr); }
    .integration-overview-count { grid-column: 1 / -1; text-align: left; }
    .account-sync-overview { grid-template-columns: auto minmax(0, 1fr); }
    .account-sync-overview-count { grid-column: 1 / -1; text-align: left; }
    .account-sync-prerequisite { grid-template-columns: auto minmax(0, 1fr); }
    .account-sync-prerequisite .button { grid-column: 1 / -1; width: 100%; }
    .test-overview { grid-template-columns: auto minmax(0, 1fr); }
    .test-overview-meta { grid-column: 1 / -1; justify-items: start; text-align: left; }
    .test-result { grid-template-columns: 1fr; }
    .billing-overview { grid-template-columns: auto minmax(0, 1fr); }
    .billing-overview-meta { grid-column: 1 / -1; justify-items: start; text-align: left; }
    .review-overview { grid-template-columns: auto minmax(0, 1fr); }
    .review-overview-meta { grid-column: 1 / -1; width: 100%; justify-items: start; text-align: left; }
    .review-checklist-item { grid-template-columns: 34px minmax(0, 1fr); }
    .review-checklist-item .button { grid-column: 1 / -1; width: 100%; }
    .subscription-action-list > div { grid-template-columns: 1fr; }
    .subscription-action-list .button { width: 100%; }
    .billing-card-actions { display: grid; grid-template-columns: 1fr; }
    .billing-card-actions .button { width: 100%; }
    .credentials-overview { grid-template-columns: auto minmax(0, 1fr); }
    .credentials-overview .pill { grid-column: 1 / -1; justify-self: start; }
    .credential-environment-tabs, .credential-pair-grid { grid-template-columns: 1fr; }
    .credentials-reference summary { align-items: flex-start; }
    .credentials-reference summary > span:first-child > .type-icon { display: none; }
    .integration-section-summary { align-items: flex-start; }
    .integration-summary-meta { gap: 8px; }
    .qr-lifecycle { grid-template-columns: 1fr; gap: 10px; }
    .qr-lifecycle li { grid-template-columns: 30px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; }
    .qr-lifecycle li:not(:last-child)::after { top: 30px; bottom: -10px; left: 14px; width: 1px; height: auto; }
    .qr-terminal-states { text-align: left; }
    .profile-logo-row { grid-template-columns: auto minmax(0, 1fr); }
    .profile-logo-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .profile-logo-actions .button { width: 100%; }
    .profile-logo-actions .button:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .profile-collapsible-summary { align-items: flex-start; }
    .profile-collapsible-summary small { overflow-wrap: anywhere; }
    .profile-section-actions { align-items: stretch; flex-direction: column; }
    .profile-section-actions .button { width: 100%; }
    .section-save-status { min-height: 1em; }
    .form-actions { flex-wrap: wrap; bottom: 8px; }
    .save-status { width: 100%; }
    .form-actions .button { flex: 1; }
    .site-footer { flex-direction: column; }
    .data-field input, .data-field textarea, .data-field .password-field, .upas-select,
    .data-field .field-help, .data-field .field-error { width: 100%; }
    .country-autocomplete-panel, .geoapify-autocomplete-panel { width: 100%; }
    .data-field.has-context-help input, .data-field.has-context-help .upas-select { width: calc(100% - 36px); }
    .data-field.has-url-action input { width: calc(100% - 72px); }
    .data-field .reveal-button { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}