:root {
    --theme-page-bg: #F3FAFF;
    --theme-card-bg: #FFFFFF;
    --theme-card-bg-2: #F8FCFF;
    --theme-inner-bg: #FFFFFF;
    --theme-soft-bg: #EAF5FF;
    --theme-text: #111827;
    --theme-blue-text: #064B91;
    --theme-muted-text: #4B647A;
    --theme-border: #B9DCFF;
    --theme-border-soft: #D8ECFF;
    --theme-accent: #007BFF;
    --theme-accent-dark: #005BBF;
    --theme-shadow: rgba(0, 88, 170, 0.12);
}

/* User UI smooth compact layout: bank + account in one row, button below */
body[data-page="user"] .user-lookup-form,
body[data-page="user"] .user-qr-form {
    grid-template-columns: minmax(0, 1.18fr) minmax(220px, .82fr);
    align-items: end;
    gap: 12px;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button,
body[data-page="user"] .user-qr-form > label:nth-of-type(n + 2) {
    grid-column: 1 / -1;
}

body[data-page="user"] .user-card-panel,
body[data-page="user"] .smart-bank-trigger,
body[data-page="user"] .smart-bank-menu,
body[data-page="user"] .clean-form input,
body[data-page="user"] .clean-form textarea,
body[data-page="user"] .copy-button {
    will-change: auto;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

body[data-page="user"] .user-card-panel {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

body[data-page="user"] .smart-bank-list {
    scroll-behavior: smooth;
}

body[data-page="user"] .smart-bank-list button:hover,
body[data-page="user"] .copy-button:hover,
body[data-page="user"] .clean-form > button:hover {
    transform: translateY(-1px);
}

body[data-page="user"] .copy-button,
body[data-page="user"] .copy-button.inline-copy {
    min-width: 48px;
    min-height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: .68rem;
    line-height: 1;
}

body[data-page="user"] .beneficiary-result {
    padding: 14px 16px;
}

body[data-page="user"] .beneficiary-head > div {
    gap: 8px;
}

body[data-page="user"] .beneficiary-head strong {
    overflow-wrap: anywhere;
}

@media (max-width: 680px) {
    body[data-page="user"] .user-lookup-form,
    body[data-page="user"] .user-qr-form {
        grid-template-columns: 1fr;
    }

    body[data-page="user"] .user-lookup-form > button,
    body[data-page="user"] .user-qr-form > button,
    body[data-page="user"] .user-qr-form > label {
        grid-column: 1;
    }
}

/* Chốt giao diện tiếng Việt: ô ngân hàng, STK và nút bấm thẳng hàng, mượt, không lệch */
body[data-page="user"] .user-lookup-form,
body[data-page="user"] .user-qr-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body[data-page="user"] .lookup-inline-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
}

body[data-page="user"] .lookup-inline-row > .smart-bank,
body[data-page="user"] .lookup-inline-row > label {
    width: 100% !important;
    min-width: 0 !important;
}

body[data-page="user"] .lookup-inline-row .smart-bank-trigger,
body[data-page="user"] .lookup-inline-row input,
body[data-page="user"] .user-qr-form .smart-bank-trigger,
body[data-page="user"] .user-qr-form input,
body[data-page="user"] .user-qr-form textarea {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
}

body[data-page="user"] .user-qr-form textarea {
    height: 86px !important;
    resize: vertical;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
}

body[data-page="user"] .smart-bank-trigger {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    padding-right: 42px !important;
}

body[data-page="user"] .smart-bank-trigger img,
body[data-page="user"] .smart-bank-list img,
body[data-page="admin"] .admin-bank-logo,
body[data-page="admin"] .bank-logo {
    object-fit: contain !important;
    background: #fff !important;
}

body[data-page="user"] .smart-bank-list {
    max-height: 320px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

body[data-page="user"] .lookup-result-card.compact-result {
    gap: 10px !important;
}

body[data-page="user"] .lookup-result-row.compact-copy-row,
body[data-page="user"] .lookup-result-row.compact-copy-row:has(.lookup-bank-logo) {
    grid-template-columns: 32px 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
}

body[data-page="user"] .lookup-result-row.compact-copy-row:not(:has(.lookup-bank-logo)) {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
}

body[data-page="user"] .lookup-bank-logo {
    width: 50px !important;
    height: 32px !important;
}

body[data-page="user"] .copy-button,
body[data-page="user"] .copy-button.inline-copy {
    width: auto !important;
    min-width: 50px !important;
    min-height: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body[data-page="user"] .copy-button::first-letter {
    text-transform: uppercase;
}

@media (max-width: 760px) {
    body[data-page="user"] .lookup-inline-row {
        grid-template-columns: 1fr !important;
    }

    body[data-page="user"] .lookup-result-row.compact-copy-row,
    body[data-page="user"] .lookup-result-row.compact-copy-row:has(.lookup-bank-logo),
    body[data-page="user"] .lookup-result-row.compact-copy-row:not(:has(.lookup-bank-logo)) {
        grid-template-columns: 30px minmax(0, 1fr) auto !important;
    }

    body[data-page="user"] .lookup-bank-logo {
        grid-column: 2 !important;
    }
}

/* Web User: hien thi ten ngan hang dai gon hon, chi rut gon phan cuoi */
body[data-page="user"] .smart-bank-trigger .selected-bank-text,
body[data-page="user"] .smart-bank-list .selected-bank-text {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Keep the new one-line picker readable for long, explicit Vikki labels. */
body[data-page="user"] .smart-bank-trigger .selected-bank-full {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

body[data-page="user"] .reference-result-card .reference-bank-name {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text b,
body[data-page="user"] .smart-bank-trigger .selected-bank-text small,
body[data-page="user"] .smart-bank-list .selected-bank-text b,
body[data-page="user"] .smart-bank-list .selected-bank-text small {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

@media (min-width: 761px) {
    body[data-page="user"] .user-lookup-form .lookup-inline-row {
        grid-template-columns: minmax(430px, 1fr) minmax(180px, 210px) !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger {
        grid-template-columns: 42px minmax(0, 1fr) 18px !important;
        padding-left: 8px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger .selected-bank-text {
        transform: translateX(-3px) !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-menu {
        width: min(520px, calc(100vw - 40px)) !important;
    }
}

/* Absolute final compact override for the Check Bank card. */
body[data-page="user"] .user-card-panel:has(#checkForm) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 20px !important;
}

body[data-page="user"] .user-card-panel:has(#checkForm) .check-bank-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

body[data-page="user"] #checkForm,
body[data-page="user"] #checkForm .lookup-reference-layout,
body[data-page="user"] #checkForm .user-lookup-form {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
}

body[data-page="user"] #checkForm .lookup-inline-row {
    gap: 8px !important;
    margin: 0 !important;
}

body[data-page="user"] #checkForm .check-submit-button {
    margin-top: 10px !important;
}

body[data-page="user"] #checkResult {
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

body[data-page="user"] #checkResult:empty {
    display: none !important;
    margin: 0 !important;
}

@media (max-width: 620px) {
    body[data-page="user"] #checkForm .lookup-inline-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* V7.1: chuyển đổi đúng giữa giao diện gốc và giao diện mới. */
body[data-page="user"].check-ui-old .user-card-panel:has(#checkForm) .check-bank-title {
    margin: 0 0 16px !important;
    text-align: left !important;
}

body[data-page="user"].check-ui-old #checkForm .lookup-inline-row {
    grid-template-columns: minmax(0, 2fr) minmax(180px, .9fr) !important;
    gap: 28px !important;
    align-items: end !important;
}

body[data-page="user"].check-ui-old #checkForm .smart-bank > label,
body[data-page="user"].check-ui-old #checkForm .check-account-field > label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

body[data-page="user"].check-ui-old #checkForm .smart-bank-trigger,
body[data-page="user"].check-ui-old #checkForm #checkAccount {
    min-height: 54px !important;
    height: 54px !important;
}

body[data-page="user"].check-ui-old #checkForm #checkButton {
    margin-top: 14px !important;
}

body[data-page="user"].check-ui-old #checkResult:empty {
    display: block !important;
    min-height: 48px !important;
    margin-top: 16px !important;
}

body[data-page="user"].check-ui-old #checkResult .legacy-result-card {
    padding: 18px !important;
}

body[data-page="user"].check-ui-old #checkResult .legacy-result-card p {
    margin: 7px 0 !important;
    color: #064b91 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body[data-page="user"].check-ui-old #checkResult .legacy-result-card p:first-child b {
    font-size: 28px !important;
    font-weight: 950 !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    height: auto !important;
}

body[data-page="user"].check-ui-new #checkForm .selected-bank-full {
    display: block !important;
    width: 100% !important;
    color: #111827 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card > .bank-logo-img {
    width: 150px !important;
    height: 82px !important;
    max-height: 82px !important;
    max-width: 58% !important;
    margin-bottom: 5px !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card p {
    margin: 4px 0 !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card p:nth-of-type(2) b,
body[data-page="user"].check-ui-new #checkResult .reference-result-card p:nth-of-type(3) b {
    color: #064b91 !important;
    font-weight: 950 !important;
}

body.dark-mode[data-page="user"].check-ui-new #checkForm .selected-bank-full,
body.dark-mode[data-page="user"].check-ui-old #checkForm .smart-bank > label,
body.dark-mode[data-page="user"].check-ui-old #checkForm .check-account-field > label {
    color: #f8fbff !important;
}

@media (max-width: 620px) {
    body[data-page="user"].check-ui-old #checkForm .lookup-inline-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
}

/* Check Bank compact layout: this final block must stay at EOF so legacy rules cannot add blank space. */
body[data-page="user"] .user-card-panel:has(#checkForm) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 20px !important;
}

body[data-page="user"] .user-card-panel:has(#checkForm) .check-bank-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

body[data-page="user"] #checkForm,
body[data-page="user"] #checkForm .lookup-reference-layout,
body[data-page="user"] #checkForm .user-lookup-form {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
}

body[data-page="user"] #checkForm .lookup-inline-row {
    gap: 8px !important;
    margin: 0 !important;
}

body[data-page="user"] #checkForm .check-submit-button {
    margin-top: 10px !important;
}

body[data-page="user"] #checkResult {
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

body[data-page="user"] #checkResult:empty {
    display: none !important;
    margin: 0 !important;
}

@media (max-width: 620px) {
    body[data-page="user"] #checkForm .lookup-inline-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Absolute final Check Bank spacing override. Keep this block at EOF. */
body[data-page="user"] .user-card-panel:has(#checkForm) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 20px !important;
}

body[data-page="user"] .user-card-panel:has(#checkForm) .check-bank-title {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

body[data-page="user"] #checkForm,
body[data-page="user"] #checkForm .lookup-reference-layout {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
}

body[data-page="user"] #checkForm .lookup-reference-layout {
    gap: 8px !important;
}

body[data-page="user"] #checkForm #checkButton {
    margin: 10px 0 0 !important;
}

body[data-page="user"] #checkResult {
    min-height: 0 !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

body[data-page="user"] #checkResult:empty {
    display: none !important;
    margin: 0 !important;
}

@media (max-width: 620px) {
    body[data-page="user"] #checkForm .lookup-reference-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Final bank selector: logo, code and bank name stay on one horizontal row. */
body[data-page="user"] .smart-bank-trigger {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-logo {
    flex: 0 0 auto !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    transform: none !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text b {
    display: block !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text small {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="user"] .smart-bank-trigger::after {
    flex: 0 0 auto !important;
    margin-left: 7px !important;
}

/* Reference-style Check Bank UI: visible preview, provider call only on submit. */
body[data-page="user"] .user-lookup-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

body[data-page="user"] .user-lookup-form .lookup-reference-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
}

body[data-page="user"] .user-lookup-form .lookup-reference-layout > .smart-bank,
body[data-page="user"] .user-lookup-form .lookup-reference-layout > label,
body[data-page="user"] .user-lookup-form > button {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
}

body[data-page="user"] .user-lookup-form #checkButton {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: linear-gradient(90deg, #129de0, #2563eb) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

body[data-page="user"] .user-lookup-form #checkButton:hover {
    background: linear-gradient(90deg, #078bc9, #1d4ed8) !important;
}

body[data-page="user"] .result-panel:empty {
    display: none !important;
}

body[data-page="user"] .reference-result-card {
    display: grid !important;
    justify-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 24px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12) !important;
    text-align: center !important;
}

body[data-page="user"] .reference-bank-logo {
    display: block !important;
    width: auto !important;
    max-width: min(150px, 55%) !important;
    height: 52px !important;
    object-fit: contain !important;
}

body[data-page="user"] .reference-result-card p {
    max-width: 100% !important;
    margin: 0 !important;
    color: #172033 !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
}

body[data-page="user"] .reference-bank-name {
    font-size: 1.02rem !important;
}

body[data-page="user"] .reference-copy {
    display: inline !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #1557e8 !important;
    font: inherit !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

body[data-page="user"] .reference-status {
    color: #64748b !important;
    font-weight: 800 !important;
}

body.dark-mode[data-page="user"] .reference-result-card {
    background: #111c2f !important;
}

body.dark-mode[data-page="user"] .reference-result-card p {
    color: #e2e8f0 !important;
}

/* Compact Check Bank card requested for the current UI. */
body[data-page="user"] .check-bank-title {
    width: 100% !important;
    margin: 0 0 14px !important;
    text-align: center !important;
    font-size: clamp(1.05rem, 3.8vw, 1.35rem) !important;
    line-height: 1.25 !important;
}

body[data-page="user"] .user-lookup-form,
body[data-page="user"] .user-lookup-form .lookup-reference-layout {
    gap: 8px !important;
}

body[data-page="user"] .user-lookup-form .smart-bank-trigger,
body[data-page="user"] .user-lookup-form .check-account-field,
body[data-page="user"] .user-lookup-form .check-account-field input {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
}

body[data-page="user"] .user-lookup-form .smart-bank-trigger,
body[data-page="user"] .user-lookup-form .check-account-field input {
    border: 1px solid #bfd5f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

body[data-page="user"] .user-lookup-form .check-account-field input {
    padding: 0 14px !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
}

body[data-page="user"] .user-lookup-form #checkButton {
    min-height: 52px !important;
    margin-top: 2px !important;
    border-radius: 14px !important;
}

body[data-page="user"] .user-lookup-form + .result-panel {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 !important;
}

body[data-page="user"] .user-lookup-form + .result-panel .reference-result-card {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #d8e5f3 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

body[data-page="user"] .reference-result-card .bank-logo-img,
body[data-page="user"] .reference-result-card .reference-bank-logo {
    display: block !important;
    width: auto !important;
    max-width: min(170px, 58%) !important;
    height: 54px !important;
    object-fit: contain !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text,
body[data-page="user"] .smart-bank-list .selected-bank-text {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text b,
body[data-page="user"] .smart-bank-trigger .selected-bank-text small,
body[data-page="user"] .smart-bank-list .selected-bank-text b,
body[data-page="user"] .smart-bank-list .selected-bank-text small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Final readability polish: light mode chu den ro, dark mode chu trang ro */
body[data-page="admin"]:not(.dark):not(.qtv-dark),
body[data-page="user"]:not(.dark-mode) {
    color: #0f172a;
}

body[data-page="admin"]:not(.dark):not(.qtv-dark) .qtv-table td,
body[data-page="admin"]:not(.dark):not(.qtv-dark) .panel-card,
body[data-page="admin"]:not(.dark):not(.qtv-dark) .qtv-stat-card span,
body[data-page="user"]:not(.dark-mode) .user-card-panel,
body[data-page="user"]:not(.dark-mode) .clean-form label,
body[data-page="user"]:not(.dark-mode) .smart-bank-trigger,
body[data-page="user"]:not(.dark-mode) .result-panel {
    color: #0f172a;
}

body.dark[data-page="admin"],
body.qtv-dark[data-page="admin"],
body.dark-mode[data-page="user"] {
    color: #f8fafc !important;
}

body.dark[data-page="admin"] .qtv-header h1,
body.dark[data-page="admin"] .qtv-header p,
body.dark[data-page="admin"] .qtv-page-head h2,
body.dark[data-page="admin"] .qtv-page-head p,
body.dark[data-page="admin"] .panel-card,
body.dark[data-page="admin"] .panel-card h2,
body.dark[data-page="admin"] .panel-title h2,
body.dark[data-page="admin"] .qtv-table td,
body.dark[data-page="admin"] .qtv-table th,
body.dark[data-page="admin"] .qtv-activity-list,
body.dark[data-page="admin"] .qtv-activity-list b,
body.dark[data-page="admin"] .qtv-stat-card strong,
body.dark[data-page="admin"] .qtv-stat-card span,
body.qtv-dark[data-page="admin"] .qtv-header h1,
body.qtv-dark[data-page="admin"] .qtv-header p,
body.qtv-dark[data-page="admin"] .qtv-page-head h2,
body.qtv-dark[data-page="admin"] .qtv-page-head p,
body.qtv-dark[data-page="admin"] .panel-card,
body.qtv-dark[data-page="admin"] .panel-card h2,
body.qtv-dark[data-page="admin"] .panel-title h2,
body.qtv-dark[data-page="admin"] .qtv-table td,
body.qtv-dark[data-page="admin"] .qtv-table th,
body.qtv-dark[data-page="admin"] .qtv-activity-list,
body.qtv-dark[data-page="admin"] .qtv-activity-list b,
body.qtv-dark[data-page="admin"] .qtv-stat-card strong,
body.qtv-dark[data-page="admin"] .qtv-stat-card span,
body.dark-mode[data-page="user"] .user-card-panel,
body.dark-mode[data-page="user"] .user-card-panel h2,
body.dark-mode[data-page="user"] .clean-form label,
body.dark-mode[data-page="user"] .smart-bank-trigger,
body.dark-mode[data-page="user"] .smart-bank-trigger b,
body.dark-mode[data-page="user"] .smart-bank-trigger small,
body.dark-mode[data-page="user"] .result-panel,
body.dark-mode[data-page="user"] .result-panel h2 {
    color: #f8fafc !important;
}

body.dark[data-page="admin"] .qtv-table th,
body.qtv-dark[data-page="admin"] .qtv-table th {
    background: #111c31 !important;
}

/* OTP: QTV cấu hình, Web User lấy mã 30 giây */
.otp-user-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.otp-user-head h2 {
    margin-bottom: 4px;
}

.otp-user-head button,
.otp-user-row button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    padding: 0 14px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #1aa8f2, #2563eb);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .16);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}

.otp-user-head button:hover,
.otp-user-row button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(37, 99, 235, .22);
}

.otp-user-list {
    display: grid;
    gap: 10px;
}

.otp-user-search {
    width: 100%;
    height: 44px;
    margin: 0 0 12px;
    border: 1px solid #bdd8f7;
    border-radius: 12px;
    padding: 0 14px;
    color: #0f2e57;
    background: #fff;
    font-weight: 800;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.otp-user-search:focus {
    border-color: #2b82ff;
    box-shadow: 0 0 0 4px rgba(43, 130, 255, .12);
}

.otp-user-row {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 112px 76px 46px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #d8e8fa;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f8fbff);
}

.otp-user-name b,
.otp-user-name small {
    display: block;
}

.otp-user-name b {
    color: #0F4C8A;
    text-transform: uppercase;
    font-size: .92rem;
}

.otp-user-name small {
    color: #71819b;
    font-size: .82rem;
}

.otp-user-code {
    width: 100%;
    height: 36px;
    border: 1px solid #bcd8f8;
    border-radius: 10px;
    background: #eef7ff;
    color: #0b4a8b;
    text-align: center;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 1rem;
}

.otp-user-time {
    min-width: 46px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #0b4a8b;
    background: #eaf5ff;
    font-weight: 900;
}

.qtv-mini-copy {
    width: auto;
    min-width: 72px;
    height: 30px;
    border: 1px solid #b8d8fb;
    border-radius: 9px;
    padding: 0 12px;
    color: #07539b;
    background: #eef8ff;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.qtv-mini-copy:hover {
    background: #dff1ff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .14);
}

.qtv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qtv-form-grid .span-2 {
    grid-column: 1 / -1;
}

.qtv-form textarea {
    min-height: 88px;
    resize: vertical;
}

.qtv-checkline {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

body.dark-mode[data-page="user"] .otp-user-row {
    border-color: #2B3A50;
    background: linear-gradient(180deg, #172033, #121a2b);
}

body.dark-mode[data-page="user"] .otp-user-code,
body.dark-mode[data-page="user"] .otp-user-time {
    border-color: #2B3A50;
    background: #1F2A3B;
    color: #dbeafe;
}

body.dark-mode[data-page="user"] .otp-user-search {
    border-color: #2B3A50;
    background: #172033;
    color: #dbeafe;
}

@media (max-width: 720px) {
    .otp-user-head,
    .otp-user-row {
        grid-template-columns: 1fr;
    }

    .otp-user-head {
        display: grid;
    }

    .otp-user-time {
        width: 52px;
    }

    .qtv-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Final accordion precedence over legacy responsive menu rules. */
body[data-page="user"] .user-menu-panel{width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 90px);padding:10px;overflow:auto}
body[data-page="user"] .user-menu-account{display:grid;place-items:start;gap:2px;min-height:auto;text-align:left}
@media(max-width:480px){body[data-page="user"] .user-menu-panel{width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 74px)}}

/* Telegram-like persistent navigation drawer. */
body[data-page="user"] .user-menu-panel{position:fixed;z-index:90;top:0;left:0;width:min(320px,88vw);height:100dvh;max-height:none;margin:0;padding:14px 12px;border:0;border-right:1px solid #d5e2ef;border-radius:0 20px 20px 0;box-shadow:18px 0 46px rgba(17,52,88,.20);animation:userDrawerIn .2s ease}
body[data-page="user"].user-menu-open .user-menu-toggle{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-20px)}
body[data-page="user"] .user-menu-account{grid-template-columns:1fr 36px;align-items:center;padding:12px 10px 14px}
body[data-page="user"] .user-menu-account>div{display:grid;gap:2px}
body[data-page="user"] .user-menu-close{display:grid;place-items:center;width:34px!important;min-height:34px!important;padding:0!important;border:1px solid #ceddec!important;border-radius:11px!important;background:#fff!important;color:#315777!important;font-size:23px!important;line-height:1!important;box-shadow:none!important}
body[data-page="user"] .user-menu-close:hover{background:#eef7ff!important;transform:none!important}
@keyframes userDrawerIn{from{opacity:.4;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media(max-width:480px){body[data-page="user"] .user-menu-panel{width:min(310px,90vw);height:100dvh;max-height:none;padding:10px;border-radius:0 17px 17px 0}}

/* V26 official: fixed drawer stacking and wave-only authenticated background. */
body[data-page="user"].user-menu-open .user-top-card{z-index:210!important}
body[data-page="user"] .user-menu-wrap{z-index:230!important}
body[data-page="user"] .user-menu-panel{z-index:240!important;isolation:isolate}
body[data-page="user"].user-menu-open .user-menu-panel{display:block!important}
body[data-page="user"].user-menu-open .user-card-panel,body[data-page="user"].user-menu-open .user-workspace{position:relative;z-index:1}
body[data-page="user"].user-authenticated::before{inset:-45vmax;border-radius:50%;opacity:.52;background:repeating-radial-gradient(ellipse at 28% 54%,transparent 0 54px,rgba(70,155,224,.15) 55px 57px,transparent 58px 102px);background-size:auto;animation:userWaveDriftA 20s ease-in-out infinite}
body[data-page="user"].user-authenticated::after{left:72%;top:42%;width:125vw;height:88vw;border:0;border-radius:50%;opacity:.48;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 46px,rgba(66,151,222,.14) 47px 49px,transparent 50px 86px);box-shadow:none;transform:translate(-50%,-50%) rotate(-13deg);animation:userWaveDriftB 24s ease-in-out infinite}
@keyframes userWaveDriftA{0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}50%{transform:translate3d(20px,-12px,0) rotate(-1deg)}}
@keyframes userWaveDriftB{0%,100%{transform:translate(-50%,-50%) rotate(-13deg) scale(1)}50%{transform:translate(-51%,-49%) rotate(-10deg) scale(1.025)}}
@media(max-width:700px){body[data-page="user"].user-authenticated::before{inset:-65vmax;opacity:.42}body[data-page="user"].user-authenticated::after{left:66%;top:45%;width:190vw;height:145vw;opacity:.4}}
@media(prefers-reduced-motion:reduce){body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{animation:none!important}}
@media(min-width:341px) and (max-width:380px){body[data-page="user"] .qr-receipt-detail-toggle{min-height:30px!important}}

/* FINAL receipt reference precedence. Keep this after all legacy rules. */
@media(max-width:520px){
body[data-page="user"] .qr-internal-receipt{width:100%;min-height:0;height:max-content;padding:clamp(59px,17.33vw,65px) clamp(22px,6.6vw,25px) 28px;background:linear-gradient(180deg,#e5ffdc 0%,#efffe9 36%,#f8fff5 69%,#fff 100%)}
body[data-page="user"] .qr-receipt-card{padding:42px 18px 0;border-radius:22px;box-shadow:0 7px 18px rgba(34,59,50,.18),inset 0 0 0 1px rgba(255,255,255,.98)}
body[data-page="user"] .qr-receipt-check{top:-38px;width:clamp(72px,20.27vw,76px);height:clamp(72px,20.27vw,76px)}
body[data-page="user"] .qr-internal-receipt h2{margin:4px 0 8px;color:#078b57;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:clamp(19px,5.33vw,20px);font-weight:400;line-height:1.18;letter-spacing:-.012em}
body[data-page="user"] .qr-internal-receipt time{color:#8b9390;font-size:12px;font-weight:500;line-height:1.2}
body[data-page="user"] .qr-receipt-amount{margin:12px 0 6px;color:#078b57;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:clamp(32px,9.07vw,34px);font-weight:400;line-height:1.05;letter-spacing:-.012em}
body[data-page="user"] .qr-receipt-member{color:#171918;font-size:clamp(15.5px,4.27vw,16px);font-weight:400;line-height:1.15}
body[data-page="user"] .qr-receipt-details{gap:8px;margin-top:15px;padding:16px 3px;border-top-color:#d6dfdc}
body[data-page="user"] .qr-receipt-mask{grid-template-columns:clamp(32px,9.07vw,34px) clamp(102px,29.87vw,112px) 22px;gap:10px}
body[data-page="user"] .qr-receipt-source-symbol,body[data-page="user"] .qr-receipt-recipient-symbol{width:clamp(32px,9.07vw,34px);height:clamp(32px,9.07vw,34px)}
body[data-page="user"] .qr-receipt-source-symbol img,body[data-page="user"] .qr-receipt-recipient-symbol img{width:100%;height:100%;object-fit:contain}
body[data-page="user"] .qr-receipt-mask-dots{width:clamp(102px,29.87vw,112px);height:8px;background:radial-gradient(circle,#101210 0 2.35px,transparent 2.7px) left center/calc(100% / 18) 8px repeat-x}
body[data-page="user"] .qr-receipt-eye-icon,body[data-page="user"] .qr-receipt-eye-icon svg{width:22px;height:22px}
body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:clamp(32px,9.07vw,34px) 1fr;gap:12px}
body[data-page="user"] .qr-receipt-beneficiary p{gap:4px}
body[data-page="user"] .qr-receipt-beneficiary p>b{color:#171918;font-size:clamp(16px,4.53vw,17px);font-weight:600;line-height:1.2}
body[data-page="user"] .qr-receipt-beneficiary p>span{color:#626b67;font-size:clamp(14px,3.87vw,14.5px);font-weight:400;line-height:1.28}
body[data-page="user"] .qr-receipt-detail-toggle{min-height:30px!important;color:#087f4d;font-size:15px;font-weight:700}
body[data-page="user"] .qr-receipt-actions{margin-inline:-18px;border-radius:0 0 22px 22px;clip-path:inset(0 round 0 0 22px 22px)}
body[data-page="user"] .qr-receipt-promo{height:56px;margin-top:17px;border-radius:19px 19px 0 0}
body[data-page="user"] .qr-internal-receipt>footer{width:100%;margin:0;padding-top:16px;gap:13px}
body[data-page="user"] .qr-internal-receipt>footer button{height:50px;border-radius:26px;font-size:16px;font-weight:600}
}
@media(max-width:340px){body[data-page="user"] .qr-internal-receipt{padding:52px 18px 28px}body[data-page="user"] .qr-receipt-card{padding:37px 14px 0;border-radius:18px}body[data-page="user"] .qr-receipt-check{top:-32px;width:64px;height:64px}body[data-page="user"] .qr-internal-receipt h2{font-size:17px}body[data-page="user"] .qr-internal-receipt time{font-size:10px}body[data-page="user"] .qr-receipt-amount{font-size:29px}body[data-page="user"] .qr-receipt-member{font-size:13px}body[data-page="user"] .qr-receipt-details{margin-top:13px;padding:14px 0}body[data-page="user"] .qr-receipt-mask{grid-template-columns:30px 90px 18px;gap:7px}body[data-page="user"] .qr-receipt-mask-dots{width:90px;height:6px;background-size:calc(100% / 18) 6px}body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:30px 1fr;gap:8px}body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:12px}body[data-page="user"] .qr-receipt-beneficiary p>span{font-size:10px}body[data-page="user"] .qr-receipt-actions{margin-inline:-14px;border-radius:0 0 18px 18px;clip-path:inset(0 round 0 0 18px 18px)}body[data-page="user"] .qr-receipt-promo{height:50px;margin-top:12px;border-radius:14px 14px 0 0}body[data-page="user"] .qr-internal-receipt>footer{padding-top:10px;gap:8px}body[data-page="user"] .qr-internal-receipt>footer button{height:40px;font-size:12px}}

/* Web User: hộp chỉnh sửa nội bộ, thay thế prompt() của trình duyệt. */
body[data-page="user"] .user-input-dialog{width:min(540px,calc(100vw - 28px));max-width:none;padding:0;border:0;border-radius:22px;background:transparent;color:var(--theme-text);box-shadow:0 28px 80px rgba(8,36,68,.28)}
body[data-page="user"] .user-input-dialog::backdrop{background:rgba(6,20,38,.62);backdrop-filter:blur(6px)}
body[data-page="user"] .user-input-dialog-card{display:grid;gap:17px;margin:0;padding:24px;border:1px solid var(--theme-border-soft);border-radius:22px;background:linear-gradient(145deg,var(--theme-card-bg),var(--theme-card-bg-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
body[data-page="user"] .user-input-dialog-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
body[data-page="user"] .user-input-dialog-card header small{display:block;margin-bottom:4px;color:#1789d4;font-size:10px;font-weight:950;letter-spacing:.14em}
body[data-page="user"] .user-input-dialog-card h2{margin:0;color:var(--theme-blue-text);font-size:22px;line-height:1.2}
body[data-page="user"] .user-input-dialog-card>p{margin:0;color:var(--theme-muted-text);font-size:13px;line-height:1.55}
body[data-page="user"] .user-input-dialog-card label{display:grid;gap:8px;color:var(--theme-muted-text);font-size:12px;font-weight:900}
body[data-page="user"] .user-input-dialog-card :is(input,textarea){width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--theme-border);border-radius:13px;outline:0;background:var(--theme-inner-bg);color:var(--theme-text);font:inherit;line-height:1.45;resize:vertical;transition:border-color .16s ease,box-shadow .16s ease}
body[data-page="user"] .user-input-dialog-card :is(input,textarea):focus{border-color:#238de1;box-shadow:0 0 0 3px rgba(35,141,225,.16)}
body[data-page="user"] .user-input-dialog-close{display:grid;place-items:center;flex:0 0 36px;width:36px;min-height:36px;padding:0;border:1px solid var(--theme-border);border-radius:11px;background:var(--theme-inner-bg);color:var(--theme-muted-text);font-size:23px;line-height:1;cursor:pointer}
body[data-page="user"] .user-input-dialog-card footer{display:flex;justify-content:flex-end;gap:10px;padding-top:2px}
body[data-page="user"] .user-input-dialog-card footer button{min-height:42px;padding:0 18px;border:1px solid var(--theme-border);border-radius:12px;font-weight:900;cursor:pointer}
body[data-page="user"] .user-input-dialog-cancel{background:var(--theme-inner-bg);color:var(--theme-muted-text)}
body[data-page="user"] .user-input-dialog-save{border-color:transparent!important;background:linear-gradient(135deg,#159cdf,#2864ed);color:#fff;box-shadow:0 10px 24px rgba(40,100,237,.22)}
body.dark-mode[data-page="user"] .user-input-dialog-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media(max-width:560px){body[data-page="user"] .user-input-dialog-card{gap:14px;padding:20px 16px;border-radius:18px}body[data-page="user"] .user-input-dialog-card h2{font-size:19px}body[data-page="user"] .user-input-dialog-card footer{display:grid;grid-template-columns:1fr 1fr}body[data-page="user"] .user-input-dialog-card footer button{width:100%}}

/* Login spinner: only added around the existing Web User login flow. */
body[data-page="user"] .user-login-inline-loader{position:absolute;z-index:4;inset:0;display:none;place-content:center;justify-items:center;gap:16px;color:#0b2d5a;text-align:center;pointer-events:none}
body[data-page="user"] .user-login-inline-loader strong{font-size:21px;font-weight:900}
body[data-page="user"] .user-login-screen.login-loading-active .user-login-card{visibility:hidden;pointer-events:none}
body[data-page="user"] .user-login-screen.login-loading-active .user-login-inline-loader{display:grid}
body[data-page="user"] .user-login-spinner{position:relative;width:88px;height:88px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 11%,#44e1ff 17%,#12aaff 43%,#086bea 69%,#163fe4 84%,transparent 91%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 0);filter:drop-shadow(0 0 11px rgba(21,169,255,.58));animation:user-login-clockwise 2.2s linear infinite!important}
body[data-page="user"] .user-login-spinner:after{content:"";position:absolute;top:3px;right:16px;width:10px;height:10px;border-radius:50%;background:#72e8ff;box-shadow:0 0 16px #2ad4ff}
@keyframes user-login-clockwise{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .user-login-spinner{animation:user-login-clockwise 2.2s linear infinite!important}}

/* R39 final OFF-calendar precedence after legacy OFF styles. */
body[data-page="user"] .off-user-calendar-panel{gap:0!important;background:#fff!important}
body[data-page="user"] .off-user-calendar-panel .off-user-list{margin-top:0!important}
body.dark-mode[data-page="user"] .off-user-calendar-panel,body.dark-mode[data-page="user"] .off-user-calendar-panel .off-user-list{background:#0e1b2b!important}

/* R39: Web User OFF calendar and approval request */
body[data-page="user"] .off-user-calendar-panel{padding:0;overflow:hidden}body[data-page="user"] .off-user-calendar-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;color:#fff;background:linear-gradient(120deg,#073064,#0b6fd7 62%,#30a7ff)}body[data-page="user"] .off-user-calendar-hero small{display:block;margin-bottom:6px;color:#86d8ff;font-size:10px;font-weight:900;letter-spacing:.14em}body[data-page="user"] .off-user-calendar-hero h2{margin:0 0 6px;font-size:24px}body[data-page="user"] .off-user-calendar-hero p{max-width:650px;margin:0;color:#d8eeff;font-size:12px;line-height:1.5}body[data-page="user"] .off-user-calendar-hero label{display:grid;gap:6px;min-width:165px;font-size:10px;font-weight:850}body[data-page="user"] .off-user-calendar-hero input{padding:10px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:#fff;color:#173d65}
body[data-page="user"] .off-user-planner{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:520px}body[data-page="user"] .off-user-planner-controls{display:grid;align-content:start;gap:15px;padding:20px;border-right:1px solid #dce8f3;background:#f7fbff}body[data-page="user"] .off-user-planner-controls fieldset{margin:0;padding:0;border:0}body[data-page="user"] .off-user-planner-controls legend,body[data-page="user"] .off-user-note{color:#315270;font-size:11px;font-weight:850}body[data-page="user"] .off-user-note{display:grid;gap:6px}body[data-page="user"] .off-user-note textarea{padding:10px;border:1px solid #c8d8e8;border-radius:10px;background:#fff;color:#203f5c;font:inherit;resize:vertical}body[data-page="user"] .off-user-shift-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}body[data-page="user"] .off-user-shift-picker label{cursor:pointer}body[data-page="user"] .off-user-shift-picker input{position:absolute;opacity:0}body[data-page="user"] .off-user-shift-picker span{display:grid;gap:3px;padding:9px 4px;border:1px solid #cfdeeb;border-radius:9px;background:#fff;color:#34536e;text-align:center;font-size:9px;font-weight:900}body[data-page="user"] .off-user-shift-picker small{color:#7f91a3;font-size:7px}body[data-page="user"] .off-user-shift-picker input:checked+span{border-color:#1681ed;background:#e8f4ff;color:#0765c7;box-shadow:0 0 0 2px rgba(22,129,237,.12)}body[data-page="user"] .off-user-rotate{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #b8d7f6;border-radius:11px;background:#eaf5ff}body[data-page="user"] .off-user-rotate input{width:18px;height:18px;accent-color:#1478e6}body[data-page="user"] .off-user-rotate span{display:grid;gap:2px}body[data-page="user"] .off-user-rotate b{color:#0966bd;font-size:11px}body[data-page="user"] .off-user-rotate small{color:#547b9e;font-size:8px}
body[data-page="user"] .off-user-sequence{display:grid;gap:5px;max-height:155px;padding:11px;overflow:auto;border:1px dashed #b7cbde;border-radius:10px;background:#fff;color:#60788d;font-size:9px}body[data-page="user"] .off-user-sequence>span{display:flex;justify-content:space-between;gap:7px;padding:6px 7px;border-radius:7px;background:#eef6ff}body[data-page="user"] .off-user-sequence strong{color:#0870d8}body[data-page="user"] .off-user-submit{display:grid;gap:7px}body[data-page="user"] .off-user-submit button{min-height:40px;border-radius:10px;font-size:10px;font-weight:900}body[data-page="user"] .off-user-submit button:first-child{border-color:#1477e6;background:linear-gradient(135deg,#0d83ed,#1261cd);color:#fff}
body[data-page="user"] .off-user-calendar-main{padding:20px;min-width:0}body[data-page="user"] .off-user-weekdays,body[data-page="user"] .off-user-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}body[data-page="user"] .off-user-weekdays{margin-bottom:7px}body[data-page="user"] .off-user-weekdays span{padding:6px;text-align:center;color:#7b8fa3;font-size:9px;font-weight:900}body[data-page="user"] .off-user-calendar-grid button,body[data-page="user"] .off-user-calendar-empty{min-height:70px;border-radius:11px}body[data-page="user"] .off-user-calendar-grid button{display:grid;align-content:space-between;justify-items:start;padding:9px;border:1px solid #d7e3ee;background:#fff;color:#284b69;cursor:pointer}body[data-page="user"] .off-user-calendar-grid button b{font-size:15px}body[data-page="user"] .off-user-calendar-grid button small{color:#6b8094;font-size:7px;line-height:1.25;text-align:left}body[data-page="user"] .off-user-calendar-grid button.today{box-shadow:inset 0 0 0 2px #f2b32d}body[data-page="user"] .off-user-calendar-grid button.scheduled{border-color:#48bf98;background:#eafaf5}body[data-page="user"] .off-user-calendar-grid button.proposed{border-color:#e8bd43;background:#fff7d4}body[data-page="user"] .off-user-calendar-grid button.selected{border-color:#1378e5;background:linear-gradient(145deg,#0f68ce,#2298ef);color:#fff;box-shadow:0 7px 16px rgba(13,106,205,.2)}body[data-page="user"] .off-user-calendar-grid button.selected small{color:#eaf6ff}body[data-page="user"] .off-user-calendar-grid button.past:not(.proposed){opacity:.45;cursor:not-allowed}body[data-page="user"] .off-user-calendar-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:#61788d;font-size:9px;font-weight:750}body[data-page="user"] .off-user-calendar-legend span{display:flex;align-items:center;gap:5px}body[data-page="user"] .off-user-calendar-legend i{width:11px;height:11px;border:1px solid #ccd9e5;border-radius:4px}body[data-page="user"] .off-user-calendar-legend i.selected{background:#1582e7}body[data-page="user"] .off-user-calendar-legend i.scheduled{border-color:#48bf98;background:#dff8ef}body[data-page="user"] .off-user-calendar-legend i.proposed{border-color:#e8bd43;background:#ffefad}
body[data-page="user"] .off-user-list{padding:20px 24px 26px}body[data-page="user"] .off-user-list-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}body[data-page="user"] .off-user-list-head h3{margin:0 0 3px;color:#1f4568}body[data-page="user"] .off-user-list-head span{color:#7a8da0;font-size:9px}body[data-page="user"] .off-user-list-head>b{padding:6px 9px;border-radius:999px;background:#e8f3ff;color:#1167bc;font-size:9px}body[data-page="user"] .off-user-request-history{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:13px}body[data-page="user"] .off-user-request-history article{display:grid;gap:4px;padding:10px;border:1px solid #efd27f;border-radius:10px;background:#fff9e6}body[data-page="user"] .off-user-request-history b{color:#a66a00;font-size:8px}body[data-page="user"] .off-user-request-history span{color:#4f667b;font-size:9px}body[data-page="user"] .off-user-request-history small{color:#8293a2;font-size:8px}body[data-page="user"] .off-user-request-history article.status-approved{border-color:#71d4b2;background:#edfbf6}body[data-page="user"] .off-user-request-history article.status-approved b{color:#087855}body[data-page="user"] .off-user-request-history article.status-rejected{border-color:#e5bbc0;background:#fff3f4}body[data-page="user"] .off-user-request-history article.status-rejected b{color:#b43c4c}
body.dark-mode[data-page="user"] .off-user-planner,body.dark-mode[data-page="user"] .off-user-calendar-main{background:#0e1b2b}body.dark-mode[data-page="user"] .off-user-planner-controls{border-color:#2a4056;background:#0e1b2b}body.dark-mode[data-page="user"] .off-user-planner-controls legend,body.dark-mode[data-page="user"] .off-user-note{color:#d9e8f7}body.dark-mode[data-page="user"] .off-user-note textarea,body.dark-mode[data-page="user"] .off-user-shift-picker span,body.dark-mode[data-page="user"] .off-user-sequence{border-color:#31485f;background:#142338;color:#edf5ff}body.dark-mode[data-page="user"] .off-user-shift-picker input:checked+span{border-color:#59aeff;background:#123b61;color:#92d2ff}body.dark-mode[data-page="user"] .off-user-rotate{border-color:#285b86;background:#12304c}body.dark-mode[data-page="user"] .off-user-weekdays span,body.dark-mode[data-page="user"] .off-user-calendar-legend{color:#b9cce0}body.dark-mode[data-page="user"] .off-user-calendar-grid button{border-color:#2e445b;background:#132338;color:#edf6ff}body.dark-mode[data-page="user"] .off-user-calendar-grid button.scheduled{border-color:#267a65;background:#10382f}body.dark-mode[data-page="user"] .off-user-calendar-grid button.proposed{border-color:#8d702d;background:#382f18}body.dark-mode[data-page="user"] .off-user-calendar-grid button.selected{border-color:#55acff;background:linear-gradient(145deg,#075bb8,#168ce9)}body.dark-mode[data-page="user"] .off-user-list-head h3{color:#eef7ff}body.dark-mode[data-page="user"] .off-user-request-history article{border-color:#765f2d;background:#342c18;color:#fff}body.dark-mode[data-page="user"] .off-user-request-history article.status-approved{border-color:#267a65;background:#10382f}body.dark-mode[data-page="user"] .off-user-request-history article.status-rejected{border-color:#70404a;background:#342027}
@media(max-width:850px){body[data-page="user"] .off-user-planner{grid-template-columns:1fr}body[data-page="user"] .off-user-planner-controls{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0;border-bottom:1px solid #dce8f3}body[data-page="user"] .off-user-planner-controls fieldset,body[data-page="user"] .off-user-sequence,body[data-page="user"] .off-user-submit{grid-column:span 2}body[data-page="user"] .off-user-request-history{grid-template-columns:1fr}}
@media(max-width:560px){body[data-page="user"] .off-user-calendar-hero{align-items:stretch;flex-direction:column;padding:18px}body[data-page="user"] .off-user-calendar-hero label{min-width:0}body[data-page="user"] .off-user-planner-controls{grid-template-columns:1fr;padding:14px}body[data-page="user"] .off-user-planner-controls fieldset,body[data-page="user"] .off-user-sequence,body[data-page="user"] .off-user-submit{grid-column:auto}body[data-page="user"] .off-user-calendar-main{padding:13px 7px}body[data-page="user"] .off-user-weekdays,body[data-page="user"] .off-user-calendar-grid{gap:4px}body[data-page="user"] .off-user-calendar-grid button,body[data-page="user"] .off-user-calendar-empty{min-height:55px;border-radius:8px}body[data-page="user"] .off-user-calendar-grid button{padding:6px 4px}body[data-page="user"] .off-user-calendar-grid button b{font-size:13px}body[data-page="user"] .off-user-calendar-grid button small{font-size:6px}body[data-page="user"] .off-user-list{padding:14px}}

/* Receipt reference match — mobile geometry, typography and visual rhythm. */
@media(max-width:520px){
  body[data-page="user"] .qr-internal-receipt{
    width:100%;
    min-height:0;
    height:max-content;
    padding:clamp(59px,17.33vw,65px) clamp(22px,6.6vw,25px) 28px;
    background:linear-gradient(180deg,#e5ffdc 0%,#efffe9 36%,#f8fff5 69%,#fff 100%);
  }
  body[data-page="user"] .qr-receipt-card{
    padding:42px 18px 0;
    border-radius:22px;
    box-shadow:0 7px 18px rgba(34,59,50,.18),inset 0 0 0 1px rgba(255,255,255,.98);
  }
  body[data-page="user"] .qr-receipt-check{
    top:-38px;
    width:clamp(72px,20.27vw,76px);
    height:clamp(72px,20.27vw,76px);
  }
  body[data-page="user"] .qr-internal-receipt h2{
    margin:4px 0 8px;
    color:#078b57;
    font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-size:clamp(19px,5.33vw,20px);
    font-weight:400;
    line-height:1.18;
    letter-spacing:-.012em;
  }
  body[data-page="user"] .qr-internal-receipt time{
    color:#8b9390;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
  }
  body[data-page="user"] .qr-receipt-amount{
    margin:12px 0 6px;
    color:#078b57;
    font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-size:clamp(32px,9.07vw,34px);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-.012em;
  }
  body[data-page="user"] .qr-receipt-member{
    color:#171918;
    font-size:clamp(15.5px,4.27vw,16px);
    font-weight:400;
    line-height:1.15;
  }
  body[data-page="user"] .qr-receipt-details{
    gap:8px;
    margin-top:15px;
    padding:16px 3px 16px;
    border-top-color:#d6dfdc;
  }
  body[data-page="user"] .qr-receipt-mask{
    grid-template-columns:clamp(32px,9.07vw,34px) clamp(102px,29.87vw,112px) 22px;
    gap:10px;
  }
  body[data-page="user"] .qr-receipt-source-symbol,
  body[data-page="user"] .qr-receipt-recipient-symbol{
    width:clamp(32px,9.07vw,34px);
    height:clamp(32px,9.07vw,34px);
  }
  body[data-page="user"] .qr-receipt-source-symbol img,
  body[data-page="user"] .qr-receipt-recipient-symbol img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  body[data-page="user"] .qr-receipt-mask-dots{
    width:clamp(102px,29.87vw,112px);
    height:8px;
    background:radial-gradient(circle,#101210 0 2.35px,transparent 2.7px) left center/calc(100% / 18) 8px repeat-x;
  }
  body[data-page="user"] .qr-receipt-eye-icon,
  body[data-page="user"] .qr-receipt-eye-icon svg{width:22px;height:22px}
  body[data-page="user"] .qr-receipt-beneficiary{
    grid-template-columns:clamp(32px,9.07vw,34px) 1fr;
    gap:12px;
  }
  body[data-page="user"] .qr-receipt-beneficiary p{gap:4px}
  body[data-page="user"] .qr-receipt-beneficiary p>b{
    color:#171918;
    font-size:clamp(16px,4.53vw,17px);
    font-weight:600;
    line-height:1.2;
  }
  body[data-page="user"] .qr-receipt-beneficiary p>span{
    color:#626b67;
    font-size:clamp(14px,3.87vw,14.5px);
    font-weight:400;
    line-height:1.28;
  }
  body[data-page="user"] .qr-receipt-detail-toggle{
    min-height:30px!important;
    color:#087f4d;
    font-size:15px;
    font-weight:700;
  }
  body[data-page="user"] .qr-receipt-actions{
    margin-inline:-18px;
    border-radius:0 0 22px 22px;
    clip-path:inset(0 round 0 0 22px 22px);
  }
  body[data-page="user"] .qr-receipt-promo{
    height:56px;
    margin-top:17px;
    border-radius:19px 19px 0 0;
  }
  body[data-page="user"] .qr-internal-receipt>footer{
    width:100%;
    margin:0;
    padding-top:16px;
    gap:13px;
  }
  body[data-page="user"] .qr-internal-receipt>footer button{
    height:50px;
    border-radius:26px;
    font-size:16px;
    font-weight:600;
  }
}

@media(max-width:340px){
  body[data-page="user"] .qr-internal-receipt{padding:52px 18px 28px}
  body[data-page="user"] .qr-receipt-card{padding:37px 14px 0;border-radius:18px}
  body[data-page="user"] .qr-receipt-check{top:-32px;width:64px;height:64px}
  body[data-page="user"] .qr-internal-receipt h2{font-size:17px}
  body[data-page="user"] .qr-internal-receipt time{font-size:10px}
  body[data-page="user"] .qr-receipt-amount{font-size:29px}
  body[data-page="user"] .qr-receipt-member{font-size:13px}
  body[data-page="user"] .qr-receipt-details{margin-top:13px;padding:14px 0}
  body[data-page="user"] .qr-receipt-mask{grid-template-columns:30px 90px 18px;gap:7px}
  body[data-page="user"] .qr-receipt-mask-dots{width:90px;height:6px;background-size:calc(100% / 18) 6px}
  body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:30px 1fr;gap:8px}
  body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:12px}
  body[data-page="user"] .qr-receipt-beneficiary p>span{font-size:10px}
  body[data-page="user"] .qr-receipt-actions{margin-inline:-14px;border-radius:0 0 18px 18px;clip-path:inset(0 round 0 0 18px 18px)}
  body[data-page="user"] .qr-receipt-promo{height:50px;margin-top:12px;border-radius:14px 14px 0 0}
  body[data-page="user"] .qr-internal-receipt>footer{padding-top:10px;gap:8px}
  body[data-page="user"] .qr-internal-receipt>footer button{height:40px;font-size:12px}
}

/* V113 receipt QA: exactly 18 compact mask dots on every mobile width. */
body[data-page="user"] .qr-receipt-mask-dots{background-size:calc(100% / 18) 8px}
@media(max-width:340px){body[data-page="user"] .qr-receipt-mask-dots{background-size:calc(100% / 18) 6px}}
@media(min-width:341px) and (max-width:380px){body[data-page="user"] .qr-receipt-detail-toggle{min-height:45px}}

/* V69 QR Excel table layout. */
body[data-page="user"] .qr-import-workspace{padding:18px;overflow:visible;font-size:13px}
body[data-page="user"] .qr-import-list{display:block;overflow-x:auto;border-radius:16px;background:#fff}
body[data-page="user"] .qr-import-table{width:100%;min-width:1120px;border-collapse:collapse;table-layout:fixed;background:#fff}
body[data-page="user"] .qr-import-table th{padding:14px 12px;background:#edf4fd;color:#365979;font-size:12px;font-weight:800;text-align:left;vertical-align:middle}
body[data-page="user"] .qr-import-table th:nth-child(1){width:13%}body[data-page="user"] .qr-import-table th:nth-child(2){width:13%}body[data-page="user"] .qr-import-table th:nth-child(3){width:14%}body[data-page="user"] .qr-import-table th:nth-child(4){width:15%}body[data-page="user"] .qr-import-table th:nth-child(5){width:11%}body[data-page="user"] .qr-import-table th:nth-child(6){width:18%}body[data-page="user"] .qr-import-table th:nth-child(7){width:11%}body[data-page="user"] .qr-import-table th:nth-child(8){width:5%;text-align:center}
body[data-page="user"] .qr-import-card{display:table-row;padding:0;border:0;border-radius:0;background:#fff}
body[data-page="user"] .qr-import-card.is-valid{background:#f3fcf7}body[data-page="user"] .qr-import-card.is-invalid{background:#fff3f3}body[data-page="user"] .qr-import-card.is-paid{background:#eaf9f1}
body[data-page="user"] .qr-import-card td{padding:14px 12px;border-bottom:1px solid #dbe7f3;vertical-align:middle;color:#153b61}
body[data-page="user"] .qr-import-card td>small{display:block;margin-top:4px;color:#6b8299;font-size:10px;line-height:1.35}
body[data-page="user"] .qr-import-card input:not([type="hidden"]){width:100%;min-height:34px;padding:4px 0;border:0!important;border-radius:0!important;background:transparent!important;color:#102d4d!important;font:inherit;font-size:13px!important;font-weight:700!important;box-shadow:none!important}
body[data-page="user"] .qr-import-card input:focus{outline:2px solid #82b4ff!important;outline-offset:3px}
body[data-page="user"] .qr-import-status{display:inline-flex;align-items:center;padding:7px 10px;font-size:11px;font-weight:800;white-space:nowrap}
body[data-page="user"] .qr-import-api-detail{display:grid;gap:2px;margin-top:6px;color:#63809d;font-size:10px;line-height:1.35}
body[data-page="user"] .qr-import-check,body[data-page="user"] .qr-import-view{width:auto;min-width:86px;min-height:38px;margin:0;padding:0 13px;border:0!important;border-radius:10px!important;background:#1769e0!important;color:#fff!important;font-size:11px!important;font-weight:800!important}
body[data-page="user"] .qr-import-check[hidden]{display:none!important}
body[data-page="user"] .qr-import-result{margin:0}
body[data-page="user"] .qr-import-inline-error{color:#b42318;font-size:11px;font-weight:700}
body[data-page="user"] .qr-import-menu{text-align:center}.qr-import-more{width:40px;min-height:38px;border:1px solid #bfd1e8;border-radius:10px;background:#fff;color:#315779;font-size:20px;font-weight:800}
body[data-page="user"] .qr-import-complete{color:#56806a;font-size:11px;font-weight:700}
body[data-page="user"] .qr-import-modal{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:22px;background:rgba(12,29,50,.58)}
body[data-page="user"] .qr-import-modal[hidden]{display:none!important}
body[data-page="user"] .qr-import-modal-card{width:min(650px,100%);max-height:92vh;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 22px 70px rgba(10,29,53,.32)}
body[data-page="user"] .qr-import-modal-card header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;border-bottom:1px solid #dce7f3}body[data-page="user"] .qr-import-modal-card h2{margin:0;font-size:20px}body[data-page="user"] .qr-import-modal-card header p{margin:5px 0 0;color:#6a8198;font-size:12px}
body[data-page="user"] .qr-import-modal-card button,body[data-page="user"] .qr-import-modal-card a{min-height:42px;padding:0 16px;display:inline-grid;place-items:center;border:1px solid #bed0e7;border-radius:10px;background:#fff;color:#244c73;font-size:12px;font-weight:800;text-decoration:none}
body[data-page="user"] .qr-import-modal-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:20px}body[data-page="user"] .qr-import-modal-body>img{width:240px;max-width:100%;border-radius:12px}.qr-import-modal-info{display:grid;gap:8px}.qr-import-modal-info p{margin:0;padding-bottom:8px;border-bottom:1px solid #e0e9f3}.qr-import-modal-info span{display:block;color:#698198;font-size:11px}.qr-import-modal-info b{display:block;margin-top:3px;color:#153b61;font-size:13px}
body[data-page="user"] .qr-import-modal-card footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:16px 20px;background:#f3f7fc}body[data-page="user"] .qr-import-modal-card footer>*{width:100%}body[data-page="user"] .qr-import-paid-confirm{border-color:#1769e0!important;background:#1769e0!important;color:#fff!important}
@media(max-width:700px){body[data-page="user"] .qr-import-modal-body{grid-template-columns:1fr}body[data-page="user"] .qr-import-modal-body>img{margin:auto}body[data-page="user"] .qr-import-modal-card footer{grid-template-columns:1fr;gap:10px}}

/* V72: modal QR luôn neo giữa viewport; giao diện gọn và nút cảnh báo chia đều. */
body[data-page="user"] .qr-import-modal{position:fixed!important;z-index:10000!important;inset:0!important;transform:none!important;display:grid;place-items:center;padding:18px;background:rgba(12,29,50,.58)}
body[data-page="user"] .qr-import-modal-card{width:min(610px,100%);max-height:88vh}
body[data-page="user"] .qr-import-modal-body{grid-template-columns:215px minmax(0,1fr);gap:18px;padding:18px}
body[data-page="user"] .qr-import-modal-body>img{width:215px}
body[data-page="user"] .qr-import-modal-card footer.is-review{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
body[data-page="user"] .qr-import-warning-card{width:min(450px,100%);overflow:hidden;border-radius:20px;background:#fff;text-align:center;box-shadow:0 22px 70px rgba(10,29,53,.32)}
body[data-page="user"] .qr-import-warning-card h1{margin:10px 0 24px;padding:0 25px;color:#173b61;font-size:20px;line-height:1.42}
body[data-page="user"] .qr-import-warning-card h1 em{display:block;margin-top:3px;color:#d43d2f;font-size:22px;font-style:normal}
body[data-page="user"] .qr-import-warning-card h2.qr-import-warning-title{margin:0;padding:0 24px;color:#d66f00;font-size:19px;font-weight:900;line-height:1.35;animation:none}
body[data-page="user"] .qr-import-warning-card h1.qr-import-warning-message{margin:10px 0 24px;color:#d43d2f;font-size:21px;font-style:italic;font-weight:800}
body[data-page="user"] .qr-import-warning-icon{position:relative;display:grid;place-items:center;width:62px;height:56px;margin:20px auto 12px;color:#171717;font-size:28px;font-weight:1000;clip-path:polygon(50% 0,100% 100%,0 100%);background:#ffd52b;filter:drop-shadow(0 5px 5px rgba(205,137,0,.35));animation:qrWarningPulse 1.05s ease-in-out infinite}
body[data-page="user"] .qr-import-warning-icon::before{content:"";position:absolute;inset:5px;clip-path:inherit;background:#fff4a8;z-index:-1}
body[data-page="user"] .qr-import-warning-icon span{transform:translateY(7px)}
body[data-page="user"] .qr-import-warning-card footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:16px 22px;background:#f3f7fc}
body[data-page="user"] .qr-import-warning-card button{width:100%;min-height:42px;border:1px solid #bed0e7;border-radius:10px;background:#fff;color:#244c73;font-weight:800}
body[data-page="user"] .qr-import-warning-card .qr-import-review-agree{border-color:#1769e0;background:#1769e0;color:#fff}
@keyframes qrWarningPulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 8px rgba(245,170,35,.45))}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .qr-import-warning-icon,body[data-page="user"] .qr-import-warning-title{animation:none}}
@media(max-width:700px){body[data-page="user"] .qr-import-modal-card footer.is-review{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}body[data-page="user"] .qr-import-warning-card footer{gap:14px}}

/* V73: trạng thái truy vấn rõ nghĩa, kết quả API có sao chép nhanh. */
body[data-page="user"] .qr-import-api-detail{gap:6px;font-size:11px}
body[data-page="user"] .qr-import-api-result{display:flex;align-items:center;gap:7px;min-width:0}
body[data-page="user"] .qr-import-api-result b{overflow-wrap:anywhere;color:#173b61;font-size:11px;line-height:1.4}
body[data-page="user"] .qr-import-copy-owner{display:inline!important;flex:0 0 auto;width:auto!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#1769e0!important;font-size:10px!important;font-weight:800!important;line-height:1.2!important;text-decoration:none;cursor:pointer}
body[data-page="user"] .qr-import-copy-owner:hover{text-decoration:underline}
body[data-page="user"] .qr-import-match-note{display:block;font-size:10px;line-height:1.4}
body[data-page="user"] .qr-import-match-note.success{color:#07865a}
body[data-page="user"] .qr-import-match-note.error{color:#b42318}
body[data-page="user"] .qr-import-status.error{white-space:normal;line-height:1.35}
body[data-page="user"] .qr-import-warning-card{animation:qrWarningGlow 1.4s ease-in-out infinite}
@keyframes qrWarningGlow{0%,100%{box-shadow:0 22px 70px rgba(10,29,53,.32),0 0 0 0 rgba(255,180,25,0)}50%{box-shadow:0 22px 70px rgba(10,29,53,.32),0 0 0 7px rgba(255,180,25,.28)}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .qr-import-warning-card{animation:none}}

/* V74: tìm nhanh trong danh sách QR nhập từ Excel. */
body[data-page="user"] .qr-import-search{display:grid;grid-template-columns:minmax(260px,1fr) auto auto auto;align-items:center;gap:12px;margin:0 0 14px;padding:12px;border:1px solid #c7daf2;border-radius:13px;background:#fff}
body[data-page="user"] .qr-import-search input{width:100%;min-height:42px;padding:0 14px;border:1px solid #b9cee8;border-radius:10px;background:#fff;color:#173b61;font:inherit;font-size:13px}
body[data-page="user"] .qr-import-search button{min-height:42px;padding:0 18px;border:1px solid #1769e0;border-radius:10px;background:#1769e0;color:#fff;font-size:11px;font-weight:900;cursor:pointer}
body[data-page="user"] .qr-import-search #qrImportSearchClear{border-color:#bfd1e8;background:#fff;color:#315779}
body[data-page="user"] .qr-import-search span{padding:8px 11px;border-radius:99px;background:#edf5ff;color:#315779;font-size:11px;font-weight:800;white-space:nowrap}
body[data-page="user"] .qr-import-card[hidden]{display:none!important}
@media(max-width:760px){body[data-page="user"] .qr-import-search{grid-template-columns:1fr 1fr}body[data-page="user"] .qr-import-search input{grid-column:1/-1}body[data-page="user"] .qr-import-search span{grid-column:1/-1;text-align:center}}

/* V77: GIF cảnh báo thật, mẫu tam giác vàng. */
body[data-page="user"] .qr-import-warning-gif{display:block;width:96px;height:96px;object-fit:contain;margin:12px auto 4px}

/* V81: GIF chỉ rung qua lại, không vòng sáng; tên API trả về nổi bật. */
body[data-page="user"] .qr-import-warning-gif{width:124px;height:124px;margin:5px auto -5px;object-fit:contain}
body[data-page="user"] .qr-import-api-result b>span{color:#506f8e;font-weight:800}
body[data-page="user"] .qr-import-api-result b>strong{color:#f0182d;font-size:12px;font-weight:1000;text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* V84: không loại dòng trùng; cảnh báo rõ các trường hợp cần đối chiếu. */
body[data-page="user"] .qr-import-card.has-duplicate-warning{background:#fff9e8}
body[data-page="user"] .qr-import-duplicate-warning{display:block;margin-top:7px;padding:5px 7px;border-left:3px solid #f0a000;border-radius:5px;background:#fff0bd;color:#9a5400;font-size:9px;font-weight:900;line-height:1.35}

/* V85: cột kết quả API rộng, tên đầy đủ nằm ngang. */
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])){width:min(1740px,calc(100% - 28px))}
body[data-page="user"] .qr-import-table{min-width:1460px}
body[data-page="user"] .qr-import-table th:nth-child(1){width:10%}
body[data-page="user"] .qr-import-table th:nth-child(2){width:10%}
body[data-page="user"] .qr-import-table th:nth-child(3){width:12%}
body[data-page="user"] .qr-import-table th:nth-child(4){width:18%}
body[data-page="user"] .qr-import-table th:nth-child(5){width:8%}
body[data-page="user"] .qr-import-table th:nth-child(6){width:27%}
body[data-page="user"] .qr-import-table th:nth-child(7){width:10%}
body[data-page="user"] .qr-import-table th:nth-child(8){width:5%}
body[data-page="user"] .qr-import-api-result{flex-wrap:nowrap;white-space:nowrap}
body[data-page="user"] .qr-import-api-result b{overflow-wrap:normal;white-space:nowrap}
body[data-page="user"] .qr-import-match-note{white-space:nowrap}

/* V86: tổng tiền toàn file và tổng tiền theo kết quả tìm kiếm. */
body[data-page="user"] .qr-import-money-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 14px}
body[data-page="user"] .qr-import-money-summary article{display:grid;gap:5px;padding:14px 17px;border:1px solid #b9d4f4;border-left:5px solid #1769e0;border-radius:13px;background:linear-gradient(135deg,#fff,#f0f7ff)}
body[data-page="user"] .qr-import-money-summary article:nth-child(2){border-left-color:#0aa36c;background:linear-gradient(135deg,#fff,#effcf6)}
body[data-page="user"] .qr-import-money-summary small{color:#647f9a;font-size:10px;font-weight:900}
body[data-page="user"] .qr-import-money-summary strong{color:#145ba8;font-size:23px;font-weight:1000;font-variant-numeric:tabular-nums}
body[data-page="user"] .qr-import-money-summary article:nth-child(2) strong{color:#07865a}
@media(max-width:700px){body[data-page="user"] .qr-import-money-summary{grid-template-columns:1fr}}

/* Số dư ngân hàng và tự động trừ khi xác nhận chuyển khoản. */
body[data-page="user"] .qr-import-balance-control{display:grid;grid-template-columns:minmax(260px,420px) auto 1fr;align-items:end;gap:12px;margin:0 0 14px;padding:14px;border:1px solid #a9c8f7;border-radius:14px;background:#eef6ff}
body[data-page="user"] .qr-import-balance-control label{display:grid;gap:6px;color:#315779;font-size:10px;font-weight:900}
body[data-page="user"] .qr-import-balance-control input{width:100%;min-height:44px;padding:0 14px;border:1px solid #9ebfe8;border-radius:10px;background:#fff;color:#164f8d;font-size:18px;font-weight:900}
body[data-page="user"] .qr-import-balance-control button{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:#1769e0;color:#fff;font-size:11px;font-weight:900;cursor:pointer}
body[data-page="user"] .qr-import-balance-control small{align-self:center;color:#8b6c30;font-size:11px;font-weight:800}
body[data-page="user"] .qr-import-balance-control small.is-confirmed{color:#07865a}
body[data-page="user"] .qr-import-money-summary{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1200px){body[data-page="user"] .qr-import-money-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){body[data-page="user"] .qr-import-balance-control{grid-template-columns:1fr}body[data-page="user"] .qr-import-money-summary{grid-template-columns:1fr}}

/* Phiếu DEMO phục vụ UI/UX testing; không hiển thị dữ liệu giao dịch thật. */
body[data-page="user"] .qr-internal-receipt{position:relative;width:min(430px,calc(100vw - 24px));max-height:96vh;overflow:auto;padding:52px 18px 22px;background:linear-gradient(180deg,#e6ffdc 0%,#efffe8 38%,#f8fff5 68%,#fff 100%);box-shadow:0 18px 48px rgba(22,55,44,.18);text-align:center;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
body[data-page="user"] .qr-receipt-card{position:relative;padding:64px 22px 0;border-radius:24px;background:#fff;box-shadow:0 5px 14px rgba(28,54,45,.18)}
body[data-page="user"] .qr-receipt-check{position:absolute;top:-49px;left:50%;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:transparent url("/assets/images/receipt-success-v121.svg") center/contain no-repeat;font-size:0;color:transparent;transform:translateX(-50%)}
body[data-page="user"] .qr-receipt-check img{display:block;width:100%;height:100%;object-fit:contain}
body[data-page="user"] .qr-internal-receipt h2{margin:4px 0 6px;color:#078b57;font-size:24px;font-weight:400;line-height:1.25;letter-spacing:-.01em}
body[data-page="user"] .qr-internal-receipt time{display:block;color:#87948f;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0}
body[data-page="user"] .qr-receipt-amount{display:block;margin:16px 0 3px;color:#078b57;font-size:40px;font-weight:400;line-height:1.08;letter-spacing:-.01em}
body[data-page="user"] .qr-receipt-member{display:block;color:#171b19;font-size:17px;font-weight:500;letter-spacing:0;text-transform:uppercase}
body[data-page="user"] .qr-receipt-details{display:grid;gap:8px;margin:25px 0 0;padding:20px 3px 18px;border-top:1px solid #d7e4df;text-align:left}
body[data-page="user"] .qr-receipt-mask{display:grid;grid-template-columns:44px 168px 24px;align-items:center;justify-content:start;gap:11px}.qr-receipt-source-symbol{display:grid;place-items:center;width:44px;height:44px}.qr-receipt-source-symbol svg{width:44px;height:44px;fill:#e2a400;stroke:#fff;stroke-width:2}.qr-receipt-source-symbol img,.qr-receipt-recipient-symbol img{display:block;width:43px;height:43px;object-fit:contain}.qr-receipt-mask-dots{height:8px;background:radial-gradient(circle,#111 0 2.1px,transparent 2.6px) left center/13px 8px repeat-x}.qr-receipt-eye-icon{display:grid;place-items:center;width:24px;height:24px}.qr-receipt-eye-icon svg{width:24px;height:24px;fill:none}.qr-receipt-eye-icon path{stroke:#4a4a4a;stroke-width:2;stroke-linecap:round}.qr-receipt-eye-icon circle{fill:#4a4a4a}.qr-receipt-beneficiary{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:12px;margin-top:-2px}.qr-receipt-beneficiary p{display:grid;gap:5px;margin:0}.qr-receipt-beneficiary p>b{color:#111;font-size:18px;font-weight:600}.qr-receipt-beneficiary p>span{color:#5f6b67;font-size:15px;font-weight:400;line-height:1.35}.qr-receipt-recipient-symbol{display:grid;place-items:center;width:44px;height:44px}.qr-receipt-recipient-symbol svg{width:38px;height:38px;fill:none;stroke:#e52c4f;stroke-width:3;stroke-linecap:round}.qr-receipt-recipient-symbol circle{fill:#e52c4f;stroke:none}
body[data-page="user"] .qr-receipt-chevron{display:grid;place-items:center;width:16px;height:16px;margin-left:12px;color:#4a4a4a}.qr-receipt-chevron svg{width:16px;height:16px;fill:none;stroke:#4a4a4a;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
body[data-page="user"] .qr-receipt-detail-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:52px;background:#fff;color:#007a40;font-size:15px;font-weight:600;letter-spacing:-.2px;user-select:none}.qr-receipt-detail-chevron{width:18px;height:18px;fill:none;stroke:#007a40;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body[data-page="user"] .qr-receipt-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 -22px;padding:18px 16px 17px;border-top:1px solid #e0e7e4;background:#fff}
body[data-page="user"] .qr-receipt-actions button{display:grid;justify-items:center;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:#111;font-size:11px;font-weight:800;line-height:1.18;cursor:pointer}
body[data-page="user"] .qr-receipt-action-icon{display:grid;place-items:center;width:56px;height:56px;border:1px solid #f0f1f0;border-radius:50%;background:#fff;box-shadow:0 6px 14px rgba(77,82,80,.16)}
body[data-page="user"] .qr-receipt-action-icon svg{width:29px;height:29px;overflow:visible;fill:none;stroke:#59605d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
body[data-page="user"] .qr-receipt-actions button:nth-child(2) svg path:nth-child(2){fill:#59605d;stroke-width:2}
body[data-page="user"] .qr-receipt-promo{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;margin-top:18px;padding:14px 22px;border-radius:20px 20px 0 0;background:#f6ffef;color:#078b57;text-align:left}.qr-receipt-promo span{grid-row:1/3;display:grid;place-items:center;width:58px;height:38px;border:1px solid #9bd58c;border-radius:9px;font-size:10px;font-weight:700}.qr-receipt-promo b{font-size:17px}.qr-receipt-promo small{color:#d29016;font-size:12px}
body[data-page="user"] .qr-internal-receipt footer{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;margin:18px auto 0;padding:0;background:transparent}
body[data-page="user"] .qr-internal-receipt footer button{display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0;border:0;border-radius:26px;background:#007a40;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.2px;cursor:pointer;transition:opacity .15s ease}
body[data-page="user"] .qr-internal-receipt footer button:active{opacity:.85}
body[data-page="user"] .qr-internal-receipt footer .qr-receipt-new{border:1.5px solid #007a40;background:#fff;color:#007a40}
body[data-page="user"] .qr-receipt-status-bar{display:none!important}
@media(max-width:520px){body[data-page="user"] .qr-internal-receipt{width:100%;max-height:none;padding:48px clamp(28px,6.6vw,31px) 18px;box-shadow:none}body[data-page="user"] .qr-receipt-card{padding:58px 18px 0;border-radius:22px}body[data-page="user"] .qr-receipt-check{width:clamp(90px,20vw,95px);height:clamp(90px,20vw,95px);top:clamp(-49px,-10.3vw,-47px);font-size:42px}body[data-page="user"] .qr-internal-receipt h2{font-size:clamp(23px,5.5vw,26px)}body[data-page="user"] .qr-internal-receipt time{font-size:clamp(13px,3vw,14px)}body[data-page="user"] .qr-receipt-amount{font-size:clamp(37px,8.6vw,41px)}body[data-page="user"] .qr-receipt-member{font-size:clamp(18px,4.2vw,20px)}body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:clamp(18px,4vw,19px)}body[data-page="user"] .qr-receipt-beneficiary p>span{font-size:clamp(15px,3.5vw,16px)}body[data-page="user"] .qr-receipt-detail-toggle{font-size:16px}body[data-page="user"] .qr-receipt-actions{margin-inline:clamp(-29px,-6.3vw,-27px);padding-inline:9px;gap:5px}body[data-page="user"] .qr-receipt-action-icon{width:50px;height:50px}.qr-receipt-promo{padding-inline:16px}}
@media(max-width:520px){body[data-page="user"] .qr-import-modal{place-items:start center;padding:0;overflow:auto}body[data-page="user"] .qr-internal-receipt{min-height:0;height:max-content;padding-bottom:28px}}
@media(max-width:340px){body[data-page="user"] .qr-internal-receipt{min-height:0;padding:31px 14px 0}body[data-page="user"] .qr-receipt-card{padding:42px 13px 0;border-radius:14px}body[data-page="user"] .qr-receipt-check{width:58px;height:58px;top:-30px}body[data-page="user"] .qr-internal-receipt h2{margin:2px 0 4px;font-size:15px;line-height:1.2;white-space:nowrap}body[data-page="user"] .qr-internal-receipt time{font-size:8px}body[data-page="user"] .qr-receipt-amount{margin:10px 0 2px;font-size:26px;white-space:nowrap}body[data-page="user"] .qr-receipt-member{font-size:11px;white-space:nowrap}body[data-page="user"] .qr-receipt-details{gap:5px;margin-top:15px;padding:12px 0 10px}body[data-page="user"] .qr-receipt-mask{grid-template-columns:30px 105px 18px;gap:7px}body[data-page="user"] .qr-receipt-source-symbol,body[data-page="user"] .qr-receipt-recipient-symbol{width:30px;height:30px}body[data-page="user"] .qr-receipt-source-symbol img,body[data-page="user"] .qr-receipt-recipient-symbol img{width:30px;height:30px}body[data-page="user"] .qr-receipt-mask-dots{height:6px;background-size:8px 6px}body[data-page="user"] .qr-receipt-eye-icon,body[data-page="user"] .qr-receipt-eye-icon svg{width:18px;height:18px}body[data-page="user"] .qr-receipt-chevron{width:10px;height:10px;margin-left:8px}body[data-page="user"] .qr-receipt-chevron svg{width:10px;height:10px}body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:30px 1fr;gap:7px}body[data-page="user"] .qr-receipt-beneficiary p{gap:2px}body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:12px}body[data-page="user"] .qr-receipt-beneficiary p>span{font-size:9px;line-height:1.25}body[data-page="user"] .qr-receipt-detail-toggle{min-height:35px;font-size:10px}body[data-page="user"] .qr-receipt-detail-chevron{width:12px;height:12px}body[data-page="user"] .qr-receipt-actions{margin-inline:-18px}}

/* Mobile receipt matched to the supplied reference. */
body[data-page="user"] .qr-internal-receipt{isolation:isolate;display:flex;flex-direction:column;overflow-x:hidden;background:linear-gradient(180deg,#e7ffdf 0%,#f4fff0 62%,#fff 100%)}
body[data-page="user"] .qr-receipt-card{z-index:1;overflow:visible;box-shadow:0 5px 14px rgba(28,54,45,.15),inset 0 0 0 1px rgba(255,255,255,.96)}
body[data-page="user"] .qr-internal-receipt time{color:#8d9592;font-weight:500}
body[data-page="user"] .qr-receipt-details{border-top-color:#d8e1de}
body[data-page="user"] .qr-receipt-mask{grid-template-columns:44px 126px 24px;gap:10px}
body[data-page="user"] .qr-receipt-source-symbol,body[data-page="user"] .qr-receipt-recipient-symbol{width:44px;height:44px;overflow:hidden}
body[data-page="user"] .qr-receipt-source-symbol img{width:44px;height:44px;max-width:100%;object-fit:contain}
body[data-page="user"] .qr-receipt-recipient-symbol img{width:43px;height:43px;object-fit:contain}
body[data-page="user"] .qr-receipt-recipient-symbol.qr-receipt-logo-wide{overflow:hidden}
body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:44px 1fr;gap:12px}
body[data-page="user"] .qr-receipt-recipient-symbol.qr-receipt-logo-wide img{width:44px;height:44px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;transform:scale(1.55);transform-origin:center}
body[data-page="user"] .qr-receipt-mask-dots{width:126px;height:8px;background:radial-gradient(circle,#101210 0 2.55px,transparent 2.85px) left center/7px 8px repeat-x}
body[data-page="user"] .qr-receipt-eye-icon path{stroke:#5b615e}
body[data-page="user"] .qr-receipt-eye-icon circle{fill:#5b615e}
body[data-page="user"] .qr-receipt-amount{font-weight:400}
body[data-page="user"] .qr-receipt-member{font-weight:500}
body[data-page="user"] .qr-receipt-beneficiary p>b{font-weight:600}
body[data-page="user"] .qr-receipt-beneficiary p>span{color:#606864;font-weight:440}
body[data-page="user"] .qr-receipt-beneficiary p>span:last-child{font-variant-numeric:tabular-nums;font-weight:450;letter-spacing:.01em}
body[data-page="user"] .qr-receipt-detail-toggle{color:#087f4d;font-weight:700}
body[data-page="user"] .qr-receipt-detail-chevron{stroke-width:2.5}
body[data-page="user"] .qr-receipt-actions{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:487/184;margin:0 -22px;padding:0;border:0;border-radius:0 0 24px 24px;background:#fff url("/assets/images/receipt-lower-panel-v121.png") center top/105.55% auto no-repeat;box-shadow:none;clip-path:inset(0 round 0 0 24px 24px);gap:0;overflow:hidden}
body[data-page="user"] .qr-receipt-actions button{position:relative;inset:auto;z-index:1;display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;color:transparent;font-size:0;cursor:pointer}
body[data-page="user"] .qr-receipt-actions button>*{visibility:hidden}
body[data-page="user"] .qr-receipt-action-icon{display:grid;width:56px;height:56px;border:1px solid #edf0ee;background:#fff;box-shadow:0 6px 14px rgba(70,78,74,.15)}
body[data-page="user"] .qr-receipt-action-icon svg{width:28px;height:28px;stroke:#5d6461;stroke-width:3.5}
body[data-page="user"] .qr-receipt-promo{display:block!important;height:72px;margin-top:10px;padding:0;border:0;border-radius:19px;background:#efffe9 url("/assets/images/receipt-lower-panel-v121.png") center 51.7%/105.55% auto no-repeat;background-clip:padding-box;overflow:hidden}
body[data-page="user"] .qr-receipt-promo>*{visibility:hidden}
body[data-page="user"] .qr-internal-receipt>footer{position:relative;z-index:1;display:flex;width:100%;max-width:none;margin:0;padding:18px 0 0;border-top:0;background:rgba(255,255,255,.96);gap:12px}
body[data-page="user"] .qr-internal-receipt>footer button{height:52px;border-radius:28px;background:#078b57;font-weight:600}
body[data-page="user"] .qr-internal-receipt>footer .qr-receipt-new{border-color:#078b57;color:#078b57}
@media(max-width:520px){body[data-page="user"] .qr-receipt-card{padding-top:46px}body[data-page="user"] .qr-internal-receipt h2{margin:4px 0 10px;color:#078b57;font-size:clamp(21px,5.6vw,24px);font-weight:400;line-height:1.18;letter-spacing:-.012em;white-space:nowrap}body[data-page="user"] .qr-internal-receipt time{color:#8b9390;font-size:clamp(12px,3.2vw,14px);font-weight:500;line-height:1.2}body[data-page="user"] .qr-receipt-amount{margin:17px 0 7px;color:#078b57;font-family:Arial,Helvetica,sans-serif;font-size:clamp(34px,10.5vw,40px);font-weight:400;line-height:1.04;letter-spacing:-.015em;white-space:nowrap}body[data-page="user"] .qr-receipt-member{color:#171918;font-size:clamp(16px,4.8vw,19px);font-weight:400;line-height:1.15;letter-spacing:0;white-space:nowrap}body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:44px 1fr;gap:10px}body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:clamp(16px,4.35vw,18px)}body[data-page="user"] .qr-receipt-actions{margin-inline:-18px;padding:0;border-radius:0 0 22px 22px;clip-path:inset(0 round 0 0 22px 22px)}body[data-page="user"] .qr-receipt-actions button{min-height:0;font-size:0}body[data-page="user"] .qr-receipt-action-icon{width:52px;height:52px}body[data-page="user"] .qr-receipt-promo{height:70px;border-radius:19px}body[data-page="user"] .qr-internal-receipt>footer{width:100%;margin-inline:0;padding-top:16px}}
@media(max-width:340px){body[data-page="user"] .qr-receipt-card{border-radius:14px 14px 18px 18px}body[data-page="user"] .qr-internal-receipt time{font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}body[data-page="user"] .qr-receipt-mask{grid-template-columns:30px 90px 18px;gap:7px}body[data-page="user"] .qr-receipt-source-symbol img{width:30px;height:30px}body[data-page="user"] .qr-receipt-recipient-symbol img{width:30px;height:30px}body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:30px 1fr;gap:7px}body[data-page="user"] .qr-receipt-recipient-symbol.qr-receipt-logo-wide img{width:30px;height:30px;transform:scale(1.5)}body[data-page="user"] .qr-receipt-mask-dots{width:90px;height:6px;background-size:5px 6px}body[data-page="user"] .qr-receipt-actions{margin-inline:-13px;padding:0;border-radius:0 0 18px 18px;clip-path:inset(0 round 0 0 18px 18px)}body[data-page="user"] .qr-receipt-actions button{min-height:0;gap:0;font-size:0}body[data-page="user"] .qr-receipt-action-icon{width:38px;height:38px}body[data-page="user"] .qr-receipt-action-icon svg{width:21px;height:21px}body[data-page="user"] .qr-receipt-promo{height:52px;margin-top:6px;border-radius:12px}body[data-page="user"] .qr-internal-receipt>footer{width:100%;margin-inline:0;padding-top:8px;gap:7px}body[data-page="user"] .qr-internal-receipt>footer button{height:38px;font-size:12px}}
body[data-page="user"] .qr-paid-menu-card{width:min(420px,100%);padding:25px;border-radius:20px;background:#fff;text-align:center;box-shadow:0 25px 70px rgba(10,29,53,.3)}
body[data-page="user"] .qr-paid-menu-card h2{margin:0;color:#173b61}.qr-paid-menu-card p{color:#698198}.qr-paid-menu-card>div{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.qr-paid-menu-card button{min-height:42px;border:1px solid #1769e0;border-radius:10px;background:#fff;color:#1769e0;font-weight:800}.qr-paid-menu-card>div button{background:#1769e0;color:#fff}

/* V71 QR file mode: centered wide canvas, full brand header and complete owner names. */
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])){width:min(1540px,calc(100% - 36px));max-width:none;margin-inline:auto;display:grid;gap:14px}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-top-card,body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-workspace,body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-card-panel{width:100%;max-width:none;min-width:0;box-sizing:border-box}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-top-card{min-height:138px;place-items:center;padding:18px 28px}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-top-card img{width:min(500px,72vw);max-width:100%;max-height:125px;object-fit:contain}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .qr-feature-head{align-items:center}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .qr-import-workspace{width:100%;min-width:0;box-sizing:border-box}
body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .qr-import-table{min-width:1280px}
body[data-page="user"] .qr-import-table th:nth-child(1){width:11%}body[data-page="user"] .qr-import-table th:nth-child(2){width:11%}body[data-page="user"] .qr-import-table th:nth-child(3){width:13%}body[data-page="user"] .qr-import-table th:nth-child(4){width:22%}body[data-page="user"] .qr-import-table th:nth-child(5){width:9%}body[data-page="user"] .qr-import-table th:nth-child(6){width:18%}body[data-page="user"] .qr-import-table th:nth-child(7){width:11%}body[data-page="user"] .qr-import-table th:nth-child(8){width:5%}
body[data-page="user"] .qr-import-table th:nth-child(4),body[data-page="user"] .qr-import-table td:nth-child(4){padding-left:18px;padding-right:18px}
body[data-page="user"] .qr-import-table td:nth-child(4) input{font-size:14px!important;font-weight:800!important;text-overflow:clip;white-space:nowrap}
@media(max-width:760px){body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])){width:calc(100% - 16px)}body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-top-card{min-height:105px;padding:14px}body[data-page="user"] .user-app:has(#qrImportWorkspace:not([hidden])) .user-top-card img{width:min(390px,82vw);max-height:94px}}

/* V33: báo cáo xuất khoản ngày, chuyển đổi cùng một file nguồn. */
body[data-page="user"] .withdrawal-view-tabs{display:flex;justify-content:center;gap:8px;margin:0 0 18px;padding:5px;border:1px solid #d7e4f4;border-radius:14px;background:#eef4fb}
body[data-page="user"] .withdrawal-view-tabs button{min-height:40px;padding:0 22px;border:1px solid transparent;border-radius:10px;background:transparent;color:#385675;font-weight:800}
body[data-page="user"] .withdrawal-view-tabs button.active{background:linear-gradient(135deg,#278ff0,#493be5);color:#fff;box-shadow:0 8px 18px rgba(43,87,215,.22)}
body[data-page="user"] .withdrawal-formula-note{margin:14px 0;padding:12px 15px;border:1px solid #cfe3f7;border-radius:12px;background:#eef7ff;color:#41617f;font-size:13px;line-height:1.5}
body[data-page="user"] .daily-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
body[data-page="user"] .daily-summary-grid article,body[data-page="user"] .daily-amount-grid article{position:relative;display:grid;gap:7px;min-width:0;padding:18px;border:1px solid #d8e4f2;border-radius:15px;background:#fff;box-shadow:0 7px 18px rgba(40,75,118,.07)}
body[data-page="user"] .daily-summary-grid article{border-top:3px solid #2d72ed}
body[data-page="user"] .daily-summary-grid span,body[data-page="user"] .daily-amount-grid span{overflow:hidden;color:#71839a;font-size:11px;font-weight:900;letter-spacing:.045em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
body[data-page="user"] .daily-summary-grid b,body[data-page="user"] .daily-amount-grid b{color:#153b68;font-size:24px}
body[data-page="user"] [data-daily-copy]{position:absolute;right:9px;top:9px;width:29px;height:29px;padding:0;border:1px solid #cfe0f3;border-radius:9px;background:#f5f9fe;color:#2570c9;opacity:.7}
body[data-page="user"] [data-daily-copy]:hover{opacity:1;background:#e7f3ff}
body[data-page="user"] .daily-amount-section{margin-bottom:16px}
body[data-page="user"] .daily-amount-grid{display:grid;grid-template-columns:repeat(7,minmax(115px,1fr));gap:8px;padding:14px;overflow-x:auto}
body[data-page="user"] .daily-amount-grid article{padding:15px 12px;background:#fbfdff;border-top:3px solid #f0a33a}
body[data-page="user"] .daily-amount-grid b{font-size:20px}
body[data-page="user"] .daily-provider-table th:nth-child(n+2),body[data-page="user"] .daily-provider-table td:nth-child(n+2){text-align:center}
@media(max-width:1000px){body[data-page="user"] .daily-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){body[data-page="user"] .withdrawal-view-tabs{display:grid}.withdrawal-view-tabs button{width:100%}body[data-page="user"] .daily-summary-grid{grid-template-columns:1fr}body[data-page="user"] .withdrawal-formula-note{font-size:12px}}

/* V36: bảng 24 giờ theo nhà, màu giữ nguyên khi copy sang Excel. */
body[data-page="user"] .stats-hourly-table th{min-width:88px;background:#e9f2ff;color:#183d68;text-align:center}
body[data-page="user"] .stats-hourly-table th:first-child{min-width:108px;background:#dcecff}
body[data-page="user"] .stats-hourly-table th:nth-child(2){min-width:125px;background:#dcecff}
body[data-page="user"] .stats-hourly-table td{text-align:center}
body[data-page="user"] .stats-hourly-table td:nth-child(2){position:sticky;left:0;z-index:2;background:#f2f7fd;text-align:left;color:#163f6c}
body[data-page="user"] .stats-hourly-table tbody tr:first-child td{background:#fff5c9;font-weight:800}
body[data-page="user"] .stats-hourly-table tbody tr:nth-child(even):not(:first-child) td{background:#f8fbff}
body[data-page="user"] .stats-hourly-table .speed-cell{color:#3033be;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:700}
body[data-page="user"] .stats-view-tabs{flex-wrap:wrap}

/* V37: gộp thống kê tốc độ + 24 giờ và căn đều bộ lọc. */
body[data-page="user"] .stats-actionbar{display:grid;grid-template-columns:minmax(190px,1fr) minmax(240px,420px) auto;align-items:end;gap:14px}
body[data-page="user"] .stats-provider-filter{display:grid;gap:6px;min-width:0}
body[data-page="user"] .stats-provider-filter span{color:#6e8199;font-size:10px;font-weight:900;letter-spacing:.08em}
body[data-page="user"] .stats-provider-filter select{width:100%;height:40px;padding:0 38px 0 12px;border:1px solid #c8daf0;border-radius:11px;background:#fff;color:#183e68;font-weight:700}
body[data-page="user"] .stats-kpis:has(> article:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-page="user"] .stats-kpis article.speed{border-top-color:#177bd1}
body[data-page="user"] .stats-kpis article.speed b{color:#215bc9;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body[data-page="user"] .stats-hourly-section{margin-top:18px}
body[data-page="user"] .lookup-error-title{margin-bottom:6px;color:#c4273d;font-size:17px}
body[data-page="user"] .lookup-error-guidance{margin:4px auto 0;color:#d71935;font-weight:850;line-height:1.6;text-align:center}
body[data-page="user"] .lookup-error-guidance b{color:#b90724;font-weight:950}
@media(max-width:1100px){body[data-page="user"] .stats-actionbar{grid-template-columns:1fr 1fr}body[data-page="user"] .stats-actionbar>div{grid-column:1/-1;justify-content:flex-end}body[data-page="user"] .stats-kpis:has(> article:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){body[data-page="user"] .stats-actionbar{grid-template-columns:1fr}body[data-page="user"] .stats-actionbar>div{grid-column:auto;justify-content:stretch}body[data-page="user"] .stats-actionbar button{flex:1}body[data-page="user"] .stats-kpis:has(> article:nth-child(5)){grid-template-columns:1fr}}

/* V38: ma trận ngang cố định nhà bên thứ 3. */
body[data-page="user"] .provider-matrix-wrap{width:100%;overflow-x:auto;border-top:1px solid #d9e5f2;scrollbar-color:#73a4dc #eaf2fb}
body[data-page="user"] .provider-matrix{min-width:max-content;border-collapse:collapse;background:#fff}
body[data-page="user"] .provider-matrix th,body[data-page="user"] .provider-matrix td{min-width:112px;padding:12px 10px;border-right:1px solid #d8e4f1;border-bottom:1px solid #d8e4f1;text-align:center;white-space:nowrap}
body[data-page="user"] .provider-matrix th{background:#e9f3ff;color:#17456f;font-size:11px;font-weight:900}
body[data-page="user"] .provider-matrix td{background:#fff9d9;color:#d72b50;font-size:18px;font-weight:900}
body[data-page="user"] .provider-matrix th:first-child,body[data-page="user"] .provider-matrix td:first-child{position:sticky;left:0;z-index:2}
body[data-page="user"] .stats-table-title>div{display:flex;flex-wrap:wrap;gap:8px}
body[data-page="user"] #dailyConfigureProviders{border:1px solid #cadcf1;background:#fff;color:#245b91}

/* V39: danh sách đơn xuất khoản chi tiết. */
body[data-page="user"] .withdrawal-order-tools{display:block;margin:14px 0 10px}
body[data-page="user"] .withdrawal-order-tools input{width:100%;height:42px;padding:0 14px;border:1px solid #cbdcf0;border-radius:11px;background:#fff;color:#183e68}
body[data-page="user"] .withdrawal-orders-section .stats-table-title>span{color:#6b7f96;font-size:12px;font-weight:700}
body[data-page="user"] .withdrawal-orders-section .stats-wide-wrap{max-height:680px}
body[data-page="user"] .withdrawal-orders-table{min-width:1240px}
body[data-page="user"] .withdrawal-orders-table th{position:sticky;top:0;z-index:3;background:#e9f3ff;text-align:center;white-space:normal}
body[data-page="user"] .withdrawal-orders-table td{height:38px;text-align:center;white-space:nowrap}
body[data-page="user"] .withdrawal-orders-table td:nth-child(1),body[data-page="user"] .withdrawal-orders-table td:nth-child(5),body[data-page="user"] .withdrawal-orders-table td:nth-child(7),body[data-page="user"] .withdrawal-orders-table td:nth-child(8){text-align:left}
body[data-page="user"] .withdrawal-orders-table td.speed-cell{color:#3033be;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800}
body[data-page="user"] .withdrawal-orders-table td.amount-cell{color:#0a5ca8;font-weight:800}
body[data-page="user"] .withdrawal-orders-table tbody tr:nth-child(even) td{background:#f8fbff}
body[data-page="user"] .withdrawal-orders-table tbody tr:hover td{background:#fff6ce}

/* V29 FINAL — centered close control, independent accordion groups and dimensional SVG icons. */
body[data-page="user"] .user-menu-close{
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  line-height:0!important;
}
body[data-page="user"] .user-menu-close svg{
  display:block;
  width:18px;
  height:18px;
  margin:0!important;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:2.8;
  stroke-linecap:round;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
body[data-page="user"] .user-menu-group-toggle i{
  position:relative;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid rgba(96,174,232,.34);
  border-radius:11px;
  background:linear-gradient(145deg,#f8fdff 3%,#d8f2ff 48%,#a9daf8 100%)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.96),inset -2px -3px 7px rgba(27,115,181,.16),0 5px 11px rgba(27,104,163,.17);
  transform:translateZ(0);
  transition:transform .18s ease,box-shadow .18s ease;
}
body[data-page="user"] .user-menu-group-toggle i::after{
  content:"";
  position:absolute;
  inset:2px 3px auto;
  height:42%;
  border-radius:9px 9px 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,0));
  pointer-events:none;
}
body[data-page="user"] .user-menu-group-toggle i svg{
  position:relative;
  z-index:1;
  display:block;
  width:23px;
  height:23px;
  overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(5,82,143,.25));
}
body[data-page="user"] .user-menu-group-toggle:hover i{
  transform:translateY(-1px) scale(1.04);
  box-shadow:inset 1px 1px 0 #fff,inset -2px -3px 7px rgba(27,115,181,.2),0 7px 14px rgba(27,104,163,.23);
}
body[data-page="user"] .user-menu-group-toggle[aria-expanded="true"] i{
  background:linear-gradient(145deg,#f3fcff,#c7ebff 48%,#7ec4f2)!important;
  box-shadow:inset 1px 1px 0 #fff,inset -2px -3px 8px rgba(19,99,169,.24),0 0 0 2px rgba(42,151,235,.11),0 6px 13px rgba(27,104,163,.22);
}
body.dark-mode[data-page="user"] .user-menu-group-toggle i{
  border-color:#345c78;
  background:linear-gradient(145deg,#2c5069,#17354d 52%,#0d2335)!important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset -2px -3px 7px rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.28);
}
body.dark-mode[data-page="user"] .user-menu-close svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .user-menu-group-toggle i{transition:none!important}}

/* V30 FINAL — payment statistics tabs and reference-compatible tables. */
body[data-page="user"] .stats-view-tabs{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:4px 0 20px;padding:5px;border:1px solid #dce5f3;border-radius:13px;background:#edf2f9;overflow-x:auto}
body[data-page="user"] .stats-view-tabs button{min-height:38px;padding:0 17px;border:0;border-radius:10px;background:transparent;color:#30445d;font-size:12px;font-weight:900;white-space:nowrap;cursor:pointer}
body[data-page="user"] .stats-view-tabs button.active{background:linear-gradient(135deg,#5851e9,#4037dc);color:#fff;box-shadow:0 6px 14px rgba(71,62,219,.25)}
body[data-page="user"] .stats-speed-table thead tr:first-child th:nth-child(n+4):nth-child(-n+5){background:#fff8e6;color:#b45f00}
body[data-page="user"] .stats-speed-table thead tr:first-child th:nth-child(n+6):nth-child(-n+7){background:#fff3e7;color:#a94b00}
body[data-page="user"] .stats-speed-table thead tr:first-child th:nth-child(n+8):nth-child(-n+9){background:#fff0f4;color:#be1748}
body[data-page="user"] .stats-speed-table thead th{white-space:nowrap;text-align:center;vertical-align:middle}
body[data-page="user"] .stats-speed-table tbody tr:first-child td{background:#fff9dd;border-bottom-color:#ffc83d;font-weight:800}
body[data-page="user"] .stats-speed-table td.speed-cell{color:#2920a7;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:11px;font-weight:800;white-space:nowrap}
body[data-page="user"] .stats-overview-table{min-width:980px}
body[data-page="user"] .stats-overview-table th:nth-child(3){color:#07966d}body[data-page="user"] .stats-overview-table th:nth-child(4){color:#e22951}body[data-page="user"] .stats-overview-table th:nth-child(5){color:#5446e9}
body[data-page="user"] .stats-overview-table td:nth-child(n+2){text-align:right}
@media(max-width:720px){body[data-page="user"] .stats-view-tabs{width:100%}body[data-page="user"] .stats-view-tabs button{flex:1}}

/* V31 FINAL — channel/type filters for deposit order data. */
body[data-page="user"] .forms-filter-selects{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;min-width:min(620px,56%)}
body[data-page="user"] .forms-filter-selects label{display:grid;gap:6px;flex:1;color:#57718d;font-size:10px;font-weight:900;letter-spacing:.06em}
body[data-page="user"] .forms-filter-selects select{width:100%;min-width:210px;min-height:42px;padding:0 38px 0 12px;border:1px solid #bfd5ee;border-radius:10px;background:#fff;color:#173b60;font-size:12px;font-weight:750;outline:none}
body[data-page="user"] .forms-filter-selects select:focus{border-color:#299fe9;box-shadow:0 0 0 3px rgba(41,159,233,.13)}
body[data-page="user"] .forms-data-table .amount-cell{color:#0756a5!important;font-variant-numeric:tabular-nums;font-weight:800}
@media(max-width:920px){body[data-page="user"] .forms-filter-banner{align-items:stretch;flex-direction:column}body[data-page="user"] .forms-filter-selects{width:100%;min-width:0}}
@media(max-width:620px){body[data-page="user"] .forms-filter-selects{display:grid;grid-template-columns:1fr}body[data-page="user"] .forms-filter-selects select{min-width:0}}

/* V32 FINAL — five withdrawal KPIs with value-only copy controls. */
body[data-page="user"] .stats-kpis.timing-kpis-five{grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-page="user"] .stats-kpis.timing-kpis-five article{position:relative;min-width:0;padding-right:52px}
body[data-page="user"] .stats-kpis.timing-kpis-five article:nth-child(4){border-left-color:#eea300}
body[data-page="user"] .stats-kpis.timing-kpis-five .kpi-copy{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:31px;height:31px;padding:0;border:1px solid #c9dcf4;border-radius:9px;background:linear-gradient(145deg,#fff,#eaf4ff);color:#236dac;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(39,101,160,.12);transition:transform .16s ease,box-shadow .16s ease}
body[data-page="user"] .stats-kpis.timing-kpis-five .kpi-copy:hover{transform:translateY(-1px);box-shadow:0 7px 14px rgba(39,101,160,.2)}
body[data-page="user"] .stats-kpis.timing-kpis-five .pending b{color:#d98700}
@media(max-width:1100px){body[data-page="user"] .stats-kpis.timing-kpis-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){body[data-page="user"] .stats-kpis.timing-kpis-five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){body[data-page="user"] .stats-kpis.timing-kpis-five{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .stats-kpis.timing-kpis-five .kpi-copy{transition:none}}
/* V28 FINAL — visible Moon/Earth with absolute asset paths. */
body[data-page="user"] .login-earth{display:block!important;width:clamp(270px,27vw,430px)!important;right:clamp(15px,8vw,145px)!important;bottom:clamp(-10px,1vw,24px)!important;opacity:1!important;background-image:none!important;background-size:contain!important;background-repeat:no-repeat!important;animation:login-earth-turn 60s linear infinite!important;image-rendering:auto}
body[data-page="user"] .login-moon{display:block!important;width:clamp(130px,15vw,220px)!important;left:clamp(12px,8vw,140px)!important;bottom:clamp(52px,9vh,105px)!important;opacity:.94!important;background-image:none!important;background-size:contain!important;background-repeat:no-repeat!important;animation:login-moon-float 8s ease-in-out infinite!important;image-rendering:auto}
@media(max-width:720px){body[data-page="user"] .login-earth{width:220px!important;right:-45px!important;bottom:-12px!important;opacity:.72!important}body[data-page="user"] .login-moon{width:112px!important;left:-20px!important;bottom:58px!important;opacity:.62!important}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .login-earth,body[data-page="user"] .login-moon{animation:none!important}}
/* V27 FINAL atom sizing after legacy login rules. */
body[data-page="user"] .login-solar.login-atom{width:clamp(170px,18vw,250px)!important;height:clamp(170px,18vw,250px)!important;right:clamp(18px,7vw,120px)!important;top:clamp(18px,6vh,78px)!important;animation:loginAtomFloat 9s ease-in-out infinite!important}
@media(max-width:720px){body[data-page="user"] .login-solar.login-atom{width:135px!important;height:135px!important;right:-12px!important;top:10px!important;opacity:.68}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .login-solar.login-atom{animation:none!important}}

/* V27 Login User — atomic orbit over the existing Earth/Moon gradient. */
body[data-page="user"] .login-atom{width:clamp(170px,18vw,250px);height:clamp(170px,18vw,250px);right:clamp(18px,7vw,120px);top:clamp(18px,6vh,78px);animation:loginAtomFloat 9s ease-in-out infinite!important;will-change:transform}
body[data-page="user"] .login-atom .atom-nucleus{z-index:3;width:30px;height:30px;left:calc(50% - 15px);top:calc(50% - 15px);background:radial-gradient(circle at 35% 30%,#fff,#62c9ff 34%,#177ddd 70%,#0754a5);box-shadow:0 0 0 8px rgba(61,167,236,.10),0 0 28px rgba(32,142,218,.48)}
body[data-page="user"] .login-atom .login-orbit{display:block;position:absolute;left:5%;top:35%;width:90%;height:30%;inset:auto;border:1.5px solid rgba(36,142,220,.42);border-radius:50%}
body[data-page="user"] .login-atom .login-orbit-a{transform:rotate(0deg)}
body[data-page="user"] .login-atom .login-orbit-b{transform:rotate(60deg)}
body[data-page="user"] .login-atom .login-orbit-c{transform:rotate(-60deg)}
body[data-page="user"] .login-atom .login-planet{z-index:4;width:10px;height:10px;background:#f9fdff;border:2px solid #2ba4e9;box-shadow:0 0 0 4px rgba(43,164,233,.10),0 0 12px #42b8f4}
body[data-page="user"] .login-atom .login-planet-a{left:4%;top:calc(50% - 5px)}
body[data-page="user"] .login-atom .login-planet-b{left:70%;top:15%;bottom:auto}
body[data-page="user"] .login-atom .login-planet-c{right:18%;bottom:18%}
@keyframes loginAtomFloat{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(-8px,9px,0) rotate(2deg)}}
@media(max-width:720px){body[data-page="user"] .login-atom{width:135px;height:135px;right:-12px;top:10px;opacity:.68}}
@media(prefers-reduced-motion:reduce){body[data-page="user"] .login-atom{animation:none!important}}

/* V25 post-login galaxy ambience: transform/opacity only for smooth rendering. */
body[data-page="user"].user-authenticated{position:relative;min-height:100vh;background:radial-gradient(circle at 15% 10%,rgba(107,174,255,.16),transparent 32%),radial-gradient(circle at 88% 20%,rgba(89,225,198,.12),transparent 30%),linear-gradient(145deg,#f4f8ff,#f8fbff 54%,#f2fbf9);overflow-x:hidden}
body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{content:"";position:fixed;z-index:0;pointer-events:none;will-change:transform,opacity}
body[data-page="user"].user-authenticated::before{inset:-28vmax;border-radius:50%;opacity:.45;background:radial-gradient(circle at 22% 36%,#fff 0 1px,transparent 2px),radial-gradient(circle at 68% 28%,rgba(56,139,230,.75) 0 1px,transparent 2px),radial-gradient(circle at 74% 66%,rgba(39,201,181,.65) 0 1.5px,transparent 2.5px),radial-gradient(circle at 38% 78%,rgba(102,111,238,.52) 0 1px,transparent 2px);background-size:78px 78px,126px 126px,168px 168px,220px 220px;animation:userStarDrift 28s linear infinite}
body[data-page="user"].user-authenticated::after{left:50%;top:48%;width:min(1150px,105vw);height:min(520px,48vw);border:1px solid rgba(75,155,222,.16);border-radius:50%;box-shadow:0 0 0 52px rgba(75,155,222,.025),0 0 0 115px rgba(63,205,183,.02);transform:translate(-50%,-50%) rotate(-8deg);animation:userGalaxyLoop 18s ease-in-out infinite}
body[data-page="user"].user-authenticated .user-top-card,body[data-page="user"].user-authenticated .user-card-panel{position:relative;z-index:1;background:rgba(255,255,255,.91);backdrop-filter:blur(10px);box-shadow:0 18px 45px rgba(33,78,125,.10)}
body[data-page="user"].user-authenticated .user-app{position:relative;z-index:1}
body[data-page="user"].user-authenticated .user-card-panel::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,#6cc7ff 35%,#75e4cf 65%,transparent);opacity:.72}
body.dark-mode[data-page="user"].user-authenticated{background:radial-gradient(circle at 18% 10%,rgba(35,105,173,.22),transparent 34%),radial-gradient(circle at 84% 18%,rgba(30,142,126,.16),transparent 30%),#07111d}
body.dark-mode[data-page="user"].user-authenticated .user-top-card,body.dark-mode[data-page="user"].user-authenticated .user-card-panel{background:rgba(12,25,40,.9)}
@keyframes userStarDrift{to{transform:translate3d(44px,-28px,0) rotate(.6deg)}}
@keyframes userGalaxyLoop{0%,100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1);opacity:.58}50%{transform:translate(-50%,-50%) rotate(-5deg) scale(1.025);opacity:.9}}
@media(max-width:700px){body[data-page="user"].user-authenticated::after{width:150vw;height:70vw;top:42%;opacity:.55}body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{animation:none!important}}

/* V8.3: Tải biểu và Thống kê Excel là hai khu vực riêng. */
body[data-page="user"] .excel-tool-panel { max-width: 1180px; padding: clamp(18px, 3vw, 34px); background: linear-gradient(145deg, #fff 0%, #fbfdff 52%, #f2f8ff 100%); }
body[data-page="user"] .excel-tool-head { text-align: center; margin-bottom: 22px; }
body[data-page="user"] .excel-tool-head p { margin: 0 0 4px; color: #1185db; font-size: 12px; font-weight: 950; letter-spacing: .16em; }
body[data-page="user"] .excel-tool-head h2 { margin: 0; color: #084d93; font-size: clamp(21px, 3vw, 31px); }
body[data-page="user"] .excel-tool-head span { display: block; margin-top: 7px; color: #7183a0; }
body[data-page="user"] .excel-tool-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; overflow-x: auto; padding: 4px; }
body[data-page="user"] .excel-tool-tabs button { min-height: 47px; padding: 0 20px; white-space: nowrap; border: 1px solid #cbdcf7; border-radius: 15px; background: #fff; color: #234d7a; font-weight: 900; box-shadow: 0 4px 13px rgba(31, 85, 141, .05); }
body[data-page="user"] .excel-tool-tabs button.active { color: #fff; border-color: #e9447a; background: linear-gradient(135deg, #fb668d, #e62b67); box-shadow: 0 11px 23px rgba(226, 42, 99, .25); }
body[data-page="user"] .excel-tool-panel.statistics .excel-tool-tabs button.active { border-color: #5145ec; background: linear-gradient(135deg, #5d55fa, #4338d8); box-shadow: 0 11px 23px rgba(67, 56, 216, .24); }
body[data-page="user"] .excel-dropzone { min-height: 235px; display: grid; place-content: center; gap: 9px; padding: 25px; text-align: center; border: 2px dashed #f58ba9; border-radius: 22px; background: linear-gradient(135deg, #fffafa, #fff5f8); }
body[data-page="user"] .excel-dropzone.drag-over { border-style: solid; border-color: #168de9; background: linear-gradient(135deg, #edf8ff, #f6fbff); box-shadow: inset 0 0 0 4px rgba(22, 141, 233, .1), 0 14px 30px rgba(29, 126, 222, .12); transform: scale(1.006); }
body[data-page="user"] .excel-dropzone.drag-over > b { color: #0873c3; }
body[data-page="user"] .statistics .excel-dropzone { border-color: #b9c4ff; background: linear-gradient(135deg, #fafbff, #f4f5ff); }
body[data-page="user"] .excel-upload-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 5px; border-radius: 19px; background: #ffe4ec; color: #e83b70; font-size: 42px; line-height: 1; }
body[data-page="user"] .statistics .excel-upload-icon { color: #4f46e5; background: #e9ebff; }
body[data-page="user"] .excel-dropzone > b { color: #73213e; font-size: 20px; } body[data-page="user"] .statistics .excel-dropzone > b { color: #1e296d; }
body[data-page="user"] .excel-dropzone > span, body[data-page="user"] .excel-dropzone > small { color: #9c5a70; } body[data-page="user"] .statistics .excel-dropzone > span, body[data-page="user"] .statistics .excel-dropzone > small { color: #6670a6; }
body[data-page="user"] .excel-tool-result { margin-top: 21px; }
body[data-page="user"] .excel-persistent-actions { display: none; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin: -4px 0 17px; }
body[data-page="user"] .excel-persistent-actions.visible { display: flex; }
body[data-page="user"] .excel-persistent-actions button { min-height: 38px; padding: 0 13px; border: 1px solid #c8daf4; border-radius: 10px; background: #fff; color: #174f8d; font-size: 12px; font-weight: 900; white-space: nowrap; }
body[data-page="user"] .excel-persistent-actions button:last-child { border-color: #ffc5cf; color: #c73755; background: #fff7f8; }
body[data-page="user"] .excel-dropzone.has-cached-data { display: none; }
body[data-page="user"] .excel-persistent-actions button, body[data-page="user"] .report-table-tools button, body[data-page="user"] .t3-detail-head button, body[data-page="user"] .stats-actionbar button, body[data-page="user"] .stats-table-title button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(90, 125, 220, .18); border-radius: 999px; background: linear-gradient(135deg, #edf7ff, #fff); color: #145595; font-size: 12px; font-weight: 950; letter-spacing: .01em; box-shadow: 0 7px 17px rgba(33, 92, 159, .1); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
body[data-page="user"] .excel-persistent-actions button:hover, body[data-page="user"] .report-table-tools button:hover, body[data-page="user"] .t3-detail-head button:hover, body[data-page="user"] .stats-actionbar button:hover, body[data-page="user"] .stats-table-title button:hover { filter: brightness(1.02); box-shadow: 0 10px 22px rgba(33, 92, 159, .18); transform: translateY(-1px); }
body[data-page="user"] .excel-persistent-actions #excelCopy, body[data-page="user"] .report-table-tools #formsCopyAll, body[data-page="user"] .t3-detail-head #t3CopyAll, body[data-page="user"] .stats-actionbar #statsCopyAll, body[data-page="user"] .stats-actionbar #timingCopyAll, body[data-page="user"] .stats-table-title button { border-color: transparent; background: linear-gradient(135deg, #24a7ec, #2460e8); color: #fff; }
body[data-page="user"] .excel-persistent-actions #excelExport, body[data-page="user"] .report-table-tools #formsExport, body[data-page="user"] .stats-actionbar #statsExport, body[data-page="user"] .stats-actionbar #timingExport { border-color: transparent; background: linear-gradient(135deg, #11b985, #048d68); color: #fff; }
body[data-page="user"] .excel-persistent-actions #excelReset { border-color: #ffc5cf; background: linear-gradient(135deg, #fff2f4, #fff); color: #cf3153; }
body[data-page="user"] .excel-file-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 11px; color: #526c8d; }
body[data-page="user"] .excel-file-meta b { color: #104f90; }
body[data-page="user"] .excel-column-map { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; padding: 11px 13px; border-radius: 12px; background: #f0f7ff; color: #5d7491; font-size: 12px; }
body[data-page="user"] .excel-column-map b { color: #245686; }
body[data-page="user"] .excel-column-map span { padding: 3px 7px; border-radius: 999px; background: #fff; border: 1px solid #d4e5fa; }
body[data-page="user"] .excel-formula { margin: -4px 0 15px; padding: 10px 12px; border-left: 3px solid #4f46e5; border-radius: 8px; background: #f4f3ff; color: #5a5b83; font-size: 13px; }
@media (max-width: 720px) { body[data-page="user"] .excel-tool-tabs { justify-content: flex-start; } body[data-page="user"] .excel-tool-tabs button { min-width: max-content; padding: 0 16px; } body[data-page="user"] .excel-dropzone { min-height: 210px; } body[data-page="user"] .excel-file-meta { display: grid; } }

/* Tải biểu: bản 88CLB, theo bố cục giám sát T3 / nạp / rút. */
body[data-page="user"] .forms-filter-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 17px 20px; border: 1px solid #bcd8fb; border-radius: 17px; background: linear-gradient(100deg, #f5fbff, #fff); }
body[data-page="user"] .forms-filter-banner span { display: block; color: #477198; font-size: 13px; } body[data-page="user"] .forms-filter-banner strong { display: block; margin-top: 4px; color: #0756a5; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: clamp(18px, 2.5vw, 26px); } body[data-page="user"] .forms-filter-banner em { font-size: 14px; font-style: normal; }
body[data-page="user"] .forms-filter-banner select { min-width: 240px; }
body[data-page="user"] .forms-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 18px; }
body[data-page="user"] .forms-kpis article { padding: 20px; border: 1px solid #cce0f9; border-left: 4px solid #36a9f3; border-radius: 17px; background: #fff; } body[data-page="user"] .forms-kpis article.money { border-left-color: #10b981; } body[data-page="user"] .forms-kpis span { display: block; color: #6380a1; font-weight: 900; font-size: 12px; } body[data-page="user"] .forms-kpis b { display: block; margin-top: 8px; color: #0c4d92; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: clamp(24px, 3vw, 32px); } body[data-page="user"] .forms-kpis .money b, body[data-page="user"] .amount-cell { color: #058c67; }
body[data-page="user"] .forms-type { display: inline-block; padding: 3px 7px; border: 1px solid #c9dcfa; border-radius: 6px; background: #eef6ff; color: #346490; font-size: 11px; font-weight: 800; }
body[data-page="user"] .t3-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
body[data-page="user"] .t3-kpis article { min-height: 105px; padding: 16px; border: 1px solid #d7e6fa; border-top: 4px solid #1898e8; border-radius: 16px; background: rgba(255,255,255,.91); } body[data-page="user"] .t3-kpis article:nth-child(2) { border-top-color: #6d5dfc; } body[data-page="user"] .t3-kpis .success { border-top-color: #0ab87a; } body[data-page="user"] .t3-kpis .failed { border-top-color: #f34c6e; } body[data-page="user"] .t3-kpis .pending { border-top-color: #f5a20b; }
body[data-page="user"] .t3-kpis span { display: block; color: #6682a4; font-size: 11px; font-weight: 950; } body[data-page="user"] .t3-kpis b { display: block; margin-top: 7px; color: #084e94; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 25px; } body[data-page="user"] .t3-kpis small { color: #637c98; font-size: 10px; font-weight: 800; } body[data-page="user"] .t3-kpis .success b { color: #07996a; } body[data-page="user"] .t3-kpis .failed b { color: #e63c60; } body[data-page="user"] .t3-kpis .pending b { color: #e28600; }
body[data-page="user"] .t3-warning { margin-bottom: 22px; padding: 20px; border: 1px solid #ffabbc; border-radius: 20px; background: linear-gradient(145deg, #fff7f8, #fff); }
body[data-page="user"] .t3-warning-title { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #ffd7df; } body[data-page="user"] .t3-warning-title > span { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #f43f5e; color: #fff; font-weight: 950; } body[data-page="user"] .t3-warning-title b { display: block; color: #a82747; } body[data-page="user"] .t3-warning-title small { display: block; margin-top: 3px; color: #c45971; }
body[data-page="user"] .t3-warning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } body[data-page="user"] .t3-warning-grid article { padding: 14px; border: 1px solid #ffcad4; border-radius: 15px; background: #fff; } body[data-page="user"] .t3-warning-grid article > div { display: flex; justify-content: space-between; gap: 8px; } body[data-page="user"] .t3-warning-grid article > div b { overflow: hidden; color: #66253a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } body[data-page="user"] .t3-warning-grid em { padding: 3px 6px; border-radius: 5px; background: #ffe2e8; color: #bd3655; font-size: 9px; font-style: normal; font-weight: 950; white-space: nowrap; } body[data-page="user"] .t3-warning-grid p { margin: 12px 0 9px; padding-bottom: 8px; border-bottom: 1px solid #ffe0e5; color: #bf526b; font-size: 12px; } body[data-page="user"] .t3-warning-grid strong { float: right; color: #e63c60; font-family: ui-monospace, monospace; font-size: 18px; } body[data-page="user"] .t3-warning-grid footer { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; } body[data-page="user"] .t3-warning-grid footer span { color: #bd7182; font-size: 10px; } body[data-page="user"] .t3-warning-grid footer b { display: block; margin-top: 2px; color: #7c3048; }
body[data-page="user"] .t3-detail { border: 1px solid #c9ddf8; border-radius: 18px; overflow: hidden; background: #fff; } body[data-page="user"] .t3-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 16px 19px; background: #f5faff; color: #174f86; } body[data-page="user"] .t3-detail-head input { width: min(290px, 100%); min-height: 38px; } body[data-page="user"] .t3-table th { cursor: pointer; } body[data-page="user"] .t3-table td:not(:first-child), body[data-page="user"] .t3-table th:not(:first-child) { text-align: right; } body[data-page="user"] .success-cell { color: #079a6b !important; font-weight: 900; } body[data-page="user"] .failed-cell { color: #e53e60 !important; font-weight: 900; } body[data-page="user"] .pending-cell { color: #df8a00 !important; font-weight: 900; } body[data-page="user"] .t3-rate { display: inline-block; padding: 3px 8px; border-radius: 8px; font-family: ui-monospace, monospace; font-weight: 950; } body[data-page="user"] .t3-rate.good { background: #ddfaee; color: #087c56; } body[data-page="user"] .t3-rate.mid { background: #fff1d6; color: #a45c00; } body[data-page="user"] .t3-rate.bad { background: #ffe4e8; color: #bd3152; }
@media (max-width: 900px) { body[data-page="user"] .t3-kpis { grid-template-columns: repeat(3, 1fr); } body[data-page="user"] .t3-warning-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { body[data-page="user"] .forms-filter-banner, body[data-page="user"] .t3-detail-head { align-items: stretch; flex-direction: column; } body[data-page="user"] .forms-filter-banner select, body[data-page="user"] .t3-detail-head input { width: 100%; } body[data-page="user"] .forms-kpis { grid-template-columns: 1fr; } body[data-page="user"] .t3-kpis { grid-template-columns: repeat(2, 1fr); } body[data-page="user"] .t3-kpis article:last-child { grid-column: span 2; } body[data-page="user"] .t3-warning-grid { grid-template-columns: 1fr; } }

/* Thống kê: báo cáo cổng thanh toán và thời gian xử lý rút. */
body[data-page="user"] .statistics .excel-dropzone { border-color: #aeb8ff; background: linear-gradient(140deg, #f9faff, #f2f5ff); } body[data-page="user"] .statistics .report-upload { background: linear-gradient(135deg, #6057ed, #3d36d9); }
body[data-page="user"] .stats-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; padding: 13px 17px; border: 1px solid #dce4f1; border-radius: 15px; background: #fff; } body[data-page="user"] .stats-actionbar > span { padding: 8px 11px; border-radius: 10px; background: #eef2ff; color: #4d46d0; font-size: 13px; } body[data-page="user"] .stats-actionbar > div { display: flex; gap: 9px; } body[data-page="user"] .stats-actionbar button, body[data-page="user"] .stats-table-title button { min-height: 37px; padding: 0 13px; border: 0; border-radius: 10px; background: #4c45e7; color: #fff; font-size: 12px; font-weight: 900; } body[data-page="user"] .stats-actionbar #statsExport, body[data-page="user"] .stats-actionbar #timingExport { background: #079b70; }
body[data-page="user"] .stats-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } body[data-page="user"] .stats-kpis article { min-height: 102px; padding: 16px; border: 1px solid #dce3f0; border-left: 4px solid #5b52ee; border-radius: 16px; background: #fff; } body[data-page="user"] .stats-kpis article:nth-child(2) { border-left-color: #0fb87d; } body[data-page="user"] .stats-kpis article:nth-child(3) { border-left-color: #7a5af8; } body[data-page="user"] .stats-kpis .money { border-left-color: #e49800; } body[data-page="user"] .stats-kpis .failed { border-left-color: #ef4765; } body[data-page="user"] .stats-kpis span { display: block; color: #8291a8; font-size: 11px; font-weight: 950; } body[data-page="user"] .stats-kpis b { display: block; margin-top: 7px; color: #132e5f; font-size: clamp(20px, 2.5vw, 27px); font-weight: 950; } body[data-page="user"] .stats-kpis .success b { color: #079b70; } body[data-page="user"] .stats-kpis .failed b { color: #e83b58; } body[data-page="user"] .stats-kpis .money b { color: #c77700; font-size: clamp(16px, 2vw, 24px); } body[data-page="user"] .stats-kpis small { display: block; margin-top: 4px; color: #71829b; font-weight: 800; font-size: 10px; }
body[data-page="user"] .stats-subtabs { display: flex; gap: 6px; margin-bottom: 15px; padding: 5px; border-radius: 13px; background: #edf1f8; width: max-content; max-width: 100%; } body[data-page="user"] .stats-subtabs button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #435671; font-size: 12px; font-weight: 900; } body[data-page="user"] .stats-subtabs button.active { background: #5149e9; color: #fff; box-shadow: 0 5px 12px rgba(81,73,233,.22); }
body[data-page="user"] .stats-table-section { border: 1px solid #d9e2ef; border-radius: 16px; overflow: hidden; background: #fff; } body[data-page="user"] .stats-table-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #173d70; font-size: 13px; } body[data-page="user"] .stats-wide-wrap { overflow: auto; max-height: 610px; } body[data-page="user"] .stats-wide-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; } body[data-page="user"] .stats-wide-table th, body[data-page="user"] .stats-wide-table td { padding: 9px 11px; border: 1px solid #dce4ef; text-align: right; white-space: nowrap; } body[data-page="user"] .stats-wide-table th { position: sticky; top: 0; z-index: 1; background: #eff4fb; color: #28496f; font-size: 10px; } body[data-page="user"] .stats-wide-table th:first-child, body[data-page="user"] .stats-wide-table th:nth-child(2), body[data-page="user"] .stats-wide-table td:first-child, body[data-page="user"] .stats-wide-table td:nth-child(2) { text-align: left; } body[data-page="user"] .stats-wide-table tbody tr:first-child { background: #fff9dc; font-weight: 900; } body[data-page="user"] .stats-wide-table td:nth-child(8), body[data-page="user"] .speed-cell { color: #4036c5; font-family: ui-monospace, "JetBrains Mono", monospace; font-weight: 900; } body[data-page="user"] .timing-table tfoot { background: #eef2ff; }
@media (max-width: 800px) { body[data-page="user"] .stats-kpis { grid-template-columns: repeat(2, 1fr); } body[data-page="user"] .stats-actionbar { align-items: stretch; flex-direction: column; } body[data-page="user"] .stats-actionbar > div { display: grid; grid-template-columns: 1fr 1fr; } body[data-page="user"] .stats-actionbar button { width: 100%; } body[data-page="user"] .stats-subtabs { overflow-x: auto; width: 100%; } body[data-page="user"] .stats-subtabs button { white-space: nowrap; } }

/* QTV giao diện dashboard mới theo mẫu */
body[data-page="admin"] {
    --qtv-sidebar: 242px;
    --qtv-page-bg: #f1f6fb;
    --qtv-border-soft: #dfe7f1;
    --qtv-brand-blue: #245fe8;
    --qtv-title: #111827;
    --qtv-admin-muted: #94a3b8;
    background: var(--qtv-page-bg) !important;
}

body[data-page="admin"] .qtv-shell {
    grid-template-columns: var(--qtv-sidebar) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    background: var(--qtv-page-bg);
}

body[data-page="admin"] .qtv-sidebar {
    top: 0;
    height: 100vh;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--qtv-border-soft);
    box-shadow: none;
    background: #fff;
    padding: 0 10px 16px;
}

body[data-page="admin"] .qtv-brand {
    min-height: 62px;
    padding: 8px 0 10px;
    border-bottom: 1px solid var(--qtv-border-soft);
}

body[data-page="admin"] .qtv-brand img {
    width: 216px;
    max-height: 48px;
    object-fit: contain;
    margin: 0 auto;
}

body[data-page="admin"] .qtv-brand strong {
    display: none;
}

body[data-page="admin"] .qtv-nav {
    display: grid;
    gap: 4px;
    padding-top: 22px;
}

body[data-page="admin"] .qtv-nav-section {
    padding: 12px 10px 4px;
    color: #a0aec0;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .12em;
}

body[data-page="admin"] .qtv-nav button {
    min-height: 36px;
    border-radius: 7px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    align-items: center;
    background: transparent;
    color: #1f2937;
    box-shadow: none;
    font-size: 14px;
}

body[data-page="admin"] .qtv-nav button span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #4b5563;
}

body[data-page="admin"] .qtv-nav button b {
    text-align: left;
    line-height: 1.22;
}

body[data-page="admin"] .qtv-nav button:hover {
    background: #edf5ff;
    color: #1d4ed8;
    transform: none;
}

body[data-page="admin"] .qtv-nav button.active {
    background: linear-gradient(135deg, #2557d6, #3b82f6);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .24);
    transform: none;
}

body[data-page="admin"] .qtv-nav button.active span {
    color: #fff;
}

body[data-page="admin"] .qtv-main {
    min-width: 0;
}

body[data-page="admin"] .qtv-header {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: 54px;
    border: 0;
    border-bottom: 1px solid var(--qtv-border-soft);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .96);
    padding: 8px 16px 8px 22px;
}

body[data-page="admin"] .qtv-header p {
    margin: 0;
    color: #8da0b8;
    font-size: 12px;
}

body[data-page="admin"] .qtv-header h1 {
    margin: 0;
    color: #1d4ed8;
    font-size: 15px;
    font-weight: 950;
}

body[data-page="admin"] .qtv-header-actions {
    gap: 10px;
}

body[data-page="admin"] #accountBadge {
    display: none;
}

body[data-page="admin"] .qtv-header-actions button {
    min-height: 32px;
    border-radius: 7px;
    padding: 0 13px;
    border: 1px solid #d8e3f0;
    box-shadow: none;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}

body[data-page="admin"] #logoutButton {
    color: #dc2626;
    border-color: #ef4444;
}

body[data-page="admin"] .qtv-content {
    padding: 24px 22px;
    display: grid;
    gap: 18px;
}

body[data-page="admin"] .qtv-page-head h2 {
    margin: 0;
    color: var(--qtv-title);
    font-size: 24px;
    line-height: 1.2;
}

body[data-page="admin"] .qtv-page-head p {
    margin: 4px 0 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
}

body[data-page="admin"] .qtv-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 14px;
}

body[data-page="admin"] .qtv-stat-card {
    min-height: 86px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--qtv-border-soft);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

body[data-page="admin"] .qtv-stat-card i {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    font-style: normal;
    font-size: 24px;
    font-weight: 900;
}

body[data-page="admin"] .qtv-stat-card i.blue { background: #315dd8; }
body[data-page="admin"] .qtv-stat-card i.cyan { background: #0aa5c4; }
body[data-page="admin"] .qtv-stat-card i.green { background: #18b75a; }
body[data-page="admin"] .qtv-stat-card i.red { background: #ef3b3b; }
body[data-page="admin"] .qtv-stat-card i.purple { background: #7c4bec; }
body[data-page="admin"] .qtv-stat-card i.orange { background: #f08a00; }

body[data-page="admin"] .qtv-stat-card strong {
    display: block;
    color: #172033;
    font-size: 24px;
    line-height: 1;
}

body[data-page="admin"] .qtv-stat-card span {
    display: block;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 850;
}

body[data-page="admin"] .dashboard-panels {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
}

body[data-page="admin"] .panel-card,
body[data-page="admin"] .qtv-table-wrap,
body[data-page="admin"] .qtv-empty-state {
    border: 1px solid var(--qtv-border-soft);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

body[data-page="admin"] .panel-card {
    padding: 0;
    overflow: hidden;
}

body[data-page="admin"] .panel-card > h2,
body[data-page="admin"] .panel-title {
    min-height: 54px;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--qtv-border-soft);
}

body[data-page="admin"] .panel-card > h2,
body[data-page="admin"] .panel-title h2 {
    color: #111827;
    font-size: 16px;
    font-weight: 950;
}

body[data-page="admin"] .panel-card > :not(h2):not(.panel-title):not(.qtv-table-wrap):not(.qtv-table-tools) {
    margin: 18px 20px;
}

body[data-page="admin"] .chart {
    min-height: 170px;
    padding: 18px 20px;
}

body[data-page="admin"] .chart b {
    width: 26px;
}

body[data-page="admin"] .qtv-activity-list {
    display: grid;
    gap: 0;
    padding: 10px 20px;
}

body[data-page="admin"] .qtv-activity-list div {
    min-height: 58px;
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--qtv-border-soft);
}

body[data-page="admin"] .qtv-activity-list div:last-child {
    border-bottom: 0;
}

body[data-page="admin"] .qtv-activity-list i {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: #22c55e;
}

body[data-page="admin"] .qtv-activity-list .dot-1 { background: #3b82f6; }
body[data-page="admin"] .qtv-activity-list .dot-2 { background: #7c3aed; }
body[data-page="admin"] .qtv-activity-list .dot-3 { background: #f59e0b; }

body[data-page="admin"] .qtv-activity-list b {
    display: block;
    color: #111827;
    font-size: 14px;
}

body[data-page="admin"] .qtv-activity-list small {
    color: #94a3b8;
    font-weight: 750;
}

body[data-page="admin"] .qtv-recent-table .qtv-table-tools {
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--qtv-border-soft);
}

body[data-page="admin"] .qtv-table th {
    background: #f7faff;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
}

body[data-page="admin"] .qtv-table td {
    color: #0f172a;
    font-size: 13px;
}

body[data-page="admin"] .qtv-form {
    padding: 18px 20px;
}

body[data-page="admin"] .qtv-form input,
body[data-page="admin"] .qtv-form select,
body[data-page="admin"] .qtv-form textarea,
body[data-page="admin"] .qtv-search,
body[data-page="admin"] .admin-toolbar input,
body[data-page="admin"] .admin-toolbar select {
    min-height: 40px;
    border-radius: 7px;
}

body[data-page="admin"] .qtv-form button,
body[data-page="admin"] .panel-title button,
body[data-page="admin"] .qtv-export,
body[data-page="admin"] .row-actions button {
    min-height: 36px;
    border-radius: 7px;
    box-shadow: none;
}

body[data-page="admin"] .qtv-locked .qtv-sidebar {
    display: none;
}

body.qtv-dark[data-page="admin"] {
    --qtv-page-bg: #0b1220;
    --qtv-border-soft: #1e293b;
    background: #0b1220 !important;
}

body.qtv-dark[data-page="admin"] .qtv-sidebar,
body.qtv-dark[data-page="admin"] .qtv-header,
body.qtv-dark[data-page="admin"] .panel-card,
body.qtv-dark[data-page="admin"] .qtv-table-wrap {
    background: #0f172a;
}

body.qtv-dark[data-page="admin"] .qtv-page-head h2,
body.qtv-dark[data-page="admin"] .panel-card > h2,
body.qtv-dark[data-page="admin"] .panel-title h2,
body.qtv-dark[data-page="admin"] .qtv-stat-card strong,
body.qtv-dark[data-page="admin"] .qtv-activity-list b,
body.qtv-dark[data-page="admin"] .qtv-table td {
    color: #e5eefc;
}

body.qtv-dark[data-page="admin"] .qtv-nav button {
    color: #cbd5e1;
}

body.qtv-dark[data-page="admin"] .qtv-stat-card,
body.qtv-dark[data-page="admin"] .qtv-header-actions button,
body.qtv-dark[data-page="admin"] .qtv-table th {
    background: #111827;
}

@media (max-width: 980px) {
    body[data-page="admin"] .qtv-shell {
        grid-template-columns: 1fr;
    }

    body[data-page="admin"] .qtv-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--qtv-border-soft);
    }

    body[data-page="admin"] .qtv-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="admin"] .qtv-nav-section {
        grid-column: 1 / -1;
    }

    body[data-page="admin"] .qtv-dashboard-stats,
    body[data-page="admin"] .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

/* Final: bank + account stay equal on one row, check button below */
body[data-page="user"] .user-lookup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body[data-page="user"] .lookup-inline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

body[data-page="user"] .lookup-inline-row > .smart-bank,
body[data-page="user"] .lookup-inline-row > label {
    min-width: 0;
    width: 100%;
}

body[data-page="user"] .lookup-inline-row .smart-bank-trigger,
body[data-page="user"] .lookup-inline-row input {
    width: 100%;
    height: 54px;
    min-height: 54px;
    box-sizing: border-box;
}

body[data-page="user"] .lookup-inline-row .smart-bank-trigger {
    align-items: center;
}

body[data-page="user"] .user-lookup-form > button {
    width: 100%;
    height: 54px;
    min-height: 54px;
    margin-top: 0;
}

body[data-page="user"] .smart-bank-list img {
    transform: translateZ(0);
    will-change: auto;
}

@media (max-width: 560px) {
    body[data-page="user"] .lookup-inline-row {
        grid-template-columns: 1fr;
    }
}

/* Final polish: equal buttons and no visual delay */
body[data-page="user"] .user-tabs {
    align-items: stretch;
}

body[data-page="user"] .user-tabs button {
    width: 100%;
    min-height: 46px;
    display: grid;
    place-items: center;
    margin: 0;
}

body[data-page="user"] .user-lookup-form .smart-bank-trigger,
body[data-page="user"] .user-qr-form .smart-bank-trigger,
body[data-page="user"] .user-lookup-form input,
body[data-page="user"] .user-qr-form input {
    min-height: 58px;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button {
    width: 100%;
    min-height: 52px;
    margin: 0;
    display: inline-grid;
    place-items: center;
}

body[data-page="user"] .smart-bank-list button {
    min-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="user"] *,
    body[data-page="user"] *::before,
    body[data-page="user"] *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Web User accordion navigation */
body[data-page="user"] .user-menu-panel{width:min(320px,calc(100vw - 24px));padding:10px;border-radius:18px;background:rgba(248,252,255,.98);overflow:auto;max-height:calc(100vh - 90px)}
body[data-page="user"] .user-tabs{gap:10px}
body[data-page="user"] .user-menu-account{display:grid;place-items:start;gap:2px;min-height:auto;padding:12px 14px;text-align:left}
body[data-page="user"] .user-menu-account span{font-weight:950;color:#0b315c}
body[data-page="user"] .user-menu-account small{color:#6b86a4;font-size:11px;font-weight:750}
body[data-page="user"] .user-menu-groups{display:grid;gap:9px}
body[data-page="user"] .user-menu-group{display:grid;gap:7px}
body[data-page="user"] .user-menu-group-toggle,body[data-page="user"] .user-menu-child{box-sizing:border-box;width:100%;border:1px solid #d9e3ef;background:#fff;color:#15263a;box-shadow:0 5px 12px rgba(24,61,99,.06);font-weight:750;text-align:left}
body[data-page="user"] .user-menu-group-toggle{display:grid;grid-template-columns:32px 1fr 20px;align-items:center;min-height:50px;padding:0 12px;border-radius:15px;background:linear-gradient(135deg,#f4fbff,#e9f6ff);color:#102f50;font-size:15px}
body[data-page="user"] .user-menu-group-toggle i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#dff2ff;color:#075b96;font-style:normal;font-size:20px}
body[data-page="user"] .user-menu-group-toggle b{justify-self:end;font-size:17px;transition:transform .2s ease}
body[data-page="user"] .user-menu-group:not(.open) .user-menu-group-toggle b{transform:rotate(180deg)}
body[data-page="user"] .user-menu-children{display:grid;gap:7px}
body[data-page="user"] .user-menu-children[hidden]{display:none!important}
body[data-page="user"] .user-menu-child{min-height:48px;padding:0 14px;border-radius:15px;font-size:15px}
body[data-page="user"] .user-menu-child:hover,body[data-page="user"] .user-menu-child.active{border-color:#8fc8f2;background:#edf8ff;color:#07579a;transform:none;box-shadow:inset 3px 0 #1686d9,0 5px 14px rgba(24,91,148,.08)}
body[data-page="user"] .user-menu-child.danger{color:#b42335}
body.dark-mode[data-page="user"] .user-menu-panel{background:rgba(12,24,38,.98);border-color:#263c54}
body.dark-mode[data-page="user"] .user-menu-account,body.dark-mode[data-page="user"] .user-menu-group-toggle,body.dark-mode[data-page="user"] .user-menu-child{background:#142231;border-color:#2a4056;color:#e8f2ff}
body.dark-mode[data-page="user"] .user-menu-account span{color:#f2f7ff}
body.dark-mode[data-page="user"] .user-menu-account small{color:#90a8c1}
body.dark-mode[data-page="user"] .user-menu-group-toggle i{background:#183b56;color:#75c8ff}
body.dark-mode[data-page="user"] .user-menu-child:hover,body.dark-mode[data-page="user"] .user-menu-child.active{background:#17344a;border-color:#3e7ca8;color:#a7ddff}
@media(max-width:480px){body[data-page="user"] .user-menu-wrap{left:10px;top:10px}body[data-page="user"] .user-menu-panel{width:min(300px,calc(100vw - 20px));max-height:calc(100vh - 74px);margin-top:7px}body[data-page="user"] .user-menu-child,body[data-page="user"] .user-menu-group-toggle{min-height:46px}}

/* QTV IP + Check UI polish */
body[data-page="admin"] .panel-title {
    align-items: center;
    gap: 14px;
}

body[data-page="admin"] .panel-title .qtv-help {
    margin: 6px 0 0;
}

body[data-page="admin"] .admin-primary-btn,
body[data-page="admin"] .form-actions button,
body[data-page="admin"] .row-actions button,
body[data-page="admin"] .qtv-form button,
body[data-page="admin"] .admin-bank-trigger {
    min-height: 42px;
    border-radius: 10px;
    font-weight: 900;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}

body[data-page="admin"] .admin-primary-btn:hover,
body[data-page="admin"] .form-actions button:hover,
body[data-page="admin"] .row-actions button:hover,
body[data-page="admin"] .qtv-form button:hover,
body[data-page="admin"] .admin-bank-trigger:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

body[data-page="admin"] .ip-editor {
    margin-top: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    background: #f8fbff;
    border: 1px solid var(--admin-line, #d9e8f7);
    border-radius: 14px;
    padding: 14px;
}

body[data-page="admin"] .ip-editor.hidden {
    display: none;
}

body[data-page="admin"] .ip-editor label {
    display: grid;
    gap: 7px;
    color: var(--theme-blue-text);
    font-weight: 900;
}

body[data-page="admin"] .ip-editor input,
body[data-page="admin"] .ip-editor select,
body[data-page="admin"] .ip-toolbar input {
    width: 100%;
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid var(--admin-line, #d9e8f7);
    padding: 0 13px;
    background: #fff;
    color: var(--theme-text);
    outline: none;
}

body[data-page="admin"] .ip-editor input:focus,
body[data-page="admin"] .ip-editor select:focus,
body[data-page="admin"] .ip-toolbar input:focus {
    border-color: var(--admin-primary, #0b83c5);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}

body[data-page="admin"] .form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

body[data-page="admin"] .form-actions .secondary {
    background: linear-gradient(135deg, #64748b, #334155);
}

body[data-page="admin"] .ip-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

body[data-page="admin"] .ip-toolbar input {
    max-width: 420px;
}

body[data-page="admin"] .ip-table th,
body[data-page="admin"] .ip-table td {
    vertical-align: middle;
}

body[data-page="admin"] .ip-table .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body[data-page="admin"] .ip-table .row-actions button {
    min-width: 78px;
}

body[data-page="admin"] .admin-bank-picker {
    position: relative;
    display: grid;
    gap: 8px;
}

body[data-page="admin"] .admin-bank-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    background: #fff;
    color: var(--theme-text);
    border: 1px solid var(--admin-line, #d9e8f7);
    padding: 0 14px;
}

body[data-page="admin"] .admin-bank-trigger img,
body[data-page="admin"] .admin-bank-list img,
body[data-page="admin"] .admin-check-bank img {
    width: 48px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--admin-line, #d9e8f7);
    background: #fff;
}

body[data-page="admin"] .admin-bank-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    background: #fff;
    border: 1px solid var(--admin-line, #d9e8f7);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(11, 131, 197, .18);
    padding: 10px;
}

body[data-page="admin"] .admin-bank-search {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--admin-line, #d9e8f7);
    border-radius: 10px;
    padding: 0 12px;
    margin-bottom: 10px;
}

body[data-page="admin"] .admin-bank-list {
    display: grid;
    gap: 8px;
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

body[data-page="admin"] .admin-bank-list button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--admin-line, #d9e8f7);
    background: #f8fbff;
    color: var(--theme-text);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
}

body[data-page="admin"] .admin-bank-list button:hover {
    background: #e6f4ff;
}

body[data-page="admin"] .admin-bank-list small {
    display: block;
    color: var(--admin-muted, #60748c);
    margin-top: 2px;
}

body[data-page="admin"] .admin-check-result {
    display: grid;
    gap: 10px;
    animation: adminFade .18s ease;
}

body[data-page="admin"] .admin-check-result p,
body[data-page="admin"] .admin-check-bank {
    margin: 0;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 58px;
    border: 1px solid var(--admin-line, #d9e8f7);
    border-radius: 14px;
    padding: 10px 12px;
    background: #f8fbff;
}

body[data-page="admin"] .admin-check-bank {
    grid-template-columns: 58px minmax(0, 1fr);
}

body[data-page="admin"] .admin-check-result span {
    color: var(--admin-muted, #60748c);
    font-weight: 900;
}

body[data-page="admin"] .admin-check-result strong {
    color: var(--theme-blue-text);
    font-weight: 1000;
}

body.dark[data-page="admin"] .ip-editor,
body.dark[data-page="admin"] .admin-bank-list button,
body.dark[data-page="admin"] .admin-check-result p,
body.dark[data-page="admin"] .admin-check-bank {
    background: var(--theme-inner-bg);
}

body.dark[data-page="admin"] .ip-editor input,
body.dark[data-page="admin"] .ip-editor select,
body.dark[data-page="admin"] .ip-toolbar input,
body.dark[data-page="admin"] .admin-bank-trigger,
body.dark[data-page="admin"] .admin-bank-menu,
body.dark[data-page="admin"] .admin-bank-search {
    background: var(--theme-card-bg);
    color: var(--theme-text);
}

@media (max-width: 900px) {
    body[data-page="admin"] .ip-editor {
        grid-template-columns: 1fr;
    }

    body[data-page="admin"] .ip-toolbar {
        display: grid;
    }

    body[data-page="admin"] .ip-toolbar input {
        max-width: none;
    }
}

* { box-sizing: border-box; }

body {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--theme-page-bg) 55%, #E7F4FF 100%);
    color: var(--theme-text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
}

.main-wrapper {
    display: flex;
    width: 100%;
    max-width: 1920px;
    height: 97vh;
    gap: 10px;
}

.promo-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    gap: 10px;
}

.promo-box {
    background: var(--theme-card-bg);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    box-shadow: 0 8px 24px var(--theme-shadow);
}

.promo-box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.side-panel {
    flex: 1.2;
    background: linear-gradient(180deg, var(--theme-card-bg) 0%, var(--theme-card-bg-2) 100%);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px var(--theme-shadow);
    min-width: 210px;
}

.panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    color: var(--theme-blue-text);
    font-size: 1rem;
    border-bottom: 1px solid var(--theme-border-soft);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.panel-header > span:first-child { white-space: nowrap; }

.winner-count-badge {
    background: linear-gradient(135deg, #1EA7FF 0%, var(--theme-accent-dark) 100%);
    color: #fff;
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(0, 91, 191, 0.22);
}

.btn-clear {
    color: var(--theme-muted-text);
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    transition: .2s;
}
.btn-clear:hover { color: var(--theme-accent-dark); }

#searchBox, textarea {
    background: var(--theme-inner-bg);
    border: 1px solid var(--theme-border-soft);
    border-radius: 8px;
    outline: none;
    color: var(--theme-text);
    box-shadow: 0 4px 12px rgba(0, 88, 170, 0.08);
}

#searchBox {
    padding: 10px;
    margin-bottom: 10px;
    font-size: .9rem;
}

textarea {
    flex: 1;
    padding: 12px;
    resize: none;
    font-size: .95rem;
    margin-bottom: 10px;
}

#searchBox::placeholder, textarea::placeholder { color: rgba(17, 24, 39, .5); }

#btnCapNhat, .btn-main, .btn-close-popup, .time-mini-input, .btn-music-save {
    background: linear-gradient(135deg, #1EA7FF 0%, var(--theme-accent-dark) 100%);
    color: #fff;
    border: 1px solid #1EA7FF;
    box-shadow: 0 5px 14px rgba(0, 91, 191, 0.22);
}

#btnCapNhat {
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: 900;
    width: 100%;
}

.file-action-btn {
    background: #F4FAFF;
    border: 1px dashed var(--theme-border);
    color: var(--theme-blue-text);
    padding: 10px;
    border-radius: 6px;
    font-weight: 900;
    font-size: .85rem;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    transition: .2s;
}
.file-action-btn:hover { background: var(--theme-accent-dark); color: #fff; border-style: solid; }

.container {
    flex: 3.5;
    background: linear-gradient(180deg, var(--theme-card-bg) 0%, var(--theme-card-bg-2) 100%);
    border: 2px solid var(--theme-border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px var(--theme-shadow);
    position: relative;
    min-width: 430px;
}

.container::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 20px;
    border: 1px dashed rgba(0, 123, 255, .35);
    pointer-events: none;
    animation: ledBlink 1.5s linear infinite;
}

@keyframes ledBlink {
    0%, 100% { border-color: rgba(0, 123, 255, .45); opacity: .9; }
    50% { border-color: rgba(0, 91, 191, .25); opacity: .65; }
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-border-soft);
    padding-bottom: 12px;
    gap: 12px;
}

.brand-zone {
    display: flex;
    align-items: center;
    gap: 45px;
    min-width: 0;
}

.logo-img {
    max-height: 42px;
    width: auto;
    display: block;
    object-fit: contain;
}

.brand-text h2 {
    margin: 0;
    color: var(--theme-blue-text);
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: .5px;
    white-space: nowrap;
}

.total-badge {
    background: var(--theme-inner-bg);
    border: 1px solid var(--theme-border-soft);
    padding: 17px 10px;
    border-radius: 20px;
    font-size: .8rem;
    color: var(--theme-text);
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0, 88, 170, 0.08);
    white-space: nowrap;
}

.box-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    margin: 15px 0;
    padding: 20px;
    background: var(--theme-inner-bg);
    border: 1px solid var(--theme-border-soft);
    border-radius: 16px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 88, 170, 0.08);
}

.user-box {
    width: calc(20% - 12px);
    min-width: 120px;
    max-width: 200px;
    height: 55px;
    background: #fff;
    border: 1px solid var(--theme-border-soft);
    color: var(--theme-text);
    padding: 14px 8px;
    border-radius: 10px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 88, 170, 0.08);
}

.user-box.active {
    background: linear-gradient(135deg, #DDF0FF 0%, #A6D8FF 100%);
    color: #003B73;
    border: 2px solid var(--theme-accent);
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(0, 123, 255, .35), 0 8px 18px rgba(0, 88, 170, .16);
}

.footer-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    padding-top: 10px;
}

.time-badge-vip {
    position: absolute;
    left: 0;
    background: var(--theme-inner-bg);
    border: 1px solid var(--theme-border-soft);
    padding: 6px 14px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 88, 170, 0.08);
}

.time-badge-vip span.title-label {
    font-size: .85rem;
    font-weight: 900;
    color: var(--theme-blue-text);
}

.btn-time-config {
    background: none;
    border: none;
    color: var(--theme-blue-text);
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0 2px;
}

.time-mini-input {
    width: 38px;
    border: none;
    border-radius: 5px;
    font-weight: 900;
    font-size: .9rem;
    text-align: center;
    padding: 2px 0;
    outline: none;
}

.time-mini-input::-webkit-outer-spin-button,
.time-mini-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.control-btn {
    border: none;
    padding: 12px 40px;
    font-size: .95rem;
    font-weight: 900;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: .2s;
}
.btn-main:hover, #btnCapNhat:hover { background: var(--theme-accent-dark); transform: translateY(-1px); }

.btn-sub {
    position: absolute;
    right: 0;
    background: #F4FAFF;
    color: var(--theme-blue-text);
    border: 1px solid var(--theme-border);
}
.btn-sub:hover { background: var(--theme-accent-dark); color: #fff; }

.winner-history-wrapper { flex: 1; overflow-y: auto; }
#lstWinner { list-style: none; padding: 0; margin: 0; }

#lstWinner li {
    background: #fff;
    color: var(--theme-text);
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--theme-accent);
    box-shadow: 0 3px 8px rgba(0, 88, 170, 0.08);
    animation: slideInDown .3s cubic-bezier(.175, .885, .32, 1.275);
}

.winner-rank {
    background: linear-gradient(135deg, #EAF5FF 0%, #CBE7FF 100%);
    color: var(--theme-blue-text);
    border: 1px solid var(--theme-border-soft);
    font-size: .8rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 900;
}
.winner-name { flex: 1; text-align: left; }
@keyframes slideInDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }

.popup-overlay, .music-popup-overlay, .game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-overlay {
    background: rgba(0, 40, 90, .45);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    backdrop-filter: blur(4px);
}
.popup-overlay.active { opacity: 1; pointer-events: auto; }

.popup-content {
    background: linear-gradient(180deg, var(--theme-card-bg) 0%, var(--theme-card-bg-2) 100%);
    border: 4px solid var(--theme-border);
    border-radius: 20px;
    padding: 30px 20px;
    width: 90%;
    max-width: 550px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
    transform: scale(.7);
    transition: .4s cubic-bezier(.175, .885, .32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.popup-overlay.active .popup-content { transform: scale(1); }
.popup-title-text { font-size: 1.8rem; color: var(--theme-blue-text); font-weight: 900; }

.popup-body {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F9FF 100%);
    border: 2px dashed var(--theme-border);
    border-radius: 12px;
    padding: 20px 15px;
    margin-bottom: 20px;
    width: 100%;
}

#popupWinnerName {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    color: #003B73;
    font-weight: 900;
    margin: 0;
}

.popup-logo-wrapper {
    background: #fff;
    padding: 8px 30px;
    border-radius: 10px;
    display: inline-flex;
    margin-bottom: 20px;
    border: 1px solid var(--theme-border-soft);
}
.popup-logo-img { max-height: 45px; width: auto; object-fit: contain; }

.btn-close-popup {
    border: none;
    padding: 12px 50px;
    font-size: 1.05rem;
    font-weight: 900;
    border-radius: 6px;
    text-transform: uppercase;
}

.bg-music-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: #fff;
    border: 2px solid var(--theme-border-soft);
    padding: 10px 15px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
    color: var(--theme-blue-text);
    font-size: .85rem;
}
.music-icon-spin { font-size: 1.2rem; animation: spinMusic 3s linear infinite; display: inline-block; }
@keyframes spinMusic { 100% { transform: rotate(360deg); } }

.music-popup-overlay {
    background: rgba(0,0,0,.4);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
}
.music-popup-overlay.active { opacity: 1; pointer-events: auto; }

.music-card {
    background: linear-gradient(180deg, var(--theme-card-bg) 0%, var(--theme-card-bg-2) 100%);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    width: 420px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    color: var(--theme-text);
    position: relative;
}
.music-card-header { font-size: 1.2rem; font-weight: 900; text-align: center; color: var(--theme-blue-text); margin-bottom: 25px; border-bottom: 1px solid var(--theme-border-soft); padding-bottom: 10px; }
.music-close-x { position: absolute; top: 12px; right: 15px; font-size: 1.2rem; color: var(--theme-blue-text); cursor: pointer; }
.music-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 1.05rem; }
.music-row label { color: var(--theme-muted-text); font-weight: 700; }
.switch-container { display: flex; align-items: center; gap: 10px; }
.switch-label-status { font-size: .9rem; font-weight: 900; color: var(--theme-blue-text); }
.music-switch { position: relative; display: inline-block; width: 60px; height: 30px; }
.music-switch input { opacity: 0; width: 0; height: 0; }
.slider-round { position: absolute; cursor: pointer; inset: 0; background-color: #BFDFFF; transition: .3s; border-radius: 34px; border: 1px solid var(--theme-border); }
.slider-round:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: #fff; transition: .3s; border-radius: 50%; }
input:checked + .slider-round { background-color: var(--theme-accent); }
input:checked + .slider-round:before { transform: translateX(30px); }
.music-select { width: 100%; background: #fff; border: 1px solid var(--theme-border); color: var(--theme-text); padding: 10px; border-radius: 6px; outline: none; }
.music-actions { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
.music-btn { padding: 8px 25px; border-radius: 4px; font-weight: 900; cursor: pointer; border: none; }
.btn-music-cancel { background: #fff; color: var(--theme-text); border: 1px solid var(--theme-border); }

.game-overlay {
    inset: 0;
    background: rgba(0,0,0,.6);
    display: none;
    z-index: 9999;
}
.game-overlay.active { display: flex; }

#spinCenterBox {
    width: 360px;
    height: 140px;
    background: linear-gradient(135deg, #fff 0%, #EAF5FF 100%);
    border: 3px solid var(--theme-accent);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

#spinBox {
    font-size: 28px;
    font-weight: 900;
    color: #003B73;
    text-align: center;
    padding: 0 16px;
    word-break: break-word;
}

body.running-game .promo-sidebar,
body.running-game .side-panel,
body.running-game .footer-controls,
body.running-game .box-container {
    filter: blur(6px);
    opacity: .25;
    pointer-events: none;
}

/* Admin */
body[data-page="admin"] {
    padding: 0;
    display: block;
    overflow: auto;
    align-items: initial;
    justify-content: initial;
}

.public-shell .admin-sidebar nav {
    display: grid;
    gap: 10px;
}

.admin-link {
    display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 900;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1EA7FF, #005BBF);
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stats-grid article {
    background: linear-gradient(180deg, var(--theme-card-bg), var(--theme-card-bg-2));
    border: 1px solid var(--theme-border-soft);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 12px 28px var(--theme-shadow);
}

.stats-grid span {
    color: var(--theme-muted-text);
    font-weight: 800;
}

.stats-grid strong {
    display: block;
    color: var(--theme-blue-text);
    font-size: 2rem;
    margin-top: 8px;
}

.panel-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border-soft);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 12px 28px var(--theme-shadow);
}

.panel-card h2 {
    margin: 0 0 14px;
    color: var(--theme-blue-text);
    text-transform: uppercase;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    align-items: end;
}

.admin-form-grid label,
#settingForm label {
    display: grid;
    gap: 7px;
    color: var(--theme-muted-text);
    font-weight: 800;
}

.admin-form-grid input,
.admin-form-grid select,
#settingForm input {
    width: 100%;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--theme-inner-bg);
    color: var(--theme-text);
}

.admin-form-grid button,
#settingForm button,
td button {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1EA7FF, #005BBF);
    color: #fff;
    font-weight: 900;
}

button.danger,
td button.danger {
    background: linear-gradient(135deg, #ff4d4d, #bd1f1f);
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--theme-border-soft);
    border-radius: 16px;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    background: var(--theme-card-bg);
}

.table-wrap th,
.table-wrap td {
    padding: 12px;
    border-bottom: 1px solid var(--theme-border-soft);
    text-align: left;
    vertical-align: top;
}

.table-wrap th {
    color: var(--theme-blue-text);
    background: var(--theme-soft-bg);
    font-weight: 900;
}

.empty {
    padding: 20px;
    border: 1px dashed var(--theme-border);
    border-radius: 16px;
    color: var(--theme-muted-text);
    font-weight: 800;
}

.chart {
    display: grid;
    grid-template-columns: repeat(7, minmax(70px, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 160px;
}

.chart div {
    display: grid;
    gap: 7px;
    justify-items: center;
    color: var(--theme-muted-text);
    font-size: .82rem;
    font-weight: 800;
}

.chart b {
    width: 34px;
    min-height: 8px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #1EA7FF, #005BBF);
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.result-grid p,
.result-box p {
    padding: 12px;
    border-radius: 12px;
    background: var(--theme-soft-bg);
    margin: 0;
}

details {
    margin-top: 14px;
}

pre {
    overflow: auto;
    padding: 14px;
    border-radius: 14px;
    background: #0b1b33;
    color: #d9f4ff;
}

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    padding: 14px 18px;
    border-radius: 14px;
    background: #063b86;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.dark-mode {
    --theme-page-bg: #08172b;
    --theme-card-bg: #101f36;
    --theme-card-bg-2: #0d1a2e;
    --theme-inner-bg: #0b1728;
    --theme-soft-bg: #122743;
    --theme-text: #edf7ff;
    --theme-blue-text: #8ecbff;
    --theme-muted-text: #b7c8df;
    --theme-border: #244466;
    --theme-border-soft: #203b5c;
    --theme-shadow: rgba(0, 0, 0, 0.28);
}

@media (max-width: 860px) {
    .chart {
        grid-template-columns: repeat(2, 1fr);
    }
}

body[data-page="user"] {
    display: block;
    padding: 0;
    overflow: auto;
    background: linear-gradient(135deg, #eef8ff, #ffffff 46%, #eafdf7);
}

.hidden { display: none !important; }

.user-login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.user-login-card {
    width: min(420px, 100%);
    padding: 28px;
    border: 1px solid var(--theme-border-soft);
    border-radius: 24px;
    background: var(--theme-card-bg);
    box-shadow: 0 24px 70px var(--theme-shadow);
    display: grid;
    gap: 14px;
}

.user-login-card img {
    width: 220px;
    max-height: 90px;
    object-fit: contain;
    margin: auto;
}

.user-login-card h1 {
    margin: 0;
    color: var(--theme-blue-text);
    text-align: center;
}

.user-login-card label,
.user-form label {
    display: grid;
    gap: 8px;
    color: var(--theme-muted-text);
    font-weight: 900;
}

.user-login-card input,
.user-form input,
.user-form select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    padding: 0 14px;
    background: var(--theme-inner-bg);
    color: var(--theme-text);
}

.user-login-card button,
.user-form button,
.user-panel button,
.qr-actions a,
.qr-actions button {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    color: #fff;
    background: linear-gradient(135deg, #1EA7FF, #005BBF);
    font-weight: 950;
    text-decoration: none;
    display: inline-grid;
    place-items: center;
}

.user-dashboard {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.user-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 18px;
    background: var(--theme-card-bg);
    border-right: 1px solid var(--theme-border-soft);
    box-shadow: 0 12px 34px var(--theme-shadow);
    transition: width .25s ease, transform .25s ease;
    overflow: hidden auto;
}

.user-sidebar.collapsed {
    width: 88px;
}

.user-sidebar.collapsed b,
.user-sidebar.collapsed .user-brand img {
    display: none;
}

.user-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.user-brand img {
    width: 190px;
    max-height: 70px;
    object-fit: contain;
}

.user-brand button,
#hamburger {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: #e6f4ff;
    color: var(--theme-blue-text);
    font-weight: 950;
}

#userMenu {
    display: grid;
    gap: 9px;
}

#userMenu button {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--theme-text);
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    text-align: left;
    transition: background .2s ease, transform .2s ease;
}

#userMenu button.active,
#userMenu button:hover {
    background: #e6f4ff;
    color: var(--theme-blue-text);
    transform: translateX(2px);
}

.user-main {
    min-width: 0;
}

.user-header {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 78px;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--theme-border-soft);
    backdrop-filter: blur(12px);
}

.user-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-header-title img {
    width: 86px;
    max-height: 42px;
    object-fit: contain;
}

.user-header-title p,
.user-header-title h1 {
    margin: 0;
}

.user-header-title p {
    color: var(--theme-muted-text);
    font-weight: 800;
}

.user-header-title h1 {
    color: var(--theme-blue-text);
}

.user-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.user-header-actions span,
.user-header-actions button {
    min-height: 36px;
    border: 1px solid var(--theme-border-soft);
    border-radius: 999px;
    padding: 0 12px;
    background: var(--theme-card-bg);
    color: var(--theme-blue-text);
    font-weight: 900;
}

#userRoleBadge {
    background: #e8fff4;
    color: #048650;
}

.user-content {
    padding: 22px;
    display: grid;
    gap: 18px;
    animation: adminFade .22s ease;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.user-card,
.user-panel {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border-soft);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 18px 45px var(--theme-shadow);
}

.user-card h2,
.user-panel h2 {
    margin: 0 0 12px;
    color: var(--theme-blue-text);
    text-transform: uppercase;
}

.user-card p {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 950;
}

.user-card span {
    color: var(--theme-muted-text);
    font-weight: 800;
}

.user-form {
    display: grid;
    gap: 14px;
}

.bank-picker {
    display: grid;
    gap: 10px;
}

.bank-list {
    max-height: 310px;
    overflow: auto;
    display: grid;
    gap: 8px;
}

.bank-list button {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--theme-border-soft);
    border-radius: 16px;
    background: var(--theme-inner-bg);
    color: var(--theme-text);
    text-align: left;
}

.bank-list img {
    width: 58px;
    height: 36px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.bank-list small {
    display: block;
    color: var(--theme-muted-text);
}

.lookup-result,
.qr-output {
    display: grid;
    gap: 10px;
}

.lookup-result p,
.qr-output p {
    margin: 0;
    padding: 13px;
    border-radius: 15px;
    background: var(--theme-soft-bg);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.lookup-result b,
.qr-output b {
    color: var(--theme-blue-text);
}

.not-found {
    padding: 18px;
    border-radius: 16px;
    background: #fff1f1;
    color: #bd1f1f;
    font-weight: 950;
}

.qr-output img {
    width: min(320px, 100%);
    margin: auto;
    border-radius: 18px;
    border: 1px solid var(--theme-border-soft);
    background: #fff;
}

.qr-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100000;
    display: grid;
    gap: 10px;
}

.user-toast {
    padding: 13px 16px;
    border-radius: 15px;
    color: #fff;
    font-weight: 950;
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
    background: #075985;
}

.user-toast.success { background: #0a8f5a; }
.user-toast.error { background: #bd1f1f; }

body.dark-mode[data-page="user"] {
    --theme-page-bg: #111827;
    --theme-card-bg: #172033;
    --theme-card-bg-2: #111827;
    --theme-inner-bg: #111827;
    --theme-soft-bg: #1f2937;
    --theme-text: #ffffff;
    --theme-blue-text: #93c5fd;
    --theme-muted-text: #cbd5e1;
    --theme-border: #334155;
    --theme-border-soft: #243244;
    --theme-shadow: rgba(0,0,0,.32);
    background: #111827;
}

body.dark-mode[data-page="user"] .user-header {
    background: rgba(17,24,39,.9);
}

body.dark-mode[data-page="user"] #userMenu button.active,
body.dark-mode[data-page="user"] #userMenu button:hover {
    background: #1f2937;
}

@media (max-width: 980px) {
    .user-dashboard {
        display: block;
    }

    .user-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 282px;
        transform: translateX(-105%);
        z-index: 40;
    }

    .user-sidebar.open {
        transform: translateX(0);
    }

    .user-header {
        position: sticky;
        align-items: flex-start;
        flex-direction: column;
    }

    .user-header-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .user-content {
        padding: 14px;
    }

    .lookup-result p,
    .qr-output p {
        display: grid;
    }

    .bank-list button {
        grid-template-columns: 54px 1fr;
    }

    .bank-list em {
        grid-column: 2;
    }
}
body[data-page="admin"] { align-items: stretch; overflow: auto; background: #f6fbff; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); width: 100%; color: var(--theme-text); }
.admin-sidebar { background: #fff; border-right: 1px solid var(--theme-border-soft); padding: 18px; position: sticky; top: 0; height: 100vh; box-shadow: 0 8px 24px var(--theme-shadow); overflow: auto; }
.admin-sidebar img { width: 100%; max-height: 72px; object-fit: contain; margin-bottom: 18px; }
.admin-sidebar nav { display: grid; gap: 7px; }
.admin-sidebar button { text-align: left; min-height: 40px; padding: 0 12px; border-radius: 6px; background: transparent; color: var(--theme-text); border: 0; font-weight: 800; transition: background .18s ease, color .18s ease, transform .18s ease; }
.admin-sidebar button.active, .admin-sidebar button:hover { background: #e0f2fe; color: var(--theme-blue-text); transform: translateX(2px); }
.admin-sidebar button[hidden] { display: none; }
.admin-main { min-width: 0; }
.admin-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 24px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--theme-border-soft); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(12px); }
.admin-header p { margin: 0; color: var(--theme-muted-text); font-weight: 800; }
.admin-header h1 { margin: 2px 0 0; line-height: 1.15; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-content { padding: 24px; display: grid; gap: 18px; animation: adminFade .22s ease; }
.admin-content > * { min-width: 0; }
@keyframes adminFade { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.admin-content.is-loading { opacity: .72; transition: opacity .12s ease; }
.admin-content.view-ready { animation: adminFade .18s ease; opacity: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-grid article, .admin-panel, .table-wrap, .empty-state, .toast, .login-dialog form { background: #fff; border: 1px solid var(--theme-border-soft); border-radius: 8px; box-shadow: 0 8px 24px var(--theme-shadow); }
.stat-grid article { padding: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.stat-grid article:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--theme-shadow); }
.stat-grid span { display: block; color: var(--theme-muted-text); font-weight: 800; }
.stat-grid b { display: block; font-size: 1.75rem; margin-top: 6px; color: var(--theme-blue-text); overflow-wrap: anywhere; }
.admin-panel { padding: 18px; }
.admin-panel h2 { margin: 0 0 14px; color: var(--theme-blue-text); line-height: 1.2; }
.bar-chart { display: flex; align-items: end; gap: 12px; min-height: 170px; }
.bar-chart div { flex: 1; display: grid; align-items: end; gap: 7px; text-align: center; }
.bar-chart b { display: block; height: var(--h); min-height: 8px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #38bdf8, #075985); }
.editor-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.editor-form.inline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.editor-form.account-form { grid-template-columns: minmax(260px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; align-items: end; }
.editor-form.account-form .row-actions { min-width: 190px; }
.editor-form.account-form .row-actions button { min-width: 86px; }
.editor-form label { display: grid; gap: 6px; }
.editor-form span { font-weight: 800; color: var(--theme-muted-text); font-size: .9rem; }
.editor-form input, .editor-form select, .editor-form textarea, .login-dialog input { min-height: 42px; border: 1px solid var(--theme-border-soft); border-radius: 6px; padding: 0 12px; background: #fff; color: var(--theme-text); outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.editor-form input:focus, .editor-form select:focus, .editor-form textarea:focus, .admin-toolbar input:focus, .admin-toolbar select:focus, .login-dialog input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.14); }
.editor-form textarea { min-height: 132px; padding: 10px 12px; resize: vertical; }
.editor-form .wide-field { grid-column: span 2; }
.row-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.editor-form button, .admin-actions button, .toolbar button, .table-wrap button, .login-dialog button { min-height: 38px; padding: 0 12px; border-radius: 6px; color: #fff; background: linear-gradient(135deg, #0ea5e9, #075985); border: 0; font-weight: 800; transition: transform .16s ease, filter .16s ease, opacity .16s ease; }
.editor-form button:hover, .admin-actions button:hover, .toolbar button:hover, .table-wrap button:hover, .login-dialog button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.editor-form button:disabled, .admin-actions button:disabled, .toolbar button:disabled, .table-wrap button:disabled { opacity: .45; cursor: not-allowed; }
.table-wrap { overflow: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { border-bottom: 1px solid var(--theme-border-soft); padding: 11px 12px; text-align: left; vertical-align: top; }
th { color: var(--theme-blue-text); background: #f0f9ff; position: sticky; top: 0; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #f8fcff; }
td button { min-height: 30px; margin: 0 6px 6px 0; padding: 0 10px; }
.table-wrap button[data-user-delete], .table-wrap button[data-ip-delete], .table-wrap button[data-account-delete], .table-wrap button[data-history-delete], .table-wrap button[data-delete], #deleteSelectedHistory, #deleteAllHistory { background: linear-gradient(135deg, #ef4444, #991b1b); }
.table-wrap button[data-user-toggle], .table-wrap button[data-ip-toggle], .table-wrap button[data-account-toggle], #clearNextWinner, #stopManual { background: linear-gradient(135deg, #64748b, #334155); }
.toolbar { display: flex; justify-content: flex-end; }
.admin-toolbar { align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-toolbar input, .admin-toolbar select { min-height: 40px; border: 1px solid var(--theme-border-soft); border-radius: 6px; padding: 0 12px; background: #fff; color: var(--theme-text); }
.admin-toolbar input { min-width: min(320px, 100%); }
.admin-toolbar span { color: var(--theme-muted-text); font-weight: 800; margin-right: auto; }
.empty-state, .toast { padding: 16px; color: var(--theme-muted-text); }
.toast { position: fixed; right: 20px; top: 20px; z-index: 30; max-width: min(420px, calc(100vw - 40px)); color: #14532d; background: #dcfce7; border-color: #bbf7d0; animation: toastIn .18s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.login-dialog { border: 0; border-radius: 8px; padding: 0; background: transparent; }
.login-dialog::backdrop { background: rgba(3,7,18,.58); backdrop-filter: blur(5px); }
.login-dialog form { width: min(92vw, 420px); padding: 24px; display: grid; gap: 12px; }
.login-dialog h2 { margin: 0; }
.login-dialog p, .login-dialog small { color: var(--theme-muted-text); }
.access-denied {
    min-height: 100vh;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 24px;
}
.access-denied h1 {
    margin: 0 0 8px;
    color: #b91c1c;
    font-size: clamp(2.2rem, 6vw, 4rem);
}
.access-denied p {
    margin: 0;
    color: var(--theme-muted-text);
    font-size: 1.2rem;
    font-weight: 800;
}

body.dark { --theme-page-bg: #09111f; --theme-card-bg: #0f172a; --theme-card-bg-2: #111c31; --theme-inner-bg: #111c31; --theme-text: #e5eefb; --theme-muted-text: #99aac1; --theme-border: #1e3a5f; --theme-border-soft: #1e3a5f; background: #09111f; }
body.dark[data-page="admin"] { background: #09111f; }
body.dark .admin-sidebar, body.dark .admin-header, body.dark .admin-panel, body.dark .stat-grid article, body.dark .table-wrap, body.dark .empty-state, body.dark .login-dialog form { background: var(--theme-card-bg); }
body.dark input, body.dark select, body.dark textarea, body.dark th { background: var(--theme-inner-bg); color: var(--theme-text); }
body.dark tbody tr:hover { background: rgba(14,165,233,.08); }
body.dark .admin-sidebar button.active, body.dark .admin-sidebar button:hover { background: rgba(14,165,233,.14); color: #7dd3fc; }
body.dark .admin-toolbar input, body.dark .admin-toolbar select { background: var(--theme-inner-bg); color: var(--theme-text); }

@media (max-width: 1500px) {
    .promo-sidebar { width: 200px; }
    .brand-zone { gap: 18px; }
    .brand-text h2 { font-size: 1.05rem; }
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    body { overflow: auto; align-items: flex-start; }
    .main-wrapper { height: auto; min-height: 100vh; flex-wrap: wrap; }
    .promo-sidebar { display: none; }
    .container { order: 1; flex: 1 1 100%; min-height: 58vh; }
    .side-panel { order: 2; flex: 1 1 calc(50% - 10px); min-height: 340px; }
    .user-box { width: calc(25% - 12px); }
    .admin-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .admin-sidebar { padding: 14px; }
    .admin-content { padding: 18px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .editor-form, .editor-form.account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .user-box { width: calc(33.33% - 12px); }
    .footer-controls { flex-direction: column; gap: 10px; }
    .time-badge-vip, .btn-sub { position: static; }
    .admin-shell { display: block; padding: 12px; }
    .admin-sidebar { position: static; height: auto; border-radius: 8px; margin-bottom: 12px; }
    .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-header { position: static; height: auto; padding: 14px; border-radius: 8px; flex-direction: column; align-items: stretch; }
    .admin-content { padding: 14px 0; }
    .stat-grid, .editor-form, .editor-form.inline { grid-template-columns: 1fr; }
    .editor-form .wide-field { grid-column: auto; }
    .admin-toolbar { justify-content: stretch; }
    .admin-toolbar input, .admin-toolbar select, .admin-toolbar button { flex: 1 1 180px; }
}
@media (max-width: 600px) {
    .side-panel { flex-basis: 100%; }
    .main-header { flex-direction: column; align-items: flex-start; }
    .brand-zone { flex-direction: column; align-items: flex-start; gap: 10px; }
    .brand-text h2 { white-space: normal; }
    .user-box { width: calc(50% - 12px); }
    #spinCenterBox { width: min(92vw, 360px); }
    .admin-sidebar nav { grid-template-columns: 1fr; }
    .admin-header h1 { font-size: 1.45rem; }
    .admin-actions button, .toolbar button { flex: 1 1 auto; }
}
@media (max-width: 420px) {
    .user-box { width: 100%; }
}

/* Admin UI refinement */
body[data-page="admin"] {
    --admin-sidebar-width: 264px;
    --admin-gap: 16px;
    --admin-control-height: 40px;
    --admin-radius: 8px;
    --admin-surface: #fff;
    --admin-surface-soft: #f8fbff;
    --admin-line: #d9e8f7;
    --admin-primary: #0b83c5;
    --admin-primary-dark: #075985;
    --admin-danger: #dc2626;
    --admin-muted: #60748c;
    background: #f4f9ff;
    color: var(--theme-text);
    font-size: 15px;
}

body[data-page="admin"] .admin-shell {
    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
    background: #f4f9ff;
}

body[data-page="admin"] .admin-sidebar {
    padding: 16px;
    background: var(--admin-surface);
    border-right: 1px solid var(--admin-line);
    box-shadow: 8px 0 24px rgba(11, 131, 197, .06);
}

body[data-page="admin"] .admin-sidebar img {
    width: 100%;
    max-height: 64px;
    margin: 0 0 18px;
    object-fit: contain;
}

body[data-page="admin"] .admin-sidebar nav {
    gap: 6px;
}

body[data-page="admin"] .admin-sidebar button {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: var(--admin-radius);
    line-height: 1.25;
    white-space: normal;
    display: flex;
    align-items: center;
    color: #19324d;
}

body[data-page="admin"] .admin-sidebar button.active,
body[data-page="admin"] .admin-sidebar button:hover {
    background: #e6f4ff;
    color: #074b78;
    transform: translateX(2px);
}

body[data-page="admin"] .admin-header {
    min-height: 76px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--admin-line);
    box-shadow: 0 8px 20px rgba(11, 131, 197, .05);
}

body[data-page="admin"] .admin-header h1 {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    letter-spacing: 0;
    color: #111827;
}

body[data-page="admin"] .admin-header p,
body[data-page="admin"] .editor-form span,
body[data-page="admin"] .admin-toolbar span,
body[data-page="admin"] .stat-grid span {
    color: var(--admin-muted);
}

body[data-page="admin"] .admin-actions,
body[data-page="admin"] .row-actions,
body[data-page="admin"] .admin-toolbar {
    gap: 10px;
}

body[data-page="admin"].auth-locked .admin-shell {
    grid-template-columns: 1fr;
}

body[data-page="admin"].auth-session-pending .auth-gate {
    display: none;
}

body[data-page="admin"].auth-locked .admin-sidebar,
body[data-page="admin"].auth-locked .admin-content {
    display: none;
}

body[data-page="admin"] .auth-gate {
    min-height: calc(100vh - 76px);
    padding: 24px;
    display: none;
    place-items: center;
}

body[data-page="admin"].auth-locked .auth-gate {
    display: grid;
}

body[data-page="admin"] .auth-gate > div {
    width: min(460px, 100%);
    padding: 26px;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    box-shadow: 0 14px 34px rgba(11, 131, 197, .12);
    text-align: center;
}

body[data-page="admin"] .auth-gate h2 {
    margin: 0 0 8px;
    color: #074b78;
}

body[data-page="admin"] .auth-gate p {
    margin: 0 0 18px;
    color: var(--admin-muted);
    font-weight: 800;
}

body[data-page="admin"] .auth-gate button {
    min-height: var(--admin-control-height);
    padding: 0 18px;
    border-radius: var(--admin-radius);
    color: #fff;
    border: 0;
    font-weight: 900;
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dark));
    box-shadow: 0 6px 14px rgba(11, 131, 197, .14);
}

body[data-page="admin"] .admin-content {
    padding: 22px;
    gap: var(--admin-gap);
    align-content: start;
}

body[data-page="admin"] .stat-grid {
    gap: var(--admin-gap);
}

body[data-page="admin"] .stat-grid article,
body[data-page="admin"] .admin-panel,
body[data-page="admin"] .table-wrap,
body[data-page="admin"] .empty-state,
body[data-page="admin"] .toast,
body[data-page="admin"] .login-dialog form {
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    box-shadow: 0 8px 22px rgba(11, 131, 197, .07);
}

body[data-page="admin"] .stat-grid article,
body[data-page="admin"] .admin-panel {
    padding: 18px;
}

body[data-page="admin"] .stat-grid b {
    font-size: 1.55rem;
    line-height: 1.2;
    color: #074b78;
}

body[data-page="admin"] .admin-panel h2 {
    margin-bottom: 16px;
    font-size: 1.25rem;
    color: #074b78;
}

body[data-page="admin"] .editor-form {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

body[data-page="admin"] .editor-form.inline {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

body[data-page="admin"] .editor-form.account-form {
    grid-template-columns: minmax(240px, 1.6fr) minmax(150px, .8fr) minmax(150px, .8fr) auto;
}

body[data-page="admin"] .editor-form label {
    gap: 7px;
    min-width: 0;
}

body[data-page="admin"] .editor-form input,
body[data-page="admin"] .editor-form select,
body[data-page="admin"] .editor-form textarea,
body[data-page="admin"] .admin-toolbar input,
body[data-page="admin"] .admin-toolbar select,
body[data-page="admin"] .login-dialog input {
    width: 100%;
    min-height: var(--admin-control-height);
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    padding: 0 12px;
    background: #fff;
    box-sizing: border-box;
    font: inherit;
}

body[data-page="admin"] .editor-form textarea {
    min-height: 112px;
    padding: 10px 12px;
    line-height: 1.45;
}

body[data-page="admin"] .editor-form input:focus,
body[data-page="admin"] .editor-form select:focus,
body[data-page="admin"] .editor-form textarea:focus,
body[data-page="admin"] .admin-toolbar input:focus,
body[data-page="admin"] .admin-toolbar select:focus,
body[data-page="admin"] .login-dialog input:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .16);
}

body[data-page="admin"] button {
    cursor: pointer;
}

body[data-page="admin"] .editor-form button,
body[data-page="admin"] .admin-actions button,
body[data-page="admin"] .toolbar button,
body[data-page="admin"] .table-wrap button,
body[data-page="admin"] .login-dialog button {
    min-height: var(--admin-control-height);
    padding: 0 14px;
    border-radius: var(--admin-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-dark));
    box-shadow: 0 6px 14px rgba(11, 131, 197, .14);
}

body[data-page="admin"] .table-wrap button {
    min-height: 34px;
    padding: 0 11px;
    margin: 0 6px 6px 0;
}

body[data-page="admin"] .editor-form button:disabled,
body[data-page="admin"] .admin-actions button:disabled,
body[data-page="admin"] .toolbar button:disabled,
body[data-page="admin"] .table-wrap button:disabled {
    opacity: .5;
    transform: none;
    cursor: not-allowed;
}

body[data-page="admin"] .table-wrap button[data-user-delete],
body[data-page="admin"] .table-wrap button[data-ip-delete],
body[data-page="admin"] .table-wrap button[data-account-delete],
body[data-page="admin"] .table-wrap button[data-history-delete],
body[data-page="admin"] .table-wrap button[data-next-delete],
body[data-page="admin"] .table-wrap button[data-delete],
body[data-page="admin"] #deleteSelectedHistory,
body[data-page="admin"] #deleteAllHistory {
    background: linear-gradient(135deg, #ef4444, #991b1b);
}

body[data-page="admin"] .table-wrap button[data-user-toggle],
body[data-page="admin"] .table-wrap button[data-ip-toggle],
body[data-page="admin"] .table-wrap button[data-account-toggle],
body[data-page="admin"] #clearNextWinner,
body[data-page="admin"] #stopManual {
    background: linear-gradient(135deg, #64748b, #334155);
}

body[data-page="admin"] .table-wrap button[data-user-auth] {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
}

body[data-page="admin"] #deleteSelectedNext {
    background: linear-gradient(135deg, #ef4444, #991b1b);
}

body[data-page="admin"] .queue-panel {
    display: grid;
    gap: 14px;
}

body[data-page="admin"] .queue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

body[data-page="admin"] .queue-toolbar h2 {
    margin: 0 0 4px;
}

body[data-page="admin"] .queue-toolbar p {
    margin: 0;
    color: var(--admin-muted);
    font-weight: 800;
}

body[data-page="admin"] .queue-scroll {
    max-height: min(58vh, 560px);
    overflow: auto;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    scroll-behavior: smooth;
}

body[data-page="admin"] .queue-table {
    min-width: 820px;
}

body[data-page="admin"] .queue-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

body[data-page="admin"] .queue-table tbody tr {
    cursor: grab;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

body[data-page="admin"] .queue-table tbody tr:hover {
    background: #f4fbff;
    box-shadow: inset 3px 0 0 var(--admin-primary);
}

body[data-page="admin"] .queue-table tbody tr.dragging {
    opacity: .55;
    cursor: grabbing;
    background: #e0f2fe;
    transform: scale(.995);
}

body[data-page="admin"] .queue-rank {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-weight: 900;
}

body[data-page="admin"] .queue-status {
    min-height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 900;
    white-space: nowrap;
}

body[data-page="admin"] .queue-status.is-next {
    background: #dcfce7;
    color: #166534;
}

body[data-page="admin"] .queue-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--admin-primary);
}

body[data-page="admin"] .twofa-dialog form {
    text-align: center;
}

body[data-page="admin"] .twofa-dialog img {
    width: 180px;
    height: 180px;
    margin: 8px auto;
    display: block;
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-line);
}

body[data-page="admin"] .permission-grid {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
    border: 1px solid var(--admin-line);
    border-radius: var(--admin-radius);
    background: var(--admin-surface-soft);
}

body[data-page="admin"] .permission-grid legend {
    padding: 0 8px;
    color: #074b78;
    font-weight: 900;
}

body[data-page="admin"] .permission-group {
    display: grid;
    gap: 8px;
    align-content: start;
}

body[data-page="admin"] .permission-group strong {
    color: #074b78;
}

body[data-page="admin"] .permission-group label {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

body[data-page="admin"] .permission-group input {
    width: 16px;
    height: 16px;
    accent-color: var(--admin-primary);
}

body[data-page="admin"] .toolbar,
body[data-page="admin"] .admin-toolbar {
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

body[data-page="admin"] .admin-toolbar input,
body[data-page="admin"] .admin-toolbar select {
    flex: 0 1 240px;
    min-width: 180px;
}

body[data-page="admin"] .admin-toolbar input {
    flex-basis: 320px;
}

body[data-page="admin"] .table-wrap {
    overflow: auto;
}

body[data-page="admin"] table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

body[data-page="admin"] th,
body[data-page="admin"] td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--admin-line);
    line-height: 1.35;
}

body[data-page="admin"] th {
    height: 44px;
    color: #074b78;
    background: #edf7ff;
    font-weight: 900;
}

body[data-page="admin"] tbody tr:last-child td {
    border-bottom: 0;
}

body[data-page="admin"] tbody tr:hover {
    background: var(--admin-surface-soft);
}

body[data-page="admin"] .empty-state {
    padding: 18px;
}

body[data-page="admin"] .toast {
    padding: 14px 16px;
    right: 18px;
    top: 18px;
}

body.dark[data-page="admin"] {
    --admin-surface: #0f172a;
    --admin-surface-soft: #111c31;
    --admin-line: #1e3a5f;
    --admin-muted: #99aac1;
    background: #09111f;
}

body.dark[data-page="admin"] .admin-shell,
body.dark[data-page="admin"] .admin-sidebar,
body.dark[data-page="admin"] .admin-header,
body.dark[data-page="admin"] .admin-panel,
body.dark[data-page="admin"] .stat-grid article,
body.dark[data-page="admin"] .table-wrap,
body.dark[data-page="admin"] .empty-state,
body.dark[data-page="admin"] .auth-gate > div,
body.dark[data-page="admin"] .login-dialog form {
    background: var(--admin-surface);
}

body.dark[data-page="admin"] .admin-header h1,
body.dark[data-page="admin"] .admin-sidebar button {
    color: var(--theme-text);
}

body.dark[data-page="admin"] input,
body.dark[data-page="admin"] select,
body.dark[data-page="admin"] textarea,
body.dark[data-page="admin"] th {
    background: var(--admin-surface-soft);
    color: var(--theme-text);
    border-color: var(--admin-line);
}

@media (max-width: 1200px) {
    body[data-page="admin"] .admin-shell { grid-template-columns: 224px minmax(0, 1fr); }
    body[data-page="admin"] .admin-content { padding: 18px; }
    body[data-page="admin"] .editor-form,
    body[data-page="admin"] .editor-form.inline,
    body[data-page="admin"] .editor-form.account-form { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 900px) {
    body[data-page="admin"] .admin-shell { display: block; padding: 12px; }
    body[data-page="admin"] .admin-sidebar {
        position: static;
        height: auto;
        border: 1px solid var(--admin-line);
        border-radius: var(--admin-radius);
        margin-bottom: 12px;
    }
    body[data-page="admin"] .admin-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body[data-page="admin"] .admin-header {
        position: static;
        border: 1px solid var(--admin-line);
        border-radius: var(--admin-radius);
        flex-direction: column;
        align-items: stretch;
    }
    body[data-page="admin"] .admin-content { padding: 12px 0 0; }
    body[data-page="admin"] .stat-grid,
    body[data-page="admin"] .editor-form,
    body[data-page="admin"] .editor-form.inline,
    body[data-page="admin"] .editor-form.account-form { grid-template-columns: 1fr; }
    body[data-page="admin"] .permission-grid { grid-template-columns: 1fr; }
    body[data-page="admin"] .editor-form .wide-field { grid-column: auto; }
    body[data-page="admin"] .admin-toolbar { justify-content: stretch; }
    body[data-page="admin"] .admin-toolbar input,
    body[data-page="admin"] .admin-toolbar select,
    body[data-page="admin"] .admin-toolbar button,
    body[data-page="admin"] .admin-actions button,
    body[data-page="admin"] .row-actions button { flex: 1 1 180px; }
}

@media (max-width: 600px) {
    body[data-page="admin"] .admin-sidebar nav { grid-template-columns: 1fr; }
    body[data-page="admin"] .admin-header h1 { font-size: 1.35rem; }
    body[data-page="admin"] .admin-content { gap: 12px; }
    body[data-page="admin"] .stat-grid article,
    body[data-page="admin"] .admin-panel { padding: 14px; }
    body[data-page="admin"] table { min-width: 720px; }
}

/* Web Check Bank QTV - giao diện quản trị mới */
body[data-page="admin"] {
    --qtv-blue: #0b74d1;
    --qtv-blue-2: #075caa;
    --qtv-bg: #eef7ff;
    --qtv-card: #ffffff;
    --qtv-soft: #f3f9ff;
    --qtv-line: #d6e7fb;
    --qtv-text: #0b2344;
    --qtv-muted: #64748b;
    --qtv-green: #0ea66b;
    --qtv-red: #dc2626;
    margin: 0;
    min-height: 100vh;
    color: var(--qtv-text);
    background: radial-gradient(circle at top left, #d8ecff 0, transparent 32%),
        radial-gradient(circle at top right, #d9fff1 0, transparent 30%),
        var(--qtv-bg);
}

body[data-page="admin"] button,
body[data-page="admin"] input,
body[data-page="admin"] select,
body[data-page="admin"] textarea {
    font: inherit;
}

body[data-page="admin"] button,
body[data-page="admin"] input,
body[data-page="admin"] select,
body[data-page="admin"] textarea,
body[data-page="admin"] .qtv-nav button,
body[data-page="admin"] .panel-card,
body[data-page="admin"] .qtv-table-wrap {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.qtv-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 100vh;
    gap: 18px;
    padding: 18px;
}

.qtv-sidebar,
.qtv-header,
.qtv-panel,
.qtv-empty-state,
.qtv-login-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--qtv-line);
    box-shadow: 0 24px 60px rgba(16, 89, 160, 0.12);
}

.qtv-sidebar {
    position: sticky;
    top: 18px;
    height: calc(100vh - 36px);
    border-radius: 26px;
    padding: 18px;
    overflow: auto;
}

.qtv-brand {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 6px 4px 20px;
    border-bottom: 1px solid var(--qtv-line);
    text-align: center;
}

.qtv-brand img {
    width: min(190px, 92%);
    height: 92px;
    border-radius: 0;
    object-fit: contain;
    background: transparent;
}

.qtv-brand strong {
    display: block;
    color: var(--qtv-blue);
    font-size: 1.05rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .02em;
}

#breadcrumb {
    color: var(--qtv-muted);
    font-weight: 700;
    font-size: .86rem;
}

.qtv-nav {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.qtv-nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 14px;
    padding: 11px 13px;
    background: transparent;
    color: var(--qtv-text);
    font-weight: 850;
    text-align: left;
    cursor: pointer;
}

.qtv-nav button.active,
.qtv-nav button:hover {
    background: linear-gradient(135deg, #19a9f4, #1c61e7);
    color: #fff;
}

.qtv-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 18px;
}

.qtv-content {
    min-height: 420px;
}

.qtv-content.is-soft-loading {
    opacity: .82;
    pointer-events: none;
}

.qtv-header {
    position: sticky;
    top: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    border-radius: 24px;
    padding: 14px 18px;
}

.qtv-header h1 {
    margin: 2px 0 0;
    color: #06458d;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.05;
}

.qtv-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#accountBadge,
.qtv-pill,
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 7px 12px;
    background: #e8f4ff;
    color: #075caa;
    font-weight: 900;
}

.qtv-icon-btn,
.qtv-header-actions button,
.qtv-form button,
.inline-form button,
.qtv-empty-state button,
.qtv-login-card button,
.row-actions button {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #20aef5, #1b5fe5);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
    min-height: 40px;
    padding: 10px 14px;
    box-shadow: 0 12px 28px rgba(20, 105, 220, .2);
}

.qtv-icon-btn {
    width: 44px;
    padding: 0;
    font-size: 1.2rem;
}

.qtv-content {
    display: grid;
    gap: 18px;
}

.qtv-grid-2 {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr);
    gap: 18px;
}

.qtv-panel,
.qtv-empty-state {
    border-radius: 24px;
    padding: 20px;
}

.qtv-panel h2,
.qtv-empty-state h2 {
    margin: 0 0 14px;
    color: #06458d;
    font-size: 1.18rem;
    font-weight: 950;
    text-transform: uppercase;
}

.qtv-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.qtv-stat-grid article {
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(135deg, #fff, #eaf7ff);
    border: 1px solid var(--qtv-line);
}

.qtv-stat-grid span {
    color: var(--qtv-muted);
    font-weight: 800;
}

.qtv-stat-grid strong {
    display: block;
    margin-top: 8px;
    color: var(--qtv-blue);
    font-size: 2rem;
}

.qtv-form {
    display: grid;
    gap: 13px;
}

.qtv-form.inline-form {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    align-items: end;
}

.qtv-form label {
    display: grid;
    gap: 7px;
    color: #123b70;
    font-weight: 900;
}

.qtv-form input,
.qtv-form select,
.qtv-form textarea {
    min-height: 48px;
    border: 1px solid #bfd6f2;
    border-radius: 14px;
    padding: 10px 13px;
    background: #fff;
    color: var(--qtv-text);
    outline: none;
}

.qtv-form input:focus,
.qtv-form select:focus,
.qtv-form textarea:focus {
    border-color: #2f8cff;
    box-shadow: 0 0 0 4px rgba(47, 140, 255, .13);
}

.result-list {
    display: grid;
    gap: 10px;
}

.result-list div {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--qtv-line);
}

.result-list span {
    color: var(--qtv-muted);
    font-weight: 900;
}

.result-list strong {
    font-weight: 950;
}

.qtv-table-wrap {
    overflow: auto;
    border: 1px solid var(--qtv-line);
    border-radius: 18px;
    background: #fff;
}

.qtv-table-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0 12px;
}

.qtv-table-tools input {
    flex: 1 1 260px;
    min-height: 42px;
    border: 1px solid #bfd6f2;
    border-radius: 14px;
    padding: 9px 12px;
    outline: none;
}

.qtv-table-tools button {
    border: 0;
    border-radius: 14px;
    min-height: 42px;
    padding: 9px 14px;
    background: #e7f3ff;
    color: #075caa;
    font-weight: 950;
    cursor: pointer;
}

.qtv-table-tools span {
    color: var(--qtv-muted);
    font-weight: 850;
}

.qtv-help {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #edf7ff;
    color: #315a86;
    font-weight: 800;
}

.permission-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 14px;
}

.permission-matrix article {
    border: 1px solid var(--qtv-line);
    border-radius: 18px;
    background: #fff;
    padding: 14px;
}

.permission-matrix h3 {
    margin: 0 0 12px;
    color: #06458d;
}

.permission-matrix label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    color: var(--qtv-text);
    font-weight: 850;
}

.permission-matrix input {
    width: 18px;
    height: 18px;
    accent-color: var(--qtv-blue);
}

body.qtv-dark[data-page="admin"] .qtv-help,
body.qtv-dark[data-page="admin"] .permission-matrix article {
    background: var(--qtv-soft);
    border-color: var(--qtv-line);
}

/* User mới: chỉ tra cứu tài khoản và tạo mã QR */
body[data-page="user"] {
    --u-primary: #2563EB;
    --u-primary-2: #0EA5E9;
    --u-bg: #F5F7FB;
    --u-card: #FFFFFF;
    --u-text: #102033;
    --u-muted: #64748B;
    --u-border: #E5E7EB;
    --u-success: #22C55E;
    --u-danger: #EF4444;
    --u-shadow: 0 18px 50px rgba(37, 99, 235, .12);
    margin: 0;
    min-height: 100vh;
    display: block;
    overflow-x: hidden;
    color: var(--u-text);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .16), transparent 30%),
        radial-gradient(circle at top right, rgba(34, 197, 94, .12), transparent 26%),
        var(--u-bg);
    font-family: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-page="user"] * {
    box-sizing: border-box;
}

body[data-page="user"] button,
body[data-page="user"] input,
body[data-page="user"] textarea {
    font: inherit;
}

body[data-page="user"] button,
body[data-page="user"] input,
body[data-page="user"] textarea,
body[data-page="user"] .user-card-panel,
body[data-page="user"] .smart-bank-trigger,
body[data-page="user"] .smart-bank-menu,
body[data-page="user"] .user-menu-panel {
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

body[data-page="user"] .hidden {
    display: none !important;
}

.user-login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

.user-login-card,
.user-top-card,
.user-card-panel {
    background: var(--u-card);
    border: 1px solid var(--u-border);
    border-radius: 20px;
    box-shadow: var(--u-shadow);
}

.user-login-card {
    width: min(420px, 100%);
    display: grid;
    gap: 14px;
    padding: 26px;
}

.user-login-card img,
.user-top-card img {
    width: min(280px, 78vw);
    max-height: 112px;
    object-fit: contain;
    margin: 0 auto;
}

.user-login-card h1,
.user-top-card h1,
.user-card-panel h2 {
    margin: 0;
    color: #0F4C8A;
    line-height: 1.15;
}

.user-login-card p,
.user-top-card p,
.muted {
    margin: 0;
    color: var(--u-muted);
    font-weight: 700;
}

.user-login-card label,
.clean-form label,
.smart-bank > label {
    display: grid;
    gap: 8px;
    color: #1E3A5F;
    font-weight: 900;
}

.user-login-card input,
.clean-form input,
.clean-form textarea,
.smart-bank-search input {
    width: 100%;
    min-height: 50px;
    border: 1px solid #C9DBF2;
    border-radius: 14px;
    background: #fff;
    color: var(--u-text);
    outline: none;
    padding: 11px 14px;
    transition: border .2s ease, box-shadow .2s ease;
}

.clean-form textarea {
    min-height: 92px;
    resize: vertical;
}

.user-login-card input:focus,
.clean-form input:focus,
.clean-form textarea:focus,
.smart-bank-search input:focus {
    border-color: var(--u-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.user-login-card button,
.clean-form > button,
.qr-actions a,
.qr-actions button,
.user-account-bar button,
.user-tabs button {
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 950;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.user-login-card button,
.clean-form > button,
.qr-actions a {
    display: inline-grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--u-primary-2), var(--u-primary));
    box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}

.user-login-card button:hover,
.clean-form > button:hover,
.qr-actions a:hover,
.qr-actions button:hover,
.user-account-bar button:hover,
.user-tabs button:hover {
    transform: translateY(-1px);
}

.clean-form > button:disabled {
    cursor: not-allowed;
    opacity: .56;
    transform: none;
    box-shadow: none;
}

.user-app {
    width: min(680px, 95%);
    margin: 0 auto;
    padding: 18px 0 34px;
    display: grid;
    gap: 14px;
}

.user-top-card {
    position: relative;
    padding: 20px;
    display: grid;
    gap: 10px;
    text-align: center;
    animation: userFade .25s ease;
}

.user-menu-wrap {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 40;
    text-align: left;
}

.user-menu-toggle {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #d8e6f8;
    border-radius: 14px;
    background: rgba(255,255,255,.92);
    color: #111827;
    box-shadow: 0 12px 28px rgba(15, 76, 138, .12);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] {
    transform: translateY(-1px);
    background: #eef7ff;
    box-shadow: 0 18px 36px rgba(15, 76, 138, .18);
}

.user-menu-panel {
    width: min(330px, calc(100vw - 32px));
    margin-top: 10px;
    padding: 14px;
    display: grid;
    gap: 12px;
    border: 1px solid #d8e6f8;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 64px rgba(15, 76, 138, .18);
    animation: userMenuIn .18s ease;
    backdrop-filter: blur(12px);
}

.user-menu-panel[hidden] {
    display: none !important;
}

.user-top-card h1 {
    font-size: clamp(1.35rem, 4vw, 2.1rem);
    text-transform: uppercase;
}

.user-account-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 0;
}

.user-account-bar span,
.user-account-bar button {
    border: 1px solid #D8E6F8;
    border-radius: 12px;
    min-height: 42px;
    padding: 0 12px;
    color: #0F4C8A;
    background: #EEF7FF;
    font-weight: 900;
    display: grid;
    place-items: center;
}

.user-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.user-tabs button {
    background: #fff;
    color: #0F4C8A;
    border: 1px solid var(--u-border);
    box-shadow: 0 10px 24px rgba(15, 76, 138, .08);
    text-align: left;
    justify-content: flex-start;
}

.user-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, var(--u-primary-2), var(--u-primary));
}

.user-workspace {
    display: grid;
    gap: 14px;
    min-height: 320px;
}

.user-card-panel {
    padding: 20px;
    display: grid;
    gap: 16px;
}

.clean-form {
    display: grid;
    gap: 14px;
}

.smart-bank {
    position: relative;
    display: grid;
    gap: 8px;
}

.smart-bank-trigger {
    min-height: 58px;
    width: 100%;
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid #C9DBF2;
    border-radius: 14px;
    background: #fff;
    color: var(--u-text);
    text-align: left;
    padding: 9px 12px;
    cursor: pointer;
}

.smart-bank-trigger::after {
    content: "";
    position: absolute;
    right: 18px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #54708D;
    border-bottom: 2px solid #54708D;
    transform: rotate(45deg);
}

.smart-bank-trigger img,
.smart-bank-list img {
    width: 48px;
    height: 34px;
    object-fit: contain;
    border: 1px solid #EDF2F7;
    border-radius: 10px;
    background: #fff;
}

.smart-bank-trigger b,
.smart-bank-list b {
    display: block;
    color: #0F4C8A;
}

.smart-bank-trigger small,
.smart-bank-list small,
.bank-placeholder {
    display: block;
    color: var(--u-muted);
    font-weight: 750;
}

.smart-bank-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border: 1px solid #C9DBF2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 46px rgba(15, 76, 138, .16);
    padding: 10px;
    animation: dropdownIn .2s ease;
}

.smart-bank-list {
    max-height: 310px;
    overflow: auto;
    display: grid;
    gap: 7px;
    padding-top: 8px;
}

.smart-bank-list button {
    width: 100%;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 10px;
    align-items: center;
    border: 0;
    border-radius: 14px;
    background: #F8FBFF;
    color: var(--u-text);
    text-align: left;
    padding: 10px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.smart-bank-list button:hover {
    background: #EAF4FF;
    transform: scale(.995);
}

.bank-empty {
    padding: 14px;
    color: var(--u-muted);
    font-weight: 800;
}

.result-box {
    display: grid;
    gap: 10px;
}

.result-box p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #F8FBFF;
    border: 1px solid #EDF2F7;
}

.result-box span {
    color: var(--u-muted);
    font-weight: 850;
}

.result-box b {
    color: #0F4C8A;
    text-align: right;
}

.lookup-result-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dceaf9;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .10);
}

.lookup-result-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #f8fbff;
    animation: userFade .2s ease;
}

.lookup-result-row:not(:has(.lookup-bank-logo)) {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.lookup-result-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf4ff;
}

.lookup-bank-logo {
    width: 54px;
    height: 38px;
    object-fit: contain;
    border: 1px solid #e5edf8;
    border-radius: 10px;
    background: #fff;
}

.lookup-result-row small {
    display: block;
    margin-bottom: 4px;
    color: var(--u-muted);
    font-weight: 900;
}

.lookup-result-row b {
    display: block;
    color: #0f4c8a;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.copy-button {
    min-width: 86px;
    min-height: 36px;
    border: 1px solid #b8d8f6;
    border-radius: 10px;
    background: #eef7ff;
    color: #0f4c8a;
    font-weight: 950;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.copy-button:hover {
    background: linear-gradient(135deg, var(--u-primary-2), var(--u-primary));
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
    transform: translateY(-1px);
}

.copy-button:active {
    transform: translateY(0) scale(.98);
}

.result-box.error {
    padding: 16px;
    border: 1px solid #FECACA;
    border-radius: 16px;
    background: #FFF1F2;
    color: #B91C1C;
}

.result-box.error strong,
.result-box.error span {
    color: #B91C1C;
}

.qr-box {
    display: grid;
    gap: 14px;
}

.qr-box > img {
    width: min(340px, 100%);
    margin: 0 auto;
    border: 1px solid var(--u-border);
    border-radius: 18px;
    background: #fff;
}

.qr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.qr-actions button {
    background: #EAF4FF;
    color: #0F4C8A;
}

.qr-actions .qr-manual-bill {
    grid-column: 1 / -1;
    background: #078B57;
    color: #fff;
}

.user-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin .8s linear infinite;
    margin-right: 8px;
}

.user-skeleton {
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #EAF0F8, #F8FBFF, #EAF0F8);
    background-size: 240% 100%;
    animation: shimmer 1.1s linear infinite;
}

.user-skeleton.wide { height: 30px; }
.user-skeleton.small { width: 55%; }

.toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000;
    display: grid;
    gap: 10px;
}

.user-toast {
    min-width: 220px;
    padding: 13px 16px;
    border-radius: 16px;
    color: #fff;
    background: #075985;
    font-weight: 900;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
    animation: userFade .2s ease;
}

.user-toast.success { background: #15803D; }
.user-toast.error { background: #B91C1C; }

body.dark-mode[data-page="user"] {
    --u-bg: #111827;
    --u-card: #172033;
    --u-text: #F8FAFC;
    --u-muted: #CBD5E1;
    --u-border: #2B3A50;
    --u-shadow: 0 18px 50px rgba(0,0,0,.28);
    background: #111827;
}

body.dark-mode[data-page="user"] .smart-bank-trigger,
body.dark-mode[data-page="user"] .smart-bank-menu,
body.dark-mode[data-page="user"] .smart-bank-search input,
body.dark-mode[data-page="user"] .smart-bank-list button,
body.dark-mode[data-page="user"] .clean-form input,
body.dark-mode[data-page="user"] .clean-form textarea,
body.dark-mode[data-page="user"] .user-login-card input,
body.dark-mode[data-page="user"] .result-box p,
body.dark-mode[data-page="user"] .lookup-result-card,
body.dark-mode[data-page="user"] .lookup-result-row {
    background: #111827;
    border-color: #2B3A50;
    color: #F8FAFC;
}

body.dark-mode[data-page="user"] .lookup-result-row b {
    color: #dbeafe;
}

body.dark-mode[data-page="user"] .copy-button,
body.dark-mode[data-page="user"] .lookup-result-icon {
    border-color: #2B3A50;
    background: #1F2A3B;
    color: #dbeafe;
}

body.dark-mode[data-page="user"] .smart-bank-list button:hover,
body.dark-mode[data-page="user"] .qr-actions button,
body.dark-mode[data-page="user"] .user-account-bar span,
body.dark-mode[data-page="user"] .user-account-bar button {
    background: #1F2A3B;
}

body.dark-mode[data-page="user"] .user-menu-toggle {
    color: #fff;
    border-color: #2B3A50;
    background: #172033;
    box-shadow: 0 18px 38px rgba(0,0,0,.25);
}

body.dark-mode[data-page="user"] .user-menu-toggle:hover,
body.dark-mode[data-page="user"] .user-menu-toggle[aria-expanded="true"] {
    background: #1F2A3B;
}

body.dark-mode[data-page="user"] .user-menu-panel {
    border-color: #2B3A50;
    background: rgba(23, 32, 51, .96);
}

@keyframes userFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes userMenuIn {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
    to { background-position: -240% 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
    .user-app {
        width: min(95%, 680px);
        padding-top: 10px;
    }

    .user-top-card,
    .user-card-panel {
        border-radius: 16px;
        padding: 18px;
    }

    .user-top-card {
        padding-top: 78px;
    }

    .user-menu-wrap {
        top: 14px;
        left: 14px;
    }

    .user-tabs {
        grid-template-columns: 1fr;
    }

    .result-box p,
    .qr-actions,
    .lookup-result-row,
    .lookup-result-row:not(:has(.lookup-bank-logo)) {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lookup-result-row {
        justify-items: start;
    }

    .copy-button {
        width: 100%;
    }

    .result-box b {
        text-align: left;
    }

    .smart-bank-menu {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 86px;
        max-height: calc(100vh - 110px);
        overflow: auto;
    }
}

.qtv-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.qtv-table th,
.qtv-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--qtv-line);
    text-align: left;
    vertical-align: middle;
}

.qtv-table th {
    background: #ecf7ff;
    color: #06458d;
    font-weight: 950;
}

.row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.row-actions button {
    min-height: 32px;
    padding: 7px 10px;
    box-shadow: none;
    background: #eaf4ff;
    color: #075caa;
}

.row-actions button:hover {
    background: var(--qtv-blue);
    color: #fff;
}

.qtv-empty,
.qtv-loading {
    padding: 20px;
    color: var(--qtv-muted);
    font-weight: 850;
}

.qtv-login-dialog {
    border: 0;
    padding: 0;
    background: transparent;
}

.qtv-login-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
}

.qtv-login-card {
    width: min(420px, calc(100vw - 32px));
    border-radius: 26px;
    padding: 26px;
    display: grid;
    gap: 14px;
}

.qtv-login-card h2 {
    margin: 0;
    font-size: 1.8rem;
}

.qtv-login-card p,
.qtv-login-card small {
    color: var(--qtv-muted);
    font-weight: 750;
}

.qtv-login-card label {
    display: grid;
    gap: 8px;
    font-weight: 900;
}

.qtv-login-card input {
    min-height: 48px;
    border: 1px solid #bfd6f2;
    border-radius: 14px;
    padding: 10px 13px;
}

.toast-root {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
    display: grid;
    gap: 10px;
}

.qtv-toast {
    padding: 12px 15px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--qtv-line);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    font-weight: 900;
}

.qtv-toast.error {
    color: var(--qtv-red);
}

body.sidebar-collapsed .qtv-shell {
    grid-template-columns: 92px minmax(0, 1fr);
}

body.sidebar-collapsed .qtv-brand div,
body.sidebar-collapsed .qtv-nav span {
    display: none;
}

body[data-page="admin"] .qtv-icon-btn {
    display: none !important;
}

body[data-page="admin"] .admin-bank-picker {
    position: relative;
    display: grid;
    gap: 8px;
}

body[data-page="admin"] .admin-bank-picker > label {
    font-weight: 850;
    color: var(--qtv-text);
}

body[data-page="admin"] .admin-bank-trigger {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--qtv-line);
    border-radius: 14px;
    padding: 0 14px;
    color: var(--qtv-text);
    background: #fff;
    box-shadow: none;
}

body[data-page="admin"] .admin-bank-trigger img,
body[data-page="admin"] .admin-bank-list img {
    width: 42px;
    height: 26px;
    object-fit: contain;
    border: 1px solid var(--qtv-line);
    border-radius: 8px;
    background: #fff;
}

body[data-page="admin"] .admin-bank-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--qtv-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(16, 89, 160, .18);
}

body[data-page="admin"] .admin-bank-search {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--qtv-line);
    border-radius: 12px;
    padding: 0 12px;
}

body[data-page="admin"] .admin-bank-list {
    max-height: 330px;
    overflow: auto;
    display: grid;
    gap: 7px;
}

body[data-page="admin"] .admin-bank-list button {
    justify-content: flex-start;
    gap: 12px;
    min-height: 54px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 10px;
    background: #f7fbff;
    color: var(--qtv-text);
    box-shadow: none;
}

body[data-page="admin"] .admin-bank-list button:hover {
    border-color: #9cccf8;
    background: #eaf6ff;
    transform: none;
}

body[data-page="admin"] .admin-bank-list span {
    display: grid;
    gap: 2px;
    text-align: left;
}

body[data-page="admin"] .admin-bank-list small {
    color: var(--qtv-muted);
    font-weight: 800;
}

body.qtv-dark[data-page="admin"] {
    --qtv-bg: #09111f;
    --qtv-card: #0f172a;
    --qtv-soft: #111c31;
    --qtv-line: #1f3658;
    --qtv-text: #e8f2ff;
    --qtv-muted: #9fb1ca;
    background: #09111f;
}

body.qtv-dark[data-page="admin"] .qtv-sidebar,
body.qtv-dark[data-page="admin"] .qtv-header,
body.qtv-dark[data-page="admin"] .qtv-panel,
body.qtv-dark[data-page="admin"] .qtv-empty-state,
body.qtv-dark[data-page="admin"] .qtv-login-card,
body.qtv-dark[data-page="admin"] .qtv-table-wrap,
body.qtv-dark[data-page="admin"] .qtv-toast {
    background: var(--qtv-card);
}

body.qtv-dark[data-page="admin"] .qtv-header h1,
body.qtv-dark[data-page="admin"] .qtv-panel h2,
body.qtv-dark[data-page="admin"] .qtv-empty-state h2,
body.qtv-dark[data-page="admin"] .qtv-nav button {
    color: var(--qtv-text);
}

body.qtv-dark[data-page="admin"] .qtv-form input,
body.qtv-dark[data-page="admin"] .qtv-form select,
body.qtv-dark[data-page="admin"] .qtv-form textarea,
body.qtv-dark[data-page="admin"] .qtv-login-card input,
body.qtv-dark[data-page="admin"] .qtv-table th {
    background: var(--qtv-soft);
    border-color: var(--qtv-line);
    color: var(--qtv-text);
}

@media (max-width: 1100px) {
    .qtv-shell { grid-template-columns: 230px minmax(0, 1fr); }
    .qtv-grid-2 { grid-template-columns: 1fr; }
    .qtv-stat-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
    .qtv-form.inline-form { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 760px) {
    .qtv-shell {
        display: block;
        padding: 12px;
    }
    .qtv-sidebar {
        position: static;
        height: auto;
        margin-bottom: 12px;
    }
    .qtv-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .qtv-header {
        position: static;
        flex-wrap: wrap;
    }
    .qtv-header-actions {
        width: 100%;
        justify-content: stretch;
    }
    .qtv-header-actions > * {
        flex: 1 1 auto;
    }
    .qtv-stat-grid,
    .qtv-form.inline-form {
        grid-template-columns: 1fr;
    }
    .result-list div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* User: IP-only access, compact lookup result */
body[data-page="user"] .user-app {
    display: block;
}

body[data-page="user"] .user-menu-panel {
    width: min(78vw, 260px);
    padding: 12px;
}

body[data-page="user"] .user-tabs {
    display: grid;
    gap: 10px;
}

body[data-page="user"] .user-tabs button {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    padding: 0 14px;
}

body[data-page="user"] .result-panel {
    padding: 18px;
}

body[data-page="user"] .lookup-result-card.compact-result {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #cfe3fb;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

body[data-page="user"] .lookup-result-row.compact-copy-row,
body[data-page="user"] .lookup-result-card.compact-result .lookup-result-row {
    min-height: 54px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #dbeafe;
}

body[data-page="user"] .lookup-result-row.compact-copy-row:has(.lookup-bank-logo) {
    grid-template-columns: 34px 54px 1fr auto;
}

body[data-page="user"] .lookup-result-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eaf6ff;
    font-size: 16px;
}

body[data-page="user"] .lookup-bank-logo {
    width: 50px;
    height: 32px;
    object-fit: contain;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #dbeafe;
}

body[data-page="user"] .lookup-result-row small {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 900;
}

body[data-page="user"] .lookup-result-row b {
    color: #06458f;
    font-size: .98rem;
    line-height: 1.25;
}

body[data-page="user"] .copy-button {
    min-width: 54px;
    min-height: 24px;
    padding: 0 7px;
    border-radius: 7px;
    border: 1px solid #b9d8fb;
    background: #eef8ff;
    color: #06458f;
    font-weight: 950;
    font-size: .72rem;
    box-shadow: none;
}

body[data-page="user"] .copy-button:hover {
    background: #dff1ff;
    transform: translateY(-1px);
}

body[data-page="user"] .beneficiary-result {
    gap: 8px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #fff7f7, #fff1f2);
    border-color: #f7b7bd;
}

body[data-page="user"] .beneficiary-head {
    display: grid;
    gap: 8px;
}

body[data-page="user"] .beneficiary-head small {
    color: #b91c3b;
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-page="user"] .beneficiary-head > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body[data-page="user"] .beneficiary-head strong {
    color: #dc2626;
    font-size: clamp(1.35rem, 4.5vw, 1.9rem);
    line-height: 1.05;
    font-weight: 950;
}

body[data-page="user"] .beneficiary-result p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    color: #8f1d2c;
    font-size: .98rem;
    font-weight: 800;
}

body[data-page="user"] .beneficiary-result p span {
    color: #a72536;
}

body[data-page="user"] .beneficiary-result p b {
    color: #7f1d1d;
    font-weight: 950;
}

body[data-page="user"] .copy-button.inline-copy {
    min-width: 52px;
    min-height: 23px;
    margin-left: 5px;
    font-size: .7rem;
}

body[data-page="user"] .loading-result {
    opacity: .92;
}

body[data-page="user"] .loading-result .beneficiary-head strong {
    color: #0f4c8a;
    font-size: 1.2rem;
}

body.dark-mode[data-page="user"] .beneficiary-result {
    background: linear-gradient(180deg, #1f1720, #221821);
    border-color: #7f1d1d;
}

body.dark-mode[data-page="user"] .beneficiary-head strong {
    color: #fca5a5;
}

body.dark-mode[data-page="user"] .beneficiary-result p,
body.dark-mode[data-page="user"] .beneficiary-result p span,
body.dark-mode[data-page="user"] .beneficiary-result p b {
    color: #fee2e2;
}

/* QTV: compact IP manager */
body[data-page="admin"] .ip-manager-panel .panel-title {
    align-items: center;
    gap: 12px;
}

body[data-page="admin"] .ip-manager-panel .qtv-help {
    margin: 6px 0 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: #eaf6ff;
}

body[data-page="admin"] .ip-editor {
    margin-top: 12px;
    grid-template-columns: minmax(360px, 2fr) minmax(220px, 1fr);
    align-items: end;
}

body[data-page="admin"] .mini-ip-editor {
    padding: 18px;
    border: 1px solid var(--qtv-line);
    border-radius: 16px;
    background: rgba(255,255,255,.76);
}

body[data-page="admin"] .mini-ip-editor .ip-pattern-field {
    grid-row: span 2;
}

body[data-page="admin"] .mini-ip-editor textarea {
    min-height: 150px;
    resize: vertical;
    border: 1px solid var(--qtv-line);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    font-weight: 700;
    outline: none;
}

body[data-page="admin"] .mini-ip-editor textarea:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,.14);
}

body[data-page="admin"] .mini-ip-editor .form-actions {
    display: flex;
    gap: 10px;
    align-items: end;
}

body[data-page="admin"] .mini-ip-editor .form-actions button {
    min-width: 70px;
}

body[data-page="admin"] .ip-table-panel {
    margin-top: 14px;
}

body[data-page="admin"] .ip-toolbar {
    margin-bottom: 12px;
}

body[data-page="admin"] .ip-table td,
body[data-page="admin"] .ip-table th {
    padding: 11px 12px;
}

@media (max-width: 760px) {
    body[data-page="user"] .lookup-result-row.compact-copy-row,
    body[data-page="user"] .lookup-result-row.compact-copy-row:has(.lookup-bank-logo),
    body[data-page="user"] .lookup-result-card.compact-result .lookup-result-row {
        grid-template-columns: 34px 1fr;
    }

    body[data-page="user"] .lookup-bank-logo,
    body[data-page="user"] .copy-button {
        grid-column: 2;
    }

    body[data-page="user"] .copy-button {
        width: auto;
    }

    body[data-page="admin"] .ip-editor {
        grid-template-columns: 1fr;
    }

    body[data-page="admin"] .mini-ip-editor .ip-pattern-field {
        grid-row: auto;
    }
}

/* Final User UI overrides: smoother lookup/QR layout */
body[data-page="user"] .user-lookup-form,
body[data-page="user"] .user-qr-form {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(220px, .82fr);
    align-items: end;
    gap: 12px;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button,
body[data-page="user"] .user-qr-form > label:nth-of-type(n + 2) {
    grid-column: 1 / -1;
}

body[data-page="user"] .user-card-panel,
body[data-page="user"] .smart-bank-trigger,
body[data-page="user"] .smart-bank-menu,
body[data-page="user"] .clean-form input,
body[data-page="user"] .clean-form textarea,
body[data-page="user"] .copy-button {
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

body[data-page="user"] .user-card-panel {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

body[data-page="user"] .smart-bank-list {
    scroll-behavior: smooth;
}

body[data-page="user"] .copy-button,
body[data-page="user"] .copy-button.inline-copy {
    width: auto;
    min-width: 48px;
    min-height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    font-size: .68rem;
    line-height: 1;
}

body[data-page="user"] .beneficiary-result {
    padding: 14px 16px;
}

body[data-page="user"] .beneficiary-head > div {
    gap: 8px;
}

body[data-page="user"] .beneficiary-head strong {
    overflow-wrap: anywhere;
}

@media (max-width: 680px) {
    body[data-page="user"] .user-lookup-form,
    body[data-page="user"] .user-qr-form {
        grid-template-columns: 1fr;
    }

    body[data-page="user"] .user-lookup-form > button,
    body[data-page="user"] .user-qr-form > button,
    body[data-page="user"] .user-qr-form > label {
        grid-column: 1;
    }
}

/* User login, account menu and password form */
body[data-page="user"] .user-top-card.user-login-hidden {
    display: none;
}

body[data-page="user"] .user-menu-account {
    min-height: 40px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eaf6ff;
    color: #06458f;
    font-weight: 950;
}

body[data-page="user"] .user-password-form {
    display: grid;
    gap: 14px;
}

body[data-page="user"] .user-login-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}

body[data-page="user"] .user-login-card {
    width: min(94vw, 430px);
    border-radius: 22px;
    padding: 24px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #d6e8fb;
    box-shadow: 0 24px 60px rgba(16, 89, 160, .14);
    display: grid;
    gap: 13px;
}

body[data-page="user"] .user-login-card img {
    width: min(260px, 78%);
    margin: 0 auto 6px;
    object-fit: contain;
}

body[data-page="user"] .user-login-card h1 {
    margin: 0;
    color: #06458f;
    font-size: 1.7rem;
    text-align: center;
}

body[data-page="user"] .user-login-card p,
body[data-page="user"] .user-login-card small {
    margin: 0;
    color: #64748b;
    font-weight: 800;
    text-align: center;
}

body[data-page="user"] .user-login-card label {
    display: grid;
    gap: 7px;
    color: #102a4c;
    font-weight: 900;
}

body[data-page="user"] .user-login-card input {
    min-height: 48px;
    border: 1px solid #bfd6f2;
    border-radius: 13px;
    padding: 0 14px;
    font: inherit;
    outline: none;
}

body[data-page="user"] .user-login-card input:focus {
    border-color: #1d7df0;
    box-shadow: 0 0 0 4px rgba(29, 125, 240, .13);
}

body[data-page="user"] .user-login-card button,
body[data-page="user"] .user-password-form button {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #21a8f5, #245fe8);
    color: #fff;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(37, 95, 232, .20);
}

body.dark-mode[data-page="user"] .user-login-card,
body.dark-mode[data-page="user"] .user-menu-account {
    background: #0f172a;
    border-color: #1f3658;
}

body.dark-mode[data-page="user"] .user-login-card h1,
body.dark-mode[data-page="user"] .user-login-card label,
body.dark-mode[data-page="user"] .user-menu-account {
    color: #e8f2ff;
}

/* User only: bố cục tra cứu ngang, kết quả gọn như bản check cũ */
body[data-page="user"] .lookup-inline-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

body[data-page="user"] .lookup-inline-row label,
body[data-page="user"] .lookup-inline-row .smart-bank {
    min-width: 0 !important;
    width: 100% !important;
}

body[data-page="user"] .lookup-inline-row .smart-bank-trigger,
body[data-page="user"] .lookup-inline-row input {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
}

body[data-page="user"] .user-lookup-form > button {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
    margin-top: 0 !important;
}

body[data-page="user"] .beneficiary-result {
    padding: 16px 18px !important;
    border-radius: 16px !important;
    gap: 9px !important;
    background: linear-gradient(180deg, #fff7f7, #fff1f2) !important;
    border: 1px solid #f4a8b1 !important;
    box-shadow: 0 12px 28px rgba(185, 28, 28, .08) !important;
}

body[data-page="user"] .beneficiary-head small {
    color: #b91c3b !important;
    font-size: .74rem !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-weight: 950 !important;
}

body[data-page="user"] .beneficiary-head > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
}

body[data-page="user"] .beneficiary-head strong {
    color: #dc2626 !important;
    font-size: clamp(1.35rem, 4.5vw, 1.9rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
}

body[data-page="user"] .beneficiary-result p {
    margin: 0 !important;
    color: #991b1b !important;
    font-weight: 850 !important;
}

body[data-page="user"] .beneficiary-result p b {
    color: #7f1d1d !important;
    font-weight: 950 !important;
}

body[data-page="user"] .copy-button,
body[data-page="user"] .copy-button.inline-copy {
    min-width: 52px !important;
    width: auto !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 7px !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    body[data-page="user"] .lookup-inline-row {
        grid-template-columns: 1fr !important;
    }
}

/* User layout polish: ngân hàng + số tài khoản ngang, logo thật trong khung chọn */
body[data-page="user"] .clean-form.user-lookup-form,
body[data-page="user"] .clean-form.user-qr-form {
    display: grid !important;
    gap: 14px !important;
}

body[data-page="user"] .lookup-inline-row {
    display: grid !important;
    grid-template-columns: minmax(280px, 1.35fr) minmax(220px, .85fr) !important;
    gap: 12px !important;
    align-items: end !important;
}

body[data-page="user"] .lookup-inline-row > label,
body[data-page="user"] .lookup-inline-row > .smart-bank {
    width: 100% !important;
    min-width: 0 !important;
}

body[data-page="user"] .smart-bank-trigger {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 14px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}

body[data-page="user"] .smart-bank-trigger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .10) !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-logo,
body[data-page="user"] .smart-bank-trigger > img,
body[data-page="user"] .smart-bank-trigger .selected-bank-logo img {
    width: 42px !important;
    height: 34px !important;
    object-fit: contain !important;
    border-radius: 9px !important;
    background: #fff !important;
    border: 1px solid rgba(147, 197, 253, .75) !important;
    padding: 3px !important;
}

body[data-page="user"] .smart-bank-trigger span:not(.selected-bank-logo) {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    text-align: left !important;
}

body[data-page="user"] .smart-bank-trigger b {
    display: block !important;
    color: #06478e !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="user"] .smart-bank-trigger small {
    display: block !important;
    color: #64748b !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body[data-page="user"] .lookup-inline-row input,
body[data-page="user"] .user-qr-form input,
body[data-page="user"] .user-qr-form textarea {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 15px !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body[data-page="user"] .user-qr-form textarea {
    min-height: 92px !important;
    resize: vertical !important;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button {
    width: 100% !important;
    min-height: 56px !important;
    border-radius: 15px !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}

body[data-page="user"] .user-lookup-form > button:hover:not(:disabled),
body[data-page="user"] .user-qr-form > button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

body[data-page="user"] .smart-bank-menu {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
    animation: userMenuFade .16s ease both !important;
}

@keyframes userMenuFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

body[data-page="user"] .smart-bank-list button {
    min-height: 52px !important;
    align-items: center !important;
    transition: background .16s ease, transform .16s ease !important;
}

body[data-page="user"] .smart-bank-list button:hover {
    transform: translateX(2px) !important;
}

body[data-page="admin"] .time-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 760px) {
    body[data-page="user"] .lookup-inline-row {
        grid-template-columns: 1fr !important;
    }

    body[data-page="user"] .smart-bank-trigger,
    body[data-page="user"] .lookup-inline-row input {
        min-height: 56px !important;
        height: auto !important;
    }
}

/* Web User final polish: logo thật, chữ gọn trong khung, QR không dính ô */
body[data-page="user"] .user-card-panel {
    overflow: visible !important;
}

body[data-page="user"] .lookup-inline-row {
    display: grid !important;
    grid-template-columns: minmax(350px, 1.6fr) minmax(190px, .6fr) !important;
    gap: 14px !important;
    align-items: end !important;
    width: 100% !important;
}

body[data-page="user"] .lookup-inline-row > .smart-bank,
body[data-page="user"] .lookup-inline-row > label {
    min-width: 0 !important;
    width: 100% !important;
}

body[data-page="user"] .smart-bank-trigger {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 16px 7px 12px !important;
    overflow: hidden !important;
    text-align: left !important;
}

body[data-page="user"] .smart-bank-trigger::after {
    position: static !important;
    justify-self: end !important;
    grid-column: 3 !important;
    margin-right: 2px !important;
}

body[data-page="user"] .selected-bank-logo {
    width: 42px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 9px !important;
    background: #fff !important;
    overflow: hidden !important;
}

body[data-page="user"] .smart-bank-trigger .bank-logo-img,
body[data-page="user"] .smart-bank-trigger .selected-bank-logo img,
body[data-page="user"] .smart-bank-list .bank-logo-img,
body[data-page="user"] .smart-bank-list img {
    width: 40px !important;
    height: 30px !important;
    max-width: 40px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    padding: 0 !important;
}

body[data-page="user"] .smart-bank-trigger > .bank-logo-img {
    width: 42px !important;
    height: 34px !important;
    padding: 3px !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 9px !important;
}

body[data-page="user"] .selected-bank-text,
body[data-page="user"] .smart-bank-trigger span:not(.selected-bank-logo) {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    justify-items: start !important;
    text-align: left !important;
    padding-left: 0 !important;
    transform: translateX(-4px) !important;
}

body[data-page="user"] .smart-bank-trigger b,
body[data-page="user"] .smart-bank-trigger small {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.12 !important;
}

body[data-page="user"] .smart-bank-list button {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 54px !important;
}

body[data-page="user"] .user-lookup-form,
body[data-page="user"] .user-qr-form {
    gap: 14px !important;
}

body[data-page="user"] .user-lookup-form > button,
body[data-page="user"] .user-qr-form > button {
    margin-top: 0 !important;
}

body[data-page="user"] .user-qr-form > label {
    display: grid !important;
    gap: 8px !important;
}

body[data-page="user"] .user-qr-form > label:nth-of-type(1) {
    margin-top: 2px !important;
}

body[data-page="user"] .user-qr-form input,
body[data-page="user"] .user-qr-form textarea,
body[data-page="user"] .lookup-inline-row input {
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 15px !important;
}

body[data-page="user"] .user-qr-form textarea {
    height: auto !important;
    min-height: 92px !important;
}

@media (max-width: 760px) {
    body[data-page="user"] .lookup-inline-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body[data-page="user"] .smart-bank-trigger {
        grid-template-columns: 46px minmax(0, 1fr) 18px !important;
        min-height: 56px !important;
        height: 56px !important;
    }

    body[data-page="user"] .user-qr-form input,
    body[data-page="user"] .lookup-inline-row input {
        height: 56px !important;
        min-height: 56px !important;
    }
}

/* Web User QR order: Ngân hàng -- Số tài khoản / Họ tên / Số tiền / Nội dung */
body[data-page="user"] .clean-form.user-qr-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

body[data-page="user"] .user-qr-form > .lookup-inline-row {
    grid-column: 1 / -1 !important;
}

body[data-page="user"] .user-qr-form > label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body[data-page="user"] .user-qr-form > label:nth-of-type(1),
body[data-page="user"] .user-qr-form > label:nth-of-type(2),
body[data-page="user"] .user-qr-form > label:nth-of-type(3) {
    grid-column: 1 / -1 !important;
}

body[data-page="user"] .user-qr-form #qrOwner,
body[data-page="user"] .user-qr-form #qrAmount,
body[data-page="user"] .user-qr-form #qrContent {
    width: 100% !important;
}

/* Final blue-white polish: User result + QTV Check/OTP surface */
body[data-page="user"] .beneficiary-result,
body[data-page="user"] .lookup-result-card.beneficiary-result {
    background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%) !important;
    border: 1px solid #bfdbfe !important;
    color: #0f4c8a !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .10) !important;
}

body[data-page="user"] .beneficiary-head small {
    color: #0f4c8a !important;
    background: #dbeafe !important;
}

body[data-page="user"] .beneficiary-head strong {
    color: #034ea2 !important;
    text-shadow: none !important;
}

body[data-page="user"] .beneficiary-result p,
body[data-page="user"] .beneficiary-result p span,
body[data-page="user"] .beneficiary-result p b {
    color: #0f4c8a !important;
}

body[data-page="user"] .beneficiary-result .copy-btn,
body[data-page="user"] .beneficiary-result button,
body[data-page="admin"] .qtv-mini-copy {
    width: auto !important;
    min-width: 58px !important;
    min-height: 28px !important;
    padding: 5px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #93c5fd !important;
    background: #e0f2fe !important;
    color: #034ea2 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease !important;
}

body[data-page="user"] .beneficiary-result .copy-btn:hover,
body[data-page="user"] .beneficiary-result button:hover,
body[data-page="admin"] .qtv-mini-copy:hover {
    background: #bfdbfe !important;
    border-color: #60a5fa !important;
    transform: translateY(-1px) !important;
}

body.dark-mode[data-page="user"] .beneficiary-result,
body.dark-mode[data-page="user"] .lookup-result-card.beneficiary-result {
    background: linear-gradient(180deg, #0f223a 0%, #102a45 100%) !important;
    border-color: rgba(96, 165, 250, .72) !important;
    color: #dbeafe !important;
}

body.dark-mode[data-page="user"] .beneficiary-head strong,
body.dark-mode[data-page="user"] .beneficiary-result p,
body.dark-mode[data-page="user"] .beneficiary-result p span,
body.dark-mode[data-page="user"] .beneficiary-result p b {
    color: #dbeafe !important;
}

body[data-page="admin"] .qtv-grid-2 {
    align-items: stretch !important;
    gap: 18px !important;
    grid-template-columns: minmax(520px, 1.18fr) minmax(360px, .82fr) !important;
}

body[data-page="admin"] .panel-card {
    border: 1px solid rgba(191, 219, 254, .92) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(15, 76, 138, .08) !important;
}

body[data-page="admin"] #checkForm.qtv-check-form {
    display: grid !important;
    grid-template-columns: minmax(360px, 1.42fr) minmax(230px, .8fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

body[data-page="admin"] #adminQrForm.qtv-qr-form {
    display: grid !important;
    grid-template-columns: minmax(360px, 1.42fr) minmax(230px, .8fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

body[data-page="admin"] #adminQrForm.qtv-qr-form > button {
    grid-column: 1 / -1 !important;
    min-height: 56px !important;
    border-radius: 15px !important;
    background: linear-gradient(90deg, #20a7e8, #2563eb) !important;
    color: #fff !important;
    font-weight: 900 !important;
}

body[data-page="admin"] #checkForm.qtv-check-form > button {
    grid-column: 1 / -1 !important;
    min-height: 56px !important;
    border-radius: 15px !important;
    background: linear-gradient(90deg, #20a7e8, #2563eb) !important;
    color: #fff !important;
    font-weight: 900 !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}

body[data-page="admin"] .qtv-qr-form .span-2 {
    grid-column: 1 / -1 !important;
}

body[data-page="admin"] .qtv-qr-form textarea {
    min-height: 92px !important;
    resize: vertical !important;
}

body[data-page="admin"] .qtv-qr-box {
    display: grid !important;
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f8fbff, #eff6ff) !important;
}

body[data-page="admin"] .qtv-qr-box > img {
    width: min(260px, 100%) !important;
    justify-self: center !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: 1px solid #bfdbfe !important;
    padding: 10px !important;
}

body[data-page="admin"] .qtv-qr-box .qr-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body[data-page="admin"] .qtv-qr-box .qr-actions a {
    display: inline-flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 14px !important;
    border-radius: 11px !important;
    border: 1px solid #93c5fd !important;
    background: #e0f2fe !important;
    color: #034ea2 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body[data-page="admin"] #checkForm.qtv-check-form > button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

body[data-page="admin"] #checkForm .admin-bank-picker,
body[data-page="admin"] #adminQrForm .admin-bank-picker,
body[data-page="admin"] #checkForm label,
body[data-page="admin"] #adminQrForm label {
    min-width: 0 !important;
}

body[data-page="admin"] #checkForm label input,
body[data-page="admin"] #adminQrForm label input,
body[data-page="admin"] #adminQrForm textarea,
body[data-page="admin"] .admin-bank-trigger,
body[data-page="admin"] .admin-bank-search,
body[data-page="admin"] #otpSearch,
body[data-page="admin"] #otpAccountForm input,
body[data-page="admin"] #otpAccountForm textarea {
    min-height: 56px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 15px !important;
    background: #f8fbff !important;
    color: #0f2544 !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body[data-page="admin"] #checkForm label input:focus,
body[data-page="admin"] .admin-bank-search:focus,
body[data-page="admin"] #otpSearch:focus,
body[data-page="admin"] #otpAccountForm input:focus,
body[data-page="admin"] #otpAccountForm textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .16) !important;
    background: #fff !important;
}

body[data-page="admin"] .admin-bank-trigger {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    text-align: left !important;
    overflow: hidden !important;
}

body[data-page="admin"] .admin-bank-trigger span,
body[data-page="admin"] .admin-bank-list button span {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    line-height: 1.15 !important;
}

body[data-page="admin"] .admin-bank-trigger b,
body[data-page="admin"] .admin-bank-trigger small,
body[data-page="admin"] .admin-bank-list button b,
body[data-page="admin"] .admin-bank-list button small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="admin"] .admin-bank-menu {
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14) !important;
    overflow: hidden !important;
}

body[data-page="admin"] .admin-bank-list button {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-height: 54px !important;
    transition: background .16s ease, transform .16s ease !important;
    text-align: left !important;
}

body[data-page="admin"] .admin-bank-list button:hover {
    background: #eff6ff !important;
    transform: translateX(2px) !important;
}

body[data-page="admin"] .admin-bank-trigger img,
body[data-page="admin"] .admin-bank-list img,
body[data-page="admin"] .admin-check-bank img {
    width: 42px !important;
    height: 34px !important;
    object-fit: contain !important;
    border: 1px solid rgba(147, 197, 253, .72) !important;
    border-radius: 9px !important;
    background: #fff !important;
    padding: 3px !important;
}

body[data-page="admin"] .admin-check-result.qtv-user-like-result {
    display: grid !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f8fbff, #eff6ff) !important;
    color: #0f4c8a !important;
}

body[data-page="admin"] .admin-check-bank {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
}

body[data-page="admin"] .admin-check-result p {
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    color: #0f4c8a !important;
}

body[data-page="admin"] .admin-check-result p span,
body[data-page="admin"] .admin-check-bank span {
    color: #64748b !important;
    font-weight: 850 !important;
}

body[data-page="admin"] .admin-check-result p strong,
body[data-page="admin"] .admin-check-bank strong {
    color: #034ea2 !important;
    font-weight: 950 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="admin"] .qtv-result-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

body[data-page="admin"] .qtv-mini-copy {
    min-height: 30px !important;
    width: auto !important;
    padding: 5px 12px !important;
    border-radius: 10px !important;
    border: 1px solid #93c5fd !important;
    background: #e0f2fe !important;
    color: #034ea2 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow: none !important;
}

body[data-page="admin"] .qtv-history-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 12px !important;
}

body[data-page="admin"] .qtv-history-card {
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f8fbff, #eff6ff) !important;
    padding: 14px !important;
    box-shadow: 0 10px 22px rgba(15, 76, 138, .06) !important;
}

body[data-page="admin"] .qtv-history-card.failed {
    border-color: #fecaca !important;
    background: linear-gradient(180deg, #fffafa, #fff1f2) !important;
}

body[data-page="admin"] .qtv-history-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

body[data-page="admin"] .qtv-history-head strong {
    color: #034ea2 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="admin"] .qtv-history-head span {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body[data-page="admin"] .qtv-history-card.failed .qtv-history-head span {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

body[data-page="admin"] .qtv-history-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 12px !important;
}

body[data-page="admin"] .qtv-history-grid p {
    margin: 0 !important;
    min-width: 0 !important;
}

body[data-page="admin"] .qtv-history-grid b {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

body[data-page="admin"] .qtv-history-grid em {
    display: block !important;
    color: #0f4c8a !important;
    font-style: normal !important;
    font-weight: 850 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body[data-page="admin"] .otp-admin-panel,
body[data-page="admin"] .otp-admin-panel + .panel-card {
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
}

body[data-page="admin"] #otpAccountForm.qtv-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-page="admin"] #otpAccountForm .form-actions button,
body[data-page="admin"] .row-actions button,
body[data-page="admin"] .admin-toolbar button {
    min-height: 38px !important;
    border-radius: 11px !important;
    padding: 8px 14px !important;
    font-weight: 900 !important;
}

body[data-page="admin"] .qtv-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body[data-page="admin"] .qtv-table th {
    background: #eaf4ff !important;
    color: #0f4c8a !important;
}

body[data-page="admin"] .qtv-table td {
    background: #fff !important;
    border-bottom: 1px solid #dbeafe !important;
}

body[data-page="admin"] .qtv-table tbody tr:hover td {
    background: #f8fbff !important;
}

body[data-page="admin"] .admin-toolbar {
    gap: 12px !important;
    align-items: center !important;
}

body[data-page="admin"] .off-admin-panel,
body[data-page="admin"] .off-admin-panel + .panel-card {
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 36px rgba(15, 76, 138, .08) !important;
}

body[data-page="admin"] .off-month-filter {
    min-width: 180px !important;
}

body[data-page="admin"] .off-schedule-form.qtv-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body[data-page="admin"] .off-schedule-form input,
body[data-page="admin"] .off-schedule-form select,
body[data-page="admin"] #offMonthFilter,
body[data-page="admin"] #offSearch {
    min-height: 46px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    color: #0f2544 !important;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

body[data-page="admin"] .off-schedule-form input:focus,
body[data-page="admin"] .off-schedule-form select:focus,
body[data-page="admin"] #offMonthFilter:focus,
body[data-page="admin"] #offSearch:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, .14) !important;
    background: #fff !important;
}

body[data-page="admin"] .off-table td strong {
    color: #034ea2 !important;
}

.off-user-panel {
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
}

.off-user-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.off-user-head label {
    min-width: 180px;
}

.off-user-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.off-now {
    color: #64748b;
    font-weight: 800;
}

.off-alert {
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #034ea2;
    font-weight: 950;
    border-radius: 14px;
    padding: 12px 14px;
}

.off-user-card {
    display: grid;
    gap: 8px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(15, 76, 138, .06);
}

.off-user-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.off-user-card b {
    color: #034ea2;
    font-weight: 950;
}

.off-user-card span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0f4c8a;
    font-weight: 900;
}

.off-user-card p,
.off-user-card small {
    margin: 0;
    color: #334155;
    font-weight: 800;
}

body[data-page="admin"] .off-table tr.shift-change-row td {
    background: #fff5f5 !important;
    color: #7f1d1d !important;
    border-top-color: #fecdd3 !important;
    border-bottom-color: #fecdd3 !important;
}

body[data-page="admin"] .off-table tr.shift-change-row td strong,
body[data-page="admin"] .off-table tr.shift-change-row td:nth-child(4) {
    color: #be123c !important;
}

body[data-page="admin"] .off-table tr.day-shift-row td {
    background: #eff6ff !important;
    color: #0f4c8a !important;
    border-top-color: #bfdbfe !important;
    border-bottom-color: #bfdbfe !important;
}

body[data-page="admin"] .off-table tr.day-shift-row td strong,
body[data-page="admin"] .off-table tr.day-shift-row td:nth-child(4) {
    color: #034ea2 !important;
}

body[data-page="admin"] .off-table tr.night-shift-row td {
    background: #eef2ff !important;
    color: #312e81 !important;
    border-top-color: #c7d2fe !important;
    border-bottom-color: #c7d2fe !important;
}

body[data-page="admin"] .off-table tr.night-shift-row td strong,
body[data-page="admin"] .off-table tr.night-shift-row td:nth-child(4) {
    color: #4338ca !important;
}

body[data-page="admin"] .off-table tr.nkl-row td {
    background: #f8fafc !important;
    color: #334155 !important;
    border-top-color: #cbd5e1 !important;
    border-bottom-color: #cbd5e1 !important;
}

.off-user-card.shift-change-card {
    border-color: #fecdd3 !important;
    background: linear-gradient(180deg, #fff, #fff1f2) !important;
    box-shadow: 0 12px 28px rgba(190, 18, 60, .08) !important;
}

.off-user-card.shift-change-card b,
.off-user-card.shift-change-card p strong {
    color: #be123c !important;
}

.off-user-card.shift-change-card span {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

body[data-page="admin"] .off-table tr.middle-shift-row td {
    background: #fff7ed !important;
    color: #7c2d12 !important;
    border-top-color: #fed7aa !important;
    border-bottom-color: #fed7aa !important;
}

body[data-page="admin"] .off-table tr.middle-shift-row td strong,
body[data-page="admin"] .off-table tr.middle-shift-row td:nth-child(4) {
    color: #c2410c !important;
}

.off-user-card.day-shift-card {
    border-color: #bfdbfe !important;
    background: linear-gradient(180deg, #fff, #eff6ff) !important;
    box-shadow: 0 12px 28px rgba(3, 78, 162, .08) !important;
}

.off-user-card.day-shift-card b,
.off-user-card.day-shift-card p strong {
    color: #034ea2 !important;
}

.off-user-card.day-shift-card span {
    background: #dbeafe !important;
    color: #0f4c8a !important;
}

body[data-page="admin"] .off-table tr.shift-to-middle-row td {
    background: #fff7ed !important;
    color: #7c2d12 !important;
    border-top-color: #fdba74 !important;
    border-bottom-color: #fdba74 !important;
}

body[data-page="admin"] .off-table tr.shift-to-middle-row td strong,
body[data-page="admin"] .off-table tr.shift-to-middle-row td:nth-child(4) {
    color: #ea580c !important;
}

body[data-page="admin"] .off-table tr.shift-to-night-row td {
    background: #f5f3ff !important;
    color: #4c1d95 !important;
    border-top-color: #ddd6fe !important;
    border-bottom-color: #ddd6fe !important;
}

body[data-page="admin"] .off-table tr.shift-to-night-row td strong,
body[data-page="admin"] .off-table tr.shift-to-night-row td:nth-child(4) {
    color: #6d28d9 !important;
}

body[data-page="admin"] .off-table tr.shift-to-day-row td {
    background: #ecfeff !important;
    color: #155e75 !important;
    border-top-color: #a5f3fc !important;
    border-bottom-color: #a5f3fc !important;
}

body[data-page="admin"] .off-table tr.shift-to-day-row td strong,
body[data-page="admin"] .off-table tr.shift-to-day-row td:nth-child(4) {
    color: #0891b2 !important;
}

.off-user-card.middle-shift-card {
    border-color: #fed7aa !important;
    background: linear-gradient(180deg, #fff, #fff7ed) !important;
    box-shadow: 0 12px 28px rgba(194, 65, 12, .08) !important;
}

.off-user-card.middle-shift-card b,
.off-user-card.middle-shift-card p strong {
    color: #c2410c !important;
}

.off-user-card.middle-shift-card span {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

.off-user-card.shift-to-middle-card {
    border-color: #fdba74 !important;
    background: linear-gradient(180deg, #fff, #fff7ed) !important;
    box-shadow: 0 12px 28px rgba(234, 88, 12, .08) !important;
}

.off-user-card.shift-to-middle-card b,
.off-user-card.shift-to-middle-card p strong {
    color: #ea580c !important;
}

.off-user-card.shift-to-middle-card span {
    background: #ffedd5 !important;
    color: #c2410c !important;
}

.off-user-card.shift-to-night-card {
    border-color: #ddd6fe !important;
    background: linear-gradient(180deg, #fff, #f5f3ff) !important;
    box-shadow: 0 12px 28px rgba(109, 40, 217, .08) !important;
}

.off-user-card.shift-to-night-card b,
.off-user-card.shift-to-night-card p strong {
    color: #6d28d9 !important;
}

.off-user-card.shift-to-night-card span {
    background: #ede9fe !important;
    color: #5b21b6 !important;
}

.off-user-card.shift-to-day-card {
    border-color: #a5f3fc !important;
    background: linear-gradient(180deg, #fff, #ecfeff) !important;
    box-shadow: 0 12px 28px rgba(8, 145, 178, .08) !important;
}

.off-user-card.shift-to-day-card b,
.off-user-card.shift-to-day-card p strong {
    color: #0891b2 !important;
}

.off-user-card.shift-to-day-card span {
    background: #cffafe !important;
    color: #155e75 !important;
}

.off-user-card.night-shift-card {
    border-color: #c7d2fe !important;
    background: linear-gradient(180deg, #fff, #eef2ff) !important;
    box-shadow: 0 12px 28px rgba(67, 56, 202, .08) !important;
}

.off-user-card.night-shift-card b,
.off-user-card.night-shift-card p strong {
    color: #4338ca !important;
}

.off-user-card.night-shift-card span {
    background: #e0e7ff !important;
    color: #312e81 !important;
}

.off-user-card.nkl-card {
    border-color: #cbd5e1 !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
}

body[data-page="admin"] .off-table tr.past-off-row td {
    background: #f8fafc !important;
    color: #64748b !important;
    border-top-color: #cbd5e1 !important;
    border-bottom-color: #cbd5e1 !important;
}

body[data-page="admin"] .off-table tr.past-off-row td strong,
body[data-page="admin"] .off-table tr.past-off-row td:nth-child(4) {
    color: #475569 !important;
}

.off-user-card.past-off-card {
    border-color: #cbd5e1 !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    box-shadow: 0 10px 22px rgba(100, 116, 139, .08) !important;
}

.off-user-card.past-off-card b,
.off-user-card.past-off-card p,
.off-user-card.past-off-card p strong,
.off-user-card.past-off-card small {
    color: #64748b !important;
}

.off-user-card.past-off-card span {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

.permission-picker {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr);
    gap: 14px;
    margin: 18px 0;
}

.permission-picker label {
    color: #0f3a68;
    font-weight: 900;
}

.permission-picker select {
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #fff;
    color: #0f2747;
    font-weight: 800;
    padding: 0 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.permission-picker select:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .14);
}

.permission-account-card.compact {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .permission-picker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body[data-page="admin"] #checkForm.qtv-check-form,
    body[data-page="admin"] #otpAccountForm.qtv-form-grid,
    body[data-page="admin"] .off-schedule-form.qtv-form-grid {
        grid-template-columns: 1fr !important;
    }

    body[data-page="admin"] #otpAccountForm .span-2,
    body[data-page="admin"] #otpAccountForm .form-actions,
    body[data-page="admin"] .off-schedule-form .span-2,
    body[data-page="admin"] .off-schedule-form .form-actions {
        grid-column: 1 / -1 !important;
    }

    body[data-page="admin"] .admin-check-result p {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }

    .off-user-head {
        display: grid;
    }

    .off-user-head label {
        min-width: 0;
    }
}

/* Bản vá gọn dropdown ngân hàng và phân quyền thủ công */
body[data-page="user"] .smart-bank-menu,
body[data-page="admin"] .admin-bank-menu {
    max-height: min(320px, 52vh) !important;
    overflow: hidden !important;
    z-index: 80 !important;
}

body[data-page="user"] .smart-bank-menu[hidden],
body[data-page="admin"] .admin-bank-menu[hidden] {
    display: none !important;
}

body[data-page="user"] .smart-bank-list,
body[data-page="admin"] .admin-bank-list {
    max-height: min(230px, 38vh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

body[data-page="user"] .smart-bank-trigger,
body[data-page="admin"] .admin-bank-trigger {
    contain: layout paint !important;
}

body[data-page="admin"] .permission-account-list {
    display: grid !important;
    gap: 14px !important;
}

body[data-page="admin"] .permission-account-card {
    display: grid !important;
    gap: 14px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fff, #f8fbff) !important;
    padding: 16px !important;
    box-shadow: 0 12px 30px rgba(15, 76, 138, .06) !important;
}

body[data-page="admin"] .permission-account-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

body[data-page="admin"] .permission-account-head h3,
body[data-page="admin"] .permission-account-head p {
    margin: 0 !important;
}

body[data-page="admin"] .permission-account-head h3 {
    color: #034ea2 !important;
    font-size: 1.04rem !important;
}

body[data-page="admin"] .permission-account-head p {
    color: #64748b !important;
    font-weight: 800 !important;
}

body[data-page="admin"] .permission-account-head span {
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    color: #034ea2 !important;
    font-weight: 950 !important;
}

body[data-page="admin"] .permission-check-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
}

body[data-page="admin"] .permission-toolbar {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) auto auto !important;
    gap: 10px !important;
    align-items: center !important;
}

body[data-page="admin"] .permission-toolbar input {
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 12px !important;
    padding: 0 13px !important;
    color: #0f2544 !important;
    font-weight: 850 !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

body[data-page="admin"] .permission-toolbar input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .14) !important;
}

body[data-page="admin"] .permission-toolbar button,
body[data-page="admin"] #saveSelectedPermissions {
    min-height: 42px !important;
    border-radius: 12px !important;
}

body[data-page="admin"] .permission-group-list {
    display: grid !important;
    gap: 14px !important;
}

body[data-page="admin"] .permission-group-card {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
    padding: 16px !important;
}

body[data-page="admin"] .permission-group-card legend {
    padding: 0 10px !important;
    color: #034ea2 !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

body[data-page="admin"] .permission-check-grid label {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    border: 1px solid #dbeafe !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f2544 !important;
    font-weight: 850 !important;
}

body[data-page="admin"] .permission-check-grid label small {
    margin-left: auto !important;
    color: #64748b !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
}

@media (max-width: 760px) {
    body[data-page="admin"] .permission-account-head {
        align-items: stretch !important;
        display: grid !important;
    }

    body[data-page="admin"] .permission-toolbar {
        grid-template-columns: 1fr !important;
    }
}

/* Nhóm OTP và LỊCH OFF: pill gọn, mở/đóng nhẹ, không tạo layout nặng */
.admin-group-stack {
    display: grid;
    gap: 12px;
}

.admin-group-card {
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 28px rgba(15, 76, 138, .06);
    overflow: hidden;
}

.admin-group-card[open] {
    border-color: #93c5fd;
}

.admin-group-pill {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #034ea2;
    font-weight: 950;
    background: #eff6ff;
    transition: background .16s ease, color .16s ease;
}

.admin-group-pill::-webkit-details-marker {
    display: none;
}

.admin-group-pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-group-pill small {
    margin-left: auto;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #0f4c8a;
    font-weight: 900;
}

.admin-group-pill b {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e0f2fe;
    transition: transform .16s ease;
}

.admin-group-card[open] .admin-group-pill {
    background: linear-gradient(90deg, #dbeafe, #eff6ff);
}

.admin-group-card[open] .admin-group-pill b {
    transform: rotate(180deg);
}

.compact-user-list summary {
    width: max-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #e0f2fe;
    color: #034ea2;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.compact-user-list summary::-webkit-details-marker {
    display: none;
}

.compact-user-list small {
    display: block;
    max-width: 360px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    color: #0f4c8a;
    font-weight: 800;
    word-break: break-word;
}

body[data-page="user"] .otp-user-row {
    grid-template-columns: minmax(112px, 1fr) 94px 58px 42px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    contain: layout paint;
}

body[data-page="user"] .otp-user-row button {
    min-width: 56px !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}

body[data-page="user"] .otp-user-code {
    min-width: 0 !important;
    height: 32px !important;
    min-height: 34px !important;
    padding: 0 7px !important;
    letter-spacing: .4px !important;
    font-size: .9rem !important;
}

body[data-page="user"] .otp-user-time {
    width: 42px !important;
    min-width: 42px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 5px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    body[data-page="user"] .otp-user-row {
        grid-template-columns: minmax(84px, 1fr) 76px 48px 34px !important;
        gap: 5px !important;
        padding: 8px !important;
    }

    body[data-page="user"] .otp-user-name b {
        font-size: .82rem !important;
        line-height: 1.1 !important;
    }

    body[data-page="user"] .otp-user-name small {
        font-size: .66rem !important;
        line-height: 1.15 !important;
    }

    body[data-page="user"] .otp-user-code {
        grid-column: auto !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 5px !important;
        font-size: .8rem !important;
    }

    body[data-page="user"] .otp-user-time {
        width: 34px !important;
        min-width: 34px !important;
        height: 30px !important;
        min-height: 30px !important;
        justify-self: stretch !important;
        font-size: .66rem !important;
    }

    body[data-page="user"] .otp-user-row button {
        min-width: 48px !important;
        min-height: 30px !important;
        padding: 4px 5px !important;
        font-size: .64rem !important;
    }
}

@media (max-width: 390px) {
    body[data-page="user"] .otp-user-row {
        grid-template-columns: minmax(74px, 1fr) 68px 44px 32px !important;
    }

    body[data-page="user"] .otp-user-code {
        font-size: .74rem !important;
    }
}

body[data-page="user"] .user-card-panel,
body[data-page="user"] .otp-user-row,
body[data-page="admin"] .panel-card,
body[data-page="admin"] .admin-group-card,
body[data-page="admin"] .dashboard-card {
    backface-visibility: hidden;
    transform: translateZ(0);
}

body[data-page="user"] button,
body[data-page="admin"] button {
    touch-action: manipulation;
}

/* PC only: sửa dropdown ngân hàng tra cứu không bị card kết quả che */
@media (min-width: 761px) {
    body[data-page="user"] .user-workspace,
    body[data-page="user"] .user-card-panel,
    body[data-page="user"] .clean-form.user-lookup-form,
    body[data-page="user"] .lookup-inline-row,
    body[data-page="user"] .lookup-inline-row .smart-bank {
        overflow: visible !important;
    }

    body[data-page="user"] .user-card-panel:has(.smart-bank-menu:not([hidden])) {
        position: relative !important;
        z-index: 3000 !important;
    }

    body[data-page="user"] .result-panel {
        position: relative !important;
        z-index: 1 !important;
    }

    body[data-page="user"] .user-lookup-form .lookup-inline-row {
        grid-template-columns: minmax(400px, 1fr) 180px !important;
        gap: 28px !important;
        justify-content: space-between !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank {
        position: relative !important;
        z-index: 3200 !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger {
        grid-template-columns: 42px minmax(0, 1fr) 22px !important;
        gap: 8px !important;
        padding-left: 10px !important;
        padding-right: 12px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger .selected-bank-logo,
    body[data-page="user"] .user-lookup-form .smart-bank-trigger .selected-bank-logo img {
        width: 38px !important;
        min-width: 38px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-menu {
        z-index: 5000 !important;
        width: min(440px, calc(100vw - 40px)) !important;
        max-height: 360px !important;
        overflow: hidden !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-list {
        max-height: 250px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-list button {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 50px !important;
        padding: 8px 10px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-list img {
        width: 38px !important;
        height: 30px !important;
        min-width: 38px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-list .selected-bank-text,
    body[data-page="user"] .user-lookup-form .smart-bank-trigger .selected-bank-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-list b,
    body[data-page="user"] .user-lookup-form .smart-bank-list small,
    body[data-page="user"] .user-lookup-form .smart-bank-trigger b,
    body[data-page="user"] .user-lookup-form .smart-bank-trigger small {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
    }
}

/* Mobile only: giữ logo + tên ngân hàng nằm ngang, không vỡ layout */
@media (max-width: 760px) {
    body[data-page="user"] .user-lookup-form .smart-bank,
    body[data-page="user"] .user-qr-form .smart-bank {
        position: relative !important;
        overflow: visible !important;
        z-index: 50 !important;
    }

    body[data-page="user"] .user-card-panel:has(.smart-bank-menu:not([hidden])) {
        position: relative !important;
        z-index: 3000 !important;
        overflow: visible !important;
    }

    body[data-page="user"] .result-panel {
        position: relative !important;
        z-index: 1 !important;
    }

    body[data-page="user"] .smart-bank-trigger {
        grid-template-columns: 38px minmax(0, 1fr) 20px !important;
        gap: 7px !important;
        padding: 7px 10px !important;
        min-height: 56px !important;
        height: 56px !important;
        overflow: hidden !important;
    }

    body[data-page="user"] .selected-bank-logo,
    body[data-page="user"] .smart-bank-trigger > .bank-logo-img {
        width: 36px !important;
        min-width: 36px !important;
        height: 30px !important;
        max-height: 30px !important;
        padding: 2px !important;
        border-radius: 8px !important;
    }

    body[data-page="user"] .smart-bank-trigger .bank-logo-img,
    body[data-page="user"] .smart-bank-trigger .selected-bank-logo img {
        width: 32px !important;
        height: 24px !important;
        max-width: 32px !important;
        max-height: 24px !important;
        object-fit: contain !important;
    }

    body[data-page="user"] .smart-bank-trigger .selected-bank-text,
    body[data-page="user"] .smart-bank-trigger span:not(.selected-bank-logo) {
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        transform: translateX(-2px) !important;
    }

    body[data-page="user"] .smart-bank-trigger b,
    body[data-page="user"] .smart-bank-trigger small {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        line-height: 1.1 !important;
    }

    body[data-page="user"] .smart-bank-trigger b {
        font-size: .92rem !important;
    }

    body[data-page="user"] .smart-bank-trigger small {
        font-size: .76rem !important;
    }

    body[data-page="user"] .smart-bank-menu {
        z-index: 5000 !important;
        max-height: min(330px, 48vh) !important;
        overflow: hidden !important;
    }

    body[data-page="user"] .smart-bank-list {
        max-height: min(230px, 34vh) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body[data-page="user"] .smart-bank-list button {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 7px !important;
        min-height: 50px !important;
        padding: 8px !important;
    }

    body[data-page="user"] .smart-bank-list img,
    body[data-page="user"] .smart-bank-list .bank-logo-img {
        width: 34px !important;
        min-width: 34px !important;
        height: 26px !important;
        max-height: 26px !important;
        object-fit: contain !important;
    }

    body[data-page="user"] .smart-bank-list .selected-bank-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body[data-page="user"] .smart-bank-list b,
    body[data-page="user"] .smart-bank-list small {
        display: block !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        line-height: 1.12 !important;
    }
}

/* Final Web User bank picker override: ten ngan hang dai chi bi rut gon o phan cuoi */
body[data-page="user"] .smart-bank-trigger .selected-bank-text,
body[data-page="user"] .smart-bank-list .selected-bank-text {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

body[data-page="user"] .smart-bank-trigger .selected-bank-text b,
body[data-page="user"] .smart-bank-trigger .selected-bank-text small,
body[data-page="user"] .smart-bank-list .selected-bank-text b,
body[data-page="user"] .smart-bank-list .selected-bank-text small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}

@media (min-width: 761px) {
    body[data-page="user"] .user-lookup-form .lookup-inline-row {
        grid-template-columns: minmax(430px, 1fr) minmax(180px, 210px) !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger {
        grid-template-columns: 42px minmax(0, 1fr) 18px !important;
        padding-left: 8px !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-trigger .selected-bank-text {
        transform: translateX(-3px) !important;
    }

    body[data-page="user"] .user-lookup-form .smart-bank-menu {
        width: min(520px, calc(100vw - 40px)) !important;
    }
}

/* FINAL-COMPACT-CHECK-CARD */
body[data-page="user"] .user-card-panel:has(#checkForm) {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px 20px !important;
}
body[data-page="user"] .user-card-panel:has(#checkForm) .check-bank-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}
body[data-page="user"] #checkForm,
body[data-page="user"] #checkForm .lookup-reference-layout,
body[data-page="user"] #checkForm .user-lookup-form {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-content: start !important;
}
body[data-page="user"] #checkForm .lookup-inline-row {
    gap: 8px !important;
    margin: 0 !important;
}
body[data-page="user"] #checkForm .check-submit-button { margin-top: 10px !important; }
body[data-page="user"] #checkResult {
    min-height: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}
body[data-page="user"] #checkResult:empty {
    display: none !important;
    margin: 0 !important;
}
@media (max-width: 620px) {
    body[data-page="user"] #checkForm .lookup-inline-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Check Bank V7: giao diện mới theo mẫu, giao diện cũ vẫn giữ nguyên. */
body[data-page="user"].check-ui-new #checkForm .lookup-inline-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank,
body[data-page="user"].check-ui-new #checkForm .check-account-field,
body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger,
body[data-page="user"].check-ui-new #checkForm #checkAccount {
    width: 100% !important;
    max-width: none !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger,
body[data-page="user"].check-ui-new #checkForm #checkAccount {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 14px !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    text-align: left !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger::after {
    display: none !important;
    content: none !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .bank-logo-img,
body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-logo img {
    width: 50px !important;
    min-width: 50px !important;
    height: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-text b,
body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-text small {
    display: inline !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-text b::after {
    content: " - ";
}

body[data-page="user"].check-ui-new #checkForm #checkButton {
    min-height: 48px !important;
    margin-top: 8px !important;
    border-radius: 6px !important;
    font-size: 18px !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card {
    padding: 24px 18px !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.45 !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card > .bank-logo-img {
    display: block !important;
    width: 110px !important;
    max-width: 44% !important;
    height: 64px !important;
    max-height: 64px !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card p {
    margin: 10px 0 !important;
    font-size: 18px !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card.error {
    color: #111827 !important;
    background: #fff !important;
    border-color: #edf0f4 !important;
}

body[data-page="user"].check-ui-new #checkResult .reference-result-card.error .reference-status {
    color: #4b5563 !important;
}

body.dark-mode[data-page="user"].check-ui-new #checkForm .smart-bank-trigger,
body.dark-mode[data-page="user"].check-ui-new #checkForm #checkAccount,
body.dark-mode[data-page="user"].check-ui-new #checkResult .reference-result-card.error {
    background: #10233d !important;
    color: #f8fbff !important;
}

@media (max-width: 620px) {
    body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-text b,
    body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger .selected-bank-text small,
    body[data-page="user"].check-ui-new #checkForm #checkAccount,
    body[data-page="user"].check-ui-new #checkResult .reference-result-card,
    body[data-page="user"].check-ui-new #checkResult .reference-result-card p {
        font-size: 16px !important;
    }
}

/* V7.1-FINAL */
body[data-page="user"].check-ui-old .user-card-panel:has(#checkForm) .check-bank-title { margin: 0 0 16px !important; text-align: left !important; }
body[data-page="user"].check-ui-old #checkForm .lookup-inline-row { grid-template-columns: minmax(0, 2fr) minmax(180px, .9fr) !important; gap: 28px !important; align-items: end !important; }
body[data-page="user"].check-ui-old #checkForm .smart-bank > label,
body[data-page="user"].check-ui-old #checkForm .check-account-field > label { display: block !important; margin: 0 0 7px !important; color: #111827 !important; font-size: 16px !important; font-weight: 900 !important; }
body[data-page="user"].check-ui-old #checkForm .smart-bank-trigger,
body[data-page="user"].check-ui-old #checkForm #checkAccount { min-height: 54px !important; height: 54px !important; }
body[data-page="user"].check-ui-old #checkForm #checkButton { margin-top: 14px !important; }
body[data-page="user"].check-ui-old #checkResult:empty { display: block !important; min-height: 48px !important; margin-top: 16px !important; }
body[data-page="user"].check-ui-old #checkResult .legacy-result-card { padding: 18px !important; }
body[data-page="user"].check-ui-old #checkResult .legacy-result-card p { margin: 7px 0 !important; color: #064b91 !important; font-size: 16px !important; font-weight: 800 !important; }
body[data-page="user"].check-ui-old #checkResult .legacy-result-card p:first-child b { font-size: 28px !important; font-weight: 950 !important; }
body[data-page="user"].check-ui-new #checkForm .smart-bank-trigger { display: flex !important; align-items: center !important; min-height: 56px !important; height: auto !important; }
body[data-page="user"].check-ui-new #checkForm .selected-bank-full { display: block !important; width: 100% !important; color: #111827 !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
body[data-page="user"].check-ui-new #checkResult .reference-result-card > .bank-logo-img { width: 150px !important; height: 82px !important; max-height: 82px !important; max-width: 58% !important; margin-bottom: 5px !important; }
body[data-page="user"].check-ui-new #checkResult .reference-result-card p { margin: 4px 0 !important; }
body[data-page="user"].check-ui-new #checkResult .reference-result-card p:nth-of-type(2) b,
body[data-page="user"].check-ui-new #checkResult .reference-result-card p:nth-of-type(3) b { color: #064b91 !important; font-weight: 950 !important; }
body.dark-mode[data-page="user"].check-ui-new #checkForm .selected-bank-full,
body.dark-mode[data-page="user"].check-ui-old #checkForm .smart-bank > label,
body.dark-mode[data-page="user"].check-ui-old #checkForm .check-account-field > label { color: #f8fbff !important; }
@media (max-width: 620px) {
    body[data-page="user"].check-ui-old #checkForm .lookup-inline-row { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
}

/* V7.2: chỉ thu gọn khoảng cách các dòng kết quả của Phiên bản cũ. */
body[data-page="user"].check-ui-old #checkResult .legacy-result-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 16px 18px !important;
}

body[data-page="user"].check-ui-old #checkResult .legacy-result-card p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

body[data-page="user"] .crypto-provider-result { margin-top: 16px; padding: 25px 18px !important; text-align: center !important; }
body[data-page="user"] .crypto-provider-logo { display: block; width: 100px; height: 62px; margin: 0 auto 10px; object-fit: contain; }
body[data-page="user"] .crypto-provider-network { margin: 0 0 18px !important; color: #064b91; font-size: 18px; }
body[data-page="user"] .crypto-provider-result p { margin: 10px 0; overflow-wrap: anywhere; color: #102a56; }
body[data-page="user"] .crypto-provider-result p b { color: #064b91; }
body[data-page="user"] .crypto-provider-address { font-size: 13px; }
body[data-page="user"] .crypto-explorer-link { color: #075fca; font-weight: 800; text-decoration: none; }
body.dark-mode[data-page="user"] .crypto-provider-result p { color: #e7f0fa; }
body[data-page="user"] .crypto-status-success { color: #137333 !important; }
body[data-page="user"] .crypto-status-pending { color: #9a6700 !important; }
body[data-page="user"] .crypto-verification-detail { margin-top: 8px; color: #5f6b7a; font-size: 12px; line-height: 1.5; }
body[data-page="user"] .crypto-status-failed { color: #b42318 !important; }

/* QR Excel import, verification and reset */
.qr-feature-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.qr-feature-head h2{margin:0}.qr-feature-head p{margin:6px 0 0;color:var(--theme-muted-text);font-size:12px}.qr-feature-actions{display:flex;gap:9px;flex-wrap:wrap}.qr-feature-actions>button,.qr-excel-upload{min-height:42px;padding:0 15px;display:inline-grid;place-items:center;border:1px solid var(--theme-border-soft);border-radius:12px;background:#fff;color:#0f4c8a;font-size:11px;font-weight:900;cursor:pointer}.qr-excel-upload{background:linear-gradient(135deg,#1e9bd6,#2864ed);color:#fff;border:0}.qr-excel-upload input{display:none}.qr-import-workspace{margin-bottom:18px;padding:16px;border:1px solid #a9c8f7;border-radius:16px;background:#f6faff}.qr-import-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.qr-import-heading small{color:#155bd0;font-size:9px;font-weight:900}.qr-import-heading h2{margin:4px 0;font-size:16px}.qr-import-heading p{margin:0;color:var(--theme-muted-text);font-size:11px}.qr-import-heading>b{padding:8px 12px;border-radius:99px;background:#e8f9f1;color:#07865a;font-size:11px}.qr-import-list{display:grid;gap:12px}.qr-import-card{padding:14px;border:1px solid var(--theme-border-soft);border-radius:14px;background:#fff}.qr-import-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.qr-import-card-head small{color:var(--theme-muted-text);font-size:9px}.qr-import-card-head h3{margin:3px 0 0;color:#123b69;font-size:14px}.qr-import-status{padding:7px 10px;border-radius:99px;background:#eef3f8;color:#607891;font-size:10px;font-weight:900}.qr-import-status.checking{background:#fff6d8;color:#8a6200}.qr-import-status.success{background:#e8f9f1;color:#07865a}.qr-import-status.error{background:#fff0f3;color:#b42318}.qr-import-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.qr-import-fields label{display:grid;gap:6px;color:#345675;font-size:9px;font-weight:850}.qr-import-fields input{width:100%;min-height:42px;padding:0 10px;border:1px solid #cdddf1;border-radius:9px;background:#fff;color:#234564}.qr-import-check{width:100%;min-height:44px;margin-top:10px;border:0!important;border-radius:10px!important;background:linear-gradient(135deg,#1e9bd6,#2864ed)!important;color:#fff!important;font-weight:900!important}.qr-import-result{margin-top:10px}.qr-import-mismatch{display:grid;gap:5px;padding:11px;border-radius:9px;background:#fff0f3;color:#b42318;font-size:10px}.qr-import-success{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:14px;padding:12px;border:1px solid #bce9d5;border-radius:12px;background:#f2fff9}.qr-import-success img{width:180px;max-width:100%;border-radius:10px;background:#fff}.qr-import-success>div{display:grid;gap:7px}.qr-import-success b{color:#07865a}.qr-import-success span{color:#315779;font-size:11px}.qr-import-success a{width:max-content;padding:9px 13px;border-radius:8px;background:#2864ed;color:#fff;text-decoration:none;font-size:10px;font-weight:900}
.qr-import-workspace[hidden],.user-qr-form[hidden],#qrResult[hidden]{display:none!important}.qr-import-workspace,.qr-import-workspace input,.qr-import-workspace button,.qr-import-workspace a{font-family:inherit}.qr-import-heading h2{font-size:18px;line-height:1.35;font-weight:800}.qr-import-heading p,.qr-import-card-head h3,.qr-import-fields input,.qr-import-status,.qr-import-check,.qr-import-mismatch,.qr-import-success span,.qr-import-success a{font-size:12px;line-height:1.45}.qr-import-fields label,.qr-import-card-head small,.qr-import-heading small{font-size:11px;line-height:1.4}.qr-import-fields input{font-weight:600}.qr-import-check,.qr-import-status{font-weight:800}
@media(max-width:760px){.qr-feature-head,.qr-import-heading{display:grid}.qr-feature-actions{display:grid;grid-template-columns:1fr}.qr-feature-actions>*{width:100%}.qr-import-fields{grid-template-columns:1fr}.qr-import-success{grid-template-columns:1fr}.qr-import-success img{margin:auto}}
body[data-page="user"] .crypto-error-message { color: #7a271a !important; font-weight: 600; }
@media (max-width: 620px) {
    body[data-page="user"] .crypto-provider-logo { width: 86px; height: 54px; }
}

/* V8: nền đăng nhập thiên văn — logo và nút đăng nhập gốc vẫn được giữ nguyên. */
body[data-page="user"] .user-login-screen { position: relative; isolation: isolate; overflow: hidden; min-height: min(720px, calc(100vh - 34px)); display: grid; place-items: center; border-radius: 28px; background: radial-gradient(circle at 50% 52%, #ffffff 0 22%, #e8f3ff 54%, #e8fff8 100%) !important; }
body[data-page="user"] .login-space-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body[data-page="user"] .login-contours { position: absolute; inset: -35%; opacity: .62; background: repeating-radial-gradient(ellipse at 23% 31%, transparent 0 20px, rgba(42, 142, 244, .13) 21px 23px, transparent 24px 43px); transform: rotate(-14deg); }
body[data-page="user"] .login-glow { position: absolute; border-radius: 50%; filter: blur(12px); opacity: .8; }
body[data-page="user"] .login-glow-a { width: 430px; height: 430px; left: -165px; bottom: -165px; background: radial-gradient(circle, rgba(87, 203, 255, .52), rgba(87,203,255,0) 69%); }
body[data-page="user"] .login-glow-b { width: 440px; height: 440px; right: -145px; top: -140px; background: radial-gradient(circle, rgba(125, 233, 205, .43), rgba(125,233,205,0) 69%); }
body[data-page="user"] .login-earth, body[data-page="user"] .login-moon { position: absolute; display: block; background-position: center; background-size: cover; filter: drop-shadow(0 22px 25px rgba(0, 81, 148, .22)); }
body[data-page="user"] .login-earth { width: clamp(175px, 20vw, 310px); aspect-ratio: 1; right: clamp(22px, 7vw, 135px); bottom: clamp(20px, 5vw, 85px); background-image: none; animation: login-earth-turn 60s linear infinite; }
body[data-page="user"] .login-moon { width: clamp(105px, 13vw, 190px); aspect-ratio: 1; left: clamp(10px, 6vw, 120px); bottom: clamp(35px, 9vw, 130px); background-image: none; opacity: .96; animation: login-moon-float 7s ease-in-out infinite; }
body[data-page="user"] .login-solar { position: absolute; width: 150px; height: 150px; right: 22px; top: 20px; display: block; animation: login-solar-turn 19s linear infinite; }
body[data-page="user"] .login-sun { position: absolute; width: 28px; height: 28px; top: 61px; left: 61px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fffbd0, #ffcf50 43%, #ff8a10); box-shadow: 0 0 25px 8px rgba(255, 184, 26, .45); }
body[data-page="user"] .login-orbit { position: absolute; inset: 28px; border: 1px solid rgba(25, 129, 224, .22); border-radius: 50%; }
body[data-page="user"] .login-orbit-b { inset: 5px; transform: rotateX(58deg); }
body[data-page="user"] .login-planet { position: absolute; border-radius: 50%; box-shadow: 0 0 8px rgba(0, 0, 0, .13); }
body[data-page="user"] .login-planet-a { width: 14px; height: 14px; top: 28px; left: 66px; background: #45b4f4; }
body[data-page="user"] .login-planet-b { width: 9px; height: 9px; bottom: 20px; left: 30px; background: #8b6ae2; }
body[data-page="user"] .user-login-card { position: relative; z-index: 1; box-shadow: 0 28px 70px rgba(12, 73, 143, .18); }
@keyframes login-earth-turn { to { transform: rotate(-360deg); } }
@keyframes login-solar-turn { to { transform: rotate(-360deg); } }
@keyframes login-moon-float { 50% { transform: translate(12px, -16px) rotate(-7deg); } }

/* Báo cáo Excel: chỉ xử lý file ở trình duyệt. */
body[data-page="user"] .report-panel { max-width: 1120px; }
body[data-page="user"] .report-heading { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #e1e9f5; }
body[data-page="user"] .report-heading h2 { margin: 2px 0 4px; color: #064b91; }
body[data-page="user"] .report-heading span { color: #667a98; font-size: 14px; }
body[data-page="user"] .report-eyebrow { margin: 0; color: #1586e8; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
body[data-page="user"] .report-upload { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 12px; background: linear-gradient(135deg, #10a5de, #2861ed); color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(34, 101, 237, .22); }
body[data-page="user"] .report-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
body[data-page="user"] .report-workspace { padding-top: 20px; }
body[data-page="user"] .report-empty-state { min-height: 190px; display: grid; place-content: center; gap: 8px; text-align: center; border: 1px dashed #bad5fa; border-radius: 16px; background: #f7fbff; color: #60728f; }
body[data-page="user"] .report-empty-state b { color: #124f92; font-size: 17px; }
body[data-page="user"] .report-empty-state.error { border-color: #efb5b5; background: #fff8f8; }
body[data-page="user"] .report-file-name { margin-bottom: 13px; color: #617491; font-size: 13px; font-weight: 700; }
body[data-page="user"] .report-tabs { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 10px; }
body[data-page="user"] .report-tabs button { flex: 1; min-width: 138px; border: 1px solid #c7d8f2; border-radius: 10px; background: #fff; color: #315678; font-weight: 900; }
body[data-page="user"] .report-tabs button.active { color: #fff; border-color: #146ee0; background: linear-gradient(135deg, #129fdc, #245de8); }
body[data-page="user"] .report-tabs em { margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.2); font-style: normal; }
body[data-page="user"] .report-stats { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; margin: 8px 0 17px; }
body[data-page="user"] .report-stats.report-stats-7 { grid-template-columns: repeat(7, minmax(110px, 1fr)); }
body[data-page="user"] .report-stats article { padding: 13px; border: 1px solid #dce8f8; border-radius: 12px; background: #f9fcff; }
body[data-page="user"] .report-stats span { display: block; color: #7182a0; font-size: 11px; font-weight: 800; }
body[data-page="user"] .report-stats b { display: block; margin-top: 5px; color: #174e89; font-size: 20px; }
body[data-page="user"] .report-stats .success b { color: #1c8a58; } body[data-page="user"] .report-stats .pending b { color: #bd7700; } body[data-page="user"] .report-stats .failed b { color: #c33e45; }
body[data-page="user"] .report-table-tools { display: flex; gap: 10px; justify-content: space-between; margin: 12px 0; }
body[data-page="user"] .report-table-tools input { flex: 1; min-width: 0; } body[data-page="user"] .report-table-tools button { white-space: nowrap; }
body[data-page="user"] .report-table-wrap { max-width: 100%; max-height: min(68vh, 700px); overflow: auto; overscroll-behavior: contain; scrollbar-color: #86aee0 #edf4fc; scrollbar-width: auto; border: 1px solid #dce7f5; border-radius: 13px; }
body[data-page="user"] .report-table-wrap::-webkit-scrollbar, body[data-page="user"] .stats-wide-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
body[data-page="user"] .report-table-wrap::-webkit-scrollbar-thumb, body[data-page="user"] .stats-wide-wrap::-webkit-scrollbar-thumb { border: 3px solid #edf4fc; border-radius: 99px; background: #85aee0; }
body[data-page="user"] .report-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 13px; }
body[data-page="user"] .report-table th { padding: 12px; background: #eef6ff; color: #235180; text-align: left; font-size: 11px; } body[data-page="user"] .report-table td { padding: 11px 12px; border-top: 1px solid #e5edf8; color: #3d5473; }
body[data-page="user"] .report-empty { text-align: center; color: #6b7d98; } body[data-page="user"] .report-status { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; } body[data-page="user"] .report-status.success { color: #18764b; background: #e4f8ed; } body[data-page="user"] .report-status.pending { color: #9b6200; background: #fff3d5; } body[data-page="user"] .report-status.failed { color: #a72f35; background: #ffeaeb; }
@media (max-width: 900px) { body[data-page="user"] .report-stats.report-stats-7 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { body[data-page="user"] .user-login-screen { min-height: calc(100vh - 18px); } body[data-page="user"] .login-earth { width: 145px; right: -13px; bottom: 28px; opacity: .72; } body[data-page="user"] .login-moon { width: 98px; left: -12px; bottom: 37px; opacity: .62; } body[data-page="user"] .login-solar { transform: scale(.67); transform-origin: top right; right: -13px; top: 0; } body[data-page="user"] .report-heading { align-items: flex-start; flex-direction: column; } body[data-page="user"] .report-upload { width: 100%; } body[data-page="user"] .report-stats, body[data-page="user"] .report-stats.report-stats-7 { grid-template-columns: repeat(2, 1fr); } body[data-page="user"] .report-stats .amount { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { body[data-page="user"] .login-earth, body[data-page="user"] .login-moon, body[data-page="user"] .login-solar { animation: none; } }

/* Dashboard QTV: điểm vào báo cáo nội bộ, dùng cùng nhận diện hiện có. */
body[data-page="admin"] .qtv-report-brief { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 18px 0; border: 1px solid #cfe2ff; background: linear-gradient(120deg, #f7fbff, #eef7ff 55%, #f4fffb); }
body[data-page="admin"] .qtv-report-brief h2 { margin: 4px 0 8px; color: #0b4e91; }
body[data-page="admin"] .qtv-report-brief p { max-width: 760px; margin: 0; color: #627794; line-height: 1.6; }
body[data-page="admin"] .qtv-kicker { color: #147ed8 !important; font-size: 11px; font-weight: 900; letter-spacing: .13em; }
body[data-page="admin"] .qtv-report-brief button { flex: 0 0 auto; white-space: nowrap; }
body[data-page="admin"] .qtv-report-guide { display: flex; gap: 24px; align-items: flex-start; max-width: 850px; }
body[data-page="admin"] .qtv-report-guide-icon { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #0ca8df, #2459e8); color: #fff; font-size: 30px; box-shadow: 0 12px 24px rgba(30,96,220,.23); }
body[data-page="admin"] .qtv-report-guide h2 { margin-top: 0; color: #0b4e91; }
body[data-page="admin"] .qtv-report-guide p, body[data-page="admin"] .qtv-report-guide li { color: #60738f; line-height: 1.65; }
@media (max-width: 720px) { body[data-page="admin"] .qtv-report-brief, body[data-page="admin"] .qtv-report-guide { align-items: stretch; flex-direction: column; } body[data-page="admin"] .qtv-report-brief button { width: 100%; } }

/* V8.2 login: PC phủ toàn màn hình, mobile giữ form dọc dễ nhập. */
body[data-page="user"]:has(.user-login-screen) { margin: 0; min-height: 100vh; overflow-x: hidden; background: #f5f8fc; }
body[data-page="user"] .user-app:has(.user-login-screen) { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; display: block; }
body[data-page="user"] .user-app:has(.user-login-screen) .user-workspace { min-height: 100vh; }
body[data-page="user"] .login-success-overlay { position: fixed; z-index: 10050; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(232, 246, 255, .15); opacity: 0; pointer-events: none; transition: opacity .2s ease; backdrop-filter: blur(2px); }
body[data-page="user"] .login-success-overlay.show { opacity: 1; }
body[data-page="user"] .login-success-card { width: min(330px, 92vw); display: grid; justify-items: center; gap: 11px; padding: 31px 26px 27px; border: 1px solid rgba(185, 225, 194, .85); border-radius: 24px; background: rgba(255,255,255,.96); color: #23547e; box-shadow: 0 28px 70px rgba(21, 80, 139, .22); transform: translateY(16px) scale(.92); transition: transform .32s cubic-bezier(.2,.85,.25,1.35); }
body[data-page="user"] .login-success-overlay.show .login-success-card { transform: translateY(0) scale(1); }
body[data-page="user"] .login-success-check { width: 68px; height: 68px; display: grid; place-items: center; border: 2px solid #b8e9b9; border-radius: 50%; color: #2fbd67; font-size: 43px; font-weight: 500; line-height: 1; animation: loginCheckPulse .7s ease both; }
body[data-page="user"] .login-success-card b { font-size: 21px; color: #34516d; }
body[data-page="user"] .login-success-card span { color: #8292a5; font-size: 13px; text-align: center; }
@keyframes loginCheckPulse { 0% { transform: scale(.35) rotate(-18deg); opacity: 0; } 65% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: scale(1); } }

/* Tải biểu và Thống kê cần không gian ngang cho bảng nhiều cột, riêng màn tra cứu vẫn giữ khung gốc. */
body[data-page="user"] .user-app:has(.excel-tool-panel) { width: min(1720px, calc(100% - 32px)); max-width: none; }
body[data-page="user"] .user-app:has(.excel-tool-panel) { overflow-x: clip; }
body[data-page="user"] .user-app:has(.excel-tool-panel) .user-workspace { width: 100%; }
body[data-page="user"] .user-app:has(.excel-tool-panel) .user-content { width: 100%; min-width: 0; display: block; box-sizing: border-box; }
body[data-page="user"] .user-app:has(.excel-tool-panel) .user-card-panel.excel-tool-panel { width: 100%; max-width: none; min-width: 0; overflow: hidden; box-sizing: border-box; }
body[data-page="user"] .excel-tool-panel .excel-tool-result, body[data-page="user"] .excel-tool-panel .stats-table-section, body[data-page="user"] .excel-tool-panel .stats-wide-wrap, body[data-page="user"] .excel-tool-panel .stats-horizontal-scroll { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
body[data-page="user"] .excel-tool-panel .stats-wide-wrap { max-height: min(70vh, 760px); }
body[data-page="user"] .excel-tool-panel .t3-detail-head > div { display: flex; align-items: center; gap: 10px; }
body[data-page="user"] .excel-tool-panel #t3CopyAll { white-space: nowrap; }
@media (max-width: 720px) {
  body[data-page="user"] .user-app:has(.excel-tool-panel) { width: calc(100% - 16px); }
  body[data-page="user"] .excel-tool-panel .t3-detail-head > div { width: 100%; }
  body[data-page="user"] .excel-tool-panel .t3-detail-head input { min-width: 0; flex: 1; }
}

/* V8.10: nút thao tác báo cáo bo tròn, dễ nhận biết. */
body[data-page="user"] .stats-actionbar button, body[data-page="user"] .stats-table-title button { min-height: 40px; border-radius: 999px; box-shadow: 0 7px 17px rgba(33, 92, 159, .12); }
body[data-page="user"] .stats-actionbar #statsChangeFile, body[data-page="user"] .stats-actionbar #timingChangeFile { border: 1px solid #c8daf4; background: #fff; color: #145595; }
body[data-page="user"] .stats-actionbar #statsCopyAll, body[data-page="user"] .stats-actionbar #timingCopyAll, body[data-page="user"] .stats-table-title button { background: linear-gradient(135deg, #24a7ec, #2460e8); color: #fff; }
body[data-page="user"] .stats-actionbar #statsExport, body[data-page="user"] .stats-actionbar #timingExport { background: linear-gradient(135deg, #11b985, #048d68); color: #fff; }
body[data-page="user"] .stats-horizontal-scroll { display: block; height: 28px; overflow-x: scroll; overflow-y: hidden; border-top: 1px solid #dce7f5; background: #f4f8fd; scrollbar-color: #4f88cc #dce9f8; scrollbar-width: auto; }
body[data-page="user"] .stats-horizontal-scroll i { display: block; height: 4px; }
body[data-page="user"] .stats-horizontal-scroll::-webkit-scrollbar { height: 16px; }
body[data-page="user"] .stats-horizontal-scroll::-webkit-scrollbar-track { border-radius: 99px; background: #dce9f8; }
body[data-page="user"] .stats-horizontal-scroll::-webkit-scrollbar-thumb { border: 3px solid #dce9f8; border-radius: 99px; background: #4f88cc; }
body[data-page="user"] .stats-combined-section { overflow: hidden; }
body[data-page="user"] .stats-combined-table-scroll { display: flex; align-items: flex-start; gap: 0; width: 100%; max-height: min(72vh, 760px); overflow: auto; background: #fff; }
body[data-page="user"] .stats-combined-pane { flex: 0 0 auto; width: max-content; min-width: max-content; background: #fff; }
body[data-page="user"] .stats-combined-speed { border-right: 0; padding-right: 0; }
body[data-page="user"] .stats-combined-pane .stats-table-title { position: sticky; top: 0; z-index: 4; min-height: 58px; border-bottom: 1px solid #dce7f5; background: #fff; }
body[data-page="user"] .stats-combined-pane .stats-wide-wrap { width: max-content; max-width: none; max-height: none; overflow: visible; }
body[data-page="user"] .stats-combined-pane .stats-wide-table { min-width: max-content; }
body[data-page="user"] .stats-combined-title { min-height:58px; border-bottom:1px solid #cbd9e8; background:linear-gradient(90deg,#f8fbff,#fff); }
body[data-page="user"] .stats-combined-speed .stats-wide-table th:last-child,
body[data-page="user"] .stats-combined-speed .stats-wide-table td:last-child { border-right:0; }
body[data-page="user"] .stats-combined-hourly .stats-wide-table th:first-child,
body[data-page="user"] .stats-combined-hourly .stats-wide-table td:first-child { border-left:1px solid #cbd9e8; }
body[data-page="user"] .stats-combined-table-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
body[data-page="user"] .stats-combined-table-scroll::-webkit-scrollbar-thumb { border: 3px solid #edf4fc; border-radius: 99px; background: #85aee0; }
body[data-page="user"] .stats-combined-table-scroll::-webkit-scrollbar-track { background: #edf4fc; }

/* Five withdrawal KPIs form one continuous segmented control. */
body[data-page="user"] .stats-kpis.timing-kpis-five { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; overflow:hidden; border:1px solid #c9dcf4; border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(30,74,125,.07); }
body[data-page="user"] .stats-kpis.timing-kpis-five article { min-height:88px; margin:0; padding:15px 50px 14px 16px; border:0; border-left:1px solid #dbe7f5; border-radius:0; box-shadow:none; background:transparent; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:first-child { border-left:4px solid #5b52ee; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:nth-child(2) { border-left:4px solid #0fb87d; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:nth-child(3) { border-left:4px solid #7a5af8; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:nth-child(4) { border-left:4px solid #eea300; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:nth-child(5) { border-left:4px solid #ef4765; }
body[data-page="user"] .stats-kpis.timing-kpis-five article:hover { background:#f8fbff; }
@media(max-width:1100px){body[data-page="user"] .stats-kpis.timing-kpis-five{display:flex;overflow-x:auto;border-radius:14px}body[data-page="user"] .stats-kpis.timing-kpis-five article{flex:0 0 220px}}

/* Withdrawal daily summary: continuous KPI bars and compact one-line copy controls. */
body[data-page="user"] .daily-summary-grid { display:flex; gap:0; overflow-x:auto; margin:16px 0; border:1px solid #c9dcf4; border-radius:16px; background:#fff; box-shadow:0 7px 20px rgba(30,74,125,.07); }
body[data-page="user"] .daily-summary-grid article { flex:1 0 185px; min-height:92px; margin:0; padding:16px 46px 14px 15px; border:0; border-left:1px solid #dbe7f5; border-top:0; border-radius:0; box-shadow:none; background:transparent; }
body[data-page="user"] .daily-summary-grid article:first-child { border-left:4px solid #2d72ed; }
body[data-page="user"] .daily-summary-grid article:hover { background:#f8fbff; }
body[data-page="user"] .daily-summary-grid [data-daily-copy] { top:50%; right:10px; transform:translateY(-50%); }
body[data-page="user"] .daily-summary-grid [data-daily-copy]:hover { transform:translateY(-50%) scale(1.04); }
body[data-page="user"] .daily-amount-grid { display:flex; gap:0; padding:0; overflow-x:auto; border-top:1px solid #dbe7f5; background:#fff; }
body[data-page="user"] .daily-amount-grid article { flex:1 0 165px; min-height:82px; margin:0; padding:14px 44px 12px 14px; border:0; border-left:1px solid #dbe7f5; border-top:0; border-radius:0; box-shadow:none; background:transparent; }
body[data-page="user"] .daily-amount-grid article:first-child { border-left:4px solid #f0a33a; }
body[data-page="user"] .daily-amount-grid article:hover { background:#fffaf1; }
body[data-page="user"] .daily-amount-section .stats-table-title { flex-wrap:nowrap; }
body[data-page="user"] .daily-amount-section .stats-table-title > button { flex:0 0 auto; width:auto; white-space:nowrap; }
body[data-page="user"] .daily-summary-grid::-webkit-scrollbar, body[data-page="user"] .daily-amount-grid::-webkit-scrollbar { height:11px; }
body[data-page="user"] .daily-summary-grid::-webkit-scrollbar-thumb, body[data-page="user"] .daily-amount-grid::-webkit-scrollbar-thumb { border:3px solid #edf4fc; border-radius:99px; background:#85aee0; }
body[data-page="user"] .daily-summary-grid::-webkit-scrollbar-track, body[data-page="user"] .daily-amount-grid::-webkit-scrollbar-track { background:#edf4fc; }
@media(max-width:600px){body[data-page="user"] .daily-summary-grid{display:flex}body[data-page="user"] .daily-summary-grid article{flex-basis:190px}}
body[data-page="user"] .stats-wide-table tr.copied-total > td, body[data-page="user"] .timing-table tr.copied-total > td { background: #fff0a8 !important; color: #704f00 !important; animation: copiedTotalFlash 1.8s ease both; }
body[data-page="user"] .t3-table th, body[data-page="user"] .t3-table td { text-align: center !important; }
body[data-page="user"] .t3-rate.copied-rate { color: #d7264d !important; background: #fff0f3; }
body[data-page="user"] .t3-table tr.copied-total > td { background: #fff0a8 !important; animation: copiedTotalFlash 1.8s ease both; }
@keyframes copiedTotalFlash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: inset 0 0 0 999px rgba(255, 215, 70, .25); } }
body[data-page="user"] .user-login-screen { width: 100%; min-height: 100vh; padding: clamp(24px, 4vw, 70px); border-radius: 0; background: radial-gradient(circle at 48% 50%, #fff 0 16%, rgba(255,255,255,.7) 31%, transparent 59%), linear-gradient(120deg, #eef5ff, #f9fbff 48%, #e9fffa) !important; }
body[data-page="user"] .login-contours { inset: -25%; opacity: .72; background: repeating-radial-gradient(ellipse at 27% 34%, transparent 0 30px, rgba(56, 154, 242, .12) 31px 33px, transparent 34px 63px); }
body[data-page="user"] .login-earth { width: clamp(240px, 29vw, 470px); right: clamp(9vw, 16vw, 24vw); bottom: clamp(-62px, -4vw, -18px); filter: drop-shadow(0 24px 32px rgba(0, 61, 129, .29)); }
body[data-page="user"] .login-moon { width: clamp(125px, 16vw, 245px); left: clamp(10vw, 19vw, 27vw); bottom: clamp(45px, 10vh, 120px); }
body[data-page="user"] .login-solar { width: 205px; height: 205px; right: clamp(6vw, 13vw, 21vw); top: clamp(25px, 6vh, 92px); }
body[data-page="user"] .login-sun { width: 38px; height: 38px; top: 84px; left: 84px; }
body[data-page="user"] .login-orbit { inset: 38px; } body[data-page="user"] .login-orbit-b { inset: 7px; }
body[data-page="user"] .login-planet-a { width: 18px; height: 18px; top: 38px; left: 90px; } body[data-page="user"] .login-planet-b { width: 12px; height: 12px; bottom: 28px; left: 42px; }
body[data-page="user"] .user-login-card { width: min(94vw, 460px); padding: 28px 30px 30px; border-radius: 24px; background: rgba(255,255,255,.91); backdrop-filter: blur(13px); box-shadow: 0 30px 70px rgba(14, 80, 149, .24); }
body[data-page="user"] .user-login-card img { width: min(286px, 82%); margin-bottom: 9px; }
body[data-page="user"] .user-login-card label { font-size: 15px; letter-spacing: .01em; }
body[data-page="user"] .user-login-card input { min-height: 50px; background: rgba(255,255,255,.78); }
body[data-page="user"] .user-login-card button { min-height: 50px; border-radius: 14px; }
body[data-page="user"] .withdrawal-slow-orders-table { min-width: 980px; table-layout: fixed; }
body[data-page="user"] .withdrawal-slow-orders-table th,
body[data-page="user"] .withdrawal-slow-orders-table td { text-align: center; vertical-align: middle; }
body[data-page="user"] .withdrawal-slow-orders-table th:first-child,
body[data-page="user"] .withdrawal-slow-orders-table td:first-child { text-align: left; }
body[data-page="user"] .withdrawal-slow-orders-table .slow-speed-cell { color: #e34949; background: #fff4f1; font-weight: 900; font-variant-numeric: tabular-nums; }
body[data-page="user"] .forms-kpis.forms-kpis-with-speed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="user"] .forms-kpis article.speed { border-top-color: #7655ed; }
body[data-page="user"] .forms-kpis article.speed b { color: #4f35cc; font-variant-numeric: tabular-nums; }
body[data-page="user"] .forms-kpis article.speed small { display: block; margin-top: 5px; color: #7890aa; font-size: 11px; }
body[data-page="user"] .withdrawal-speed-warning { display: grid; gap: 13px; margin: 15px 0; padding: 16px; border: 1px solid #ffc4b5; border-left: 5px solid #ef5d3d; border-radius: 15px; background: linear-gradient(135deg, #fff8f5, #fffdfb); box-shadow: 0 8px 22px rgba(174, 69, 40, .08); }
body[data-page="user"] .withdrawal-speed-warning > div:first-child { display: grid; gap: 4px; color: #9f321f; }
body[data-page="user"] .withdrawal-speed-warning > div:first-child span { color: #8a6a63; font-size: 12px; }
body[data-page="user"] .withdrawal-warning-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
body[data-page="user"] .withdrawal-warning-head > div:first-child { display: grid; gap: 4px; color: #9f321f; }
body[data-page="user"] .withdrawal-warning-controls { display: flex; align-items: end; gap: 9px; }
body[data-page="user"] .withdrawal-warning-controls label { display: grid; gap: 4px; color: #7b3f32; font-size: 10px; font-weight: 900; white-space: nowrap; }
body[data-page="user"] .withdrawal-warning-controls select { min-width: 245px; min-height: 48px; padding: 0 42px 0 14px; border: 1px solid #efb5a8; border-radius: 11px; background: #fff; color: #63362d; font-size: 13px; font-weight: 800; }
body[data-page="user"] .withdrawal-warning-controls button { display: grid; place-items: center; width: 40px; min-height: 38px; padding: 0; border: 1px solid #efb5a8; border-radius: 9px; background: #fff; color: #d94731; font-size: 23px; font-weight: 900; cursor: pointer; }
body[data-page="user"] .withdrawal-speed-warning.is-collapsed .withdrawal-speed-warning-list { display: none; }
body[data-page="user"] .provider-speed-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed #efb5a8; border-radius: 11px; background: #fff; color: #8b6c65; text-align: center; }
body[data-page="user"] .withdrawal-speed-warning-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 320px)); justify-content: start; gap: 12px; }
body[data-page="user"] .withdrawal-speed-warning-list article { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(125px, auto); align-items: center; gap: 12px 16px; min-width: 0; padding: 14px; border: 1px solid #f1d0c8; border-radius: 12px; background: #fff; }
body[data-page="user"] .withdrawal-speed-warning-list span { display: grid; min-width: 0; }
body[data-page="user"] .withdrawal-speed-warning-list small { color: #8a97a7; }
body[data-page="user"] .withdrawal-speed-warning-list strong { color: #dd3c2a; font-variant-numeric: tabular-nums; }
body[data-page="user"] .withdrawal-speed-warning-list button { grid-column: 1 / -1; justify-self: start; width: auto; min-width: 122px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: #2687e8; color: #fff; font-weight: 800; cursor: pointer; }
body[data-page="user"] .forms-filter-banner { grid-template-columns: minmax(260px, 1fr) minmax(250px, .72fr) minmax(310px, 1fr); align-items: center; }
body[data-page="user"] .forms-banner-speed { display: grid; justify-items: center; gap: 3px; padding: 4px 18px; border-right: 1px solid #d3e1f1; border-left: 1px solid #d3e1f1; }
body[data-page="user"] .forms-banner-speed span { color: #6d819a; font-size: 11px; font-weight: 900; }
body[data-page="user"] .forms-banner-speed strong { color: #5139d8; font-size: 25px; font-variant-numeric: tabular-nums; }
body[data-page="user"] .forms-banner-speed small { color: #8496aa; font-size: 10px; }
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-times { display: grid; justify-items: end; gap: 1px; }
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-times strong { color: #dd3c2a; }
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-name { overflow: hidden; }
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-name b { overflow-wrap: anywhere; color: #172c48; font-size: 14px; line-height: 1.25; }
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-name small,
body[data-page="user"] .withdrawal-speed-warning-list .slow-provider-times small { line-height: 1.35; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-good { border-color: #8bd9b1; background: #f1fff7; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-good .slow-provider-times strong { color: #07945a; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-good button { background: #13a86b; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-warning { border-color: #f0d077; background: #fffbea; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-warning .slow-provider-times strong { color: #c88700; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-warning button { background: #e3a313; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-danger { border-color: #f09c94; background: #fff3f1; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-danger .slow-provider-times strong { color: #df352b; }
body[data-page="user"] .withdrawal-speed-warning-list article.speed-danger button { background: #e9483b; }
@media (max-width: 980px) { body[data-page="user"] .forms-filter-banner { grid-template-columns: 1fr; } body[data-page="user"] .forms-banner-speed { justify-items: start; border: 0; border-top: 1px solid #d3e1f1; border-bottom: 1px solid #d3e1f1; padding: 12px 0; } }
@media (max-width: 700px) { body[data-page="user"] .withdrawal-warning-head { align-items: stretch; flex-direction: column; } body[data-page="user"] .withdrawal-warning-controls label { flex: 1; } body[data-page="user"] .withdrawal-warning-controls select { width: 100%; min-width: 0; } }
@media (max-width: 760px) { body[data-page="user"] .forms-kpis.forms-kpis-with-speed { grid-template-columns: 1fr; } body[data-page="user"] .withdrawal-speed-warning-list { grid-template-columns: 1fr; } body[data-page="user"] .withdrawal-speed-warning-list article { grid-template-columns: minmax(0, 1fr) auto; } body[data-page="user"] .withdrawal-speed-warning-list button { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  body[data-page="user"] .user-login-screen { min-height: 100dvh; padding: 20px 16px 30px; align-items: center; }
  body[data-page="user"] .login-contours { inset: -45%; background-size: auto; opacity: .52; }
  body[data-page="user"] .login-earth { width: 220px; right: -34px; bottom: -28px; opacity: .48; }
  body[data-page="user"] .login-moon { width: 112px; left: -23px; bottom: 54px; opacity: .45; }
  body[data-page="user"] .login-solar { width: 126px; height: 126px; right: -6px; top: 16px; opacity: .76; }
  body[data-page="user"] .login-sun { width: 24px; height: 24px; top: 51px; left: 51px; }
  body[data-page="user"] .login-orbit { inset: 23px; } body[data-page="user"] .login-orbit-b { inset: 4px; }
  body[data-page="user"] .login-planet-a { width: 11px; height: 11px; top: 23px; left: 55px; } body[data-page="user"] .login-planet-b { width: 8px; height: 8px; bottom: 17px; left: 26px; }
  body[data-page="user"] .user-login-card { width: min(100%, 420px); padding: 24px 20px; border-radius: 21px; }
  body[data-page="user"] .user-login-card img { width: min(250px, 85%); }
}

/* V24 final precedence: persistent Web User drawer. */
body[data-page="user"] .user-menu-panel{position:fixed;z-index:90;top:0;left:0;width:min(320px,88vw);height:100dvh;max-height:none;margin:0;padding:14px 12px;overflow:auto;border:0;border-right:1px solid #d5e2ef;border-radius:0 20px 20px 0;box-shadow:18px 0 46px rgba(17,52,88,.20)}
body[data-page="user"].user-menu-open .user-menu-toggle{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-20px)}
body[data-page="user"] .user-menu-account{display:grid;grid-template-columns:1fr 36px;place-items:initial;align-items:center;gap:8px;min-height:auto;padding:12px 10px 14px;text-align:left}
body[data-page="user"] .user-menu-account>div{display:grid;gap:2px}
body[data-page="user"] .user-menu-close{display:grid;place-items:center;width:34px!important;min-height:34px!important;padding:0!important;border:1px solid #ceddec!important;border-radius:11px!important;background:#fff!important;color:#315777!important;font-size:23px!important;line-height:1!important;box-shadow:none!important}
body.dark-mode[data-page="user"] .user-menu-close{background:#142231!important;border-color:#2a4056!important;color:#e8f2ff!important}
@media(max-width:480px){body[data-page="user"] .user-menu-panel{width:min(310px,90vw);height:100dvh;max-height:none;padding:10px;border-radius:0 17px 17px 0}}

/* V26 FINAL — must remain after every legacy rule. */
body[data-page="user"] .user-menu-wrap{display:none}
body[data-page="user"].user-authenticated .user-menu-wrap{display:block;position:fixed;top:16px;left:16px;z-index:230!important}
body[data-page="user"].user-menu-open .user-top-card{z-index:210!important}
body[data-page="user"] .user-menu-wrap{z-index:230!important}
body[data-page="user"] .user-menu-panel{z-index:240!important;isolation:isolate}
body[data-page="user"].user-menu-open .user-menu-panel{display:block!important}
body[data-page="user"].user-authenticated::before{inset:-45vmax!important;border-radius:50%!important;opacity:.52!important;background:repeating-radial-gradient(ellipse at 28% 54%,transparent 0 54px,rgba(70,155,224,.15) 55px 57px,transparent 58px 102px)!important;background-size:auto!important;animation:userWaveDriftA 20s ease-in-out infinite!important}
body[data-page="user"].user-authenticated::after{left:72%!important;top:42%!important;width:125vw!important;height:88vw!important;border:0!important;border-radius:50%!important;opacity:.48!important;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 46px,rgba(66,151,222,.14) 47px 49px,transparent 50px 86px)!important;box-shadow:none!important;transform:translate(-50%,-50%) rotate(-13deg);animation:userWaveDriftB 24s ease-in-out infinite!important}
@media(max-width:700px){body[data-page="user"].user-authenticated::before{inset:-65vmax!important;opacity:.42!important}body[data-page="user"].user-authenticated::after{left:66%!important;top:45%!important;width:190vw!important;height:145vw!important;opacity:.4!important}}
@media(prefers-reduced-motion:reduce){body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{animation:none!important}}
@media(min-width:341px) and (max-width:380px){body[data-page="user"] .qr-receipt-detail-toggle{min-height:30px!important}}

/* FINAL receipt reference precedence. */
@media(max-width:520px){
body[data-page="user"] .qr-internal-receipt{width:100%;min-height:0;height:max-content;padding:clamp(59px,17.33vw,65px) clamp(22px,6.6vw,25px) 28px;background:linear-gradient(180deg,#e5ffdc 0%,#efffe9 36%,#f8fff5 69%,#fff 100%)}
body[data-page="user"] .qr-receipt-card{padding:42px 18px 0;border-radius:22px;box-shadow:0 7px 18px rgba(34,59,50,.18),inset 0 0 0 1px rgba(255,255,255,.98)}
body[data-page="user"] .qr-receipt-check{top:-38px;width:clamp(72px,20.27vw,76px);height:clamp(72px,20.27vw,76px)}
body[data-page="user"] .qr-internal-receipt h2{margin:4px 0 8px;color:#078b57;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:clamp(19px,5.33vw,20px);font-weight:400;line-height:1.18;letter-spacing:-.012em}
body[data-page="user"] .qr-internal-receipt time{color:#8b9390;font-size:12px;font-weight:500;line-height:1.2}
body[data-page="user"] .qr-receipt-amount{margin:8px 0 10px;color:#078b57;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:clamp(32px,9.07vw,34px);font-weight:400;line-height:1.05;letter-spacing:-.012em}
body[data-page="user"] .qr-receipt-member{color:#171918;font-size:clamp(15.5px,4.27vw,16px);font-weight:400;line-height:1.15}
body[data-page="user"] .qr-receipt-details{gap:8px;margin-top:15px;padding:16px 3px;border-top-color:#d6dfdc}
body[data-page="user"] .qr-receipt-mask{grid-template-columns:clamp(32px,9.07vw,34px) clamp(102px,29.87vw,112px) 22px;gap:10px}
body[data-page="user"] .qr-receipt-source-symbol,body[data-page="user"] .qr-receipt-recipient-symbol{width:clamp(32px,9.07vw,34px);height:clamp(32px,9.07vw,34px)}
body[data-page="user"] .qr-receipt-source-symbol img,body[data-page="user"] .qr-receipt-recipient-symbol img{width:100%;height:100%;object-fit:contain}
body[data-page="user"] .qr-receipt-mask-dots{width:clamp(102px,29.87vw,112px);height:8px;background:radial-gradient(circle,#101210 0 2.35px,transparent 2.7px) left center/calc(100% / 18) 8px repeat-x}
body[data-page="user"] .qr-receipt-eye-icon,body[data-page="user"] .qr-receipt-eye-icon svg{width:22px;height:22px}
body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:clamp(32px,9.07vw,34px) 1fr;gap:12px}
body[data-page="user"] .qr-receipt-beneficiary p{gap:4px}
body[data-page="user"] .qr-receipt-beneficiary p>b{color:#171918;font-size:clamp(16px,4.53vw,17px);font-weight:600;line-height:1.2}
body[data-page="user"] .qr-receipt-beneficiary p>span{color:#626b67;font-size:clamp(14px,3.87vw,14.5px);font-weight:400;line-height:1.28}
body[data-page="user"] .qr-receipt-detail-toggle{min-height:30px!important;color:#087f4d;font-size:15px;font-weight:700}
body[data-page="user"] .qr-receipt-actions{margin-inline:-18px;border-radius:0 0 22px 22px;clip-path:inset(0 round 0 0 22px 22px)}
body[data-page="user"] .qr-receipt-promo{height:56px;margin-top:17px;border-radius:19px 19px 0 0}
body[data-page="user"] .qr-internal-receipt>footer{width:100%;margin:0;padding-top:16px;gap:13px}
body[data-page="user"] .qr-internal-receipt>footer button{height:50px;border-radius:26px;font-size:16px;font-weight:600}
}
@media(max-width:340px){body[data-page="user"] .qr-internal-receipt{padding:52px 18px 28px}body[data-page="user"] .qr-receipt-card{padding:37px 14px 0;border-radius:18px}body[data-page="user"] .qr-receipt-check{top:-32px;width:64px;height:64px}body[data-page="user"] .qr-internal-receipt h2{font-size:17px}body[data-page="user"] .qr-internal-receipt time{font-size:10px}body[data-page="user"] .qr-receipt-amount{font-size:29px}body[data-page="user"] .qr-receipt-member{font-size:13px}body[data-page="user"] .qr-receipt-details{margin-top:13px;padding:14px 0}body[data-page="user"] .qr-receipt-mask{grid-template-columns:30px 90px 18px;gap:7px}body[data-page="user"] .qr-receipt-mask-dots{width:90px;height:6px;background-size:calc(100% / 18) 6px}body[data-page="user"] .qr-receipt-beneficiary{grid-template-columns:30px 1fr;gap:8px}body[data-page="user"] .qr-receipt-beneficiary p>b{font-size:12px}body[data-page="user"] .qr-receipt-beneficiary p>span{font-size:10px}body[data-page="user"] .qr-receipt-actions{margin-inline:-14px;border-radius:0 0 18px 18px;clip-path:inset(0 round 0 0 18px 18px)}body[data-page="user"] .qr-receipt-promo{height:50px;margin-top:12px;border-radius:14px 14px 0 0}body[data-page="user"] .qr-internal-receipt>footer{padding-top:10px;gap:8px}body[data-page="user"] .qr-internal-receipt>footer button{height:40px;font-size:12px}}


/* V17 performance: reduce continuous compositor/GPU load without changing layout. */
body[data-page="user"].user-authenticated::before{animation-duration:60s;opacity:.34}
body[data-page="user"].user-authenticated::after{animation-duration:42s;opacity:.48}
body[data-page="user"].user-authenticated .user-top-card,body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:blur(5px)}
@media(max-width:900px){body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:none}body[data-page="user"].user-authenticated::after{animation:none}}
@media(prefers-reduced-motion:reduce){body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{animation:none!important}}

/* V18 smooth-render: authenticated workspace stays visually rich but avoids continuous full-screen repaint. */
body[data-page="user"].user-authenticated::before,body[data-page="user"].user-authenticated::after{animation:none!important}
body[data-page="user"].user-authenticated .user-top-card,body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:blur(3px)!important}
body[data-page="user"].user-authenticated .user-workspace{contain:layout style}
@media(max-width:900px){body[data-page="user"].user-authenticated .user-top-card,body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:none!important}}

/* V19-lite: Earth/Moon decorative assets removed for lower GPU/network cost. */
body[data-page="user"] .login-earth,body[data-page="user"] .login-moon{display:none!important;background-image:none!important;animation:none!important;filter:none!important}


/* V28 ULTRA-SMOOTH: reduce compositor cost on authenticated workspace. */
body[data-page="user"].user-authenticated .user-top-card,
body[data-page="user"].user-authenticated .user-card-panel{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body[data-page="user"].user-authenticated .fade-in{animation-duration:.12s!important}
@media(max-width:920px){body[data-page="user"] .user-card-panel{box-shadow:0 8px 24px rgba(33,78,125,.08)!important}}


/* V35: Avatar + nền cá nhân chỉ áp dụng bên trong sau đăng nhập. */
.user-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;flex:0 0 auto;border:2px solid rgba(42,139,226,.18);background:linear-gradient(135deg,#ecf7ff,#dbeeff);color:#0b67ad;font-weight:900;box-shadow:0 8px 20px rgba(18,94,158,.12)}
.user-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.user-avatar.menu{width:38px;height:38px}
.user-avatar.large{width:76px;height:76px;font-size:1.25rem}
.user-avatar.preview{width:54px;height:54px}
.user-menu-account{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center}
.user-profile-settings{display:grid;gap:18px}
.user-profile-heading{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #dbe8f6}
.user-profile-heading small{display:block;color:#6c87a5;font-weight:900;letter-spacing:.08em;font-size:.72rem}
.user-profile-heading h2{margin:3px 0 4px}
.user-profile-heading p{margin:0;color:#6a7f96}
.user-profile-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.user-profile-media-card{display:grid;gap:12px;padding:15px;border:1px solid #d8e6f4;border-radius:16px;background:rgba(255,255,255,.78)}
.user-profile-media-card header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.user-profile-media-card header b,.user-profile-media-card header span{display:block}
.user-profile-media-card header b{color:#123f68}.user-profile-media-card header span{margin-top:3px;color:#72869b;font-size:.78rem;line-height:1.35}
.user-profile-bg-preview{min-height:132px;border-radius:13px;border:1px dashed #bcd2e7;background:#eef7ff center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.user-profile-bg-preview.mobile{min-height:170px;max-width:190px;width:100%;justify-self:center}
.user-profile-bg-preview span{padding:7px 10px;border-radius:999px;background:rgba(4,37,67,.68);color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.04em}
.user-profile-bg-preview.fallback{background:linear-gradient(135deg,#f4f9ff,#e6f3ff)}
.user-profile-bg-preview.fallback span{background:#d7e9f8;color:#4e6d88}
.user-profile-actions{display:flex;gap:8px}
.user-profile-actions button,.user-profile-upload{min-height:38px;padding:0 13px;border-radius:10px;border:1px solid #c9dcef;background:#fff;color:#185f99;font-weight:850;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.user-profile-upload{flex:1;background:linear-gradient(135deg,#29a8ef,#2670ec);color:#fff;border-color:transparent}
.user-profile-actions button:disabled{opacity:.45;cursor:not-allowed}
.user-profile-note{margin:0;padding:11px 13px;border-radius:12px;background:#eef7ff;color:#55728f;font-size:.82rem}
body.dark-mode .user-profile-media-card{background:rgba(13,28,44,.82);border-color:#29445f}.dark-mode .user-profile-media-card header b{color:#e7f2ff}.dark-mode .user-profile-heading{border-color:#2d465f}.dark-mode .user-profile-heading p,.dark-mode .user-profile-media-card header span{color:#99adc2}.dark-mode .user-profile-note{background:#132a40;color:#aec2d6}
@media (min-width:921px){html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated{background-image:var(--user-profile-bg-pc)!important;background-position:var(--user-profile-bg-pc-position,50% 50%)!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:fixed!important}html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated::before,html[data-user-profile-bg-pc="true"] body[data-page="user"].user-authenticated::after{display:none!important;content:none!important}}
@media (max-width:920px){html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated{background-image:var(--user-profile-bg-mb)!important;background-position:var(--user-profile-bg-mb-position,50% 50%)!important;background-size:cover!important;background-repeat:no-repeat!important;background-attachment:scroll!important}html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated::before,html[data-user-profile-bg-mb="true"] body[data-page="user"].user-authenticated::after{display:none!important;content:none!important}.user-profile-media-grid{grid-template-columns:1fr}.user-profile-heading{align-items:flex-start}.user-avatar.large{width:62px;height:62px}}

/* V36: per-user logo/menu visibility controls inside authenticated Web User only. */
body[data-page="user"].user-authenticated #webUserBrandLogo[hidden],
body[data-page="user"].user-authenticated #userMenuToggle[hidden]{display:none!important}
body[data-page="user"].user-authenticated .user-top-card.user-brand-logo-off{min-height:58px;padding:8px 14px;cursor:default}
body[data-page="user"].user-authenticated .user-top-card.user-brand-logo-off.user-menu-button-off{min-height:30px;padding:4px;background:transparent!important;border-color:transparent!important;box-shadow:none!important;cursor:pointer}
body[data-page="user"].user-authenticated .user-top-card.user-display-controls-off::after{content:"";display:block;width:100%;height:22px}
.user-display-options-card{align-content:start}
.user-display-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #e5eef7;cursor:pointer}
.user-display-switch:last-of-type{border-bottom:0}
.user-display-switch span{display:grid;gap:3px;min-width:0}
.user-display-switch span b{color:#173e61;font-size:.9rem}
.user-display-switch span small{color:#7890a7;font-size:.76rem;line-height:1.35}
.user-display-switch input{position:absolute;opacity:0;pointer-events:none}
.user-display-switch i{position:relative;width:46px;height:26px;border-radius:999px;background:#cbd8e5;flex:0 0 auto;transition:background .18s ease}
.user-display-switch i::after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(23,62,97,.22);transition:transform .18s ease}
.user-display-switch input:checked+i{background:#2d7cf2}
.user-display-switch input:checked+i::after{transform:translateX(20px)}
.user-display-switch input:disabled+i{opacity:.6}
.user-display-hint{margin:2px 0 0;padding:10px 11px;border-radius:10px;background:#f4f8fc;color:#6b8196;font-size:.76rem;line-height:1.4}
body.dark-mode .user-display-switch{border-color:#29445f}.dark-mode .user-display-switch span b{color:#e7f2ff}.dark-mode .user-display-switch span small,.dark-mode .user-display-hint{color:#9fb4c8}.dark-mode .user-display-hint{background:#132a40}


/* V38: profile editor split into Avatar / Background / Logo+Menu sections. */
.user-profile-settings-v38{gap:20px}
.user-profile-hero{padding:4px 2px 18px}
.user-profile-hero-avatar{display:grid;place-items:center;width:86px;height:86px;border-radius:26px;background:linear-gradient(145deg,#f0f8ff,#e5f1ff);border:1px solid #cfe2f5;box-shadow:0 12px 28px rgba(35,91,140,.12)}
.user-profile-hero-copy{min-width:0}.user-profile-hero-copy h2{font-size:1.35rem}.user-profile-hero-copy p{max-width:720px}
.user-profile-section{display:grid;gap:14px;padding:17px;border:1px solid #d8e7f5;border-radius:18px;background:rgba(255,255,255,.74);box-shadow:0 8px 24px rgba(26,75,115,.055)}
.user-profile-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid #e5eef7}
.user-profile-section-title>div{display:grid;gap:3px}.user-profile-section-title b{color:#113f68;font-size:.98rem}.user-profile-section-title span{color:#71879c;font-size:.79rem;line-height:1.35}
.user-profile-section-title em{font-style:normal;font-size:.67rem;font-weight:900;letter-spacing:.055em;color:#3175d7;background:#edf5ff;border:1px solid #d5e6fb;padding:6px 9px;border-radius:999px;white-space:nowrap}
.user-avatar-editor-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:16px;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#eef6ff);border:1px solid #dbe9f7}
.user-avatar-editor-preview{display:grid;place-items:center;width:96px;height:96px;border-radius:24px;background:#fff;border:1px solid #d7e6f4;box-shadow:0 10px 24px rgba(28,79,123,.1)}
.user-avatar-editor-preview .user-avatar.large{width:76px;height:76px}
.user-avatar-editor-copy{display:grid;gap:5px;min-width:0}.user-avatar-editor-copy strong{color:#173f63;font-size:.95rem}.user-avatar-editor-copy p{margin:0 0 7px;color:#74899d;font-size:.8rem;line-height:1.45}
.user-profile-actions-left{justify-content:flex-start}.user-profile-actions-left .user-profile-upload{flex:0 1 auto;min-width:130px}
.user-profile-delete{color:#b6424c!important;border-color:#f0c7cb!important;background:#fff8f8!important}
.user-profile-background-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:14px}
.user-profile-bg-card{background:#fbfdff}.user-profile-bg-card header{align-items:flex-start}.user-profile-device-tag{font-style:normal;font-size:.68rem;font-weight:950;letter-spacing:.07em;color:#236fd0;background:#eaf4ff;border:1px solid #d1e5fb;border-radius:999px;padding:5px 8px}
.user-display-section.is-enabled{border-color:#cfe1f7}.user-display-section.is-locked{background:rgba(248,250,252,.82)}
.user-display-section.is-enabled .user-profile-section-title em{color:#087648;background:#eafaf2;border-color:#c9efdc}
.user-display-section.is-locked .user-profile-section-title em{color:#7e6b48;background:#fff8e9;border-color:#f1e2bd}
.user-display-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.user-display-choice-card{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:96px;padding:14px;border:1px solid #dbe8f5;border-radius:16px;background:#fbfdff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.user-display-choice-card:hover{border-color:#b9d6f2;box-shadow:0 8px 22px rgba(34,94,147,.08);transform:translateY(-1px)}
.user-display-choice-visual{height:62px;border-radius:13px;border:1px solid #deebf6;background:linear-gradient(145deg,#f4f9ff,#eaf4ff);display:grid;place-items:center;overflow:hidden}
.user-display-logo-visual img{display:block;max-width:62px;max-height:38px;object-fit:contain}
.user-display-menu-visual{align-content:center;justify-items:center;gap:6px}.user-display-menu-visual span{display:block;width:28px;height:3px;border-radius:4px;background:#3475c8}
.user-display-choice-copy{display:grid;gap:4px;min-width:0}.user-display-choice-copy b{color:#173f63;font-size:.9rem}.user-display-choice-copy small{color:#758ba1;font-size:.75rem;line-height:1.4}
.user-display-choice-card input{position:absolute;opacity:0;pointer-events:none}
.user-display-toggle{position:relative;width:46px;height:26px;border-radius:999px;background:#cbd8e5;box-shadow:inset 0 0 0 1px rgba(70,104,135,.08);transition:background .16s ease;flex:0 0 auto}
.user-display-toggle::after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(23,62,97,.22);transition:transform .16s ease}
.user-display-choice-card input:checked+.user-display-toggle{background:#2d7cf2}.user-display-choice-card input:checked+.user-display-toggle::after{transform:translateX(20px)}
.user-display-locked-card{padding:14px 15px;border:1px dashed #dbcfae;border-radius:14px;background:#fffaf0}.user-display-locked-card b{color:#6f5b35}.user-display-locked-card p{margin:5px 0 0;color:#8a7856;font-size:.79rem;line-height:1.45}
body.dark-mode .user-profile-section{background:rgba(13,28,44,.84);border-color:#29445f}.dark-mode .user-profile-section-title{border-color:#29445f}.dark-mode .user-profile-section-title b,.dark-mode .user-avatar-editor-copy strong,.dark-mode .user-display-choice-copy b{color:#e8f3ff}.dark-mode .user-profile-section-title span,.dark-mode .user-avatar-editor-copy p,.dark-mode .user-display-choice-copy small{color:#9fb3c7}.dark-mode .user-avatar-editor-card,.dark-mode .user-display-choice-card,.dark-mode .user-profile-bg-card{background:#102238;border-color:#2b4661}.dark-mode .user-avatar-editor-preview,.dark-mode .user-display-choice-visual{background:#152b42;border-color:#31506c}.dark-mode .user-display-locked-card{background:#2a261a;border-color:#5b5034}.dark-mode .user-display-locked-card b{color:#f1deb0}.dark-mode .user-display-locked-card p{color:#cbbd9b}
@media (max-width:920px){.user-profile-section-title{align-items:flex-start;flex-direction:column}.user-avatar-editor-card{grid-template-columns:1fr;justify-items:center;text-align:center}.user-avatar-editor-copy{justify-items:center}.user-profile-actions-left{justify-content:center}.user-profile-background-grid,.user-display-choice-grid{grid-template-columns:1fr}.user-display-choice-card{grid-template-columns:68px minmax(0,1fr) auto}.user-profile-hero-avatar{width:72px;height:72px;border-radius:21px}.user-profile-hero{gap:12px}.user-profile-section{padding:14px}}


/* V39 - preview + image position picker */
.user-image-position-overlay{position:fixed;inset:0;z-index:12050;background:rgba(5,18,32,.72);display:grid;place-items:center;padding:18px;backdrop-filter:blur(3px)}
.user-image-position-modal{width:min(760px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 26px 80px rgba(0,0,0,.3);border:1px solid #d7e6f3;color:#183b59}
.user-image-position-modal>header{display:flex;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #e4edf5}.user-image-position-modal header small{font-weight:900;color:#2585d7;letter-spacing:.06em}.user-image-position-modal header h3{margin:3px 0 4px;font-size:1.15rem}.user-image-position-modal header p{margin:0;color:#71869a;font-size:.78rem}.user-image-position-modal [data-close]{width:36px;height:36px;border:0;border-radius:10px;background:#eef5fb;color:#44647e;font-size:1.45rem;cursor:pointer}
.user-image-position-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr);gap:18px;padding:20px}.user-image-position-preview{background:#0d2030;border-radius:16px;overflow:hidden;display:grid;place-items:center;min-height:250px}.user-image-position-preview.desktop{aspect-ratio:16/9}.user-image-position-preview.mobile{aspect-ratio:9/16;max-height:480px;justify-self:center;width:min(270px,100%)}.user-image-position-preview.avatar{aspect-ratio:1/1;max-width:360px;justify-self:center;border-radius:50%}.user-image-position-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.user-image-position-controls{align-content:start;display:grid;gap:8px}.user-image-position-controls>b{font-size:.9rem}.user-image-position-controls>span{font-size:.76rem;line-height:1.45;color:#71869a}.user-image-position-grid{display:grid;grid-template-columns:repeat(3,48px);gap:8px;margin-top:8px}.user-image-position-grid button{width:48px;height:42px;border:1px solid #cadbe9;border-radius:10px;background:#f7fbff;color:#315e82;font-size:1rem;cursor:pointer}.user-image-position-grid button.active{background:#237eea;color:white;border-color:#237eea;box-shadow:0 6px 16px rgba(35,126,234,.25)}
.user-image-position-modal>footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid #e4edf5;background:#fff}.user-image-position-modal footer button{min-width:110px;height:40px;border-radius:10px;font-weight:850;cursor:pointer}.user-image-position-modal footer .secondary{background:#fff;border:1px solid #cadbe9;color:#46647d}.user-image-position-modal footer .primary{border:0;background:linear-gradient(135deg,#28a8ef,#276feb);color:#fff}
@media(max-width:680px){.user-image-position-body{grid-template-columns:1fr}.user-image-position-preview{min-height:190px}.user-image-position-controls{justify-items:center;text-align:center}}
body.dark-mode .user-image-position-modal{background:#102338;color:#e9f4ff;border-color:#2d4861}.dark-mode .user-image-position-modal>header,.dark-mode .user-image-position-modal>footer{background:#102338;border-color:#29445f}.dark-mode .user-image-position-modal header p,.dark-mode .user-image-position-controls>span{color:#9fb2c4}.dark-mode .user-image-position-grid button{background:#17304a;color:#cfe4f6;border-color:#35536d}


/* V42: brand logo + white top-card are one unit, but hiding them must preserve layout height.
   This prevents Checkbank from jumping upward on both PC and mobile. */
body[data-page="user"].user-authenticated .user-top-card.user-brand-logo-off{
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
/* If an older cached script left the hidden attribute behind, keep the slot instead of collapsing it. */
body[data-page="user"].user-authenticated .user-top-card[hidden]{
  display:grid!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
body[data-page="user"].user-authenticated #userMenuToggle[hidden]{display:none!important}
body[data-page="user"].user-authenticated #userMenuToggle:not([hidden]){display:inline-flex!important}


/* V41: pixel-stable hamburger alignment. The icon is SVG, not a font glyph. */
body[data-page="user"].user-authenticated .user-menu-wrap {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body[data-page="user"] .user-menu-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  border-radius: 11px !important;
}
body[data-page="user"] .user-menu-toggle-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
@media (max-width: 720px) {
  body[data-page="user"].user-authenticated .user-menu-wrap { top: 12px !important; left: 12px !important; }
  body[data-page="user"] .user-menu-toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
}

/* V43: keep the hamburger SVG perfectly centered even when the higher-specificity
   #userMenuToggle rule forces inline-flex. Do not change the button's screen position. */
body[data-page="user"] #userMenuToggle.user-menu-toggle {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body[data-page="user"] #userMenuToggle.user-menu-toggle .user-menu-toggle-icon {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto !important;
  transform: none !important;
}
@media (max-width: 720px) {
  body[data-page="user"] #userMenuToggle.user-menu-toggle .user-menu-toggle-icon {
    flex-basis: 18px !important;
  }
}