/* main.css — C-end portal styles. Split from main.css for page-level loading. */

/* Source: main.css lines 1225-2385. Base shell, legal/footer, and shared system-flow rules. */

/* ── Legal pages ── */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
    font-size: 16px !important;
}

.legal-meta {
    margin: var(--space-xs) 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.legal-body h3 {
    margin: var(--space-lg) 0 var(--space-xs);
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.legal-body h3:first-child {
    margin-top: var(--space-sm);
}

.legal-body p {
    margin: 0 0 var(--space-xs);
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

.legal-body p strong {
    color: var(--ink);
    font-weight: 700;
}

.legal-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 700;
}

.icp-footer {
    display: grid;
    justify-items: center;
    gap: 2px;
    flex-shrink: 0;
    text-align: center;
    padding: 8px 16px calc(72px + env(safe-area-inset-bottom));
    font-size: 11px;
    color: var(--subtle);
    line-height: 1.55;
}

.no-tabbar .icp-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.icp-footer a {
    color: inherit;
    text-decoration: none;
}

.icp-footer-line {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Non-home pages use the home page as the visual baseline. */
body:not(.home-page):not(.auth-page) {
    min-height: 100dvh;
    background: oklch(98.8% 0.01 96);
}

body:not(.home-page):not(.auth-page)::before {
    content: none;
}

body:not(.home-page):not(.auth-page) .header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body:not(.home-page):not(.auth-page) .header-row {
    min-height: calc(48px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
}

body:not(.home-page):not(.auth-page) .header h1 {
    color: var(--brand-strong);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

body:not(.home-page):not(.auth-page) .header .nav-back,
body:not(.home-page):not(.auth-page) .header-right .nav-back {
    color: var(--brand-strong);
}

body:not(.home-page):not(.auth-page) .header-action,
body:not(.home-page):not(.auth-page) .channel-badge {
    min-height: 36px;
    max-width: 84px;
    border-color: var(--line);
    border-radius: 10px;
    background: white;
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 700;
}

body:not(.home-page):not(.auth-page) .container {
    width: min(100%, 480px);
    gap: 14px;
    padding: 10px 17px calc(88px + env(safe-area-inset-bottom));
    overflow: visible;
}

body:not(.home-page):not(.auth-page).no-tabbar .container {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

body:not(.home-page):not(.auth-page) .card,
body:not(.home-page):not(.auth-page) .task-panel,
body:not(.home-page):not(.auth-page) .benefits-hero,
body:not(.home-page):not(.auth-page) .collapsible-section {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: none;
    overflow: hidden;
}

body:not(.home-page):not(.auth-page) .task-panel.app-hero,
body:not(.home-page):not(.auth-page) .result-panel {
    padding-top: 18px;
    padding-bottom: 18px;
}

body:not(.home-page):not(.auth-page) .card-title,
body:not(.home-page):not(.auth-page) .home-section-title {
    margin: 0;
    color: var(--brand-strong);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

body:not(.home-page):not(.auth-page) .app-title,
body:not(.home-page):not(.auth-page) .task-title {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

body:not(.home-page):not(.auth-page) .app-subtitle,
body:not(.home-page):not(.auth-page) .task-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

body:not(.home-page):not(.auth-page) .task-kicker,
body:not(.home-page):not(.auth-page) .app-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: oklch(97% 0.01 140);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

body:not(.home-page):not(.auth-page) .app-kicker.centered {
    margin-inline: auto;
}

body:not(.home-page):not(.auth-page) .btn {
    min-height: 46px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

body:not(.home-page):not(.auth-page) .btn-sm {
    width: auto;
    min-width: 76px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13px;
}

body:not(.home-page):not(.auth-page) .btn-primary,
body:not(.home-page):not(.auth-page) .btn-success,
body:not(.home-page):not(.auth-page) .btn-wechat {
    border-color: transparent;
    background: var(--brand);
    color: white;
}

body:not(.home-page):not(.auth-page) .btn-outline {
    border-color: var(--line);
    background: white;
    color: var(--brand-strong);
}

body:not(.home-page):not(.auth-page) .btn-quiet {
    background: transparent;
    color: var(--muted);
}

body:not(.home-page):not(.auth-page) .form-group {
    gap: 8px;
}

body:not(.home-page):not(.auth-page) .form-group label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
}

body:not(.home-page):not(.auth-page) .form-group input,
body:not(.home-page):not(.auth-page) .form-group textarea,
body:not(.home-page):not(.auth-page) .form-group select,
body:not(.home-page):not(.auth-page) .form-control {
    min-height: 46px;
    border-color: var(--line);
    border-radius: 12px;
    background: white;
    color: var(--ink);
    font-size: 15px;
}

body:not(.home-page):not(.auth-page) .form-group input:focus,
body:not(.home-page):not(.auth-page) .form-group textarea:focus,
body:not(.home-page):not(.auth-page) .form-group select:focus,
body:not(.home-page):not(.auth-page) .form-control:focus {
    border-color: var(--brand);
    box-shadow: var(--shadow-focus);
}

body:not(.home-page):not(.auth-page) .state-note,
body:not(.home-page):not(.auth-page) .hero-note,
body:not(.home-page):not(.auth-page) .error-msg {
    padding: 9px 11px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.6;
}

body:not(.home-page):not(.auth-page) .meta-card,
body:not(.home-page):not(.auth-page) .meta-card.flat,
body:not(.home-page):not(.auth-page) .empty-state {
    padding: 2px 12px;
    border: 0;
    border-radius: 12px;
    background: oklch(98.8% 0.01 96);
    box-shadow: none;
}

body:not(.home-page):not(.auth-page) .empty-state {
    padding: 22px 14px;
}

body:not(.home-page):not(.auth-page) .detail-row,
body:not(.home-page):not(.auth-page) .meta-row,
body:not(.home-page):not(.auth-page) .compact-row,
body:not(.home-page):not(.auth-page) .product-row,
body:not(.home-page):not(.auth-page) .order-item,
body:not(.home-page):not(.auth-page) .ledger-item,
body:not(.home-page):not(.auth-page) .points-ledger-item {
    border-bottom-color: color-mix(in oklch, var(--line), white 48%);
}

body:not(.home-page):not(.auth-page) .metric-card,
body:not(.home-page):not(.auth-page) .mini-card,
body:not(.home-page):not(.auth-page) .metric-grid > div,
body:not(.home-page):not(.auth-page) .timeline-item {
    border: 0;
    border-radius: 12px;
    background: oklch(98.8% 0.01 96);
    box-shadow: none;
}

body:not(.home-page):not(.auth-page) .metric-grid {
    gap: 10px;
}

body:not(.home-page):not(.auth-page) .metric-grid span,
body:not(.home-page):not(.auth-page) .metric-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

body:not(.home-page):not(.auth-page) .metric-grid strong,
body:not(.home-page):not(.auth-page) .metric-value {
    color: var(--brand-strong);
    font-size: 16px;
    font-weight: 700;
}

body:not(.home-page):not(.auth-page) .amount-display {
    padding: 6px 0 10px;
}

body:not(.home-page):not(.auth-page) .amount-display .value {
    color: var(--brand-strong);
    font-size: 40px;
}

body:not(.home-page):not(.auth-page) .status-tag,
body:not(.home-page):not(.auth-page) .pill {
    min-height: 22px;
    margin-top: 0;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
}

body:not(.home-page):not(.auth-page) .filter-row a,
body:not(.home-page):not(.auth-page) .orders-filter a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

body:not(.home-page):not(.auth-page) .filter-row a.active,
body:not(.home-page):not(.auth-page) .orders-filter a.active {
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
}

body:not(.home-page):not(.auth-page) .mode-tab-bar,
body:not(.home-page):not(.auth-page) .product-card-list {
    border-color: var(--line);
}

body:not(.home-page):not(.auth-page) .mode-tab {
    min-height: 44px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
}

body:not(.home-page):not(.auth-page) .mode-tab.active {
    color: var(--brand-strong);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--brand);
}

body:not(.home-page):not(.auth-page) .pay-panel {
    padding-top: 14px;
    overflow: visible;
}

body:not(.home-page):not(.auth-page) .pay-farm-header {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 54px;
}

body:not(.home-page):not(.auth-page) .pay-farm-icon,
body:not(.home-page):not(.auth-page) .feature-icon,
body:not(.home-page):not(.auth-page) .action-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: oklch(97% 0.01 140);
    color: var(--brand);
}

body:not(.home-page):not(.auth-page) .pay-farm-name,
body:not(.home-page):not(.auth-page) .product-card-price {
    color: var(--brand-strong);
}

body:not(.home-page):not(.auth-page) .amount-field,
body:not(.home-page):not(.auth-page) .quantity-stepper,
body:not(.home-page):not(.auth-page) .product-dropdown-trigger,
body:not(.home-page):not(.auth-page) .channel-card {
    border-color: var(--line);
    border-radius: 12px;
    background: white;
    box-shadow: none;
}

body:not(.home-page):not(.auth-page) .product-card {
    min-height: 50px;
    padding: 10px 0;
}

body:not(.home-page):not(.auth-page) .product-card.selected,
body:not(.home-page):not(.auth-page) .channel-card.selected,
body:not(.home-page):not(.auth-page) .product-dropdown-panel .product-card.selected {
    border-color: var(--brand);
    background: oklch(97.2% 0.003 250);
}

body:not(.home-page):not(.auth-page) .quote-box {
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: oklch(98.8% 0.01 96);
}

body:not(.home-page):not(.auth-page) .quote-main {
    color: var(--brand-strong);
}

body:not(.home-page):not(.auth-page) .benefits-hero {
    background: white;
}

body:not(.home-page):not(.auth-page) .benefits-entry-grid {
    gap: 10px;
}

body:not(.home-page):not(.auth-page) .benefits-entry-tile,
body:not(.home-page):not(.auth-page) .action-item,
body:not(.home-page):not(.auth-page) .feature-tile {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: none;
}

body:not(.home-page):not(.auth-page) .benefits-entry-tile .material-symbols-outlined {
    color: var(--brand);
}

body:not(.home-page):not(.auth-page) .tabbar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    min-height: calc(64px + env(safe-area-inset-bottom));
    padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: white;
    box-shadow: none;
    backdrop-filter: none;
}

body:not(.home-page):not(.auth-page) .tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    border-radius: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

body:not(.home-page):not(.auth-page) .tabbar-item.active {
    position: relative;
    color: var(--brand-strong);
    background: transparent;
    font-weight: 700;
}

body:not(.home-page):not(.auth-page) .tabbar-item.active .tabbar-icon.material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

body:not(.home-page):not(.auth-page) .tabbar-item.active::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand-strong);
    transform: translateX(-50%);
}

body:not(.home-page):not(.auth-page) .icp-footer {
    width: min(100%, 480px);
    margin: 2px auto 0;
    padding: 0 16px calc(88px + env(safe-area-inset-bottom));
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

body:not(.home-page):not(.auth-page).no-tabbar .icp-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

body.system-flow-page:not(.home-page):not(.auth-page) .icp-footer {
    display: none;
}

/* ── Unified C-end system flow pages ── */

body.system-flow-page:not(.home-page):not(.auth-page) {
    --system-bg: oklch(96.6% 0.003 250);
    --system-surface: oklch(99.2% 0.001 250);
    --system-line: oklch(91.5% 0.004 250);
    --system-line-soft: oklch(92.8% 0.004 250);
    --system-ink: oklch(18% 0.004 250);
    --system-text: oklch(28% 0.004 250);
    --system-muted: oklch(56% 0.004 250);
    background: var(--system-bg);
}

body.system-flow-page:not(.home-page):not(.auth-page) .header {
    border-bottom: 1px solid var(--system-line-soft);
    background: white;
}

body.system-flow-page:not(.home-page):not(.auth-page) .header-row {
    max-width: 480px;
    min-height: calc(50px + env(safe-area-inset-top));
}

body.system-flow-page:not(.home-page):not(.auth-page) .header h1 {
    color: var(--system-ink);
    font-size: 17px;
    font-weight: 700;
}

body.system-flow-page:not(.home-page):not(.auth-page) .header .nav-back,
body.system-flow-page:not(.home-page):not(.auth-page) .header-right .nav-back {
    color: var(--system-ink);
}

body.system-flow-page:not(.home-page):not(.auth-page) .header-action,
body.system-flow-page:not(.home-page):not(.auth-page) .channel-badge {
    min-height: 34px;
    border-color: oklch(88.5% 0.004 250);
    border-radius: 999px;
    background: white;
    color: var(--brand-strong);
    font-size: 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) {
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: auto;
    touch-action: auto;
}

body.system-flow-page:not(.home-page):not(.auth-page) .container {
    gap: 8px;
    padding: 0 18px calc(88px + env(safe-area-inset-bottom));
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: auto;
    background: var(--system-bg);
    -webkit-overflow-scrolling: touch;
}

body.system-flow-page:not(.home-page):not(.auth-page).no-tabbar .container {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

body.system-flow-page:not(.home-page):not(.auth-page) .card,
body.system-flow-page:not(.home-page):not(.auth-page) .task-panel,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-hero,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-entry-grid,
body.system-flow-page:not(.home-page):not(.auth-page) .collapsible-section,
body.system-flow-page:not(.home-page):not(.auth-page) .me-hero,
body.system-flow-page:not(.home-page):not(.auth-page) .me-stats,
body.system-flow-page:not(.home-page):not(.auth-page) .me-menu {
    display: grid;
    gap: 12px;
    margin: 0 -18px;
    padding: 14px 24px;
    border: 0;
    border-top: 1px solid var(--system-line);
    border-bottom: 1px solid var(--system-line);
    border-radius: 0;
    background: var(--system-surface);
    box-shadow: none;
    overflow: hidden;
}

body.system-flow-page:not(.home-page):not(.auth-page) .task-panel.app-hero {
    padding-top: 18px;
    padding-bottom: 18px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .card-title,
body.system-flow-page:not(.home-page):not(.auth-page) .section-title,
body.system-flow-page:not(.home-page):not(.auth-page) .home-section-title {
    margin: 0;
    color: var(--system-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

body.system-flow-page:not(.home-page):not(.auth-page) .app-title,
body.system-flow-page:not(.home-page):not(.auth-page) .task-title {
    margin: 0;
    color: var(--system-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
}

body.system-flow-page:not(.home-page):not(.auth-page) .app-subtitle,
body.system-flow-page:not(.home-page):not(.auth-page) .task-subtitle {
    color: var(--system-muted);
    font-size: 13px;
    line-height: 1.55;
}

body.system-flow-page:not(.home-page):not(.auth-page) .task-kicker,
body.system-flow-page:not(.home-page):not(.auth-page) .app-kicker {
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 600;
}

body.system-flow-page:not(.home-page):not(.auth-page) .section-head {
    align-items: center;
    min-height: 28px;
    margin-bottom: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .section-meta,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-hero-links a {
    color: oklch(48% 0.105 255);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .state-note,
body.system-flow-page:not(.home-page):not(.auth-page) .hero-note,
body.system-flow-page:not(.home-page):not(.auth-page) .error-msg {
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: oklch(97.6% 0.003 250);
    color: var(--system-text);
    box-shadow: none;
    font-size: 12px;
    line-height: 1.55;
}

body.system-flow-page:not(.home-page):not(.auth-page) .state-note.is-info,
body.system-flow-page:not(.home-page):not(.auth-page) .hero-note.is-info {
    background: oklch(95.2% 0.02 258);
    color: oklch(36% 0.075 242);
}

body.system-flow-page:not(.home-page):not(.auth-page) .state-note.is-warning,
body.system-flow-page:not(.home-page):not(.auth-page) .hero-note.is-warning {
    background: oklch(95% 0.04 58);
    color: oklch(38% 0.09 58);
}

body.system-flow-page:not(.home-page):not(.auth-page) .state-note.is-danger,
body.system-flow-page:not(.home-page):not(.auth-page) .hero-note.is-danger,
body.system-flow-page:not(.home-page):not(.auth-page) .error-msg {
    background: var(--danger-soft);
    color: var(--danger);
}

body.system-flow-page:not(.home-page):not(.auth-page) .detail-list,
body.system-flow-page:not(.home-page):not(.auth-page) .kv-list,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-list,
body.system-flow-page:not(.home-page):not(.auth-page) .phone-list {
    display: grid;
    gap: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .detail-row,
body.system-flow-page:not(.home-page):not(.auth-page) .kv-row,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row,
body.system-flow-page:not(.home-page):not(.auth-page) .phone-row,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row {
    min-height: 42px;
    padding: 9px 0;
    border-bottom: 1px solid var(--system-line-soft);
    color: var(--system-muted);
    font-size: 12px;
    line-height: 1.35;
}

body.system-flow-page:not(.home-page):not(.auth-page) .detail-row:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .kv-row:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .phone-row:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row:last-child {
    border-bottom: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .detail-label,
body.system-flow-page:not(.home-page):not(.auth-page) .kv-row span:first-child,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row small,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row small,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row-side small {
    color: var(--system-muted);
    font-size: 12px;
    font-weight: 400;
}

body.system-flow-page:not(.home-page):not(.auth-page) .detail-value,
body.system-flow-page:not(.home-page):not(.auth-page) .kv-row span:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row strong,
body.system-flow-page:not(.home-page):not(.auth-page) .phone-number,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row strong {
    color: var(--system-text);
    font-size: 13px;
    font-weight: 650;
}

body.system-flow-page:not(.home-page):not(.auth-page) .metric-grid {
    gap: 8px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .metric-grid > div,
body.system-flow-page:not(.home-page):not(.auth-page) .metric-card,
body.system-flow-page:not(.home-page):not(.auth-page) .mini-card,
body.system-flow-page:not(.home-page):not(.auth-page) .timeline-item,
body.system-flow-page:not(.home-page):not(.auth-page) .preview-card,
body.system-flow-page:not(.home-page):not(.auth-page) .terms-box {
    border: 0;
    border-radius: 10px;
    background: var(--system-bg);
    box-shadow: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .metric-grid > div {
    min-height: 66px;
    padding: 10px 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .metric-grid span,
body.system-flow-page:not(.home-page):not(.auth-page) .metric-label {
    color: var(--system-muted);
    font-size: 12px;
    font-weight: 400;
}

body.system-flow-page:not(.home-page):not(.auth-page) .metric-grid strong,
body.system-flow-page:not(.home-page):not(.auth-page) .metric-value {
    color: var(--brand-strong);
    font-size: 16px;
    font-weight: 700;
}

body.system-flow-page:not(.home-page):not(.auth-page) .form-group {
    gap: 7px;
    margin-bottom: 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .form-group label {
    color: var(--system-text);
    font-size: 13px;
    font-weight: 600;
}

body.system-flow-page:not(.home-page):not(.auth-page) .form-group input,
body.system-flow-page:not(.home-page):not(.auth-page) .form-group textarea,
body.system-flow-page:not(.home-page):not(.auth-page) .form-group select,
body.system-flow-page:not(.home-page):not(.auth-page) .form-control,
body.system-flow-page:not(.home-page):not(.auth-page) .add-phone-form input {
    min-height: 44px;
    border: 1px solid oklch(88.5% 0.004 250);
    border-radius: 10px;
    background: white;
    color: var(--system-ink);
    font-size: 14px;
    box-shadow: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .form-group textarea {
    min-height: 88px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .form-group input:focus,
body.system-flow-page:not(.home-page):not(.auth-page) .form-group textarea:focus,
body.system-flow-page:not(.home-page):not(.auth-page) .form-group select:focus,
body.system-flow-page:not(.home-page):not(.auth-page) .form-control:focus,
body.system-flow-page:not(.home-page):not(.auth-page) .add-phone-form input:focus {
    border-color: oklch(52% 0.054 145);
    box-shadow: 0 0 0 3px oklch(78% 0.06 145 / 0.22);
}

body.system-flow-page:not(.home-page):not(.auth-page) .btn {
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .btn-sm {
    min-height: 34px;
    border-radius: 10px;
    font-size: 13px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .btn-primary,
body.system-flow-page:not(.home-page):not(.auth-page) .btn-success,
body.system-flow-page:not(.home-page):not(.auth-page) .btn-wechat {
    border-color: transparent;
    background: var(--brand);
    color: white;
}

body.system-flow-page:not(.home-page):not(.auth-page) .btn-outline {
    border-color: oklch(88.5% 0.004 250);
    background: white;
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .btn-quiet {
    border-color: transparent;
    background: transparent;
    color: var(--system-muted);
}

body.system-flow-page:not(.home-page):not(.auth-page) .button-stack,
body.system-flow-page:not(.home-page):not(.auth-page) .button-row {
    gap: 8px;
    margin-top: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-list {
    gap: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-item,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row {
    min-height: 56px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--system-line-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-item:last-child,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row:last-child {
    border-bottom: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-icon,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row-icon,
body.system-flow-page:not(.home-page):not(.auth-page) .me-stat-icon {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: oklch(97.2% 0.003 250);
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-arrow,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row-go {
    width: auto;
    height: auto;
    border: 0;
    color: var(--subtle);
    font-size: 20px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-title,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row-text strong {
    color: var(--system-text);
    font-size: 14px;
    font-weight: 700;
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-desc,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row-text small {
    color: var(--system-muted);
    font-size: 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .feature-tile,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-entry-tile {
    min-height: 72px;
    border: 1px solid var(--system-line);
    border-radius: 12px;
    background: white;
    box-shadow: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-entry-tile {
    padding: 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-entry-tile .material-symbols-outlined {
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-hero {
    gap: 10px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-hero .benefits-balance {
    color: var(--system-ink);
    font-size: 40px;
    font-weight: 650;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-balance-unit,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-hero-note,
body.system-flow-page:not(.home-page):not(.auth-page) .benefits-metrics {
    color: var(--system-muted);
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-metrics {
    gap: 8px;
    padding-top: 2px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-metrics span {
    border-right-color: var(--system-line-soft);
    font-size: 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .benefits-metrics em {
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .collapsible-section summary {
    min-height: 38px;
    padding: 0;
    color: var(--system-ink);
    font-size: 14px;
    font-weight: 700;
}

body.system-flow-page:not(.home-page):not(.auth-page) .collapsible-section .collapsible-content {
    padding: 0 0 2px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter::-webkit-scrollbar {
    display: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 4px;
    background: var(--line);
    flex-shrink: 0;
    align-self: center;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter a.active {
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
}

body.system-flow-page:not(.home-page):not(.auth-page) .orders-filter a.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card {
    display: grid;
    gap: 0;
    padding: 0 24px;
    overflow: hidden;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .compact-list {
    gap: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .order-list-item {
    border-bottom: 1px solid var(--system-line-soft);
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .order-list-item:last-child {
    border-bottom: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .order-row > span:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
    overflow: hidden;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-card .order-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-row-side {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 0 0 12px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-actions form {
    min-width: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .order-actions .btn {
    min-width: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-hero {
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-hero-name {
    color: var(--system-ink);
    font-size: 16px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-hero-meta,
body.system-flow-page:not(.home-page):not(.auth-page) .me-hero-summary,
body.system-flow-page:not(.home-page):not(.auth-page) .me-stat-label {
    color: var(--system-muted);
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-hero-badge,
body.system-flow-page:not(.home-page):not(.auth-page) .phone-tag {
    border: 0;
    border-radius: 999px;
    background: oklch(97.2% 0.003 250);
    color: var(--brand-strong);
    font-size: 12px;
    font-weight: 600;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0 24px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-stat {
    min-height: 78px;
    padding: 12px 6px;
    border-left: 1px solid var(--system-line-soft);
    background: transparent;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-stat:first-child {
    border-left: 0;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-stat-value {
    color: var(--brand-strong);
    font-size: 18px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-menu {
    padding-top: 2px;
    padding-bottom: 2px;
}

body.system-flow-page:not(.home-page):not(.auth-page) .me-logout {
    margin: 0 -18px;
    padding: 12px 24px;
    border-top: 1px solid var(--system-line);
    border-bottom: 1px solid var(--system-line);
    background: white;
    color: var(--system-muted);
}

/* Source: main.css lines 8205-8587. Shared C-end polish and hero/status components. */

/* C-end UI polish pass: align all portal flows to the auth page's cool white-gray palette. */
:root {
    --portal-cool-bg: oklch(96.6% 0.003 250);
    --portal-cool-bg-soft: oklch(98.8% 0.003 250);
    --portal-cool-surface: oklch(99.6% 0.001 250);
    --portal-cool-line: oklch(91.5% 0.004 250);
    --portal-cool-line-soft: oklch(93% 0.003 250);
    --portal-cool-muted-bg: oklch(97.6% 0.003 250);
    --touch-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
}

body.system-flow-page:not(.home-page):not(.auth-page) {
    --system-bg: var(--portal-cool-bg);
    --system-surface: var(--portal-cool-surface);
    --system-line: var(--portal-cool-line);
    --system-line-soft: var(--portal-cool-line-soft);
}

body.system-flow-page:not(.home-page):not(.auth-page) .header {
    background: white;
}

body.system-flow-page:not(.home-page):not(.auth-page) .container {
    background: var(--system-bg);
}

.btn,
.nav-back,
.header-action,
.pay-header-home,
.pay-header-more,
.tabbar-item,
body.system-flow-page:not(.home-page):not(.auth-page) .action-item,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row,
body.payment-flow-page:not(.home-page):not(.auth-page) .orders-filter a,
body.payment-flow-page:not(.home-page):not(.auth-page) .product-card,
body.payment-flow-page:not(.home-page):not(.auth-page) .refund-reason-option {
    transition:
        background-color 0.18s var(--touch-ease),
        border-color 0.18s var(--touch-ease),
        color 0.18s var(--touch-ease),
        opacity 0.18s var(--touch-ease),
        transform 0.18s var(--touch-ease),
        box-shadow 0.18s var(--touch-ease);
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-item:active,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row:active,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row:active,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row:active,
body.payment-flow-page:not(.home-page):not(.auth-page) .orders-filter a:active,
body.payment-flow-page:not(.home-page):not(.auth-page) .product-card:active,
body.payment-flow-page:not(.home-page):not(.auth-page) .refund-reason-option:active {
    transform: translateY(1px) scale(0.992);
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-item:focus-visible,
body.system-flow-page:not(.home-page):not(.auth-page) .compact-row:focus-visible,
body.system-flow-page:not(.home-page):not(.auth-page) .order-row:focus-visible,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row:focus-visible,
body.payment-flow-page:not(.home-page):not(.auth-page) .orders-filter a:focus-visible,
body.payment-flow-page:not(.home-page):not(.auth-page) .product-card:focus-visible,
body.payment-flow-page:not(.home-page):not(.auth-page) .refund-reason-option:focus-visible,
body.payment-flow-page:not(.home-page):not(.auth-page) .mode-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand), transparent 82%);
}

body.system-flow-page:not(.home-page):not(.auth-page) .app-kicker,
body.system-flow-page:not(.home-page):not(.auth-page) .task-kicker {
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .state-note:not(.is-warning):not(.is-danger):not(.is-info),
body.system-flow-page:not(.home-page):not(.auth-page) .hero-note:not(.is-warning):not(.is-danger):not(.is-info) {
    background: var(--portal-cool-muted-bg);
    color: var(--brand-strong);
}

body.system-flow-page:not(.home-page):not(.auth-page) .empty-state {
    position: relative;
    min-height: 132px;
    align-content: center;
    background:
        radial-gradient(circle at 50% 0, white, transparent 64%),
        var(--portal-cool-bg-soft);
}

body.system-flow-page:not(.home-page):not(.auth-page) .empty-state::before {
    content: "eco";
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
    place-items: center;
    border-radius: 50%;
    background: oklch(97.2% 0.003 250);
    color: var(--brand-strong);
    font-family: "Material Symbols Outlined";
    font-size: 21px;
    font-feature-settings: "liga";
}

body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-hero-card {
    margin: 16px 0 0;
    padding: 24px;
    border: 0;
    border-radius: 20px;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(180deg, white 0%, var(--portal-cool-bg-soft) 48%, var(--portal-cool-bg) 100%);
}

body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-hero::after {
    content: none;
}

body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-hero-top,
body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-status-body,
body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-alert-list,
body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-entitlement-card,
body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-points-card,
body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-hero-copy,
body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-trust-row,
body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-hero .state-note {
    position: relative;
    z-index: 1;
}

body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-dashboard-hero .app-title {
    font-size: 26px;
    font-weight: 700;
    text-wrap: balance;
}

body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-status-pill {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand), transparent 82%);
}

body.home-system-page.system-flow-page:not(.home-page):not(.auth-page) .home-status-icon {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand), transparent 78%);
}

body.system-flow-page:not(.home-page):not(.auth-page) .action-icon,
body.system-flow-page:not(.home-page):not(.auth-page) .me-row-icon,
body.system-flow-page:not(.home-page):not(.auth-page) .me-stat-icon {
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand), transparent 82%);
}

body.entry-page.system-flow-page:not(.home-page):not(.auth-page) .entry-action-panel .action-item:active {
    background: color-mix(in oklch, var(--brand-soft), white 44%);
}

/* ══════════════════════════════════════════════════════════════════
   Unified hero-card BEM block
   Shared by: home, contract/detail, orders/detail
   Replaces: home-dashboard-hero + contract-status-card
   ══════════════════════════════════════════════════════════════════ */

/* ── Base card ── */
.hero-card {
    display: grid;
    gap: 0;
    border: 0;
    border-radius: 20px;
    background: white;
}

/* ── Head row: optional icon + kicker + pill ── */
.hero-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.hero-card__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 16px;
    flex-shrink: 0;
    font-size: 28px;
    color: white;
}

.hero-card__icon.is-active {
    background: linear-gradient(135deg, oklch(55% 0.06 150), oklch(42% 0.04 148));
}

.hero-card__icon.is-pending {
    background: linear-gradient(135deg, oklch(52% 0.09 255), oklch(38% 0.08 252));
}

.hero-card__icon.is-welcome {
    background: linear-gradient(135deg, oklch(55% 0.045 145), oklch(42% 0.035 148));
}

.hero-card__kicker {
    color: var(--system-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ── Status pill — shared component, used by _status_pill.html partial ── */
.status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 999px;
    background: oklch(96.8% 0.003 250);
    color: var(--system-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 112px;
}

.status-pill--success {
    background: oklch(94% 0.022 150);
    color: oklch(37% 0.04 148);
}

.status-pill--pending {
    background: var(--blue-soft);
    color: oklch(36% 0.075 242);
}

.status-pill--warning {
    background: var(--warning-soft);
    color: oklch(38% 0.09 58);
}

.status-pill--neutral {
    background: oklch(96.8% 0.003 250);
    color: var(--system-muted);
}

.status-pill--danger {
    background: var(--danger-soft);
    color: oklch(39% 0.14 29);
}

.status-pill--info {
    background: var(--blue-soft);
    color: oklch(36% 0.075 242);
}

/* ── Title ── */
.hero-card__title {
    margin: 0 0 8px;
    color: var(--system-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ── Subtitle ── */
.hero-card__subtitle {
    margin: 0 0 16px;
    color: var(--system-muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 36em;
}

/* ── Body slot (kv-section, service-info, etc.) ── */
.hero-card__body {
    margin-bottom: 16px;
}

/* ── Alerts ── */
.hero-card__alerts {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

/* ── Actions ── */
.hero-card__actions {
    display: grid;
    gap: 10px;
}

.hero-card__cta {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 650;
}

/* ── Modifier: home — elevated card ── */
.hero-card--home {
    margin-top: 4px;
    padding: 28px 24px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

.hero-card--home .hero-card__head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.hero-card--home .hero-card__kicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-card--home .hero-card__title {
    margin-bottom: 0;
}

.hero-card--home .hero-card__subtitle {
    margin-bottom: 14px;
}

/* ── Modifier: contract — same base, different spacing ── */
.hero-card--contract {
    margin-top: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 28px rgba(0,0,0,0.07);
}

.hero-card--contract .hero-card__head {
    justify-content: space-between;
    margin-bottom: 12px;
}

.hero-card--contract .hero-card__title {
    font-size: 22px;
    margin-bottom: 6px;
}

.hero-card--contract .hero-card__subtitle {
    margin-bottom: 14px;
}

/* ── Inline points badge (home) ── */
.hero-card__points {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: oklch(98% 0.003 250);
    color: var(--system-muted);
    font-size: 12px;
    justify-self: start;
}

.hero-card__points strong {
    color: var(--brand-strong);
    font-weight: 700;
    font-size: 13px;
}