:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #e6efff 0, transparent 35%), #f4f7fb; }
.auth-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }.auth-card { width: min(100%, 470px); padding: 30px; border: 1px solid #e1e7f0; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 24px 70px rgba(52,70,110,.12); }.auth-brand h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }.auth-brand > p:last-child { margin: 10px 0 0; color: #748096; line-height: 1.6; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 24px 0 20px; padding: 5px; border: 1px solid #e0e6f0; border-radius: 12px; background: #f7f8fc; }.auth-tab { border: 0; background: transparent; }.auth-tab.active { color: #fff; background: #5968e8; }.auth-form { display: grid; gap: 14px; }.auth-form[hidden] { display: none; }.auth-help { margin: -6px 0 0; color: #7a869c; font-size: 12px; line-height: 1.6; }.auth-back { display: flex; justify-content: center; margin-top: 18px; }
.auth-status, .admin-auth-bar { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: #68758c; font-size: 13px; }.auth-status a { color: #4b5cdd; font-weight: 750; }.auth-status .button-link { padding: 6px 10px; border: 1px solid #d8deea; border-radius: 8px; background: #fff; text-decoration: none; }.auth-status button, .admin-auth-bar button { padding: 6px 10px; font-size: 12px; }.admin-auth-bar { margin: 0 0 0 auto; padding-left: 12px; }
.shell { width: min(1600px, calc(100% - 48px)); margin: 0 auto; padding: 44px 0 72px; }
body.admin-auth-pending { min-height: 100vh; }
body.admin-auth-pending > * { visibility: hidden; }
body.admin-auth-pending::before { content: '正在验证管理员身份…'; position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; color: #65728a; font-size: 14px; letter-spacing: .04em; background: #f4f7fb; visibility: visible; }
header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.eyebrow { color: #5d6fe9; font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 8px; }
h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.04em; }
h2 { margin: 0; font-size: 18px; }
.muted, .section-title p { color: #748096; margin: 8px 0 0; font-size: 14px; }
.badge { border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge.ok { background: #dcf8ea; color: #16734a; }.badge.pending { background: #fff0cf; color: #946a00; }.badge.fail { background: #ffe0e4; color: #af3042; }
.notice, .card { background: rgba(255,255,255,.92); border: 1px solid #e4e9f1; border-radius: 18px; box-shadow: 0 12px 30px rgba(52, 70, 110, .06); }
.notice { display: flex; gap: 12px; padding: 15px 18px; margin-bottom: 16px; font-size: 13px; color: #526078; }
.announcement-float-btn { position: fixed; top: 88px; right: 24px; z-index: 121; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; color: #8d5900; background: linear-gradient(135deg, #fff2bf, #ffd978); box-shadow: 0 12px 28px rgba(169,119,20,.25); font-size: 15px; font-weight: 850; }.announcement-float-btn:hover, .announcement-float-btn.is-open { background: linear-gradient(135deg, #ffe9a1, #ffc954); transform: translateY(-2px); }.announcement-float-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #c98712; font-size: 19px; }.announcement-float-btn b { min-width: 21px; padding: 2px 6px; border-radius: 999px; color: #fff; background: #d85845; font-size: 11px; text-align: center; }.announcement-panel { position: fixed; top: 62px; right: 16px; z-index: 55; display: grid; grid-template-rows: auto minmax(80px, 1fr); width: min(440px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 170px)); overflow: hidden; border: 1px solid #f0d69a; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(85,61,18,.2); }.announcement-panel[hidden] { display: none; }.announcement-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; color: #5f410a; background: linear-gradient(135deg, #fff4c9, #ffe8a0); }.announcement-panel-head strong, .announcement-panel-head small { display: block; }.announcement-panel-head strong { font-size: 18px; }.announcement-panel-head small { margin-top: 4px; color: #99732e; font-size: 12px; }.announcement-panel-head button { width: 30px; height: 30px; padding: 0; border: 0; color: #8d671f; background: transparent; font-size: 24px; line-height: 1; }.announcement-list { overflow-y: auto; padding: 14px; background: #fffdf7; }.announcement-item { padding: 14px 15px; border: 1px solid #f1dfb3; border-radius: 12px; background: #fff; }.announcement-item + .announcement-item { margin-top: 10px; }.announcement-item strong { display: block; color: #8d5900; font-size: 17px; line-height: 1.4; }.announcement-item p { margin: 7px 0 5px; color: #39445a; white-space: pre-wrap; font-size: 15px; line-height: 1.75; }.announcement-item small { color: #a28a5a; font-size: 12px; }.announcement-content-label { display: grid; margin-top: 16px; }.announcement-content-label textarea, .announcement-admin-card textarea { width: 100%; resize: vertical; border: 1px solid #d9e0ea; border-radius: 10px; padding: 11px 12px; font: inherit; color: #172033; background: #fff; outline: none; }.announcement-admin-list { display: grid; gap: 14px; }.announcement-admin-card { padding: 16px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; }.announcement-admin-card.inactive { opacity: .65; background: #fafbfc; }.announcement-admin-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; }.announcement-admin-head h3 { margin: 0 0 5px; color: #26324a; }.announcement-admin-head small, .announcement-admin-head > span { color: #8994a7; font-size: 12px; }.announcement-admin-actions { display: grid; grid-template-columns: 1.2fr .5fr 1fr 1fr auto auto auto; gap: 8px; align-items: center; margin-top: 10px; }.announcement-admin-actions input { padding: 8px 9px; }.announcement-admin-actions .table-action { white-space: nowrap; }.announcement-admin-actions .danger { color: #a34a55; border-color: #efc8cd; }
@media (max-width: 900px) { .announcement-admin-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }.announcement-admin-actions .table-action { width: 100%; } }
@media (max-width: 650px) { .announcement-float-btn { top: 68px; right: 12px; height: 44px; }.announcement-panel { top: 122px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 138px); } }
.notice strong { color: #bd7110; white-space: nowrap; }
.mode-tabs { display: inline-flex; gap: 5px; padding: 5px; margin: 2px 0 4px; border: 1px solid #e0e6f0; border-radius: 13px; background: #fff; }
.mode-tab { border: 0; padding: 9px 20px; background: transparent; }.mode-tab.active { color: #fff; background: #172033; }
.admin-subnav { display: flex; gap: 8px; margin: 16px 0 4px; padding: 6px; border: 1px solid #e0e6f0; border-radius: 14px; background: rgba(255,255,255,.88); overflow-x: auto; scrollbar-width: thin; }.admin-subtab { flex: 1 0 auto; border: 0; padding: 11px 18px; border-radius: 10px; background: transparent; color: #65728a; text-align: center; text-decoration: none; font-weight: 750; white-space: nowrap; }.admin-subtab.active { color: #fff; background: #5968e8; box-shadow: 0 5px 14px rgba(89,104,232,.2); }.back-link { display: inline-flex; align-items: center; padding: 10px 15px; border: 1px solid #d8dfeb; border-radius: 10px; color: #34405a; background: #fff; text-decoration: none; font-weight: 750; }
.admin-launch { margin-top: 20px; }.admin-launch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.admin-launch-card { display: grid; gap: 10px; min-height: 170px; padding: 25px; border: 1px solid #dfe5ef; border-radius: 16px; color: inherit; background: linear-gradient(145deg, #fff, #f6f8ff); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.admin-launch-card:hover { transform: translateY(-3px); border-color: #8995f1; box-shadow: 0 15px 28px rgba(59,73,135,.12); }.admin-launch-card strong { color: #26324a; font-size: 22px; }.admin-launch-card span { color: #6f7b91; line-height: 1.7; }.admin-launch-card b { align-self: end; color: #4b5cdd; }
.card { padding: 24px; margin: 16px 0; }.card.compact { padding: 20px; }
.profile-card { border-color: #cfd6ff; background: linear-gradient(145deg, #fff, #f5f6ff); }.profile-form { display: grid; gap: 14px; }.profile-form .actions { margin-top: 2px; }
.payment-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 11px; background: #f7f8fc; color: #65728a; font-size: 14px; }.payment-summary strong { color: #3f50d0; }
.payment-enabled-toggle { display: inline-flex; margin: 4px 0 18px; }.payment-settings-grid { align-items: start; }.payment-settings-grid label { display: grid; gap: 7px; }.payment-callback-note { display: grid; gap: 5px; margin-top: 16px; padding: 12px 14px; border-radius: 10px; color: #59657a; background: #f7f8fc; font-size: 13px; }.payment-callback-note code { color: #3f50d0; }
.payment-order-summary { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; color: #59657a; background: #f7f8fc; font-size: 13px; }.payment-order-filters { display: grid; grid-template-columns: minmax(220px, 1fr) 160px auto; gap: 9px; margin-bottom: 14px; }.payment-order-filters input, .payment-order-filters select { min-width: 0; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; background: #fff; }.payment-order-filters input:focus, .payment-order-filters select:focus { border-color: #6978ec; outline: none; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }.payment-order-filters button { white-space: nowrap; }.table-wrap td small { display: block; margin-top: 4px; color: #8994a7; }.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }.table-action.danger { color: #a34a55; border-color: #efc8cd; }
@media (max-width: 700px) { .payment-order-filters { grid-template-columns: 1fr; } }
.list-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 170px auto auto; align-items: center; gap: 9px; margin: 0 0 14px; padding: 12px; border: 1px solid #e2e7f0; border-radius: 12px; background: linear-gradient(135deg, #fbfcff, #f5f7fc); }.list-toolbar input, .list-toolbar select { min-width: 0; width: 100%; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; color: #26324a; background: #fff; }.list-toolbar input:focus, .list-toolbar select:focus { border-color: #6978ec; outline: none; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }.list-toolbar button { white-space: nowrap; }.list-toolbar-count { min-width: 88px; color: #778399; font-size: 12px; text-align: right; }.list-toolbar-tip { grid-column: 1 / -1; margin: -3px 0 0; color: #8994a7; font-size: 12px; }.list-toolbar + .pagination-top .pagination-bar { margin-top: 0; }
@media (max-width: 720px) { .list-toolbar { grid-template-columns: 1fr 1fr; }.list-toolbar input { grid-column: 1 / -1; }.list-toolbar-count { text-align: left; } }
@media (max-width: 430px) { .list-toolbar { grid-template-columns: 1fr; }.list-toolbar input, .list-toolbar select, .list-toolbar button, .list-toolbar-count { grid-column: 1; width: 100%; text-align: left; } }
.list-empty { display: grid; justify-items: center; gap: 5px; padding: 34px 18px; border: 1px dashed #d7deeb; border-radius: 12px; color: #7a869c; background: #fafbfe; }.list-empty strong { color: #4b5871; font-size: 14px; }.list-empty p { margin: 0; font-size: 12px; }.list-empty-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #5968e8; background: #eef0ff; font-size: 22px; }.pool-search { display: flex; align-items: center; gap: 9px; margin: 3px 0 4px; }.pool-search input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #d9e0ea; border-radius: 9px; background: #fff; }.pool-search span { color: #778399; font-size: 12px; white-space: nowrap; }.pool-search-empty { margin: 0; padding: 8px; text-align: center; }.pool-search-empty[hidden] { display: none; }.pool-account-option[hidden] { display: none; }
.payment-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }.payment-plan { display: grid; gap: 5px; padding: 14px; text-align: left; border: 1px solid #dce2ed; border-radius: 12px; background: #fff; }.payment-plan-name { color: #26324a; font-weight: 800; }.payment-plan strong { color: #3f50d0; font-size: 20px; }.payment-plan small { color: #7a869c; font-weight: 550; }.payment-plan.active { border-color: #5968e8; background: #f0f2ff; box-shadow: 0 0 0 2px rgba(89,104,232,.12); }.payment-plan.active .payment-plan-name { color: #3f50d0; }
.plan-create-secondary { margin-top: 16px; }.plan-admin-list { display: grid; gap: 14px; }.plan-admin-card { padding: 18px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(52,70,110,.05); }.plan-admin-card.inactive { opacity: .7; background: #fafbfc; }.plan-admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }.plan-admin-card-head h3 { margin: 0 0 5px; color: #1d2941; font-size: 17px; }.plan-admin-card-head span { color: #7a869c; font-size: 12px; }.plan-admin-card-head strong { color: #3f50d0; font-size: 22px; }.plan-edit-grid { gap: 10px; }.plan-edit-grid label, .plan-admin-actions label { font-size: 12px; }.plan-edit-grid input, .plan-admin-actions input { padding: 8px 9px; }.plan-admin-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.plan-admin-actions label { width: 130px; }.plan-admin-actions .status-pill { align-self: center; margin-left: auto; }
.plan-account-pool { display: grid; gap: 10px; margin-top: 16px; padding: 14px 15px; border: 1px solid #dfe5f0; border-radius: 12px; background: linear-gradient(135deg, #fafbff, #f5f7ff); }
.plan-account-pool > .muted { margin: 0; max-width: 960px; color: #7a869c; font-size: 12px; line-height: 1.65; }
.pool-mode { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #26324a; font-size: 13px; font-weight: 800; cursor: pointer; }
.pool-mode input { width: 17px; height: 17px; margin: 0; accent-color: #5968e8; }
.pool-account-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 214px; overflow-y: auto; padding: 3px 5px 3px 2px; scrollbar-width: thin; scrollbar-color: #b9c2f6 transparent; }
.pool-account-options::-webkit-scrollbar { width: 8px; }
.pool-account-options::-webkit-scrollbar-track { background: transparent; }
.pool-account-options::-webkit-scrollbar-thumb { border-radius: 999px; background: #b9c2f6; }
.pool-account-options::-webkit-scrollbar-thumb:hover { background: #8995f1; }
.pool-account-option { display: flex; grid-template-columns: none; align-items: center; gap: 9px; min-width: 0; padding: 10px 11px; border: 1px solid #dce2ed; border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pool-account-option:hover { border-color: #9ca8f2; background: #fafbff; }
.pool-account-option:has(input:checked) { border-color: #5968e8; background: #f0f2ff; box-shadow: 0 0 0 2px rgba(89,104,232,.1); }
.pool-account-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: #5968e8; }
.pool-account-option span { display: grid; min-width: 0; gap: 3px; color: #26324a; font-size: 12px; font-weight: 750; line-height: 1.35; }
.pool-account-option span:first-line { overflow: hidden; text-overflow: ellipsis; }
.pool-account-option small { color: #8994a7; font-size: 11px; font-weight: 500; }
.plan-admin-actions { padding-top: 13px; border-top: 1px solid #edf0f5; }
.plan-admin-actions label { width: 150px; }
.plan-admin-actions .table-action { min-height: 34px; }
@media (max-width: 760px) { .pool-account-options { grid-template-columns: 1fr 1fr; }.plan-admin-actions { align-items: stretch; }.plan-admin-actions label { width: calc(50% - 4px); }.plan-admin-actions .status-pill { margin-left: 0; } }
@media (max-width: 520px) { .pool-account-options { grid-template-columns: 1fr; }.plan-admin-actions label { width: 100%; }.plan-admin-card-head { align-items: flex-start; }.plan-admin-card-head strong { font-size: 19px; } }
.section-title { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }.step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #fff; background: #5968e8; font-weight: 800; }
.grid { display: grid; gap: 16px; }.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid.three { grid-template-columns: 1.2fr 1.2fr .6fr; }
label { display: grid; gap: 7px; color: #536078; font-size: 13px; font-weight: 700; }.check { display: flex; align-items: center; gap: 9px; align-self: end; padding-bottom: 12px; }.check input { width: 17px; height: 17px; accent-color: #5968e8; }
.credential-access-note { margin: 8px 0 0; color: #7a869c; font-size: 12px; }
.credentials-panel { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 12px; padding: 12px 14px; border: 1px solid #f0d69a; border-radius: 11px; background: #fffaf0; }.credentials-panel span, .credentials-panel strong { display: block; }.credentials-panel span { color: #99732e; font-size: 11px; }.credentials-panel strong { margin-top: 4px; color: #5f410a; font: 700 14px ui-monospace, Consolas, monospace; word-break: break-all; }.credentials-panel button { padding: 8px 10px; white-space: nowrap; }
.credential-permission-btn { margin-top: 10px; color: #5968e8; border-color: #cbd2ff; background: #f4f5ff; }
@media (max-width: 650px) { .credentials-panel { grid-template-columns: 1fr; } }
.assignment-panel { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 15px 16px; border-radius: 11px; background: #f7f8fc; color: #64718a; font-size: 14px; }.assignment-panel strong { color: #3f50d0; }
.account-usage-notice { margin-top: 12px; padding: 13px 15px; border: 1px solid #f0d69a; border-radius: 12px; color: #6d531d; background: linear-gradient(135deg, #fffaf0, #fff5d8); }.account-usage-notice-title { display: flex; align-items: center; gap: 8px; color: #8d5900; font-size: 14px; }.account-usage-notice-title span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #c98712; font-weight: 800; }.account-usage-notice p { margin: 8px 0 10px; font-size: 13px; line-height: 1.7; }.account-usage-check { display: inline-flex; align-items: center; gap: 8px; color: #5f410a; font-size: 12px; font-weight: 750; }.account-usage-check input { width: 16px; height: 16px; accent-color: #c98712; }
.assignment-picker { margin-top: 12px; padding: 14px; border: 1px solid #e4e9f1; border-radius: 11px; background: #fbfcff; }.assignment-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #536078; font-size: 13px; }.account-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 9px; }.account-choice-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid #dce2ed; border-radius: 10px; background: #fff; transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease; }.account-choice-card.active { border-color: #5968e8; background: #f0f2ff; box-shadow: 0 0 0 2px rgba(89,104,232,.12); }.account-choice { display: grid; gap: 4px; min-width: 0; padding: 11px 13px; text-align: left; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }.account-choice span { overflow: hidden; color: #253047; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.account-choice small { color: #7a869c; font-weight: 500; }.account-choice-card.active .account-choice span { color: #3f50d0; }.copy-account-btn { align-self: center; margin-right: 9px; padding: 7px 10px; border-color: #cdd4e4; border-radius: 8px; color: #536078; background: #fff; font-size: 12px; white-space: nowrap; }.copy-account-btn.copied { color: #16734a; border-color: #9edbbd; background: #e9f9f1; }.assignment-actions select { border: 1px solid #d9e0ea; border-radius: 8px; padding: 7px 9px; background: #fff; color: #172033; }.muted-inline { color: #758096; font-size: 12px; }
input { width: 100%; border: 1px solid #d9e0ea; border-radius: 10px; padding: 12px 13px; font: inherit; color: #172033; background: #fff; outline: none; }.check input { width: auto; }.check span { color: #172033; font-weight: 600; }
input:focus { border-color: #6978ec; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
button { border: 1px solid #d8dfeb; border-radius: 10px; padding: 11px 15px; background: #fff; color: #34405a; font: inherit; font-weight: 750; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease; }button:hover:not(:disabled) { border-color: #aeb9cf; box-shadow: 0 5px 14px rgba(45,61,96,.1); }button:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: none; }.primary { background: #5968e8; color: #fff; border-color: #5968e8; }.primary:hover:not(:disabled) { background: #4858dc; border-color: #4858dc; }button:disabled { opacity: .55; cursor: not-allowed; }.loading-button { position: relative; opacity: .78 !important; cursor: progress; }.loading-button::before { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border: 2px solid #c8cfdd; border-top-color: currentColor; border-radius: 50%; animation: button-spin .75s linear infinite; pointer-events: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(89,104,232,.28); outline-offset: 2px; }
body.modal-open { overflow: hidden; }

.result { min-height: 20px; margin: 14px 0 0; font-size: 13px; color: #526078; }.result.success { color: #16734a; }.result.error { color: #b43245; }.pending-result { color: #5968e8; animation: soft-pulse 1.1s ease-in-out infinite; }
.interaction-notifications { position: fixed; top: 18px; right: 18px; z-index: 300; display: grid; gap: 8px; width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.interaction-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid #dfe5ef; border-radius: 11px; color: #3f4d65; background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(31,45,86,.16); font-size: 13px; line-height: 1.5; pointer-events: auto; animation: notice-in .18s ease-out; }
.interaction-notice.success { border-color: #c8e8d6; color: #16734a; }.interaction-notice.error { border-color: #f0c8cf; color: #a72f41; }
.interaction-notice button { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; color: inherit; background: transparent; font-size: 18px; line-height: 1; box-shadow: none; }
.interaction-dialog { text-align: left; }.interaction-dialog h2 { text-align: left; }.interaction-dialog .confirm-modal-text { white-space: pre-line; }.interaction-dialog form { display: grid; gap: 12px; }.interaction-dialog form label { color: #5f6d84; font-size: 12px; }.interaction-dialog form input, .interaction-dialog form textarea { width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; font: inherit; }
.danger-action { color: #a34a55; border-color: #efc8cd; background: #fff7f8; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes button-spin { to { transform: rotate(360deg); } }
@keyframes soft-pulse { 50% { opacity: .55; } }
.otp-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 18px; border-radius: 14px; background: #f5f7ff; border: 1px dashed #cbd3fc; }.state { color: #62708a; font-size: 14px; }.otp-code { min-width: 140px; text-align: center; letter-spacing: .18em; font: 800 27px ui-monospace, SFMono-Regular, Consolas, monospace; color: #3f50d0; }
pre { min-height: 60px; max-height: 180px; overflow: auto; padding: 13px; border-radius: 10px; background: #111827; color: #d5defe; font: 12px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 13px 11px; text-align: left; border-bottom: 1px solid #e7ebf2; white-space: nowrap; } th { color: #758096; font-size: 12px; } td { color: #334057; } .status-pill { display: inline-block; padding: 4px 8px; border-radius: 999px; font-weight: 700; }.status-pill.yes { color: #16734a; background: #dcf8ea; }.status-pill.paused { color: #946a00; background: #fff0cf; }.status-pill.no { color: #a34a55; background: #ffe6e9; }.expiry-text { margin-top: 5px; color: #758096; font-size: 11px; }.table-action { padding: 6px 9px; font-size: 12px; }
.admin-console .table-action { min-height: 34px; }.admin-console tbody tr:focus-within td, .admin-console .user-card:focus-within { box-shadow: inset 0 0 0 2px rgba(89,104,232,.25); }
.limit-control, .assigned-row, .assignment-actions, .expiry-control { display: flex; align-items: center; gap: 6px; margin: 4px 0; }.limit-control input { width: 58px; padding: 6px 7px; }.expiry-control input { width: 178px; padding: 6px 7px; font-size: 12px; }.danger { color: #b43245; }
.user-card-list { display: grid; gap: 16px; }.user-card { overflow: hidden; border: 1px solid #e1e7f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(52,70,110,.05); }.user-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: linear-gradient(135deg, #f8f9ff, #f2f5ff); border-bottom: 1px solid #e6ebf3; }.user-card-title { display: flex; align-items: flex-start; gap: 12px; }.user-card-head h3 { margin: 0 0 6px; color: #1d2941; font-size: 17px; }.role-label { color: #7a869c; font-size: 12px; }.list-sequence { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; color: #3f50d0; background: #eef0ff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }.user-card-grid { display: grid; grid-template-columns: 1.1fr .95fr .8fr 1.6fr; gap: 0; }.user-card-section { min-height: 132px; padding: 18px 20px; border-right: 1px solid #edf0f5; }.user-card-section:last-child { border-right: 0; }.user-card-section h4 { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 13px; color: #64718a; font-size: 12px; letter-spacing: .03em; }.user-card-section h4 span { color: #4b5cdd; font-weight: 700; }.user-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.user-section-heading h4 { margin: 0; }.note-count { color: #9aa4b5; font-size: 11px; font-variant-numeric: tabular-nums; }.user-meta { margin-top: 14px; color: #8a95a8; font-size: 12px; }.user-admin-note { display: block; width: 100%; min-height: 68px; margin: 0 0 8px; padding: 9px 10px; border: 1px solid #d9e0ea; border-radius: 9px; color: #26324a; background: #fff; font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }.user-admin-note:focus { border-color: #6978ec; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }.note-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.note-hint { color: #9aa4b5; font-size: 11px; }.note-save-action { white-space: nowrap; }.note-save-action:disabled { color: #a3adbd; border-color: #e1e6ee; background: #f5f7fa; cursor: default; }.assigned-row { justify-content: space-between; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #e8ecf3; border-radius: 9px; background: #fafbfe; }.assigned-row strong, .assigned-row small { display: block; }.assigned-row strong { color: #2e3a55; font-size: 13px; }.assigned-row small { margin-top: 3px; color: #8792a5; font-size: 11px; }.empty-inline { color: #9aa4b5; font-size: 13px; }.user-card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 13px 20px; border-top: 1px solid #edf0f5; background: #fcfdff; }.primary-action { min-width: 92px; color: #fff; background: #5968e8; border-color: #5968e8; }.user-card-actions .danger { color: #a34a55; border-color: #efc8cd; }.empty-state { padding: 30px; text-align: center; color: #8b96a9; }
.pagination-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; padding: 11px 13px; border: 1px solid #e1e7f0; border-radius: 11px; color: #718097; background: #f8f9fd; font-size: 12px; }.pagination-size { display: inline-flex; align-items: center; gap: 6px; color: #59657a; font-size: 12px; font-weight: 600; }.pagination-size select { padding: 5px 24px 5px 7px; border: 1px solid #d5dce8; border-radius: 7px; color: #26324a; background: #fff; }.pagination-pages { min-width: 72px; text-align: center; }.pagination-actions { display: inline-flex; gap: 6px; }.pagination-button { min-width: 58px; padding: 6px 9px; border: 1px solid #d5dce8; border-radius: 7px; color: #536078; background: #fff; font-size: 12px; }.pagination-button:hover:not(:disabled) { border-color: #8793ee; color: #3f50d0; background: #f3f4ff; }.pagination-button:disabled { cursor: not-allowed; opacity: .45; }@media (max-width: 560px) { .pagination-bar { justify-content: space-between; gap: 8px; }.pagination-total { width: 100%; }.pagination-pages { min-width: auto; } }
.user-search-panel { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto auto; align-items: end; gap: 10px; margin: -2px 0 18px; padding: 14px; border: 1px solid #e2e7f0; border-radius: 12px; background: #f8f9fc; }.user-search-panel input { padding: 10px 12px; }.user-search-panel button { padding: 10px 15px; }.search-count { align-self: center; min-width: 110px; color: #778399; font-size: 12px; text-align: right; }
.account-expiry-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #dce9e3; border-radius: 11px; color: #43705c; background: #f3fbf7; font-size: 13px; }.account-expiry-summary strong { color: #24533f; }.account-expiry-summary.has-warning { color: #87610b; border-color: #f0d89b; background: #fff9e9; }.account-expiry-summary.has-expired { color: #a23142; border-color: #efbdc5; background: #fff1f3; }.account-expiry-control { display: grid; grid-template-columns: minmax(174px, 1fr) auto; align-items: center; gap: 6px; min-width: 310px; }.account-expiry-control input { min-width: 174px; padding: 6px 7px; font-size: 12px; }.expiry-badge { grid-column: 1 / -1; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }.expiry-badge.safe { color: #16734a; background: #dcf8ea; }.expiry-badge.warning { color: #916600; background: #fff0c2; }.expiry-badge.expired { color: #b4233b; background: #ffdce2; }.account-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }.renew-action { color: #3f50d0; border-color: #cbd2ff; background: #f4f5ff; }tr.account-expiring td { background: #fffaf0; }tr.account-expired td { background: #fff0f2; border-bottom-color: #efc1c8; }tr.account-expired td:first-child { box-shadow: inset 4px 0 #d53a50; color: #a51f34; font-weight: 750; }
.account-connection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 12px 15px; border: 1px solid #dfe5f0; border-radius: 11px; color: #334057; background: #f8f9fd; font-size: 13px; }.account-connection-toolbar div { display: grid; gap: 4px; }.account-connection-toolbar span { color: #778399; font-size: 12px; }.account-connection-toolbar button { white-space: nowrap; }
.plan-view-tabs { display: flex; gap: 8px; margin: 18px 0 12px; padding: 5px; border: 1px solid #dfe5f0; border-radius: 12px; background: #f8f9fd; }.plan-view-tab { flex: 1; padding: 10px 16px; border: 0; border-radius: 9px; color: #66738a; background: transparent; font-weight: 750; cursor: pointer; }.plan-view-tab.active { color: #fff; background: #5968e8; box-shadow: 0 4px 10px rgba(89,104,232,.2); }.plan-view-section[hidden], .admin-view-section[hidden] { display: none; }
.account-create-grid { grid-template-columns: 1.15fr 1.15fr 1.15fr .65fr; }.account-create-grid .account-note-field { grid-column: 1 / -1; }.account-test-state { margin: 10px 0 0; color: #7a869c; font-size: 12px; }.account-test-state.testing { color: #745a00; }.account-test-state.success { color: #16734a; font-weight: 700; }.account-identity { display: grid; gap: 5px; min-width: 210px; }.account-identity strong { color: #22304b; }.account-identity small { max-width: 260px; overflow: hidden; color: #7d899d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.danger-action { color: #b4233b; border-color: #efc1c8; background: #fff4f5; }.account-edit-row td { padding: 0; background: #f8faff !important; }.account-edit-panel { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)) auto; align-items: end; gap: 12px; padding: 16px; border-bottom: 1px solid #dfe5f0; }.account-edit-panel label { font-size: 12px; }.account-edit-panel input { width: 100%; margin-top: 6px; padding: 8px 9px; }.account-edit-actions { display: flex; gap: 6px; padding-bottom: 1px; }
.account-edit-panel.secondary-edit-panel { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; }
.account-batch-toolbar { display: grid; gap: 12px; margin: 0 0 16px; padding: 14px 15px; border: 1px solid #dfe5f0; border-radius: 12px; background: #f8f9fd; }.account-batch-head { display: flex; align-items: center; gap: 12px; color: #334057; font-size: 13px; }.account-batch-head span { color: #7a869c; font-size: 12px; }.account-batch-fields { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(130px, .8fr) auto; align-items: end; gap: 9px; }.account-batch-fields label { font-size: 12px; }.account-batch-fields input, .account-batch-fields select { width: 100%; margin-top: 5px; padding: 8px 9px; border: 1px solid #d9e0ea; border-radius: 9px; font: inherit; color: #172033; background: #fff; }.account-batch-fields button { white-space: nowrap; }.select-all-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }.select-all-label input, .account-select { width: 16px; height: 16px; accent-color: #5968e8; }.account-status-cell { display: grid; gap: 6px; justify-items: start; }.account-connection-state { color: #8994a7; font-size: 11px; }.account-connection-state.testing { color: #916600; animation: soft-pulse 1s ease-in-out infinite; }.account-connection-state.success { color: #16734a; font-weight: 700; }.account-connection-state.failed { color: #b4233b; font-weight: 700; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(23,32,51,.46); backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }.confirm-modal { position: relative; width: min(100%, 430px); padding: 26px; border: 1px solid #e1e6f0; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(24,35,72,.22); text-align: center; animation: modal-in .16s ease-out; }.modal-close-button { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #748097; background: #f3f5f9; font-size: 22px; line-height: 1; box-shadow: none; }.modal-close-button:hover { color: #28344b; background: #e8ebf2; transform: none; }.confirm-modal-icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 13px; color: #fff; background: #5968e8; font-weight: 800; font-size: 22px; }.confirm-modal h2 { margin: 0; color: #1d2941; font-size: 20px; }.confirm-modal-text { margin: 12px 0 22px; color: #68758c; line-height: 1.7; font-size: 14px; }.confirm-modal-actions { display: flex; justify-content: center; gap: 10px; }.confirm-modal-actions button { min-width: 116px; }.confirm-modal-actions button:disabled { opacity: .6; }
.otp-code-area { display: grid; justify-items: center; gap: 8px; min-width: 150px; }.otp-visibility-btn { padding: 5px 9px; border-radius: 8px; color: #5968e8; background: #fff; font-size: 11px; }.otp-code.is-hidden { letter-spacing: .12em; }.otp-code.is-hidden::after { content: '••••'; }.otp-code.is-hidden { font-size: 0; }.otp-code.is-hidden::after { font-size: 27px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes button-spin { to { transform: rotate(360deg); } }
.admin-list { display: grid; gap: 10px; }
.admin-list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fbfcff; }
.admin-list-row strong { color: #26324a; }
.admin-role-pill { display: inline-block; margin-left: 9px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.admin-role-pill.primary { color: #3f50d0; background: #eef0ff; }
.admin-role-pill.secondary { color: #16734a; background: #dcf8ea; }
.admin-role-pill.disabled { color: #a34a55; background: #ffe6e9; }
.admin-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
@media (max-width: 650px) { .admin-list-row { align-items: flex-start; flex-direction: column; } }
.credential-action { color: #3f50d0; border-color: #cbd2ff; background: #f4f5ff; }
.credential-modal { width: min(100%, 590px); text-align: left; }
.credential-modal .confirm-modal-icon, .credential-modal h2, .credential-modal .confirm-modal-text { text-align: center; }
.credential-fields { display: grid; gap: 14px; margin: 20px 0; }
.credential-fields > label { color: #5f6d84; font-size: 12px; font-weight: 700; }
.credential-fields input { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; color: #26324a; background: #f8f9fc; font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.credential-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; align-items: end; }
.credential-input-row button { padding: 10px 12px; }
@media (max-width: 560px) { .credential-input-row { grid-template-columns: 1fr 1fr; }.credential-input-row input { grid-column: 1 / -1; } }
.password-reset-modal { width: min(100%, 540px); text-align: left; }
.password-reset-modal .confirm-modal-icon, .password-reset-modal h2, .password-reset-modal .confirm-modal-text { text-align: center; }
.password-reset-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 18px 0 8px; }
.password-reset-fields label { color: #5f6d84; font-size: 12px; font-weight: 700; }
.password-reset-fields input { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; color: #26324a; background: #fff; font: inherit; outline: none; }
.password-reset-fields input:focus { border-color: #6978ec; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }
.password-reset-modal > .result { min-height: 20px; margin: 8px 0 14px; }
@media (max-width: 560px) { .password-reset-fields { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .account-edit-panel { grid-template-columns: 1fr 1fr; }.account-edit-actions { align-self: end; } }
@media (max-width: 980px) { .account-create-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .account-edit-panel { grid-template-columns: 1fr; }.account-edit-actions { justify-content: flex-start; } }
@media (max-width: 980px) { .account-batch-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-batch-fields button { justify-self: start; } }
@media (max-width: 650px) { .account-batch-fields { grid-template-columns: 1fr; } }
.support-card textarea, .support-admin-detail textarea { width: 100%; resize: vertical; border: 1px solid #d9e0ea; border-radius: 10px; padding: 11px 12px; font: inherit; color: #172033; background: #fff; outline: none; }.support-card textarea:focus, .support-admin-detail textarea:focus { border-color: #6978ec; box-shadow: 0 0 0 3px rgba(89,104,232,.12); }.support-ticket-list { display: grid; gap: 12px; margin-top: 16px; }.support-ticket { padding: 14px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fbfcff; }.support-ticket.closed { opacity: .78; }.support-ticket-head, .support-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.support-ticket-head strong { display: block; color: #26324a; }.support-ticket-head small, .support-detail-head small { display: block; margin-top: 5px; color: #8994a7; font-size: 11px; }.support-status { padding: 4px 8px; border-radius: 999px; color: #916600; background: #fff0c2; font-size: 11px; font-weight: 750; white-space: nowrap; }.support-status.pending { color: #3f50d0; background: #eef0ff; }.support-status.closed { color: #68758c; background: #eef1f5; }.support-messages { display: grid; gap: 9px; margin-top: 13px; }.support-message { max-width: 92%; padding: 10px 12px; border-radius: 11px; background: #f0f3f9; }.support-message.user { justify-self: start; }.support-message.admin, .support-message.ai { justify-self: end; background: #edf0ff; }.support-message.ai { background: #e9f9f1; }.support-message.ai.pending { color: #7b6f39; background: #fff7d6; }.support-message small { color: #8994a7; font-size: 11px; }.support-message p { margin: 5px 0 0; color: #334057; white-space: pre-wrap; line-height: 1.6; }.support-reply { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }.support-admin-layout { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1.6fr); gap: 16px; min-height: 430px; }.support-admin-tickets { display: grid; align-content: start; gap: 8px; padding: 8px; border: 1px solid #e2e7f0; border-radius: 12px; background: #f8f9fc; }.support-admin-ticket { display: grid; gap: 5px; padding: 12px; border: 1px solid transparent; border-radius: 10px; background: #fff; text-align: left; }.support-admin-ticket:hover { border-color: #b9c2f6; }.support-admin-ticket.active { border-color: #5968e8; background: #f0f2ff; }.support-admin-ticket strong { overflow: hidden; color: #26324a; text-overflow: ellipsis; white-space: nowrap; }.support-admin-ticket small, .support-admin-ticket time { color: #8994a7; font-size: 11px; }.support-admin-detail { padding: 16px; border: 1px solid #e2e7f0; border-radius: 12px; background: #fff; }.support-detail-head h3 { margin: 0; color: #26324a; }.support-detail-head select { min-width: 110px; padding: 8px; border: 1px solid #d9e0ea; border-radius: 9px; background: #fff; }.admin-messages { min-height: 220px; max-height: 360px; overflow-y: auto; padding: 12px 0; }.support-admin-actions { border-top: 1px solid #edf0f5; padding-top: 14px; }.support-admin-actions .actions { margin-top: 10px; }.support-ai-active { margin-top: 14px; }.support-ai-grid { grid-template-columns: 1.5fr 1fr 1.2fr; }.support-ai-grid select { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid #d9e0ea; border-radius: 9px; background: #fff; }
@media (max-width: 800px) { .support-admin-layout { grid-template-columns: 1fr; }.support-admin-tickets { max-height: 260px; overflow-y: auto; }.support-reply { grid-template-columns: 1fr; }.support-ai-grid { grid-template-columns: 1fr; } }
.support-float-btn { position: fixed; top: auto; bottom: 20px; right: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 17px 0 8px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #5968e8, #7b67e9); box-shadow: 0 12px 28px rgba(73,83,190,.3); font-size: 15px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease; }.support-float-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(73,83,190,.38); }.support-float-btn.is-open { background: linear-gradient(135deg, #4858d8, #6754d4); }.support-float-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #5968e8; background: #fff; font-size: 18px; }.support-float-label { letter-spacing: .04em; }.support-chat-panel { position: fixed; top: auto; bottom: 76px; right: 16px; z-index: 45; display: grid; grid-template-rows: auto minmax(220px, 1fr) auto auto auto; width: min(420px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 104px)); overflow: hidden; border: 1px solid #dfe5ef; border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(30,43,87,.22); }.support-chat-panel[hidden] { display: none; }.support-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; color: #fff; background: linear-gradient(135deg, #5968e8, #6e5ee2); }.support-chat-head strong, .support-chat-head small { display: block; }.support-chat-head small { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 11px; }.support-chat-head button { width: 30px; height: 30px; padding: 0; border: 0; color: #fff; background: transparent; font-size: 24px; line-height: 1; }.support-chat-body { overflow-y: auto; padding: 14px; background: #f8f9fd; }.support-chat-ticket { padding: 12px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; }.support-chat-empty { padding: 22px 8px; color: #7a869c; text-align: center; font-size: 13px; }.support-new-ticket-fields { display: grid; gap: 8px; padding: 11px 14px 0; }.support-new-ticket-fields[hidden] { display: none; }.support-new-ticket-fields input, .support-new-ticket-fields textarea, .support-chat-compose textarea { width: 100%; border: 1px solid #d9e0ea; border-radius: 9px; padding: 9px 10px; font: inherit; color: #172033; background: #fff; resize: vertical; outline: none; }.support-chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 11px 14px; background: #fff; }.support-chat-compose textarea { min-height: 42px; max-height: 110px; }.support-chat-panel > .result { margin: 0; padding: 0 14px 12px; }
@media (max-width: 650px) { .support-float-btn { top: 14px; right: 14px; height: 44px; padding-right: 14px; }.support-chat-panel { top: 68px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 82px); } }
.user-page-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; margin-bottom: 20px; padding: 5px; width: 100%; border: 1px solid #dfe5ef; border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 5px 16px rgba(45,65,110,.04); }.user-page-nav-link { display: block; padding: 11px 15px; border-radius: 9px; color: #59657a; text-align: center; text-decoration: none; font-weight: 750; transition: background .18s ease, color .18s ease, transform .18s ease; }.user-page-nav-link:hover { color: #26324a; background: #f1f3fb; }.user-page-nav-link.active { color: #fff; background: #172033; box-shadow: 0 4px 10px rgba(23,32,51,.14); }
.user-orders-list { display: grid; gap: 12px; }.user-order { padding: 16px; border: 1px solid #e1e7f0; border-radius: 13px; background: #fbfcff; }.user-order.pending { border-color: #eadcae; background: #fffdf5; }.user-order.paid { border-color: #cfe8dc; }.user-order.closed { opacity: .78; }.user-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.user-order-head strong { display: block; color: #26324a; font-size: 16px; }.user-order-head small { display: block; margin-top: 5px; color: #8994a7; font-size: 11px; word-break: break-all; }.user-order-info { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; color: #68758c; font-size: 13px; }.user-order-info strong { color: #26324a; }.user-order-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }.user-order-actions button, .user-order-actions a { min-height: 36px; }.error-text { color: #b4233b; }
.pending-order-hint { margin-top: 11px; padding: 10px 12px; border: 1px solid #eadcae; border-radius: 9px; color: #795f16; background: #fffaf0; font-size: 13px; }.pending-order-hint a { margin-left: 5px; color: #4e5ed7; font-weight: 750; }
.payment-help-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.payment-help-card .section-title { margin-bottom: 0; }
@media (max-width: 650px) { .payment-help-card { align-items: stretch; flex-direction: column; }.user-page-nav-link { padding: 10px 8px; font-size: 13px; } }
.support-compose-actions { display: flex; align-items: center; gap: 7px; }.support-image-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid #d9e0ea; border-radius: 9px; color: #5968e8; background: #fff; cursor: pointer; font-size: 18px; }.support-image-btn:hover { border-color: #6978ec; background: #f4f5ff; }.support-image-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 14px 10px; padding: 7px 10px; border-radius: 8px; color: #5968e8; background: #f0f2ff; font-size: 12px; }.support-image-preview button { border: 0; color: #68758c; background: transparent; font-size: 18px; cursor: pointer; }.support-attachment { display: block; margin-top: 7px; width: min(220px, 100%); }.support-attachment img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; background: #e9edf5; }.support-image-failed { display: block; margin-top: 7px; color: #8994a7; font-size: 12px; }.support-admin-compose { display: flex; align-items: center; gap: 8px; margin-top: 8px; }.support-admin-compose .support-image-btn { width: 34px; height: 34px; }.support-admin-compose .muted { font-size: 12px; }
.support-chat-compose.is-dragging, .support-new-ticket-fields.is-dragging, .support-admin-detail.is-dragging, .support-chat-panel.is-dragging, .support-chat-compose textarea.is-dragging, .support-admin-actions.is-dragging { border-color: #5968e8; background: #f0f2ff; box-shadow: 0 0 0 3px rgba(89,104,232,.14); }
@media (max-width: 850px) { .user-card-grid { grid-template-columns: 1fr; }.user-card-section { min-height: 0; border-right: 0; border-bottom: 1px solid #edf0f5; }.user-card-section:last-child { border-bottom: 0; } }
@media (max-width: 650px) { .shell { width: min(100% - 20px, 1600px); padding-top: 24px; } header { display: block; }.badge { display: inline-block; margin-top: 15px; }.grid.two, .grid.three, .admin-launch-grid, .user-search-panel { grid-template-columns: 1fr; }.search-count { text-align: left; }.otp-panel { grid-template-columns: 1fr; }.otp-code { text-align: left; }.user-card-head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 650px) { .actions, .account-row-actions, .user-card-actions, .table-actions { gap: 8px; }.actions > button, .account-row-actions > button, .user-card-actions > button, .table-actions > button { min-height: 42px; }.interaction-notifications { top: 10px; right: 10px; width: calc(100vw - 20px); } }

/* Light admin console layout matching the supplied reference. */
body.admin-console.admin-dashboard { color:#172033; background:radial-gradient(circle at 10% 0%,#e6efff 0,transparent 35%),#f4f7fb; }
body.admin-console.admin-dashboard .shell { width:min(1600px,calc(100% - 48px)); padding:22px 0 60px; }
body.admin-console.admin-dashboard header { min-height:78px; margin-bottom:18px; padding-right:0; align-items:flex-start; }
body.admin-console.admin-dashboard h1 { color:#172033; font-size:34px; }
body.admin-console.admin-dashboard .dashboard-header-meta { display:flex; align-items:center; gap:12px; margin-top:2px; color:#68758c; font-size:13px; }
body.admin-console.admin-dashboard header > .admin-auth-bar { display:none; }
body.admin-console.admin-dashboard .dashboard-header-meta button { padding:7px 11px; border:1px solid #d8deea; border-radius:8px; color:#34405a; background:#fff; font:inherit; cursor:pointer; }
body.admin-console.admin-dashboard .dashboard-header-meta button:hover { border-color:#5968e8; color:#3f50d0; }
body.admin-console.admin-dashboard .dashboard-subnav { position:static; display:flex; gap:8px; margin:0 0 22px; padding:6px; border:1px solid #dfe5ef; border-radius:14px; background:rgba(255,255,255,.9); box-shadow:0 8px 22px rgba(52,70,110,.06); }
body.admin-console.admin-dashboard .dashboard-subnav .admin-subtab { flex:1 1 0; min-height:46px; padding:13px 10px; color:#59657a; font-size:14px; }
body.admin-console.admin-dashboard .dashboard-subnav .admin-subtab.active { color:#fff; background:#5968e8; box-shadow:0 5px 14px rgba(89,104,232,.2); }
body.admin-console.admin-dashboard .dashboard-overview-card { margin:0; padding:24px; }
body.admin-console.admin-dashboard .dashboard-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 220px; gap:14px; }
body.admin-console.admin-dashboard .dashboard-action-card { display:grid; align-content:start; gap:8px; min-height:150px; padding:19px; border-radius:12px; color:#fff; text-decoration:none; }
body.admin-console.admin-dashboard .dashboard-action-card.orange { background:linear-gradient(135deg,#f59b05,#e98200); } body.admin-console.admin-dashboard .dashboard-action-card.green { background:linear-gradient(135deg,#1fc15c,#13ac4e); } body.admin-console.admin-dashboard .dashboard-action-card.blue { background:linear-gradient(135deg,#367cf0,#2b68dd); }
body.admin-console.admin-dashboard .dashboard-action-card strong { font-size:18px; } body.admin-console.admin-dashboard .dashboard-action-card span { color:rgba(255,255,255,.82); font-size:13px; } body.admin-console.admin-dashboard .dashboard-action-card b { align-self:end; margin-top:auto; font-size:13px; }
body.admin-console.admin-dashboard .dashboard-quick-links { display:grid; overflow:hidden; border:1px solid #dfe5ef; border-radius:12px; background:#fff; }
body.admin-console.admin-dashboard .dashboard-quick-links strong, body.admin-console.admin-dashboard .dashboard-quick-links a { padding:12px 15px; border-bottom:1px solid #e5eaf2; color:#34405a; font-size:13px; text-decoration:none; } body.admin-console.admin-dashboard .dashboard-quick-links strong { color:#26324a; font-size:14px; } body.admin-console.admin-dashboard .dashboard-quick-links a:last-child { border-bottom:0; }
body.admin-console.admin-dashboard .dashboard-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
body.admin-console.admin-dashboard .dashboard-stat-grid article { min-height:105px; padding:17px 18px; border:1px solid #dfe5ef; border-radius:12px; background:#f8faff; } body.admin-console.admin-dashboard .dashboard-stat-grid span { display:flex; justify-content:space-between; color:#68758c; font-size:13px; } body.admin-console.admin-dashboard .dashboard-stat-grid small { padding:4px 7px; border-radius:99px; color:#68758c; background:#e9edfb; font-size:11px; } body.admin-console.admin-dashboard .dashboard-stat-grid strong { display:block; margin-top:15px; color:#26324a; font-size:29px; }
body.admin-console.admin-dashboard .dashboard-chart-card { margin-top:18px; padding:20px 24px 15px; } body.admin-console.admin-dashboard .dashboard-chart-head { color:#26324a; } body.admin-console.admin-dashboard .dashboard-chart-head span { color:#68758c; } body.admin-console.admin-dashboard .dashboard-chart-wrap { min-height:250px; } body.admin-console.admin-dashboard .dashboard-chart-wrap canvas { height:250px; }
@media (max-width:900px) { body.admin-console.admin-dashboard .dashboard-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } body.admin-console.admin-dashboard .dashboard-quick-links { grid-column:1/-1; grid-template-columns:repeat(4,1fr); } body.admin-console.admin-dashboard .dashboard-quick-links strong, body.admin-console.admin-dashboard .dashboard-quick-links a { border-bottom:0; border-right:1px solid #e5eaf2; } body.admin-console.admin-dashboard .dashboard-quick-links a:last-child { border-right:0; } }
@media (max-width:720px) { body.admin-console.admin-dashboard .shell { width:min(100% - 20px,1600px); padding-top:18px; } body.admin-console.admin-dashboard header { display:block; } body.admin-console.admin-dashboard .dashboard-header-meta { margin-top:12px; flex-wrap:wrap; } body.admin-console.admin-dashboard .dashboard-subnav { overflow-x:auto; } body.admin-console.admin-dashboard .dashboard-subnav .admin-subtab { flex:0 0 120px; } body.admin-console.admin-dashboard .dashboard-action-grid, body.admin-console.admin-dashboard .dashboard-stat-grid { grid-template-columns:1fr; } body.admin-console.admin-dashboard .dashboard-quick-links { grid-column:auto; grid-template-columns:1fr 1fr; } body.admin-console.admin-dashboard .dashboard-quick-links strong, body.admin-console.admin-dashboard .dashboard-quick-links a { border-right:1px solid #e5eaf2; border-bottom:1px solid #e5eaf2; } }

/* Dashboard preview inspired by the supplied dark admin console reference. */
.admin-dashboard { color: #e7edf7; background: #0d1219; }
.admin-dashboard.admin-auth-pending > * { visibility: hidden; }
.admin-dashboard.admin-auth-pending::before { content: '正在验证管理员身份…'; position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; color: #8d9bb0; background: #0d1219; visibility: visible; }
.dashboard-app { display: grid; grid-template-columns: 266px minmax(0, 1fr); min-height: 100vh; }
.dashboard-sidebar { border-right: 1px solid #2b3a4f; background: #182332; }
.dashboard-brand { height: 102px; padding: 27px 28px 16px; border-bottom: 1px solid #2b3a4f; }.dashboard-brand strong,.dashboard-brand span { display:block; }.dashboard-brand strong { color:#f1f5fb; font-size:18px; }.dashboard-brand span { margin-top:7px; color:#8da0b8; font-size:12px; }
.dashboard-side-nav { display:grid; gap:4px; padding:12px 10px; }.dashboard-side-nav a,.dashboard-nav-group { color:#b7c5d7; text-decoration:none; font-size:14px; }.dashboard-side-nav > a { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:8px; }.dashboard-side-nav > a:hover,.dashboard-side-nav > a.active { color:#fff; background:#24436f; }.dashboard-side-nav a span,.dashboard-nav-group > span { width:18px; text-align:center; }.dashboard-nav-group { display:grid; grid-template-columns:18px 1fr; column-gap:12px; align-items:center; padding:10px 16px 5px; }.dashboard-nav-group b { font-size:14px; font-weight:500; }.dashboard-nav-group a { grid-column:2; padding:8px 0; color:#91a5bf; }.dashboard-nav-group a:hover { color:#fff; }.dashboard-nav-group em { float:right; min-width:19px; border-radius:99px; color:#fff; background:#ef5454; font-size:11px; font-style:normal; text-align:center; }
.dashboard-main { min-width:0; background:#0e141c; }.dashboard-topbar { display:flex; align-items:stretch; height:60px; border-bottom:1px solid #2b3a4f; background:#121a24; }.dashboard-tabs { display:flex; min-width:0; overflow:hidden; }.dashboard-tab { display:flex; align-items:center; gap:13px; padding:0 23px; border-right:1px solid #2b3a4f; color:#8ea0b7; text-decoration:none; font-size:13px; white-space:nowrap; }.dashboard-tab.active { color:#65a2ff; background:#1a2636; box-shadow:inset 0 -2px #3885f6; }.dashboard-tab b { color:#7c8ea5; font-size:15px; font-weight:400; }.dashboard-clock { margin-left:auto; align-self:center; padding:0 24px; color:#8293aa; font-size:12px; white-space:nowrap; }.dashboard-titlebar { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; border-bottom:1px solid #2b3a4f; }.dashboard-titlebar h1 { color:#edf3fb; font-size:21px; letter-spacing:0; }.dashboard-user-tools { display:flex; align-items:center; gap:14px; color:#8494a9; font-size:12px; }.dashboard-user-tools button { padding:6px 10px; border:1px solid #3b4d66; border-radius:6px; color:#dbe5f3; background:#1b2a3e; font:inherit; cursor:pointer; }.dashboard-user-tools button:hover { background:#27415f; }.dashboard-content { padding:27px 28px 54px; }.dashboard-section-label { margin-bottom:12px; color:#f0f4fb; font-size:14px; font-weight:700; }.dashboard-hero-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 220px; gap:14px; }.dashboard-action-card { display:flex; gap:14px; min-height:255px; padding:19px 17px; border-radius:10px; color:#fff; }.dashboard-action-card.orange { background:linear-gradient(135deg,#f59b05,#e98200); }.dashboard-action-card.green { background:linear-gradient(135deg,#1fc15c,#13ac4e); }.dashboard-action-card.blue { background:linear-gradient(135deg,#367cf0,#2b68dd); }.dashboard-action-icon { display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:11px; color:#fff; background:rgba(0,0,0,.15); font-size:25px; }.dashboard-action-card h2 { margin:3px 0 6px; font-size:16px; }.dashboard-action-card p { margin:0 0 12px; color:rgba(255,255,255,.82); font-size:12px; }.dashboard-action-card a { display:inline-block; padding:7px 14px; border-radius:8px; color:#26313f; background:#fff; text-decoration:none; font-size:12px; font-weight:700; }.dashboard-quick-links { display:grid; overflow:hidden; border:1px solid #34445c; border-radius:10px; background:#182332; }.dashboard-quick-links strong,.dashboard-quick-links a { padding:15px 18px; border-bottom:1px solid #34445c; color:#ecf2fb; font-size:13px; text-decoration:none; }.dashboard-quick-links strong { font-size:14px; }.dashboard-quick-links a:last-child { border-bottom:0; }.dashboard-quick-links a:hover { background:#22334a; }.dashboard-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:21px; }.dashboard-stat-grid article { min-height:109px; padding:20px 18px; border:1px solid #304159; border-radius:10px; background:#192536; }.dashboard-stat-grid span { display:flex; justify-content:space-between; color:#9aabc0; font-size:13px; }.dashboard-stat-grid small { padding:4px 7px; border-radius:99px; color:#8ea2bd; background:#233550; font-size:11px; }.dashboard-stat-grid strong { display:block; margin-top:17px; color:#f0f5fb; font-size:29px; }.dashboard-chart-card { margin-top:21px; padding:17px 18px 13px; border:1px solid #304159; border-radius:10px; background:#192536; }.dashboard-chart-head { display:flex; justify-content:space-between; align-items:center; color:#eff4fb; font-size:14px; }.dashboard-chart-head span { color:#8da0b8; font-size:12px; }.dashboard-chart-head i { display:inline-block; width:9px; height:9px; margin-right:6px; border-radius:2px; background:#3d8cff; }.dashboard-chart-wrap { position:relative; min-height:270px; margin-top:9px; }.dashboard-chart-wrap canvas { display:block; width:100%; height:270px; }.dashboard-chart-empty { position:absolute; inset:0; display:grid; place-items:center; color:#7e8da3; font-size:13px; }
.dashboard-topbar { position:relative; padding-right:260px; }.admin-dashboard .admin-auth-bar { position:absolute; top:17px; right:20px; z-index:2; margin:0; padding:0; color:#8ea0b7; }.admin-dashboard .admin-auth-bar button { border-color:#3c4d67; color:#dbe5f3; background:#1b2a3e; }
.admin-dashboard .dashboard-topbar > .admin-auth-bar { display:none; }
@media (max-width:1100px) { .dashboard-app { grid-template-columns:220px minmax(0,1fr); }.dashboard-hero-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.dashboard-quick-links { grid-column:1/-1; grid-template-columns:repeat(4,1fr); }.dashboard-quick-links strong,.dashboard-quick-links a { border-bottom:0; border-right:1px solid #34445c; }.dashboard-quick-links a:last-child { border-right:0; } }
@media (max-width:760px) { .dashboard-app { display:block; }.dashboard-sidebar { display:none; }.dashboard-topbar { overflow:hidden; }.dashboard-tabs { overflow:auto; }.dashboard-tab { padding:0 15px; }.dashboard-clock { display:none; }.dashboard-titlebar,.dashboard-content { padding-left:16px; padding-right:16px; }.dashboard-hero-grid,.dashboard-stat-grid { grid-template-columns:1fr; }.dashboard-quick-links { grid-template-columns:1fr 1fr; }.dashboard-quick-links strong,.dashboard-quick-links a { border-right:1px solid #34445c; border-bottom:1px solid #34445c; }.dashboard-quick-links a:nth-last-child(-n+2) { border-bottom:0; } }


.support-ticket-column { min-width: 0; }
.list-sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid #e1e7f0; border-radius: 11px; background: #f8f9fd; scroll-margin-top: 86px; }
.list-sort-bar label { color: #536078; font-size: 13px; white-space: nowrap; }
.list-sort-bar select { min-width: 205px; min-height: 38px; padding: 8px 10px; border: 1px solid #d5dce8; border-radius: 8px; color: #26324a; background: #fff; font: inherit; font-size: 13px; }
.list-sort-hint { flex: 1 1 250px; color: #778399; font-size: 12px; line-height: 1.6; }
.user-expiry-summary { display: grid; justify-items: end; gap: 6px; }.user-expiry-summary small { color: #758096; font-size: 12px; }.user-expiry-summary .expiry-badge { margin-top: 0; }
.user-expiry-warning { border-color: #eed399; }.user-expiry-expired { border-color: #efbdc5; }
@media (max-width: 650px) { .list-sort-bar select { flex: 1; min-width: 0; }.list-sort-hint { flex-basis: 100%; }.user-expiry-summary { justify-items: start; } }

.pagination-top .pagination-bar { margin: 0 0 14px; }
.pagination-jump { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pagination-jump input { width: 64px; padding: 5px 7px; border: 1px solid #d5dce8; border-radius: 7px; }
.pagination-actions { flex-wrap: wrap; }

/* Shared admin workspace: navigation, search, and list density. */
.admin-console .shell { padding-top: 28px; }
.admin-console header { position: relative; align-items: center; min-height: 66px; margin-bottom: 20px; padding-right: 220px; }
.admin-console .admin-auth-bar { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
.admin-console h1 { font-size: clamp(26px, 3vw, 34px); }
.admin-console .admin-subnav { position: sticky; top: 10px; z-index: 30; margin: 0 0 22px; padding: 6px; background: rgba(255,255,255,.96); box-shadow: 0 6px 18px rgba(52,70,110,.06); }
.admin-console .admin-subtab { flex: 0 0 136px; min-height: 46px; padding: 12px 14px; font-size: 14px; transition: background .15s, color .15s; }
.admin-console button:active:not(:disabled) { transform: none; }
.admin-console .list-toolbar-count { min-width: 120px; }
.admin-console #userRows > .empty-state { min-height: 320px; }
.admin-console .admin-subtab:hover { background: #edf0ff; color: #4253cc; }
.admin-console .admin-subtab.active:hover { background: #5968e8; color: #fff; }
.admin-console .section-title { margin-bottom: 18px; }
.admin-console .list-toolbar { grid-template-columns: minmax(220px, 1fr) 160px auto auto auto; align-items: center; }
.admin-console .list-toolbar input, .admin-console .list-toolbar select { height: 42px; }
.admin-console .list-toolbar button { min-height: 42px; padding: 10px 15px; }
.admin-console .list-toolbar-count { font-weight: 650; }
.admin-console .support-list-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-console .support-list-toolbar input, .admin-console .support-list-toolbar .list-toolbar-count { grid-column: 1 / -1; text-align: left; }
.admin-console .user-search-panel label { display: block; font-size: 0; }
.admin-console .user-search-panel label input { font-size: 14px; }
.admin-console .user-search-panel .search-count { min-width: 0; }
.admin-console .payment-order-filters { grid-template-columns: minmax(240px, 1fr) 140px auto auto auto; }
.admin-console .payment-order-filters .list-toolbar-count { grid-column: 1 / -1; text-align: left; }
.admin-console .pagination-bar { justify-content: flex-end; gap: 9px; padding: 10px 12px; background: #fafbfe; }
.admin-console .pagination-total { margin-right: auto; }
.admin-console .pagination-top { scroll-margin-top: 86px; }
.admin-console #userSearchEmpty { padding: 0; }
.admin-console .table-wrap { border: 1px solid #e6ebf3; border-radius: 12px; }
.admin-console th { background: #f8f9fd; color: #61708b; font-weight: 650; }
.admin-console tbody tr:hover td { background: #f9faff; }
.admin-console tbody tr:last-child td { border-bottom: 0; }
.admin-console table code { color: #455575; font-size: 12px; }
.admin-console .status-pill.pending { color: #947009; background: #fff3d1; }
.admin-console .payment-order-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(160px, 1.3fr); gap: 12px; padding: 0; background: transparent; }
.order-stat { display: grid; gap: 9px; padding: 16px 18px; border: 1px solid #e3e8f2; border-radius: 12px; background: #f8f9fd; }
.order-stat span { color: #7c879c; font-size: 12px; }
.order-stat strong { color: #26324a; font-size: 24px; letter-spacing: -.02em; }
.order-stat.pending strong { color: #ac7c12; }
.order-stat.paid strong { color: #198353; }
.order-stat.revenue { border-color: #dce1ff; background: #f1f3ff; }
.order-stat.revenue strong { color: #4b5cdd; }
.admin-console .list-toolbar [hidden], .admin-console .user-card[hidden], .admin-console .account-edit-row[hidden] { display: none; }
.user-plan-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 12px; padding: 9px 10px; border: 1px solid #e3e7fb; border-radius: 9px; background: #f7f8ff; font-size: 12px; line-height: 1.5; }
.user-plan-summary span { color: #77839a; white-space: nowrap; }
.user-plan-summary strong { color: #3649c8; overflow-wrap: anywhere; }
.user-plan-summary small { flex-basis: 100%; color: #8792a5; font-size: 11px; }
.user-plan-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0 0 10px; }
.user-plan-control select { min-width: 0; padding: 6px 7px; font-size: 12px; }
@media (max-width: 960px) {
  .admin-console .list-toolbar, .admin-console .payment-order-filters { grid-template-columns: minmax(0, 1fr) 150px auto auto; }
  .admin-console .list-toolbar-count { grid-column: 1 / -1; text-align: left; }
  .admin-console .payment-order-filters #refreshPaymentOrdersBtn { grid-column: 1 / -1; justify-self: end; }
  .admin-console .support-list-toolbar { grid-template-columns: 1fr 1fr; }
  .admin-console .support-list-toolbar input { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .admin-console .shell { padding-top: 18px; }
  .admin-console header { align-items: flex-start; min-height: 0; padding-right: 0; }
  .admin-console .admin-auth-bar { position: static; flex-wrap: wrap; margin: 12px 0 0; padding: 0; }
  .admin-console .admin-subnav { top: 6px; margin-bottom: 16px; }
  .admin-console .card { padding: 16px; }
  .admin-console .list-toolbar, .admin-console .payment-order-filters { grid-template-columns: 1fr 1fr; }
  .admin-console .list-toolbar > input, .admin-console .list-toolbar > label { grid-column: 1 / -1; }
  .admin-console .payment-order-summary { grid-template-columns: 1fr 1fr; }
  .order-stat.revenue { grid-column: 1 / -1; }
  .admin-console .pagination-pages { min-width: 72px; }
  .admin-console .pagination-total { width: 100%; }
}

/* ===== User app shell v3 (light, task-first) ===== */
body.user-app {
  color: #111827 !important;
  background: #f5f7fb !important;
  background-image: none !important;
}
body.user-app > .user-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex !important; align-items: center; gap: 14px;
  min-height: 56px; margin: 0 !important; padding: 0 20px !important;
  width: 100% !important; box-sizing: border-box;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

@media (max-width: 760px) {
  body.user-app > .user-topbar { gap: 8px; padding: 8px 12px !important; min-height: 52px; flex-wrap: wrap; }
  .user-brand { min-width: 82px; }
  .user-brand strong { font-size: 14px; }
  .user-topbar-right { gap: 5px; }
  .user-topbar-right .user-health-badge { display: none; }
  .user-topnav { order: 3; flex-basis: 100%; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .user-topnav::-webkit-scrollbar { display: none; }
  .user-topnav-link { flex: 1 0 84px; justify-content: center; min-height: 32px; padding: 0 10px; font-size: 12px; }
  body.user-app .shell { width: min(100% - 20px, 1600px); padding: 18px 0 36px; }
  body.user-app .card { padding: 16px; }
  body.user-app .section-title { gap: 10px; }
  body.user-app .section-title p { font-size: 13px; line-height: 1.55; }
  .user-status-bar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .user-status-cta { width: 100%; text-align: center; }
  .payment-plans { grid-template-columns: 1fr; }
  .payment-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .user-order-head { flex-direction: column; }
  .user-order-actions { justify-content: stretch; flex-direction: column; }
  .user-order-actions button, .user-order-actions a { width: 100%; }
}

@media (max-width: 420px) {
  .user-topbar-right .user-announce-btn span:not(.user-announce-ico), .user-login-link { display: none; }
  .user-announce-btn { padding: 0 9px; }
  .user-account-summary { max-width: 128px; overflow: hidden; }
  .user-account-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.user-brand { display:flex; flex-direction:column; gap:1px; min-width:100px; text-decoration:none; color:inherit; }
.user-brand strong { color:#0f172a !important; font-size:16px; font-weight:750; }
.user-brand span { color:#64748b !important; font-size:11px; }
.user-topnav { display:flex; flex:1; gap:4px; min-width:0; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.user-topnav-link {
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
  border-radius:999px; color:#4b5563 !important; text-decoration:none; font-size:13px; font-weight:650;
}
.user-topnav-link:hover { background:#f3f4f6; color:#111827 !important; }
.user-topnav-link.active { color:#2563eb !important; background:#eff6ff !important; box-shadow: inset 0 -2px 0 #2563eb; border-radius:8px; }
.user-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.user-login-link {
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
  border-radius:8px; background:#2563eb; color:#fff !important; text-decoration:none; font-size:13px; font-weight:700;
}
.user-login-link[hidden] { display:none !important; }
.user-announce-btn {
  position: relative;
  z-index: 1;
}
.user-announce-ico { font-size: 14px; line-height: 1; }
.user-announce-btn.is-open { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.user-announce-btn {
  display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px;
  border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#374151; font-size:13px; cursor:pointer;
}
.user-announce-btn[hidden] { display:none !important; }
.user-announce-btn b { min-width:18px; padding:0 5px; border-radius:999px; background:#2563eb; color:#fff; font-size:11px; }
.user-health-badge { font-size:11px !important; }
.user-account-menu { position:relative; }
.user-account-summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:0 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#111827; font-size:13px;
}
.user-account-summary::-webkit-details-marker { display:none; }
.user-account-summary::after { content:"\25BE"; color:#94a3b8; font-size:10px; }
.user-account-panel {
  position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:160px;
  padding:6px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.12); display:grid; gap:4px;
}
.user-account-panel a, .user-account-panel button {
  display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:8px;
  background:transparent; color:#111827; text-decoration:none; font-size:13px; cursor:pointer;
}
.user-account-panel a:hover, .user-account-panel button:hover { background:#f3f4f6; }
.user-account-menu:not(:has(#profileLink:not([hidden]))) { display:none; }

body.user-app > .shell { width:min(1440px, calc(100% - 64px)) !important; margin:0 auto !important; padding:24px 0 72px !important; }
body.user-app .user-page-head { display:none !important; }
body.user-app .eyebrow, body.user-app .user-page-nav { display:none !important; }

.user-status-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:14px 16px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;
}
.user-status-bar strong { font-size:14px; color:#0f172a; }
.user-status-bar .muted { margin:4px 0 0; font-size:12px; color:#64748b; }
.user-status-cta {
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:8px;
  background:#eff6ff; color:#2563eb; text-decoration:none; font-size:13px; font-weight:700; border:1px solid #dbeafe;
}

.user-home-grid {
  display:grid; grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.15fr); gap:16px; align-items:start;
}
@media (max-width:860px) { .user-home-grid { grid-template-columns:1fr; } }

body.user-app .card {
  background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important; padding:20px !important; margin:0 0 16px !important;
}
body.user-app .section-title .step { background:#eff6ff !important; color:#2563eb !important; border-color:#dbeafe !important; }
body.user-app .primary, body.user-app button.primary { background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; }
body.user-app .primary:hover:not(:disabled), body.user-app button.primary:hover:not(:disabled) { background:#1d4ed8 !important; border-color:#1d4ed8 !important; }

.otp-workbench .otp-code {
  font-size:40px !important; letter-spacing:0.12em; font-weight:800; line-height:1.2; color:#0f172a !important;
  font-variant-numeric: tabular-nums;
}
.otp-workbench .otp-panel { margin:8px 0 16px; }
.otp-workbench .actions { display:flex; flex-wrap:wrap; gap:8px; }
.otp-workbench .actions .primary { min-height:44px; padding:0 20px; font-size:15px; font-weight:700; }

.credentials-fold { margin-top:8px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; overflow:hidden; }
.credentials-fold > summary { cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; color:#334155; background:#fafbfd; }
.credentials-fold > summary::-webkit-details-marker { display:none; }
.credentials-fold > summary::after { content:"展开"; float:right; color:#2563eb; font-weight:650; font-size:13px; }
.credentials-fold[open] > summary::after { content:"收起"; }
.credentials-fold-body { padding:0 16px 16px; }

/* announcement lives in topbar as .user-announce-btn */
body.user-app .announcement-float-btn { display:none !important; }
.announcement-panel {
  position: fixed !important; top: 62px !important; right: 16px !important; left: auto !important;
  width: min(380px, calc(100vw - 24px)) !important; z-index: 55 !important;
  border-radius:12px !important; border:1px solid #e5e7eb !important;
  box-shadow:0 16px 40px rgba(15,23,42,.14) !important;
}
body.user-app .support-float-btn {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 16px !important;
  bottom: 20px !important;
  z-index: 40 !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.25) !important;
}
body.user-app > .user-topbar {
  z-index: 60 !important;
}
body.user-app .support-float-label { font-size:13px; }
body.user-app .support-chat-panel {
  top: auto !important;
  bottom: 76px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 45 !important;
  max-height: min(640px, calc(100vh - 140px)) !important;
}
#adminView .admin-launch { border-style:dashed !important; background:#f8fafc !important; }

.payment-status-banner, .pending-order-hint:not([hidden]) {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:14px 16px; border-radius:12px; border:1px solid #dbeafe; background:#eff6ff; color:#1e3a8a;
}
.pending-order-hint:not([hidden]) { border-color:#fde68a; background:#fffbeb; color:#92400e; }
.payment-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.payment-plan {
  display:grid; gap:8px; text-align:left; padding:16px !important; border:1px solid #e5e7eb !important;
  border-radius:12px !important; background:#fff !important; cursor:pointer;
}
.payment-plan.active { border-color:#2563eb !important; box-shadow:0 0 0 2px rgba(37,99,235,.2) !important; background:#f8fbff !important; }
.payment-plan-name { color:#64748b; font-size:13px; }
.payment-plan strong { font-size:24px; color:#0f172a; }
.payment-help-fold { border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.payment-help-fold > summary { cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; color:#334155; }
.payment-help-fold > summary::-webkit-details-marker { display:none; }
.payment-help-fold-body { padding:0 16px 16px; color:#64748b; font-size:13px; line-height:1.6; }

.orders-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.orders-filter-btn {
  min-height:32px; padding:0 12px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; color:#4b5563; cursor:pointer; font-size:12px;
}
.orders-filter-btn.active { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; font-weight:700; }
.orders-empty-cta { display:inline-flex; margin-top:12px; min-height:36px; padding:0 14px; border-radius:8px; background:#2563eb; color:#fff !important; text-decoration:none; align-items:center; font-weight:700; font-size:13px; }
.user-order { border:1px solid #e5e7eb; border-radius:12px; padding:14px; background:#fff; margin:0 0 10px; }
.user-orders-list[data-filter="pending"] .user-order:not(.pending) { display:none !important; }
.user-orders-list[data-filter="paid"] .user-order:not(.paid) { display:none !important; }
.user-orders-list[data-filter="closed"] .user-order:not(.closed) { display:none !important; }
.profile-form { display:grid; gap:12px; max-width:520px; }

body.user-auth-page { background:#f5f7fb !important; background-image:none !important; }
body.user-auth-page .auth-shell { min-height:100vh; padding:40px 16px; }
body.user-auth-page .auth-card {
  width:min(100%,400px); padding:28px 24px 22px; border:1px solid #e5e7eb !important; border-radius:12px !important;
  background:#fff !important; box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
}
body.user-auth-page .auth-logo { display:inline-block; margin-bottom:10px; color:#2563eb !important; font-size:13px; font-weight:800; letter-spacing:.04em; }
body.user-auth-page .auth-brand .eyebrow { display:none !important; }
body.user-auth-page .auth-brand h1 { margin:0; font-size:22px !important; color:#0f172a !important; }
body.user-auth-page .auth-tab.active { background:#2563eb !important; color:#fff !important; }
body.user-auth-page .primary, body.user-auth-page button.primary { background:#2563eb !important; border-color:#2563eb !important; width:100%; min-height:42px; }
body.user-auth-page .auth-back { color:#2563eb !important; }
@media (max-width:720px) {
  body.user-app > .user-topbar { flex-wrap:wrap; padding-top:10px !important; padding-bottom:10px !important; }
  .user-topnav { order:3; width:100%; }
}

/* User pages: fluid layout for phones, tablets, and desktop screens. */
body.user-app { overflow-x: hidden; }
body.user-app .shell { width: min(1440px, calc(100% - 64px)); }
body.user-app .card, body.user-app .payment-help-fold { min-width: 0; }
body.user-app img, body.user-app video, body.user-app iframe { max-width: 100%; }
body.user-app input, body.user-app select, body.user-app textarea, body.user-app button { max-width: 100%; }
.user-topnav-link { flex: 0 1 auto; }
.user-status-bar, .payment-summary, .user-order-head, .payment-help-card { min-width: 0; }
.user-status-bar > *, .user-order-head > *, .payment-help-card > * { min-width: 0; }
.user-order-head small, .user-order-info, .payment-callback-note, .result { overflow-wrap: anywhere; }
.user-order-actions { flex-wrap: wrap; }
.user-order-actions a, .user-order-actions button { white-space: normal; }

@media (max-width: 900px) {
  body.user-app > .user-topbar { padding-left: 14px !important; padding-right: 14px !important; }
  .user-brand { min-width: 88px; }
  .user-topnav-link { padding-left: 11px; padding-right: 11px; }
  body.user-app .shell { width: min(100% - 32px, 960px); padding-top: 28px; }
  .payment-plan { min-width: 0; }
}

@media (max-width: 600px) {
  body.user-app > .user-topbar { align-items: flex-start; gap: 7px; min-height: 0; }
  .user-brand { flex: 1 1 auto; }
  .user-topbar-right { flex: 0 1 auto; max-width: 68%; }
  .user-topnav { gap: 3px; margin-top: 2px; padding-bottom: 2px; overflow-x: auto; }
  .user-topnav-link { flex: 1 0 78px; min-height: 36px; }
  body.user-app .shell { width: calc(100% - 20px); padding-top: 18px; padding-bottom: 28px; }
  body.user-app .card { padding: 14px; border-radius: 12px; }
  body.user-app .section-title { align-items: flex-start; }
  body.user-app .section-title h2 { font-size: 17px; }
  body.user-app .section-title p { line-height: 1.55; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions > button, .actions > a { width: 100%; }
  .payment-plan strong { font-size: 21px; }
  .payment-help-fold > summary, .payment-help-fold-body { padding-left: 13px; padding-right: 13px; }
  .user-order { padding: 12px; }
  .user-order-info { display: grid; gap: 7px; }
  .profile-form { max-width: none; }
  body.user-auth-page .auth-shell { padding: 20px 12px; }
  body.user-auth-page .auth-card { padding: 22px 16px 18px; }
}

@media (max-width: 380px) {
  .user-brand strong { font-size: 13px; }
  .user-brand span { font-size: 10px; }
  .user-topbar-right .user-health-badge { display: none; }
  .user-topnav-link { flex-basis: 72px; padding-left: 7px; padding-right: 7px; font-size: 12px; }
  body.user-app .shell { width: calc(100% - 14px); }
}

/* Larger, more readable typography for the user-facing pages. */
body.user-app { font-size: 15px; }
body.user-app .user-brand strong { font-size: 17px; }
body.user-app .user-brand span { font-size: 12px; }
body.user-app .user-topnav-link { font-size: 15px; font-weight: 700; }
body.user-app .user-announce-btn,
body.user-app .user-login-link,
body.user-app .user-account-summary { font-size: 14px; }
body.user-app .user-status-bar strong { font-size: 16px; }
body.user-app .user-status-bar .muted,
body.user-app .section-title p,
body.user-app .payment-help-fold-body { font-size: 14px; }
body.user-app .section-title h2 { font-size: 20px; }
body.user-app .step { font-size: 17px; }
body.user-app .payment-plan-name { font-size: 15px; }
body.user-app .payment-plan small,
body.user-app .payment-summary,
body.user-app .orders-filter-btn,
body.user-app .user-order-info { font-size: 14px; }
body.user-app .payment-plan strong { font-size: 26px; }
body.user-app .user-order-head strong { font-size: 18px; }
body.user-app .user-order-head small { font-size: 13px; }
body.user-app .user-order-actions button,
body.user-app .user-order-actions a,
body.user-app .orders-empty-cta,
body.user-app .back-link { font-size: 14px; }
body.user-app .user-account-panel a,
body.user-app .user-account-panel button { font-size: 14px; }

@media (max-width: 700px) {
  body.user-app { font-size: 14px; }
  body.user-app .user-topbar { row-gap: 8px; }
  body.user-app .user-topnav-link { font-size: 14px; }
  body.user-app .user-topbar-right { max-width: 72%; }
  body.user-app .section-title h2 { font-size: 18px; }
  body.user-app .section-title p,
  body.user-app .payment-help-fold-body { font-size: 14px; }
  body.user-app .payment-plan strong { font-size: 24px; }
  body.user-app input, body.user-app select, body.user-app textarea { font-size: 15px; }
}

@media (max-width: 430px) {
  body.user-app .user-brand strong { font-size: 15px; }
  body.user-app .user-brand span { font-size: 11px; }
  body.user-app .user-topnav-link { font-size: 14px; flex-basis: 82px; }
  body.user-app .user-topbar-right { max-width: 66%; }
  body.user-app .user-status-bar { padding: 13px; }
  body.user-app .user-status-bar strong { font-size: 15px; }
  body.user-app .user-order-head strong { font-size: 17px; }
}

/* Final user UI type scale: keep text readable on large displays and phones. */
body.user-app,
body.user-app button,
body.user-app input,
body.user-app select,
body.user-app textarea { font-size: 16px !important; }
body.user-app .user-brand strong { font-size: 19px !important; }
body.user-app .user-brand span { font-size: 13px !important; }
body.user-app .user-topnav-link { font-size: 16px !important; }
body.user-app .user-announce-btn,
body.user-app .user-login-link,
body.user-app .user-account-summary { font-size: 15px !important; }
body.user-app .user-status-bar strong { font-size: 18px !important; }
body.user-app .user-status-bar .muted,
body.user-app .section-title p,
body.user-app .payment-help-fold-body,
body.user-app .payment-plan-name,
body.user-app .payment-plan small,
body.user-app .payment-summary,
body.user-app .orders-filter-btn,
body.user-app .user-order-info { font-size: 16px !important; }
body.user-app .section-title h2 { font-size: 22px !important; }
body.user-app .payment-plan strong { font-size: 28px !important; }
body.user-app .user-order-head strong { font-size: 20px !important; }
body.user-app .user-order-head small { font-size: 14px !important; }
body.user-app .user-order-actions button,
body.user-app .user-order-actions a,
body.user-app .orders-empty-cta,
body.user-app .back-link,
body.user-app .user-account-panel a,
body.user-app .user-account-panel button { font-size: 16px !important; }

@media (max-width: 600px) {
  body.user-app,
  body.user-app button,
  body.user-app input,
  body.user-app select,
  body.user-app textarea { font-size: 15px !important; }
  body.user-app .section-title h2 { font-size: 20px !important; }
  body.user-app .section-title p,
  body.user-app .payment-help-fold-body,
  body.user-app .payment-plan-name,
  body.user-app .payment-plan small,
  body.user-app .payment-summary,
  body.user-app .orders-filter-btn,
  body.user-app .user-order-info { font-size: 15px !important; }
  body.user-app .user-topnav-link { font-size: 15px !important; }
}