/* Customer visual language and layout. Business state remains in app.css and app.js. */
:root {
  --ink:#2d2b25;
  --muted:#746f62;
  --subtle:#827c70;
  --purple:#2d2b25;
  --sidebar:#faf6ee;
  --canvas:#fffdf7;
  --soft:#f8f3e7;
  --line:#ebe5d9;
  --accent:#ffdc55;
  --active:#fff1b9;
  --purple-light:#fff1b9;
}
.app-header { border-bottom-color:#e5e7df; }
.app-header .brand { gap:10px; font-weight:750; flex-shrink:0; }
.app-header .brand-mark { width:40px; height:40px; }
.brand-mark { transform-origin:50% 76%; }
@keyframes feimao-greet {
  0%,100% { transform:translateY(0) rotate(0) scale(1); }
  28% { transform:translateY(-2px) rotate(-7deg) scale(1.045); }
  58% { transform:translateY(-.5px) rotate(3deg) scale(1.015); }
  78% { transform:translateY(0) rotate(-1deg) scale(1); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .brand:hover .brand-mark { animation:feimao-greet .55s cubic-bezier(.2,.75,.25,1) 1; }
}
@media (prefers-reduced-motion:no-preference) {
  .brand:focus-visible .brand-mark { animation:feimao-greet .55s cubic-bezier(.2,.75,.25,1) 1; }
}
.header-product { color:var(--subtle); font-size:.8rem; }
.header-account { border-color:#dedfd6; background:#fcfcf9; }
.sidebar { background:var(--sidebar); }
.nav-caption { font-size:.72rem; letter-spacing:.02em; }
.nav-list { gap:7px; }
.nav-link { font-size:.91rem; min-height:45px; color:#62665b; }
.nav-link.active { background:var(--active); color:var(--ink); box-shadow:inset 3px 0 0 var(--ink); }
.nav-link:hover { background:#eeefe7; color:var(--ink); }
.nav-link.active:hover { background:var(--active); }
.sidebar-help { display:flex; align-items:center; gap:10px; margin:24px 12px 12px; padding:10px 0; color:var(--muted); font-size:.82rem; }
.sidebar-help svg { flex:none; }
.sidebar-help:hover { color:var(--ink); text-decoration:none; }
.sidebar-help[aria-current="page"] { color:var(--ink); font-weight:650; }
.sidebar-user { margin-top:0; }
.sidebar-help { margin-top:auto; }
.sidebar-account span { font-weight:600; font-size:.82rem; }
.main { background:var(--canvas); }
.topline .crumb { font-size:.74rem; }
h1,.list-content h1 { color:var(--ink); font-weight:720; font-size:1.85rem; letter-spacing:-.025em; }
h2,h3 { color:var(--ink); }
.page-lead { color:var(--muted); }
.card { background:#fff; border-color:var(--line); border-radius:14px; box-shadow:0 2px 4px #24252203,0 12px 30px #24252203; }
.button { font-weight:600; transition:background-color .16s,border-color .16s,box-shadow .16s; }
.button.primary:not(:disabled) { background:var(--accent); border-color:#dcc13d; color:var(--ink); box-shadow:0 2px 0 #24252209; }
.button.primary:hover:not(:disabled) { background:#ffdc35; box-shadow:0 3px 10px #b8951c20; }
.button.secondary:not(:disabled) { border-color:#daddd1; background:#fff; color:var(--ink); }
.button.secondary:hover:not(:disabled) { border-color:#afb49f; background:#fcfcf8; }
.button.danger:hover:not(:disabled) { background:#fff6f5; border-color:#ce9992; }
.button:disabled { box-shadow:none; }
.badge { font-weight:600; }
.notice { background:#f5f6ef; }
.search-input,input,textarea { border-color:#dee1d5; }
.data-table th { background:#f7f8f3; color:#656b5e; }
.data-table tbody tr:hover { background:#fffdf3; }
.list-footer { background:#fafbf7; color:var(--muted); }
.inbox-number-tab { border-radius:11px; border-color:#dde1d3; background:#fff; }
.inbox-number-tab.active { border-color:#d5c56b; background:#fff5be; box-shadow:0 2px 4px #99812708; }
.receive-banner { border-color:#dfd4a3; background:#fffef8; }
.numbers-picker { box-shadow:none; }
.numbers-picker-heading { background:#fafbf7; color:#656b5e; }
.number-choice { border-radius:10px; }
.number-choice.active { background:#fff5be; border-color:#e1d27d; }
.number-choice:hover:not(.active) { background:#f5f6ef; }
.number-detail-heading .profile-header .alias-avatar { background:#fff4b4; }
.number-management-actions .button { font-weight:550; }
.number-facts { border-top-color:#e8eade; }
.number-receive-stage .stage-metric { font-weight:730; letter-spacing:-.035em; }
.number-receive-stage .stage-main h2 { color:var(--ink); }
.number-more-actions > div { border-radius:12px; box-shadow:0 10px 28px #30332214; }
.home-welcome { padding:18px 22px; margin-bottom:17px; border:1px solid #e3e5d9; border-radius:14px; background-color:#f8f9f2; background-image:radial-gradient(#acb19735 .65px,transparent .65px); background-size:12px 12px; }
.home-welcome .page-heading { margin-bottom:0; }
.home-welcome .page-lead { max-width:580px; }
.home-summary { gap:14px; margin-bottom:18px; }
.home-summary > div { padding:15px 18px; border-color:var(--line); border-radius:13px; box-shadow:0 2px 4px #24252202; }
.home-summary .metric-label { display:flex; align-items:center; gap:10px; font-size:.8rem; }
.metric-label svg { padding:7px; width:34px; height:34px; border-radius:10px; background:#fff4bd; color:#5b5735; flex:none; }
.home-summary > div:nth-child(2) .metric-label svg { background:#e9f3e6; color:#4f7445; }
.home-summary > div:nth-child(3) .metric-label svg { background:#edf0ff; color:#627399; }
.home-summary strong { font-size:1.6rem; font-weight:720; }
.home-section-heading { padding-top:15px; padding-bottom:15px; }
.home-section-heading .text-link { color:#676f50; }
.home-receive-row { padding-top:14px; padding-bottom:14px; }
.home-countdown { font-weight:650; color:var(--ink); }
.home-message-row { padding-top:12px; padding-bottom:12px; }
.home-message-row p { color:#656b5e; }
.home-shortcuts { background:#fff; }
.home-shortcut { padding:14px 0; }
.home-shortcut > svg { flex:none; box-sizing:content-box; width:19px; height:19px; padding:9px; border:1px solid #e5e8da; border-radius:11px; background:#f7f9f2; }
.home-shortcut:hover { text-decoration:none; }
.home-shortcut:hover > svg { background:#fff4b8; border-color:#e0d485; }
.home-shortcut small { line-height:1.55; }
.customer-dialog { border-color:#dfe2d6; border-radius:18px; box-shadow:0 24px 80px #24252226; }
.dialog-heading { background:#fafbf7; border-bottom-color:#e4e6dc; }
.dialog-heading h2 { font-weight:700; }
.dialog-close { background:#fff; }
.add-number-upload { border-color:#cfd5c1; background:#fafbf7; }
.notification-secret-input { position:relative; }
.notification-secret-input > input { padding-right:64px; }
.notification-secret-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); padding:6px 9px; border:0; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:.78rem; cursor:pointer; }
.notification-secret-toggle:hover { background:var(--soft); }
.notification-secret-toggle:focus-visible { outline:2px solid #c2a72a; outline-offset:1px; }
.account-group h2 { background:#fafbf7; }
.auth-layout { background:#fbfcf8; }
.auth-hero { padding:32px clamp(26px,4vw,70px); background-color:#f6f7ef; background-image:radial-gradient(#adb49340 .7px,transparent .7px); background-size:14px 14px; }
.auth-hero h1 { font-size:clamp(1.8rem,2.6vw,2.35rem); margin-bottom:18px; }
.auth-hero p { font-size:.94rem; }
.auth-guide { display:block; width:min(220px,60%); height:180px; object-fit:contain; margin:12px 0 18px; }
.auth-box { padding:30px; background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 48px #292f2210; }
.auth-box h1 { font-size:1.85rem; }
.auth-points { margin:18px 0 24px; gap:12px; font-size:.83rem; }
.auth-login-links { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.auth-login-links a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; font-size:.82rem; color:var(--muted); }
.auth-login-links a:hover { color:var(--ink); }
@media(min-width:761px) {
 .auth-login .auth-hero { position:relative; padding-block:64px; }
 .auth-login .auth-hero > .brand { position:absolute; top:32px; margin:0; }
 .auth-login .auth-hero > small { position:absolute; bottom:32px; }
 .auth-login .auth-hero > div { display:grid; flex:1; grid-template-rows:minmax(0,1fr) 220px minmax(0,1fr); row-gap:20px; min-height:0; width:100%; max-width:440px; }
 .auth-login .auth-hero-copy { align-self:end; }
 .auth-login .auth-hero-copy p { margin-bottom:0; }
 .auth-login .auth-guide { width:min(260px,85%); height:220px; margin:0; justify-self:center; }
 .auth-login .auth-points { align-self:start; margin:0; }
 .auth-login .auth-panel { padding-block:32px; }
}
@media(max-width:1100px) {
 .home-summary > div { padding:13px 14px; }
 .metric-label svg { width:29px; height:29px; padding:6px; }
 .home-summary .metric-label { gap:7px; font-size:.75rem; }
}
@media(max-width:760px) {
 h1,.list-content h1 { font-size:1.5rem; }
 .main { background:#fafbf8; }
 .home-welcome { padding:15px; margin-bottom:14px; }
 .home-welcome .page-heading { display:flex; align-items:center; gap:10px; }
 .home-welcome .page-lead { font-size:.74rem; }
 .home-welcome .page-heading > .button { margin:0; flex:none; padding:8px 10px; }
 .home-summary { gap:7px; }
 .home-summary > div { padding:12px 9px; gap:8px; }
 .home-summary .metric-label { font-size:.69rem; gap:5px; }
 .metric-label svg { width:17px; height:17px; padding:0; border-radius:0; background:none!important; }
 .home-summary strong { font-size:1.35rem; }
 .home-message-row,.home-receive-row { padding-left:15px; padding-right:15px; }
 .card { border-radius:13px; }
 .customer-dialog { border-radius:16px; }
 .auth-box { padding:24px 20px; border-radius:18px; }
 .auth-mobile-brand { flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:28px; }
 .auth-mobile-brand p { margin:0; }
 .auth-mobile-purpose { color:var(--ink); font-size:.93rem; font-weight:600; line-height:1.6; }
 .auth-login .auth-panel { padding:24px 16px; }
 .auth-login .auth-mobile-brand { gap:9px; margin-bottom:20px; }
 .auth-login .auth-mobile-brand p,.auth-login .login-intro > .eyebrow,.auth-login .login-intro > p { display:none; }
 .auth-login .auth-mobile-brand .auth-mobile-purpose { display:block; color:var(--muted); font-size:.82rem; font-weight:400; line-height:1.65; }
 .auth-login .login-intro h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 .auth-login .captcha-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 .auth-login .captcha-row input { grid-column:1 / -1; width:100%; }
 .auth-login .captcha-row .button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }

.hosting-start-steps { margin: 24px 0; padding-left: 22px; display: grid; gap: 18px; }
.hosting-start-steps li { padding-left: 6px; }
.hosting-start-steps strong, .hosting-start-steps span { display: block; }
.hosting-start-steps span { color: var(--muted); font-size: .85rem; margin-top: 4px; }

/* Notification settings and direct links share the existing account surfaces. */
.content.list-content, .content:has(> .notifications-content), .content:has(> .account-page) {
 max-width:1600px;
 padding-inline:clamp(24px,2.6vw,40px);
 padding-bottom:24px;
}
.notifications-content { display:grid; gap:18px; min-width:0; }
.notifications-content > .page-heading { flex:none; }
.notification-message-list { min-width:0; }
.notification-message-list .notification-row { padding:16px 20px; }
.notification-row-heading > strong { min-width:0; overflow-wrap:anywhere; }
.notification-sync-summary {
 display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
 padding:17px 20px; border:1px solid var(--line); border-radius:13px; background:#f7f8f2;
}
.notification-sync-summary > div { flex:1; min-width:220px; }
.notification-sync-summary h2, .notification-sync-summary h3 { margin:0 0 5px; font-size:.94rem; }
.notification-sync-summary p { margin:5px 0 0; line-height:1.6; }
.notification-sync-summary .button { flex:none; }
.notification-nav-count {
 display:inline-flex; align-items:center; justify-content:center; flex:none; margin-left:auto;
 min-width:23px; padding:3px 6px; border-radius:999px; background:#ffdf4c; color:var(--ink);
 font-size:.69rem; line-height:1.2; font-weight:700; font-variant-numeric:tabular-nums;
}
.customer-dialog.wide-dialog.notification-settings-dialog { width:min(1080px,calc(100vw - 40px)); }
.notification-settings-dialog .dialog-content { padding:20px; }
.notification-settings-channels .notification-channel-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.notification-settings-channels .notification-channel-card { display:flex; flex-direction:column; padding:16px; min-width:0; }
.notification-settings-channels .notification-channel-card > p { margin:9px 0; overflow-wrap:anywhere; }
.notification-settings-channels .notification-channel-card > .button-row { margin-top:auto; padding-top:8px; }
.notification-settings-channels .notification-channel-card .button { min-height:34px; padding:8px 13px; font-size:.78rem; }
.notification-settings-channels .notification-more-channels { margin-top:12px; }
.account-layout { grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr); gap:20px; }
.account-layout > *, .account-layout .stack { min-width:0; }
.account-page .account-row { padding:16px 20px; }
#inbox-message-panel .message-scroll { max-height:none; }
.numbers-choices { max-height:none; }

/* Allocate the remaining desktop space after the actual heading, tabs and banners. */
@media(min-width:761px) and (min-height:700px) {
 .content.list-content:has(#inbox-message-panel .data-panel) {
  display:flex; flex-direction:column; block-size:calc(100dvh - var(--header-height));
 }
 .content.list-content:has(#inbox-message-panel .data-panel) > * { flex-shrink:0; }
 .content.list-content:has(#inbox-message-panel .data-panel) > #inbox-message-panel {
  display:flex; flex-direction:column; flex:1; min-height:160px;
 }
 #inbox-message-panel .data-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
 #inbox-message-panel .message-scroll { flex:1; min-height:0; }
 #inbox-message-panel .list-footer { flex:none; }
}
@media(min-width:901px) and (min-height:700px) {
 .content.list-content:has(.numbers-workspace) { display:flex; flex-direction:column; block-size:calc(100dvh - var(--header-height)); }
 .content.list-content:has(.numbers-workspace) > * { flex-shrink:0; }
 .content.list-content > .numbers-workspace { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); }
 .numbers-picker { display:flex; flex-direction:column; max-height:100%; top:calc(var(--header-height) + 20px); }
 .numbers-picker-heading { flex:none; }
 .numbers-choices { min-height:0; overscroll-behavior:contain; }
 .number-choice { flex-shrink:0; }
 .number-detail-panel { align-self:start; }
}

@media(max-width:950px) {
 .notification-settings-channels .notification-channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .account-layout { grid-template-columns:1fr; }
}
@media(max-width:760px) {
 .content.list-content, .content:has(> .notifications-content), .content:has(> .account-page) { padding:20px 16px 24px; }
 .mobile-tabbar { grid-template-columns:repeat(5,minmax(0,1fr)); }
 .mobile-tabbar a .notification-nav-count { position:absolute; top:0; left:calc(50% + 7px); margin:0; min-width:18px; padding:2px 4px; font-size:.59rem; }
 .notifications-content { gap:16px; }
 .notification-message-list .notification-row { padding:15px; }
 .notification-sync-summary { align-items:flex-start; padding:15px; gap:12px; }
 .notification-sync-summary > div { min-width:0; flex-basis:100%; }
 .notification-sync-summary .button { margin:0; }
 .customer-dialog.wide-dialog.notification-settings-dialog { width:calc(100vw - 24px); }
 .notification-settings-dialog .dialog-content { padding:16px; }
 .account-layout { gap:16px; }
 .account-page .account-row { padding:15px; }
}
@media(max-width:600px) {
 .notification-settings-channels .notification-channel-grid { grid-template-columns:1fr; }
}

/* Read account notifications in place, with one scrollable body and a stable close button. */
.customer-dialog.notification-center-dialog {
 width:min(700px,calc(100vw - 40px)); max-height:min(760px,calc(100dvh - 40px));
 overflow:hidden; background:#fffefa;
}
.notification-center-dialog[open] { display:flex; flex-direction:column; }
.notification-center-dialog .dialog-heading { flex:none; position:static; gap:12px; padding:16px 20px; background:#fff9e9; }
.notification-center-dialog .dialog-heading h2 { min-width:0; overflow-wrap:anywhere; }
.notification-center-dialog .dialog-close { width:44px; height:44px; border-radius:11px; }
.notification-center-dialog .dialog-content {
 flex:1; min-height:0; min-width:0; overflow:auto; padding:20px;
 overscroll-behavior:contain; scrollbar-gutter:stable;
}
.notification-center-content { display:flex; flex-direction:column; gap:14px; min-width:0; }
.notification-center-content > p { margin:0; }
.notification-center-dialog .notification-loading { margin:0; line-height:1.6; }
.notification-center-dialog .notification-error .notice { margin-top:0; margin-bottom:12px; }
.notification-center-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.notification-center-toolbar > .button-row { width:100%; justify-content:flex-end; gap:8px; }
.notification-update-status {
 display:inline-block; flex:0 0 84px; width:84px; height:20px; margin-right:auto;
 color:var(--muted); font-size:.75rem; line-height:20px; white-space:nowrap;
}
.notification-center-dialog .notification-message-list { min-width:0; }
.notification-center-dialog .notification-section-heading { flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.notification-center-dialog .notification-section-heading h2 { font-size:1rem; }
.notification-center-dialog .notification-tabs { display:flex; flex-wrap:wrap; width:100%; max-width:none; gap:4px; }
.notification-center-dialog .notification-tabs > button { flex:1; min-width:0; min-height:44px; padding:10px 12px; overflow-wrap:anywhere; }
.notification-center-dialog .button { min-height:44px; margin:0; }
.notification-center-dialog .notification-list { flex:none; min-height:0; overflow:hidden; border-radius:12px; box-shadow:none; }
.notification-center-dialog .notification-row { padding:16px; gap:12px; }
.notification-center-dialog .notification-row .icon-wrap { width:34px; height:34px; border-radius:10px; background:#fff1bd; color:#8d7322; }
.notification-center-dialog .notification-row-heading { gap:6px 9px; }
.notification-center-dialog .notification-row-heading > strong { line-height:1.5; }
.notification-center-dialog .notification-row-body > p { white-space:pre-wrap; line-height:1.65; }
.notification-center-dialog .notification-row .button-row { gap:8px; flex-wrap:wrap; margin-bottom:0; }
.notification-center-dialog .notification-more { padding:14px 0 0; }
.notification-center-dialog .notification-more .button { width:100%; }
.notification-center-dialog .empty-state { padding:28px 16px; }
.notification-center-dialog .notice { overflow-wrap:anywhere; }
@media(max-width:760px) {
 .customer-dialog.notification-center-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:16px; }
 .notification-center-dialog .dialog-heading { padding:12px 14px; }
 .notification-center-dialog .dialog-content { padding:14px; }
 .notification-center-content { gap:12px; }
 .notification-update-status { flex-basis:72px; width:72px; font-size:.69rem; }
 .notification-center-toolbar .button { padding:10px 12px; font-size:.78rem; }
 .notification-center-dialog .notification-row { padding:14px 12px; gap:9px; }
 .notification-center-dialog .notification-row .icon-wrap { width:30px; height:30px; border-radius:9px; }
 .notification-center-dialog .notification-row-heading > .small { margin-left:0; flex-basis:100%; }
 .notification-center-dialog .notification-tabs > button { padding-inline:8px; font-size:.79rem; }
 .notification-center-dialog .notification-row .button { padding:10px 12px; font-size:.78rem; }
}

/* Number copy: the owner can copy the full number while a window is open. */
.phone-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.phone-row .phone { margin-top:0; }
.phone-row .button { min-height:30px; padding:4px 12px; font-size:.8rem; }
.ready-phone { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:6px 0 14px; padding:12px 16px; border-radius:12px; background:var(--soft, #f6f5ef); }
.ready-phone strong { font-size:1.25rem; letter-spacing:.02em; }
.captcha-row { display:flex; align-items:center; gap:10px; }
.captcha-row input { flex:1; min-width:0; }
.captcha-image { border-radius:8px; border:1px solid var(--line, #e7e6e2); flex:none; }
.captcha-row .button { flex:none; min-height:36px; padding:6px 12px; }
/* Manual onboarding keeps the scannable administrator QR separate from eSIM credentials. */
.onboarding-contact { margin: 18px 0; }
/* The uploaded contact card is kept whole; decoration stays outside its quiet zone. */
.onboarding-contact { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 20px; margin: 20px 0 26px; min-width: 0; background: #faf9f3; border: 1px solid #e9e5d4; border-radius: 18px; }
.onboarding-qr-frame { min-width: 0; padding: 12px; background: #fff; border: 1px solid #ece9dc; border-radius: 14px; box-shadow: 0 5px 18px rgba(49, 47, 37, .04); }
.onboarding-contact .onboarding-qr { display: block; width: 100%; max-width: 304px; height: auto; margin: 0 auto; object-fit: contain; background: #fff; }
.onboarding-contact-guide { min-width: 0; }
.onboarding-contact-label { display: inline-flex; padding: 5px 10px; margin-bottom: 12px; background: #fff0ab; border-radius: 999px; color: #51482b; font-size: 12px; font-weight: 600; }
.onboarding-contact-guide h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.5; }
.onboarding-contact-guide p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.onboarding-original-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #ded9c3; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.onboarding-original-link:hover { border-color: #c9b34f; background: #fffbed; }
.onboarding-original-link:focus-visible { outline: 2px solid #a48c22; outline-offset: 3px; }
.onboarding-contact-guide .onboarding-phone-hint { margin: 14px 0 0; font-size: 12px; }
@media (max-width: 1100px) { .hosting-onboarding-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .onboarding-contact { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; } .onboarding-qr-frame { width: min(100%, 330px); justify-self: center; } .onboarding-contact-guide { max-width: 380px; justify-self: center; } }
@media (max-width: 480px) { .onboarding-contact { padding: 12px; gap: 16px; border-radius: 14px; } .onboarding-qr-frame { padding: 8px; } }

/* Number page: only the recent verification codes; full SMS stay in the inbox (2026-10-09). */
.code-panel { padding:18px 20px; }
.code-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.code-panel-heading h3 { margin:0; font-size:1rem; }
.code-panel-heading .button { min-height:32px; padding:5px 12px; font-size:.8rem; }
.code-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.code-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.code-row.is-current { border-color:#e8d781; background:#fffbe6; }
.code-value { font-size:1.4rem; font-weight:700; letter-spacing:.1em; color:var(--ink); }
.code-meta { display:grid; gap:2px; min-width:0; font-size:.86rem; }
.code-meta > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.code-row .button { min-height:32px; padding:5px 16px; font-size:.8rem; }
.code-empty { margin:2px 0 0; }
.code-note { margin:12px 0 0; }
.code-panel-inline { max-width:640px; margin:10px auto 14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fffdf7; text-align:left; }
.code-panel-inline .code-panel-heading { margin-bottom:8px; }
.code-panel-inline .code-panel-heading h3 { font-size:.86rem; }
.code-panel-inline .code-list { gap:6px; }
.code-panel-inline .code-row { gap:12px; padding:7px 9px; border-radius:9px; }
.code-panel-inline .code-value { font-size:1.5rem; }
.code-panel-inline .code-meta { font-size:.78rem; }
.code-panel-inline .code-note,.code-panel-inline .code-empty { max-width:none; margin:8px 0 0; font-size:.75rem; line-height:1.5; }

/* Inbox: number chips, then one readable list of message cards (2026-10-09). */
.page-heading-actions { justify-content:flex-end; }
.inbox-toolbar .inbox-sync-state { min-width:0; }
.sms-list { display:grid; }
.sms-item { display:grid; gap:6px; padding:15px 20px; border-bottom:1px solid var(--line); }
.sms-item:last-child { border-bottom:0; }
.sms-item-head { display:flex; align-items:center; gap:8px; min-width:0; }
.sms-item-head .badge { flex:none; font-size:.66rem; }
.sms-sender { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.sms-time { flex:none; margin-left:auto; color:var(--subtle); font-size:.78rem; font-variant-numeric:tabular-nums; }
.sms-body { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; width:100%; padding:0; border:0; background:transparent; color:var(--ink); font-size:.92rem; line-height:1.65; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; cursor:pointer; }
.sms-body:hover { color:#000; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.sms-code { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sms-code > span { color:var(--muted); font-size:.78rem; }
.sms-code strong { font-size:1.08rem; letter-spacing:.08em; }
.sms-code .button { min-height:30px; padding:4px 13px; font-size:.78rem; }
@media(max-width:760px) {
 .page-heading-actions { justify-content:flex-start; margin-top:12px; }
 .page-heading-actions .button { flex:0 1 auto; }
 .sms-item { padding:13px 14px; }
 .code-panel { padding:16px; }
 .code-row { gap:10px; padding:9px 10px 9px 12px; }
 .code-value { font-size:1.15rem; letter-spacing:.06em; }
 .code-row .button { padding:5px 12px; }
 .code-panel-inline { padding:9px 10px; margin:8px auto 10px; }
 .code-panel-inline .code-row { gap:8px; padding:7px 8px; }
 .code-panel-inline .code-value { font-size:1.2rem; letter-spacing:.06em; }
 .code-panel-inline .code-meta { font-size:.72rem; }
 .code-panel-inline .code-row .button { padding:5px 10px; }
}


/* Everyday customer journeys: warm surfaces, small scenes, and visible actions. */
.app-header { background:#fffefa; border-bottom-color:var(--line); }
.header-notifications {
 position:relative; display:inline-flex; align-items:center; justify-content:center;
 width:44px; height:44px; flex:none; padding:11px; border:0; border-radius:12px;
 color:var(--ink); background:var(--soft); transition:background-color .2s,box-shadow .2s;
}
.header-notifications:hover { text-decoration:none; background:var(--active); }
.header-notifications[aria-expanded="true"] { background:var(--active); box-shadow:inset 0 0 0 1px #e1cb71; }
.header-notifications .notification-nav-count {
 position:absolute; right:-4px; top:-3px; margin:0; min-width:19px; padding:3px 4px;
 border:2px solid #fffefa; font-size:.61rem; line-height:1; background:#ffb65b;
}
.header-notifications:focus-visible,.plan-tab:focus-visible {
 outline:2px solid #8e7420; outline-offset:3px;
}
.nav-link,.number-choice,.home-shortcut,.inbox-number-tab,.mobile-tabbar a,.plan-tab {
 transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;
}
.mobile-tabbar { background:#fffefa; border-top-color:var(--line); }
.scene-illustration { display:block; width:220px; height:220px; flex:none; object-fit:contain; aspect-ratio:1; }
.compact-scene { width:140px; height:140px; }
.home-welcome { border-color:var(--line); background-color:#fff8e5; background-image:none; }
.home-welcome .page-lead { color:var(--muted); }
.home-wallet {
 display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
 padding:16px 20px; margin-bottom:16px; border:1px solid #eadcaa; border-radius:14px;
 background:#fff8de;
}
.home-wallet > div { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; min-width:0; }
.home-wallet strong { font-size:1.8rem; line-height:1; font-variant-numeric:tabular-nums; }
.home-wallet strong small { font-size:.78rem; font-weight:500; }
.home-wallet .button { flex:none; }
.home-guidance {
 display:grid; grid-template-columns:minmax(0,1fr) 168px; align-items:center; gap:8px 22px;
 padding:22px 24px; margin-bottom:18px; border:1px solid var(--line); border-radius:16px;
 background:linear-gradient(110deg,#fff8e7,#fffdf7);
}
.home-guidance-copy { grid-column:1; min-width:0; }
.home-guidance-kicker { display:block; margin-bottom:7px; color:#8c762e; font-size:.72rem; font-weight:650; }
.home-guidance-copy h2 { margin:0 0 9px; font-size:1.3rem; line-height:1.4; }
.home-guidance-copy p { max-width:600px; margin:0 0 14px; color:var(--muted); font-size:.85rem; line-height:1.65; }
.home-guidance > .scene-illustration { grid-column:2; grid-row:1 / span 2; justify-self:center; width:168px; height:168px; }
.home-guidance-status { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; margin:0 0 10px; min-width:0; }
.home-guidance-status > strong { min-width:0; max-width:100%; overflow-wrap:anywhere; font-size:.88rem; font-weight:650; }
.home-guidance-status .badge { flex:none; }
.home-guidance-status .home-countdown { display:inline; margin:0; font-size:.9rem; }
.home-guidance-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.home-guidance > .home-guidance-actions { grid-column:1; }
.home-guidance-actions .button { margin:0; }
.home-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.home-summary > div { border-color:var(--line); }
.home-inbox-empty { display:flex; align-items:center; justify-content:center; gap:22px; padding:20px 24px; }
.home-inbox-empty .scene-illustration { width:124px; height:124px; }
.home-inbox-empty > div { min-width:0; }
.home-inbox-empty p { margin:0 0 10px; line-height:1.6; }
.home-inbox-empty .text-link { font-size:.78rem; }
.home-shortcuts { background:#fffefa; }
.home-shortcut > svg { background:#fff8e7; border-color:var(--line); }
.scene-empty { padding:30px 24px 36px; }
.scene-empty .scene-illustration { margin:0 auto 12px; }
.scene-empty h2 { margin:0 0 10px; }
.scene-empty p { max-width:460px; margin:0 auto 20px; line-height:1.65; }
.scene-empty .button { min-height:40px; }
.home-no-messages.scene-empty { padding:18px 20px 22px; }
.home-no-messages.scene-empty .scene-illustration { width:142px; height:142px; margin-bottom:8px; }
.home-no-messages.scene-empty h2 { font-size:1rem; }
.home-no-messages.scene-empty p { font-size:.8rem; margin-bottom:14px; }

/* Keep buying and redeeming adjacent; the wallet never buries either entry. */
.plan-hero { display:grid; grid-template-columns:minmax(0,1fr) 124px; align-items:center; gap:18px; margin-bottom:12px; }
.plan-hero .page-heading { margin:0; }
.plan-hero .page-lead { max-width:620px; }
.plan-hero .scene-illustration { width:124px; height:124px; justify-self:end; }
.plan-balance.usage-wallet {
 margin:0 0 14px; padding:16px 20px; gap:24px; border-color:#eadcaa;
 background:linear-gradient(105deg,#fff6d8,#fffdf7);
}
.plan-balance.usage-wallet > div:first-child strong { font-size:2rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.plan-balance.usage-wallet > div:not(:first-child) { color:var(--muted); font-size:.78rem; }
.plan-balance.usage-wallet > div:not(:first-child) strong { color:var(--ink); font-size:1rem; font-variant-numeric:tabular-nums; }
.plan-tabs { display:flex; gap:5px; padding:5px; margin:0 0 16px; border:1px solid var(--line); border-radius:13px; background:#f6f1e6; }
.plan-tabs .plan-tab {
 flex:1; min-height:42px; padding:10px 14px; border:0; border-radius:9px;
 background:transparent; color:var(--muted); font-size:.86rem; font-weight:650; cursor:pointer;
}
.plan-tabs .plan-tab.active,.plan-tabs .plan-tab[aria-selected="true"] {
 background:#fffefa; color:var(--ink); box-shadow:0 2px 7px #493d2110;
}
.plan-tabs .plan-tab:hover:not(.active):not([aria-selected="true"]) { background:#fff8e8; color:var(--ink); }
.plan-purchase,.plan-redeem { margin-bottom:20px; }
.plan-purchase .usage-packages { margin:0 0 14px; gap:16px; }
.plan-purchase .usage-package { padding:22px; position:relative; overflow:hidden; }
.plan-purchase .usage-package h2 { margin:0; font-size:1.1rem; }
.plan-purchase .usage-package .usage-price { font-size:2.1rem; margin:15px 0 12px; }
.plan-purchase .usage-package .usage-price span { white-space:nowrap; font-size:.9rem; }
.plan-purchase .usage-package p.small { margin:0 0 18px; font-size:.79rem; line-height:1.6; }
.plan-purchase .usage-package > .button { min-height:42px; }
.plan-purchase > p,.plan-purchase > .small { padding-inline:4px; line-height:1.6; color:var(--muted); }
.plan-redeem.usage-redeem { margin:0 0 20px; }
.plan-redeem h2 { margin-top:0; }
.plan-redeem .usage-redeem-account { overflow-wrap:anywhere; }
.usage-redemption-success { padding:15px 16px; border:1px solid #c8dfb9; border-radius:11px; background:#f4faec; margin:14px 0; }
.usage-redemption-success h3,.usage-redemption-success strong { color:#395b31; }
.usage-redemption-success p { line-height:1.6; }
.usage-redemption-success .notice { margin:0 0 12px; padding:0; border:0; background:transparent; }
.usage-redemption-success .button-row { margin-top:12px; }
.usage-rules { padding:20px 22px; }
.usage-rules h2 { margin:0 0 10px; }
.usage-rules p { font-size:.81rem; line-height:1.75; color:var(--muted); }

/* A state marker can replace the old decorative stage icon without adding height. */
.number-receive-stage .stage-illustration { display:none; }
.number-receive-stage .stage-illustration:has(.receive-state-marker) {
 display:flex; align-items:center; justify-content:center; width:26px; height:26px;
 margin:0 auto 8px; border-radius:999px; background:transparent;
}
.receive-state-marker {
 display:inline-flex; align-items:center; justify-content:center; flex:none; gap:3px;
 width:26px; height:26px; vertical-align:middle; border-radius:999px; background:#fff1bc;
}
.receive-state-marker > span { width:4px; height:4px; flex:none; border-radius:50%; background:#977c23; }
.receive-state-marker.is-ready { color:#47743d; background:#eaf5e3; }
.receive-state-marker svg { width:15px; height:15px; }
.number-receive-stage .stage-main h2 { display:block; }
.number-receive-stage .stage-metric { font-variant-numeric:tabular-nums; }
.number-receive-stage .code-panel-inline { background:#fffdf7; }
.number-receive-stage .code-row.is-current { background:#fff6d4; border-color:#ddc265; }
.number-receive-stage .ready-phone { background:#fbf5e5; }

@keyframes feimao-wait-dot { 0%,70%,100% { opacity:.4; } 35% { opacity:1; } }
@keyframes feimao-success {
 0% { box-shadow:0 0 0 0 #d3ad324d; }
 35% { box-shadow:0 0 0 4px #d3ad322e; }
 100% { box-shadow:0 0 0 0 #d3ad3200; }
}
@media(prefers-reduced-motion:no-preference) {
 .motion-wait > span { animation:feimao-wait-dot 1.2s ease-in-out infinite; }
 .motion-wait > span:nth-child(2) { animation-delay:.16s; }
 .motion-wait > span:nth-child(3) { animation-delay:.32s; }
 .motion-success { animation:feimao-success .55s ease-out 1; }
}
.motion-paused .motion-wait,.motion-paused .motion-wait > span,.motion-paused .motion-success,
body.motion-paused .brand-mark { animation-play-state:paused!important; }

@media(max-width:1100px) {
 .home-guidance { grid-template-columns:minmax(0,1fr) 140px; gap:10px 16px; }
 .home-guidance > .scene-illustration { width:140px; height:140px; }
}
@media(max-width:760px) {
 .main { background:var(--canvas); }
 .app-header .header-actions { gap:5px; }
 .app-header .header-actions .service-health { max-width:120px; margin-right:2px; font-size:.62rem; }
 .header-actions .header-notifications { display:inline-flex; width:40px; height:40px; padding:10px; border-radius:10px; }
 .header-notifications .notification-nav-count { right:-4px; top:-4px; }
 .home-welcome { margin-bottom:12px; padding:14px 15px; }
 .home-welcome .page-heading { gap:8px; }
 .home-welcome h1 { font-size:1.33rem; }
 .home-wallet { padding:13px 15px; margin-bottom:12px; gap:10px; }
 .home-wallet > div { gap:6px 10px; }
 .home-wallet strong { font-size:1.55rem; }
 .home-wallet .button { min-height:36px; padding:8px 12px; font-size:.77rem; }
 .home-guidance { grid-template-columns:minmax(0,1fr) 92px; padding:15px; gap:8px; margin-bottom:14px; border-radius:13px; }
 .home-guidance > .scene-illustration { width:92px; height:92px; }
 .home-guidance-copy h2 { font-size:1.03rem; margin-bottom:6px; }
 .home-guidance-kicker { font-size:.65rem; margin-bottom:5px; }
 .home-guidance-status { gap:6px 8px; margin-bottom:8px; }
 .home-guidance-status > strong { font-size:.77rem; }
 .home-guidance-status .badge { font-size:.64rem; }
 .home-guidance-status .home-countdown { font-size:.8rem; }
 .home-guidance-copy p { font-size:.76rem; margin:0 0 11px; line-height:1.55; }
 .home-guidance-actions { gap:6px; }
 .home-guidance-actions .button { min-height:35px; padding:8px 11px; font-size:.75rem; }
 .home-summary { margin-bottom:14px; }
 .home-inbox-empty { padding:17px 15px; gap:14px; }
 .home-inbox-empty .scene-illustration { width:94px; height:94px; }
 .scene-empty { padding:24px 16px 28px; }
 .scene-empty .scene-illustration { width:166px; height:166px; margin-bottom:8px; }
 .scene-empty h2 { font-size:1.12rem; }
 .scene-empty p { margin-bottom:17px; font-size:.81rem; }
 .home-no-messages.scene-empty .scene-illustration { width:116px; height:116px; }
 .plan-hero { grid-template-columns:minmax(0,1fr) 82px; gap:10px; margin-bottom:12px; }
 .plan-hero .scene-illustration { width:82px; height:82px; }
 .plan-hero .page-heading { display:flex; align-items:flex-start; gap:7px; }
 .plan-hero h1 { font-size:1.4rem; margin-bottom:5px; }
 .plan-hero .page-lead { font-size:.75rem; line-height:1.55; }
 .plan-hero .page-heading > .button { flex:none; min-height:30px; padding:6px 9px; margin:0; font-size:.7rem; }
 .plan-balance.usage-wallet { padding:13px 15px; margin-bottom:12px; gap:16px; }
 .plan-balance.usage-wallet > div:first-child strong { font-size:1.8rem; }
 .plan-balance.usage-wallet > div:first-child > span { font-size:.76rem; }
 .plan-balance.usage-wallet > div:not(:first-child) { font-size:.7rem; gap:5px; }
 .plan-tabs { margin-bottom:12px; padding:4px; border-radius:11px; }
 .plan-tabs .plan-tab { min-height:39px; padding:8px 10px; font-size:.8rem; border-radius:8px; }
 .plan-purchase .usage-packages { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
 .plan-purchase .usage-package { padding:15px 12px; border-radius:12px; }
 .plan-purchase .usage-package h2 { font-size:.9rem; }
 .plan-purchase .usage-package .usage-price { font-size:1.55rem; margin:12px 0 9px; }
 .plan-purchase .usage-package .usage-price span { font-size:.71rem; }
 .plan-purchase .usage-package p.small { font-size:.7rem; line-height:1.5; margin-bottom:13px; }
 .plan-purchase .usage-package > .button { min-height:38px; font-size:.72rem; padding:8px 6px; white-space:normal; }
 .plan-purchase > p,.plan-purchase > .small { padding-inline:1px; font-size:.74rem; }
 .plan-redeem.usage-redeem { padding:17px 15px; margin-bottom:16px; }
 .plan-redeem > p { font-size:.77rem; line-height:1.6; overflow-wrap:anywhere; }
 .plan-redeem h2 { font-size:1rem; }
 .plan-redeem form > .button { min-height:40px; }
 .usage-redemption-success { padding:13px; }
 .usage-rules { padding:17px 15px; }
 .usage-rules p { font-size:.76rem; }
 .number-detail-panel { gap:12px; }
 .number-detail-panel > .number-receive-stage { order:-1; }
 .numbers-picker-heading { display:none; }
 .numbers-choices { padding:6px; gap:5px; }
 .number-choice { width:220px; min-height:56px; padding:8px; gap:8px; }
 .number-choice .alias-avatar { width:32px; height:32px; }
 .number-choice-identity { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 6px; }
 .number-choice-identity strong { grid-column:1 / -1; font-size:.79rem; }
 .number-choice-identity .mono { grid-column:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; }
 .number-choice-identity .badge { grid-column:2; font-size:.62rem; padding:3px 5px; }
 .number-choice > svg { display:none; }
 .number-detail-heading .profile-header { gap:10px; }
 .number-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 16px; padding-top:9px; margin-top:9px; }
 .number-facts strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
 .number-facts > div { gap:3px; font-size:.7rem; }
 .number-receive-stage .stage-main { position:relative; padding:4px 0; }
 .number-receive-stage .stage-illustration:has(.receive-state-marker) { position:absolute; right:0; top:0; width:26px; height:26px; margin:0; }
 .number-receive-stage .stage-main > h2 { padding-inline:28px; }
 .number-receive-stage .stage-steps { margin-bottom:8px; }
 .number-receive-stage .stage-main p { font-size:.76rem; line-height:1.55; }
 .number-receive-stage .ready-phone { gap:7px; margin:6px 0 10px; padding:9px 10px; }
 .number-receive-stage .ready-phone strong { font-size:1.07rem; }
 .number-receive-stage .ready-phone .button { min-height:31px; padding:6px 10px; font-size:.72rem; }
 .number-receive-stage .stage-metric { font-size:1.8rem; }
 .number-receive-stage .code-panel-inline .code-row { grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; padding:9px 10px; }
 .number-receive-stage .code-panel-inline .code-value { grid-column:1; grid-row:1; font-size:1.4rem; letter-spacing:.08em; }
 .number-receive-stage .code-panel-inline .code-meta { grid-column:1; grid-row:2; gap:2px; font-size:.73rem; }
 .number-receive-stage .code-panel-inline .code-row .button { grid-column:2; grid-row:1 / span 2; min-height:36px; padding:7px 12px; }
 .number-receive-stage .stage-main > .button-row { gap:7px; }
 .number-receive-stage .stage-main > .button-row .button { min-height:36px; padding:8px 11px; font-size:.75rem; }
 .number-ready-note { font-size:.7rem; padding-top:10px; }
}
@media(max-width:440px) {
 .app-header .header-actions .service-health { max-width:92px; font-size:.6rem; }
 .app-header .header-actions .service-health .dot { width:6px; height:6px; }
 .home-guidance-actions { grid-column:1 / -1; }
 .home-guidance-copy .home-guidance-actions .button { padding:8px 10px; }
}
@media(max-height:700px) and (max-width:760px) {
 .content:has(.plan-hero) { padding-top:14px; }
 .content:has(.plan-hero) .topline { margin-bottom:10px; }
 .plan-hero { margin-bottom:10px; }
 .plan-hero .scene-illustration { width:65px; height:65px; }
 .plan-balance.usage-wallet { padding-block:10px; }
 .plan-purchase .usage-package { padding-block:12px; }
 .scene-empty .scene-illustration { width:142px; height:142px; }
}
@media(prefers-reduced-motion:reduce) {
 .nav-link,.number-choice,.home-shortcut,.inbox-number-tab,.mobile-tabbar a,.plan-tab,
 .header-notifications { transition:none; }
 .motion-wait,.motion-wait > span,.motion-success,.brand-mark { animation:none!important; }
 .motion-wait > span { opacity:1; }
}

/* Number settings keep migration guidance readable beside the desktop sidebar. */
.number-settings-layout > * { min-width:0; }
@media(max-width:1100px) {
 .number-settings-layout { grid-template-columns:minmax(0,1fr); }
}

/* Local Google button: standard artwork from Google's branding assets. */
.google-button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; border:1px solid #747775; border-radius:22px; background:#fff; color:#1f1f1f; font:500 14px/20px "Google Sans",Arial,sans-serif; cursor:pointer; transition:background-color 180ms,border-color 180ms; }
.google-button img { width:20px; height:20px; flex:none; object-fit:contain; }
.google-button span { min-width:0; }
.google-login-option { margin-top:16px; }
.google-login-option .auth-separator { margin:0 0 13px; }
.google-button:hover:not(:disabled) { background:#f8fafd; border-color:#1f1f1f; }
.google-button:focus-visible { outline:3px solid #b6cdf5; outline-offset:2px; }
.google-button:disabled { opacity:.65; cursor:wait; }
.auth-separator { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.75rem; margin:18px 0; }
.auth-separator::before,.auth-separator::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-legal-links { display:flex; gap:16px; justify-content:center; margin-top:18px; font-size:.72rem; color:var(--muted); }
.auth-legal-links a { min-height:28px; display:inline-flex; align-items:center; }
.google-security-confirm { margin:12px 0 16px; }
.google-confirmed { color:#237449; }
.google-confirm-email { word-break:break-word; margin-bottom:20px; }
@media (prefers-reduced-motion:reduce) { .google-button { transition:none; } }
/* The contact entry stays in the existing header, clear of mobile actions. */
.header-contact { color:var(--brand,#cf6b2c); flex:none; }
.administrator-contact,.manual-payment-qr { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.contact-qr,.manual-payment-qr img { display:block; width:min(224px,100%); height:auto; background:#fff; border-radius:16px; border:1px solid var(--line,#e9e3db); padding:8px; object-fit:contain; }
.contact-wechat { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; padding:18px; border:1px solid #cce5d4; border-radius:14px; background:#f3fbf5; }
.contact-wechat strong { color:#25543a; font-size:1.12rem; overflow-wrap:anywhere; }
.contact-wechat .button { width:min(280px,100%); min-height:44px; }
.contact-qr-backup { width:100%; padding-top:5px; color:var(--muted); }
.contact-qr-backup summary { min-height:44px; cursor:pointer; font-size:.83rem; line-height:44px; }
.contact-qr-backup[open] { display:block; }
.contact-qr-backup .contact-qr { width:min(184px,100%); margin:10px auto; }
.contact-qr-backup .button { min-height:40px; font-size:.8rem; }
.usage-order-detail { max-width:720px; margin:0 auto; }
.usage-order-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.usage-order-heading .mono { overflow-wrap:anywhere; }
.manual-payment-qr { margin:22px auto; max-width:400px; }
.usage-order-detail .button-row { margin-top:24px; flex-wrap:wrap; }
.usage-history-item { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; color:inherit; text-decoration:none; border-bottom:1px solid var(--line,#e9e3db); }
.usage-history-item:last-child { border-bottom:0; }
.usage-history-item>div { display:flex; flex-direction:column; gap:7px; }
.usage-history-item>div:last-child { text-align:right; align-items:flex-end; }
.usage-history-item .badge { white-space:normal; }
.usage-rules>summary { cursor:pointer; font-weight:650; }
@media(max-width:620px) {
  .header-contact { min-width:40px; min-height:40px; }
  .usage-order-detail .button-row>.button { flex:1 1 140px; }
  .usage-history-item { gap:10px; }
  .usage-order-heading .mono { max-width:100%; }
}

/* Package selection is local; the persisted checkout stays in this workspace. */
.billing-content { padding-top:18px; }
.billing-content > .topline { display:none; }
.checkout-plan-heading.plan-hero { grid-template-columns:minmax(0,1fr) auto; margin-bottom:18px; gap:16px; }
.checkout-plan-heading h1 { margin:0 0 8px; font-size:1.5rem; }
.checkout-plan-heading .plan-balance.usage-wallet { margin:0; padding:0; gap:18px; border:0; background:none; }
.checkout-plan-heading .plan-balance.usage-wallet > div { display:flex; align-items:baseline; gap:7px; }
.checkout-plan-heading .plan-balance.usage-wallet > div:first-child { margin-right:0; }
.checkout-plan-heading .plan-balance.usage-wallet > div:first-child strong { font-size:1.45rem; }
.checkout-heading-actions { display:flex; align-items:center; gap:12px; }
.checkout-heading-actions .scene-illustration { width:64px; height:64px; }
.usage-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); align-items:start; gap:22px; }
.usage-workspace.redeem-workspace { grid-template-columns:1fr; }
.usage-workspace > * { min-width:0; }
.usage-workspace-options .plan-tabs { margin-bottom:14px; }
.usage-workspace-options .usage-package { padding:18px 15px; }
.usage-workspace-options .usage-package .usage-price { font-size:1.9rem; }
.usage-package.is-selected { border-color:#c3a42c; box-shadow:0 0 0 1px #c3a42c; background:#fffdf3; }
.usage-checkout-panel { padding:0; overflow:hidden; }
.usage-checkout-content { display:flex; flex-direction:column; min-height:0; }
.checkout-scroll { padding:20px; min-height:0; }
.checkout-summary h2 { margin:10px 0 0; font-size:1.05rem; }
.checkout-summary .usage-price { margin:8px 0 12px; font-size:1.9rem; }
.checkout-summary .usage-price span { font-size:.86rem; }
.usage-checkout-content .manual-payment-qr { gap:9px; margin:12px auto; }
.usage-checkout-content .manual-payment-qr img { width:180px; border-radius:10px; padding:6px; }
.usage-checkout-content .manual-payment-qr > .small { margin:0; font-size:.74rem; }
.usage-checkout-content .manual-payment-qr > .button { min-height:34px; padding:7px 14px; font-size:.76rem; }
.usage-checkout-content p { font-size:.84rem; }
.usage-checkout-content .small { font-size:.75rem; }
.usage-price-breakdown { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 12px; margin:9px 0 4px; color:var(--muted); font-size:.76rem; }
.usage-price-breakdown > * { margin:0; }
.usage-price-breakdown .usage-discount { color:#ab552d; font-weight:650; }
.checkout-summary .usage-final-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 8px; margin:4px 0 8px; color:var(--ink); font-size:2.25rem; font-weight:750; font-variant-numeric:tabular-nums; }
.checkout-summary .usage-final-price > span,.checkout-summary .usage-final-price > small { color:var(--muted); font-size:.78rem; font-weight:500; }
.usage-final-price strong { font-size:inherit; line-height:1.2; }
.usage-checkout-content .usage-exact-amount { margin:8px 0 12px; padding:9px 12px; border:1px solid #e7c886; border-radius:10px; background:#fff5dc; color:#704715; font-size:.84rem; line-height:1.5; }
.usage-exact-amount strong { font-weight:700; }
.usage-payment-step { display:flex; align-items:center; gap:8px; margin:0 0 8px; color:var(--ink); font-size:.85rem; line-height:1.45; }
.usage-step-number { display:inline-grid; place-items:center; flex:none; width:21px; height:21px; border-radius:50%; background:#efe5c4; color:#655018; font-size:.74rem; font-weight:750; }
.checkout-actions .usage-after-payment { flex:0 0 100%; margin:0; }
.usage-after-payment small { margin-left:auto; color:var(--muted); font-size:.7rem; font-weight:400; }
.usage-checkout-content .manual-payment-qr.alipay-brand-frame { width:min(252px,100%); gap:8px; padding:12px; border:1px solid #126fdb; border-radius:16px; background:#1677ff; color:#fff; box-shadow:0 5px 16px #1677ff17; }
.alipay-brand-heading { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; color:#fff; font-size:.95rem; font-weight:700; line-height:24px; }
.alipay-brand-icon { display:inline-flex; align-items:center; justify-content:center; flex:none; width:23px; height:23px; border-radius:5px; background:#fff; color:#1677ff; font-size:17px; font-weight:750; }
.alipay-brand-icon svg { display:block; width:100%; height:100%; }
.alipay-qr-slot { display:grid; place-items:center; flex:none; width:180px; height:180px; max-width:100%; border-radius:10px; background:#fff; overflow:hidden; }
.usage-checkout-content .alipay-qr-slot img { width:180px; height:180px; max-width:100%; padding:6px; border:0; border-radius:0; object-fit:contain; }
.alipay-qr-loading { display:grid; place-content:center; gap:9px; width:100%; height:100%; padding:12px; color:#526a88; font-size:.77rem; }
.alipay-qr-loading::before { content:""; width:25px; height:25px; margin:0 auto; border:2px solid #deebff; border-top-color:#1677ff; border-radius:50%; animation:alipay-qr-spin .8s linear infinite; }
@keyframes alipay-qr-spin { to { transform:rotate(360deg); } }
.alipay-brand-recipient { color:#fff; font-size:.77rem; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.usage-checkout-content .alipay-brand-frame > .small { color:#edf5ff; line-height:1.5; }
.usage-checkout-content .alipay-brand-frame > .button { min-height:36px; padding:6px 12px; border-color:#ffffff85; background:#fff; color:#1266c4; }
.usage-paid-receipt,.usage-payment-unknown { display:grid; gap:6px; margin:12px 0; padding:17px 18px; border:1px solid #b9d9c2; border-radius:13px; background:#f0faf3; color:#24663d; }
.usage-paid-receipt { grid-template-columns:24px minmax(0,1fr); column-gap:10px; }
.usage-paid-receipt > svg { grid-column:1; }
.usage-paid-receipt > strong,.usage-paid-receipt > h3,.usage-paid-receipt > p { grid-column:2; }
.usage-paid-receipt h3,.usage-paid-receipt strong { margin:0; color:#24663d; font-size:1rem; line-height:1.5; }
.usage-paid-receipt p,.usage-payment-unknown p { margin:0; line-height:1.65; }
.usage-submit-pending { display:grid; gap:4px; margin:10px 0; padding:12px 14px; border:1px solid #ecd2a6; border-radius:12px; background:#fff8e9; color:#805c27; }
.usage-submit-pending span { font-size:.82rem; }
.usage-continue-payment-note { display:block; margin-top:5px; color:var(--muted); font-size:.78rem; line-height:1.5; }
.usage-history-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.usage-history-heading h2 { margin:0; }
.checkout-actions .button.is-disabled { pointer-events:none; opacity:.55; }
.usage-payment-unknown { border-color:#e8d4a6; background:#fff9ed; color:#805c27; }
.usage-payment-unknown h3,.usage-payment-unknown strong { margin:0; color:#805c27; font-size:1rem; }
.usage-checkout-resume { display:none; }
.checkout-metadata { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; color:var(--muted); }
.checkout-metadata summary { cursor:pointer; font-size:.76rem; }
.checkout-metadata p { margin:9px 0; overflow-wrap:anywhere; }
.checkout-metadata .button { min-height:32px; font-size:.73rem; padding:7px 11px; margin-right:7px; }
.checkout-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:14px 20px; border-top:1px solid var(--line); background:#fffdf8; }
.checkout-actions > .button:not(.ghost) { flex:1 1 130px; min-height:44px; }
.checkout-actions > .button.ghost { flex:1 1 100%; min-height:36px; padding:7px 12px; }
.usage-checkout-empty { padding:30px 22px; }
.usage-checkout-empty h2 { font-size:1rem; }
.usage-checkout-empty p { margin:0; font-size:.83rem; }
@media(min-width:761px) {
 .usage-checkout-panel:has(.checkout-metadata) { display:flex; flex-direction:column; max-height:calc(100dvh - 188px); }
 .usage-checkout-panel:has(.checkout-metadata) .usage-checkout-content { flex:1; overflow:hidden; }
 .usage-checkout-panel:has(.checkout-metadata) .checkout-scroll { padding:16px 18px; overflow-y:auto; overscroll-behavior:contain; }
 .usage-checkout-panel .checkout-actions { flex:none; padding:12px 16px; gap:8px; }
 .usage-checkout-panel .checkout-actions > .button.ghost { flex:0 0 auto; min-height:44px; }
 .usage-checkout-panel .manual-payment-qr { margin:4px auto; gap:7px; }
 .usage-checkout-panel .manual-payment-qr img { width:180px; }
 .usage-checkout-panel .checkout-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
 .usage-checkout-panel .checkout-summary h2 { margin:0; }
 .usage-checkout-panel .checkout-summary .usage-price-breakdown { flex:0 0 100%; margin:0; }
 .usage-checkout-panel .checkout-summary .usage-price { flex:0 0 100%; margin:0 0 4px; }
 .usage-checkout-panel .checkout-metadata { padding-top:9px; margin-top:9px; }
}
@media(max-width:1100px) and (min-width:761px) {
 .usage-workspace { grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:16px; }
 .usage-workspace-options .usage-packages { grid-template-columns:1fr; }
 .checkout-heading-actions .scene-illustration { display:none; }
}
@media(max-width:760px) {
 .billing-content { padding-top:14px; }
 .checkout-plan-heading.plan-hero { grid-template-columns:minmax(0,1fr) auto; margin-bottom:14px; align-items:start; }
 .checkout-plan-heading h1 { font-size:1.3rem; }
 .checkout-heading-actions .button { min-height:34px; font-size:.72rem; padding:7px 10px; }
 .checkout-heading-actions .scene-illustration { display:none; }
 .checkout-plan-heading .plan-balance.usage-wallet { gap:6px 14px; font-size:.7rem; }
 .checkout-plan-heading .plan-balance.usage-wallet > div:first-child { flex-basis:100%; }
 .checkout-plan-heading .plan-balance.usage-wallet > div:first-child strong { font-size:1.5rem; }
 .usage-workspace { display:block; }
 .usage-workspace-options .usage-packages { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .usage-workspace-options .usage-package { padding:15px 12px; }
 .usage-workspace-options .usage-package .usage-price { font-size:1.55rem; }
 .usage-checkout-panel { display:none; }
 .usage-checkout-resume { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#fff; }
 .usage-checkout-resume > div { min-width:0; }
 .usage-checkout-resume p { margin:4px 0 0; font-size:.75rem; color:var(--muted); }
 .usage-checkout-resume .button { flex:none; min-height:44px; padding:9px 12px; font-size:.8rem; }
 .customer-dialog.usage-checkout-sheet { position:fixed; inset:auto 0 0; margin:0; width:100%; max-width:none; max-height:calc(100dvh - 14px); padding:0; border-radius:18px 18px 0 0; overflow:hidden; }
 .usage-checkout-sheet[open] { display:flex; flex-direction:column; }
 .usage-checkout-sheet .dialog-heading { flex:none; padding:12px 16px; }
 .usage-checkout-sheet .dialog-close { min-width:44px; min-height:36px; }
 .usage-checkout-sheet .dialog-content { display:flex; flex-direction:column; padding:0; min-height:0; overflow:hidden; }
 .usage-checkout-sheet .checkout-scroll { padding:16px; overflow-y:auto; overscroll-behavior:contain; }
 .usage-checkout-sheet .checkout-actions { position:sticky; bottom:0; flex:none; padding:12px 16px calc(10px + env(safe-area-inset-bottom)); gap:8px; }
 .usage-checkout-sheet .checkout-summary .usage-price { margin-bottom:9px; font-size:1.7rem; }
 .usage-checkout-sheet .manual-payment-qr img { width:160px; }
 .usage-checkout-sheet .manual-payment-qr { gap:7px; margin:9px auto; }
 .usage-checkout-sheet .checkout-metadata { margin-top:9px; padding-top:9px; }
 .usage-checkout-sheet .checkout-scroll { padding:13px 16px; }
 .usage-checkout-sheet .checkout-summary h2 { margin-top:6px; }
 .usage-checkout-sheet .checkout-summary .usage-final-price { margin:3px 0 6px; font-size:2rem; }
 .usage-checkout-sheet .manual-payment-qr.alipay-brand-frame { width:min(234px,100%); padding:10px; gap:7px; }
 .usage-checkout-sheet .alipay-qr-slot,.usage-checkout-sheet .alipay-qr-slot img { width:160px; height:160px; }
 .usage-checkout-sheet .usage-exact-amount { margin-bottom:8px; }
 .usage-checkout-sheet .usage-paid-receipt,.usage-checkout-sheet .usage-payment-unknown { padding:15px; }
}
@media(prefers-reduced-motion:reduce) { .alipay-qr-loading::before { animation:none; } }
.usage-checkout-content.is-processing .checkout-summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.usage-checkout-content.is-processing .checkout-summary h2 { margin:0; font-size:.94rem; }
.usage-checkout-content.is-processing .checkout-summary .usage-price-breakdown { flex:0 0 100%; margin:0; }
.usage-checkout-content.is-processing .checkout-summary .usage-final-price { flex:0 0 100%; margin:0; }
.usage-checkout-content.is-processing .usage-paid-receipt { grid-template-columns:20px minmax(0,1fr); gap:3px 7px; margin:6px 0; padding:8px 10px; }
.usage-checkout-content.is-processing .usage-paid-receipt > svg { width:20px; height:20px; }
.usage-checkout-content.is-processing .usage-paid-receipt > strong { font-size:.9rem; line-height:1.4; }
.usage-checkout-content.is-processing .usage-paid-receipt > p { font-size:.75rem; line-height:1.45; }
.usage-checkout-content.is-processing .usage-exact-amount { margin:6px 0 8px; padding:6px 9px; font-size:.8rem; line-height:1.45; }
.usage-checkout-content.is-processing .usage-continue-payment-note { margin-top:3px; font-size:.72rem; line-height:1.4; }
.usage-checkout-content.is-processing .manual-payment-qr.alipay-brand-frame { padding:8px 10px; gap:5px; margin:5px auto; }
@media(min-width:761px) { .usage-checkout-panel .usage-checkout-content.is-processing .checkout-scroll { padding:10px 16px; } }
@media(max-width:760px) { .usage-checkout-sheet .usage-checkout-content.is-processing .checkout-scroll { padding:10px 16px; } }