/* 2026 local redesign — public site, customer workbench and agent operations */
:root {
  --font-display: "Geist", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Geist", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
  --brand-blue: #065dff;
  --brand-blue-2: #0049d8;
  --brand-soft: #edf4ff;
  --canvas: #f4f7fb;
  --navy-950: #031226;
  --navy-900: #061a35;
  --navy-850: #092144;
  --hairline: #dce5f1;
  --panel-shadow: 0 18px 50px rgba(25, 55, 91, .10), 0 2px 8px rgba(25, 55, 91, .05);
  --panel-shadow-soft: 0 8px 30px rgba(25, 55, 91, .07);
}

html { font-family: var(--font-body); }
body { background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }

/* Public site */
body:has(#landingView:not([hidden])) .site-nav {
  position: absolute;
  inset: 22px 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body:has(#landingView:not([hidden])) .site-nav .nav-inner {
  min-height: 60px;
  padding: 6px 8px 6px 14px;
  border: 1px solid rgba(207, 219, 235, .86);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 40px rgba(23, 50, 83, .11);
  backdrop-filter: blur(16px);
}
body:has(#landingView:not([hidden])) .site-nav .brand { gap: 10px; font-size: 15px; font-weight: 760; letter-spacing: -.015em; }
body:has(#landingView:not([hidden])) .site-nav .brand img { width: 38px; height: 38px; border: 1px solid #cbd9ec; }
body:has(#landingView:not([hidden])) .site-nav .nav-links { gap: 3px; }
body:has(#landingView:not([hidden])) .site-nav .nav-link { min-height: 40px; padding: 0 16px; color: #2d3a4f; font-size: 13px; font-weight: 620; }
body:has(#landingView:not([hidden])) .site-nav .nav-link.active { color: var(--brand-blue); background: var(--brand-soft); }
body:has(#landingView:not([hidden])) .site-nav .button { min-height: 44px; padding-inline: 20px; box-shadow: 0 8px 20px rgba(6, 93, 255, .23); }

#landingView { min-height: 100dvh; color: #08111f; background: #fbfdff; overflow: hidden; }
#landingView > section { opacity: 0; transform: translateY(12px); transition: opacity .48s ease, transform .48s cubic-bezier(.16,1,.3,1); }
#landingView > section.is-visible, #landingView > section:first-child { opacity: 1; transform: none; }
#landingView .shell, body:has(#landingView:not([hidden])) .site-nav .shell { width: min(calc(100% - 48px), 1280px); }
.landing-hero {
  position: relative;
  min-height: 720px;
  display: grid;
  align-items: center;
  padding: 124px 0 64px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, transparent 0 34.8%, rgba(6,93,255,.055) 34.85% 34.95%, transparent 35% 100%),
    linear-gradient(145deg, #fff 0%, #fbfdff 62%, #f2f7ff 100%);
}
.landing-hero::before, .landing-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .28;
}
.landing-hero::before { inset: 0; background: linear-gradient(130deg, transparent 0 45%, rgba(6,93,255,.16) 45.1% 45.2%, transparent 45.3% 100%); }
.landing-hero::after { width: 360px; height: 360px; right: 14%; top: 12%; border: 1px solid rgba(6,93,255,.11); transform: rotate(45deg); }
.landing-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(450px, .92fr) minmax(520px, 1.08fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.landing-hero-copy { min-width: 0; }
.hero-kicker { margin: 0 0 24px; color: var(--brand-blue); font: 650 11px/1.2 var(--font-body); letter-spacing: .17em; }
.landing-hero h1 { max-width: 11.8ch; margin: 0; font: 790 clamp(48px, 4.65vw, 70px)/1.04 var(--font-display); letter-spacing: -.064em; }
.landing-hero h1 span { color: var(--brand-blue); }
.landing-lede { max-width: 500px; margin: 24px 0 0; color: #536176; font-size: 17px; line-height: 1.78; }
.landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.landing-actions .button { min-height: 50px; padding-inline: 24px; }
.landing-actions .button:first-child { box-shadow: 0 12px 26px rgba(6,93,255,.22); }
.landing-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 30px; color: #526279; font-size: 12px; font-weight: 650; }
.landing-facts span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--brand-blue); }

.route-console { position: relative; min-width: 0; padding: 22px; border: 1px solid #1b4f93; border-radius: 20px; background: var(--navy-950); color: #f3f8ff; box-shadow: 0 26px 70px rgba(1, 22, 50, .25), inset 0 1px 0 rgba(255,255,255,.09); }
.route-console::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(130deg, rgba(20,99,255,.12), transparent 44%); }
.route-console > header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; }
.route-console > header strong { font-size: 16px; }
.route-console > header span { color: #66e392; font-size: 11px; }
.route-console > header i, .route-node small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #24dc6d; box-shadow: 0 0 12px #24dc6d; }
.route-console-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 170px 115px minmax(220px, 1fr); gap: 12px; align-items: center; }
.route-nodes { display: grid; gap: 14px; }
.route-node { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 14px 12px; border: 1px solid #31537d; border-radius: 12px; background: #0a1d38; }
.route-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #0572ff; color: #fff; box-shadow: 0 0 16px rgba(5,114,255,.35); }
.route-node strong { display: block; font-size: 13px; }
.route-node small { display: block; margin-top: 5px; color: #48de79; font-size: 9px; }
.route-node small i { width: 4px; height: 4px; margin-right: 4px; }
.route-node em { grid-column: 2; color: #7f93ae; font-size: 9px; font-style: normal; }
.route-flow { position: relative; height: 270px; display: grid; place-items: center; }
.route-flow span { position: absolute; left: 0; right: 0; height: 1px; background: #1b80ff; box-shadow: 0 0 9px #1b80ff; transform-origin: left center; }
.route-flow span:nth-child(1) { top: 53px; transform: rotate(20deg); }
.route-flow span:nth-child(2) { top: 135px; }
.route-flow span:nth-child(3) { top: 216px; transform: rotate(-20deg); }
.route-flow span::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px #1680ff; animation: route-pulse 1.8s ease-in-out infinite; }
.route-flow b { position: relative; z-index: 2; padding: 7px 12px; border: 1px solid #1980ff; border-radius: 999px; background: #07347c; color: #d9eaff; font-size: 10px; box-shadow: 0 0 18px rgba(20,112,255,.55); }
.route-order { min-width: 0; padding: 15px; border: 1px solid #244870; border-radius: 14px; background: #07182f; }
.route-order-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #1e3553; font-size: 11px; }
.route-order-head span { color: #2786ff; }
.route-order dl { display: grid; gap: 8px; margin: 13px 0; }
.route-order dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.route-order dt { color: #8da0ba; }
.route-order dd { margin: 0; text-align: right; }
.route-order .route-phone { font: 600 17px/1.2 var(--font-mono); letter-spacing: -.04em; }
.route-code { padding-top: 12px; border-top: 1px solid #1e3553; }
.route-code > span, .route-code > b { font-size: 10px; }
.route-code > b { float: right; color: #ffc947; }
.route-code > div { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; margin-top: 12px; }
.route-code i { display: grid; place-items: center; height: 34px; border: 1px solid #244870; border-radius: 5px; font: 500 18px/1 var(--font-mono); font-style: normal; background: #0b1f3b; }
.route-code small { display: block; margin-top: 10px; color: #8da0ba; font-size: 9px; }
@keyframes route-pulse { 50% { opacity: .35; transform: scale(.72); } }

.landing-section { padding: 76px 0; background: #fff; }
.landing-section.alt { background: #f6f9fd; }
.landing-section-head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); gap: 32px; align-items: end; margin: 0 0 34px; }
.landing-section-head h2 { position: relative; margin: 0; font: 730 clamp(32px,3.4vw,48px)/1.08 var(--font-display); letter-spacing: -.045em; }
.landing-section-head h2::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 15px; border-radius: 99px; background: var(--brand-blue); }
.landing-section-head > p { max-width: 490px; margin: 0; color: #607088; line-height: 1.7; }
.capability-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.capability-card { position: relative; display: flex; flex-direction: column; min-height: 310px; padding: 22px; border: 1px solid var(--hairline); border-radius: 15px; background: #fff; box-shadow: var(--panel-shadow-soft); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.capability-icon { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 8px; background: linear-gradient(145deg,#4c91ff,#075eff); color: #fff; font: 700 14px/1 var(--font-mono); box-shadow: 0 8px 18px rgba(6,93,255,.22); }
.capability-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.capability-card > p { margin: 10px 0 16px; color: #66758b; font-size: 13px; line-height: 1.65; }
.mini-route-map { position: relative; display: grid; grid-template-rows: repeat(3,1fr); gap: 8px; margin-top: auto; padding: 8px 56px 8px 0; }
.mini-route-map i { width: 32px; height: 28px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 7px; color: var(--brand-blue); font: 700 10px/1 var(--font-mono); font-style: normal; background: #fff; }
.mini-route-map span { position: absolute; left: 35px; right: 44px; top: 50%; height: 1px; background: #8bb7ff; }
.mini-route-map b { position: absolute; right: 0; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; translate: 0 -50%; border-radius: 50%; background: var(--brand-blue); color: #fff; box-shadow: 0 8px 20px rgba(6,93,255,.25); }
.mini-number-list { display: grid; gap: 0; padding: 0; margin: auto 0 0; list-style: none; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.mini-number-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-top: 1px solid var(--hairline); font-size: 10px; }
.mini-number-list li:first-child { border-top: 0; }
.mini-number-list b { color: #13a058; }
.mini-code { margin-top: auto; padding: 14px; border-radius: 10px; background: var(--navy-950); color: #d6e7ff; font: 500 9px/1.7 var(--font-mono); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.mini-code span { float: right; padding: 1px 7px; border-radius: 99px; color: #8ff2b3; background: rgba(38,180,91,.18); }
.capability-card .service-points { display: grid; gap: 11px; padding: 0; margin: auto 0 16px; list-style: none; color: #34435b; font-size: 12px; }
.capability-card .service-points li::before { content: "◇"; margin-right: 9px; color: var(--brand-blue); }
.capability-card .button { min-height: 38px; width: 100%; }

.platform-section .landing-section-head .hero-kicker { margin-bottom: 12px; }
.portal-workbench { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); border: 1px solid #163861; border-radius: 20px; overflow: hidden; background: var(--navy-950); color: #f1f6ff; box-shadow: 0 26px 60px rgba(6,26,53,.17); }
.portal-workbench-copy { padding: clamp(32px,5vw,62px); background: #061831; }
.portal-workbench-copy > span { color: #48e488; font-size: 11px; letter-spacing: .08em; }
.portal-workbench-copy h3 { margin: 18px 0 12px; font-size: clamp(28px,3vw,42px); line-height: 1.12; letter-spacing: -.045em; }
.portal-workbench-copy p { margin: 0; color: #90a3bd; line-height: 1.75; }
.portal-workbench-copy .button { margin-top: 28px; }
.portal-task-list { display: grid; padding: 20px; background: #081d3b; }
.portal-task { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 17px; border-bottom: 1px solid #203d61; }
.portal-task:last-child { border-bottom: 0; }
.portal-task-index { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #0c3267; color: #76a9ff; font: 600 11px/1 var(--font-mono); }
.portal-task strong, .portal-task span { display: block; }
.portal-task div > span { margin-top: 4px; color: #8ea3bf; font-size: 12px; }
.portal-task-state { padding: 5px 9px; border: 1px solid #29558b; border-radius: 99px; color: #73a8ff; font-size: 10px; }
.process-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 16px; background: var(--hairline); }
.process-step { min-height: 190px; padding: 25px; background: #fff; }
.process-number { display: block; margin-bottom: 45px; color: var(--brand-blue); font: 600 11px/1 var(--font-mono); }
.process-step h3 { margin: 0; font-size: 18px; }
.process-step p { margin: 8px 0 0; color: #65748a; font-size: 13px; line-height: 1.65; }
.landing-contact { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 40px; align-items: center; padding: 44px; border: 1px solid var(--hairline); border-radius: 20px; background: #fff; box-shadow: var(--panel-shadow-soft); }
.landing-contact h2 { margin: 0; font-size: clamp(32px,4vw,52px); letter-spacing: -.05em; }
.landing-contact p { color: #65748a; }
.landing-contact-id { display: block; font: 650 20px/1.2 var(--font-mono); }
.landing-contact-qr { width: 160px; height: 160px; object-fit: cover; object-position: center; border-radius: 14px; border: 1px solid var(--hairline); }
.landing-mobile-actions { display: none; }
.landing-menu-button { display: none; }

@media (hover:hover) and (pointer:fine) {
  .capability-card:hover { transform: translateY(-3px); border-color: #b9cef0; box-shadow: var(--panel-shadow); }
  body:has(#landingView:not([hidden])) .site-nav .nav-link:hover { color: var(--brand-blue); background: var(--brand-soft); }
}

/* Customer/API workbench */
body:has(#appView.active) .site-nav { display: none; }
#appView.active { min-height: 100dvh; background: var(--canvas); }
#appView .app-layout { min-height: 100dvh; grid-template-columns: 230px minmax(0,1fr); }
#appView .sidebar { display: block; width: auto; padding: 20px 14px; border-color: var(--hairline); background: #fff; color: #132035; box-shadow: 6px 0 28px rgba(31,58,93,.045); }
#appView .sidebar-inner { position: sticky; top: 20px; height: calc(100dvh - 40px); grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: 18px; }
#appView .console-brand { padding: 4px 8px 16px; border-bottom: 1px solid var(--hairline); }
#appView .console-brand-mark { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 9px 22px rgba(6,93,255,.2); }
#appView .console-brand strong { color: #0b1423; font-size: 14px; }
#appView .console-brand span { color: #708097; }
#appView .console-online { margin: 0 6px; padding: 12px; border: 1px solid #d8eedf; border-radius: 12px; background: #effaf2; }
#appView .console-online strong { color: #198443; font-size: 12px; }
#appView .console-online span { color: #4d8a64; font-size: 10px; }
#appView .side-profile { margin: 0 6px; padding: 11px; border-color: var(--hairline); border-radius: 12px; background: #fff; color: #172236; box-shadow: none; }
#appView .side-profile img { width: 34px; height: 34px; border-color: var(--hairline); }
#appView .side-profile strong { font-size: 11px; }
#appView .side-email { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7a879a; }
#appView .side-nav { align-content: start; gap: 4px; overflow: auto; }
#appView .side-nav-label { margin: 14px 12px 5px; color: #8b97a9; font-size: 10px; letter-spacing: .08em; }
#appView .side-link { min-height: 46px; gap: 11px; padding: 0 14px; border: 0; border-radius: 10px; color: #536176; font-size: 13px; font-weight: 610; }
#appView .side-link.active { background: #edf3ff; color: var(--brand-blue); box-shadow: none; }
#appView .side-link.active::before { display: none; }
#appView .side-link .ui-icon { width: 17px; height: 17px; }
#appView .sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); }
#appView .sidebar-logout { min-height: 44px; border-color: var(--hairline); border-radius: 10px; color: #344156; background: #fff; }
#appView .sidebar-footer > span { display: block; margin-top: 8px; color: #9aa5b4; font-size: 9px; text-align: center; }

#appView .app-main { min-width: 0; max-width: 1500px; width: 100%; margin: 0 auto; padding: 0 28px 44px; }
#appView .app-toolbar { position: sticky; top: 0; z-index: 30; min-height: 78px; margin: 0 -28px 22px; padding: 12px 28px; border-bottom: 1px solid var(--hairline); background: rgba(248,250,253,.9); backdrop-filter: blur(16px); }
#appView .toolbar-heading { display: flex; align-items: center; gap: 12px; }
#appView .toolbar-eyebrow, #appView #pageDescription { display: none; }
#appView .app-toolbar h1 { font: 730 clamp(24px,3vw,34px)/1 var(--font-display); letter-spacing: -.045em; }
#appView .toolbar-balance { gap: 10px; }
#appView .toolbar-route-pill { min-height: 32px; padding: 0 10px; border: 1px solid #cbe9d6; border-radius: 99px; background: #effaf2; color: #188344; font-size: 11px; }
#appView .toolbar-route-pill > span { background: #1ebb60; }
#appView .toolbar-user { display: none; }
#appView .balance-chip { min-height: 42px; padding: 0 14px; border-color: var(--hairline); border-radius: 9px; box-shadow: none; }
#appView .balance-chip span { color: #778498; font-size: 11px; }
#appView .balance-chip strong { color: #111c2d; }
#appView .recharge-button, #appView .agent-button { min-height: 42px; border-radius: 9px; }
#appView .recharge-button { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

@media (min-width: 861px) {
  body.console-active #appView .sidebar {
    width: 236px;
  }

  body.console-active #appView .app-main {
    width: auto;
    max-width: none;
    margin-left: 236px;
  }
}
#appView .panel, #appView .metric, #appView .period-card { border-color: var(--hairline); border-radius: 14px; background: #fff; box-shadow: var(--panel-shadow-soft); }
#appView .panel-head h2, #appView .panel h2 { color: #121d2e; }

#section-extract .activation-center { gap: 16px; }
#section-extract .activation-center-head { align-items: center; }
#section-extract .activation-center-head h2 { font-size: 24px; }
#section-extract .activation-center-head p { font-size: 13px; }
#section-extract .notification-toggle { min-height: 40px; border-radius: 9px; }
#section-extract .activation-summary { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0; border: 0; background: transparent; gap: 10px; }
#section-extract .activation-summary > div { padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; box-shadow: var(--panel-shadow-soft); }
#section-extract .activation-summary span { color: #78869a; font-size: 10px; }
#section-extract .activation-summary strong { color: #132035; font-size: 17px; }
#section-extract .activation-workbench { grid-template-columns: minmax(280px,.68fr) minmax(480px,1.32fr); gap: 16px; align-items: stretch; }
#section-extract .activation-catalog { position: static; gap: 16px; padding: 18px; box-shadow: var(--panel-shadow); }
#section-extract .product-switcher { padding: 3px; border: 1px solid var(--hairline); border-radius: 9px; background: #f3f6fa; }
#section-extract .product-switch { min-height: 45px; border-radius: 7px; }
#section-extract .product-switch.active { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; box-shadow: 0 6px 15px rgba(6,93,255,.18); }
#section-extract .product-switch span { opacity: .76; }
#section-extract .product-title { gap: 12px; }
#section-extract .product-identity h3 { font-size: 18px; }
#section-extract .chatgpt-mark, #section-extract .product-code { width: 42px; height: 42px; border-radius: 10px; background: var(--navy-950); }
#section-extract .product-meta { gap: 8px; }
#section-extract .product-meta div { padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 9px; background: #f8fafc; }
#section-extract .activation-price { padding-top: 0; }
#section-extract .price-primary { font-size: clamp(36px,4.3vw,52px); }
#section-extract .price-detail { padding: 12px 0; font-size: 12px; }
#section-extract .route-feedback { border-radius: 10px; }
#section-extract .route-feedback-icon {
  display: inline-grid;
  flex: 0 0 42px;
  place-items: center;
  align-self: center;
  width: 42px;
  height: 42px;
  padding: 0;
  line-height: 0;
}
#section-extract .route-feedback-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: none;
  transform-origin: 50% 50%;
}
#section-extract #extractButton, #section-extract #extractUkButton { min-height: 50px; border-radius: 9px; box-shadow: 0 10px 24px rgba(6,93,255,.2); }

#section-extract .activation-live { position: relative; min-height: 530px; padding: 20px; border-color: #1d4b86; background: var(--navy-950); color: #f4f8ff; box-shadow: 0 20px 50px rgba(3,18,38,.2); overflow: hidden; }
#section-extract .activation-live::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg,rgba(20,93,255,.12),transparent 42%); }
#section-extract .activation-live > * { position: relative; z-index: 1; }
#section-extract .activation-live .panel-head { padding-bottom: 14px; border-bottom: 1px solid #234160; }
#section-extract .activation-live .panel-head h2 { color: #f5f8ff; }
#section-extract .activation-live .panel-head p { color: #8da1bc; }
#section-extract .activation-live .live-indicator { border: 1px solid #17447b; background: #072d5f; color: #67a5ff; }
#section-extract .activation-live .order-card { padding: 17px 0; border-color: #24405f; color: #f4f8ff; }
#section-extract .activation-live .order-card:first-child { padding-top: 2px; }
#section-extract .activation-live .order-kind-code { background: #0c315e; color: #9fc5ff; }
#section-extract .activation-live .order-time, #section-extract .activation-live .order-details span { color: #8297b2; }
#section-extract .activation-live .order-phone { color: #fff; font-size: clamp(22px,3vw,34px); }
#section-extract .activation-live .order-state-note { border: 1px solid #234160; background: #0a203d; color: #a8b7ca; }
#section-extract .activation-live .status { border-color: #275b97; background: #0b315f; color: #7db2ff; }
#section-extract .activation-live .status.received, #section-extract .activation-live .order-code-box { border-color: #1f7650; background: #0c392c; color: #74e6a8; }
#section-extract .activation-live .button { border-color: #315273; background: #0b203c; color: #eaf2ff; }
#section-extract .activation-live .button.danger { border-color: #853c4b; color: #ff707c; }
#section-extract .activation-live .empty-state { border-color: #294867; color: #8398b5; }
#section-extract .activation-live .pagination { color: #92a6c0; }

#section-records .record-archive { padding: 24px; }
#section-records .records-toolbar { padding: 10px; border: 1px solid var(--hairline); border-radius: 12px; background: #f6f8fb; }
#section-records .record-row { padding: 16px 0; }
#section-records .record-row-summary { grid-template-columns: minmax(180px,1.35fr) minmax(135px,.9fr) minmax(120px,.8fr) minmax(165px,.9fr) auto; gap: 18px; align-items: center; }
#section-records .record-phone { color: #162236; }
#section-records .record-open { border-radius: 8px; }

#section-dashboard .dashboard-command { border-radius: 16px; background: var(--navy-950); box-shadow: 0 20px 50px rgba(3,18,38,.17); }
#section-dashboard .dashboard-simple-stat, #section-dashboard .dashboard-orders, #section-dashboard .dashboard-shortcuts { border-color: var(--hairline); box-shadow: var(--panel-shadow-soft); }

/* Agent operations center. This view intentionally exposes no supplier identity. */
#section-agent-mode .agent-shell { gap: 15px; }
#section-agent-mode .agent-hero { position: relative; min-height: 154px; padding: 28px 30px; border: 1px solid var(--hairline); border-radius: 17px; background: #fff; color: #142035; box-shadow: var(--panel-shadow-soft); overflow: hidden; }
#section-agent-mode .agent-hero::after { content: ""; position: absolute; inset: auto -70px -90px auto; width: 250px; height: 250px; border: 46px solid rgba(19,104,255,.055); border-radius: 50%; pointer-events: none; }
#section-agent-mode .agent-hero-copy { position: relative; z-index: 1; max-width: 630px; }
#section-agent-mode .agent-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #17734c; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#section-agent-mode .agent-eyebrow i, #section-agent-mode .agent-route-state i { width: 7px; height: 7px; border-radius: 50%; background: #18b96e; box-shadow: 0 0 0 5px rgba(24,185,110,.11); }
#section-agent-mode .agent-hero h2 { font-size: clamp(28px,3.2vw,42px); letter-spacing: -.052em; }
#section-agent-mode .agent-hero p { max-width: 570px; margin-top: 11px; color: #718097; font-size: 14px; line-height: 1.75; }
#section-agent-mode .agent-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; }
#section-agent-mode .agent-hero-balance { min-width: 136px; text-align: left; }
#section-agent-mode .agent-hero-balance span { color: #718097; font-size: 11px; font-weight: 700; letter-spacing: .035em; }
#section-agent-mode .agent-hero-balance strong { margin-top: 5px; color: #10203a; font-size: 30px; letter-spacing: -.035em; }
#section-agent-mode .agent-hero-primary { min-height: 48px; padding-inline: 20px; border-radius: 10px; box-shadow: 0 12px 26px rgba(19,104,255,.2); }
#section-agent-mode .agent-hero-primary span { margin-left: 12px; }
#section-agent-mode .agent-stats { gap: 12px; }
#section-agent-mode .agent-stat { position: relative; min-height: 138px; padding: 18px 19px; border-color: var(--hairline); border-radius: 14px; box-shadow: var(--panel-shadow-soft); overflow: hidden; }
#section-agent-mode .agent-stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--stat-color,var(--brand-blue)); opacity: .72; }
#section-agent-mode .agent-stat[data-tone="blue"] { --stat-color: #1768ff; --stat-soft: #e9f1ff; }
#section-agent-mode .agent-stat[data-tone="indigo"] { --stat-color: #5d58e8; --stat-soft: #efefff; }
#section-agent-mode .agent-stat[data-tone="green"] { --stat-color: #16a867; --stat-soft: #e8f8f0; }
#section-agent-mode .agent-stat[data-tone="violet"] { --stat-color: #9852d8; --stat-soft: #f5ecfc; }
#section-agent-mode .agent-stat[data-tone="amber"] { --stat-color: #dd8915; --stat-soft: #fff3df; }
#section-agent-mode .agent-stat .agent-stat-label { display: flex; align-items: center; gap: 9px; color: #65738a; font-size: 12px; font-weight: 700; }
#section-agent-mode .agent-stat-label i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--stat-soft); color: var(--stat-color); font-size: 10px; font-style: normal; font-weight: 900; }
#section-agent-mode .agent-stat strong { color: #101b2d; margin-top: 12px; font-size: 29px; letter-spacing: -.035em; }
#section-agent-mode .agent-stat small { display: block; margin-top: 4px; color: #8a96a8; font-size: 10px; }
#section-agent-mode .agent-tabs { padding: 5px; border-color: var(--hairline); border-radius: 12px; box-shadow: var(--panel-shadow-soft); }
#section-agent-mode .agent-tab { flex: 1 1 0; min-height: 44px; border-radius: 8px; font-size: 12px; }
#section-agent-mode .agent-tab-custom { font-size: 0; }
#section-agent-mode .agent-tab-custom > span { font-size: 12px; }
#section-agent-mode .agent-tab.active { background: var(--brand-blue); }
#section-agent-mode .agent-two-column { grid-template-columns: minmax(0,1.22fr) minmax(300px,.78fr); }
#section-agent-mode .agent-pane .panel { box-shadow: var(--panel-shadow-soft); }
#section-agent-mode .agent-pane[data-agent-pane="overview"] .agent-two-column > .panel:first-child { min-height: 410px; }
#section-agent-mode .agent-pane[data-agent-pane="overview"] .agent-two-column > .panel:last-child { background: #fff; }
#section-agent-mode .agent-list-row { border-color: var(--hairline); border-radius: 10px; box-shadow: none; }
#section-agent-mode .agent-toolbar input, #section-agent-mode .agent-toolbar select { border-color: var(--hairline); border-radius: 9px; }
#section-agent-mode .agent-price { border-color: var(--hairline); border-radius: 10px; background: #f8fafc; }
#section-agent-mode .agent-panel-kicker { display: block; margin-bottom: 7px; color: #7c8ba0; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
#section-agent-mode .agent-activity-panel { position: relative; border-color: #102846; background: #07172b; color: #f4f8ff; overflow: hidden; }
#section-agent-mode .agent-activity-panel::before { content: ""; position: absolute; inset: -150px -170px auto auto; width: 330px; height: 330px; border: 1px solid rgba(73,145,255,.2); border-radius: 50%; box-shadow: 0 0 70px rgba(22,104,255,.11); pointer-events: none; }
#section-agent-mode .agent-activity-panel .panel-head { position: relative; z-index: 1; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid #1b3552; }
#section-agent-mode .agent-activity-panel .panel-head h2 { color: #fff; font-size: 23px; }
#section-agent-mode .agent-activity-panel .agent-panel-kicker { color: #6f91bc; }
#section-agent-mode .agent-panel-actions { display: flex; align-items: center; gap: 10px; }
#section-agent-mode .agent-route-state { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding-inline: 11px; border: 1px solid #214263; border-radius: 9px; color: #75dca7; background: #0a213b; font-size: 10px; font-weight: 750; }
#section-agent-mode .agent-activity-panel .button.secondary { min-height: 34px; padding-inline: 12px; border-color: #2a4868; background: transparent; color: #cbd9e9; font-size: 10px; }
#section-agent-mode .agent-activity-caption { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0 7px; color: #8095af; font-size: 10px; }
#section-agent-mode .agent-activity-caption strong { color: #69a7ff; font-size: 11px; }
#section-agent-mode .agent-activity-panel .agent-list-row { position: relative; z-index: 1; min-height: 69px; margin: 0; padding: 13px 0; border: 0; border-bottom: 1px solid #18314c; border-radius: 0; background: transparent; color: #edf5ff; }
#section-agent-mode .agent-activity-panel .agent-list-row.waiting, #section-agent-mode .agent-activity-panel .agent-list-row.received, #section-agent-mode .agent-activity-panel .agent-list-row.cancelled { background: transparent; }
#section-agent-mode .agent-activity-panel .agent-code { color: #f2f7ff; font-size: 12px; }
#section-agent-mode .agent-activity-panel .row-meta { color: #758ba7; font-size: 9px; }
#section-agent-mode .agent-activity-panel .status { border: 1px solid #2d4a69; background: #0a2039; color: #a9bad0; }
#section-agent-mode .agent-activity-panel .status.received { border-color: #276649; background: #0b3328; color: #6ee0a3; }
#section-agent-mode .agent-activity-panel .status.waiting { border-color: #775522; background: #33250f; color: #f0bd63; }
#section-agent-mode .agent-activity-panel .empty-state { position: relative; z-index: 1; min-height: 220px; border-color: #203b59; background: transparent; color: #738aa5; }
#section-agent-mode .agent-command-panel { padding: 24px; }
#section-agent-mode .agent-command-panel .panel-head h2 { font-size: 23px; }
#section-agent-mode .agent-command-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
#section-agent-mode .agent-command-button { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; color: #172239; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background-color .18s ease; }
#section-agent-mode .agent-command-button > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: #e8f1ff; color: #1768ff; font-size: 12px; font-style: normal; font-weight: 900; }
#section-agent-mode .agent-command-button span { min-width: 0; }
#section-agent-mode .agent-command-button strong, #section-agent-mode .agent-command-button small { display: block; }
#section-agent-mode .agent-command-button strong { font-size: 12px; }
#section-agent-mode .agent-command-button small { margin-top: 3px; color: #8490a2; font-size: 9px; }
#section-agent-mode .agent-command-button > b { color: #95a1b1; font-size: 13px; }
#section-agent-mode .agent-command-button:hover { transform: translateY(-1px); border-color: #bcd1f4; background: #fff; }
#section-agent-mode .agent-command-button:focus-visible { outline: 2px solid #1768ff; outline-offset: 2px; }
#section-agent-mode .agent-recent-cards { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5eaf1; }
#section-agent-mode .agent-recent-cards h3 { margin: 0 0 9px; color: #1c2940; font-size: 12px; }
#section-agent-mode .agent-recent-cards .agent-list-row { min-height: 54px; margin-top: 7px; padding: 10px 11px; background: #fbfcfe; }
#section-agent-mode .agent-recent-cards .agent-code { font-size: 10px; }
#section-agent-mode .agent-recent-cards .row-meta { font-size: 8px; }
#section-agent-mode .agent-recent-cards .status { font-size: 9px; }

/* Responsive */
@media (max-width: 1100px) {
  #landingView .shell, body:has(#landingView:not([hidden])) .site-nav .shell { width: min(calc(100% - 32px), 1000px); }
  .landing-hero-grid { grid-template-columns: minmax(390px,.9fr) minmax(450px,1.1fr); gap: 28px; }
  .landing-hero h1 { font-size: clamp(43px,4.7vw,57px); }
  .route-console-grid { grid-template-columns: 150px 78px minmax(190px,1fr); }
  .capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #appView .app-layout { grid-template-columns: 210px minmax(0,1fr); }
  #section-extract .activation-workbench { grid-template-columns: minmax(250px,.68fr) minmax(390px,1.32fr); }
}

@media (max-width: 860px) {
  body:has(#landingView:not([hidden])) .site-nav { inset: 12px 0 auto; }
  body:has(#landingView:not([hidden])) .site-nav .nav-inner { min-height: 54px; padding: 6px 8px 6px 10px; }
  body:has(#landingView:not([hidden])) .site-nav .brand img { width: 34px; height: 34px; }
  .landing-menu-button { width: 40px; height: 40px; display: grid; place-content: center; gap: 5px; border: 0; border-radius: 10px; background: #f3f6fa; }
  .landing-menu-button span { width: 18px; height: 1.5px; background: #132035; transition: transform .2s ease; }
  .landing-menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .landing-menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  body:has(#landingView:not([hidden])) .site-nav .nav-links { position: absolute; top: 62px; left: 16px; right: 16px; display: none; grid-template-columns: 1fr; gap: 4px; padding: 10px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,.97); box-shadow: var(--panel-shadow); }
  body:has(#landingView:not([hidden])) .site-nav .nav-links.open { display: grid; }
  body:has(#landingView:not([hidden])) .site-nav .nav-links > * { width: 100%; }
  body:has(#landingView:not([hidden])) .site-nav .nav-link { justify-content: flex-start; }
  body:has(#landingView:not([hidden])) .desktop-only { display: inline-flex; }
  .landing-hero { min-height: auto; padding: 104px 0 54px; }
  .landing-hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .landing-hero-copy { text-align: center; }
  .landing-hero h1 { max-width: 12ch; margin-inline: auto; font-size: clamp(44px,9.5vw,68px); }
  .landing-lede { margin-inline: auto; }
  .landing-actions, .landing-facts { justify-content: center; }
  .route-console { width: min(100%,650px); margin-inline: auto; }
  .landing-section-head { grid-template-columns: 1fr; gap: 12px; }
  .portal-workbench { grid-template-columns: 1fr; }
  .process-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-contact { grid-template-columns: minmax(0,1fr) 140px; padding: 30px; }
  .landing-contact-qr { width: 136px; height: 136px; }

  #appView .app-layout { display: block; }
  #appView .sidebar { display: none; }
  #appView .app-main { padding-inline: 18px; padding-bottom: 90px; }
  #appView .app-toolbar { margin-inline: -18px; padding-inline: 18px; }
  #section-extract .activation-workbench { grid-template-columns: 1fr; }
  #section-extract .activation-catalog { position: static; }
  #section-agent-mode .agent-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  #landingView .shell, body:has(#landingView:not([hidden])) .site-nav .shell { width: min(calc(100% - 24px), 560px); }
  body:has(#landingView:not([hidden])) .site-nav .brand span { display: inline; font-size: 13px; }
  body:has(#landingView:not([hidden])) .site-nav .brand img { width: 32px; height: 32px; }
  .landing-hero { padding-top: 94px; }
  .hero-kicker { margin-bottom: 16px; font-size: 9px; }
  .landing-hero h1 { max-width: none; font-size: clamp(32px,10vw,42px); line-height: 1.08; letter-spacing: -.052em; }
  .landing-lede { margin-top: 18px; font-size: 14px; line-height: 1.7; }
  .landing-actions { display: grid; grid-template-columns: 1fr; margin-top: 25px; }
  .landing-actions .button { width: 100%; }
  .landing-facts { display: grid; grid-template-columns: repeat(2,auto); gap: 10px 18px; justify-content: center; margin-top: 22px; }
  .route-console { padding: 14px; border-radius: 16px; }
  .route-console > header { padding: 0 2px 14px; }
  .route-console > header strong { font-size: 13px; }
  .route-console > header span { font-size: 9px; }
  .route-console-grid { grid-template-columns: 1fr; gap: 10px; }
  .route-nodes { gap: 7px; }
  .route-node { grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; padding: 9px; }
  .route-node em { grid-column: 3; grid-row: 1; }
  .route-flow { height: 54px; }
  .route-flow span { left: 50%; right: auto; top: 0 !important; bottom: 0; width: 1px; height: auto; transform: none !important; }
  .route-flow span:nth-child(2), .route-flow span:nth-child(3) { display: none; }
  .route-flow span::after { right: -3px; top: auto; bottom: -1px; }
  .route-order { padding: 13px; }
  .landing-section { padding: 54px 0; }
  .landing-section-head { margin-bottom: 24px; }
  .landing-section-head h2 { font-size: 32px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 270px; }
  .portal-workbench-copy { padding: 28px 22px; }
  .portal-task-list { padding: 10px; }
  .portal-task { grid-template-columns: 34px minmax(0,1fr); padding: 14px 8px; }
  .portal-task-state { grid-column: 2; justify-self: start; }
  .process-list { grid-template-columns: 1fr; }
  .process-step { min-height: 140px; }
  .process-number { margin-bottom: 24px; }
  .landing-contact { grid-template-columns: 1fr; gap: 24px; padding: 24px; text-align: center; }
  .landing-contact-qr { margin-inline: auto; }
  .landing-contact .landing-actions { display: grid; }
  .landing-mobile-actions { display: none; }

  #appView .app-main { padding-inline: 12px; }
  #appView .app-toolbar { min-height: 64px; margin-inline: -12px; padding-inline: 12px; }
  #appView .app-toolbar h1 { font-size: 21px; }
  #appView .toolbar-route-pill, #appView .agent-button, #appView .toolbar-balance > .balance-chip span { display: none; }
  #appView .recharge-button .button-label { display: none; }
  #appView .recharge-button { width: 42px; padding: 0; }
  #appView .balance-chip { padding-inline: 10px; }
  #section-extract .activation-center-head { align-items: stretch; flex-direction: column; }
  #section-extract .activation-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #section-extract .activation-catalog, #section-extract .activation-live { padding: 14px; }
  #section-extract .activation-live { min-height: 430px; }
  #section-extract .activation-live .order-phone { font-size: 24px; }
  #section-records .record-archive { padding: 15px; }
  #section-records .record-row-summary { grid-template-columns: 1fr; }
  #section-agent-mode .agent-hero { align-items: flex-start; flex-direction: column; }
  #section-agent-mode .agent-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #section-agent-mode .agent-stat:first-child { grid-column: 1/-1; }
  #section-agent-mode .agent-tabs { display: flex; overflow-x: auto; }
  #section-agent-mode .agent-tab { flex: 0 0 auto; padding-inline: 14px; }
  body.console-active .mobile-bottom-nav:has(.agent-mobile-nav:not([hidden])) { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #landingView > section { opacity: 1; transform: none; transition: none; }
  .route-flow span::after { animation: none; }
  .capability-card, .landing-menu-button span { transition-duration: .01ms; }
}