/* Iderwell product system v2 — public, workspace and device-preview styles. */
:root {
  --v2-ink: #121318;
  --v2-ink-2: #272830;
  --v2-canvas: #f5f4ef;
  --v2-paper: #ffffff;
  --v2-line: #deddd7;
  --v2-muted: #6d6e75;
  --v2-accent: #0078d4;
  --v2-accent-soft: #eef7fe;
  --v2-success: #176f50;
  --v2-warning: #b77521;
  --v2-danger: #b65353;
  --v2-font: Inter, "SF Pro Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --v2-display: Inter, "SF Pro Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.brand-lockup { display: inline-flex; width: auto; height: 32px; align-items: center; color: inherit; }
.brand-lockup img { width: 114px; height: 32px; object-fit: contain; }
.brand-lockup.is-compact img { width: 32px; }

.iderwell-v2 { font-family: var(--v2-font); }
.iderwell-v2 .product-kicker,
.seo-shell main > span { color: var(--v2-accent); font-size: 11px; font-weight: 700; letter-spacing: .15em; }

/* Crawlable first paint. JavaScript replaces this with the full public page. */
.seo-shell { min-height: 100vh; padding: 24px max(24px, calc((100vw - 1180px) / 2)); background: var(--v2-canvas); color: var(--v2-ink); }
.seo-shell > header { display: flex; align-items: center; justify-content: space-between; }
.seo-shell > header a { color: var(--v2-ink); font-size: 14px; text-decoration: none; }
.seo-shell main { max-width: 850px; padding: clamp(100px, 16vh, 190px) 0 80px; }
.seo-shell h1 { max-width: 800px; margin: 20px 0; font-family: var(--v2-display); font-size: clamp(54px, 8vw, 105px); letter-spacing: -.075em; line-height: .92; }
.seo-shell main > p { max-width: 650px; color: var(--v2-muted); font-size: 19px; }
.seo-shell main > a { display: inline-block; margin-top: 20px; padding: 13px 20px; border-radius: 8px; background: var(--v2-ink); color: white; text-decoration: none; }
.seo-shell section { max-width: 700px; margin-top: 100px; border-top: 1px solid var(--v2-line); }

/* Public website */
.iderwell-public { overflow: clip; background: var(--v2-canvas); color: var(--v2-ink); }
.iderwell-public .page-width { width: min(1180px, calc(100% - 48px)); }
.iderwell-public .public-header { position: absolute; inset: 0 0 auto; z-index: 20; border: 0; background: transparent; box-shadow: none; }
.iderwell-public .public-nav { height: 86px; }
.iderwell-public .public-nav nav { display: flex; gap: 32px; }
.iderwell-public .public-nav nav a,
.iderwell-public .public-actions .text-link { color: #4c4d54; font-size: 13px; font-weight: 620; text-decoration: none; }
.iderwell-public .public-nav nav a:hover,
.iderwell-public .public-actions .text-link:hover { color: var(--v2-ink); }
.iderwell-public .button { min-height: 42px; border-radius: 8px; box-shadow: none; font-size: 13px; font-weight: 700; }
.iderwell-public .button-primary { border-color: var(--v2-ink); background: var(--v2-ink); color: #fff; }
.iderwell-public .button-primary:hover { border-color: #2d2e35; background: #2d2e35; transform: translateY(-1px); }
.iderwell-public .button-secondary { border-color: #c9c8c2; background: rgba(255,255,255,.42); color: var(--v2-ink); }
.iderwell-public .button-secondary:hover { border-color: var(--v2-ink); background: white; }

.product-hero { position: relative; min-height: 1080px; padding-top: 168px; background: radial-gradient(circle at 50% 38%, rgba(103,87,217,.10), transparent 34%), var(--v2-canvas); }
.product-hero::before { position: absolute; inset: 0; content: ""; opacity: .35; pointer-events: none; background-image: linear-gradient(rgba(18,19,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(18,19,24,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black 0, transparent 70%); }
.product-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.product-hero h1 { max-width: 1100px; margin: 21px auto 24px; font-family: var(--v2-display); font-size: clamp(66px, 7.5vw, 104px); font-weight: 680; letter-spacing: -.078em; line-height: .9; }
.product-hero-copy > p { max-width: 660px; margin: 0; color: #5e5f66; font-size: 19px; line-height: 1.62; }
.product-hero .hero-actions { display: flex; gap: 10px; margin-top: 34px; }
.product-hero .button-large { min-height: 52px; padding-inline: 22px; }
.product-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 36px 0 0; padding: 0; color: #77777d; font-size: 11px; font-weight: 650; list-style: none; }
.product-proof li { display: flex; align-items: center; }
.product-proof li:not(:last-child)::after { width: 3px; height: 3px; margin: 0 13px; border-radius: 50%; background: #aaa9a4; content: ""; }

.product-hero-stage { position: relative; z-index: 2; margin-top: 76px; perspective: 1500px; }
.preview-browser { overflow: hidden; border: 1px solid #bebdc3; border-radius: 16px; background: #fff; box-shadow: 0 48px 110px rgba(27,24,48,.18), 0 4px 12px rgba(20,20,25,.08); transform: rotateX(2deg); transform-origin: center top; }
.preview-browser-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 43px; padding: 0 16px; border-bottom: 1px solid #e5e4e2; background: #f7f7f5; }
.preview-browser-bar > span { display: flex; gap: 6px; }
.preview-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d7d6d2; }
.preview-browser-bar small { color: #8d8d92; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.preview-browser-bar b { justify-self: end; color: #a1a0a5; font-size: 9px; font-weight: 550; }
.preview-workspace { display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 610px; }
.preview-workspace > aside { position: relative; display: flex; flex-direction: column; padding: 22px 14px 18px; background: #121318; color: #a8a8af; }
.preview-brand { margin: 0 8px 29px; transform: scale(.72); transform-origin: left center; }
.preview-workspace > aside > strong { margin: 0 8px 22px; color: #fff; font-size: 12px; }
.preview-workspace aside nav { display: grid; gap: 3px; }
.preview-workspace aside nav span,
.preview-settings { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 10px; border-radius: 6px; font-size: 10px; }
.preview-workspace aside nav span.is-active { background: #292934; color: #fff; }
.preview-workspace aside nav small { margin: 13px 10px 4px; color: #68686f; font-size: 7px; letter-spacing: .13em; }
.preview-workspace aside .icon { width: 13px; }
.preview-settings { margin-top: auto; border-top: 1px solid #2c2d33; border-radius: 0; }
.preview-workspace > section { background: #f6f5f1; }
.preview-workspace > section > header { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 28px; border-bottom: 1px solid #dfded8; }
.preview-workspace > section > header small { color: #919096; font-size: 7px; letter-spacing: .12em; }
.preview-workspace > section > header h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.04em; }
.preview-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--v2-accent-soft); color: var(--v2-accent); font-size: 9px; font-weight: 700; }
.preview-dashboard { padding: 26px 28px; }
.preview-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.preview-status span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.preview-status .icon { width: 13px; color: var(--v2-accent); }
.preview-status small { color: #929197; font-size: 9px; }
.preview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #deddd8; border-radius: 9px; background: #fff; }
.preview-metrics article { display: grid; gap: 5px; min-height: 112px; padding: 20px; border-left: 1px solid #e6e5e1; }
.preview-metrics article:first-child { border-left: 0; }
.preview-metrics small { color: #88878d; font-size: 7px; letter-spacing: .08em; }
.preview-metrics strong { font-size: 19px; letter-spacing: -.04em; }
.preview-metrics span { color: #8a8990; font-size: 8px; }
.preview-dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; margin-top: 14px; }
.preview-chart,.preview-feed { min-height: 265px; padding: 19px; border: 1px solid #deddd8; border-radius: 9px; background: #fff; }
.preview-chart header,.preview-feed header { display: flex; align-items: center; justify-content: space-between; }
.preview-chart header div { display: grid; gap: 3px; }
.preview-chart header small,.preview-feed header small { color: #8c8b91; font-size: 7px; letter-spacing: .08em; }
.preview-chart header strong,.preview-chart header b { font-size: 11px; }
.chart-bars { display: flex; align-items: end; gap: 11px; height: 174px; padding: 20px 5px 0; border-bottom: 1px solid #ebeae7; background: repeating-linear-gradient(to bottom, transparent 0 43px, #f0efec 44px); }
.chart-bars i { flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: linear-gradient(to top,#0078d4,#50a8e8); }
.preview-feed > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; padding: 16px 0; border-bottom: 1px solid #efeeeb; }
.preview-feed > div > i { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-success); }
.preview-feed > div span { display: grid; gap: 2px; }
.preview-feed > div strong { font-size: 9px; }
.preview-feed > div small { color: #919096; font-size: 7px; }
.preview-feed > div b,.preview-feed header b { color: #5f5e65; font-size: 8px; }
.preview-empty-state { display: flex; min-height: 175px; align-items: center; justify-content: center; gap: 11px; color: #a3a2a7; text-align: left; }
.preview-empty-state > .icon { width: 20px; color: #79beef; }
.preview-empty-state span { display: grid; gap: 4px; }
.preview-empty-state strong { color: #64646b; font-size: 10px; }
.preview-empty-state small { color: #99989e; font-size: 8px; }
.preview-feed > .preview-feed-empty { display: flex; grid-template-columns: none; min-height: 175px; border-bottom: 0; }
.preview-feed > .preview-feed-empty > .icon { width: 20px; height: 20px; border-radius: 0; background: transparent; color: #79beef; }

.product-clarity { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px; padding-block: 140px; }
.product-clarity h2 { max-width: 760px; margin: 14px 0 0; font-size: clamp(45px,6vw,76px); letter-spacing: -.066em; line-height: .98; }
.product-clarity > p { margin: 0; color: var(--v2-muted); font-size: 17px; line-height: 1.65; }

.product-showcase { padding-block: 145px; }
.product-showcase-dark { overflow: hidden; background: #121318; color: #f5f4ef; }
.product-showcase-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(60px,9vw,130px); }
.product-showcase-grid > * { min-width: 0; }
.product-showcase-copy h2 { margin: 18px 0 24px; font-size: clamp(50px,6.4vw,82px); letter-spacing: -.07em; line-height: .93; }
.product-showcase-copy > p { max-width: 500px; margin: 0; color: #a9a8ae; font-size: 17px; line-height: 1.66; }
.product-network .product-showcase-copy > p { color: var(--v2-muted); }
.product-showcase-copy ul { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.product-showcase-copy li { display: flex; align-items: center; gap: 11px; color: #dad9de; font-size: 13px; }
.product-network .product-showcase-copy li { color: #45464d; }
.product-showcase-copy li .icon { width: 16px; color: #50a8e8; }

.sales-device-stage { position: relative; min-height: 680px; }
.marketing-phone,.flagship-device { position: absolute; width: 310px; height: 650px; overflow: hidden; border: 7px solid #292a31; border-radius: 48px; background: #0c0d11; box-shadow: 0 50px 100px rgba(0,0,0,.34), inset 0 0 0 1px #4a4b53; }
.marketing-phone.portal-phone { left: 4%; top: 0; z-index: 2; transform: rotate(-4deg); }
.marketing-phone.ussd-phone { right: 1%; top: 54px; transform: rotate(5deg); }
.device-island,.flagship-island { position: absolute; top: 10px; left: 50%; z-index: 5; width: 92px; height: 25px; border-radius: 18px; background: #090a0c; transform: translateX(-50%); }
.marketing-screen,.ussd-marketing-screen,.flagship-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 39px; background: #f8f7f3; color: #17181d; }
.marketing-status,.flagship-status { position: relative; z-index: 4; display: flex; justify-content: space-between; padding: 15px 23px 8px; font-size: 8px; font-weight: 700; }
.marketing-screen > header { display: grid; justify-items: center; padding: 27px 22px 19px; text-align: center; }
.marketing-screen > header > span { display: grid; width: 52px; height: 52px; margin-bottom: 10px; place-items: center; border-radius: 16px; background: var(--v2-accent); color: white; font-size: 14px; font-weight: 700; }
.marketing-screen > header small { color: #949399; font-size: 7px; letter-spacing: .12em; }
.marketing-screen > header strong { margin-top: 2px; font-size: 20px; letter-spacing: -.04em; }
.marketing-screen > header p { margin: 6px 0 0; color: #77777d; font-size: 9px; }
.marketing-packages { display: grid; gap: 8px; padding: 0 17px; }
.marketing-packages article { display: flex; align-items: center; justify-content: space-between; padding: 13px; border: 1px solid #dedde0; border-radius: 10px; background: white; }
.marketing-packages article.is-selected { border-color: var(--v2-accent); box-shadow: 0 0 0 2px rgba(103,87,217,.10); }
.marketing-packages span { display: grid; gap: 3px; }
.marketing-packages strong { font-size: 10px; }
.marketing-packages small { color: #88878d; font-size: 8px; }
.marketing-packages b { font-size: 10px; }
.marketing-action { display: flex; width: calc(100% - 34px); min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin: 13px 17px; border-radius: 9px; background: var(--v2-accent); color: white; font-size: 9px; font-weight: 700; }
.marketing-action .icon { width: 12px; }
.marketing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 17px; }
.marketing-options span { padding: 9px 5px; border: 1px solid #e2e1de; border-radius: 7px; color: #65656b; font-size: 7px; text-align: center; }
.marketing-powered { display: block; margin-top: 33px; color: #aaa9ae; font-size: 7px; text-align: center; }
.ussd-marketing-screen { background: linear-gradient(145deg,#7771a4,#23283b 55%,#13151d); color: white; }
.ussd-dialog { position: absolute; inset: auto 12px 22px; overflow: hidden; border-radius: 18px; background: rgba(252,252,253,.95); color: #17181d; box-shadow: 0 18px 50px rgba(0,0,0,.32); }
.ussd-dialog > small { display: block; padding: 18px 18px 8px; font-size: 10px; font-weight: 700; }
.ussd-dialog > p { margin: 0; padding: 5px 18px; font-size: 11px; line-height: 1.8; }
.ussd-dialog > div { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1px solid #dedde0; }
.ussd-dialog > div span { display: grid; min-height: 45px; place-items: center; border-left: 1px solid #dedde0; color: var(--v2-accent); font-size: 10px; font-weight: 700; }
.ussd-dialog > div span:first-child { border-left: 0; }

.product-network { background: #f5f4ef; }
.product-network .product-showcase-grid { grid-template-columns: 1.2fr .8fr; }
.network-console { overflow: hidden; border: 1px solid #d7d6d1; border-radius: 14px; background: white; box-shadow: 0 30px 80px rgba(30,29,38,.12); }
.network-console > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 25px; border-bottom: 1px solid #e5e4e0; }
.network-console > header > div { display: flex; align-items: center; gap: 13px; }
.network-console > header > div > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; background: var(--v2-accent-soft); color: var(--v2-accent); }
.network-console header small { display: block; color: #96959b; font-size: 8px; letter-spacing: .1em; }
.network-console header strong { display: block; margin-top: 3px; font-size: 13px; }
.network-console > header > b { display: flex; align-items: center; gap: 9px; color: #85848a; font-size: 10px; }
.network-vitals { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #e5e4e0; }
.network-vitals article { padding: 21px 23px; border-left: 1px solid #e5e4e0; }
.network-vitals article:first-child { border-left: 0; }
.network-vitals small { display: block; color: #919096; font-size: 7px; letter-spacing: .09em; }
.network-vitals strong { display: block; margin-top: 6px; font-size: 18px; letter-spacing: -.04em; }
.network-graph { padding: 23px 25px 6px; }
.network-graph > span { color: #6f6f75; font-size: 10px; }
.network-graph svg { width: 100%; height: auto; margin-top: 8px; }
.network-reading { padding: 25px; }
.network-reading > header { display: flex; align-items: center; justify-content: space-between; }
.network-reading > header span { color: #6f6f75; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.network-reading > header small { color: #96959b; font-size: 8px; }
.network-reading > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.network-reading article { padding: 18px; border: 1px solid #e1e0dc; border-radius: 9px; background: #f8f7f3; }
.network-reading article small,.network-reading article strong { display: block; }
.network-reading article small { color: #8d8c92; font-size: 7px; letter-spacing: .07em; }
.network-reading article strong { margin-top: 8px; font-size: 19px; letter-spacing: -.04em; }
.network-reading > p { margin: 12px 0 0; color: #96959b; font-size: 8px; }
.network-console > footer { display: flex; gap: 23px; padding: 15px 25px; border-top: 1px solid #e5e4e0; color: #6f6f75; font-size: 8px; }
.network-console > footer span { display: flex; align-items: center; gap: 6px; }
.network-console > footer i { width: 5px; height: 5px; border-radius: 50%; background: #b7b6bb; }

.product-capabilities { padding-block: 145px; }
.product-capabilities header { display: grid; grid-template-columns: .7fr 1.3fr; align-items: end; }
.product-capabilities h2 { max-width: 780px; margin: 0; font-size: clamp(48px,6vw,76px); letter-spacing: -.065em; line-height: .98; }
.product-capabilities > div { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 70px; border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
.product-capabilities article { min-height: 240px; padding: 27px 25px; border-left: 1px solid var(--v2-line); }
.product-capabilities article:first-child { border-left: 0; }
.product-capabilities article > span { color: var(--v2-accent); font-size: 10px; font-weight: 700; }
.product-capabilities h3 { margin: 68px 0 10px; font-size: 18px; letter-spacing: -.035em; }
.product-capabilities p { margin: 0; color: var(--v2-muted); font-size: 13px; line-height: 1.6; }
.product-trust { padding-block: 130px; background: var(--v2-accent); color: white; }
.product-trust .page-width { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 90px; }
.product-trust .product-kicker { color: #dcd7ff; }
.product-trust h2 { margin: 18px 0 0; font-size: clamp(54px,7vw,88px); letter-spacing: -.07em; line-height: .92; }
.product-trust p { max-width: 510px; margin: 0 0 8px; color: #e5e2ff; font-size: 17px; line-height: 1.67; }
.product-close { display: flex; align-items: end; justify-content: space-between; gap: 70px; padding-block: 145px; }
.product-close h2 { margin: 15px 0 12px; font-size: clamp(50px,6vw,76px); letter-spacing: -.065em; }
.product-close p { margin: 0; color: var(--v2-muted); }

/* Public billing explains the model without publishing a fixed price. */
.billing-public { background: var(--v2-canvas); }
.billing-hero { display: grid; min-height: 760px; align-content: center; justify-items: center; padding-top: 110px; text-align: center; }
.billing-hero h1 { max-width: 900px; margin: 20px 0 24px; font-size: clamp(66px,7.5vw,104px); font-weight: 680; letter-spacing: -.078em; line-height: .9; }
.billing-hero > p { max-width: 650px; margin: 0; color: var(--v2-muted); font-size: 18px; line-height: 1.65; }
.billing-hero .hero-actions { display: flex; gap: 10px; margin-top: 32px; }
.billing-flow { padding-block: 135px; border-top: 1px solid var(--v2-line); }
.billing-flow > header { display: grid; grid-template-columns: .6fr 1.4fr; align-items: end; }
.billing-flow h2 { max-width: 790px; margin: 0; font-size: clamp(48px,6vw,76px); letter-spacing: -.065em; line-height: .96; }
.billing-flow > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 65px; border-block: 1px solid var(--v2-line); }
.billing-flow article { min-height: 250px; padding: 27px 25px; border-left: 1px solid var(--v2-line); }
.billing-flow article:first-child { border-left: 0; }
.billing-flow article > span { color: var(--v2-accent); font-size: 10px; font-weight: 700; }
.billing-flow h3 { margin: 70px 0 10px; font-size: 19px; letter-spacing: -.035em; }
.billing-flow p { margin: 0; color: var(--v2-muted); font-size: 13px; line-height: 1.65; }
.billing-boundary { padding-block: 130px; background: #121318; color: #f5f4ef; }
.billing-boundary > div { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 90px; }
.billing-boundary .product-kicker { color: #bcb4ff; }
.billing-boundary h2 { max-width: 650px; margin: 18px 0 0; font-size: clamp(48px,6vw,76px); letter-spacing: -.066em; line-height: .96; }
.billing-boundary dl { margin: 0; border-top: 1px solid #34353c; }
.billing-boundary dl > div { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid #34353c; }
.billing-boundary dt { color: #f1f0ec; font-size: 13px; font-weight: 700; }
.billing-boundary dd { margin: 0; color: #a9a8af; font-size: 13px; line-height: 1.6; }
.billing-faq { padding-block: 135px; }
.billing-faq > header { display: grid; grid-template-columns: .65fr 1.35fr; align-items: end; }
.billing-faq h2 { max-width: 720px; margin: 0; font-size: clamp(45px,5.7vw,70px); letter-spacing: -.064em; line-height: .98; }
.billing-faq > div { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; border-top: 1px solid var(--v2-line); }
.billing-faq details { padding: 24px 0; border-bottom: 1px solid var(--v2-line); }
.billing-faq details:nth-child(odd) { padding-right: 30px; }
.billing-faq details:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--v2-line); }
.billing-faq summary { color: var(--v2-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.billing-faq p { margin: 12px 0 0; color: var(--v2-muted); font-size: 13px; line-height: 1.65; }
.iderwell-public .public-footer { border: 0; background: #121318; color: #f5f4ef; }
.iderwell-public .footer-grid { grid-template-columns: 1.5fr repeat(3,1fr); gap: 50px; padding-block: 78px 55px; }
.iderwell-public .public-footer p,
.iderwell-public .public-footer a,
.iderwell-public .footer-base { color: #96969d; }
.iderwell-public .public-footer a:hover { color: white; }

/* Account access follows the same product language and restrained palette. */
.auth-page.iderwell-v2 { background: var(--v2-canvas); color: var(--v2-ink); }
.auth-page.iderwell-v2 .auth-story { position: relative; overflow: hidden; background: #121318; }
.auth-page.iderwell-v2 .auth-story::after { position: absolute; right: -30%; bottom: -32%; width: 620px; height: 620px; border: 1px solid rgba(151,139,244,.20); border-radius: 50%; box-shadow: 0 0 0 90px rgba(103,87,217,.05),0 0 0 180px rgba(103,87,217,.03); content: ""; pointer-events: none; }
.auth-page.iderwell-v2 .auth-story > * { position: relative; z-index: 1; }
.auth-page.iderwell-v2 .auth-story h2 { max-width: 560px; color: #f5f4ef; font-size: clamp(54px,5vw,78px); font-weight: 660; letter-spacing: -.07em; line-height: .92; }
.auth-page.iderwell-v2 .auth-story > div > p { max-width: 500px; color: #aaa9b0; font-size: 15px; line-height: 1.65; }
.auth-page.iderwell-v2 .auth-flow span { border-color: #34353d; border-radius: 7px; background: #1b1c22; color: #d9d8de; }
.auth-page.iderwell-v2 .auth-flow span .icon { color: #9b90ef; }
.auth-page.iderwell-v2 .auth-main { background: var(--v2-canvas); }
.auth-page.iderwell-v2 .auth-card h1 { color: var(--v2-ink); font-size: 42px; letter-spacing: -.055em; }
.auth-page.iderwell-v2 .auth-card > p,
.auth-page.iderwell-v2 .auth-card > footer { color: var(--v2-muted); }
.auth-page.iderwell-v2 .auth-form input { border-color: #d6d5cf; border-radius: 8px; background: #fff; }
.auth-page.iderwell-v2 .auth-form input:focus { border-color: var(--v2-accent); box-shadow: 0 0 0 3px rgba(103,87,217,.1); }
.auth-page.iderwell-v2 .button-primary { border-color: var(--v2-ink); background: var(--v2-ink); }

/* Workspace */
.route-app { --cream: #f4f7fa; --paper: #fff; --ink: #172435; --ink-2: #334357; --muted: #5e6d80; --soft: #7b8899; --line: #d8e0e9; --line-strong: #bdc9d6; --green: #0078d4; --green-dark: #084a83; --green-bright: #50a8e8; --mint: #eef7fe; --mint-2: #f6faff; --blue: #0078d4; --violet: #0078d4; --sidebar: #05243f; --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --shadow-sm: none; --shadow: 0 18px 46px rgba(5,36,63,.16); }
.route-app .dashboard-shell { grid-template-columns: 238px minmax(0,1fr); min-height: 100vh; background: #f5f4ef; }
.route-app .app-sidebar { display: flex; flex-direction: column; min-height: 100vh; padding: 22px 13px 14px; background: #121318; color: #a6a6ad; }
.route-app .sidebar-brand { padding: 3px 10px 21px; }
.route-app .sidebar-brand .brand-lockup { height: 27px; }
.route-app .sidebar-brand .brand-lockup img { width: 98px; height: 27px; }
.route-app .workspace-card { margin: 0 2px 18px; padding: 11px 9px; border: 1px solid #2d2e35; border-radius: 8px; background: #191a20; }
.route-app .workspace-card strong { color: #f2f1ed; font-size: 11px; }
.route-app .workspace-card small { color: #818188; font-size: 9px; }
.route-app .workspace-avatar { border-radius: 7px; background: #eeeaff; color: var(--v2-accent); }
.route-app .sidebar-groups { align-content: start; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; }
.route-app .sidebar-groups::-webkit-scrollbar { display: none; }
.route-app .app-sidebar nav { gap: 18px; }
.route-app .sidebar-group { gap: 4px; }
.route-app .sidebar-group h2 { padding-inline: 10px; color: #616168; font-size: 7px; letter-spacing: .16em; }
.route-app .sidebar-group-links { gap: 2px; }
.route-app .app-sidebar nav a,
.route-app .sidebar-secondary a { min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; color: #a8a8af; font-size: 10px; font-weight: 620; }
.route-app .app-sidebar nav a:hover,
.route-app .sidebar-secondary a:hover { background: #202127; color: white; }
.route-app .app-sidebar nav a.active,
.route-app .sidebar-secondary a.active { border: 0; background: #124b79; box-shadow: inset 2px 0 #50a8e8; color: #fff; }
.route-app .app-sidebar nav a.active .icon,
.route-app .sidebar-secondary a.active .icon { color: #a99fff; }
.route-app .sidebar-secondary { flex: 0 0 auto; display: grid; gap: 2px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #2c2d33; }
.route-app .app-main { min-width: 0; background: #f5f4ef; }
.route-app .app-header { min-height: 72px; padding: 0 30px; border-color: #deddd8; background: rgba(245,244,239,.92); backdrop-filter: blur(16px); }
.route-app .app-breadcrumb { color: #929198; font-size: 7px; letter-spacing: .15em; }
.route-app .app-header h1 { color: #16171c; font-size: 19px; letter-spacing: -.045em; }
.route-app .icon-button,.route-app .profile-chip,.route-app .top-search { border-color: #d5d4cf; border-radius: 7px; background: rgba(255,255,255,.54); box-shadow: none; }
.route-app .app-content { padding: 34px 38px 65px; }
.route-app .app-footer { padding-inline: 38px; border-color: #deddd8; }
.route-app .button { border-radius: 7px; box-shadow: none; }
.route-app .button-primary { border-color: #17181d; background: #17181d; color: white; }
.route-app .button-primary:not(:disabled):hover { border-color: #303139; background: #303139; transform: translateY(-1px); }
.route-app .button-secondary { border-color: #c7c6c1; background: white; color: #202127; }
.route-app .surface { border-color: #deddd8; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.route-app .metric-card { border-color: #deddd8; border-radius: 10px; box-shadow: none; }

.route-app .iderwell-today { gap: 22px; }
.route-app .iderwell-today-intro { align-items: center; padding: 0 0 22px; }
.route-app .iderwell-today-intro h2 { margin: 7px 0 4px; font-size: 31px; letter-spacing: -.055em; line-height: 1; }
.route-app .iderwell-today-intro p { font-size: 12px; }
.route-app .iderwell-today-intro time { display: flex; align-items: center; gap: 8px; font-size: 9px; }
.route-app .iderwell-today-intro time i { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-success); box-shadow: 0 0 0 4px rgba(29,138,98,.1); }
.route-app .iderwell-today-stats { grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin: 0; border: 1px solid #deddd8; border-radius: 10px; background: white; }
.route-app .iderwell-today-stats > div,
.route-app .iderwell-today-stats > div:first-child { min-height: 116px; padding: 20px 22px; }
.route-app .iderwell-today-stats dt { font-size: 8px; }
.route-app .iderwell-today-stats dd { margin: 9px 0 3px; font-size: 24px; }
.route-app .iderwell-today-stats small { font-size: 9px; }
.route-app .iderwell-today-panels { gap: 18px; }
.route-app .iderwell-today-panel { padding: 22px; border: 1px solid #deddd8; border-radius: 10px; background: white; }
.route-app .iderwell-today-panel > header { margin-bottom: 15px; }
.route-app .iderwell-today-panel h2 { font-size: 17px; }
.route-app .iderwell-status-list > div { min-height: 56px; }
.route-app .iderwell-next-step { padding: 22px 24px; border-radius: 10px; background: #17181d; }

.route-app .overview-insights-grid,
.route-app .overview-operations-grid,
.route-app .overview-utility-grid { display: grid; gap: 18px; min-width: 0; }
.route-app .overview-insights-grid { grid-template-columns: minmax(0,1.65fr) minmax(280px,.75fr); }
.route-app .overview-operations-grid { grid-template-columns: minmax(0,1.35fr) minmax(320px,.85fr); }
.route-app .overview-utility-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); }
.route-app .overview-insights-grid > *,
.route-app .overview-operations-grid > *,
.route-app .overview-utility-grid > * { min-width: 0; }
.route-app .iderwell-today-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.route-app .iderwell-today-panel > header > a { display: inline-flex; align-items: center; gap: 6px; color: #4d4e55; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.route-app .iderwell-today-panel > header > a:hover { color: #111217; }
.route-app .iderwell-today-panel > header > a .icon { width: 12px; }
.overview-panel-total { display: grid; justify-items: end; gap: 2px; text-align: right; }
.overview-panel-total strong { color: #17181d; font-size: 16px; letter-spacing: -.035em; }
.overview-panel-total small { color: var(--v2-muted); font-size: 9px; }
.overview-chart { display: flex; align-items: stretch; gap: 11px; min-height: 205px; padding: 13px 4px 0; border-bottom: 1px solid #e8e7e2; background: repeating-linear-gradient(to bottom, transparent 0 50px, #efeee9 51px); }
.overview-chart-day { display: grid; flex: 1 1 0; grid-template-rows: minmax(0,1fr) 25px; align-items: end; min-width: 0; }
.overview-chart-day > span { display: flex; align-items: end; justify-content: center; height: 100%; }
.overview-chart-day i { display: block; width: min(38px,72%); height: var(--bar-height); min-height: 0; border-radius: 5px 5px 1px 1px; background: linear-gradient(180deg,#50a8e8,#0078d4); box-shadow: inset 0 1px rgba(255,255,255,.18); }
.overview-chart-day small { align-self: center; overflow: hidden; color: #85858b; font-size: 8px; font-style: normal; font-weight: 650; text-align: center; text-overflow: ellipsis; }
.overview-breakdown-list { display: grid; gap: 17px; }
.overview-breakdown-list > div { display: grid; gap: 8px; }
.overview-breakdown-list > div > div { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.overview-breakdown-list span > strong,
.overview-breakdown-list span > small { display: block; }
.overview-breakdown-list strong { font-size: 10px; }
.overview-breakdown-list small { margin-top: 2px; color: var(--v2-muted); font-size: 8px; }
.overview-breakdown-list b { color: #33343a; font-size: 10px; font-weight: 700; }
.overview-progress { overflow: hidden; height: 5px; border-radius: 999px; background: #eeede9; }
.overview-progress i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--v2-accent); }
.overview-payment-list { display: grid; }
.overview-payment-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 62px; padding: 9px 0; border-top: 1px solid #ecebe7; }
.overview-payment-row:first-child { border-top: 0; }
.overview-row-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: var(--v2-accent-soft); color: var(--v2-accent); }
.overview-row-symbol .icon { width: 14px; }
.overview-payment-row > span:nth-child(2) { min-width: 0; }
.overview-payment-row > span:nth-child(2) strong,
.overview-payment-row > span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-payment-row > span:nth-child(2) strong { color: #23242a; font-size: 10px; }
.overview-payment-row > span:nth-child(2) small { margin-top: 3px; color: var(--v2-muted); font-size: 8px; }
.overview-payment-row > span:last-child { display: grid; justify-items: end; gap: 4px; }
.overview-payment-row > span:last-child > strong { color: #202126; font-size: 10px; }
.overview-payment-row .badge { font-size: 7px; }
.overview-network-note { margin: 13px 0 0; padding-top: 13px; border-top: 1px solid #ecebe7; color: var(--v2-warning); font-size: 9px; font-weight: 680; }
.overview-network-note.is-clear { color: var(--v2-success); }
.overview-popular-packages ol { display: grid; margin: 0; padding: 0; list-style: none; }
.overview-popular-packages li { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 55px; border-top: 1px solid #ecebe7; }
.overview-popular-packages li:first-child { border-top: 0; }
.overview-popular-packages li > b { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #f0eee9; color: #79797f; font-size: 8px; }
.overview-popular-packages li span { min-width: 0; }
.overview-popular-packages li span strong,
.overview-popular-packages li span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-popular-packages li span strong { font-size: 10px; }
.overview-popular-packages li span small { margin-top: 2px; color: var(--v2-muted); font-size: 8px; }
.overview-popular-packages li > strong { font-size: 10px; }
.overview-quick-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.overview-quick-actions button { display: grid; grid-template-columns: 29px minmax(0,1fr) 13px; align-items: center; gap: 9px; min-height: 67px; padding: 10px; border: 1px solid #deddd8; border-radius: 8px; background: #faf9f6; color: #25262c; text-align: left; }
.overview-quick-actions button:not(:disabled):hover { border-color: #aaa4d8; background: #f5f2ff; }
.overview-quick-actions button:disabled { opacity: .5; cursor: not-allowed; }
.overview-quick-actions button > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: white; color: var(--v2-accent); }
.overview-quick-actions button > span .icon { width: 13px; }
.overview-quick-actions button > strong { align-self: end; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.overview-quick-actions button > small { grid-column: 2; align-self: start; overflow: hidden; color: var(--v2-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.overview-quick-actions button > .icon { grid-column: 3; grid-row: 1 / span 2; width: 11px; color: #a2a1a7; }

/* Daily operator workspaces: flat hierarchy, dense scanning and progressive detail. */
.route-app .operator-workspace { display: grid; gap: 18px; }
.route-app .operator-page-head { align-items: flex-end; margin: 0; padding: 0 0 4px; }
.route-app .operator-page-head h2 { margin: 7px 0 5px; color: #17181d; font-size: 31px; letter-spacing: -.055em; line-height: 1; }
.route-app .operator-page-head p { max-width: 610px; margin: 0; color: var(--v2-muted); font-size: 11px; line-height: 1.55; }
.route-app .operator-page-head .page-action-buttons { align-items: center; }
.route-app .operator-summary-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid #deddd8; border-radius: 10px; background: #fff; }
.route-app .operator-summary-strip > div { min-width: 0; min-height: 102px; padding: 18px 20px; border-left: 1px solid #e7e6e1; }
.route-app .operator-summary-strip > div:first-child { border-left: 0; }
.route-app .operator-summary-strip small,.route-app .operator-summary-strip strong,.route-app .operator-summary-strip p { display: block; }
.route-app .operator-summary-strip small { color: #7d7d84; font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.route-app .operator-summary-strip strong { margin-top: 8px; color: #1b1c21; font-size: 23px; letter-spacing: -.045em; }
.route-app .operator-summary-strip p { margin: 3px 0 0; overflow: hidden; color: #8a898f; font-size: 8px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.route-app .operator-table { padding: 0; overflow: hidden; }
.route-app .customer-directory-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 20px 21px 13px; }
.route-app .customer-directory-toolbar h2 { margin: 4px 0 0; color: #1d1e23; font-size: 17px; letter-spacing: -.035em; }
.route-app .customer-search-field { display: flex; align-items: center; gap: 8px; width: min(310px,100%); min-height: 40px; padding: 0 11px; border: 1px solid #d7d6d1; border-radius: 7px; background: #faf9f6; }
.route-app .customer-search-field .icon { width: 13px; color: #929198; }
.route-app .customer-search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #25262b; font-size: 10px; }
.route-app .customer-filter-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 21px 13px; border-bottom: 1px solid #e7e6e1; scrollbar-width: none; }
.route-app .customer-filter-tabs::-webkit-scrollbar { display: none; }
.route-app .customer-filter-tabs button { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #73737a; font-size: 9px; font-weight: 670; }
.route-app .customer-filter-tabs button small { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; background: #efeee9; color: #77777e; font-size: 7px; }
.route-app .customer-filter-tabs button[aria-pressed="true"] { border-color: #d7d3ee; background: #f0edff; color: #5748c8; }
.route-app .customer-filter-tabs button[aria-pressed="true"] small { background: #0078d4; color: #fff; }
.route-app .subscriber-table .table-wrap { padding: 0 21px 16px; }
.route-app .subscriber-table table { min-width: 1040px; }
.route-app .subscriber-table th { padding: 11px 9px 8px; color: #939299; font-size: 7px; letter-spacing: .08em; }
.route-app .subscriber-table td { padding: 13px 9px; color: #25262b; font-size: 9px; }
.route-app .subscriber-table th:last-child,.route-app .subscriber-table td:last-child { text-align: left; }
.route-app .subscriber-table .subscriber-identity { min-width: 180px; }
.route-app .subscriber-table .subscriber-identity > i { border-radius: 8px; background: #eef7fe; color: #0078d4; }
.route-app .subscriber-actions { min-width: 0; gap: 5px; }
.route-app .subscriber-actions .button { min-height: 29px; padding-inline: 8px; font-size: 8px; }
.route-app .customer-operation-history { margin-top: 7px; }
.route-app .customer-operation-history > summary { width: fit-content; color: #0078d4; font-size: 8px; font-weight: 700; cursor: pointer; }
.route-app .customer-operation-history ol { display: grid; gap: 8px; margin: 9px 0 0; padding: 9px 0 0; border-top: 1px solid #e8e7e2; list-style: none; }
.route-app .customer-operation-history li { display: grid; gap: 3px; min-width: 230px; }
.route-app .customer-operation-history li span { display: flex; justify-content: space-between; gap: 12px; }
.route-app .customer-operation-history li p,.route-app .customer-operation-history li small { margin: 0; color: #85848b; font-size: 7px; line-height: 1.4; }
.route-app .customer-managed-accesses { min-width: 165px; }
.route-app .customer-managed-accesses > summary { width: fit-content; color: #0078d4; font-size: 8px; font-weight: 700; cursor: pointer; }
.route-app .customer-managed-accesses > div { display: grid; gap: 8px; width: min(410px,65vw); margin-top: 9px; }
.route-app .customer-managed-accesses article { padding: 11px; border: 1px solid #deddd8; border-radius: 8px; background: #faf9f6; }
.route-app .customer-managed-accesses article > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.route-app .customer-managed-accesses article > header > span { display: grid; gap: 3px; min-width: 0; }
.route-app .customer-managed-accesses article > header strong { font-size: 9px; }
.route-app .customer-managed-accesses article > header small { overflow-wrap: anywhere; color: #85848b; font-size: 7px; }
.route-app .customer-access-allowance { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin: 9px 0; padding-top: 8px; border-top: 1px solid #e6e5e0; }
.route-app .customer-access-allowance strong { font-size: 9px; }
.route-app .customer-access-allowance small { color: #85848b; font-size: 7px; }
.route-app .customer-managed-accesses .subscriber-actions { margin-top: 8px; }
.route-app .customer-filter-empty { display: grid; justify-items: center; min-height: 190px; place-content: center; padding: 25px; text-align: center; }
.route-app .customer-filter-empty[hidden] { display: none; }
.route-app .customer-filter-empty > .icon { width: 22px; margin-bottom: 9px; color: #8b80dd; }
.route-app .customer-filter-empty strong { font-size: 13px; }
.route-app .customer-filter-empty p { margin: 4px 0 0; color: #88878d; font-size: 9px; }
.route-app .operator-history,.route-app .operator-explainer { padding: 0; overflow: hidden; }
.route-app .operator-history > summary,.route-app .operator-explainer > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 14px 18px; cursor: pointer; list-style: none; }
.route-app .operator-history > summary::-webkit-details-marker,.route-app .operator-explainer > summary::-webkit-details-marker { display: none; }
.route-app .operator-history > summary span,.route-app .operator-explainer > summary span { display: grid; gap: 2px; }
.route-app .operator-history > summary strong,.route-app .operator-explainer > summary strong { font-size: 11px; }
.route-app .operator-history > summary small,.route-app .operator-explainer > summary small { color: #85848b; font-size: 8px; }
.route-app .operator-history > summary > .icon,.route-app .operator-explainer > summary > .icon { width: 13px; color: #929198; transition: transform .18s ease; }
.route-app .operator-history[open] > summary > .icon,.route-app .operator-explainer[open] > summary > .icon { transform: rotate(180deg); }
.route-app .operator-history > div,.route-app .operator-explainer > div { padding: 0 18px 18px; border-top: 1px solid #e7e6e1; }
.route-app .operator-explainer > div > p { margin: 16px 0 0; color: #73737a; font-size: 9px; line-height: 1.55; }
.route-app .operator-explainer .subscriber-operation-notes { margin-top: 14px; }
.route-app .operator-explainer .subscriber-operation-notes article { padding: 13px 0; border: 0; border-left: 1px solid #e6e5e0; border-radius: 0; background: transparent; box-shadow: none; }
.route-app .operator-explainer .subscriber-operation-notes article:first-child { border-left: 0; }
.route-app .operator-explainer .subscriber-operation-notes article > .icon { background: #eef7fe; color: #0078d4; }
.route-app .subscriber-grant-note { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; padding: 13px; border: 1px solid #dcd8ef; border-radius: 8px; background: #f5f3ff; }
.route-app .subscriber-grant-note > .icon { width: 17px; color: #0078d4; }
.route-app .subscriber-grant-note strong { font-size: 10px; }
.route-app .subscriber-grant-note p { margin: 3px 0 0; color: #77767d; font-size: 9px; }
.route-app .credential-safety-details { margin-top: 4px; padding-top: 10px; border-top: 1px solid #d9d8d3; }
.route-app .credential-safety-details summary { color: #0078d4; font-size: 8px; font-weight: 700; cursor: pointer; }
.route-app .credential-safety-details p { margin: 7px 0 0; }

/* Sales activity: a compact daily ledger with detail available on demand. */
.route-app .report-stack { gap: 18px; }
.route-app .report-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; overflow: hidden; border: 1px solid #deddd8; border-radius: 10px; background: #fff; }
.route-app .report-metrics .metric-card { min-width: 0; min-height: 108px; padding: 17px 18px; border: 0; border-left: 1px solid #e7e6e1; border-radius: 0; background: transparent; box-shadow: none; }
.route-app .report-metrics .metric-card:first-child { border-left: 0; }
.route-app .report-metrics .metric-symbol { width: 30px; height: 30px; border-radius: 7px; background: #eef7fe; color: #0078d4; }
.route-app .report-metrics .metric-symbol .icon { width: 14px; }
.route-app .report-metrics .metric-card p { color: #7d7d84; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.route-app .report-metrics .metric-card strong { font-size: 21px; letter-spacing: -.04em; }
.route-app .report-metrics .metric-card small { overflow: hidden; color: #8a898f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.route-app .report-filters { grid-template-columns: minmax(230px,1.25fr) minmax(130px,.58fr) minmax(145px,.62fr) minmax(125px,.5fr) minmax(125px,.5fr) auto; gap: 10px; padding: 15px; }
.route-app .report-filters label { gap: 6px; color: #727279; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.route-app .report-filters label > small { color: #96959b; font-size: 7px; font-weight: 560; letter-spacing: 0; text-transform: none; }
.route-app .report-filters input,.route-app .report-filters select { min-height: 39px; padding: 8px 9px; border-color: #d8d7d2; border-radius: 7px; background: #faf9f6; font-size: 9px; }
.route-app .report-filters .report-clear { min-height: 39px; align-self: center; margin-top: 14px; }
.route-app .report-table { overflow: hidden; padding: 0; }
.route-app .report-table > .surface-head { margin: 0; padding: 19px 20px 13px; border-bottom: 1px solid #e7e6e1; }
.route-app .report-table > .surface-head h2 { margin-top: 4px; font-size: 17px; letter-spacing: -.035em; }
.route-app .report-table .table-wrap { padding: 0 14px; }
.route-app .report-table table { min-width: 870px; }
.route-app .report-table th { padding: 11px 9px 8px; color: #929198; font-size: 7px; letter-spacing: .07em; }
.route-app .report-table td { padding: 13px 9px; color: #25262b; font-size: 9px; white-space: normal; }
.route-app .report-table td:nth-child(1) { width: 23%; }
.route-app .report-table td:nth-child(2) { width: 22%; }
.route-app .report-table td:nth-child(3),.route-app .report-table td:nth-child(4) { width: 12%; }
.route-app .report-table td:nth-child(5) { width: 22%; }
.route-app .report-table .report-reference { display: block; margin-top: 7px; overflow-wrap: anywhere; font-size: 8px; }
.route-app .report-table .table-sub { margin-top: 3px; color: #85848b; font-size: 7px; line-height: 1.4; }
.route-app .report-router-attribution { max-width: 210px; }
.route-app .report-row-action .button { min-height: 31px; padding-inline: 9px; font-size: 8px; white-space: nowrap; }
.route-app .report-pager { padding: 13px 20px 17px; }
.route-app .report-caveat > div p + p { margin-top: 9px; }
.route-app .report-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 4px 1px 0; }
.route-app .report-section-head h2 { margin: 5px 0 3px; font-size: 21px; letter-spacing: -.045em; }
.route-app .report-section-head p,.route-app .report-section-head > small { margin: 0; color: #85848b; font-size: 8px; }
.route-app .report-breakdowns { display: grid; grid-template-columns: 1fr; gap: 8px; }
.route-app .report-breakdown { grid-column: auto; overflow: hidden; padding: 0; }
.route-app .report-breakdown > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px; padding: 12px 17px; cursor: pointer; list-style: none; }
.route-app .report-breakdown > summary::-webkit-details-marker { display: none; }
.route-app .report-breakdown > summary > span { display: grid; gap: 2px; }
.route-app .report-breakdown > summary strong { font-size: 11px; }
.route-app .report-breakdown > summary small { color: #8a898f; font-size: 8px; }
.route-app .report-breakdown > summary > .icon { width: 13px; color: #929198; transition: transform .18s ease; }
.route-app .report-breakdown[open] > summary > .icon { transform: rotate(180deg); }
.route-app .report-breakdown-body { padding: 0 15px 15px; border-top: 1px solid #e7e6e1; }
.route-app .report-breakdown-body .table-wrap { margin-top: 9px; }
.route-app .report-first-empty { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 17px; min-height: 240px; padding: 46px; place-content: center; }
.route-app .report-first-empty > .icon { width: 24px; color: #0078d4; }
.route-app .report-first-empty h3 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.route-app .report-first-empty p { margin: 5px 0 17px; color: #7d7d84; font-size: 10px; }
.route-app .report-first-empty span { display: flex; flex-wrap: wrap; gap: 8px; }

/* Router fleet: one calm status surface, dense rows and complete mobile cards. */
.route-app .router-fleet-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; overflow: hidden; border: 1px solid #deddd8; border-radius: 10px; background: #fff; }
.route-app .router-fleet-summary > article { min-height: 98px; padding: 17px 19px; border: 0; border-left: 1px solid #e7e6e1; border-radius: 0; background: transparent; box-shadow: none; }
.route-app .router-fleet-summary > article:first-child { border-left: 0; }
.route-app .router-summary-icon { width: 34px; height: 34px; border-radius: 8px; }
.route-app .router-summary-icon .icon { width: 15px; }
.route-app .router-fleet-summary small { font-size: 8px; }
.route-app .router-fleet-summary strong { font-size: 21px; }
.route-app .router-fleet-summary p { font-size: 8px; }
.route-app .router-fleet-accounting-alert { overflow: hidden; padding: 0; }
.route-app .router-fleet-accounting-alert > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 11px 16px; cursor: pointer; list-style: none; }
.route-app .router-fleet-accounting-alert > summary::-webkit-details-marker { display: none; }
.route-app .router-fleet-accounting-alert > summary > span { display: grid; gap: 2px; }
.route-app .router-fleet-accounting-alert > summary strong { font-size: 10px; }
.route-app .router-fleet-accounting-alert > summary small { color: #88878d; font-size: 8px; }
.route-app .router-fleet-accounting-alert > summary > .icon { width: 13px; color: #929198; transition: transform .18s ease; }
.route-app .router-fleet-accounting-alert[open] > summary > .icon { transform: rotate(180deg); }
.route-app .router-fleet-accounting-alert > div { padding: 13px 16px 15px; border-top: 1px solid #e7e6e1; }
.route-app .router-fleet-accounting-alert p { margin: 0; color: #78777e; font-size: 9px; line-height: 1.5; }
.route-app .router-fleet-panel { overflow: hidden; padding: 0; }
.route-app .router-fleet-toolbar { margin: 0; padding: 18px 19px 13px; border-bottom: 1px solid #e7e6e1; }
.route-app .router-fleet-toolbar h3 { font-size: 16px; }
.route-app .router-fleet-filters select,.route-app .router-search-field input { min-height: 44px; border-color: #d8d7d2; border-radius: 7px; background: #faf9f6; font-size: 9px; }
.route-app .router-fleet-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.route-app .router-fleet-card { display: grid; grid-template-columns: 116px minmax(135px,.8fr) minmax(190px,1.15fr) minmax(285px,1.45fr) 108px; grid-template-areas: "status identity health facts action" "telemetry telemetry telemetry facts maintenance"; gap: 8px 15px; align-items: center; min-height: 132px; padding: 14px 17px; border: 0; border-top: 1px solid #e7e6e1; border-left: 3px solid transparent; border-radius: 0; background: #fff; box-shadow: none; }
.route-app .router-fleet-card:first-child { border-top: 0; }
.route-app .router-fleet-card .router-card-status { grid-area: status; }
.route-app .router-fleet-card .router-card-status .router-large { display: none; }
.route-app .router-fleet-card .router-fleet-identity { grid-area: identity; min-width: 0; }
.route-app .router-fleet-card .router-fleet-identity h3 { margin: 0 0 4px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.route-app .router-fleet-card .router-fleet-identity p { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.route-app .router-fleet-card > .router-health-copy { grid-area: health; min-height: 0; margin: 0; overflow: visible; color: #73737a; font-size: 8px; line-height: 1.5; text-overflow: clip; white-space: normal; }
.route-app .router-fleet-card > .router-fleet-telemetry { grid-area: telemetry; min-width: 0; margin: 0; padding: 7px 9px; overflow: visible; border-radius: 6px; background: #f5f4f0; font-size: 7px; text-overflow: clip; white-space: normal; }
.route-app .router-detail-card .router-fleet-facts { grid-area: facts; grid-template-columns: repeat(3,minmax(0,1fr)); align-self: stretch; margin: 0; border: 0; border-radius: 0; background: transparent; }
.route-app .router-detail-card .router-fleet-facts > div { display: grid; align-content: center; min-width: 0; padding: 8px 10px; border-left: 1px solid #e7e6e1; background: transparent; }
.route-app .router-detail-card .router-fleet-facts > div:first-child { border-left: 0; }
.route-app .router-fleet-facts dt { font-size: 7px; }
.route-app .router-fleet-facts dd { margin-top: 5px; font-size: 9px; white-space: normal; }
.route-app .router-primary-actions { display: grid; grid-area: action; gap: 6px; min-width: 0; }
.route-app .router-primary-actions .button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding-inline: 10px; justify-content: center; font-size: 8px; white-space: normal; }
.route-app .router-fleet-card > .router-maintenance { grid-area: maintenance; min-width: 0; margin: 0; border: 0; }
.route-app .router-fleet-card > .router-maintenance > summary { min-height: 44px; justify-content: flex-end; }
.route-app .router-fleet-card > .router-maintenance > summary small { display: none; }
.route-app .router-fleet-card > .router-maintenance .router-actions { justify-content: flex-end; }
.route-app .router-fleet-card > .router-maintenance .router-actions .button { min-height: 44px; font-size: 8px; }
.route-app .setup-explainer.operator-explainer > div > ol { margin: 14px 0 0; }

/* Settings catalogue and full settings pages. */
.settings-directory { max-width: 980px; }
.settings-directory-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 1px solid #d9d8d3; }
.settings-directory-intro h2 { margin: 8px 0 5px; font-size: 34px; letter-spacing: -.055em; }
.settings-directory-intro p { margin: 0; color: var(--muted); }
.settings-directory-group { margin-top: 35px; }
.settings-directory-group > h3 { margin: 0 0 10px; color: #77777d; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.settings-directory-group > div { overflow: hidden; border: 1px solid #d9d8d3; border-radius: 11px; background: white; }
.settings-directory-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto 18px; align-items: center; gap: 13px; min-height: 76px; padding: 11px 17px; border-top: 1px solid #e8e7e3; color: inherit; text-decoration: none; transition: background .16s ease; }
.settings-directory-row:first-child { border-top: 0; }
.settings-directory-row:hover { background: #f8f7f3; }
.settings-directory-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; background: #efecff; color: var(--v2-accent); }
.settings-directory-icon .icon { width: 17px; }
.settings-directory-row > span:nth-child(2) { display: grid; gap: 3px; }
.settings-directory-row strong { font-size: 12px; }
.settings-directory-row small { color: var(--muted); font-size: 10px; }
.settings-directory-row > .icon { width: 14px; color: #aaa9ae; }
.settings-back { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: #66666d; font-size: 11px; font-weight: 680; text-decoration: none; }
.settings-back .icon { width: 13px; transform: rotate(180deg); }
.settings-stack { display: grid; gap: 22px; }
.settings-single { display: grid; max-width: 760px; gap: 18px; }
.settings-facts { overflow: hidden; margin: 25px 0; border: 1px solid #deddd8; border-radius: 10px; background: white; }
.settings-facts > div { display: grid; grid-template-columns: 160px minmax(0,1fr); align-items: center; min-height: 58px; padding: 10px 16px; border-top: 1px solid #e8e7e3; }
.settings-facts > div:first-child { border-top: 0; }
.settings-facts dt { color: var(--muted); font-size: 10px; }
.settings-facts dd { margin: 0; font-size: 11px; font-weight: 650; }
.settings-plain-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid #deddd8; }
.settings-plain-section h3 { margin: 0 0 14px; font-size: 14px; }
.settings-plain-section ol { display: grid; gap: 9px; margin: 0; padding-left: 20px; color: var(--muted); font-size: 11px; }
.settings-inline-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; color: var(--v2-accent); font-size: 11px; font-weight: 700; text-decoration: none; }

/* Premium interactive customer previews. */
.ussd-operations-grid,.ussd-settings-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; align-items: start; gap: 30px; }
.ussd-channel-summary,.ussd-config-panel { padding: 28px; border: 1px solid #deddd8; border-radius: 11px; background: white; }
.ussd-channel-state h3 { margin: 22px 0 6px; font-size: 35px; letter-spacing: -.055em; }
.ussd-channel-state p,.ussd-config-panel header p { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ussd-channel-summary > dl { margin: 30px 0 0; }
.ussd-channel-summary > dl > div { display: flex; justify-content: space-between; gap: 25px; padding: 13px 0; border-top: 1px solid #e6e5e1; }
.ussd-channel-summary dt { color: var(--muted); font-size: 10px; }
.ussd-channel-summary dd { margin: 0; font-size: 11px; font-weight: 680; }
.ussd-config-panel header h2 { margin: 10px 0 8px; font-size: 30px; letter-spacing: -.055em; }
.ussd-device-panel,.premium-portal-preview { position: sticky; top: 92px; display: grid; justify-items: center; }
.ussd-device-panel .device-label,.premium-portal-preview .device-label { display: flex; width: 330px; justify-content: space-between; margin-bottom: 10px; color: #77777d; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.ussd-device-panel .device-label small,.premium-portal-preview .device-label small { font-weight: 550; letter-spacing: 0; }
.flagship-device { position: relative; width: 330px; height: 676px; border-width: 7px; box-shadow: 0 35px 80px rgba(18,19,24,.22), inset 0 0 0 1px #4b4c54; }
.flagship-wallpaper { position: absolute; inset: 0; background: radial-gradient(circle at 75% 20%,#7671a5,transparent 32%),linear-gradient(145deg,#414660,#161924 65%); }
.ussd-system-dialog { position: absolute; inset: auto 12px 20px; z-index: 2; overflow: hidden; max-height: 590px; border-radius: 20px; background: rgba(252,252,253,.97); box-shadow: 0 22px 65px rgba(0,0,0,.32); }
.ussd-system-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px 8px; }
.ussd-system-dialog header span { font-size: 11px; font-weight: 700; }
.ussd-system-dialog header small { color: #97969c; font-size: 8px; }
.ussd-system-dialog pre { max-height: 190px; overflow: auto; margin: 0; padding: 7px 18px 12px; color: #24252b; font: 10px/1.55 var(--v2-font); white-space: pre-wrap; }
.ussd-system-dialog .ussd-character-meter { padding: 0 18px 10px; color: #557066; font-size: 8px; letter-spacing: .01em; }
.ussd-system-dialog .ussd-character-meter.is-tight { color: #8b5600; }
.ussd-preview-choices { display: grid; max-height: 230px; overflow: auto; padding: 0 10px 8px; }
.ussd-preview-choices button { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px; border: 0; border-top: 1px solid #e8e7e9; background: transparent; text-align: left; }
.ussd-preview-choices button:hover { background: #f1efff; }
.ussd-preview-choices b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #eeebff; color: var(--v2-accent); font-size: 8px; }
.ussd-preview-choices span { font-size: 9px; }
.ussd-system-dialog footer { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #dedde0; }
.ussd-system-dialog footer button { min-height: 45px; border: 0; border-left: 1px solid #dedde0; background: transparent; color: var(--v2-accent); font-size: 10px; font-weight: 700; }
.ussd-preview-loading,.ussd-preview-error { padding: 8px 18px; color: var(--muted); font-size: 9px; }
.ussd-preview-loading { display: flex; align-items: center; gap: 8px; }
.ussd-preview-loading .loader { width: 15px; height: 15px; }
.ussd-preview-error { color: var(--v2-danger); }
.ussd-preview-handoff { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 8px; margin: 0 12px 10px; padding: 10px; border: 1px solid #d7d2f2; border-radius: 9px; background: #f3f0ff; color: #24252b; }
.ussd-preview-handoff small { grid-column: 1/-1; color: #77718e; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.ussd-preview-handoff strong,.ussd-preview-handoff span { font-size: 9px; }
.ussd-preview-handoff span { color: var(--v2-accent); font-weight: 700; }
.ussd-device-panel > p,.premium-portal-preview > p { max-width: 330px; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: center; }

/* Tenant-owned Programmable USSD setup and evidence. */
.ussd-settings-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 4px; }
.ussd-settings-head h2 { margin: 7px 0 4px; font-size: 30px; letter-spacing: -.055em; }
.ussd-settings-head p { margin: 0; color: var(--muted); font-size: 11px; }
.ussd-self-setup { display: grid; padding: 0; overflow: hidden; }
.ussd-setup-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 15px; padding: 24px 25px; border-top: 1px solid #e5e4e0; }
.ussd-setup-step:first-child { border-top: 0; }
.ussd-step-number { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d7d5cf; border-radius: 50%; color: #77777d; background: #f7f6f2; font-size: 10px; font-weight: 700; }
.ussd-setup-step.is-complete .ussd-step-number { border-color: #b7decf; color: #157554; background: #edf8f3; }
.ussd-setup-step > div { min-width: 0; }
.ussd-setup-step > div > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.ussd-setup-step h3 { margin: 0; font-size: 14px; letter-spacing: -.025em; }
.ussd-setup-step header > small { color: var(--muted); font-size: 8px; }
.ussd-step-note { margin: 0 0 14px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.ussd-endpoint-field { display: grid; gap: 6px; margin: 11px 0; color: #5f6066; font-size: 9px; font-weight: 680; }
.ussd-endpoint-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.ussd-endpoint-control input { min-width: 0; height: 39px; padding: 0 10px; border: 1px solid #d9d8d3; border-radius: 7px; background: #faf9f6; color: #323339; font: 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ussd-endpoint-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.ussd-route-form { display: grid; grid-template-columns: minmax(150px,.55fr) minmax(220px,1fr); align-items: end; gap: 10px; }
.ussd-route-form label { display: grid; gap: 6px; color: #5f6066; font-size: 9px; font-weight: 680; }
.ussd-route-form input { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #d9d8d3; border-radius: 7px; background: #fff; color: #25262b; font-size: 10px; }
.ussd-route-form .form-error { grid-column: 1/-1; }
.ussd-route-form > button { grid-column: 1/-1; justify-self: start; }
.ussd-route-form > .field-row,.ussd-customer-menu-fields { grid-column: 1/-1; }
.ussd-customer-menu-fields { display: grid; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #e6e5e1; }
.ussd-customer-menu-fields h4 { margin: 0; font-size: 11px; }
.ussd-route-form textarea { width: 100%; padding: 10px; border: 1px solid #d9d8d3; border-radius: 7px; background: #fff; color: #25262b; font: 10px/1.5 var(--v2-font); resize: vertical; }
.ussd-setup-status { display: flex; align-items: center; gap: 12px; padding: 18px 25px; border-top: 1px solid #deddd8; background: #f8f7f3; }
.ussd-setup-status > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #ece9fb; color: var(--v2-accent); }
.ussd-setup-status .icon { width: 14px; }
.ussd-setup-status strong,.ussd-setup-status small { display: block; }
.ussd-setup-status strong { font-size: 10px; }
.ussd-setup-status small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.ussd-activity { overflow: hidden; }
.ussd-activity > ol { margin: 0; padding: 0 23px 12px; list-style: none; }
.ussd-activity li { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 11px; padding: 14px 0; border-top: 1px solid #e8e7e3; }
.ussd-activity-dot { width: 8px; height: 8px; margin-top: 4px; border: 2px solid #c9c3ef; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #f2f0fc; }
.ussd-activity strong { font-size: 10px; }
.ussd-activity p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.ussd-activity small { color: #929197; font-size: 8px; }
.ussd-activity details { margin-top: 7px; }
.ussd-activity summary { width: fit-content; color: var(--v2-accent); font-size: 8px; cursor: pointer; }
.ussd-activity pre { max-height: 220px; overflow: auto; margin: 7px 0 0; padding: 10px; border-radius: 7px; background: #f4f3ef; color: #4b4c52; font: 8px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; }
.ussd-session-lookup { overflow: hidden; padding: 0; }
.ussd-session-lookup-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px 14px; }
.ussd-session-lookup-head h2 { margin: 5px 0 3px; font-size: 18px; letter-spacing: -.035em; }
.ussd-session-lookup-head p { margin: 0; color: var(--muted); font-size: 10px; }
.ussd-session-lookup-head > .icon { width: 19px; color: #8c8997; }
.ussd-session-lookup > form { display: grid; grid-template-columns: minmax(220px,1fr) auto; align-items: end; gap: 9px; padding: 0 24px 22px; }
.ussd-session-lookup > form label { display: grid; gap: 6px; color: #5f6066; font-size: 9px; font-weight: 680; }
.ussd-session-lookup > form input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d9d8d3; border-radius: 7px; background: #fff; color: #25262b; font: 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
.ussd-session-lookup > form .form-error { grid-column: 1/-1; margin: 0; }
.ussd-session-result { border-top: 1px solid #deddd8; background: #faf9f6; }
.ussd-session-result > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; }
.ussd-session-result > header h3 { margin: 5px 0 3px; font-size: 17px; letter-spacing: -.025em; }
.ussd-session-result > header p { margin: 0; color: var(--muted); font-size: 9px; }
.ussd-session-facts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-block: 1px solid #e5e4e0; background: #fff; }
.ussd-session-facts article { display: grid; grid-template-columns: 27px minmax(0,1fr); align-content: start; gap: 9px; min-width: 0; padding: 16px; border-left: 1px solid #e5e4e0; }
.ussd-session-facts article:first-child { border-left: 0; }
.ussd-session-facts article > span:first-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: #f0eef8; color: #6c638f; }
.ussd-session-facts article > span:first-child .icon { width: 13px; }
.ussd-session-facts article > .badge { grid-column: 2; justify-self: start; }
.ussd-session-facts small,.ussd-session-facts strong,.ussd-session-facts p { display: block; overflow-wrap: anywhere; }
.ussd-session-facts small { color: #8a898f; font-size: 8px; }
.ussd-session-facts strong { margin-top: 3px; font-size: 10px; }
.ussd-session-facts p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.ussd-session-timeline { padding: 20px 24px 23px; }
.ussd-session-timeline h4 { margin: 0 0 9px; font-size: 11px; }
.ussd-session-timeline ol { margin: 0; padding: 0; list-style: none; }
.ussd-session-timeline li { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 11px; padding: 11px 0; border-top: 1px solid #e5e4e0; }
.ussd-session-timeline li strong { font-size: 10px; }
.ussd-session-timeline li p { margin: 3px 0; color: var(--muted); font-size: 9px; }
.ussd-session-timeline li small,.ussd-session-truncated { color: #929197; font-size: 8px; }
.ussd-session-truncated { display: block; margin-top: 10px; }

/* Galaxy S25 Ultra preview frame: flat rails, narrow bezels and centred camera. */
.flagship-device { border-width: 5px; border-color: #27282d; border-radius: 36px; box-shadow: 0 35px 80px rgba(18,19,24,.24), inset 0 0 0 1px #55565e; }
.flagship-device::before { content: ''; position: absolute; z-index: 8; top: 118px; right: -8px; width: 3px; height: 80px; border-radius: 0 3px 3px 0; background: #3a3b41; box-shadow: 0 98px 0 #3a3b41; }
.flagship-device::after { content: ''; position: absolute; z-index: 8; top: 145px; left: -8px; width: 3px; height: 38px; border-radius: 3px 0 0 3px; background: #3a3b41; }
.flagship-screen { border-radius: 30px; }
.flagship-island { top: 12px; width: 10px; height: 10px; border: 1px solid #343640; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#26395e 0 12%,#090a0d 36%); box-shadow: 0 0 0 2px rgba(0,0,0,.28); }
.flagship-status { padding-top: 15px; }

.premium-designer { grid-template-columns: minmax(420px,690px) 380px; align-items: start; gap: 35px; }
.portal-preview-device { position: relative; }
.portal-preview-screen { overflow: hidden; background: #edf2ee; }
.portal-preview-screen > .flagship-status { position: absolute; inset: 0 0 auto; z-index: 6; color: #17181d; pointer-events: none; }
.portal-preview-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 34px;
  overscroll-behavior: contain;
  scrollbar-width: none;
  color-scheme: light;
  --ink: #10251e;
  --ink-2: #243c33;
  --muted: #66786f;
  --soft: #87978f;
  --line: #dce5e0;
}
.portal-preview-scroll::-webkit-scrollbar { display: none; }
.portal-preview-scroll .captive-shell { width: 100%; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.premium-portal-preview .captive-package[data-preview-select-package] { cursor: pointer; }
.premium-portal-preview input[type="checkbox"] { accent-color: var(--portal); }

/* Platform-owned USSD approval stays beside the tenant lifecycle evidence. */
.platform-ussd-control { display: grid; gap: 14px; padding: 18px; border: 1px solid #deddd8; border-radius: 12px; background: #faf9f6; }
.platform-ussd-control .surface-head { padding: 0; }
.platform-ussd-control h3 { margin: 3px 0 0; font-size: 15px; }
.platform-ussd-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.platform-ussd-summary > span { display: grid; gap: 5px; align-content: start; padding: 10px; border: 1px solid #e3e2dd; border-radius: 8px; background: #fff; }
.platform-ussd-summary small { color: var(--muted); font-size: 8px; }
.platform-ussd-summary strong { font-size: 10px; }
.platform-ussd-form { padding: 0; }
.platform-ussd-form .advanced-fields { margin: 0; }
.platform-credential-vault { display: grid; gap: 14px; padding: 18px; border: 1px solid #d9e1ed; border-radius: 12px; background: #f6f9fd; }
.platform-credential-vault .surface-head { padding: 0; align-items: start; }
.platform-credential-vault .surface-head h3 { margin: 3px 0 0; font-size: 15px; }
.platform-credential-vault .surface-head p { max-width: 580px; margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.platform-credential-history { display: grid; gap: 10px; }
.platform-credential-version { display: grid; gap: 12px; padding: 14px; border: 1px solid #deddd8; border-radius: 10px; background: #fff; }
.platform-credential-version.is-current { border-color: #9bbce8; box-shadow: inset 3px 0 #075ce2; }
.platform-credential-version > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.platform-credential-version > header > div { display: grid; gap: 3px; }
.platform-credential-version > header span { color: #637083; font-size: 7px; font-weight: 750; letter-spacing: .12em; }
.platform-credential-version > header strong { color: var(--v2-ink); font-size: 11px; }
.platform-credential-version dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0; }
.platform-credential-version dl > div { min-width: 0; display: grid; gap: 4px; padding: 9px; border-radius: 7px; background: #f7f7f5; }
.platform-credential-version dt { color: var(--v2-muted); font-size: 7px; }
.platform-credential-version dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--v2-ink); font-size: 9px; font-weight: 650; }
.platform-credential-version dd .badge { max-width: 100%; }
.platform-credential-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.platform-credential-actions .button { min-height: 34px; }
.platform-credential-error { margin: 0; padding: 9px; border-radius: 7px; background: #fff4e6; color: #875313; font-size: 8px; line-height: 1.45; }
.platform-credential-empty { margin: 0; padding: 14px; border: 1px dashed #c8cfda; border-radius: 9px; color: var(--v2-muted); font-size: 10px; text-align: center; }
.platform-payment-activation { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid #d9e1ed; }
.platform-payment-activation > div:first-child h4 { margin: 3px 0; font-size: 14px; }
.platform-payment-activation > div:first-child p { margin: 0; color: var(--v2-muted); font-size: 9px; }
.platform-payment-activation-form { padding: 0; }
.platform-credential-secret { display: grid; gap: 14px; }
.platform-credential-secret dl { display: grid; gap: 9px; margin: 0; }
.platform-credential-secret dl > div { display: grid; gap: 6px; padding: 11px; border: 1px solid #deddd8; border-radius: 9px; background: #faf9f6; }
.platform-credential-secret dt { color: var(--v2-muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.platform-credential-secret dd { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; margin: 0; }
.platform-credential-secret code { min-width: 0; padding: 9px; overflow-wrap: anywhere; border-radius: 7px; background: #fff; color: var(--v2-ink); font-size: 10px; user-select: all; }
.platform-secret-time { margin: 0; color: var(--v2-muted); font-size: 8px; }
.platform-operational-sms { display: grid; gap: 16px; padding: 22px; }
.platform-operational-sms > .surface-head { padding: 0; }
.platform-operational-sms > .surface-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.platform-operational-sms .settings-form { display: grid; gap: 12px; padding: 0; }
.platform-operational-sms .current-credential { margin: 0; }
.step-up-form { gap: 16px; }
.step-up-form > p:first-child { margin: 0; color: var(--muted); }
.step-up-form input[name="code"] { max-width: 220px; font-size: 24px; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
.step-up-resend { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.step-up-resend small { color: var(--muted); }
.platform-sms-proof-note { margin: 0; color: var(--muted); font-size: 9px; }

/* Service launch control: compact, factual and server-backed. */
.launch-current { border-color: #d9d6e8; background: linear-gradient(120deg,#f7f5ff,#fbfaf7); }
.launch-current > span { background: var(--v2-accent); }
.launch-current small,.launch-current > a { color: var(--v2-accent); }
.launch-current.is-off { border-color: #e5c9c9; background: #fff7f6; }
.launch-current.is-off > span { background: #9f3f45; }
.launch-current.is-off small,.launch-current.is-off > a { color: #87383e; }
.launch-review.is-off { border-color: #e5c9c9; background: #fff7f6; }
.launch-review.is-off > .icon { background: #f9e7e6; color: #9f3f45; }
.launch-review-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.launch-lifecycle-evidence { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 14px; border: 1px solid #dcd9e9; border-radius: 12px; background: #f8f7fc; }
.launch-lifecycle-evidence > .icon { width: 17px; color: var(--v2-accent); }
.launch-lifecycle-evidence strong { font-size: 10px; }
.launch-lifecycle-evidence p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.launch-lifecycle-evidence > a { display: inline-flex; align-items: center; gap: 5px; color: var(--v2-accent); font-size: 9px; font-weight: 700; text-decoration: none; }
.launch-lifecycle-evidence > a .icon { width: 13px; }
.lifecycle-action-form .form-note { line-height: 1.55; }

/* Alerts keep the verification task prominent and secondary choices folded. */
.notification-preferences { padding: 0; background: transparent; }
.notification-preferences > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; list-style: none; }
.notification-preferences > summary::-webkit-details-marker { display: none; }
.notification-preferences > summary .icon { width: 13px; transition: transform .18s ease; }
.notification-preferences[open] > summary .icon { transform: rotate(180deg); }
.notification-preferences ul { padding: 0 11px 11px; }
.notification-event-options > details { margin-top: 10px; border-top: 1px solid var(--line); }
.notification-event-options > details > summary { display: flex; align-items: center; gap: 6px; padding: 12px 2px 2px; color: var(--v2-accent); font-size: 9px; font-weight: 700; cursor: pointer; list-style: none; }
.notification-event-options > details > summary::-webkit-details-marker { display: none; }
.notification-event-options > details > summary .icon { width: 13px; }
.notification-event-options > details > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding-top: 9px; }
.notification-event-options label:has(input:disabled) { opacity: .78; }

/* Dark workspace preserves operational colour meanings. */
body.theme-dark.route-app { --cream: #111217; --paper: #191a20; --ink: #f5f4ef; --ink-2: #eeeeea; --muted: #a5a5ac; --soft: #77777e; --line: #303139; --line-strong: #494a52; --mint: #29263d; --mint-2: #22202e; }
body.theme-dark.route-app { background: #111217; }
body.theme-dark.route-app .dashboard-shell,
body.theme-dark.route-app .app-main,
body.theme-dark.route-app .app-footer { background: #111217; }
body.theme-dark.route-app .app-header { border-color: #303139; background: rgba(17,18,23,.9); }
body.theme-dark.route-app .app-header h1 { color: #f5f4ef; }
body.theme-dark.route-app .surface,
body.theme-dark.route-app .iderwell-today-stats,
body.theme-dark.route-app .iderwell-today-panel,
body.theme-dark.route-app .settings-directory-group > div,
body.theme-dark.route-app .settings-facts,
body.theme-dark.route-app .ussd-channel-summary,
body.theme-dark.route-app .ussd-config-panel { border-color: #303139; background: #191a20; }
body.theme-dark.route-app .settings-directory-intro,
body.theme-dark.route-app .settings-directory-row,
body.theme-dark.route-app .settings-facts > div,
body.theme-dark.route-app .ussd-channel-summary > dl > div { border-color: #303139; }
body.theme-dark.route-app .settings-directory-row:hover { background: #202127; }
body.theme-dark.route-app .settings-directory-icon { background: #29263d; color: #a99fff; }
body.theme-dark.route-app .iderwell-today-intro h2,
body.theme-dark.route-app .iderwell-today-stats dd,
body.theme-dark.route-app .iderwell-today-panel h2,
body.theme-dark.route-app .settings-directory-intro h2,
body.theme-dark.route-app .settings-directory-row strong,
body.theme-dark.route-app .ussd-channel-state h3,
body.theme-dark.route-app .ussd-config-panel h2 { color: #f5f4ef; }
body.theme-dark.route-app .icon-button,
body.theme-dark.route-app .profile-chip,
body.theme-dark.route-app .top-search { border-color: #363740; background: #191a20; }
body.theme-dark.route-app .iderwell-today-panel > header > a,
body.theme-dark.route-app .overview-panel-total strong,
body.theme-dark.route-app .overview-breakdown-list b,
body.theme-dark.route-app .overview-payment-row > span:nth-child(2) strong,
body.theme-dark.route-app .overview-payment-row > span:last-child > strong,
body.theme-dark.route-app .overview-popular-packages li > strong { color: #f0efea; }
body.theme-dark.route-app .iderwell-today-panel > header > a:hover { color: #fff; }
body.theme-dark.route-app .overview-chart { border-color: #34353c; background: repeating-linear-gradient(to bottom, transparent 0 50px, #292a31 51px); }
body.theme-dark.route-app .overview-progress { background: #2e2f36; }
body.theme-dark.route-app .overview-payment-row,
body.theme-dark.route-app .overview-network-note,
body.theme-dark.route-app .overview-popular-packages li { border-color: #303139; }
body.theme-dark.route-app .overview-popular-packages li > b { background: #292a31; color: #b2b1b7; }
body.theme-dark.route-app .overview-quick-actions button { border-color: #34353c; background: #202127; color: #f2f1ed; }
body.theme-dark.route-app .overview-quick-actions button:not(:disabled):hover { border-color: #655b9b; background: #29263d; }
body.theme-dark.route-app .overview-quick-actions button > span { background: #29263d; color: #a99fff; }
body.theme-dark.route-app .ussd-setup-step,
body.theme-dark.route-app .ussd-setup-status,
body.theme-dark.route-app .ussd-activity li { border-color: #303139; }
body.theme-dark.route-app .ussd-step-number { border-color: #45464e; background: #24252b; color: #b1b0b6; }
body.theme-dark.route-app .ussd-setup-step.is-complete .ussd-step-number { border-color: #315e50; background: #1a3029; color: #72c5a7; }
body.theme-dark.route-app .ussd-endpoint-control input,
body.theme-dark.route-app .ussd-route-form input,
body.theme-dark.route-app .ussd-route-form textarea,
body.theme-dark.route-app .ussd-activity pre,
body.theme-dark.route-app .ussd-session-lookup > form input { border-color: #3a3b43; background: #202127; color: #e8e7e2; }
body.theme-dark.route-app .ussd-customer-menu-fields { border-color: #303139; }
body.theme-dark.route-app .ussd-session-result,
body.theme-dark.route-app .ussd-session-result > header,
body.theme-dark.route-app .ussd-session-facts,
body.theme-dark.route-app .ussd-session-timeline li { border-color: #303139; }
body.theme-dark.route-app .ussd-session-result { background: #202127; }
body.theme-dark.route-app .ussd-session-facts { background: #191a20; }
body.theme-dark.route-app .ussd-session-facts article { border-color: #303139; }
body.theme-dark.route-app .ussd-session-facts article > span:first-child { background: #29263d; color: #aaa0ff; }
body.theme-dark.route-app .platform-ussd-control { border-color: #34353c; background: #202127; }
body.theme-dark.route-app .platform-ussd-summary > span { border-color: #34353c; background: #191a20; }
body.theme-dark.route-app .platform-credential-vault { border-color: #304b70; background: #1b2430; }
body.theme-dark.route-app .platform-credential-version,
body.theme-dark.route-app .platform-credential-secret code { border-color: #34353c; background: #191a20; }
body.theme-dark.route-app .platform-credential-version dl > div,
body.theme-dark.route-app .platform-credential-secret dl > div { border-color: #34353c; background: #202127; }
body.theme-dark.route-app .platform-payment-activation { border-color: #304b70; }
body.theme-dark.route-app .ussd-setup-status { background: #202127; }
body.theme-dark.route-app .ussd-setup-status > span { background: #29263d; color: #aaa0ff; }
body.theme-dark.route-app .ussd-activity-dot { border-color: #6960a5; background: #191a20; box-shadow: 0 0 0 3px #29263d; }
body.theme-dark.route-app .launch-current { border-color: #45405f; background: #211f2e; }
body.theme-dark.route-app .launch-current.is-live { border-color: #315e50; background: #192a25; }
body.theme-dark.route-app .launch-current.is-off,
body.theme-dark.route-app .launch-review.is-off { border-color: #674044; background: #2b1e21; }
body.theme-dark.route-app .launch-lifecycle-evidence { border-color: #45405f; background: #211f2e; }
body.theme-dark.route-app .notification-preferences,
body.theme-dark.route-app .notification-event-options > details { border-color: #34353c; }
body.theme-dark.route-app .operator-page-head h2,
body.theme-dark.route-app .operator-summary-strip strong,
body.theme-dark.route-app .customer-directory-toolbar h2 { color: #f3f2ed; }
body.theme-dark.route-app .operator-summary-strip { border-color: #303139; background: #191a20; }
body.theme-dark.route-app .operator-summary-strip > div { border-color: #303139; }
body.theme-dark.route-app .customer-search-field { border-color: #383940; background: #202127; }
body.theme-dark.route-app .customer-search-field input { color: #f0efea; }
body.theme-dark.route-app .customer-filter-tabs,
body.theme-dark.route-app .customer-operation-history ol,
body.theme-dark.route-app .operator-history > div,
body.theme-dark.route-app .operator-explainer > div,
body.theme-dark.route-app .credential-safety-details { border-color: #303139; }
body.theme-dark.route-app .customer-filter-tabs button small { background: #2b2c33; color: #aaa9af; }
body.theme-dark.route-app .customer-filter-tabs button[aria-pressed="true"] { border-color: #514b73; background: #29263d; color: #b1a8ff; }
body.theme-dark.route-app .customer-filter-tabs button[aria-pressed="true"] small { background: #7568db; color: #fff; }
body.theme-dark.route-app .subscriber-table .subscriber-identity > i,
body.theme-dark.route-app .operator-explainer .subscriber-operation-notes article > .icon { background: #29263d; color: #aba1ff; }
body.theme-dark.route-app .customer-managed-accesses article { border-color: #383940; background: #202127; }
body.theme-dark.route-app .customer-access-allowance { border-color: #383940; }
body.theme-dark.route-app .operator-explainer .subscriber-operation-notes article { border-color: #303139; background: transparent; }
body.theme-dark.route-app .subscriber-grant-note { border-color: #494365; background: #242132; }
body.theme-dark.route-app .subscriber-grant-note > .icon { color: #ada3ff; }
body.theme-dark.route-app .report-metrics { border-color: #303139; background: #191a20; }
body.theme-dark.route-app .report-metrics .metric-card { border-color: #303139; background: transparent; }
body.theme-dark.route-app .report-metrics .metric-symbol { background: #29263d; color: #aaa0ff; }
body.theme-dark.route-app .report-filters input,
body.theme-dark.route-app .report-filters select { border-color: #383940; background: #202127; color: #f0efea; }
body.theme-dark.route-app .report-table > .surface-head,
body.theme-dark.route-app .report-breakdown-body { border-color: #303139; }
body.theme-dark.route-app .report-table td { color: #e9e8e3; }
body.theme-dark.route-app .report-first-empty > .icon { color: #aaa0ff; }
body.theme-dark.route-app .router-fleet-summary,
body.theme-dark.route-app .router-fleet-card,
body.theme-dark.route-app .router-fleet-panel,
body.theme-dark.route-app .router-fleet-accounting-alert { border-color: #303139; background: #191a20; }
body.theme-dark.route-app .router-fleet-summary > article,
body.theme-dark.route-app .router-fleet-toolbar,
body.theme-dark.route-app .router-fleet-accounting-alert > div,
body.theme-dark.route-app .router-detail-card .router-fleet-facts > div { border-color: #303139; }
body.theme-dark.route-app .router-fleet-summary > article { background: transparent; }
body.theme-dark.route-app .router-fleet-card > .router-fleet-telemetry { background: #202127; }
body.theme-dark.route-app .router-fleet-filters input,
body.theme-dark.route-app .router-fleet-filters select { border-color: #383940; background: #202127; color: #f0efea; }
body.theme-dark.route-app .router-fleet-card > .router-health-copy { color: #b0afb5; }

@media (max-width: 1000px) {
  .product-hero { min-height: 960px; }
  .preview-workspace { grid-template-columns: 160px minmax(0,1fr); min-height: 520px; }
  .preview-metrics article { padding: 15px; }
  .sales-device-stage { transform: scale(.86); transform-origin: center; }
  .product-showcase-grid { gap: 45px; }
  .ussd-operations-grid,.ussd-settings-layout,.premium-designer { grid-template-columns: minmax(0,1fr) 350px; }
  .route-app .overview-insights-grid,
  .route-app .overview-operations-grid,
  .route-app .overview-utility-grid { grid-template-columns: 1fr; }
  .route-app .operator-summary-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-app .operator-summary-strip > div:nth-child(3) { border-top: 1px solid #e7e6e1; border-left: 0; }
  .route-app .operator-summary-strip > div:nth-child(4) { border-top: 1px solid #e7e6e1; }
  body.theme-dark.route-app .operator-summary-strip > div:nth-child(3),
  body.theme-dark.route-app .operator-summary-strip > div:nth-child(4) { border-top-color: #303139; }
  .route-app .report-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-app .report-metrics .metric-card:nth-child(3) { border-top: 1px solid #e7e6e1; border-left: 0; }
  .route-app .report-metrics .metric-card:nth-child(4) { border-top: 1px solid #e7e6e1; }
  .route-app .report-filters { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(130px,.55fr)); }
  .route-app .report-filters .report-clear { margin-top: 0; }
  .ussd-session-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ussd-session-facts article:nth-child(odd) { border-left: 0; }
  .ussd-session-facts article:nth-child(n+3) { border-top: 1px solid #e5e4e0; }
  body.theme-dark.route-app .ussd-session-facts article:nth-child(n+3) { border-top-color: #303139; }
  body.theme-dark.route-app .report-metrics .metric-card:nth-child(3),
  body.theme-dark.route-app .report-metrics .metric-card:nth-child(4) { border-top-color: #303139; }
  .route-app .router-fleet-card { grid-template-columns: 112px minmax(150px,1fr) minmax(160px,1fr) 108px; grid-template-areas: "status identity health action" "telemetry telemetry telemetry maintenance" "facts facts facts facts"; }
  .route-app .router-detail-card .router-fleet-facts { min-height: 68px; border-top: 1px solid #e7e6e1; }
  body.theme-dark.route-app .router-detail-card .router-fleet-facts { border-top-color: #303139; }
}

@media (max-width: 900px) {
  .route-app .report-table .table-wrap { overflow: visible; padding: 10px; }
  .route-app .report-table table,
  .route-app .report-table tbody,
  .route-app .report-table tr,
  .route-app .report-table td { width: 100%; min-width: 0; }
  .route-app .report-table td:nth-child(1),
  .route-app .report-table td:nth-child(2),
  .route-app .report-table td:nth-child(3),
  .route-app .report-table td:nth-child(4),
  .route-app .report-table td:nth-child(5),
  .route-app .report-table td:nth-child(6) { width: 100%; }
  .route-app .report-table table,.route-app .report-table tbody { display: block; }
  .route-app .report-table thead { display: none; }
  .route-app .report-table tbody { display: grid; gap: 10px; }
  .route-app .report-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid #deddd8; border-radius: 9px; background: #fff; }
  .route-app .report-table td { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 9px; padding: 9px 11px; border: 0; border-top: 1px solid #ecebe7; text-align: left; white-space: normal; }
  .route-app .report-table td:first-child { display: block; grid-column: 1/-1; padding: 12px; border-top: 0; background: #faf9f6; }
  .route-app .report-table td:nth-child(2),
  .route-app .report-table td:nth-child(5),
  .route-app .report-table td:nth-child(6) { grid-column: 1/-1; }
  .route-app .report-table td:nth-child(3),.route-app .report-table td:nth-child(4) { grid-template-columns: 1fr; align-content: start; }
  .route-app .report-table td:nth-child(4) { border-left: 1px solid #ecebe7; }
  .route-app .report-table td::before { color: #929198; font-size: 7px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; content: attr(data-label); }
  .route-app .report-table td:first-child::before { display: none; }
  .route-app .report-table td > strong,
  .route-app .report-table td > small,
  .route-app .report-table td > .badge,
  .route-app .report-table td > .button { grid-column: 2; }
  .route-app .report-table td:nth-child(3) > strong,
  .route-app .report-table td:nth-child(3) > small,
  .route-app .report-table td:nth-child(4) > strong,
  .route-app .report-table td:nth-child(4) > small { grid-column: 1; }
  .route-app .report-table .report-row-action .button { width: 100%; justify-content: center; }
  body.theme-dark.route-app .report-table tr { border-color: #303139; background: #191a20; }
  body.theme-dark.route-app .report-table td { border-color: #303139; }
  body.theme-dark.route-app .report-table td:first-child { background: #202127; }
}

@media (max-width: 760px) {
  .iderwell-public .page-width { width: min(100% - 32px,1180px); }
  .iderwell-public .public-nav { height: 70px; }
  .iderwell-public .public-nav nav,.iderwell-public .public-actions { display: none; }
  .iderwell-public .public-menu-button { display: grid; }
  .product-hero { min-height: auto; padding: 125px 0 82px; }
  .product-hero h1 { margin-top: 18px; font-size: clamp(55px,15vw,78px); }
  .product-hero-copy > p { font-size: 16px; }
  .product-hero .hero-actions { display: grid; width: 100%; max-width: 310px; }
  .product-hero .hero-actions .button { justify-content: center; }
  .product-proof { max-width: 360px; row-gap: 10px; }
  .product-hero-stage { width: 860px !important; max-width: none; margin: 55px 0 0; transform: translateX(-14%); }
  .preview-browser { border-radius: 12px; transform: scale(.62); transform-origin: left top; }
  .product-hero-stage { height: 420px; }
  .product-clarity,
  .product-showcase-grid,
  .product-network .product-showcase-grid,
  .product-trust .page-width { grid-template-columns: minmax(0,1fr); }
  .product-clarity { gap: 28px; padding-block: 90px; }
  .product-clarity h2,.product-showcase-copy h2,.product-capabilities h2,.product-close h2 { font-size: clamp(43px,12vw,59px); }
  .product-showcase { padding-block: 90px; }
  .product-showcase-grid { gap: 55px; }
  .product-showcase-copy { width: 100%; }
  .sales-device-stage { width: 580px; height: 570px; min-height: 0; margin-left: 50%; transform: translateX(-50%) scale(.78); transform-origin: center top; }
  .marketing-phone.portal-phone { left: 0; }
  .marketing-phone.ussd-phone { right: 0; }
  .product-network .network-console { order: 2; }
  .product-capabilities { padding-block: 90px; }
  .product-capabilities header { grid-template-columns: 1fr; gap: 22px; }
  .product-capabilities > div { grid-template-columns: 1fr; margin-top: 45px; }
  .product-capabilities article,.product-capabilities article:first-child { min-height: 0; padding: 22px 0; border-top: 1px solid var(--v2-line); border-left: 0; }
  .product-capabilities article:first-child { border-top: 0; }
  .product-capabilities h3 { margin: 18px 0 7px; }
  .product-trust { padding-block: 85px; }
  .product-trust .page-width { gap: 35px; }
  .product-trust h2 { font-size: 57px; }
  .product-close { align-items: start; flex-direction: column; padding-block: 90px; }
  .product-close .button { width: 100%; justify-content: center; }
  .billing-hero { min-height: 650px; padding-top: 100px; }
  .billing-hero h1 { font-size: clamp(55px,15vw,78px); }
  .billing-hero > p { font-size: 16px; }
  .billing-hero .hero-actions { display: grid; width: 100%; max-width: 310px; }
  .billing-hero .hero-actions .button { justify-content: center; }
  .billing-flow,.billing-faq { padding-block: 90px; }
  .billing-flow > header,.billing-faq > header,.billing-boundary > div { grid-template-columns: 1fr; gap: 24px; }
  .billing-flow > div { grid-template-columns: 1fr; margin-top: 45px; }
  .billing-flow article,.billing-flow article:first-child { min-height: 0; padding: 23px 0; border-top: 1px solid var(--v2-line); border-left: 0; }
  .billing-flow article:first-child { border-top: 0; }
  .billing-flow h3 { margin: 18px 0 8px; }
  .billing-boundary { padding-block: 88px; }
  .billing-faq > div { grid-template-columns: 1fr; margin-top: 42px; }
  .billing-faq details,.billing-faq details:nth-child(odd),.billing-faq details:nth-child(even) { padding: 22px 0; border-left: 0; }
  .iderwell-public .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .route-app .dashboard-shell { display: block; }
  .route-app .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(82vw,310px); height: 100vh; transform: translateX(-105%); transition: transform .2s ease; }
  .route-app .app-sidebar.is-open { transform: translateX(0); }
  .route-app .sidebar-brand > button,.route-app .mobile-menu { display: grid; }
  .route-app .sidebar-scrim.is-visible { position: fixed; inset: 0; z-index: 70; display: block; border: 0; background: rgba(0,0,0,.5); }
  .route-app .app-header { min-height: 64px; padding-inline: 15px; }
  .route-app .app-content { padding: 26px 15px 50px; }
  .route-app .app-footer { padding-inline: 15px; }
  .route-app .iderwell-today-stats { grid-template-columns: 1fr 1fr; }
  .route-app .iderwell-today-stats > div,.route-app .iderwell-today-stats > div:first-child { min-height: 100px; padding: 16px; border-top: 1px solid #deddd8; }
  .route-app .iderwell-today-stats > div:nth-child(-n+2) { border-top: 0; }
  .route-app .iderwell-today-panels { grid-template-columns: 1fr; }
  .route-app .overview-insights-grid,
  .route-app .overview-operations-grid,
  .route-app .overview-utility-grid { grid-template-columns: 1fr; }
  .route-app .operator-page-head { align-items: stretch; flex-direction: column; gap: 17px; }
  .route-app .operator-page-head h2 { font-size: 29px; }
  .route-app .operator-page-head .page-action-buttons { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .route-app .operator-page-head .page-action-buttons .button { width: 100%; justify-content: center; }
  .route-app .operator-page-head .page-action-buttons .button-primary:last-child { grid-column: 1/-1; grid-row: 1; }
  .route-app .operator-summary-strip > div { min-height: 91px; padding: 15px; }
  .route-app .operator-summary-strip strong { font-size: 21px; }
  .route-app .operator-summary-strip p { white-space: normal; }
  .route-app .customer-directory-toolbar { align-items: stretch; flex-direction: column; gap: 13px; padding: 17px 15px 11px; }
  .route-app .customer-search-field { width: 100%; }
  .route-app .customer-filter-tabs { padding: 0 15px 12px; }
  .route-app .subscriber-table .table-wrap { overflow: visible; padding: 12px 11px 14px; }
  .route-app .subscriber-table table,.route-app .subscriber-table tbody,.route-app .subscriber-table tr,.route-app .subscriber-table td { display: block; width: 100%; min-width: 0; }
  .route-app .subscriber-table thead { display: none; }
  .route-app .subscriber-table tbody { display: grid; gap: 10px; }
  .route-app .subscriber-table tr { overflow: hidden; border: 1px solid #deddd8; border-radius: 9px; background: #fff; }
  .route-app .subscriber-table tr[hidden] { display: none; }
  .route-app .subscriber-table td { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 11px 12px; border: 0; border-top: 1px solid #ecebe7; text-align: left; white-space: normal; }
  .route-app .subscriber-table td:first-child { display: block; padding-block: 14px; border-top: 0; background: #faf9f6; }
  .route-app .subscriber-table td::before { color: #929198; font-size: 7px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; content: attr(data-label); }
  .route-app .subscriber-table td:first-child::before { display: none; }
  .route-app .subscriber-table td > strong,.route-app .subscriber-table td > small,.route-app .subscriber-table td > .badge,.route-app .subscriber-table td > .subscriber-actions,.route-app .subscriber-table td > .customer-operation-history,.route-app .subscriber-table td > .customer-managed-accesses { grid-column: 2; }
  .route-app .subscriber-table .subscriber-identity { min-width: 0; }
  .route-app .subscriber-actions { align-items: stretch; flex-direction: row; flex-wrap: wrap; }
  .route-app .subscriber-actions .button { width: auto; flex: 1 1 115px; justify-content: center; }
  .route-app .customer-operation-history li { min-width: 0; }
  .route-app .customer-managed-accesses { min-width: 0; }
  .route-app .customer-managed-accesses > div { width: 100%; }
  .route-app .customer-access-allowance { grid-template-columns: 1fr; }
  .route-app .operator-explainer .subscriber-operation-notes { grid-template-columns: 1fr; }
  .route-app .operator-explainer .subscriber-operation-notes article,.route-app .operator-explainer .subscriber-operation-notes article:first-child { border-top: 1px solid #e6e5e0; border-left: 0; }
  .route-app .operator-explainer .subscriber-operation-notes article:first-child { border-top: 0; }
  body.theme-dark.route-app .subscriber-table tr { border-color: #303139; background: #191a20; }
  body.theme-dark.route-app .subscriber-table td { border-color: #303139; }
  body.theme-dark.route-app .subscriber-table td:first-child { background: #202127; }
  body.theme-dark.route-app .operator-explainer .subscriber-operation-notes article { border-top-color: #303139; }
  .route-app .report-metrics .metric-card { min-height: 95px; padding: 14px; }
  .route-app .report-metrics .metric-card strong { font-size: 19px; }
  .route-app .report-metrics .metric-card small { white-space: normal; }
  .route-app .report-filters { grid-template-columns: 1fr 1fr; padding: 13px; }
  .route-app .report-filters .report-search { grid-column: 1/-1; }
  .route-app .report-filters .report-clear { width: 100%; align-self: end; justify-content: center; }
  .route-app .report-table > .surface-head { align-items: start; padding: 17px 15px 12px; }
  .route-app .report-pager { align-items: stretch; flex-direction: column; padding-inline: 13px; }
  .route-app .report-pager > div,.route-app .report-pager .button { width: 100%; }
  .route-app .report-pager .button { justify-content: center; }
  .route-app .report-section-head { align-items: start; flex-direction: column; gap: 5px; }
  .route-app .report-breakdown-body { padding-inline: 10px; }
  .route-app .report-first-empty { grid-template-columns: 1fr; min-height: 260px; padding: 32px 24px; }
  .route-app .report-first-empty span { display: grid; }
  .route-app .router-fleet-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .route-app .router-fleet-summary > article { display: block; min-height: 82px; padding: 13px 10px; }
  .route-app .router-fleet-summary .router-summary-icon { display: none; }
  .route-app .router-fleet-summary small { min-height: 21px; font-size: 7px; line-height: 1.35; }
  .route-app .router-fleet-summary strong { margin-top: 3px; font-size: 20px; }
  .route-app .router-fleet-summary p { display: none; }
  .route-app .router-fleet-toolbar { align-items: stretch; padding: 16px 13px 12px; }
  .route-app .router-fleet-filters { grid-template-columns: 1fr; }
  .route-app .router-fleet-card { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "identity status" "health health" "telemetry telemetry" "facts facts" "action action" "maintenance maintenance"; gap: 10px; min-height: 0; padding: 15px 13px 10px; border-radius: 0; }
  .route-app .router-fleet-card .router-card-status { justify-self: end; }
  .route-app .router-fleet-card .router-fleet-identity h3 { white-space: normal; }
  .route-app .router-fleet-card > .router-health-copy { font-size: 9px; }
  .route-app .router-detail-card .router-fleet-facts { grid-template-columns: 1fr; min-height: 0; border-top: 1px solid #e7e6e1; }
  .route-app .router-detail-card .router-fleet-facts > div,.route-app .router-detail-card .router-fleet-facts > div:first-child { grid-template-columns: minmax(0,1fr) auto; align-items: center; padding: 8px 0; border: 0; border-top: 1px solid #e7e6e1; }
  .route-app .router-detail-card .router-fleet-facts > div:first-child { border-top: 0; }
  .route-app .router-fleet-facts dd { margin: 0; text-align: right; }
  .route-app .router-primary-actions .button { width: 100%; min-height: 44px; justify-content: center; }
  .route-app .router-fleet-card > .router-maintenance > summary { justify-content: space-between; }
  .route-app .router-fleet-card > .router-maintenance > summary small { display: block; }
  body.theme-dark.route-app .router-detail-card .router-fleet-facts > div { border-top-color: #303139; }
  .settings-directory-intro { align-items: start; flex-direction: column; }
  .settings-directory-row { grid-template-columns: 36px minmax(0,1fr) 16px; }
  .settings-directory-row .badge { display: none; }
  .ussd-operations-grid,.ussd-settings-layout,.premium-designer { grid-template-columns: 1fr; }
  .ussd-device-panel,.premium-portal-preview { position: static; }
  .flagship-device { width: min(330px,90vw); }
  .ussd-settings-head { align-items: start; flex-direction: column; }
  .ussd-route-form { grid-template-columns: 1fr; }
  .ussd-session-lookup > form { grid-template-columns: 1fr; }
  .ussd-session-lookup > form .button { justify-content: center; }
  .ussd-session-facts { grid-template-columns: 1fr; }
  .ussd-session-facts article,.ussd-session-facts article:nth-child(odd) { border-left: 0; }
  .ussd-session-facts article:nth-child(n+2) { border-top: 1px solid #e5e4e0; }
  body.theme-dark.route-app .ussd-session-facts article:nth-child(n+2) { border-top-color: #303139; }
  .platform-ussd-summary { grid-template-columns: 1fr; }
  .platform-credential-version dl { grid-template-columns: 1fr; }
  .platform-credential-actions { display: grid; grid-template-columns: 1fr; }
  .platform-credential-actions .button { width: 100%; }
  .platform-credential-secret dd { grid-template-columns: 1fr; }
  .premium-designer > .settings-form { order: 2; }
  .launch-review-buttons { grid-column: 2; align-items: stretch; flex-direction: column; }
  .launch-review-buttons .button { width: 100%; justify-content: center; }
  .launch-lifecycle-evidence { grid-template-columns: 28px minmax(0,1fr) auto; }
  .launch-lifecycle-evidence > a { grid-column: 2 / -1; justify-self: start; }
  .notification-event-options > details > div { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .product-hero-stage { transform: translateX(-9%); }
  .product-proof li:not(:last-child)::after { margin-inline: 8px; }
  .sales-device-stage { transform: translateX(-50%) scale(.66); }
  .product-showcase-dark { padding-bottom: 15px; }
  .network-vitals { grid-template-columns: 1fr 1fr; }
  .network-vitals article:nth-child(3) { border-left: 0; border-top: 1px solid #e5e4e0; }
  .network-vitals article:nth-child(4) { border-top: 1px solid #e5e4e0; }
  .network-console > footer { align-items: start; flex-direction: column; gap: 7px; }
  .iderwell-public .footer-grid { grid-template-columns: 1fr; }
  .route-app .iderwell-today-stats { grid-template-columns: 1fr; }
  .route-app .iderwell-today-stats > div,.route-app .iderwell-today-stats > div:nth-child(-n+2) { border-top: 1px solid #deddd8; border-left: 0; }
  .route-app .iderwell-today-stats > div:first-child { border-top: 0; }
  .route-app .iderwell-today-panel { padding: 18px 15px; }
  .route-app .iderwell-today-panel > header { align-items: start; }
  .overview-chart { gap: 5px; min-height: 176px; }
  .overview-chart-day i { width: min(25px,78%); }
  .overview-payment-row { grid-template-columns: 32px minmax(0,1fr); }
  .overview-payment-row > span:last-child { grid-column: 2; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; width: 100%; }
  .overview-quick-actions > div { grid-template-columns: 1fr; }
  .settings-directory-row { min-height: 82px; padding-inline: 13px; }
  .settings-facts > div { grid-template-columns: 1fr; gap: 5px; }
  .ussd-setup-step { grid-template-columns: 29px minmax(0,1fr); padding: 20px 15px; }
  .ussd-endpoint-control { grid-template-columns: 1fr; }
  .ussd-endpoint-control .button { justify-self: start; }
}

/* Branded hardware selection and tenant-owned identity */
.route-app .workspace-avatar.has-logo,
.route-app .workspace-avatar.large.has-logo { overflow: hidden; padding: 3px; border: 1px solid #deddd8; background: #fff; }
.workspace-avatar.has-logo img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.tenant-logo-field { display: grid; gap: 9px; }
.tenant-logo-field > span { color: var(--v2-ink); font-size: 10px; font-weight: 700; }
.tenant-logo-field > span small { color: var(--v2-muted); font-weight: 500; }
.tenant-logo-control { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 13px; align-items: center; padding: 12px; border: 1px solid #deddd8; border-radius: 8px; background: #faf9f6; }
.tenant-logo-preview { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid #d4d3ce; border-radius: 10px; background: #fff; color: var(--v2-accent); font-size: 17px; font-weight: 700; }
.tenant-logo-preview img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.tenant-logo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.tenant-logo-actions > small { flex-basis: 100%; color: var(--v2-muted); font-size: 8px; line-height: 1.45; }
.tenant-logo-actions label.button { margin: 0; cursor: pointer; }
.tenant-logo-actions label.button.is-disabled { cursor: default; opacity: .56; }
.tenant-logo-actions input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.router-model-picker { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.router-model-picker > legend { padding: 0; color: var(--v2-ink); font-size: 16px; font-weight: 700; }
.router-model-picker > p { margin: -7px 0 0; color: var(--v2-muted); font-size: 12px; line-height: 1.5; }
.router-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.router-model-option { position: relative; min-width: 0; cursor: pointer; }
.router-model-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.router-model-card { display: grid; grid-template-rows: 118px auto; min-height: 238px; overflow: hidden; border: 1px solid #d9d8d3; border-radius: 10px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.router-model-option:hover .router-model-card { border-color: #aaa9a4; }
.router-model-option > input:focus-visible + .router-model-card { outline: 3px solid rgba(103,87,217,.22); outline-offset: 2px; }
.router-model-option > input:checked + .router-model-card { border-color: var(--v2-accent); box-shadow: inset 0 0 0 1px var(--v2-accent), 0 8px 24px rgba(26,24,42,.08); transform: translateY(-1px); }
.router-model-image { display: grid; place-items: center; min-width: 0; padding: 16px; border-bottom: 1px solid #e6e5e0; background: #f6f5f1; }
.router-model-image img { display: block; width: 100%; height: 88px; object-fit: contain; }
.router-model-image.is-other { align-content: center; gap: 7px; color: #73727a; }
.router-model-image.is-other .icon { width: 34px; height: 34px; }
.router-model-image.is-other small { font-size: 10px; }
.router-model-copy { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; padding: 14px; }
.router-model-copy strong { overflow: hidden; padding-right: 58px; color: var(--v2-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.router-model-copy > small { overflow: hidden; color: var(--v2-muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.router-model-copy em { color: #66656c; font-size: 10px; font-style: normal; }
.router-model-copy > span:last-child { margin-top: 4px; color: #86858b; font-size: 9px; line-height: 1.35; }
.router-model-selected { position: absolute; top: 14px; right: 14px; display: none; align-items: center; gap: 3px; color: var(--v2-accent); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.router-model-selected .icon { width: 12px; height: 12px; }
.router-model-option > input:checked + .router-model-card .router-model-selected { display: flex; }
.router-model-disclaimer { color: var(--v2-muted); font-size: 9px; line-height: 1.5; }
.router-hardware-summary { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(150px,250px) minmax(0,1fr); gap: 16px; align-items: center; padding: 13px 15px; border-top: 1px solid #e5e4df; border-bottom: 1px solid #e5e4df; background: #faf9f6; }
.router-hardware-summary > img { display: block; width: 100%; height: 92px; object-fit: contain; }
.router-hardware-summary > span { display: grid; gap: 4px; }
.router-hardware-summary small { color: var(--v2-muted); font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.router-hardware-summary strong { color: var(--v2-ink); font-size: 13px; }
.router-hardware-summary span span { color: var(--v2-muted); font-size: 9px; }
.router-provisioning-page { display: grid; gap: 22px; max-width: 1180px; margin: 0 auto; }
.router-provisioning-header { display: grid; gap: 18px; }
.router-provisioning-header > div { display: grid; gap: 7px; }
.router-provisioning-header h2 { margin: 0; color: var(--v2-ink); font-size: clamp(28px,4vw,43px); font-weight: 680; letter-spacing: -.04em; }
.router-provisioning-header p { max-width: 620px; margin: 0; color: var(--v2-muted); font-size: 14px; line-height: 1.55; }
.router-setup-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 0; border-top: 1px solid #d9d8d3; border-bottom: 1px solid #d9d8d3; list-style: none; }
.router-setup-progress li { display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: 10px; align-items: center; min-height: 76px; padding: 12px 18px; border-left: 1px solid #e1e0db; color: #8a898f; }
.router-setup-progress li:first-child { border-left: 0; }
.router-setup-progress li > span { display: grid; grid-row: 1/3; width: 32px; height: 32px; place-items: center; border: 1px solid #c9c8c3; border-radius: 50%; font-size: 11px; font-weight: 700; }
.router-setup-progress strong { align-self: end; color: inherit; font-size: 12px; }
.router-setup-progress small { align-self: start; font-size: 9px; }
.router-setup-progress li[aria-current="step"] { color: var(--v2-ink); }
.router-setup-progress li[aria-current="step"] > span { border-color: var(--v2-accent); background: var(--v2-accent); color: #fff; }
.router-provisioning-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 22px; align-items: start; }
.router-provisioning-form { display: grid; gap: 14px; min-width: 0; }
.router-guided-form { width: min(100%,920px); margin: 0 auto; }
.router-provisioning-section { display: grid; gap: 22px; padding: 24px; border-radius: 12px; }
.router-provisioning-section > header { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; }
.router-provisioning-section > header > span { padding-top: 3px; color: #8a898f; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; }
.router-provisioning-section > header h3 { margin: 0 0 4px; color: var(--v2-ink); font-size: 18px; font-weight: 680; }
.router-provisioning-section > header p { max-width: 650px; margin: 0; color: var(--v2-muted); font-size: 12px; line-height: 1.5; }
.router-provisioning-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.router-provisioning-fields label,
.router-advanced-settings label { display: grid; gap: 7px; color: var(--v2-ink); font-size: 10px; font-weight: 700; }
.router-provisioning-fields input,
.router-provisioning-fields select,
.router-advanced-settings input,
.router-advanced-settings select { width: 100%; min-height: 44px; border: 1px solid #d5d4cf; border-radius: 8px; background: #fff; color: var(--v2-ink); }
.router-network-plan { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid #dcdad5; border-radius: 9px; background: #faf9f6; }
.router-network-plan > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #efede7; color: var(--v2-accent); }
.router-network-plan > span .icon { width: 18px; height: 18px; }
.router-network-plan strong { display: block; margin-bottom: 2px; color: var(--v2-ink); font-size: 12px; }
.router-network-plan p { margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.4; }
.router-network-plan > code { padding: 6px 8px; border: 1px solid #deddd8; border-radius: 6px; background: #fff; color: #4d4c52; font-size: 10px; }
.router-network-confirm { margin: 0; }
.router-port-step { overflow: hidden; }
.router-port-picker { display: grid; gap: 15px; }
.router-port-device { position: relative; width: 100%; overflow: hidden; border: 1px solid #dddcd7; border-radius: 12px; background: #f5f4f0; }
.router-port-device > img { display: block; width: 100%; height: auto; }
.router-port-pin { position: absolute; left: var(--port-x); top: var(--port-y); display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #26262b; box-shadow: 0 2px 9px rgba(0,0,0,.32); color: #fff; font-size: 8px; font-weight: 700; transform: translate(-50%,-50%); cursor: pointer; transition: width .15s ease,height .15s ease,background .15s ease,box-shadow .15s ease; }
.router-port-pin:hover:not(:disabled),.router-port-pin:focus-visible { width: 36px; height: 36px; outline: 3px solid rgba(103,87,217,.25); outline-offset: 2px; }
.router-port-pin.is-selected { width: 38px; height: 38px; border-color: #fff; background: var(--v2-accent); box-shadow: 0 0 0 5px rgba(103,87,217,.22),0 4px 12px rgba(0,0,0,.28); }
.router-port-pin.is-internet { border-color: #fff; background: #c68b25; cursor: not-allowed; opacity: .95; }
.router-port-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.router-port-key > span { display: grid; grid-template-columns: 12px minmax(0,1fr); column-gap: 8px; align-items: center; min-height: 54px; padding: 10px 12px; border: 1px solid #dfded9; border-radius: 9px; }
.router-port-key i { grid-row: 1/3; width: 10px; height: 10px; border-radius: 50%; background: #c68b25; }
.router-port-key .is-customer i { background: var(--v2-accent); }
.router-port-key strong { color: var(--v2-ink); font-size: 10px; }
.router-port-key small { color: var(--v2-muted); font-size: 9px; }
.router-port-list { display: flex; flex-wrap: wrap; gap: 7px; }
.router-port-list button { min-width: 58px; min-height: 34px; padding: 6px 10px; border: 1px solid #d8d7d2; border-radius: 7px; background: #fff; color: #5f5e64; font-size: 9px; font-weight: 700; cursor: pointer; }
.router-port-list button:hover,.router-port-list button:focus-visible { border-color: #aaa9a4; }
.router-port-list button.is-selected { border-color: var(--v2-accent); background: var(--v2-accent); color: #fff; }
.router-port-picker.is-manual { grid-template-columns: 62px minmax(0,1fr); align-items: start; padding: 18px; border: 1px solid #ddddd8; border-radius: 10px; background: #faf9f6; }
.router-port-manual-icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 10px; background: #eeece6; color: var(--v2-accent); }
.router-port-manual-icon .icon { width: 30px; height: 30px; }
.router-port-picker.is-manual > div:last-child { display: grid; gap: 7px; }
.router-port-picker.is-manual strong { color: var(--v2-ink); font-size: 13px; }
.router-port-picker.is-manual p { margin: 0; color: var(--v2-muted); font-size: 10px; }
.router-port-picker.is-manual label { display: grid; gap: 6px; margin-top: 5px; color: var(--v2-ink); font-size: 10px; font-weight: 700; }
.router-port-picker.is-manual select { min-height: 44px; border: 1px solid #d5d4cf; border-radius: 8px; background: #fff; color: var(--v2-ink); }
.router-advanced-settings { border-top: 1px solid #e2e1dc; }
.router-advanced-settings summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 0 0; color: #6f6e74; font-size: 10px; font-weight: 700; cursor: pointer; }
.router-advanced-settings summary .icon { width: 14px; height: 14px; }
.router-advanced-settings > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 15px; }
.router-provisioning-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 6px 0 18px; }
.router-provisioning-aside { position: sticky; top: 92px; display: grid; gap: 12px; }
.router-device-inspector { overflow: hidden; border-radius: 12px; }
.router-selected-device { display: grid; gap: 16px; padding: 20px; border-bottom: 1px solid #e2e1dc; background: #f7f6f2; }
.router-selected-device > img { display: block; width: 100%; height: 122px; object-fit: contain; }
.router-selected-device-fallback { display: grid; height: 122px; place-items: center; color: #77767c; }
.router-selected-device-fallback .icon { width: 52px; height: 52px; }
.router-selected-device > div { display: grid; gap: 4px; }
.router-selected-device small { color: #88878d; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
.router-selected-device strong { color: var(--v2-ink); font-size: 16px; }
.router-selected-device code { width: fit-content; color: #66656c; font-size: 9px; }
.router-selected-device p { margin: 5px 0 0; color: var(--v2-muted); font-size: 10px; }
.router-selected-device > div > span { color: #88878d; font-size: 9px; }
.router-port-principles { display: grid; padding: 4px 18px 14px; }
.router-port-principles > span { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid #ecebe7; }
.router-port-principles > span:first-child { border-top: 0; }
.router-port-principles b { color: var(--v2-ink); font-size: 10px; }
.router-port-principles small { color: var(--v2-muted); font-size: 9px; }
.router-setup-assurance { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; padding: 15px; border: 1px solid #d9d8d3; border-radius: 10px; color: #6a696f; }
.router-setup-assurance > .icon { width: 18px; height: 18px; color: var(--v2-accent); }
.router-setup-assurance strong { display: block; margin-bottom: 3px; color: var(--v2-ink); font-size: 10px; }
.router-setup-assurance p { margin: 0; font-size: 9px; line-height: 1.5; }
.router-guided-form + .router-setup-assurance { width: min(100%,920px); margin: 0 auto; }
.router-setup-progress li.is-complete { color: #267455; }
.router-setup-progress li.is-complete > span { border-color: #267455; background: #267455; color: #fff; }
.router-setup-progress li.is-complete .icon { width: 14px; height: 14px; }
.router-install-device { display: grid; grid-template-columns: minmax(180px,300px) minmax(0,1fr); gap: 24px; align-items: center; padding: 20px 24px; }
.router-install-device > img { display: block; width: 100%; height: 126px; object-fit: contain; }
.router-install-device > div { display: grid; gap: 4px; }
.router-install-device small { color: var(--v2-muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.router-install-device strong { color: var(--v2-ink); font-size: 18px; }
.router-install-device span { color: var(--v2-muted); font-size: 10px; }
.router-install-device p { display: flex; gap: 7px; align-items: center; margin: 10px 0 0; color: var(--v2-ink); font-size: 11px; }
.router-install-device p .icon { width: 15px; height: 15px; color: var(--v2-accent); }
.router-install-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.router-install-step { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 12px; align-content: start; min-height: 270px; padding: 20px; }
.router-install-step > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #cccac5; border-radius: 50%; color: #77767c; font-size: 10px; font-weight: 700; }
.router-install-step > div { display: grid; align-content: start; gap: 10px; }
.router-install-step h3 { margin: 4px 0 0; color: var(--v2-ink); font-size: 15px; }
.router-install-step p { margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.55; }
.router-install-step > div > small { overflow-wrap: anywhere; color: var(--v2-muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; }
.router-install-step.is-primary { border-color: var(--v2-accent); }
.router-install-step.is-primary > span { border-color: var(--v2-accent); background: var(--v2-accent); color: #fff; }
.router-winbox-drop { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 4px; padding: 13px; border: 1px dashed #aaa9a4; border-radius: 8px; background: #faf9f6; }
.router-winbox-drop > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; background: #eceae4; color: var(--v2-accent); }
.router-winbox-drop .icon { width: 17px; height: 17px; }
.router-winbox-drop strong,.router-winbox-drop small { display: block; }
.router-winbox-drop strong { color: var(--v2-ink); font-size: 10px; }
.router-winbox-drop small { margin-top: 3px; color: var(--v2-muted); font-size: 8px; overflow-wrap: anywhere; }
.router-auto-check { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 9px; align-items: center; margin-top: 8px; padding: 13px; border: 1px solid #d9d8d3; border-radius: 8px; }
.router-auto-check > i { width: 10px; height: 10px; border: 2px solid #cbc9c3; border-top-color: var(--v2-accent); border-radius: 50%; animation: router-check-spin .9s linear infinite; }
.router-auto-check strong,.router-auto-check small { display: block; }
.router-auto-check strong { color: var(--v2-ink); font-size: 10px; }
.router-auto-check small { margin-top: 2px; color: var(--v2-muted); font-size: 8px; }
@keyframes router-check-spin { to { transform: rotate(360deg); } }
.router-install-help { overflow: hidden; }
.router-install-help > summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; }
.router-install-help > summary > span { display: grid; gap: 3px; }
.router-install-help > summary strong { color: var(--v2-ink); font-size: 11px; }
.router-install-help > summary small { color: var(--v2-muted); font-size: 9px; }
.router-install-help > summary .icon { width: 16px; height: 16px; }
.router-install-help > div { display: grid; gap: 20px; padding: 0 20px 20px; border-top: 1px solid #e4e3de; }
.router-install-help section { display: grid; gap: 8px; padding-top: 18px; }
.router-install-help h3 { margin: 0; color: var(--v2-ink); font-size: 13px; }
.router-install-help p { margin: 0; color: var(--v2-muted); font-size: 10px; line-height: 1.55; }
.router-install-help details { border-top: 1px solid #e4e3de; padding-top: 15px; }
.router-install-help details > summary { color: var(--v2-muted); font-size: 10px; cursor: pointer; }
.router-install-help .command-box { margin-top: 4px; }
.router-help-boundary { padding: 12px; border-left: 3px solid #c68b25; background: #faf8f1; }
.router-setup-file-empty { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 22px; }
.router-setup-file-empty > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 9px; background: #eceae4; color: var(--v2-accent); }
.router-setup-file-empty h3 { margin: 0 0 4px; color: var(--v2-ink); }
.router-setup-file-empty p { margin: 0; color: var(--v2-muted); font-size: 10px; }
.router-check-intro { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 16px; align-items: start; padding: 24px; }
.router-check-intro > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 10px; background: #eeece7; color: var(--v2-accent); }
.router-check-intro > span .icon { width: 22px; height: 22px; }
.router-check-intro h3,.router-check-workflow h3,.router-check-result h3 { margin: 0; color: var(--v2-ink); font-size: 18px; }
.router-check-intro p,.router-check-workflow p,.router-check-result p { max-width: 700px; margin: 6px 0 16px; color: var(--v2-muted); font-size: 14px; line-height: 1.55; }
.router-check-workflow { display: grid; gap: 16px; padding: 24px; }
.router-check-workflow > header,.router-check-next { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; }
.router-check-workflow > header > span,.router-check-next > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cccac5; border-radius: 50%; color: #66656b; font-size: 12px; font-weight: 700; }
.router-check-workflow > .button { justify-self: start; }
.router-check-workflow > small { color: var(--v2-muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 12px; overflow-wrap: anywhere; }
.router-check-next { padding-top: 4px; border-top: 1px solid #e4e3de; }
.router-check-next p { margin: 5px 0 0; }
.router-report-zone { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr); column-gap: 12px; align-items: center; padding: 18px; border: 1px dashed #aaa9a4; border-radius: 9px; background: #faf9f6; cursor: pointer; }
.router-report-zone:focus-within,.router-report-zone:focus { outline: 3px solid color-mix(in srgb,var(--v2-accent) 28%,transparent); outline-offset: 2px; }
.router-report-zone input { position: absolute; width: 1px; height: 1px; opacity: .01; }
.router-report-zone > span { display: grid; grid-row: 1/3; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: #eceae4; color: var(--v2-accent); }
.router-report-zone > span .icon { width: 19px; height: 19px; }
.router-report-zone strong { color: var(--v2-ink); font-size: 14px; }
.router-report-zone small { margin-top: 3px; color: var(--v2-muted); font-size: 12px; line-height: 1.45; }
.router-report-zone.is-busy { opacity: .65; pointer-events: none; }
.router-check-wait { margin: 0 !important; font-size: 12px !important; }
.router-check-result { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 18px; align-items: start; padding: 26px; border-left: 3px solid #8b8a8f; }
.router-check-result.is-success { border-left-color: #267455; }
.router-check-result.is-warning { border-left-color: #b27c22; }
.router-check-result > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #eeece7; color: #66656b; }
.router-check-result.is-success > span { background: #e4f3ec; color: #267455; }
.router-check-result.is-warning > span { background: #fbf1dc; color: #9a6818; }
.router-check-result > span .icon { width: 24px; height: 24px; }
.router-check-result > div > small { display: block; margin-bottom: 5px; color: var(--v2-muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; }
.router-check-result dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 18px 0; background: #deddd8; }
.router-check-result dl > div { padding: 12px; background: #fff; }
.router-check-result dt { color: var(--v2-muted); font-size: 11px; }
.router-check-result dd { margin: 4px 0 0; color: var(--v2-ink); font-size: 13px; font-weight: 650; }
.router-check-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.router-check-physical { margin: 12px 0 0 !important; font-size: 12px !important; }
.router-check-history { overflow: hidden; }
.router-check-history > summary { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; cursor: pointer; }
.router-check-history > summary > span { display: grid; gap: 2px; }
.router-check-history > summary strong { color: var(--v2-ink); font-size: 14px; }
.router-check-history > summary small { color: var(--v2-muted); font-size: 12px; }
.router-check-history > summary .icon { width: 16px; height: 16px; }
.router-check-history ol { margin: 0; padding: 0 20px 12px; list-style: none; }
.router-check-history li { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-top: 1px solid #ecebe7; }
.router-check-history-state { width: 8px; height: 8px; border-radius: 50%; background: #aaa9ae; }
.router-check-history-state.is-ready_to_prepare { background: #267455; }
.router-check-history-state.is-permission_needed { background: #b27c22; }
.router-check-history li > div { display: grid; gap: 2px; }
.router-check-history li strong { color: var(--v2-ink); font-size: 13px; }
.router-check-history li small,.router-check-history li > span:last-child { color: var(--v2-muted); font-size: 11px; }
.router-online-success { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 20px; align-items: start; padding: 30px; }
.router-online-success > span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: #267455; color: #fff; }
.router-online-success > span .icon { width: 30px; height: 30px; }
.router-online-success > div { display: grid; gap: 8px; }
.router-online-success small { color: #267455; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.router-online-success h3 { margin: 0; color: var(--v2-ink); font-size: 26px; }
.router-online-success p { max-width: 650px; margin: 0; color: var(--v2-muted); font-size: 12px; line-height: 1.55; }
.router-online-success dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 14px 0; background: #deddd8; }
.router-online-success dl > div { display: grid; gap: 4px; padding: 13px; background: #fff; }
.router-online-success dt { color: var(--v2-muted); font-size: 8px; }
.router-online-success dd { margin: 0; color: var(--v2-ink); font-size: 11px; font-weight: 700; }
.router-online-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.router-provisioning-blocker { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 20px; align-items: start; max-width: 760px; padding: 28px; }
.router-provisioning-blocker > .icon { width: 42px; height: 42px; color: var(--v2-accent); }
.router-provisioning-blocker h2 { margin: 5px 0 8px; }
.router-provisioning-blocker p { margin: 0 0 18px; color: var(--v2-muted); }
.router-hardware-thumbnail { display: grid; grid-template-rows: 64px auto; gap: 4px; width: 104px; color: var(--v2-muted); text-align: center; }
.router-hardware-thumbnail img { display: block; width: 100%; height: 64px; object-fit: contain; }
.router-hardware-thumbnail .icon { align-self: center; justify-self: center; width: 35px; height: 35px; }
.router-hardware-thumbnail small { overflow: hidden; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.portal-brand-source { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid #deddd8; border-radius: 8px; background: #faf9f6; }
.portal-brand-source > span:nth-child(2) { display: grid; gap: 2px; }
.portal-brand-source strong { color: var(--v2-ink); font-size: 10px; }
.portal-brand-source small { color: var(--v2-muted); font-size: 8px; }
.portal-brand-source a { color: var(--v2-accent); font-size: 9px; font-weight: 700; }
body.theme-dark.route-app .tenant-logo-control,
body.theme-dark.route-app .router-model-image,
body.theme-dark.route-app .router-hardware-summary { border-color: #303139; background: #202126; }
body.theme-dark.route-app .router-model-card { border-color: #36373e; background: #18191e; }
body.theme-dark.route-app .router-model-option > input:checked + .router-model-card { border-color: #9184eb; }
body.theme-dark.route-app .router-setup-progress,
body.theme-dark.route-app .router-setup-progress li,
body.theme-dark.route-app .router-provisioning-section,
body.theme-dark.route-app .router-device-inspector,
body.theme-dark.route-app .router-network-plan,
body.theme-dark.route-app .router-network-plan > code,
body.theme-dark.route-app .router-advanced-settings,
body.theme-dark.route-app .router-selected-device,
body.theme-dark.route-app .router-port-principles > span,
body.theme-dark.route-app .router-setup-assurance,
body.theme-dark.route-app .portal-brand-source { border-color: #303139; }
body.theme-dark.route-app .router-provisioning-section,
body.theme-dark.route-app .router-device-inspector { background: #191a20; }
body.theme-dark.route-app .router-network-plan,
body.theme-dark.route-app .router-selected-device,
body.theme-dark.route-app .portal-brand-source { background: #202127; }
body.theme-dark.route-app .router-port-device,
body.theme-dark.route-app .router-port-picker.is-manual,
body.theme-dark.route-app .router-winbox-drop,
body.theme-dark.route-app .router-help-boundary { border-color: #34353d; background: #202127; }
body.theme-dark.route-app .router-port-key > span,
body.theme-dark.route-app .router-port-list button,
body.theme-dark.route-app .router-install-device,
body.theme-dark.route-app .router-install-step,
body.theme-dark.route-app .router-install-help,
body.theme-dark.route-app .router-auto-check,
body.theme-dark.route-app .router-setup-file-empty,
body.theme-dark.route-app .router-check-intro,
body.theme-dark.route-app .router-check-workflow,
body.theme-dark.route-app .router-check-result,
body.theme-dark.route-app .router-check-history,
body.theme-dark.route-app .router-online-success { border-color: #34353d; background: #191a20; }
body.theme-dark.route-app .router-check-intro > span,
body.theme-dark.route-app .router-check-result > span,
body.theme-dark.route-app .router-report-zone > span { background: #292a31; }
body.theme-dark.route-app .router-report-zone { border-color: #44454d; background: #202127; }
body.theme-dark.route-app .router-check-next,
body.theme-dark.route-app .router-check-history li { border-color: #34353d; }
body.theme-dark.route-app .router-check-result dl { background: #34353d; }
body.theme-dark.route-app .router-check-result dl > div { background: #202127; }
body.theme-dark.route-app .router-port-list button { color: #d0cfd5; }
body.theme-dark.route-app .router-port-list button.is-selected { border-color: #9184eb; background: #9184eb; color: #111217; }
body.theme-dark.route-app .router-port-picker.is-manual select,
body.theme-dark.route-app .router-online-success dl > div { border-color: #3a3b43; background: #202127; color: #eeede8; }
body.theme-dark.route-app .router-online-success dl { background: #34353d; }
body.theme-dark.route-app .router-network-plan > span { background: #29263d; }
body.theme-dark.route-app .router-network-plan > code,
body.theme-dark.route-app .router-provisioning-fields input,
body.theme-dark.route-app .router-provisioning-fields select,
body.theme-dark.route-app .router-advanced-settings input,
body.theme-dark.route-app .router-advanced-settings select { border-color: #3a3b43; background: #191a20; color: #eeede8; }

@media (max-width: 1000px) {
  .router-provisioning-layout { grid-template-columns: 1fr; }
  .router-provisioning-aside { position: static; grid-template-columns: minmax(0,1.3fr) minmax(240px,.7fr); }
  .router-install-steps { grid-template-columns: 1fr; }
  .router-install-step { min-height: 0; }
}

@media (max-width: 720px) {
  .router-model-grid { grid-template-columns: 1fr; }
  .router-model-card { grid-template-columns: minmax(118px,42%) minmax(0,1fr); grid-template-rows: auto; min-height: 156px; }
  .router-model-image { border-right: 1px solid #e6e5e0; border-bottom: 0; }
  .router-model-image img { height: 94px; }
  .router-model-copy strong { padding-right: 0; white-space: normal; }
  .router-model-selected { position: static; order: -1; }
  .router-setup-progress li { grid-template-columns: 28px minmax(0,1fr); min-height: 68px; padding: 10px 7px; column-gap: 7px; }
  .router-setup-progress li > span { width: 28px; height: 28px; }
  .router-setup-progress small { display: none; }
  .router-provisioning-section { padding: 18px 15px; }
  .router-provisioning-fields,
  .router-advanced-settings > div { grid-template-columns: 1fr; }
  .router-network-plan { grid-template-columns: 34px minmax(0,1fr); }
  .router-network-plan > code { grid-column: 2; justify-self: start; }
  .router-provisioning-actions { display: grid; grid-template-columns: 1fr; }
  .router-provisioning-actions .button { justify-content: center; }
  .router-provisioning-aside { grid-template-columns: 1fr; }
  .router-selected-device { grid-template-columns: minmax(120px,.8fr) minmax(0,1fr); align-items: center; }
  .router-selected-device > img,
  .router-selected-device-fallback { height: 100px; }
  .router-hardware-summary { grid-template-columns: 1fr; }
  .router-port-key { grid-template-columns: 1fr; }
  .router-port-pin { width: 25px; height: 25px; font-size: 7px; }
  .router-port-pin.is-selected { width: 31px; height: 31px; }
  .router-install-device { grid-template-columns: 1fr; }
  .router-install-device > img { height: 112px; }
  .router-setup-file-empty { grid-template-columns: 40px minmax(0,1fr); }
  .router-setup-file-empty .button { grid-column: 1/-1; justify-content: center; }
  .router-online-success { grid-template-columns: 46px minmax(0,1fr); padding: 20px 16px; }
  .router-online-success > span { width: 46px; height: 46px; }
  .router-online-success dl { grid-template-columns: 1fr; }
  .router-check-result { grid-template-columns: 42px minmax(0,1fr); padding: 20px 16px; }
  .router-check-result > span { width: 42px; height: 42px; }
  .router-check-result dl { grid-template-columns: 1fr; }
  .router-check-actions { display: grid; }
  .router-check-actions .button { justify-content: center; }
  .router-check-history li { grid-template-columns: 10px minmax(0,1fr); }
  .router-check-history li > span:last-child { grid-column: 2; }
  .tenant-logo-control { grid-template-columns: 60px minmax(0,1fr); }
  .tenant-logo-preview { width: 60px; height: 60px; }
}

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

/* Realistic, brand-neutral hardware around the live customer preview. */
.premium-portal-preview.route-connect { background: transparent; }
.premium-portal-preview .device-label {
  width: 342px;
  margin-bottom: 14px;
  color: #6e6f74;
}
.device-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 9px 16px 24px;
}
.device-preview-stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: 22px;
  bottom: 4px;
  left: 22px;
  height: 25px;
  border-radius: 50%;
  background: rgba(20, 21, 25, .16);
  filter: blur(13px);
}
.device-preview-stage .flagship-device {
  z-index: 1;
  width: 342px;
  height: 704px;
  overflow: visible;
  border: 6px solid #4b4c50;
  border-radius: 43px;
  outline: 1px solid #1e1f22;
  background: #0d0e11;
  box-shadow: 0 28px 54px rgba(24, 25, 29, .24), inset 0 0 0 1px #8a8b8e;
}
.device-preview-stage .flagship-device::before {
  top: 122px;
  right: -9px;
  width: 3px;
  height: 66px;
  border: 1px solid #242529;
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: #626367;
  box-shadow: 0 86px 0 #626367, 0 86px 0 1px #242529;
}
.device-preview-stage .flagship-device::after {
  top: 76px;
  left: -7px;
  width: 1px;
  height: 74px;
  border: 0;
  border-radius: 0;
  background: #a0a1a3;
  box-shadow: 0 477px 0 #2b2c30;
}
.device-preview-stage .flagship-screen {
  inset: 2px;
  border-radius: 36px;
  background: #f1f1ee;
  box-shadow: inset 0 0 0 1px #090a0c;
}
.device-preview-stage .flagship-island {
  top: 17px;
  z-index: 12;
  width: 10px;
  height: 10px;
  border: 1px solid #090a0c;
  background: #111218;
  box-shadow: inset 2px 2px 3px rgba(67, 88, 126, .8), 0 0 0 2px rgba(0, 0, 0, .2);
}
.flagship-speaker {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 11;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: #1c1d21;
  transform: translateX(-50%);
}
.device-preview-stage .flagship-status {
  min-height: 34px;
  align-items: center;
  padding: 13px 19px 7px;
  color: #18191d;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.device-system-status { display: flex; align-items: center; gap: 5px; }
.device-system-status i { position: relative; display: block; }
.device-signal { width: 12px; height: 8px; border-bottom: 2px solid #18191d; }
.device-signal::before { content: ''; position: absolute; right: 0; bottom: 0; width: 2px; height: 7px; background: #18191d; box-shadow: -4px 2px 0 #18191d, -8px 4px 0 #18191d; }
.device-wifi { width: 11px; height: 7px; border-top: 2px solid #18191d; border-radius: 50%; }
.device-wifi::after { content: ''; position: absolute; right: 4px; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #18191d; }
.device-battery { width: 15px; height: 7px; border: 1px solid #18191d; border-radius: 2px; }
.device-battery::before { content: ''; position: absolute; inset: 1px; background: #18191d; }
.device-battery::after { content: ''; position: absolute; top: 2px; right: -3px; width: 2px; height: 3px; border-radius: 0 1px 1px 0; background: #18191d; }
.device-preview-stage .portal-preview-scroll { inset: 2px; padding: 34px 0 21px; border-radius: 36px; background: #f1f1ee; }
.device-preview-stage .device-gesture {
  position: absolute;
  z-index: 12;
  bottom: 8px;
  left: 50%;
  width: 108px;
  height: 4px;
  border-radius: 4px;
  background: rgba(20, 21, 24, .8);
  transform: translateX(-50%);
  pointer-events: none;
}
.premium-portal-preview > p { margin-top: 8px; }

@media (max-width: 430px) {
  .premium-portal-preview .device-label { width: min(342px, 88vw); }
  .device-preview-stage { width: 100%; padding-inline: 0; }
  .device-preview-stage .flagship-device {
    width: min(342px, 88vw);
    height: min(704px, calc(88vw * 2.06));
  }
}

/* Settings — concise workspace controls, aligned with the Iderwell settings reference. */
body:has(.settings-directory) .app-main,
body:has(.settings-stack) .app-main,
body:has(.settings-team-page) .app-main,
body:has(.payment-provider-page) .app-main { background: #fafaff; }
body:has(.settings-directory) .app-header,
body:has(.settings-stack) .app-header,
body:has(.settings-team-page) .app-header,
body:has(.payment-provider-page) .app-header { border-color: #e7e8f0; background: rgba(250,250,255,.92); }
.route-app .settings-directory { max-width: 992px; }
.route-app .settings-directory-intro { align-items: start; padding: 0 0 24px; border-color: #e5e6ee; }
.route-app .settings-directory-intro h2 { margin: 0 0 5px; color: #151926; font-size: 29px; letter-spacing: -.055em; }
.route-app .settings-directory-intro p { color: #697087; font-size: 11px; }
.route-app .settings-directory-group { margin-top: 27px; }
.route-app .settings-directory-group > h3 { margin-bottom: 9px; color: #3a4051; font-size: 11px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.route-app .settings-directory-group > div { border-color: #e3e5ee; border-radius: 9px; box-shadow: 0 1px 2px rgba(34,37,55,.015); }
.route-app .settings-directory-row { grid-template-columns: 40px minmax(0,1fr) 18px; min-height: 73px; gap: 13px; padding: 11px 15px; border-color: #ececf2; }
.route-app .settings-directory-row:hover { background: #faf9ff; }
.route-app .settings-directory-icon { width: 34px; height: 34px; border-radius: 9px; background: #f1edff; color: #6b3ff4; }
.route-app .settings-directory-icon .icon { width: 16px; }
.route-app .settings-directory-row strong { color: #202432; font-size: 11px; font-weight: 700; }
.route-app .settings-directory-row small { color: #70778c; font-size: 9px; }
.route-app .settings-directory-row > .icon { color: #8990a4; }

.route-app .settings-stack,
.route-app .settings-team-page { width: min(100%, 992px); gap: 22px; }
.route-app .payment-provider-page { --settings-accent: #0078d4; --settings-accent-soft: #eef7fe; }
.settings-page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 1px 0 2px; }
.settings-page-header > div:first-child { min-width: 0; }
.settings-page-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; color: #858ba0; font-size: 9px; font-weight: 650; }
.settings-page-breadcrumb a { color: #858ba0; text-decoration: none; }
.settings-page-breadcrumb a:hover { color: #0078d4; }
.settings-page-breadcrumb .icon { width: 11px; color: #b0b5c3; }
.settings-page-header h2 { margin: 0; color: #171b29; font-size: 29px; letter-spacing: -.055em; line-height: 1; }
.settings-page-header p { margin: 7px 0 0; color: #6b7286; font-size: 11px; }
.settings-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.route-app .settings-stack .button-primary,
.route-app .settings-team-page .button-primary,
.route-app .payment-provider-page .button-primary { border-color: #0078d4; background: #0078d4; box-shadow: none; }
.route-app .settings-stack .button-primary:not(:disabled):hover,
.route-app .settings-team-page .button-primary:not(:disabled):hover,
.route-app .payment-provider-page .button-primary:not(:disabled):hover { border-color: #5b30df; background: #5b30df; }
.route-app .settings-stack .button-secondary,
.route-app .settings-team-page .button-secondary,
.route-app .payment-provider-page .button-secondary { border-color: #e0e2eb; background: #fff; color: #353a4a; }
.route-app .settings-stack .surface,
.route-app .settings-team-page .surface,
.route-app .payment-provider-page .surface { border-color: #e2e4ed; border-radius: 10px; box-shadow: 0 1px 2px rgba(28,31,46,.018); }
.route-app .settings-stack .form-heading h2 { color: #202432; font-size: 16px; }
.route-app .settings-stack .form-heading p { color: #747b8d; font-size: 10px; line-height: 1.5; }
.route-app .settings-stack .form-section { border-color: #e9eaf0; }
.route-app .settings-stack .form-section h3 { color: #303545; }
.route-app .settings-stack input:not([type="checkbox"]):not([type="radio"]),
.route-app .settings-stack select,
.route-app .settings-stack textarea,
.route-app .payment-provider-page input:not([type="checkbox"]):not([type="radio"]),
.route-app .payment-provider-page select,
.route-app .payment-provider-page textarea { border-color: #dde0e9; border-radius: 8px; background: #fff; }
.route-app .settings-stack input:focus,
.route-app .settings-stack select:focus,
.route-app .settings-stack textarea:focus,
.route-app .payment-provider-page input:focus,
.route-app .payment-provider-page select:focus,
.route-app .payment-provider-page textarea:focus { border-color: #0078d4; box-shadow: 0 0 0 3px rgba(0,120,212,.14); }

.settings-team-page { display: grid; gap: 22px; }
.settings-tabs { display: flex; align-items: center; gap: 25px; overflow-x: auto; border-bottom: 1px solid #e1e3ec; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs button { display: inline-flex; min-height: 39px; align-items: center; gap: 7px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #697086; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.settings-tabs button .icon { width: 15px; }
.settings-tabs button[aria-selected="true"] { border-color: #0078d4; color: #003b7a; }
.settings-team-panel { min-width: 0; }
.settings-team-table { overflow: hidden; }
.settings-team-table > .surface-head { align-items: center; margin: 0; padding: 19px 21px 13px; border-bottom: 1px solid #ececf2; }
.settings-team-table > .surface-head h3 { margin: 0; color: #202432; font-size: 15px; letter-spacing: -.03em; }
.settings-team-table > .surface-head p { margin: 4px 0 0; color: #777d8f; font-size: 9px; }
.settings-team-table .table-wrap { padding: 0 18px 8px; }
.settings-team-table table { min-width: 760px; }
.settings-team-table th { color: #7b8294; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.settings-team-table td { color: #4e5567; font-size: 10px; }
.settings-team-table tbody tr + tr td { border-top-color: #ececf2; }
.route-app .settings-team-page .workspace-avatar,
.route-app .settings-team-page .member-identity .workspace-avatar { border-radius: 999px; background: #eef7fe; color: #0078d4; }
.route-app .settings-team-page .you-label { background: #eef7fe; color: #003b7a; }
.settings-role-guide { grid-template-columns: minmax(210px,.6fr) minmax(0,1.4fr); gap: 28px; padding: 22px; border-color: #e2e4ed; border-radius: 10px; box-shadow: 0 1px 2px rgba(28,31,46,.018); }
.settings-role-guide h3 { margin: 0; color: #202432; font-size: 16px; letter-spacing: -.035em; }
.settings-role-guide > div:first-child > p { margin: 6px 0 0; color: #747b8d; font-size: 10px; line-height: 1.5; }
.settings-role-guide article { border-color: #e6e7ef; border-radius: 9px; background: #fafaff; }
.settings-role-guide article strong { color: #2b3040; }

.route-app .operational-alerts { padding-top: 0; }
.route-app .operational-alerts-head { padding: 0 0 15px; border: 0; border-bottom: 1px solid #e3e5ee; border-radius: 0; background: transparent; box-shadow: none; }
.route-app .operational-alerts-head h2 { margin: 0; color: #202432; font-size: 16px; letter-spacing: -.03em; }
.route-app .operational-alerts-head p { margin-top: 5px; color: #747b8d; font-size: 10px; }
.route-app .notification-contact,
.route-app .notification-enrollment,
.route-app .notification-history { border-color: #e2e4ed; border-radius: 10px; box-shadow: 0 1px 2px rgba(28,31,46,.018); }
.route-app .billing-plan { border-radius: 10px; background: linear-gradient(135deg,#171a2a,#272044); box-shadow: none; }
.route-app .billing-plan > p { color: #c5c4d1; }
.route-app .billing-plan > div { border-color: #3d365a; color: #cac7d9; }
.route-app .billing-explainer > span { background: #eef7fe; color: #0078d4; }
.route-app .billing-explainer a { color: #003b7a; }

@media (max-width: 760px) {
  .route-app .settings-directory-intro h2,
  .settings-page-header h2 { font-size: 25px; }
  .settings-page-header { align-items: start; flex-direction: column; gap: 15px; }
  .settings-page-header-actions { justify-content: flex-start; }
  .settings-page-header-actions .button { width: 100%; }
  .route-app .settings-directory-row { min-height: 76px; }
  .settings-tabs { gap: 19px; }
  .settings-role-guide { grid-template-columns: 1fr; padding: 18px; }
  .settings-team-table > .surface-head { align-items: start; gap: 13px; flex-direction: column; }
  .settings-team-table > .surface-head .button { width: 100%; justify-content: center; }
}

body.theme-dark:has(.settings-directory) .app-main,
body.theme-dark:has(.settings-stack) .app-main,
body.theme-dark:has(.settings-team-page) .app-main,
body.theme-dark:has(.payment-provider-page) .app-main { background: #12131a; }
body.theme-dark .settings-page-header h2,
body.theme-dark .route-app .settings-directory-intro h2,
body.theme-dark .route-app .settings-directory-row strong,
body.theme-dark .settings-team-table > .surface-head h3,
body.theme-dark .settings-role-guide h3 { color: #f4f4fa; }
body.theme-dark .settings-page-header p,
body.theme-dark .settings-page-breadcrumb,
body.theme-dark .settings-page-breadcrumb a,
body.theme-dark .route-app .settings-directory-intro p,
body.theme-dark .route-app .settings-directory-row small { color: #a7aaba; }
body.theme-dark .route-app .settings-directory-group > div,
body.theme-dark .route-app .settings-stack .surface,
body.theme-dark .route-app .settings-team-page .surface,
body.theme-dark .route-app .payment-provider-page .surface { border-color: #30313c; background: #1a1b23; }
body.theme-dark .route-app .settings-directory-row:hover,
body.theme-dark .settings-role-guide article { background: #22232d; }
body.theme-dark .settings-tabs { border-color: #343540; }

/* Canonical workspace system — the final authority for signed-in Hotspot pages. */
.route-app {
  --cream: #fafafc;
  --paper: #ffffff;
  --ink: #171a23;
  --ink-2: #292d3a;
  --muted: #697084;
  --soft: #9298a8;
  --line: #e4e7ee;
  --line-strong: #ccd1dc;
  --green: #0078d4;
  --green-dark: #084a83;
  --green-bright: #50a8e8;
  --mint: #eef7fe;
  --mint-2: #f6faff;
  --blue: #0078d4;
  --violet: #0078d4;
  --sidebar: #05243f;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(21, 25, 38, .035);
  --shadow: 0 18px 48px rgba(21, 25, 38, .11);
  color: var(--ink);
}

.route-app,
.route-app .dashboard-shell,
.route-app .app-main,
.route-app .app-footer { background: var(--cream); }

.route-app .dashboard-shell { grid-template-columns: 216px minmax(0, 1fr); }
.route-app .app-main { min-width: 0; }
.route-app .app-sidebar {
  min-height: 100vh;
  padding: 20px 12px 14px;
  background: var(--sidebar);
  color: #aab1bd;
}
.route-app .sidebar-brand { padding: 2px 10px 20px; }
.route-app .sidebar-brand .brand-lockup,
.route-app .sidebar-brand .brand-lockup img { height: 28px; }
.route-app .sidebar-brand .brand-lockup img { width: 100px; }
.route-app .workspace-card {
  margin: 0 2px 19px;
  padding: 10px;
  border: 1px solid #29323d;
  border-radius: 8px;
  background: #171e27;
}
.route-app .workspace-card strong { color: #f5f7fa; font-size: 11px; }
.route-app .workspace-card small { color: #7f8998; font-size: 9px; }
.route-app .workspace-avatar,
.route-app .header-profile,
.route-app .sidebar-user > span,
.route-app .identity-cell > i,
.route-app .profile-avatar { background: #dceffd; color: #003b7a; }
.route-app .app-sidebar nav { gap: 16px; }
.route-app .sidebar-group { gap: 4px; }
.route-app .sidebar-group h2 {
  padding-inline: 10px;
  color: #667181;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}
.route-app .sidebar-group-links,
.route-app .sidebar-secondary { gap: 2px; }
.route-app .app-sidebar nav a,
.route-app .sidebar-secondary a {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #aab1bd;
  font-size: 11px;
  font-weight: 630;
}
.route-app .app-sidebar nav a:hover,
.route-app .sidebar-secondary a:hover { background: #1c2530; color: #fff; transform: none; }
.route-app .app-sidebar nav a.active,
.route-app .sidebar-secondary a.active {
  border: 0;
  background: #124b79;
  box-shadow: inset 3px 0 #50a8e8;
  color: #fff;
}
.route-app .app-sidebar nav a.active .icon,
.route-app .sidebar-secondary a.active .icon { color: #a8d5ff; }
.route-app .app-sidebar nav a.sidebar-launch-link:not(.active) {
  border: 1px solid #423967;
  background: #211f31;
  color: #eeeaff;
}
.route-app .sidebar-launch-badge { background: #eeeaff; color: #4b30c8; }
.route-app .sidebar-secondary { margin-top: 13px; padding-top: 12px; border-color: #29323d; }

.route-app .app-header {
  min-height: 72px;
  padding-inline: 36px;
  border-color: var(--line);
  background: rgba(250, 250, 252, .92);
  backdrop-filter: blur(16px);
}
.route-app .app-breadcrumb { color: #8b92a2; font-size: 8px; letter-spacing: .14em; }
.route-app .app-header h1 { color: var(--ink); font-size: 22px; font-weight: 690; letter-spacing: -.045em; }
.route-app .top-search,
.route-app .icon-button,
.route-app .profile-chip {
  border-color: #dde1e9;
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: none;
}
.route-app .icon-button:hover,
.route-app .profile-chip:hover { border-color: #c8cddd; background: #fff; }
.route-app .top-popover-panel { border-color: var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.route-app .profile-menu a:hover,
.route-app .profile-menu button:hover { background: var(--mint-2); color: var(--green-dark); }
.route-app .app-content { padding: 32px 36px 62px; }
.route-app .app-footer { padding-inline: 36px; border-color: var(--line); color: #8b92a2; }
.route-app .app-footer a { color: #626a7c; }

.route-app .surface,
.route-app .table-surface,
.route-app .operations-card,
.route-app .network-summary {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.route-app .button { min-height: 38px; border-radius: 7px; box-shadow: none; }
.route-app .button-primary { border-color: #0078d4; background: #0078d4; color: #fff; }
.route-app .button-primary:not(:disabled):hover { border-color: #084a83; background: #084a83; box-shadow: none; transform: none; }
.route-app .button-secondary { border-color: #d8dce6; background: #fff; color: #343949; }
.route-app .button-secondary:not(:disabled):hover { border-color: #b9bfcd; background: #fff; }
.route-app input:not([type="checkbox"]):not([type="radio"]),
.route-app select,
.route-app textarea { border-color: #d9dee8; border-radius: 7px; background: #fff; }
.route-app input:focus,
.route-app select:focus,
.route-app textarea:focus { border-color: #6546e2; box-shadow: 0 0 0 3px rgba(86, 54, 221, .11); }

/* Settings use one page header; workspace utilities float quietly above it. */
.workspace-settings-shell .app-main { position: relative; background: #fafafc; }
.workspace-settings-shell .app-header {
  position: absolute;
  top: 18px;
  right: 36px;
  z-index: 30;
  width: auto;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.workspace-settings-shell .app-header-title,
.workspace-settings-shell .top-search { display: none; }
.workspace-settings-shell .header-actions { gap: 7px; }
.workspace-settings-shell .icon-button,
.workspace-settings-shell .profile-chip { width: 36px; min-width: 36px; height: 36px; padding: 0; justify-content: center; }
.workspace-settings-shell .profile-copy,
.workspace-settings-shell .profile-chip > .icon { display: none; }
.workspace-settings-shell .profile-avatar { width: 25px; height: 25px; font-size: 8px; }
.workspace-settings-shell .app-content { padding: 29px 36px 56px; }
.workspace-settings-shell .app-footer { padding-inline: 36px; }

.route-app .settings-directory,
.route-app .settings-stack,
.route-app .settings-team-page,
.route-app .payment-provider-page { width: 100%; max-width: none; margin: 0; }
.route-app .settings-directory-intro { padding: 0 150px 0 0; border: 0; }
.route-app .settings-directory-intro h1,
.settings-page-header h1 {
  margin: 0;
  color: #171a23;
  font-size: 28px;
  font-weight: 690;
  letter-spacing: -.05em;
  line-height: 1.08;
}
.route-app .settings-directory-intro p,
.settings-page-header p,
.route-app .payment-provider-heading p { margin: 6px 0 0; color: #697084; font-size: 12px; line-height: 1.5; }
.route-app .settings-directory-group { margin-top: 21px; }
.route-app .settings-directory-group > h2 { margin: 0 0 8px; color: #414758; font-size: 12px; font-weight: 700; letter-spacing: -.01em; }
.route-app .settings-directory-group > div { overflow: hidden; border: 1px solid #e3e6ed; border-radius: 8px; background: #fff; box-shadow: none; }
.route-app .settings-directory-row {
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  min-height: 58px;
  gap: 12px;
  padding: 8px 14px;
  border-color: #eceef3;
}
.route-app .settings-directory-row:hover { background: #f8f7ff; }
.route-app .settings-directory-icon { width: 34px; height: 34px; border-radius: 8px; background: #eef7fe; color: #0078d4; }
.route-app .settings-directory-icon .icon { width: 16px; }
.route-app .settings-directory-row strong { color: #252936; font-size: 13px; font-weight: 680; }
.route-app .settings-directory-row small { color: #72798a; font-size: 11px; line-height: 1.35; }
.route-app .settings-directory-row > .icon { width: 14px; color: #9ba1af; }

.route-app .settings-stack,
.route-app .settings-team-page { display: grid; gap: 23px; }
.settings-page-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; min-height: 73px; padding: 0; }
.settings-page-header > div:first-child { min-width: 0; }
.settings-page-breadcrumb { display: flex; align-items: center; gap: 7px; margin: 0 0 13px; color: #8b92a2; font-size: 10px; font-weight: 620; }
.settings-page-breadcrumb a.settings-back { display: inline; color: #7b8293; font-size: inherit; font-weight: inherit; }
.settings-page-breadcrumb a:hover { color: #0078d4; }
.settings-page-breadcrumb .icon { width: 11px; color: #b2b7c3; transform: rotate(-90deg); }
.settings-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; padding-bottom: 1px; }
.route-app .settings-stack .surface,
.route-app .settings-team-page .surface,
.route-app .payment-provider-page .surface { border-color: #e2e5ec; border-radius: 8px; box-shadow: none; }
.route-app .settings-layout { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .65fr); gap: 22px; }
.route-app .settings-form { gap: 17px; padding: 23px 24px 24px; }
.route-app .settings-form > fieldset { gap: 17px; }
.route-app .settings-form label { color: #3e4453; }
.route-app .settings-readonly-note { margin: 0; padding: 11px 13px; border-radius: 7px; background: #f4f2ff; color: #62558e; font-size: 11px; }
.route-app .settings-form .form-section { gap: 14px; padding-top: 18px; border-color: #eceef3; }
.route-app .settings-form .form-section:first-child { padding-top: 0; border-top: 0; }
.route-app .settings-form .form-section h3 { color: #2d3240; font-size: 13px; }
.route-app .workspace-info { padding: 24px; text-align: left; }
.route-app .workspace-info .workspace-avatar.large { margin: 0; }
.route-app .workspace-info h3 { margin-top: 14px; font-size: 15px; }
.route-app .workspace-info > p { margin: 4px 0 16px; color: #755ce0; }
.route-app .workspace-info dl > div { min-height: 43px; padding: 8px 0; border-color: #eceef3; font-size: 11px; }
.route-app .settings-single { width: min(100%, 760px); max-width: none; gap: 16px; }

.settings-tabs { gap: 28px; min-height: 44px; border-color: #e1e4eb; }
.settings-tabs button { min-height: 44px; gap: 7px; color: #6e7586; font-size: 12px; font-weight: 660; }
.settings-tabs button[aria-selected="true"] { border-color: #0078d4; color: #003b7a; }
.settings-team-table > .surface-head { min-height: 65px; padding: 16px 20px 13px; border-color: #eceef3; }
.settings-team-table > .surface-head h3 { color: #252936; font-size: 15px; }
.settings-team-table > .surface-head p { margin-top: 4px; color: #72798a; font-size: 11px; }
.settings-team-table .table-wrap { padding: 0 18px 8px; }
.settings-team-table table { min-width: 760px; }
.settings-team-table th { color: #7a8192; font-size: 10px; font-weight: 690; letter-spacing: .02em; text-transform: none; }
.settings-team-table td { color: #4d5465; font-size: 11px; }
.settings-team-table tbody tr + tr td { border-top-color: #eceef3; }
.settings-role-guide { grid-template-columns: minmax(200px, .55fr) minmax(0, 1.45fr); gap: 24px; padding: 22px; border-color: #e2e5ec; border-radius: 8px; }
.settings-role-guide article { border-color: #e6e8ef; border-radius: 7px; background: #fafafc; }

.route-app .payment-provider-page { gap: 18px; }
.route-app .payment-provider-page > .settings-back { margin-bottom: -5px; color: #7b8293; font-size: 10px; }
.route-app .payment-provider-heading { padding: 0; }
.route-app .payment-provider-heading .eyebrow { display: none; }
.route-app .payment-provider-heading h2 { margin: 0; color: #171a23; font-size: 28px; letter-spacing: -.05em; }
.route-app .payment-provider-page .payment-connection-overview > header { padding: 21px 22px 18px; }
.route-app .payment-provider-page .payment-connection-facts { padding-inline: 22px; }
.route-app .payment-provider-page .payment-connection-facts > div { min-height: 64px; padding-block: 13px; }
.route-app .payment-provider-page .payment-next-action { padding: 17px 19px; border-radius: 8px; }
.route-app .payment-provider-grid { gap: 16px; }
.route-app .payment-provider-details,
.route-app .payment-provider-requirements { overflow: hidden; }
.route-app .payment-provider-details > summary,
.route-app .payment-provider-requirements > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 18px;
  color: #2b3040;
  cursor: pointer;
  list-style: none;
}
.route-app .payment-provider-details > summary::-webkit-details-marker,
.route-app .payment-provider-requirements > summary::-webkit-details-marker { display: none; }
.route-app .payment-provider-details > summary > span,
.route-app .payment-provider-requirements > summary > span { display: grid; gap: 3px; }
.route-app .payment-provider-details > summary strong,
.route-app .payment-provider-requirements > summary strong { font-size: 13px; }
.route-app .payment-provider-details > summary small,
.route-app .payment-provider-requirements > summary small { color: #7a8192; font-size: 10px; }
.route-app .payment-provider-details > summary > .icon,
.route-app .payment-provider-requirements > summary > .icon { width: 14px; color: #8b92a2; transition: transform .16s ease; }
.route-app .payment-provider-details[open] > summary,
.route-app .payment-provider-requirements[open] > summary { border-bottom: 1px solid #eceef3; }
.route-app .payment-provider-details[open] > summary > .icon,
.route-app .payment-provider-requirements[open] > summary > .icon { transform: rotate(180deg); }
.route-app .payment-provider-details > .payment-provider-grid { padding: 16px; }
.route-app .payment-provider-details .payment-readiness-panel,
.route-app .payment-provider-details .payment-account-panel { border-radius: 7px; }
.route-app .payment-provider-requirements-body > dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0 21px;
}
.route-app .payment-provider-requirements-body > dl > div { min-height: 104px; padding: 20px 18px 19px 0; }
.route-app .payment-provider-requirements-body > dl > div + div { padding-left: 18px; border-left: 1px solid #eceef3; }
.route-app .payment-readiness-panel > header,
.route-app .payment-account-panel > header,
.route-app .payment-credentials-panel > header,
.route-app .payment-provider-requirements > header { padding: 19px 21px 16px; }
.route-app .payment-readiness-panel .payment-capability-list { gap: 9px; padding: 15px 17px 17px; }
.route-app .payment-readiness-panel .payment-capability { min-height: 116px; padding: 14px; border-radius: 7px; }
.route-app .payment-account-panel dl { padding-inline: 21px; }
.route-app .payment-credentials-panel .settings-form { padding: 21px; }

.route-app .operational-alerts { padding-top: 0; }
.route-app .operational-alerts-head { padding: 0 0 14px; border: 0; border-bottom: 1px solid #e3e6ed; border-radius: 0; background: transparent; box-shadow: none; }
.route-app .operational-alerts-head h2 { margin: 0; color: #252936; font-size: 15px; }
.route-app .operational-alerts-head p { margin-top: 4px; color: #72798a; font-size: 11px; }
.route-app .notification-contact,
.route-app .notification-enrollment,
.route-app .notification-history { border-color: #e2e5ec; border-radius: 8px; box-shadow: none; }
.route-app .billing-plan { border-radius: 8px; background: #171e27; box-shadow: none; }
.route-app .billing-explainer > span { background: #eef7fe; color: #0078d4; }
.route-app .billing-explainer a { color: #003b7a; }

body.theme-dark.route-app {
  --cream: #11151b;
  --paper: #181e26;
  --ink: #f3f5f8;
  --ink-2: #e5e8ee;
  --muted: #a4acb9;
  --soft: #7e8796;
  --line: #2c3440;
  --line-strong: #414b59;
  --green: #65b8f2;
  --green-dark: #8ccaf5;
  --green-bright: #8ccaf5;
  --mint: #173b59;
  --mint-2: #152e43;
}
body.theme-dark.route-app,
body.theme-dark.route-app .dashboard-shell,
body.theme-dark.route-app .app-main,
body.theme-dark.route-app .app-footer { background: #11151b; }
body.theme-dark.route-app .app-sidebar { background: #0d1218; }
body.theme-dark.route-app .app-header { border-color: #2c3440; background: rgba(17, 21, 27, .92); }
body.theme-dark.route-app .surface,
body.theme-dark.route-app .table-surface,
body.theme-dark.route-app .settings-directory-group > div,
body.theme-dark.route-app .settings-stack .surface,
body.theme-dark.route-app .settings-team-page .surface,
body.theme-dark.route-app .payment-provider-page .surface { border-color: #2c3440; background: #181e26; }
body.theme-dark.route-app .settings-directory-intro h1,
body.theme-dark.route-app .settings-page-header h1,
body.theme-dark.route-app .settings-directory-row strong,
body.theme-dark.route-app .payment-provider-heading h2 { color: #f3f5f8; }
body.theme-dark.route-app .settings-directory-row:hover,
body.theme-dark.route-app .settings-role-guide article { background: #202733; }
body.theme-dark.route-app input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark.route-app select,
body.theme-dark.route-app textarea { border-color: #36404d; background: #151b22; color: #f3f5f8; }
body.theme-dark.route-app .button-secondary { border-color: #3a4553; background: #181e26; color: #eef1f5; }
body.theme-dark.route-app .workspace-settings-shell .app-header { background: transparent; }

@media (max-width: 1080px) {
  .route-app .app-content { padding-inline: 24px; }
  .route-app .app-header,
  .route-app .app-footer { padding-inline: 24px; }
  .workspace-settings-shell .app-header { right: 24px; padding: 0; }
  .workspace-settings-shell .app-content { padding-inline: 24px; }
  .route-app .settings-layout { grid-template-columns: minmax(0, 1fr) 230px; }
  .route-app .payment-provider-grid { grid-template-columns: 1fr; }
  .route-app .ussd-settings-layout,
  .route-app .premium-designer { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
}

@media (max-width: 820px) {
  .route-app .dashboard-shell { display: block; }
  .route-app .app-sidebar { width: min(86vw, 292px); }
  .route-app .app-header { min-height: 62px; padding-inline: 16px; }
  .route-app .app-content { padding: 24px 16px 48px; }
  .route-app .app-footer { padding-inline: 16px; }
  .workspace-settings-shell .app-header {
    position: sticky;
    top: 0;
    right: auto;
    width: 100%;
    min-height: 58px;
    padding-inline: 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(250, 250, 252, .96);
  }
  body.theme-dark.route-app .workspace-settings-shell .app-header { background: rgba(17, 21, 27, .96); }
  .workspace-settings-shell .mobile-menu { display: grid; }
  .workspace-settings-shell .header-actions .icon-button:first-child { display: none; }
  .workspace-settings-shell .app-content { padding: 22px 16px 46px; }
  .route-app .settings-directory-intro { padding-right: 0; }
  .route-app .settings-directory-intro h1,
  .settings-page-header h1,
  .route-app .payment-provider-heading h2 { font-size: 25px; }
  .route-app .settings-directory-group { margin-top: 20px; }
  .route-app .settings-directory-row { min-height: 64px; padding: 9px 12px; }
  .route-app .settings-directory-row small { font-size: 10px; }
  .settings-page-header { min-height: 0; align-items: start; flex-direction: column; gap: 15px; }
  .settings-page-header-actions { width: 100%; justify-content: flex-start; }
  .settings-page-header-actions .button { width: 100%; }
  .route-app .settings-layout,
  .route-app .ussd-settings-layout,
  .route-app .premium-designer { grid-template-columns: 1fr; }
  .route-app .settings-form { padding: 20px 18px; }
  .route-app .workspace-info { padding: 20px 18px; }
  .settings-tabs { gap: 22px; }
  .settings-tabs button { font-size: 11px; }
  .settings-role-guide { grid-template-columns: 1fr; padding: 18px; }
  .settings-team-table .table-wrap { overflow: visible; padding: 0 14px 14px; }
  .settings-team-table table,
  .settings-team-table tbody,
  .settings-team-table tr,
  .settings-team-table td { display: block; width: 100%; min-width: 0; }
  .settings-team-table thead { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .settings-team-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; padding: 17px 4px; border-top: 1px solid #eceef3; }
  .settings-team-table tbody td { padding: 0; border: 0; }
  .settings-team-table tbody td:first-child,
  .settings-team-table tbody td:last-child { grid-column: 1 / -1; }
  .settings-team-table tbody td:nth-child(2)::before,
  .settings-team-table tbody td:nth-child(3)::before,
  .settings-team-table tbody td:nth-child(4)::before { display: block; margin-bottom: 5px; color: #8a91a1; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .settings-team-table tbody td:nth-child(2)::before { content: 'Role'; }
  .settings-team-table tbody td:nth-child(3)::before { content: 'Status'; }
  .settings-team-table tbody td:nth-child(4)::before { content: 'Joined'; }
  .settings-team-table .table-actions { justify-content: flex-start; }
  .route-app .payment-provider-heading { display: grid; align-items: start; gap: 14px; }
  .route-app .payment-provider-heading .button { justify-self: start; }
  .route-app .payment-provider-page .payment-connection-overview > header { grid-template-columns: 48px minmax(0, 1fr); padding: 19px 17px 16px; }
  .route-app .payment-provider-page .provider-logo { width: 48px; height: 48px; }
  .route-app .payment-provider-page .payment-overall-state { grid-column: 2; justify-self: start; }
  .route-app .payment-provider-page .payment-connection-facts { grid-template-columns: 1fr 1fr; padding-inline: 17px; }
  .route-app .payment-provider-page .payment-connection-facts > div { padding-inline: 0 10px; }
  .route-app .payment-provider-page .payment-connection-facts > div + div { padding-left: 10px; }
  .route-app .payment-provider-page .payment-next-action { grid-template-columns: 40px minmax(0, 1fr); }
  .route-app .payment-provider-page .payment-next-action .button { grid-column: 2; justify-self: start; }
  .route-app .payment-readiness-panel .payment-capability-list,
  .route-app .payment-credential-fields { grid-template-columns: 1fr; }
  .route-app .payment-provider-details > .payment-provider-grid { padding: 12px; }
  .route-app .payment-provider-requirements-body > dl { grid-template-columns: 1fr; padding-inline: 17px; }
  .route-app .payment-provider-requirements-body > dl > div { min-height: 0; padding: 16px 0; }
  .route-app .payment-provider-requirements-body > dl > div + div { border-top: 1px solid #eceef3; border-left: 0; padding-left: 0; }
}

/* Settings product surface — shared hierarchy, components and responsive behavior. */
.workspace-settings-shell .app-content { display: flex; justify-content: center; }
.route-app .settings-directory { max-width: 920px; }
.route-app .settings-stack,
.route-app .settings-team-page,
.route-app .payment-provider-page { max-width: 1080px; }
.route-app .settings-stack,
.route-app .settings-team-page,
.route-app .payment-provider-page { gap: 24px; }

.route-app .sidebar-groups { flex: 1 1 auto; }
.route-app .sidebar-secondary { margin-top: auto; }

.settings-page-header { min-height: 82px; align-items: flex-end; }
.settings-page-header h1,
.route-app .settings-directory-intro h1 { font-size: 30px; font-weight: 680; line-height: 1.08; }
.settings-page-header p,
.route-app .settings-directory-intro p { max-width: 640px; font-size: 12px; }
.settings-page-breadcrumb { margin-bottom: 12px; }

.settings-status { display: inline-flex; align-items: center; gap: 7px; color: #667083; font-size: 11px; font-weight: 650; white-space: nowrap; }
.settings-status > i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #9ba3b1; box-shadow: 0 0 0 3px rgba(120,129,145,.09); }
.settings-status.is-positive { color: #236f53; }
.settings-status.is-positive > i { background: #26966b; box-shadow: 0 0 0 3px rgba(38,150,107,.1); }
.settings-status.is-warning { color: #925315; }
.settings-status.is-warning > i { background: #d18432; box-shadow: 0 0 0 3px rgba(209,132,50,.1); }

.route-app .settings-directory-group { margin-top: 20px; }
.route-app .settings-directory-group > h2 { margin-bottom: 9px; color: #555e70; font-size: 11px; letter-spacing: .01em; }
.route-app .settings-directory-group > div { border-color: #e1e4eb; }
.route-app .settings-directory-row { grid-template-columns: minmax(180px,240px) minmax(0,1fr) auto 16px; min-height: 58px; gap: 20px; padding: 9px 16px 9px 18px; }
.route-app .settings-directory-row:hover { background: #faf9fd; }
.route-app .settings-directory-row strong { font-size: 13px; }
.route-app .settings-directory-row small { margin: 0; font-size: 10px; line-height: 1.45; }
.settings-directory-state { display: flex; align-items: center; justify-content: flex-end; }

.settings-integration-header { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 20px; min-height: 78px; padding: 16px 18px; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-integration-identity { display: flex; min-width: 0; align-items: center; gap: 13px; }
.settings-integration-identity > span:last-child { display: grid; min-width: 0; gap: 3px; }
.settings-integration-identity strong { color: #242936; font-size: 14px; }
.settings-integration-identity small { overflow: hidden; color: #737c8d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.settings-integration-mark { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid #dfe3ea; border-radius: 7px; background: #fafbfc; color: #3b4352; font-size: 10px; font-weight: 700; letter-spacing: -.02em; }
.settings-integration-state { justify-self: end; }
.settings-integration-action { justify-self: end; }

.settings-inline-notice { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #dfe3ea; border-radius: 8px; background: #fff; }
.settings-inline-notice.is-warning { border-color: #ead8bd; background: #fffbf4; }
.settings-inline-notice.is-positive { border-color: #cfe5da; background: #f7fcf9; }
.settings-inline-notice-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #f0f2f5; color: #687285; }
.settings-inline-notice.is-warning .settings-inline-notice-icon { background: #f8ead6; color: #9a5b19; }
.settings-inline-notice.is-positive .settings-inline-notice-icon { background: #e4f3eb; color: #277658; }
.settings-inline-notice-icon .icon { width: 14px; }
.settings-inline-notice strong { display: block; color: #2a303e; font-size: 12px; }
.settings-inline-notice p { margin: 3px 0 0; color: #6e7788; font-size: 10px; line-height: 1.45; }
.settings-inline-notice-action a { color: #003b7a; font-size: 10px; font-weight: 680; }

.settings-section { border-top: 1px solid #e2e6ed; padding: 23px 0 4px; }
.settings-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 17px; }
.settings-section-header h2 { margin: 0; color: #272c39; font-size: 14px; font-weight: 680; letter-spacing: -.02em; }
.settings-section-header p { max-width: 610px; margin: 4px 0 0; color: #747d8d; font-size: 10px; line-height: 1.45; }
.settings-section-body { min-width: 0; }
.settings-section-action { flex: 0 0 auto; }

.settings-document { display: grid; overflow: hidden; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-document > fieldset { display: contents; margin: 0; padding: 0; border: 0; }
.settings-document > .settings-inline-notice { margin: 18px 22px 0; }
.settings-document .settings-section { padding: 22px 24px 23px; border-top: 1px solid #e8eaf0; }
.settings-document .settings-section:first-of-type { border-top: 0; }
.settings-document label,
.settings-credential-dialog label { display: grid; gap: 7px; color: #3f4655; font-size: 10px; font-weight: 660; }
.settings-document label > span,
.settings-credential-dialog label > span { color: #9097a5; font-weight: 540; }
.settings-form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 20px; }
.settings-form-grid-single { grid-template-columns: minmax(0, 520px); }
.settings-form-grid + label,
.settings-document .portal-skin-field + .portal-brand-source,
.settings-document .portal-brand-source + .settings-form-grid { margin-top: 17px; }
.settings-save-bar { display: flex; min-height: 68px; align-items: center; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid #e7eaf0; background: #fafbfc; }
.settings-dialog-note { margin: 2px 0; padding: 11px 12px; border-radius: 6px; background: #f4f5f8; color: #687183; font-size: 10px; line-height: 1.5; }
.settings-dialog-note.is-warning { background: #fff7ea; color: #83501c; }

.settings-key-values { margin: 0; }
.settings-key-values > div { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(0,1fr); align-items: center; gap: 24px; min-height: 48px; padding: 10px 0; border-top: 1px solid #eceef2; }
.settings-key-values > div:first-child { border-top: 0; }
.settings-key-values dt { color: #737b8b; font-size: 10px; }
.settings-key-values dd { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; color: #303644; font-size: 11px; text-align: right; }
.settings-key-values dd > span { display: grid; justify-items: end; gap: 3px; }
.settings-key-values dd small { color: #87909f; font-size: 9px; }
.settings-profile-meta { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-profile-meta > div { display: grid; grid-template-columns: auto 1fr; padding: 13px 17px; border: 0; }
.settings-profile-meta > div + div { border-left: 1px solid #e8eaf0; }

.settings-check-list { display: grid; }
.settings-check-row { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 0; border-top: 1px solid #eceef2; }
.settings-check-row:first-child { border-top: 0; }
.settings-check-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.settings-check-row strong { color: #303644; font-size: 11px; }
.settings-check-row small,
.settings-check-row time { color: #868e9c; font-size: 9px; }

.settings-disclosure { overflow: hidden; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-disclosure > summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 22px; padding: 12px 17px; cursor: pointer; list-style: none; }
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary > span { display: grid; gap: 3px; }
.settings-disclosure > summary strong { color: #303644; font-size: 12px; }
.settings-disclosure > summary small { color: #858d9c; font-size: 9px; }
.settings-disclosure > summary > .icon { width: 14px; color: #8992a0; transition: transform .16s ease; }
.settings-disclosure[open] > summary > .icon { transform: rotate(180deg); }
.settings-disclosure-body { padding: 7px 18px 18px; border-top: 1px solid #eceef2; }
.settings-disclosure-actions,
.settings-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.settings-compact-copy { margin: 8px 0 0; color: #747d8d; font-size: 10px; line-height: 1.5; }
.settings-compact-empty,
.settings-filter-empty { margin: 0; padding: 18px; color: #7c8493; font-size: 11px; text-align: center; }
.settings-compact-empty strong,
.settings-compact-empty span { display: block; }
.settings-compact-empty strong { color: #353c49; font-size: 11px; }
.settings-compact-empty span { margin-top: 4px; color: #7c8493; font-size: 9px; }

.payment-provider-page .settings-section,
.settings-billing-content > .settings-section,
.operational-alerts > .settings-section { padding: 22px 20px; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.payment-provider-page .settings-section + .settings-section,
.settings-billing-content > .settings-section + .settings-section,
.operational-alerts > .settings-section + .settings-section { margin-top: 0; }
.payment-provider-page .settings-section-header,
.settings-billing-content .settings-section-header,
.operational-alerts .settings-section-header { margin-bottom: 10px; }
.payment-hubtel-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 13px; border-radius: 7px; background: #f6f7f9; }
.payment-hubtel-request code { flex: 1 1 520px; color: #454c5c; font-size: 9px; line-height: 1.5; white-space: normal; }

.settings-tabs { min-height: 47px; gap: 31px; }
.settings-tabs button { min-height: 47px; padding: 0 1px; font-size: 11px; }
.route-app .settings-team-page { align-content: start; }
.settings-team-panel { outline: none; }
.settings-table-section { overflow: visible; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-table-toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e8eaf0; }
.settings-search { display: flex; width: min(320px,100%); min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dce0e8; border-radius: 7px; background: #fafbfc; }
.settings-search .icon { width: 14px; color: #9299a6; }
.settings-search input { min-width: 0; width: 100%; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; }
.settings-filter { margin-left: auto; }
.settings-filter select { min-width: 145px; }
.settings-table-section .table-wrap { overflow: visible; padding: 0 16px 8px; }
.settings-table-section table { width: 100%; min-width: 760px; }
.settings-table-section th { padding: 11px 8px 9px; color: #858d9b; font-size: 9px; font-weight: 680; letter-spacing: .03em; text-transform: none; }
.settings-table-section td { padding: 13px 8px; color: #4b5261; font-size: 10px; }
.settings-table-section tbody tr + tr td { border-top: 1px solid #eceef2; }
.settings-table-section th:last-child,
.settings-table-section td:last-child { width: 46px; text-align: right; }
.settings-filter-tabs { display: flex; gap: 3px; padding: 12px 14px; border-bottom: 1px solid #e8eaf0; }
.settings-filter-tabs button { display: inline-flex; min-height: 31px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #70798a; font-size: 9px; font-weight: 650; }
.settings-filter-tabs button small { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; background: #f0f2f5; color: #747d8c; font-size: 8px; }
.settings-filter-tabs button[aria-pressed="true"] { border-color: #bfdbef; background: #eef7fe; color: #003b7a; }
.settings-filter-tabs button[aria-pressed="true"] small { background: #0078d4; color: #fff; }
.settings-action-menu { position: relative; display: inline-block; text-align: left; }
.settings-action-menu > summary { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid transparent; border-radius: 6px; color: #747d8c; cursor: pointer; list-style: none; }
.settings-action-menu > summary::-webkit-details-marker { display: none; }
.settings-action-menu > summary:hover,
.settings-action-menu[open] > summary { border-color: #dce0e8; background: #f7f8fa; }
.settings-action-menu > summary .icon { width: 16px; }
.settings-action-menu > div { position: absolute; top: calc(100% + 5px); right: 0; z-index: 20; display: grid; min-width: 150px; padding: 5px; border: 1px solid #dfe3ea; border-radius: 7px; background: #fff; box-shadow: 0 12px 28px rgba(22,27,38,.12); }
.settings-action-menu button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #3d4453; font-size: 9px; font-weight: 620; text-align: left; }
.settings-action-menu button:hover { background: #f4f5f8; }
.settings-action-menu button.is-danger { color: #a23b3b; }
.settings-no-action { color: #a2a8b3; }

.settings-role-list { overflow: hidden; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-role-row { border-top: 1px solid #e8eaf0; }
.settings-role-row:first-child { border-top: 0; }
.settings-role-row > summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 17px; cursor: pointer; list-style: none; }
.settings-role-row > summary::-webkit-details-marker { display: none; }
.settings-role-row > summary > span:first-child { display: grid; gap: 4px; }
.settings-role-row > summary strong { color: #2d3340; font-size: 12px; }
.settings-role-row > summary small { color: #788191; font-size: 9px; }
.settings-role-meta { display: flex; align-items: center; gap: 11px; }
.settings-role-meta .icon { width: 14px; color: #9098a5; transition: transform .16s ease; }
.settings-role-row[open] .settings-role-meta .icon { transform: rotate(180deg); }
.settings-permission-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 25px; margin: 0; padding: 18px 17px 20px; border-top: 1px solid #eceef2; background: #fafbfc; }
.settings-permission-groups > div { min-width: 0; }
.settings-permission-groups dt { margin-bottom: 7px; color: #4d5564; font-size: 9px; font-weight: 700; }
.settings-permission-groups dd { display: grid; gap: 4px; margin: 0; }
.settings-permission-groups dd span { color: #7a8291; font-size: 9px; }

.portal-skin-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.portal-skin-option { padding: 10px !important; border-radius: 7px !important; }
.portal-skin-swatch { height: 42px; }
.portal-preview-disclosure .settings-disclosure-body { display: grid; justify-items: center; padding: 20px; }
.portal-preview-disclosure .premium-portal-preview { position: static; }

.settings-ussd-content { display: grid; gap: 18px; }
.settings-ussd-content > .settings-section { padding: 20px; border: 1px solid #e0e4eb; border-radius: 8px; background: #fff; }
.settings-ussd-content .settings-document .settings-section { padding: 22px 23px; border-width: 1px 0 0; border-radius: 0; }
.settings-ussd-content .settings-document .settings-section:first-child { border-top: 0; }
.settings-ussd-preview .settings-disclosure-body { display: grid; justify-items: center; }
.settings-ussd-preview .ussd-device-panel { position: static; }
.settings-ussd-preview .device-label { width: min(100%, 300px); }
.settings-ussd-preview .flagship-device { transform: scale(.82); transform-origin: top center; margin-bottom: -86px; }
.settings-verification-form { display: grid; grid-template-columns: minmax(0,1fr) 150px auto; align-items: end; gap: 12px; }
.settings-verification-form > div { display: grid; gap: 4px; align-self: center; }
.settings-verification-form > div small { color: #7d8594; font-size: 9px; }
.settings-test-form { display: flex; align-items: end; gap: 12px; margin-top: 13px; }
.settings-test-form label { flex: 1 1 260px; }
.settings-break-value { max-width: 620px; overflow-wrap: anywhere; }

.operational-alerts { display: grid; gap: 18px; }
.notification-matrix-wrap { overflow-x: auto; }
.notification-matrix { width: 100%; min-width: 620px; }
.notification-matrix th,
.notification-matrix td { padding: 11px 10px; border-top: 1px solid #eceef2; font-size: 9px; text-align: left; }
.notification-matrix thead th { border-top: 0; color: #737c8c; font-weight: 680; }
.notification-matrix tbody th { width: 42%; font-weight: 620; }
.notification-matrix tbody th strong,
.notification-matrix tbody th small { display: block; }
.notification-matrix tbody th strong { color: #353c49; font-size: 10px; }
.notification-matrix tbody th small { margin-top: 3px; color: #88909e; font-size: 8px; font-weight: 500; }
.notification-contact-list { border-top: 1px solid #eceef2; }
.notification-contact-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 18px; min-height: 64px; padding: 11px 0; border-bottom: 1px solid #eceef2; }
.notification-contact-row:last-child { border-bottom: 0; }
.notification-contact-identity { display: flex; align-items: center; gap: 11px; }
.notification-contact-identity > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #f1f3f6; color: #687285; }
.notification-contact-identity .icon { width: 14px; }
.notification-contact-identity > div { display: grid; gap: 3px; }
.notification-contact-identity strong { color: #303644; font-size: 11px; }
.notification-contact-identity small { color: #818998; font-size: 9px; }
.notification-verification-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) 140px auto; align-items: end; gap: 11px; padding: 13px; border-radius: 7px; background: #f7f8fa; }
.notification-verification-form > div { display: grid; gap: 3px; }
.notification-verification-form > div small { color: #7f8795; font-size: 9px; }
.notification-verification-form label { margin: 0; }
.notification-enrollment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.notification-event-options { padding: 0; border: 0; }
.notification-event-options > p { margin: 4px 0 10px; color: #7b8392; font-size: 9px; }
.notification-event-options > div { display: grid; gap: 7px; }
.notification-event-options label { display: flex; align-items: start; gap: 9px; }
.notification-event-options label span { display: grid; gap: 2px; }
.notification-event-options label small { color: #858d9a; font-size: 8px; }
.notification-event-options details { margin-top: 10px; }
.notification-event-options details summary { color: #003b7a; font-size: 9px; font-weight: 680; cursor: pointer; }
.notification-event-options details > div { display: grid; gap: 7px; margin-top: 9px; }
.notification-history .notification-delivery-list { margin-top: 8px; }

.settings-billing-content { display: grid; gap: 18px; }
.settings-billing-facts { display: grid; grid-template-columns: 1fr 1fr; }
.settings-billing-facts > div { grid-template-columns: minmax(130px,.6fr) minmax(0,1fr); padding: 12px 0; }
.settings-billing-facts > div:nth-child(2n) { padding-left: 22px; border-left: 1px solid #eceef2; }
.settings-billing-facts > div:nth-child(2) { border-top: 0; }
.settings-billing-checkout { display: grid; grid-template-columns: minmax(240px, 420px) auto; align-items: end; gap: 12px; }
.settings-billing-checkout label { display: grid; gap: 7px; color: #414857; font-size: 10px; font-weight: 650; }
.settings-billing-checkout .form-error { grid-column: 1 / -1; }
.settings-invoice-section .settings-section-body { overflow: hidden; }
.settings-invoice-section .table-wrap { padding: 0; }
.billing-invoice-number {
  max-width: 100%;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #003b7a;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.billing-invoice-number:hover { text-decoration: underline; }
.billing-invoice-number:focus-visible { outline: 2px solid #0078d4; outline-offset: 3px; }
.billing-invoice-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px 11px; flex-wrap: wrap; }
.billing-invoice-state { display: inline-flex; align-items: center; gap: 7px; color: #525a67; font-size: 10px; font-weight: 650; white-space: nowrap; }
.billing-invoice-state i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #89919d; }
.billing-invoice-state.is-paid { color: #1c6849; }
.billing-invoice-state.is-paid i { background: #25845f; }
.billing-invoice-state.is-due { color: #3f566e; }
.billing-invoice-state.is-due i { background: #4f7598; }
.billing-invoice-state.is-overdue { color: #a13d35; }
.billing-invoice-state.is-overdue i { background: #c94f44; }
.billing-invoice-loading { display: grid; min-height: 240px; place-content: center; justify-items: center; gap: 12px; color: #737c8b; }
.billing-invoice-loading .loader { width: 24px; height: 24px; }
.billing-invoice-error { display: grid; gap: 18px; }
.billing-invoice-error p { margin: 0; color: #5f6876; }
.billing-invoice-detail { color: #252b34; }
.billing-invoice-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding-bottom: 18px; }
.billing-invoice-heading > div { display: grid; gap: 5px; min-width: 0; }
.billing-invoice-heading > div > span,
.billing-invoice-parties > div > span { color: #747d8b; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.billing-invoice-heading > div > strong { font-size: 18px; overflow-wrap: anywhere; }
.billing-invoice-dates { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border-block: 1px solid #e8ebef; }
.billing-invoice-dates > div { padding: 13px 16px; border-left: 1px solid #e8ebef; }
.billing-invoice-dates > div:first-child { padding-left: 0; border-left: 0; }
.billing-invoice-dates dt,
.billing-invoice-payment dt { color: #7b8492; font-size: 9px; }
.billing-invoice-dates dd,
.billing-invoice-payment dd { margin: 4px 0 0; font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.billing-invoice-parties { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; padding: 20px 0; }
.billing-invoice-parties address { display: grid; gap: 3px; margin-top: 8px; color: #5f6876; font-size: 10px; font-style: normal; line-height: 1.5; }
.billing-invoice-parties address strong { color: #252b34; font-size: 12px; }
.billing-invoice-parties address a { color: #003b7a; text-decoration: none; }
.billing-invoice-parties address a:hover { text-decoration: underline; }
.billing-invoice-lines { overflow-x: auto; border: 1px solid #e5e8ed; border-radius: 8px; }
.billing-invoice-lines table { width: 100%; min-width: 610px; border-collapse: collapse; }
.billing-invoice-lines caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.billing-invoice-lines th,
.billing-invoice-lines td { padding: 12px 13px; border-top: 1px solid #eceef2; font-size: 10px; text-align: left; vertical-align: top; }
.billing-invoice-lines thead th { border-top: 0; background: #f7f8fa; color: #747d8b; font-size: 9px; font-weight: 650; }
.billing-invoice-lines th:last-child,
.billing-invoice-lines td:last-child { text-align: right; }
.billing-invoice-totals { width: min(100%, 340px); margin: 16px 0 0 auto; }
.billing-invoice-totals > div { display: flex; justify-content: space-between; gap: 24px; padding: 7px 0; color: #626b78; font-size: 10px; }
.billing-invoice-totals dt,
.billing-invoice-totals dd { margin: 0; }
.billing-invoice-totals dd { color: #252b34; font-weight: 650; }
.billing-invoice-totals .is-total { margin-top: 5px; padding-top: 12px; border-top: 1px solid #dfe3e8; color: #252b34; font-size: 13px; font-weight: 700; }
.billing-invoice-payment { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e8ebef; }
.billing-invoice-payment h3 { margin: 0 0 11px; font-size: 12px; }
.billing-invoice-payment dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 0; }
.billing-invoice-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e8ebef; flex-wrap: wrap; }

body.theme-dark.route-app .settings-integration-header,
body.theme-dark.route-app .settings-inline-notice,
body.theme-dark.route-app .settings-document,
body.theme-dark.route-app .settings-disclosure,
body.theme-dark.route-app .settings-table-section,
body.theme-dark.route-app .settings-role-list,
body.theme-dark.route-app .payment-provider-page .settings-section,
body.theme-dark.route-app .settings-billing-content > .settings-section,
body.theme-dark.route-app .operational-alerts > .settings-section,
body.theme-dark.route-app .settings-profile-meta,
body.theme-dark.route-app .settings-ussd-grid .settings-section { border-color: #303946; background: #181e26; }
body.theme-dark.route-app .settings-section,
body.theme-dark.route-app .settings-section-header,
body.theme-dark.route-app .settings-check-row,
body.theme-dark.route-app .settings-key-values > div,
body.theme-dark.route-app .notification-contact-row,
body.theme-dark.route-app .notification-matrix th,
body.theme-dark.route-app .notification-matrix td { border-color: #2d3541; }
body.theme-dark.route-app .settings-integration-identity strong,
body.theme-dark.route-app .settings-section-header h2,
body.theme-dark.route-app .settings-check-row strong,
body.theme-dark.route-app .settings-key-values dd,
body.theme-dark.route-app .settings-disclosure > summary strong,
body.theme-dark.route-app .settings-role-row > summary strong,
body.theme-dark.route-app .notification-contact-identity strong,
body.theme-dark.route-app .notification-matrix tbody th strong { color: #edf0f4; }
body.theme-dark.route-app .settings-integration-mark,
body.theme-dark.route-app .settings-save-bar,
body.theme-dark.route-app .settings-permission-groups,
body.theme-dark.route-app .notification-verification-form { border-color: #303946; background: #151b22; }
body.theme-dark.route-app .settings-action-menu > div { border-color: #384250; background: #1b222b; }
body.theme-dark.route-app .settings-action-menu button { color: #e7eaf0; }
body.theme-dark.route-app .billing-invoice-number,
body.theme-dark.route-app .billing-invoice-parties address a { color: #82c9f7; }
body.theme-dark.route-app .billing-invoice-detail,
body.theme-dark.route-app .billing-invoice-heading > div > strong,
body.theme-dark.route-app .billing-invoice-parties address strong,
body.theme-dark.route-app .billing-invoice-dates dd,
body.theme-dark.route-app .billing-invoice-payment dd,
body.theme-dark.route-app .billing-invoice-totals dd,
body.theme-dark.route-app .billing-invoice-totals .is-total { color: #edf0f4; }
body.theme-dark.route-app .billing-invoice-dates,
body.theme-dark.route-app .billing-invoice-dates > div,
body.theme-dark.route-app .billing-invoice-lines,
body.theme-dark.route-app .billing-invoice-lines :is(th,td),
body.theme-dark.route-app .billing-invoice-totals .is-total,
body.theme-dark.route-app .billing-invoice-payment,
body.theme-dark.route-app .billing-invoice-actions { border-color: #303946; }
body.theme-dark.route-app .billing-invoice-lines thead th { background: #151b22; color: #a7afba; }
body.theme-dark.route-app .billing-invoice-parties address,
body.theme-dark.route-app .billing-invoice-error p { color: #b8bec7; }
body.theme-dark.route-app #modal-root input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark.route-app #modal-root select,
body.theme-dark.route-app #modal-root textarea { border-color: #36404d !important; background: #151b22 !important; color: #f3f5f8 !important; }

@media (max-width: 960px) {
  .settings-ussd-preview .flagship-device { transform: scale(.92); margin-bottom: -34px; }
  .settings-permission-groups { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .route-app .modal-backdrop { align-items: end; padding: 0; }
  .route-app .modal,
  .route-app .modal-wide { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
  .settings-page-header h1,
  .route-app .settings-directory-intro h1 { font-size: 26px; }
  .settings-integration-header { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .settings-integration-action { grid-column: 1 / -1; justify-self: stretch; }
  .settings-integration-action .button { width: 100%; }
  .route-app .settings-directory-row { grid-template-columns: minmax(0,1fr) 16px; gap: 3px 12px; min-height: 66px; }
  .route-app .settings-directory-row small { grid-column: 1; }
  .settings-directory-state { grid-column: 1; justify-content: flex-start; margin-top: 5px; }
  .route-app .settings-directory-row > .icon { grid-column: 2; grid-row: 1 / span 3; }
  .settings-form-grid,
  .settings-form-grid-single,
  .notification-enrollment-fields { grid-template-columns: 1fr; }
  .settings-document .settings-section { padding: 20px 18px; }
  .settings-save-bar { padding-inline: 18px; }
  .settings-profile-meta { grid-template-columns: 1fr; }
  .settings-profile-meta > div + div { border-top: 1px solid #e8eaf0; border-left: 0; }
  .settings-section-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .settings-section-action,
  .settings-section-action .button { width: 100%; }
  .settings-inline-notice { grid-template-columns: 30px minmax(0,1fr); }
  .settings-inline-notice-action { grid-column: 2; }
  .settings-key-values > div { grid-template-columns: 1fr; gap: 5px; }
  .settings-key-values dd { justify-content: flex-start; text-align: left; }
  .settings-key-values dd > span { justify-items: start; }
  .settings-tabs { gap: 22px; }
  .settings-table-toolbar { align-items: stretch; flex-direction: column; }
  .settings-search { width: 100%; }
  .settings-filter { margin-left: 0; }
  .settings-filter select { width: 100%; }
  .settings-filter-tabs { overflow-x: auto; }
  .settings-table-section .table-wrap { overflow: visible; padding-inline: 13px; }
  .settings-table-section table,
  .settings-table-section tbody,
  .settings-table-section tr,
  .settings-table-section td { display: block; width: 100%; min-width: 0; }
  .settings-table-section thead { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .settings-table-section tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 18px; padding: 16px 2px; border-top: 1px solid #eceef2; }
  .settings-table-section tbody tr:first-child { border-top: 0; }
  .settings-table-section tbody td { width: auto !important; padding: 0; border: 0 !important; text-align: left !important; }
  .settings-table-section tbody td:first-child,
  .settings-table-section tbody td:last-child { grid-column: 1 / -1; }
  .settings-table-section tbody td:nth-child(2)::before,
  .settings-table-section tbody td:nth-child(3)::before,
  .settings-table-section tbody td:nth-child(4)::before,
  .invitation-table tbody td:nth-child(5)::before { display: block; margin-bottom: 5px; color: #8a92a0; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
  .settings-table-section tbody td:nth-child(2)::before { content: 'Role'; }
  .settings-table-section tbody td:nth-child(3)::before { content: 'Status'; }
  .settings-table-section tbody td:nth-child(4)::before { content: 'Joined'; }
  .invitation-table tbody td:nth-child(4)::before { content: 'Sent'; }
  .invitation-table tbody td:nth-child(5)::before { content: 'Outcome'; }
  .settings-action-menu > div { right: auto; left: 0; }
  .settings-permission-groups { grid-template-columns: 1fr; }
  .settings-role-row > summary { align-items: flex-start; }
  .settings-role-meta { align-items: flex-end; flex-direction: column-reverse; }
  .portal-skin-options { grid-template-columns: 1fr; }
  .settings-verification-form,
  .notification-verification-form { grid-template-columns: 1fr; align-items: stretch; }
  .settings-test-form { align-items: stretch; flex-direction: column; }
  .settings-billing-facts { grid-template-columns: 1fr; }
  .settings-billing-facts > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .settings-billing-facts > div:nth-child(2) { border-top: 1px solid #eceef2; }
  .settings-billing-checkout { grid-template-columns: 1fr; }
  .billing-invoice-row-actions { justify-content: flex-start; }
  .billing-invoice-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .billing-invoice-dates { grid-template-columns: 1fr; }
  .billing-invoice-dates > div,
  .billing-invoice-dates > div:first-child { padding: 11px 0; border-top: 1px solid #e8ebef; border-left: 0; }
  .billing-invoice-dates > div:first-child { border-top: 0; }
  .billing-invoice-parties { grid-template-columns: 1fr; gap: 18px; }
  .billing-invoice-payment dl { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 620px) {
  .billing-invoice-lines { overflow: visible; border: 0; border-radius: 0; }
  .billing-invoice-lines table,
  .billing-invoice-lines tbody { display: block; width: 100%; min-width: 0; }
  .billing-invoice-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .billing-invoice-lines tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; padding: 14px 0; border-block: 1px solid #e5e8ed; }
  .billing-invoice-lines tbody td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .billing-invoice-lines tbody td:first-child { grid-column: 1 / -1; }
  .billing-invoice-lines tbody td:last-child { text-align: left; }
  .billing-invoice-lines tbody td:nth-child(n+2)::before { display: block; margin-bottom: 4px; color: #7b8492; font-size: 9px; font-weight: 650; }
  .billing-invoice-lines tbody td:nth-child(2)::before { content: 'Basis'; }
  .billing-invoice-lines tbody td:nth-child(3)::before { content: 'Rate'; }
  .billing-invoice-lines tbody td:nth-child(4)::before { content: 'Amount'; }
  .billing-invoice-totals { width: 100%; }
}

/* Impeccable acceptance: readable operational type and reachable controls. */
body > .skip-link:focus {
  outline-color: #0078d4 !important;
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-offset: -3px !important;
}

.route-app .app-sidebar nav a,
.route-app .sidebar-secondary a {
  min-height: 40px;
  font-size: 13px;
}

.route-app .sidebar-group h2 {
  color: #7d8796;
  font-size: 10px;
}

.route-app .workspace-card small,
.route-app .app-breadcrumb,
.route-app small:not(.flagship-device small):not(.premium-portal-preview small):not(.portal-preview-scroll small),
.route-app th,
.route-app dt {
  font-size: 12px;
  line-height: 1.45;
}

.route-app p:not(.flagship-device p):not(.premium-portal-preview p):not(.portal-preview-scroll p) {
  font-size: 14px;
  line-height: 1.55;
}

.route-app label,
.route-app td,
.route-app dd,
.route-app summary,
.route-app button,
.route-app input:not([type="checkbox"]):not([type="radio"]),
.route-app select,
.route-app textarea {
  font-size: 14px;
}

.route-app input:not([type="checkbox"]):not([type="radio"]),
.route-app select {
  min-height: 42px;
}

.route-app .button { min-height: 40px; font-size: 14px; }
.route-app .settings-filter-tabs button,
.route-app .customer-filter-tabs button { min-height: 40px; }
.route-app .settings-action-menu > summary { width: 40px; height: 40px; }
.route-app .settings-action-menu button { min-height: 40px; }
.route-app .settings-search,
.route-app .customer-search-field { min-height: 42px; }

.route-app .overview-quick-actions button > strong,
.route-app .customer-managed-accesses article > header strong,
.route-app .customer-access-allowance strong,
.route-app .router-fleet-card .router-fleet-identity p,
.route-app .router-fleet-card > .router-health-copy,
.route-app .router-fleet-card > .router-fleet-telemetry,
.route-app .router-fleet-facts dd {
  font-size: 13px;
}

.route-app .settings-directory-row small,
.route-app .settings-integration-identity small,
.route-app .settings-inline-notice p,
.route-app .settings-section-header p,
.route-app .settings-key-values dt,
.route-app .settings-check-row small,
.route-app .settings-disclosure > summary small,
.route-app .settings-role-row > summary small,
.route-app .settings-permission-groups dt,
.route-app .settings-permission-groups dd span,
.route-app .notification-matrix,
.route-app .notification-contact-identity small,
.route-app .notification-event-options p,
.route-app .notification-event-options label small,
.route-app .notification-event-options details summary {
  color: #667083;
}

.route-app .settings-table-section th,
.route-app .report-table th,
.route-app .subscriber-table th {
  color: #626c7e;
}

.route-app :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid #0078d4;
  outline-offset: 3px;
}

/* Keep a visible fallback for browsers whose :focus-visible heuristic does not
   activate after an application-managed focus move. */
body:is(.route-app, .iderwell-public, .auth-page) :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus,
.iderwell-v2 :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus,
body.route-connect .captive-page :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus {
  outline-color: #0078d4;
  outline-style: solid;
  outline-width: 3px;
  outline-offset: 3px;
}

.route-app .top-search:focus-within,
.route-app .customer-search-field:focus-within,
.route-app .settings-search:focus-within {
  border-color: #0078d4;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .16);
}

body.theme-dark.route-app :is(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible { outline-color: #a8d5ff; }

/* Keep interface previews proportionate; their miniature type is not product UI. */
.route-app .flagship-device small,
.route-app .premium-portal-preview small,
.route-app .portal-preview-scroll small { font-size: 9px !important; }
.route-app .flagship-device p,
.route-app .premium-portal-preview p,
.route-app .portal-preview-scroll p { font-size: 10px !important; }
.route-app .flagship-device button,
.route-app .premium-portal-preview button,
.route-app .portal-preview-scroll button { font-size: 10px !important; }

/* Authentication and real captive journeys use the same readable floor. */
.auth-page .auth-form label { font-size: 13px; }
.auth-page small { font-size: 11px; line-height: 1.45; }
.auth-page .auth-form small,
.auth-page .auth-card > footer,
.auth-page .form-note { font-size: 12px; line-height: 1.5; }
.auth-page .auth-card > p { font-size: 14px; line-height: 1.55; }
.auth-page .auth-form input,
.auth-page .auth-form select,
.auth-page .auth-form textarea { min-height: 46px; font-size: 14px; }

body.route-connect .captive-page small { font-size: 11px !important; line-height: 1.4; }
body.route-connect .captive-page p { font-size: 12px; line-height: 1.5; }
body.route-connect .captive-page label,
body.route-connect .captive-page summary,
body.route-connect .captive-page button,
body.route-connect .captive-page input,
body.route-connect .captive-page select { font-size: 13px; }
body.route-connect .captive-page input,
body.route-connect .captive-page select { min-height: 48px; }

@media (max-width: 820px) {
  .route-app .app-sidebar {
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .route-app .app-sidebar.is-open {
    visibility: visible;
    transition-delay: 0s;
  }
  .route-app .app-content { overflow-x: clip; }
  .route-app .app-sidebar nav a,
  .route-app .sidebar-secondary a,
  .route-app .button,
  .route-app button:not(.flagship-device button):not(.premium-portal-preview button):not(.portal-preview-scroll button),
  .route-app summary:not(.flagship-device summary):not(.premium-portal-preview summary):not(.portal-preview-scroll summary),
  .route-app input:not([type="checkbox"]):not([type="radio"]),
  .route-app select {
    min-height: 44px;
  }
  .route-app .mobile-menu,
  .route-app .sidebar-brand > button,
  .route-app .icon-button,
  .route-app .profile-chip,
  .route-app .settings-action-menu > summary {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
  .route-app .profile-copy,
  .route-app .profile-chip > .icon { display: none; }
  .route-app input[type="color"] { width: 48px; min-width: 48px; }
  .route-app .router-port-pin {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .route-app .router-port-pin.is-selected { width: 46px; height: 46px; }
  .route-app .router-port-list button { min-height: 44px; }
  .route-app .settings-filter-tabs button,
  .route-app .customer-filter-tabs button,
  .route-app .settings-tabs button { min-height: 44px; }
  .route-app .settings-filter-tabs,
  .route-app .settings-tabs {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .route-app .settings-document .settings-section,
  .route-app .settings-save-bar,
  .route-app .payment-provider-page .settings-section,
  .route-app .settings-billing-content > .settings-section,
  .route-app .operational-alerts > .settings-section {
    padding-inline: clamp(14px, 4vw, 18px);
  }
  .auth-page .button,
  .auth-page button,
  .auth-page input:not([type="checkbox"]):not([type="radio"]),
  .auth-page select,
  .iderwell-public .public-menu-button,
  .iderwell-public .public-mobile-menu a,
  body.route-connect .captive-page button,
  body.route-connect .captive-page summary,
  body.route-connect .captive-page input,
  body.route-connect .captive-page select,
  body.route-connect .captive-page .button {
    min-height: 44px;
  }
  .auth-page .check-field { min-height: 44px; }
  .iderwell-public .public-menu-button {
    width: 44px !important;
    min-width: 44px !important;
  }
}

@media (max-width: 390px) {
  .route-app .app-content,
  .workspace-settings-shell .app-content { padding-inline: 12px; }
  .route-app .app-header,
  .workspace-settings-shell .app-header { padding-inline: 12px; }
  .route-app .settings-directory-row { padding-inline: 13px; }
  .route-app .settings-tabs { gap: 18px; }
  .route-app .settings-table-section tbody tr { grid-template-columns: 1fr; }
  .route-app .settings-table-section tbody td,
  .route-app .settings-table-section tbody td:first-child,
  .route-app .settings-table-section tbody td:last-child { grid-column: 1; }
  .route-app .notification-contact-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .route-app .notification-contact-row > .button { width: 100%; }
}

/* Tenant event explorer: one evidence timeline, one progressive detail pane. */
.activity-workspace { width: min(1180px, 100%); margin: 0 auto; }
.activity-intro { margin: 0; padding: 1px 0 15px; border-bottom: 1px solid var(--v2-line); color: var(--v2-muted); font-size: 13px; }
.activity-filters { display: grid; grid-template-columns: 150px 180px 165px minmax(240px, 1fr) auto; align-items: end; gap: 12px; padding: 18px 0 20px; }
.activity-filters > label { display: grid; min-width: 0; gap: 7px; color: #41434b; font-size: 12px; font-weight: 700; }
.activity-filters select,
.activity-filters input { width: 100%; height: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #cecec9; border-radius: 8px; background: var(--v2-paper); color: var(--v2-ink); font: inherit; font-weight: 500; }
.activity-filters select:focus-visible,
.activity-filters input:focus-visible { border-color: var(--v2-accent); outline: 3px solid rgba(103,87,217,.16); outline-offset: 1px; }
.activity-reference small { color: var(--v2-muted); font-size: 11px; font-weight: 500; line-height: 1.35; }
.activity-filter-actions { display: flex; gap: 8px; padding-bottom: 22px; }
.activity-filter-actions .button { min-height: 44px; }
.activity-filters > .form-error { grid-column: 1 / -1; margin: -8px 0 0; font-size: 12px; }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); align-items: start; gap: 22px; }
.activity-list,
.activity-detail { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 11px; background: var(--v2-paper); }
.activity-list > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.activity-list > header h2 { margin: 4px 0 0; color: var(--v2-ink); font-size: 18px; letter-spacing: -.025em; }
.activity-event { display: grid; grid-template-columns: 9px minmax(0, 1fr) minmax(150px, auto) 18px; align-items: center; gap: 13px; min-height: 72px; padding: 12px 17px; border-bottom: 1px solid #ecebe7; color: var(--v2-ink); text-decoration: none; }
.activity-event:last-of-type { border-bottom: 0; }
.activity-event:hover { background: #f8f7f3; }
.activity-event.is-selected { background: var(--v2-accent-soft); }
.activity-event:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(103,87,217,.24); outline-offset: -3px; }
.activity-outcome { width: 8px; height: 8px; border: 2px solid #8b8d94; border-radius: 50%; }
.activity-outcome.is-success { border-color: var(--v2-success); background: var(--v2-success); }
.activity-outcome.is-warning { border-color: var(--v2-warning); background: #fff7e9; }
.activity-outcome.is-error { border-color: var(--v2-danger); background: var(--v2-danger); }
.activity-event-copy,
.activity-event-meta { display: grid; min-width: 0; gap: 4px; }
.activity-event-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.activity-event-copy small,
.activity-event-meta time { overflow: hidden; color: var(--v2-muted); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.activity-event-meta { justify-items: end; text-align: right; }
.activity-event-meta strong { color: #4c4e57; font-size: 11px; font-weight: 700; }
.activity-event > .icon { width: 15px; color: #98999f; }
.activity-detail { position: sticky; top: 88px; }
.activity-detail > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; border-bottom: 1px solid var(--v2-line); }
.activity-detail > header h2 { margin: 4px 0 0; color: var(--v2-ink); font-size: 18px; letter-spacing: -.025em; }
.activity-detail > header a { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 7px; color: var(--v2-muted); }
.activity-detail > header a:hover { background: #f2f1ed; color: var(--v2-ink); }
.activity-detail > header a:focus-visible { outline: 3px solid rgba(103,87,217,.22); outline-offset: 1px; }
.activity-detail > header .icon { width: 17px; }
.activity-detail > p { margin: 0; padding: 14px 17px 3px; color: var(--v2-muted); font-size: 12px; line-height: 1.5; }
.activity-detail > section { padding-top: 3px; border-top: 1px solid #ecebe7; }
.activity-detail > section h3 { margin: 0; padding: 13px 17px 2px; color: var(--v2-ink); font-size: 12px; }
.activity-key-values { margin: 0; padding: 9px 17px 14px; }
.activity-key-values > div { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid #efeee9; }
.activity-key-values > div:last-child { border-bottom: 0; }
.activity-key-values dt { color: var(--v2-muted); font-size: 11px; }
.activity-key-values dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--v2-ink); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; text-align: right; }
.activity-technical { border-top: 1px solid #ecebe7; }
.activity-technical summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 17px; color: #42444c; cursor: pointer; font-size: 12px; font-weight: 700; }
.activity-technical summary .icon { width: 15px; transition: transform .16s ease; }
.activity-technical[open] summary .icon { transform: rotate(180deg); }
.activity-detail > footer { display: flex; padding: 14px 17px; border-top: 1px solid #ecebe7; }
.activity-detail-empty { min-height: 140px; }
.activity-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 7px; padding: 28px; color: var(--v2-muted); text-align: center; }
.activity-empty .icon { width: 24px; }
.activity-empty strong { color: var(--v2-ink); font-size: 13px; }
.activity-empty p { margin: 0; font-size: 12px; }
.activity-pager { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 17px; border-top: 1px solid var(--v2-line); }
.activity-pager small { color: var(--v2-muted); font-size: 11px; }
.activity-pager > div { display: flex; gap: 7px; }
.activity-pager a,
.activity-pager span { display: inline-flex; min-height: 36px; align-items: center; padding: 0 12px; border: 1px solid #d5d4cf; border-radius: 7px; color: var(--v2-ink); font-size: 11px; font-weight: 700; text-decoration: none; }
.activity-pager a:hover { border-color: #aaa9a4; background: #f7f6f2; }
.activity-pager span { color: #a0a19f; }
.iderwell-today-intro-actions { display: grid; justify-items: end; gap: 11px; }
.iderwell-today-intro-actions > a { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-accent); font-size: 12px; font-weight: 700; text-decoration: none; }
.iderwell-today-intro-actions > a .icon { width: 14px; }

body.theme-dark.route-app .activity-list > header h2,
body.theme-dark.route-app .activity-detail > header h2,
body.theme-dark.route-app .activity-detail > section h3,
body.theme-dark.route-app .activity-key-values dd,
body.theme-dark.route-app .activity-empty strong,
body.theme-dark.route-app .activity-event { color: #f2f1ed; }
body.theme-dark.route-app .activity-intro,
body.theme-dark.route-app .activity-list > header,
body.theme-dark.route-app .activity-detail > header,
body.theme-dark.route-app .activity-detail > section,
body.theme-dark.route-app .activity-technical,
body.theme-dark.route-app .activity-detail > footer,
body.theme-dark.route-app .activity-pager { border-color: #343840; }
body.theme-dark.route-app .activity-list,
body.theme-dark.route-app .activity-detail,
body.theme-dark.route-app .activity-filters input,
body.theme-dark.route-app .activity-filters select { border-color: #3b4049; background: #151b22; color: #f2f1ed; }
body.theme-dark.route-app .activity-event { border-color: #2d323a; }
body.theme-dark.route-app .activity-event:hover { background: #1d242c; }
body.theme-dark.route-app .activity-event.is-selected { background: #28243f; }
body.theme-dark.route-app .activity-event-meta strong,
body.theme-dark.route-app .activity-technical summary { color: #d7d7d5; }
body.theme-dark.route-app .activity-detail > header a:hover,
body.theme-dark.route-app .activity-pager a:hover { background: #242b33; }
body.theme-dark.route-app .activity-pager a,
body.theme-dark.route-app .activity-pager span { border-color: #3b4049; color: #e7e6e2; }

@media (max-width: 1120px) {
  .activity-filters { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .activity-reference { grid-column: 1 / 3; }
  .activity-filter-actions { align-self: end; padding-bottom: 22px; }
  .activity-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); }
}

@media (max-width: 860px) {
  .activity-layout { grid-template-columns: minmax(0, 1fr); }
  .activity-detail { position: static; grid-row: 1; }
}

@media (max-width: 640px) {
  .activity-filters { grid-template-columns: minmax(0, 1fr); }
  .activity-reference { grid-column: auto; }
  .activity-filter-actions { padding-bottom: 0; }
  .activity-filter-actions .button { flex: 1 1 0; }
  .activity-event { grid-template-columns: 9px minmax(0, 1fr) 18px; min-height: 82px; gap: 11px; padding-inline: 14px; }
  .activity-event-meta { grid-column: 2; grid-row: 2; grid-template-columns: auto 1fr; justify-items: start; gap: 8px; text-align: left; }
  .activity-event > .icon { grid-column: 3; grid-row: 1 / 3; }
  .activity-event-copy strong,
  .activity-event-copy small,
  .activity-event-meta time { white-space: normal; }
  .activity-detail > header a,
  .activity-pager a,
  .activity-pager span { min-width: 44px; min-height: 44px; }
  .activity-pager { align-items: start; flex-direction: column; }
  .iderwell-today-intro-actions { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .activity-technical summary .icon { transition: none; }
}

/* Competitor migration assessment and preparation */
.migration-workspace { display: grid; width: min(100%, 1040px); gap: 22px; margin: 0 auto; }
.migration-heading { display: grid; gap: 20px; }
.migration-heading > div { display: grid; gap: 6px; }
.migration-heading h2 { margin: 0; color: var(--v2-ink, #202126); font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; }
.migration-heading p,
.migration-section p { margin: 0; color: var(--v2-muted, #6d7078); }
.migration-section { display: grid; gap: 18px; padding: 22px 24px; border: 1px solid var(--v2-line, #e4e3de); border-radius: 10px; background: #fff; }
.migration-section > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--v2-line, #e4e3de); }
.migration-section > header > div { display: grid; gap: 4px; }
.migration-section h3 { margin: 0; color: var(--v2-ink, #202126); font-size: 18px; letter-spacing: -.015em; }
.migration-section > header > a { color: var(--v2-accent, #0078d4); font-size: 12px; font-weight: 700; }
.migration-key-values,
.migration-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.migration-key-values > div,
.migration-counts > div { display: grid; min-width: 0; gap: 5px; padding: 5px 18px; border-left: 1px solid var(--v2-line, #e4e3de); }
.migration-key-values > div:nth-child(3n+1),
.migration-counts > div:first-child { padding-left: 0; border-left: 0; }
.migration-key-values dt,
.migration-counts dt { color: var(--v2-muted, #6d7078); font-size: 11px; font-weight: 690; text-transform: uppercase; letter-spacing: .04em; }
.migration-key-values dd,
.migration-counts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--v2-ink, #202126); font-size: 13px; font-weight: 690; }
.migration-import-form,
.migration-action-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.15fr) auto; align-items: end; gap: 14px; }
.migration-import-form label,
.migration-action-form > label:not(.check-field) { display: grid; gap: 7px; min-width: 0; color: var(--v2-ink, #202126); font-size: 12px; font-weight: 680; }
.migration-import-form input,
.migration-action-form input:not([type="checkbox"]) { width: 100%; min-height: 42px; box-sizing: border-box; }
.migration-action-form .check-field { grid-column: 1 / -1; }
.migration-action-form .form-error,
.migration-import-form .form-error { grid-column: 1 / -1; }
.migration-boundary { display: flex; align-items: start; gap: 7px; padding: 12px 14px; border-left: 3px solid #d29a2e; background: #fff9eb; color: #675724; font-size: 12px; line-height: 1.55; }
.migration-boundary strong,
.migration-boundary span { display: block; }
.migration-preview-table { max-width: 100%; overflow: auto; border: 1px solid var(--v2-line, #e4e3de); border-radius: 8px; }
.migration-preview-table table { width: 100%; min-width: 640px; border-collapse: collapse; }
.migration-preview-table th,
.migration-preview-table td { padding: 11px 13px; border-bottom: 1px solid var(--v2-line, #e4e3de); text-align: left; font-size: 12px; }
.migration-preview-table th { color: var(--v2-muted, #6d7078); font-size: 10px; text-transform: uppercase; letter-spacing: .045em; }
.migration-preview-table tbody tr:last-child td { border-bottom: 0; }
.migration-confirm { display: grid; gap: 14px; }
.migration-confirm > div { display: flex; justify-content: end; gap: 9px; }

body.theme-dark.route-app .migration-heading h2,
body.theme-dark.route-app .migration-section h3,
body.theme-dark.route-app .migration-key-values dd,
body.theme-dark.route-app .migration-counts dd,
body.theme-dark.route-app .migration-import-form label,
body.theme-dark.route-app .migration-action-form > label { color: #f2f1ed; }
body.theme-dark.route-app .migration-section,
body.theme-dark.route-app .migration-preview-table { border-color: #343840; background: #151b22; }
body.theme-dark.route-app .migration-section > header,
body.theme-dark.route-app .migration-key-values > div,
body.theme-dark.route-app .migration-counts > div,
body.theme-dark.route-app .migration-preview-table th,
body.theme-dark.route-app .migration-preview-table td { border-color: #343840; }
body.theme-dark.route-app .migration-boundary { border-left-color: #d9a441; background: #272318; color: #e4d5a9; }

@media (max-width: 760px) {
  .migration-workspace { gap: 16px; }
  .migration-section { padding: 18px; }
  .migration-key-values { grid-template-columns: minmax(0, 1fr); }
  .migration-key-values > div,
  .migration-key-values > div:nth-child(3n+1) { padding: 10px 0; border: 0; border-top: 1px solid var(--v2-line, #e4e3de); }
  .migration-key-values > div:first-child { padding-top: 0; border-top: 0; }
  .migration-import-form,
  .migration-action-form { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .migration-import-form .button,
  .migration-action-form .button { min-height: 44px; }
}

@media (max-width: 420px) {
  .migration-section { padding: 16px 14px; border-inline: 0; border-radius: 0; }
  .migration-section > header { align-items: start; flex-direction: column; gap: 10px; }
  .migration-counts { grid-template-columns: minmax(0, 1fr); }
  .migration-counts > div,
  .migration-counts > div:first-child { grid-template-columns: 1fr auto; padding: 9px 0; border: 0; border-top: 1px solid var(--v2-line, #e4e3de); }
  .migration-counts > div:first-child { border-top: 0; }
  .migration-confirm > div { align-items: stretch; flex-direction: column-reverse; }
}

/* System-wide quality finish: legible states, restrained presentation and
   complete styling for the shared interaction primitives. */
:root {
  --v2-muted: #5b5d65;
}

/* The public introduction should establish the product without an oversized,
   decorative stage competing with its actual interface preview. */
.product-hero {
  min-height: 930px;
  padding-top: 146px;
  background: var(--v2-canvas);
}
.product-hero::before { display: none; }
.product-hero h1 {
  max-width: 920px;
  margin-block: 18px 22px;
  font-size: clamp(54px, 6.25vw, 82px);
  letter-spacing: -.065em;
  line-height: .96;
}
.product-hero-copy > p { color: #555861; }
.product-proof { color: #5b5d65; }
.product-hero-stage {
  margin-top: 58px;
  perspective: none;
}
.preview-browser {
  border-radius: 11px;
  box-shadow: 0 20px 54px rgba(27, 24, 48, .11), 0 2px 8px rgba(20, 20, 25, .06);
  transform: none;
}
.billing-hero { min-height: 650px; }
.billing-hero h1 {
  max-width: 820px;
  font-size: clamp(54px, 6.25vw, 82px);
  letter-spacing: -.065em;
  line-height: .96;
}
.auth-page.iderwell-v2 .auth-story::after { display: none; }
.marketing-phone,
.flagship-device {
  box-shadow: 0 24px 58px rgba(0, 0, 0, .24), inset 0 0 0 1px #4a4b53;
}

/* Public copy and the intentionally miniature interface previews still meet
   normal-text contrast. Miniature type is never used for real controls. */
.iderwell-public .product-kicker,
.seo-shell main > span { color: #5b43c6; }
.product-showcase-dark .product-kicker { color: #bfb5ff; }
.product-trust .product-kicker,
.product-trust p { color: #fff; }
.preview-browser-bar small,
.preview-browser-bar b,
.preview-workspace > section > header small,
.preview-status small,
.preview-metrics small,
.preview-metrics span,
.preview-chart header small,
.preview-feed header small,
.preview-feed > div small,
.preview-feed > div b,
.preview-feed header b,
.preview-empty-state small,
.marketing-screen > header small,
.marketing-screen > header p,
.marketing-packages small,
.marketing-options span,
.marketing-powered,
.network-console header small,
.network-console > header > b,
.network-vitals small,
.network-graph > span,
.network-reading > header span,
.network-reading > header small,
.network-reading article small,
.network-reading > p,
.network-console > footer { color: #5b5d65; }
.preview-empty-state strong { color: #444650; }
.preview-workspace aside nav small { color: #aaaab2; }
.iderwell-public .public-footer p,
.iderwell-public .public-footer a,
.iderwell-public .footer-base { color: #b8b7bd; }

/* Account access uses an accessible link/accent pair and reserves faint color
   for decoration, not instructions or consent. */
.auth-page.iderwell-v2 {
  --v2-accent: #5b43c6;
  --v2-muted: #5b5d65;
}
.auth-page.iderwell-v2 :is(.kicker, .auth-card a, .label-line a) { color: #5b43c6; }
.auth-page.iderwell-v2 .auth-story .kicker.light { color: #bfb5ff; }
.auth-page.iderwell-v2 .auth-story > small { color: #b8b7bd; }
.auth-page.iderwell-v2 :is(.auth-form small, .check-field, .check-field span, .form-note) { color: #5b5d65 !important; }
.auth-page.iderwell-v2 input::placeholder { color: #6b6d75; }

/* Shared password field. The action stays inside the input's visual boundary
   while remaining a real, focusable button with a stable control height. */
.password-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}
.password-field .label-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.password-field .label-line label { margin: 0; }
.password-field .label-line a {
  font-size: 12px;
  font-weight: 680;
}
.password-control {
  position: relative;
  display: grid;
  min-width: 0;
}
.password-control input { padding-right: 76px !important; }
.password-control [data-toggle-password] {
  position: absolute;
  inset: 4px 4px 4px auto;
  z-index: 1;
  display: inline-flex;
  min-width: 60px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #dddce2;
  border-radius: 5px;
  background: #f5f4f1;
  color: #4f3bb7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.password-control [data-toggle-password]:hover { background: #ece9fb; }
.password-control [data-toggle-password]:focus-visible {
  outline: 3px solid #0078d4;
  outline-offset: 2px;
}
.password-control [data-toggle-password]:disabled { color: #6b6d75; }
.password-field > small { color: #5b5d65; }
body.theme-dark:is(.route-app, .route-seller) .password-control [data-toggle-password] {
  border-left-color: #404149;
  background: #25262d;
  color: #c5bbff;
}

/* Stable, content-shaped asynchronous state. */
.loading-state {
  width: 100%;
  min-height: 330px;
  place-content: center stretch;
  justify-items: stretch;
  text-align: left;
}
.loading-state.is-branded {
  min-height: 430px;
  gap: 20px;
}
.loading-state.is-branded > .iderwell-brand-loader { justify-self: center; }
.loading-skeleton {
  display: grid;
  width: min(100%, 920px);
  margin-inline: auto;
  gap: 13px;
}
.skeleton-line,
.skeleton-summary > i,
.skeleton-table > i {
  display: block;
  overflow: hidden;
  border: 1px solid #e3e2dd;
  background: #ecebe7;
  animation: skeleton-pulse 1.35s ease-in-out infinite alternate;
}
.skeleton-line { height: 14px; border-radius: 4px; }
.skeleton-title { width: min(310px, 58%); height: 25px; }
.skeleton-copy { width: min(520px, 82%); }
.skeleton-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}
.skeleton-summary > i { height: 88px; border-radius: 8px; }
.skeleton-table {
  display: grid;
  overflow: hidden;
  margin-top: 5px;
  border: 1px solid #e3e2dd;
  border-radius: 8px;
  background: #fff;
}
.skeleton-table > i {
  height: 48px;
  border: 0;
  border-top: 1px solid #e8e7e2;
  border-radius: 0;
  background: #f1f0ec;
}
.skeleton-table > i:first-child { border-top: 0; }
@keyframes skeleton-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}
body.theme-dark.route-app :is(.skeleton-line, .skeleton-summary > i, .skeleton-table > i) {
  border-color: #34353d;
  background: #24252b;
}
body.theme-dark.route-app .skeleton-table { border-color: #34353d; background: #191a20; }

/* Restrained, useful 404 states for both the public site and workspace shell. */
.not-found-page {
  display: grid;
  min-height: max(650px, 76vh);
  align-items: center;
  padding: 142px 0 96px;
}
.not-found-page > .page-width { max-width: 760px; }
.not-found-page h1 {
  max-width: 650px;
  margin: 15px 0 14px;
  font-size: clamp(44px, 5.5vw, 68px);
  letter-spacing: -.06em;
  line-height: 1;
}
.not-found-page p {
  max-width: 560px;
  margin: 0;
  color: #5b5d65;
  font-size: 16px;
  line-height: 1.6;
}
.not-found-page .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.workspace-not-found {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  width: min(100%, 720px);
  min-height: 250px;
  align-content: center;
  margin: 0 auto;
  padding: 32px 0;
  border-block: 1px solid var(--line);
}
.workspace-not-found > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
}
.workspace-not-found > span .icon { width: 18px; }
.workspace-not-found h2 {
  margin: 6px 0 8px;
  font-size: 25px;
  letter-spacing: -.045em;
}
.workspace-not-found > div > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0 0 19px;
  color: var(--muted);
}

/* One settings heading works with either semantic level. */
.settings-page-header :is(h1, h2) {
  margin: 0;
  color: #171a23;
  font-size: 30px;
  font-weight: 680;
  letter-spacing: -.05em;
  line-height: 1.08;
}
.settings-page-breadcrumb,
.settings-page-breadcrumb a.settings-back,
.settings-page-breadcrumb [aria-current="page"] { color: #5e6170; }
body.theme-dark.route-app .settings-page-header :is(h1, h2) { color: #f3f5f8; }
body.theme-dark.route-app :is(.settings-page-breadcrumb, .settings-page-breadcrumb a.settings-back, .settings-page-breadcrumb [aria-current="page"]) { color: #b9c0cc; }

/* Operational muted text is information, not decoration. Keep it above AA in
   light and dark workspace themes, including zero-data and setup states. */
.route-app {
  --muted: #5e6170;
  --soft: #626a78;
  --v2-muted: #5b5d65;
}
.route-app :is(small, dt, .table-sub, .empty-inline, .iderwell-overline) { color: #5b5d65; }
.route-app .app-breadcrumb,
.route-app .app-footer { color: #5e6170; }
.route-app .app-footer a { color: #464b57; }
.route-app .iderwell-overline,
.route-app .iderwell-today-intro time,
.route-app .iderwell-today-stats dt { color: #62645f; }
.route-app :is(.iderwell-panel-empty, .state-card p, .customer-filter-empty p, .router-filter-empty p, .report-empty p, .settings-compact-empty, .settings-compact-empty span, .settings-filter-empty, .notification-empty p) { color: #5b5d65; }
.route-app .operator-summary-strip p { color: #60626b; }
.route-app :is(.launch-phase-rail small, .launch-phase > summary small, .launch-task small, .launch-readiness-list small, .launch-review-actions p, .launch-inline-tip p) { color: #5b5d65; }
.route-app :is(.onboarding-hero, .platform-banner, .support-center-hero, .team-hero, .ussd-hero) :is(.kicker, .eyebrow) { color: #bfb5ff; }
.route-app .onboarding-hero p { color: #c4c3c8; }
.route-app .completion > strong small,
.route-app .completion > span { color: #c4c3c8; }
.route-app .iderwell-next-step .iderwell-overline { color: #c1c0ba; }
.route-app label small,
.route-app .field-help { color: #5b5d65; }

body.theme-dark.route-app {
  --muted: #b5b5bb;
  --soft: #a8a9b1;
  --v2-muted: #b5b5bb;
  --v2-accent: #8ccaf5;
}
body.theme-dark.route-app :is(small, dt, .table-sub, .empty-inline, .iderwell-overline),
body.theme-dark.route-app :is(.app-breadcrumb, .app-footer, .state-card p, .iderwell-panel-empty, .settings-compact-empty, .settings-compact-empty span, .settings-filter-empty) { color: #b5b5bb; }
body.theme-dark.route-app .app-footer a { color: #e4e2ec; }
body.theme-dark.route-app .iderwell-next-step .iderwell-overline { color: #5e5e5a; }

/* Ordinary text links must remain comfortably tappable on compact layouts. */
@media (max-width: 820px) {
  .product-hero {
    min-height: auto;
    padding: 116px 0 70px;
  }
  .product-hero h1 { font-size: clamp(46px, 12vw, 64px); }
  .product-hero-stage {
    width: 760px !important;
    height: 376px;
    margin-top: 46px;
    transform: translateX(-10%);
  }
  .preview-browser { transform: scale(.62); transform-origin: left top; }
  .billing-hero { min-height: 570px; padding-top: 92px; }
  .billing-hero h1 { font-size: clamp(46px, 12vw, 64px); }
  .settings-page-header :is(h1, h2) { font-size: 26px; }
  .password-control input { min-height: 52px !important; }
  .password-control [data-toggle-password] { min-height: 44px !important; }
  .iderwell-public .footer-grid a,
  .auth-page.iderwell-v2 .auth-card > footer a,
  .auth-page.iderwell-v2 .label-line a,
  .route-app .app-footer a,
  .route-app .iderwell-today-panel > header > a,
  .route-app .iderwell-today-intro-actions > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .iderwell-public .billing-faq summary { min-height: 44px; }
  .skeleton-summary { grid-template-columns: 1fr; }
  .skeleton-summary > i { height: 66px; }
}

@media (max-width: 440px) {
  .product-hero-stage { transform: translateX(-6%); }
  .not-found-page { min-height: 590px; padding: 116px 0 70px; }
  .not-found-page .hero-actions { display: grid; }
  .workspace-not-found { grid-template-columns: 1fr; padding-block: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-summary > i,
  .skeleton-table > i { animation: none; opacity: .78; }
}

/* Quality-pass interaction states. */
.route-app .iderwell-today-stats dd {
  display: grid;
  gap: 3px;
}
.route-app .iderwell-today-stats dd > strong {
  color: inherit;
  font: inherit;
}
.route-app .iderwell-today-stats dd > small {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}
.settings-save-bar:has([data-save-state]) { justify-content: space-between; gap: 16px; }
.settings-save-bar [data-save-state] {
  color: #5b5d65;
  font-size: 12px;
  font-weight: 650;
}
form[data-dirty="true"] .settings-save-bar [data-save-state] { color: #7b4716; }
.toast.toast-action {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.toast.toast-action > span { display: grid; gap: 2px; }
.toast.toast-action > span small { color: #d8d9df; font-size: 11px; }
.toast.toast-action > button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #7671a9;
  border-radius: 6px;
  background: #f2f0ff;
  color: #30286b;
  font: inherit;
  font-weight: 700;
}
@media (max-width: 520px) {
  .settings-save-bar:has([data-save-state]) { align-items: stretch; flex-direction: column; }
  .settings-save-bar [data-save-state] { min-height: 22px; }
  .toast.toast-action { grid-template-columns: auto minmax(0, 1fr); }
  .toast.toast-action > button { grid-column: 2; justify-self: start; min-height: 44px; }
}

/* Bounded customer and seller-history collections. */
.voucher-pager > div > :is(a, span[aria-disabled="true"]) {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.voucher-pager > div > a:hover { border-color: var(--primary); color: var(--primary); }
.voucher-pager > div > span[aria-disabled="true"] { color: var(--muted); opacity: .62; }
.customer-directory-toolbar + .field-help { margin: -10px 18px 12px; }
.seller-history-search {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.seller-history-search > label { position: relative; }
.seller-history-search > label > .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.seller-history-search input { width: 100%; min-height: 44px; padding-left: 42px; }
.seller-history-search > small,
.seller-history-search > .form-error { grid-column: 1 / -1; margin: 0; }
.seller-history-pager { margin-top: 18px; }

@media (max-width: 640px) {
  .seller-history-search { grid-template-columns: 1fr 1fr; }
  .seller-history-search > label { grid-column: 1 / -1; }
  .seller-history-search > :is(.button, a) { width: 100%; justify-content: center; }
  .voucher-pager > div > :is(a, span[aria-disabled="true"]) { min-height: 44px; flex: 1; }
}