/* Customer-only visual refinement. No request, polling, billing or permission changes. References: shadcn/ui structure; Beautiful UI task rows; BeUI/Rare/Transitions feedback. Retain the current blue/white identity and every existing control. */ body.console-active:not(.agent-console-active) { --client-canvas: #f6f7f9; --client-surface: #fff; --client-rail: #fafbfc; --client-ink: #202630; --client-muted: #616d7e; --client-line: #e1e5ec; --client-blue: #285be8; --client-blue-hover: #1c49c7; --client-blue-soft: #edf2ff; --client-green: #18734b; --client-red: #c62f3b; --client-ease: cubic-bezier(.16, 1, .3, 1); --client-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--client-canvas); color: var(--client-ink); font-family: var(--client-font); -webkit-font-smoothing: antialiased; ::selection { background: #dce6ff; color: #173c9b; } :is(button, a, summary, input, select):focus-visible { outline: 2px solid var(--client-blue); outline-offset: 3px; } :is(input, textarea) { caret-color: var(--client-blue); } #appView { --color-paper: var(--client-surface); --color-paper-2: var(--client-canvas); --color-ink: var(--client-ink); --color-muted: var(--client-muted); --color-accent: var(--client-blue); --apple-blue: var(--client-blue); --apple-ink: var(--client-ink); --apple-muted: var(--client-muted); --font-body: var(--client-font); --font-display: var(--client-font); --console-canvas: var(--client-canvas); background: var(--client-canvas); font-size: 14px; } #appView .app-layout { display: block; min-height: 100dvh; } #appView .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: block; width: 224px; height: 100dvh; padding: 24px 16px 16px; background: var(--client-rail); color: var(--client-ink); border-right: 1px solid var(--client-line); box-shadow: none; } #appView .sidebar-inner { position: static; display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; } #appView .console-brand { order: 0; padding: 0 4px 20px; gap: 10px; border-bottom: 1px solid var(--client-line); } #appView .console-brand-mark { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--client-blue); color: #fff; box-shadow: none; } #appView .console-brand strong { font-size: 14px; font-weight: 700; letter-spacing: -.02em; } #appView .console-brand div > span { margin-top: 3px; color: var(--client-muted); font-size: 11px; } #appView .side-nav { order: 1; flex: 1; align-content: start; gap: 4px; padding: 0; } #appView .side-nav-label { margin: 14px 12px 6px; color: var(--client-muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; } #appView .side-nav-label:first-child { margin-top: 0; } #appView .side-link { min-height: 44px; padding: 0 12px; gap: 11px; border: 1px solid transparent; border-radius: 8px; color: #4b5668; background: transparent; font-size: 13px; font-weight: 550; box-shadow: none; transition: background-color 160ms, color 160ms, transform 160ms var(--client-ease); } #appView .side-link .ui-icon { width: 18px; height: 18px; stroke-width: 1.65; } #appView .side-link.active { background: var(--client-blue-soft); color: #204dc4; border-color: #dfe7fc; font-weight: 650; } #appView .side-link.active::before { display: none; } #appView .console-online { order: 2; display: flex; margin: 0; padding: 11px 12px; border: 0; border-radius: 8px; background: #edf6f1; } #appView .console-online strong { color: var(--client-green); font-size: 12px; } #appView .console-online div > span { color: #3d725a; font-size: 11px; } #appView .console-online.is-unavailable { background: #fff5e5; } #appView .side-profile { order: 3; margin: 0; padding: 4px 8px; border: 0; background: transparent; gap: 10px; } #appView .side-profile img { width: 32px; height: 32px; border-radius: 50%; } #appView .side-profile strong { color: var(--client-ink); font-size: 12px; font-weight: 600; } #appView .side-email { max-width: 138px; color: var(--client-muted); font-size: 11px; } #appView .sidebar-footer { order: 4; margin: 0; padding-top: 12px; border-color: var(--client-line); } #appView .sidebar-logout { min-height: 40px; border: 0; background: transparent; color: var(--client-muted); font-size: 12px; } #appView .sidebar-footer > span { color: var(--client-muted); font-size: 10px; } #appView .app-main { width: auto; max-width: none; margin: 0 0 0 224px; padding: 0 32px 40px; background: var(--client-canvas); } #appView .app-main > .app-section { max-width: 1360px; } #appView .app-toolbar { top: 0; z-index: 40; min-height: 72px; margin: 0 -32px 28px; padding: 12px 32px; background: var(--client-surface); border-bottom: 1px solid var(--client-line); box-shadow: none; backdrop-filter: none; } #appView .app-toolbar h1 { font-size: 16px; font-weight: 650; line-height: 1.5; letter-spacing: -.02em; } #appView :is(.toolbar-eyebrow, #pageDescription) { display: none; } #appView .toolbar-balance { gap: 10px; } #appView .toolbar-route-pill { min-height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--client-green); font-size: 11px; } #appView .balance-chip { min-height: 38px; padding: 0 12px; gap: 8px; border: 1px solid var(--client-line); border-radius: 8px; background: #fff; box-shadow: none; font-size: 13px; } #appView .balance-chip strong { color: var(--client-ink); font-weight: 650; font-variant-numeric: tabular-nums; } #appView .balance-chip span { color: var(--client-muted); font-size: 12px; } #appView .toolbar-user { display: none; } #appView .menu-button { display: none; } #appView .button { min-height: 40px; border-radius: 8px; padding: 9px 15px; border: 1px solid transparent; background: var(--client-blue); color: #fff; font-size: 13px; line-height: 1.45; font-weight: 600; letter-spacing: 0; box-shadow: none; transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms var(--client-ease); } #appView .button.secondary { background: #fff; color: #3e4858; border-color: #d7dde6; } #appView .button.danger { background: #fff; color: #ae2c37; border-color: #edd8dc; } #appView .button:disabled { opacity: .48; transform: none; cursor: not-allowed; box-shadow: none; } #appView .button[data-state="loading"] { cursor: wait; } #appView .button[data-state="success"] { background: #18734b; color: #fff; } #appView .button:active:not(:disabled), #appView .side-link:active { transform: translateY(1px); } #appView :is(.panel, .dashboard-orders, .dashboard-shortcuts, .dashboard-command, .dashboard-period) { border: 1px solid var(--client-line); border-radius: 12px; background: #fff; box-shadow: none; } #appView :is(h2, h3, strong) { font-family: var(--client-font); } #appView :is(.panel-head h2, .dashboard-period h2, .dashboard-orders h2, .dashboard-shortcuts h2) { font-size: 16px; font-weight: 650; letter-spacing: -.02em; } #appView :is(.panel-head p, .muted) { color: var(--client-muted); } #appView :is(.status, .stock) { width: fit-content; max-width: 100%; border-radius: 6px; font-weight: 550; font-size: 12px; letter-spacing: 0; } #appView .status.waiting { color: #875511; background: #fff5e4; border-color: #efdfbd; } #appView .status.received { color: #18734b; background: #edf7f1; border-color: #d3e9dc; } #appView .status.cancelled { color: #5c6574; background: #f0f2f5; border-color: #e1e5eb; } #appView :is(.compact-order-code .has-code, .record-status-cell code, .dashboard-order-code) { color: var(--client-red); } #appView :is(.search-input, select, .field input) { min-height: 42px; background: #fff; border: 1px solid #d7dde6; border-radius: 8px; font-size: 13px; box-shadow: none; } #appView .search-input::placeholder { color: var(--client-muted); } /* The number task stays first; controls and order actions keep their original bindings. */ #appView #section-extract { --compact-line: var(--client-line); --compact-muted: var(--client-muted); --compact-text: var(--client-ink); } #appView #section-extract .activation-center { gap: 20px; } #appView #section-extract .compact-center-tools { min-height: 62px; margin: 0 0 2px; flex-direction: row; align-items: center; } #appView #section-extract .compact-center-tools h2 { font-size: 27px; font-weight: 680; letter-spacing: -.03em; } #appView #section-extract .compact-center-tools p { margin-top: 7px; font-size: 13px; color: var(--client-muted); } #appView #section-extract .notification-toggle { width: auto; min-height: 40px; } #appView #section-extract .activation-workbench { gap: 22px; } #appView #section-extract :is(.compact-purchase-bar, .activation-live, .recent-resolution) { border: 1px solid var(--client-line); border-radius: 12px; box-shadow: none; } #appView #section-extract .compact-purchase-row { grid-template-columns: minmax(200px, 1.6fr) minmax(100px, .65fr) minmax(100px, .65fr) auto; padding: 24px; gap: 24px; min-height: 112px; } #appView #section-extract .compact-purchase-row .chatgpt-mark { width: 44px; height: 44px; border-radius: 10px; background: #202630; } #appView #section-extract .compact-purchase-row h3 { font-size: 16px; font-weight: 650; } #appView #section-extract .compact-purchase-row .stock { margin-top: 5px; font-size: 11px; } #appView #section-extract :is(.compact-purchase-fact, .compact-purchase-row .activation-price) { padding-left: 22px; border-color: var(--client-line); } #appView #section-extract :is(.compact-purchase-fact span, .compact-purchase-row .activation-price > .muted) { font-size: 12px; color: var(--client-muted); margin-bottom: 6px; } #appView #section-extract .compact-purchase-fact strong { font-size: 14px; font-weight: 600; } #appView #section-extract .compact-purchase-row .price-primary { font: 650 23px/1.15 var(--client-font); color: var(--client-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } #appView #section-extract .compact-purchase-row #extractButton { min-width: 146px; min-height: 46px; border-radius: 8px; } #appView #section-extract .compact-purchase-footer { min-height: 46px; padding: 12px 24px; background: var(--client-rail); flex-wrap: wrap; } #appView #section-extract .purchase-rules { font-size: 12px; gap: 9px; flex-wrap: wrap; white-space: normal; } #appView #section-extract .compact-purchase-footer .route-feedback:not([data-state="ready"]):not([data-state="mock"]) { display: flex; max-width: none; width: 100%; } #appView #section-extract .compact-purchase-footer .route-feedback :is(strong, span) { font-size: 12px; } #appView #section-extract .activation-live { overflow: hidden; padding: 0; } #appView #section-extract :is(.activation-live, .recent-resolution) > .panel-head { padding: 20px 24px; margin: 0; border-bottom: 1px solid var(--client-line); background: #fff; } #appView #section-extract :is(.activation-live, .recent-resolution) .panel-head h2 { font-size: 16px; } #appView #section-extract :is(.activation-live, .recent-resolution) .panel-head p { font-size: 12px; margin-top: 6px; } #appView #section-extract .compact-count { min-width: 23px; height: 23px; margin-left: 5px; border-radius: 6px; background: #f0f3f8; color: #536176; font-size: 12px; } #appView #section-extract .live-indicator { min-width: 0; padding: 4px 0; border: 0; background: transparent; color: var(--client-muted); font-size: 11px; box-shadow: none; white-space: nowrap; } #appView #section-extract .activation-live .order-grid { display: grid; gap: 0; max-height: none; overflow: visible; padding: 0; } #appView #section-extract .compact-order-row { grid-template-columns: minmax(170px, 1.3fr) minmax(110px, .9fr) minmax(88px, .65fr) minmax(115px, .8fr) 154px; gap: 16px; min-height: 126px; padding: 22px 24px; border-bottom: 1px solid var(--client-line); background: #fff; animation: none; box-shadow: none; transition: background-color 180ms; } #appView #section-extract .compact-country-mark { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--client-line); background: var(--client-rail); color: #4a5a73; font-size: 10px; } #appView #section-extract .compact-order-product { gap: 10px; } #appView #section-extract .compact-order-product strong { margin-top: 4px; font: 650 15px/1.5 var(--client-font); font-variant-numeric: tabular-nums; letter-spacing: 0; } #appView #section-extract .compact-order-product small { margin-top: 3px; color: #68758a; font-size: 10px; } #appView #section-extract :is(.compact-order-product span, .compact-order-code span, .compact-order-time span, .compact-order-state strong) { color: var(--client-muted); font-size: 11px; line-height: 1.55; } #appView #section-extract .compact-order-time small { color: var(--client-muted); font-size: 10px; line-height: 1.65; } #appView #section-extract :is(.compact-order-code strong, .compact-order-time strong) { font: 600 15px/1.5 var(--client-font); font-variant-numeric: tabular-nums; } #appView #section-extract .compact-order-code strong.has-code { color: var(--client-red); font-size: 23px; font-weight: 700; letter-spacing: .05em; } #appView #section-extract .compact-order-actions { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } #appView #section-extract .compact-order-actions .button { min-height: 36px; padding: 7px 6px; font-size: 11px; border-radius: 7px; } #appView #section-extract .compact-order-actions .order-primary-action { grid-column: auto; background: #edf2ff; color: #244ec0; border-color: #dce5fc; } #appView #section-extract .compact-cancel-note { margin: 0; grid-column: 1/-1; background: #f6f8fb; color: var(--client-muted); } #appView #section-extract .activation-live > .pagination { border-top: 0; background: var(--client-rail); padding: 10px 20px; } #appView #section-extract .pagination:empty { display: none; } #appView #section-extract .activation-live .compact-empty { padding: 42px 24px; background: #fff; } #appView #section-extract .resolution-row { padding: 18px 24px; gap: 20px; background: #fff; } #appView #section-extract .resolution-row :is(strong, .button) { font-size: 12px; } #appView #section-extract .resolution-row span { font-size: 11px; } #appView #section-extract .refund-policy { margin-top: -2px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; border-radius: 0; } #appView #section-extract .refund-policy p { font-size: 12px; color: var(--client-muted); } #appView #section-extract .refund-policy > span { width: 20px; height: 20px; background: #e9edf4; color: var(--client-muted); } /* The same component language carries the remaining customer routes. */ #appView .dashboard-workbench.active { gap: 22px; } #appView .dashboard-command { display: grid; grid-template-columns: 1.3fr 1fr; padding: 28px; color: var(--client-ink); background: #fff; } #appView .dashboard-command::after { display: none; } #appView .dashboard-command h2 { max-width: none; color: var(--client-ink); font-size: 24px; letter-spacing: -.03em; } #appView .dashboard-command :is(p, .dashboard-command-account span) { color: var(--client-muted); font-size: 12px; } #appView .dashboard-command-account strong { color: var(--client-ink); font: 650 27px/1.25 var(--client-font); font-variant-numeric: tabular-nums; } #appView .dashboard-command-account { min-height: 0; padding: 0 0 0 28px; border: 0; border-left: 1px solid var(--client-line); border-radius: 0; background: transparent; gap: 20px; } #appView .dashboard-command-actions .button { min-height: 44px; height: auto; padding-block: 10px; border-radius: 8px; font-size: 13px; } #appView .dashboard-route { color: var(--client-green); font-size: 12px; } #appView .dashboard-period { padding: 24px; } #appView .dashboard-period-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #appView .dashboard-period-tabs { display: grid; grid-template-columns: repeat(4, max-content); padding: 3px; background: #f0f2f6; border: 1px solid var(--client-line); border-radius: 8px; } #appView .dashboard-period-tabs button { min-height: 36px; border-radius: 6px; color: #596577; font-size: 12px; } #appView .dashboard-period-tabs button.active { background: #fff; color: #254fc1; box-shadow: 0 1px 3px #182b4814; } #appView .dashboard-accounting-overview .dashboard-simple-stats { gap: 0; border: 1px solid var(--client-line); border-radius: 10px; overflow: hidden; } #appView .dashboard-accounting-overview .dashboard-simple-stat { min-height: 142px; padding: 20px; gap: 14px; border: 0; border-right: 1px solid var(--client-line); border-radius: 0; background: #fff; box-shadow: none; } #appView .dashboard-accounting-overview .dashboard-simple-stat:last-child { border-right: 0; } #appView .dashboard-accounting-overview .dashboard-simple-stat::before { display: none; } #appView .dashboard-accounting-overview .dashboard-stat-symbol { width: auto; height: auto; border: 0; background: transparent; color: #728098; } #appView .dashboard-accounting-overview .dashboard-simple-stat > strong { color: var(--client-ink); font: 650 30px/1.1 var(--client-font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } #appView .dashboard-accounting-overview .dashboard-simple-stat > small { color: var(--client-muted); font-size: 11px; } #appView .dashboard-accounting-overview .dashboard-stat-head > span:first-child { font-size: 12px; font-weight: 500; } #appView .dashboard-accounting-overview .dashboard-accounting-note { padding: 14px 0 0; border: 0; border-radius: 0; background: #fff; } #appView .dashboard-accounting-overview .dashboard-accounting-note-icon { width: 24px; height: 24px; background: #f0f3f8; color: #64748b; } #appView .dashboard-order-list { padding: 0; gap: 0; } #appView .dashboard-order-card { margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--client-line); border-radius: 0; box-shadow: none; } #appView .dashboard-order-card::before, #appView .dashboard-order-list::before { display: none; } #appView :is(.dashboard-orders, .dashboard-shortcuts) { padding: 22px; } #appView .dashboard-shortcut-list button { min-height: 52px; border-radius: 8px; box-shadow: none; } #appView #section-records .record-archive { padding: 24px; } #appView #section-records .record-archive > .panel-head h2 { font-size: 24px; } #appView #section-records .record-archive > .panel-head .section-kicker { display: none; } #appView #section-records #recordList { padding: 0; border: 0; border-radius: 0; background: #fff; } #appView #section-records .record-table-head { padding: 13px 16px; border-block: 1px solid var(--client-line); border-radius: 0; background: var(--client-rail); font-size: 12px; } #appView #section-records .record-row { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--client-line); border-radius: 0; background: #fff; box-shadow: none; } #appView #section-records .record-row-summary { min-height: 94px; padding: 20px 16px; } #appView #section-records :is(.record-phone, .record-money strong, .record-created strong) { font: 600 13px/1.6 var(--client-font); font-variant-numeric: tabular-nums; } #appView #section-records .record-status-cell code { color: var(--client-red); font-size: 16px; font-weight: 650; } #appView #section-records .record-open { min-height: 36px; padding: 0 12px; border-radius: 7px; font-size: 12px; border-color: var(--client-line); background: #fff; } #appView #section-records .record-detail-body { margin: 0 16px 18px; padding: 18px; background: var(--client-rail); border-radius: 8px; } #appView :is(.account-page-head h2, .business-page-head h2) { font-size: 27px; letter-spacing: -.03em; } #appView .account-page-head .section-kicker { display: none; } #appView .account-quick { padding: 18px 20px; border: 1px solid var(--client-line); border-radius: 10px; background: #fff; color: var(--client-ink); box-shadow: none; } #appView .account-module { border-radius: 10px; } #appView .account-module summary { min-height: 72px; padding: 20px; } #appView .account-module summary small { color: var(--client-muted); } #appView .account-module summary strong { font-size: 15px; } #appView .account-balance-card { border: 0; border-radius: 8px; background: var(--client-rail); color: var(--client-ink); } #appView .account-balance-card strong { color: var(--client-ink); font-size: 30px; } #appView .business-page-head { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } #appView .business-card { border: 1px solid var(--client-line); border-radius: 12px; box-shadow: none; } #appView .app-section.active, #appView .dashboard-reveal { animation: none; transform: none; } :is(#rechargeDialog, #agentApplyDialog, #confirmDialog) { border: 1px solid var(--client-line); border-radius: 14px; box-shadow: 0 18px 60px #15223b29; } :is(#rechargeDialog, #agentApplyDialog, #confirmDialog)[open] { animation: client-dialog-in 200ms var(--client-ease); } :is(#rechargeDialog, #agentApplyDialog, #confirmDialog)::backdrop { background: #1c253647; backdrop-filter: none; } :is(#rechargeDialog, #agentApplyDialog, #confirmDialog) .button { min-height: 44px; border-radius: 8px; box-shadow: none; } .apple-detail-drawer { border-left: 1px solid var(--client-line); background: #fff; transition: transform 220ms var(--client-ease); } .apple-detail-drawer .section-kicker { display: none; } .mobile-drawer { background: var(--client-rail); color: var(--client-ink); } .mobile-drawer .side-link { color: #4b5668; } .mobile-drawer .side-link.active { background: var(--client-blue-soft); color: #204dc4; } .mobile-drawer .side-nav-label { color: var(--client-muted); } .mobile-drawer .console-brand strong { color: var(--client-ink); } .mobile-drawer .console-brand div > span { color: var(--client-muted); } .mobile-drawer .drawer-profile strong { color: var(--client-ink); } .mobile-drawer .drawer-meta { color: var(--client-muted); } .mobile-drawer .drawer-head .icon-button { color: var(--client-ink); background: #fff; border-color: var(--client-line); } .mobile-drawer .sidebar-logout { color: #4b5668; background: #fff; border-color: var(--client-line); } .mobile-drawer .console-online { border-color: #d3e9dc; background: #edf6f1; } .mobile-drawer .console-online strong { color: var(--client-green); } .mobile-drawer .console-online div > span { color: #3d725a; } } @media (hover: hover) { body.console-active:not(.agent-console-active) #appView .side-link:hover { background: #edf0f5; color: var(--client-ink); transform: none; } body.console-active:not(.agent-console-active) #appView .side-link.active:hover { background: #e3ebff; color: #204dc4; } body.console-active:not(.agent-console-active) #appView .button:hover:not(:disabled) { background: var(--client-blue-hover); color: #fff; transform: none; box-shadow: none; } body.console-active:not(.agent-console-active) #appView .button.secondary:hover:not(:disabled) { background: #f4f6fa; color: var(--client-ink); border-color: #bcc7d8; } body.console-active:not(.agent-console-active) #appView .button.danger:hover:not(:disabled) { background: #fff2f4; color: #a02130; border-color: #dfb8bf; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-row:hover { background: #fcfcfe; } } @media (max-width: 1180px) and (min-width: 861px) { body.console-active:not(.agent-console-active) #appView .app-main { padding-inline: 24px; } body.console-active:not(.agent-console-active) #appView .app-toolbar { margin-inline: -24px; padding-inline: 24px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-row { grid-template-columns: minmax(160px, 1.4fr) 1fr .8fr 1fr; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions .button { min-height: 38px; min-width: 86px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-purchase-row { grid-template-columns: 1.4fr .7fr .7fr; gap: 16px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-purchase-row #extractButton { grid-column: 1/-1; } } @media (max-width: 860px) { body.console-active:not(.agent-console-active) #appView .sidebar { display: none; } body.console-active:not(.agent-console-active) #appView .app-main { margin-left: 0; padding: 0 20px 100px; } body.console-active:not(.agent-console-active) #appView .app-toolbar { margin: 0 -20px 22px; padding: 10px 20px; min-height: 64px; } body.console-active:not(.agent-console-active) #appView .menu-button { display: inline-flex; } body.console-active:not(.agent-console-active) #appView #menuButton { display: inline-flex !important; } body.console-active:not(.agent-console-active) #mobileDrawer:not([hidden]) { display: flex !important; } body.console-active:not(.agent-console-active) #drawerBackdrop:not([hidden]) { display: block !important; } body.console-active:not(.agent-console-active) #appView .toolbar-route-pill { display: none; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-row { grid-template-columns: 1.4fr 1fr 1fr; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-time { grid-column: 2/4; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; justify-content: flex-end; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions .button { min-height: 44px; padding: 10px 12px; } body.console-active:not(.agent-console-active) .mobile-bottom-nav { display: grid; position: fixed; inset: auto 0 0; width: 100%; padding: 6px 8px max(8px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--client-line); border-radius: 0; background: #fff; box-shadow: none; backdrop-filter: none; } body.console-active:not(.agent-console-active) .mobile-bottom-nav button { min-height: 50px; gap: 4px; border-radius: 8px; color: var(--client-muted); font-size: 11px; } body.console-active:not(.agent-console-active) .mobile-bottom-nav button.active { color: #254fc1; background: var(--client-blue-soft); } body.console-active:not(.agent-console-active) .mobile-bottom-nav svg { width: 20px; height: 20px; stroke-width: 1.7; } } @media (max-width: 600px) { body.console-active:not(.agent-console-active) #appView .app-main { padding-inline: 16px; } body.console-active:not(.agent-console-active) #appView .app-toolbar { margin-inline: -16px; padding-inline: 16px; gap: 8px; } body.console-active:not(.agent-console-active) #appView .toolbar-heading { gap: 8px; } body.console-active:not(.agent-console-active) #appView .app-toolbar h1 { font-size: 14px; } body.console-active:not(.agent-console-active) #appView .toolbar-balance { gap: 6px; } body.console-active:not(.agent-console-active) #appView .balance-chip { min-height: 40px; padding: 0 9px; font-size: 12px; } body.console-active:not(.agent-console-active) #appView :is(.agent-button, .balance-chip > span) { display: none; } body.console-active:not(.agent-console-active) #appView .recharge-button { min-height: 40px; width: 40px; padding: 0; } body.console-active:not(.agent-console-active) #appView .recharge-button .button-label { display: none; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-center-tools { align-items: flex-start; gap: 12px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-center-tools h2 { font-size: 23px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-center-tools p { font-size: 12px; max-width: 24ch; line-height: 1.7; } body.console-active:not(.agent-console-active) #appView #section-extract .notification-toggle { min-height: 44px; padding: 8px 10px; font-size: 11px; flex: 0 0 auto; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-purchase-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; gap: 20px; } body.console-active:not(.agent-console-active) #appView #section-extract :is(.compact-purchase-row .product-title, .compact-purchase-row #extractButton) { grid-column: 1/-1; } body.console-active:not(.agent-console-active) #appView #section-extract :is(.compact-purchase-fact, .compact-purchase-row .activation-price) { border: 0; padding: 0; background: transparent; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-purchase-row #extractButton { min-height: 46px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-purchase-footer { padding: 13px 20px; } body.console-active:not(.agent-console-active) #appView #section-extract .purchase-rules { font-size: 11px; gap: 6px; line-height: 1.7; } body.console-active:not(.agent-console-active) #appView #section-extract :is(.activation-live, .recent-resolution) > .panel-head { padding: 18px; gap: 12px; } body.console-active:not(.agent-console-active) #appView #section-extract .activation-live .panel-head p { font-size: 11px; } body.console-active:not(.agent-console-active) #appView #section-extract .live-indicator { max-width: none; flex: 0 0 auto; text-align: right; font-size: 10px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-row { grid-template-columns: 1fr 1fr; padding: 20px 18px; gap: 16px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-product { grid-column: 1/-1; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-product strong { font-size: 18px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-time { grid-column: 1/-1; padding-top: 12px; border-top: 1px dashed var(--client-line); } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.console-active:not(.agent-console-active) #appView #section-extract .compact-order-actions .button { min-height: 44px; font-size: 12px; } body.console-active:not(.agent-console-active) #appView #section-extract .resolution-row { grid-template-columns: 1fr; padding: 18px; gap: 12px; } body.console-active:not(.agent-console-active) #appView #section-extract .resolution-row > .button { width: 100%; min-height: 44px; } body.console-active:not(.agent-console-active) #appView .dashboard-command { padding: 22px; } body.console-active:not(.agent-console-active) #appView .dashboard-command { grid-template-columns: 1fr; } body.console-active:not(.agent-console-active) #appView .dashboard-command-account { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--client-line); } body.console-active:not(.agent-console-active) #appView .dashboard-command h2 { font-size: 22px; } body.console-active:not(.agent-console-active) #appView .dashboard-period { padding: 18px; } body.console-active:not(.agent-console-active) #appView .dashboard-period-head { flex-direction: column; align-items: stretch; } body.console-active:not(.agent-console-active) #appView .dashboard-period-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); } body.console-active:not(.agent-console-active) #appView .dashboard-accounting-overview .dashboard-simple-stats { grid-template-columns: 1fr 1fr; } body.console-active:not(.agent-console-active) #appView .dashboard-accounting-overview .dashboard-simple-stat { padding: 16px; min-height: 140px; border-bottom: 1px solid var(--client-line); } body.console-active:not(.agent-console-active) #appView .dashboard-accounting-overview .dashboard-simple-stat:nth-child(2n) { border-right: 0; } body.console-active:not(.agent-console-active) #appView .dashboard-accounting-overview .dashboard-simple-stat:nth-last-child(-n+2) { border-bottom: 0; } body.console-active:not(.agent-console-active) #appView .dashboard-accounting-overview .dashboard-simple-stat > strong { font-size: 25px; } body.console-active:not(.agent-console-active) #appView #section-records .record-archive { padding: 18px; } body.console-active:not(.agent-console-active) #appView #section-records .record-row-summary { padding: 20px 0; } body.console-active:not(.agent-console-active) #appView #section-records .record-detail-body { margin-inline: 0; } body.console-active:not(.agent-console-active) #appView #section-records .record-open { min-height: 44px; } body.console-active:not(.agent-console-active) #appView :is(.account-page-head h2, .business-page-head h2) { font-size: 23px; } } @keyframes client-dialog-in { from { opacity: .4; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.console-active:not(.agent-console-active) :is(#appView, #mobileDrawer, #mobileBottomNav, #appleDetailDrawer, dialog) *, body.console-active:not(.agent-console-active) :is(#appView, #mobileDrawer, #mobileBottomNav, #appleDetailDrawer, dialog) { animation: none !important; transition: none !important; scroll-behavior: auto; } }