:root {
  --ink: #12213a;
  --ink-soft: #43536b;
  --muted: #6e7b90;
  --line: #dce4ef;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --navy: #173a67;
  --navy-2: #0d2546;
  --blue: #2368d9;
  --blue-soft: #edf4ff;
  --green: #11835a;
  --green-soft: #e8f7f0;
  --amber: #aa6700;
  --amber-soft: #fff4da;
  --red: #bf3131;
  --red-soft: #fff0f0;
  --shadow: 0 20px 50px rgba(26, 50, 84, .10);
  --shadow-sm: 0 8px 24px rgba(26, 50, 84, .08);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease: 180ms cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100dvh; }
html { min-width: 320px; scroll-padding-top: 68px; background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: linear-gradient(120deg, #f6f9fc 0%, #f2f6fb 58%, #edf3fc 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(35, 104, 217, .38); outline-offset: 3px; }
a { color: inherit; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: -60px; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; text-decoration: none; transition: top var(--ease); }
.skip-link:focus { top: 12px; }

.site-header { width: min(1220px, calc(100% - 48px)); height: 90px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--navy-2); font-size: 23px; font-weight: 760; text-decoration: none; letter-spacing: -.9px; }
.brand-dot { color: var(--blue); }
.brand-mark { width: 28px; height: 28px; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; padding: 4px; border-radius: 9px; background: var(--navy); box-shadow: 0 5px 13px rgba(23,58,103,.22); }
.brand-mark i { display: block; border-radius: 3px; background: #fff; }
.brand-mark i:nth-child(1) { height: 8px; opacity: .75; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 19px; opacity: .9; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.secure-label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.secure-dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(17,131,90,.12); }

.announcement-banner { width: min(920px, calc(100% - 48px)); min-height: 44px; position: sticky; top: 8px; z-index: 20; margin: -6px auto 0; padding: 8px 12px; display: flex; align-items: center; gap: 9px; overflow: hidden; color: #185197; border: 1px solid #b9d5fb; border-radius: 11px; background: rgba(237,244,255,.96); box-shadow: 0 8px 22px rgba(34,82,146,.10); text-align: left; touch-action: manipulation; }
.announcement-banner:hover { border-color: #8eb8ee; background: #e7f1ff; }.announcement-banner:active { background: #deedff; }
.announcement-banner-icon { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; }.announcement-banner-icon svg { width: 18px; height: 18px; }
.announcement-banner-label { flex: 0 0 auto; color: #164b8e; font-size: 12px; font-weight: 790; }
.announcement-ticker { min-width: 0; flex: 1; overflow: hidden; color: #315b8d; font-size: 12px; font-weight: 600; white-space: nowrap; }.announcement-ticker span { display: inline-block; animation: announcement-marquee 12s ease-in-out infinite alternate; }.announcement-banner:hover .announcement-ticker span, .announcement-banner:focus-visible .announcement-ticker span { animation-play-state: paused; }
.announcement-banner-open { flex: 0 0 auto; color: #2368d9; font-size: 12px; font-weight: 760; white-space: nowrap; }.announcement-banner-open span { font-size: 17px; line-height: 0; vertical-align: -1px; }
@keyframes announcement-marquee { from { transform: translateX(0); } to { transform: translateX(-12%); } }

.customer-main { width: min(1120px, calc(100% - 48px)); margin: 24px auto 80px; }
.screen { animation: screen-in 280ms var(--ease) both; }
.screen-active { display: block; }
.screen h1[tabindex="-1"]:focus { outline: none; }
@keyframes screen-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.hero-copy { max-width: 660px; margin: 60px auto 30px; text-align: center; }
.eyebrow, .card-kicker, .panel-kicker { margin: 0 0 8px; color: var(--blue); font-size: 12px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.hero-copy h1, .activation-copy h1, .processing-card h1, .workspace-banner h1 { margin: 0; color: var(--navy-2); font-size: clamp(34px, 5vw, 54px); line-height: 1.1; letter-spacing: -2px; }
.lede { margin: 17px auto 0; max-width: 590px; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.key-card { width: min(460px, 100%); margin: 64px auto 0; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.key-card h1 { margin: 0; color: var(--navy-2); font-size: 22px; line-height: 1.4; font-weight: 650; letter-spacing: 0; }
.card-heading, .panel-heading, .dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-heading h2, .dialog-heading h2 { margin: 0; color: var(--navy-2); font-size: 22px; letter-spacing: -.5px; }
.key-shield { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }.key-shield svg { width: 22px; height: 22px; }
label[for="access-key"] { display: inline-block; margin: 29px 0 9px; color: var(--ink); font-size: 14px; font-weight: 720; } label[for="access-key"] span { color: var(--red); }
#access-key { width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid #bbc9da; border-radius: 11px; color: var(--navy-2); background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transition: border var(--ease), box-shadow var(--ease); }
#access-key::placeholder { color: #a9b6c6; font-size: 13px; letter-spacing: .02em; } #access-key:hover { border-color: #8aa4c4; } #access-key:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(35,104,217,.12); outline: none; }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 12px; }.field-error { margin: 8px 0 0; color: var(--red); font-size: 13px; font-weight: 650; }
.agreement-row { min-height: 24px; margin: 21px 0; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; cursor: pointer; }.agreement-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); flex: 0 0 auto; }.agreement-row > span { min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }.agreement-row .text-button { white-space: nowrap; }
.text-button { min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; border: 0; color: var(--blue); background: none; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; vertical-align: middle; }
.primary-button, .secondary-button, .back-button, .auto-refresh, .icon-button { min-height: 44px; border-radius: 10px; border: 0; font-weight: 720; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease); touch-action: manipulation; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; color: #fff; background: var(--blue); box-shadow: 0 7px 16px rgba(35,104,217,.22); }.primary-button:hover { background: #1558c4; box-shadow: 0 10px 20px rgba(35,104,217,.28); transform: translateY(-1px); }.primary-button:active { transform: translateY(0); }.primary-button svg { width: 18px; height: 18px; }.full-button { width: 100%; }
.primary-button[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }
.trust-row { width: min(700px, 100%); margin: 26px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.trust-row > div { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }.trust-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cdd9e8; border-radius: 50%; color: var(--blue); font-size: 12px; font-weight: 800; }

.back-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; min-height: 44px; color: var(--ink-soft); background: transparent; font-size: 13px; }.back-button svg { width: 18px; height: 18px; }.back-button:hover { color: var(--blue); }
.activation-layout { margin-top: 48px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 76px; align-items: center; }.activation-copy .lede { margin-left: 0; }.activation-warning { margin-top: 30px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; border-left: 3px solid var(--amber); background: var(--amber-soft); border-radius: 0 11px 11px 0; }.activation-warning > span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--amber); font-size: 14px; font-weight: 800; }.activation-warning p { margin: 0; color: #73551b; font-size: 13px; line-height: 1.6; }
.order-preview { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.preview-topline { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 700; }.chip { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }.chip-await { color: #8a5903; background: var(--amber-soft); }.preview-id { margin: 22px 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }.preview-id span { color: var(--muted); font-size: 12px; }.preview-id strong { color: var(--navy-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }.spec-list { margin: 0 0 23px; display: grid; gap: 14px; }.spec-list div { display: flex; justify-content: space-between; gap: 12px; }.spec-list dt { color: var(--muted); font-size: 13px; }.spec-list dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; text-align: right; }.preview-footnote { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }

.processing-card { width: min(560px, 100%); margin: 72px auto 0; padding: 44px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }.processing-card h1 { font-size: 34px; }.process-message { margin-top: 12px; font-size: 15px; }.processing-orbit { width: 62px; height: 62px; position: relative; margin: 0 auto 25px; border: 3px solid #dceaff; border-top-color: var(--blue); border-radius: 50%; animation: spin 1.15s linear infinite; }.processing-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }.processing-orbit span:nth-child(1) { top: 1px; left: 50%; transform: translateX(-50%); }.processing-orbit span:nth-child(2) { bottom: 7px; left: 4px; background: #7da8ed; }.processing-orbit span:nth-child(3) { bottom: 7px; right: 4px; background: #b6cff6; } @keyframes spin { to { transform: rotate(360deg); } }
.progress-steps { margin: 33px 0 0; padding: 0; list-style: none; display: grid; gap: 0; text-align: left; }.progress-steps li { position: relative; min-height: 64px; display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; color: var(--muted); }.progress-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 33px; width: 2px; height: 30px; background: #d9e1ec; }.progress-steps li > span { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #ced9e7; border-radius: 50%; background: #f7f9fc; font-size: 13px; font-weight: 800; }.progress-steps strong { display: block; color: inherit; font-size: 14px; }.progress-steps small { display: block; margin-top: 1px; font-size: 12px; }.progress-steps .is-current { color: var(--blue); }.progress-steps .is-current > span { color: #fff; border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }.progress-steps .is-done { color: var(--green); }.progress-steps .is-done > span { color: #fff; border-color: var(--green); background: var(--green); }.processing-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }

.workspace { padding-top: 18px; }.workspace-banner { padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #fff; background: linear-gradient(120deg, #0f2e58, #194979); border-radius: var(--radius-lg); box-shadow: 0 18px 38px rgba(16,47,88,.2); }.workspace-banner .eyebrow { color: #a7c9ff; }.workspace-banner h1 { color: #fff; font-size: 31px; letter-spacing: -1.2px; }.workspace-banner > div > p:not(.eyebrow) { margin: 7px 0 0; color: #c2d6f2; font-size: 13px; }.expiry-panel { min-width: 248px; padding: 13px 17px; border: 1px solid rgba(221,235,255,.23); border-radius: 12px; background: rgba(5,24,51,.22); }.expiry-panel span, .expiry-panel small { display: block; color: #b9cce9; font-size: 12px; }.expiry-panel strong { display: block; margin: 3px 0; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }.expiry-panel b { color: #fff; font-weight: 700; }.expiry-panel .expiry-divider { height: 1px; margin: 9px 0; background: rgba(221,235,255,.20); }
.workspace-grid { margin-top: 20px; display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 20px; }.numbers-panel, .message-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }.numbers-panel { padding: 20px 14px 15px; }.panel-heading { padding: 0 6px 15px; align-items: center; }.panel-heading h2 { margin: 0; color: var(--navy-2); font-size: 17px; letter-spacing: -.3px; }.panel-heading h2 span { color: var(--muted); font-size: 13px; font-weight: 650; }.icon-button { width: 40px; min-width: 40px; padding: 0; display: inline-grid; place-items: center; color: var(--ink-soft); background: #f4f7fb; border: 1px solid var(--line); }.icon-button:hover { color: var(--blue); border-color: #a9c3ec; background: var(--blue-soft); }.icon-button svg { width: 18px; height: 18px; }
.number-list { display: grid; gap: 6px; }.number-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: stretch; }.number-item { width: 100%; padding: 13px 12px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; text-align: left; border: 1px solid transparent; border-radius: 11px; color: var(--ink); background: transparent; }.number-item:hover { background: #f5f8fc; }.number-item.is-selected { border-color: #a8c5ef; background: var(--blue-soft); }.number-index { width: 28px; height: 28px; display: grid; place-items: center; color: var(--blue); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 2px 6px rgba(29,73,130,.1); }.number-item:not(.is-selected) .number-index { color: var(--ink-soft); background: #edf2f8; box-shadow: none; }.number-main { min-width: 0; }.number-phone { display: block; color: var(--navy-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; font-weight: 760; }.number-meta { margin-top: 3px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }.number-sms-meta { display: block; margin-top: 3px; color: #60728a; font-size: 12px; }.number-send-button { min-width: 66px; min-height: 44px; padding: 0 8px; color: #1b5fba; border: 1px solid #b9d5fb; border-radius: 10px; background: #f1f7ff; font-size: 12px; font-weight: 760; transition: border var(--ease), background var(--ease), color var(--ease); touch-action: manipulation; }.number-send-button:hover { color: #fff; border-color: var(--blue); background: var(--blue); }.number-send-button[disabled] { color: #7c899a; border-color: #dbe3ee; background: #f4f6f9; cursor: not-allowed; }.number-send-button[disabled]:hover { color: #7c899a; border-color: #dbe3ee; background: #f4f6f9; }.number-send-status { width: 66px; padding: 6px 5px; display: grid; place-items: center; color: #6d7d92; border: 1px solid #dbe3ee; border-radius: 10px; background: #f5f7fa; font-size: 12px; line-height: 1.35; text-align: center; }.state-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }.state-dot.waiting { background: var(--amber); }.state-dot.expired { background: #94a1b4; }.sync-label { margin: 15px 6px 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.sync-label .live-dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(17,131,90,.1); }
.message-panel { padding: 24px; }.selected-number-header { padding-bottom: 21px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.selected-number-header h2 { margin: 0; color: var(--navy-2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 22px; letter-spacing: -.5px; }.selected-number-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }.number-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 720; white-space: nowrap; }.badge.success { color: #087051; background: var(--green-soft); }.badge.wait { color: #8d5a00; background: var(--amber-soft); }.badge.neutral { color: #4a5b72; background: #eef2f7; }.badge.disabled { color: #6d7d92; background: #f0f3f7; }.badge svg { width: 12px; height: 12px; }.message-toolbar { padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; }.message-toolbar > div:first-child { display: flex; align-items: baseline; gap: 8px; }.message-toolbar strong { color: var(--navy-2); font-size: 15px; }.message-toolbar > div:first-child span { color: var(--muted); font-size: 12px; }.toolbar-actions { display: flex; align-items: center; gap: 9px; }.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; color: var(--ink-soft); border: 1px solid var(--line); background: #fff; font-size: 12px; }.secondary-button:hover { color: var(--blue); border-color: #a7c0e5; background: var(--blue-soft); }.secondary-button svg { width: 15px; height: 15px; }.auto-refresh { min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); background: #f4f7fa; font-size: 12px; }.auto-refresh small { color: var(--muted); font-size: 12px; }.auto-refresh .switch-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa8bb; }.auto-refresh.is-on { color: #087051; background: var(--green-soft); }.auto-refresh.is-on .switch-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(17,131,90,.12); }.auto-refresh.is-on small { color: #087051; }
.message-list { display: grid; gap: 10px; }.message-card { position: relative; padding: 16px; border: 1px solid #e0e7f0; border-radius: 12px; background: #fbfcfe; }.message-card.is-new { border-color: #b8d4f9; background: #f3f8ff; }.message-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.message-sender { color: var(--navy-2); font-size: 13px; font-weight: 780; }.message-time { color: var(--muted); font-size: 12px; white-space: nowrap; }.message-body { margin: 10px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }.code-row { margin-top: 13px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed #d7e1ed; }.code-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }.code-value { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 20px; font-weight: 800; letter-spacing: .12em; }.message-actions { display: flex; gap: 7px; }.small-action { min-height: 44px; padding: 0 8px; color: var(--ink-soft); border: 1px solid #d7e1ed; border-radius: 7px; background: #fff; font-size: 12px; font-weight: 700; }.small-action:hover { color: var(--blue); border-color: #aac5ea; background: var(--blue-soft); }.small-action.danger:hover { color: var(--red); border-color: #edb8b8; background: var(--red-soft); }.last-refresh { margin-top: 17px; padding-top: 13px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.empty-messages { min-height: 240px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed #ccd9e8; border-radius: 12px; background: #fbfcfe; }.empty-symbol { width: 40px; height: 40px; margin: 0 auto 10px; display: grid; place-items: center; color: #7993b5; border: 1px solid #d7e3f1; border-radius: 50%; background: #f1f6fc; font-weight: 800; }.empty-messages p { margin: 0; font-size: 13px; }.empty-messages small { display: block; margin-top: 3px; font-size: 12px; }

.policy-dialog, .announcement-dialog { width: min(470px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 25px; overflow-x: hidden; border: 0; border-radius: 18px; box-shadow: 0 25px 65px rgba(10,31,61,.26); }.policy-dialog::backdrop, .announcement-dialog::backdrop { background: rgba(11,31,58,.52); backdrop-filter: blur(3px); }.policy-dialog p { margin: 19px 0 23px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }.announcement-dialog { width: min(520px, calc(100vw - 32px)); }.announcement-dialog .dialog-heading > div { min-width: 0; }.announcement-dialog .icon-button { width: 44px; min-width: 44px; }.announcement-dialog-body { min-width: 0; margin: 20px 0 24px; padding: 17px; display: flex; align-items: flex-start; gap: 12px; color: #385472; border: 1px solid #d7e6fb; border-radius: 13px; background: #f4f8ff; }.announcement-dialog-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; color: var(--blue); border-radius: 10px; background: #e5f0ff; }.announcement-dialog-icon svg { width: 19px; height: 19px; }.announcement-dialog-body p { min-width: 0; margin: 2px 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }.dialog-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 9px; }.dialog-actions .secondary-button { min-width: 86px; }.dialog-actions .primary-button { min-width: 108px; }.toast { position: fixed; z-index: 999; left: 50%; bottom: 24px; max-width: calc(100vw - 32px); padding: 11px 16px; display: flex; align-items: center; gap: 10px; visibility: hidden; opacity: 0; color: #fff; background: #172d4d; border-radius: 9px; box-shadow: 0 12px 30px rgba(9,26,50,.2); font-size: 13px; font-weight: 650; transform: translate(-50%, 12px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease); }.toast.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0); }.toast-action { padding: 0; color: #a9cdfd; border: 0; background: transparent; font-size: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }.mini-loader { width: 13px; height: 13px; display: inline-block; border: 2px solid rgba(67,83,107,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }

@media (max-width: 850px) { .activation-layout { gap: 38px; grid-template-columns: 1fr; }.activation-copy { max-width: 620px; }.workspace-grid { grid-template-columns: 280px minmax(0,1fr); }.workspace-banner { align-items: flex-start; flex-direction: column; }.expiry-panel { min-width: min(100%, 320px); }.toolbar-actions { flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 680px) { .site-header { width: min(100% - 32px, 1220px); height: 72px; }.header-actions { gap: 12px; }.secure-label { display: none; }.announcement-banner { width: min(100% - 32px, 920px); top: 4px; margin-top: -2px; padding: 8px 10px; }.announcement-banner-label { display: none; }.announcement-banner-open { font-size: 12px; }.customer-main { width: min(100% - 32px, 1120px); margin-top: 10px; }.hero-copy { margin-top: 40px; }.hero-copy h1, .activation-copy h1, .processing-card h1 { font-size: 36px; letter-spacing: -1.3px; }.lede { font-size: 15px; }.key-card { padding: 22px 18px; }.trust-row { grid-template-columns: 1fr; gap: 8px; }.trust-row > div { justify-content: flex-start; }.activation-layout { margin-top: 30px; }.order-preview { padding: 22px 18px; }.processing-card { margin-top: 38px; padding: 31px 19px; }.workspace-banner { padding: 22px 18px; }.workspace-banner h1 { font-size: 27px; }.workspace-grid { grid-template-columns: 1fr; }.numbers-panel { padding: 17px 12px; }.number-list { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }.number-row { min-width: 282px; scroll-snap-align: start; }.number-row .number-item { min-width: 0; }.message-panel { padding: 18px; }.selected-number-header { flex-direction: column; }.number-badges { justify-content: flex-start; }.message-toolbar { align-items: flex-start; flex-direction: column; }.toolbar-actions { width: 100%; justify-content: space-between; }.secondary-button { flex: 1; }.last-refresh { flex-direction: column; gap: 3px; }.message-topline { flex-direction: column; gap: 2px; }.message-time { white-space: normal; }.code-row { align-items: flex-start; flex-direction: column; }.message-actions { width: 100%; }.small-action { flex: 1; }.policy-dialog, .announcement-dialog, .send-sms-dialog { padding: 21px 18px; }.dialog-actions { flex-direction: column-reverse; }.dialog-actions .primary-button, .dialog-actions .secondary-button { width: 100%; min-height: 44px; flex: initial; } }
@media (max-width: 410px) { .toolbar-actions { align-items: stretch; flex-direction: column; }.auto-refresh, .secondary-button { width: 100%; }.workspace-banner h1 { font-size: 25px; }.expiry-panel { width: 100%; }.header-actions { gap: 8px; }.brand { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }.announcement-ticker { white-space: normal; }.announcement-ticker span { animation: none !important; transform: none !important; } }

/* v3: card-level SMS action. The quota is intentionally shown only inside the modal. */
.number-row { position: relative; display: block; min-width: 0; }
.number-item { padding-right: 52px; }
.number-row.no-outbound .number-item { padding-right: 12px; }
.number-send-icon { position: absolute; z-index: 2; top: 50%; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; color: #64758a; border: 1px solid transparent; border-radius: 9px; background: transparent; transform: translateY(-50%); transition: color var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease); }
.number-send-icon svg { width: 20px; height: 20px; }
.number-send-icon:hover { color: var(--blue); border-color: #bad4f7; background: #fff; box-shadow: 0 4px 12px rgba(27,74,134,.12); }
.number-send-icon:focus-visible { outline: 3px solid rgba(35,104,217,.2); outline-offset: 2px; }

/* v4 mobile client: readable number rows and one-line trust strip */
@media (max-width: 680px) {
  .trust-row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
  .trust-row > div { min-width: 0; flex-direction: column; justify-content: flex-start; gap: 5px; font-size: 12px; line-height: 1.35; text-align: center; }
  .trust-icon { width: 24px; height: 24px; flex: 0 0 auto; }

  .number-list { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; scroll-snap-type: none; }
  .number-row { width: 100%; min-width: 0; scroll-snap-align: none; }
  .number-item { min-height: 68px; padding: 11px 54px 11px 10px; align-items: center; border-color: #e1e8f1; background: #fbfcfe; }
  .number-row.no-outbound .number-item { padding-right: 10px; }
  .number-item.is-selected { border-color: #91b7eb; background: var(--blue-soft); box-shadow: inset 3px 0 var(--blue); }
  .number-phone { font-size: 14px; line-height: 1.35; white-space: nowrap; }
  .number-meta { margin-top: 5px; line-height: 1.35; white-space: normal; }
  .number-send-icon { right: 10px; width: 40px; height: 40px; border-color: #d7e2ef; background: #fff; }
  .sync-label { margin-top: 13px; }
}

@media (max-width: 360px) {
  .trust-row > div { font-size: 12px; }
  .number-item { grid-template-columns: 25px minmax(0,1fr); gap: 8px; }
  .number-index { width: 25px; height: 25px; }
  .number-phone { font-size: 13px; }
}

/* Customer workspace: one number, one timer, one refresh entry. */
.workspace .workspace-banner { min-height: 0; margin-bottom: 28px; padding: 12px 0 4px; color: var(--ink); background: none; border: 0; border-radius: 0; box-shadow: none; }
.workspace .workspace-banner .eyebrow { margin-bottom: 9px; color: var(--blue); font-size: 12px; letter-spacing: .08em; }
.workspace .workspace-banner h1 { color: var(--navy-2); font-size: 30px; line-height: 1.25; letter-spacing: -.6px; }
.workspace .workspace-banner p:not(.eyebrow) { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; }
.workspace .workspace-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.workspace .numbers-panel, .workspace .message-panel { border: 1px solid #e0e7f0; border-radius: 20px; box-shadow: 0 8px 30px rgba(27, 52, 85, .035); background: #fff; }
.workspace .numbers-panel { padding: 20px 14px 14px; }
.workspace .panel-heading { padding: 0 5px; margin-bottom: 16px; align-items: center; }
.workspace .panel-heading h2 { margin: 0; font-size: 16px; }
.workspace #customer-number-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; border-radius: 7px; background: #f0f4f9; color: #63758d; font-size: 12px; }
.workspace #refresh-numbers { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 12px; background: #f5f8fc; color: #6a7f9a; }
.workspace #refresh-numbers:hover { background: #eaf2ff; color: var(--blue); }
.workspace #refresh-numbers[aria-busy="true"] svg { animation: spin .8s linear infinite; }
.workspace .number-list { gap: 8px; }
.workspace .number-item { min-height: 78px; padding: 14px 12px; border: 1px solid transparent; border-radius: 13px; background: #f8fafd; box-shadow: none; }
.workspace .number-item:hover { background: #f0f5fc; }
.workspace .number-item.is-selected { background: #edf4ff; border-color: #c4d8f8; box-shadow: inset 3px 0 #2563eb; }
.workspace .number-index { width: 28px; height: 32px; border-radius: 8px; box-shadow: none; font-size: 12px; }
.workspace .number-phone { color: #17375b; font-family: ui-monospace, Consolas, monospace; font-size: 14px; letter-spacing: -.3px; }
.workspace .number-meta { margin-top: 7px; color: #677d96; font-size: 12px; }
.workspace .number-meta .state-dot { display: none; }
.workspace .message-panel { min-height: 465px; padding: 30px; }
.workspace .selected-number-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 26px; border-bottom: 1px solid #edf1f6; }
.workspace .number-identity { min-width: 0; }
.workspace .selected-number-header .number-service { margin: 0 0 12px; color: #58718e; font-size: 13px; font-weight: 600; }
.workspace .number-service span { margin-left: 10px; padding-left: 10px; border-left: 1px solid #dce5f0; color: #7b8da3; font-weight: 400; }
.workspace .phone-line { display: flex; gap: 9px; align-items: center; }
.workspace .phone-line h2 { margin: 0; color: #142f50; font-family: ui-monospace, Consolas, monospace; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -1px; overflow-wrap: anywhere; }
.workspace .copy-number { width: 44px; height: 44px; flex: 0 0 44px; min-width: 44px; padding: 10px; border: 0; background: #f4f7fb; color: #547393; border-radius: 11px; }
.workspace .copy-number:hover { color: var(--blue); background: #edf4ff; }
.workspace .copy-number:disabled { opacity: .45; cursor: default; }
.workspace .number-timing { flex-shrink: 0; min-width: 105px; padding: 12px 16px; border-radius: 14px; background: #f4f8ff; text-align: center; }
.workspace .number-timing > span { display: block; margin-bottom: 4px; color: #617791; font-size: 12px; }
.workspace .number-timing > strong { display: block; color: #215bab; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: .5px; }
.workspace .number-timing[data-state="received"] { background: #eaf8f1; }
.workspace .number-timing[data-state="received"] > strong { color: #087954; font-size: 20px; }
.workspace .number-timing[data-state="rental"] { background: transparent; }
.workspace .number-timing[data-state="rental"] > strong { font-size: 14px; letter-spacing: 0; }
.workspace .number-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 20px 0 2px; padding: 14px 16px; border-radius: 12px; background: #f6f8fb; }
.workspace .number-result[hidden] { display: none; }
.workspace .number-result p { margin: 0; color: #536c88; font-size: 13px; line-height: 1.6; }
.workspace .number-result[data-state="eligible"] { background: #edf7f2; }
.workspace .number-result[data-state="eligible"] p { color: #28664d; }
.workspace .result-actions { display: flex; flex-shrink: 0; gap: 8px; }
.workspace .result-actions button { white-space: nowrap; font-size: 13px; }
.workspace .result-actions:has(button:not([hidden])) { min-height: 44px; }
.workspace .message-toolbar { margin: 26px 0 18px; flex-direction: row; align-items: center; }
.workspace .message-toolbar strong { color: #253f5e; font-size: 14px; }
.workspace #message-count { margin-left: 8px; color: #8392a6; font-size: 12px; }
.workspace .empty-messages { min-height: 260px; border: 0; background: transparent; }
.workspace .empty-messages p { margin-top: 14px; color: #7588a0; font-size: 14px; }
.workspace .inbox-art { width: 92px; height: 78px; }
.workspace .message-card { border: 1px solid #e0e9f5; background: #f9fbff; border-radius: 15px; padding: 20px; box-shadow: none; }
.workspace .code-row { padding-top: 18px; margin-top: 18px; }
.workspace .code-label { flex-direction: column; align-items: flex-start; gap: 8px; }
.workspace .code-value { font-size: 32px; letter-spacing: .14em; }
.workspace .message-body { line-height: 1.75; }
@media (max-width: 850px) {
  .workspace .workspace-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 16px; }
  .workspace .message-panel { padding: 22px; }
  .workspace .number-timing { min-width: 88px; padding: 10px; }
  .workspace .number-timing > strong { font-size: 24px; }
  .workspace .number-result { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  .workspace .workspace-banner { padding: 10px 2px 0; margin-bottom: 22px; }
  .workspace .workspace-banner h1 { font-size: 26px; }
  .workspace .workspace-grid { grid-template-columns: 1fr; gap: 16px; }
  .workspace .numbers-panel { padding: 14px 12px 12px; border-radius: 16px; }
  .workspace .panel-heading { margin-bottom: 10px; }
  .workspace .number-item { min-height: 66px; padding: 10px 12px; }
  .workspace .message-panel { padding: 20px 16px; min-height: 370px; border-radius: 16px; }
  .workspace .selected-number-header { gap: 8px; padding-bottom: 20px; }
  .workspace .selected-number-header .number-service { font-size: 12px; margin-bottom: 8px; }
  .workspace .number-service span { display: block; margin: 3px 0 0; padding: 0; border: 0; }
  .workspace .phone-line { gap: 2px; }
  .workspace .phone-line h2 { font-size: 23px; letter-spacing: -1px; }
  .workspace .copy-number { width: 44px; flex-basis: 44px; background: transparent; }
  .workspace .number-timing { min-width: 76px; padding: 10px 8px; border-radius: 11px; }
  .workspace .number-timing > strong { font-size: 23px; }
  .workspace .empty-messages { min-height: 205px; }
  .workspace .message-toolbar { margin: 22px 0 12px; }
  .workspace .number-result { gap: 10px; }
  .workspace .result-actions { width: 100%; }
  .workspace .result-actions button { flex: 1; }
}

.support-dialog { width: min(620px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; }
.support-content { display: block; overflow-wrap: anywhere; }
.support-content label { display: grid; gap: 8px; margin: 16px 0; }
.support-content input, .support-content select, .support-content textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.support-case-button { display: block; width: 100%; margin: 8px 0; min-height: 44px; }
.support-event { border-bottom: 1px solid #e2e8f0; padding: 16px 0; }
.support-event p { white-space: pre-wrap; }

.customer-message-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; }