/* 澜境 / Sapphire · complete subpage surfaces, isolated from existing themes. */
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .header,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .nav-header {
    padding: calc(26px + env(safe-area-inset-top, 0px)) 24px 26px;
    background: #102b52;
    border-bottom: 1px solid #9fb5d052;
    background-image: linear-gradient(115deg, transparent 64%, #c8dcf312 64%, #c8dcf312 64.25%, transparent 64.25%);
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .header::before,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .nav-header::before {
    width: 42%;
    height: 180px;
    top: -62px;
    right: 22px;
    border: 1px solid #bbd0ec24;
    border-radius: 0;
    background: transparent;
    transform: skewX(-28deg);
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .header-title,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .nav-title {
    color: #f5f8ff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .back-btn,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .back-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    background: #ffffff0a;
}

/* Payment information, bank selection, QR and dedicated payment channels. */
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .card,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-option,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-card {
    margin: 20px;
    padding: 24px;
    border: 1px solid #e2e8f3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 24px #1b355c07;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .card-header {
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8edf5;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .card-title,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .section-title {
    font-size: 15px;
    color: #1c3557;
    font-weight: 650;
    letter-spacing: .5px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .section-title {
    margin: 30px 24px 14px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .info-row,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-row {
    gap: 16px;
    padding: 16px 0;
    border-bottom-color: #eff3f9;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .info-label,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-label {
    color: #78869a;
    font-size: 13px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .info-val,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-value {
    color: #1c3557;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .info-val.orange {
    color: #315f9e;
    font-weight: 650;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] #total {
    font-size: 24px;
    color: #102b52;
    letter-spacing: -.6px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .info-val.red {
    color: #b6473f;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .overdue-badge {
    padding: 5px 10px;
    border: 1px solid #cbd8ea;
    border-radius: 6px;
    background: #edf4fc;
    color: #315f9e;
    font-size: 11px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .overdue-badge.red {
    color: #a64c42;
    border-color: #efdcd8;
    background: #fbf1ed;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-icon {
    border-radius: 14px;
    background: #edf3fc;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-icon svg {
    color: #426caa;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-check {
    width: 22px;
    height: 22px;
    background: #102b52;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-name,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-title {
    color: #1c3557;
    font-weight: 650;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-desc {
    margin-top: 5px;
    color: #7d8ba1;
    font-size: 12px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .select-box {
    min-height: 48px;
    padding: 13px 14px;
    border-color: #dbe3ef;
    border-radius: 10px;
    background: #f8faff;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .dropdown-list {
    border-color: #dbe3ef;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px #102b5208;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .dropdown-list li:hover {
    background: #eef4fc;
    color: #102b52;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-value-row {
    gap: 12px;
    align-items: flex-start;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-value {
    min-width: 0;
    font-size: 17px;
    letter-spacing: .3px;
    text-align: left;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .copy-btn {
    min-height: 32px;
    flex-shrink: 0;
    border-color: #d8e3f1;
    border-radius: 8px;
    background: #f6f9fe;
    color: #315f9e;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .amount-tip {
    margin: 0 20px;
    padding: 18px 20px;
    border: 1px solid #d5e2f4;
    border-radius: 14px;
    background: #eef4fd;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .amount-tip-title {
    color: #355b8d;
    font-size: 14px;
    line-height: 1.7;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .amount-tip-desc {
    color: #6b7c96;
    line-height: 1.8;
    opacity: 1;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .upload-section {
    margin: 24px 20px;
    padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px));
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .upload-btn {
    min-height: 46px;
    padding: 11px 24px;
    border: 1px solid #becde3;
    border-radius: 12px;
    background: #fff;
    color: #102b52;
    font-weight: 600;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .channel-btn,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .cs-btn {
    min-height: 50px;
    border: 1px solid #102b52;
    border-radius: 13px;
    background: #102b52;
    color: #fff;
    box-shadow: 0 4px 12px #102b5210;
    font-size: 14px;
    letter-spacing: 1px;
}

html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] #qr-info img,
html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] #channel-info img {
    max-width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f3;
    border-radius: 14px;
    background: #fff;
}

/* Documents keep their original text, seals and data bindings. */
html[data-ui-theme="sapphire"][data-ui-page="contract"] .contract-body {
    margin: 20px;
    padding: 24px 20px;
    border: 1px solid #dce4f0;
    border-top: 2px solid #9fb5d0;
    border-radius: 3px 3px 14px 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px #1b355c05;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] h2 {
    margin: 6px 0 24px;
    color: #1c3557;
    font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
    font-size: 19px;
    letter-spacing: 2px;
    line-height: 1.8;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] table {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] td {
    padding: 12px 8px;
    border-color: #dce4ef;
    color: #3a4c64;
    font-size: 12px;
    line-height: 1.8;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] td:nth-child(odd) {
    width: auto;
    background: #f0f4fb;
    color: #556b88;
    font-weight: 600;
    white-space: normal;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] .section,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .signature-section {
    margin-top: 20px;
    color: #52657e;
    font-size: 13px;
    line-height: 2;
}

html[data-ui-theme="sapphire"][data-ui-page="contract"] .red,
html[data-ui-theme="sapphire"][data-ui-page="contract"] .foot-note {
    color: #b24c42;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .header,
html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .top-bar {
    box-sizing: border-box;
    left: 50%;
    width: min(100%, 600px);
    transform: translateX(-50%);
    height: calc(68px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 24px 0;
    background: #102b52;
    border-bottom: 1px solid #9fb5d052;
    color: #f5f8ff;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .header-title,
html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .top-bar .title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .header .back-btn,
html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .top-bar .back-btn {
    box-sizing: border-box;
    width: 36px;
    min-height: 36px;
    padding: 3px;
    border: 1px solid #ffffff24;
    border-radius: 12px;
    color: #f5f8ff;
    line-height: 28px;
    text-align: center;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .header .back-btn {
    left: 24px;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .container {
    min-height: calc(100svh - 112px);
    margin: calc(92px + env(safe-area-inset-top, 0px)) 20px 24px;
    padding: 30px 24px 80px;
    border: 1px solid #dce4f0;
    border-top: 3px solid #9fb5d0;
    border-radius: 3px 3px 16px 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px #1b355c05;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .content {
    color: #4a5f7c;
    font-size: 14px;
    line-height: 2.1;
    overflow-wrap: anywhere;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .content p {
    margin-bottom: 16px;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .content h2 {
    margin: 26px 0 32px;
    color: #1c3557;
    font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
    font-size: 26px;
    letter-spacing: 6px;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] .today-date {
    margin-top: 36px;
    color: #7a89a0;
    font-size: 12px;
}

html[data-ui-theme="sapphire"][data-ui-page="settle"] #main-container button {
    min-height: 44px;
    border-radius: 10px !important;
    background: #102b52 !important;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .content {
    padding: calc(92px + env(safe-area-inset-top, 0px)) 20px 24px;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .letter-box {
    padding: 28px 22px;
    border: 1px solid #dce4f0;
    border-top: 3px solid #9fb5d0;
    border-radius: 3px 3px 16px 16px;
    background: #ffffff;
    color: #4a5f7c;
    font-size: 13px;
    line-height: 2.1;
    box-shadow: 0 8px 24px #1b355c05;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .letter-title {
    margin: 28px 0 24px;
    color: #1c3557;
    font-family: "Songti SC", "Noto Serif CJK SC", SimSun, serif;
    letter-spacing: 8px;
    font-size: 25px;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .firm-name {
    color: #315679;
    font-size: 18px;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .firm-name-en {
    color: #8798af;
    letter-spacing: 2px;
    font-size: 10px;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .letter-divider {
    margin: 20px 0;
    border-top: 1px solid #9fb5d070;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .bottom-nav-item {
    color: #75869f;
    font-size: 11px;
}

html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .bottom-nav-item.active {
    color: #102b52;
}

/* Conversation layout remains a flex column: only message history scrolls. */
html[data-ui-theme="sapphire"][data-ui-page="chat"],
html[data-ui-theme="sapphire"][data-ui-page="chat"] body {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

html[data-ui-theme="sapphire"][data-ui-page="chat"] body {
    padding: 0;
}

html[data-ui-theme="sapphire"] .chat-container {
    width: 100%;
    max-width: 600px;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #f4f7fc;
    box-shadow: none;
}

html[data-ui-theme="sapphire"] .chat-header {
    flex-shrink: 0;
    padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 22px;
    background: #102b52;
    color: #f5f8ff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

html[data-ui-theme="sapphire"] .chat-header .back-btn {
    left: 20px;
    color: #fff;
}

html[data-ui-theme="sapphire"] .chat-header .voice-start-btn {
    right: 18px;
    padding: 8px 12px;
    border-color: #bbd0ec66;
    border-radius: 8px;
    background: #ffffff08;
    color: #d1dff3;
    letter-spacing: 0;
}

html[data-ui-theme="sapphire"] .service-notice {
    flex-shrink: 0;
    padding: 11px 16px;
    border-bottom: 1px solid #dde6f2;
    background: #eaf0f9;
    color: #6d819f;
    font-size: 11px;
    letter-spacing: .3px;
}

html[data-ui-theme="sapphire"] .service-notice::before {
    background: none;
    animation: none;
}

html[data-ui-theme="sapphire"] .notice-dot {
    width: 6px;
    height: 6px;
    background: #7195c5;
    box-shadow: none;
}

html[data-ui-theme="sapphire"] .notice-text {
    text-shadow: none;
}

html[data-ui-theme="sapphire"] .chat-messages {
    min-height: 0;
    padding: 24px 20px;
    background: #f4f7fc;
    scrollbar-width: thin;
    scrollbar-color: #c6d4e7 transparent;
}

html[data-ui-theme="sapphire"] .message {
    margin-bottom: 24px;
}

html[data-ui-theme="sapphire"] .bubble {
    max-width: 82%;
    padding: 13px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

html[data-ui-theme="sapphire"] .user .bubble {
    border-top-right-radius: 4px;
    background: #102b52;
    color: #fff;
}

html[data-ui-theme="sapphire"] .admin .bubble {
    border: 1px solid #e1e8f3;
    border-top-left-radius: 4px;
    background: #ffffff;
    color: #3a506e;
    box-shadow: 0 2px 4px #102b5203;
}

html[data-ui-theme="sapphire"] .message-time {
    margin: 7px 3px 0;
    color: #8695aa;
    font-size: 10px;
}

html[data-ui-theme="sapphire"] .read-status {
    color: #6c8db9;
}

html[data-ui-theme="sapphire"] .chat-input-area {
    flex-shrink: 0;
    gap: 8px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e1e8f3;
    background: #ffffff;
}

html[data-ui-theme="sapphire"] .chat-input {
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #dfe7f3;
    border-radius: 12px;
    background: #f3f7fd;
    color: #1c3557;
}

html[data-ui-theme="sapphire"] .chat-input:focus {
    border-color: #94afd4;
    box-shadow: 0 0 0 3px #102b5209;
}

html[data-ui-theme="sapphire"] .send-btn {
    min-height: 44px;
    padding: 10px 17px;
    border-radius: 11px;
    background: #102b52;
    font-size: 13px;
    white-space: nowrap;
}

html[data-ui-theme="sapphire"][data-ui-page="chat"] .upload-btn,
html[data-ui-theme="sapphire"] .receipt-btn {
    margin-right: 0;
    color: #557cae;
    font-size: 23px;
}

html[data-ui-theme="sapphire"] .img-msg {
    max-width: 100%;
    border-radius: 10px;
}

html[data-ui-theme="sapphire"] .user .bubble a {
    color: #cbdffc;
    text-decoration: underline;
}

html[data-ui-theme="sapphire"] .admin .bubble a {
    color: #315f9e;
    text-decoration: underline;
}

/* Voice controls and existing Layui dialogs follow the selected appearance. */
html[data-ui-theme="sapphire"] .voice-call-panel {
    color: #1c3557;
    border-color: #dce5f1;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 48px #102b5220;
}

html[data-ui-theme="sapphire"] .voice-call-icon {
    color: #315f9e;
    background: #ecf3fe;
}

html[data-ui-theme="sapphire"] .voice-call-panel button {
    border-color: #dce5f1;
    border-radius: 9px;
    background: #f1f5fc;
    color: #315f9e;
}

html[data-ui-theme="sapphire"] .voice-call-panel .voice-call-accept {
    border-color: #315f9e;
    background: #315f9e;
    color: #fff;
}

html[data-ui-theme="sapphire"] .voice-call-panel .voice-call-end {
    border-color: #b6473f;
    background: #b6473f;
    color: #fff;
}

html[data-ui-theme="sapphire"] .layui-layer:not(.layui-layer-photos):not(.layui-layer-tips):not(.layui-layer-msg) {
    border: 1px solid #dee7f3;
    border-radius: 18px;
    box-shadow: 0 24px 80px #102b5226;
}

html[data-ui-theme="sapphire"] .layui-layer-title {
    border-bottom-color: #e7edf7;
    border-radius: 18px 18px 0 0;
    background: #f5f8fd;
    color: #2e507b;
    font-weight: 600;
}

html[data-ui-theme="sapphire"] .layui-layer-btn .layui-layer-btn0 {
    border-color: #102b52;
    border-radius: 8px;
    background: #102b52;
    color: #fff;
}

/* Verification and intermediate screens use the same quiet palette. */
html[data-ui-theme="sapphire"] body:has(.verify-container) {
    min-height: 100svh;
    padding: 32px 24px 92px;
    background: #102b52;
    color: #f5f8ff;
}

html[data-ui-theme="sapphire"] .verify-container {
    max-width: 100%;
    padding: 32px 24px;
    border: 1px solid #bbd0ec35;
    border-radius: 24px;
    background: #ffffff04;
}

html[data-ui-theme="sapphire"] .verify-title {
    font-size: 22px;
    letter-spacing: 3px;
    font-weight: 500;
}

html[data-ui-theme="sapphire"] .verify-steps {
    margin-top: 20px;
    color: #c3d1e6;
    font-size: 12px;
    line-height: 2.2;
}

html[data-ui-theme="sapphire"] .particle {
    background: #bbd0ec44;
}

html[data-ui-theme="sapphire"] .glow-ring,
html[data-ui-theme="sapphire"] .glow-ring::after,
html[data-ui-theme="sapphire"] .shield-outer,
html[data-ui-theme="sapphire"] .shield-outer::before {
    border-color: #bbd0ec33;
}

html[data-ui-theme="sapphire"] .shield-icon svg {
    stroke: #bbd0ec;
    filter: none;
}

html[data-ui-theme="sapphire"] .progress-text {
    color: #ccd9ee;
    font-size: 12px;
    letter-spacing: 1px;
}

html[data-ui-theme="sapphire"] .progress-bar-fill {
    background: #a9c4ed;
    box-shadow: none;
}

html[data-ui-theme="sapphire"] .step-check.loading {
    border-top-color: #bbd0ec;
}

html[data-ui-theme="sapphire"] .step-item.done {
    color: #b4d2f5;
}

html[data-ui-theme="sapphire"] .enter-btn {
    padding: 15px 48px;
    border: 1px solid #bbd0ec;
    border-radius: 12px;
    background: #bbd0ec;
    color: #102b52;
    box-shadow: none;
    font-size: 14px;
}

html[data-ui-theme="sapphire"] .enter-btn:hover {
    box-shadow: 0 6px 22px #00000015;
}

html[data-ui-theme="sapphire"] .footer-hint {
    color: #bacce4;
    font-size: 10px;
    letter-spacing: 0;
}

html[data-ui-theme="sapphire"] body:has(.loading-box) {
    padding: 24px;
    background: #102b52;
}

html[data-ui-theme="sapphire"] .loading-box {
    color: #f5f8ff;
}

html[data-ui-theme="sapphire"] .spinner {
    width: 44px;
    height: 44px;
    border-width: 2px;
    border-color: #bbd0ec33;
    border-top-color: #bbd0ec;
}

html[data-ui-theme="sapphire"] .loading-text {
    font-size: 16px;
    letter-spacing: 2px;
}

html[data-ui-theme="sapphire"] .loading-sub {
    margin-top: 14px;
    color: #bacce4;
    font-size: 12px;
}

html[data-ui-theme="sapphire"] body:has(> main) {
    box-sizing: border-box;
    padding: 24px;
}

html[data-ui-theme="sapphire"] body > main {
    box-sizing: border-box;
    border: 1px solid #dce5f0;
    border-top: 3px solid #9fb5d0;
    border-radius: 4px 4px 20px 20px;
    background: #ffffff;
    color: #2e507b;
    box-shadow: 0 8px 32px #102b5207;
}

html[data-ui-theme="sapphire"] body > main h1 {
    color: #1c3557;
    font-size: 21px;
    letter-spacing: 1px;
}

html[data-ui-theme="sapphire"] [data-admin-frontend-login] button {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 10px;
    background: #102b52;
}

html[data-ui-theme="sapphire"] [data-admin-frontend-login] .hint {
    margin-top: 24px;
    color: #7a8ca6;
    line-height: 1.9;
}

/* Existing service/FAQ view, including its collapsed and expanded states. */
html[data-ui-theme="sapphire"] .action-bar {
    gap: 12px;
    padding: 0 20px;
    margin-top: -18px;
}

html[data-ui-theme="sapphire"] .action-btn {
    min-height: 60px;
    padding: 16px;
    border: 1px solid #dee7f3;
    border-radius: 15px;
    background: #ffffff;
    color: #2e507b;
    box-shadow: 0 6px 20px #102b5208;
}

html[data-ui-theme="sapphire"] .action-btn svg,
html[data-ui-theme="sapphire"] .faq-title svg {
    color: #587faf;
}

html[data-ui-theme="sapphire"] .faq-section {
    padding: 28px 20px 0;
}

html[data-ui-theme="sapphire"] .faq-title {
    margin-bottom: 18px;
    color: #2e507b;
    font-size: 15px;
}

html[data-ui-theme="sapphire"] .faq-list {
    border: 1px solid #dee7f3;
    border-radius: 18px;
    box-shadow: 0 5px 18px #102b5203;
}

html[data-ui-theme="sapphire"] .faq-item {
    border-bottom-color: #edf2fa;
}

html[data-ui-theme="sapphire"] .faq-question {
    padding: 20px;
    color: #335575;
    font-size: 14px;
}

html[data-ui-theme="sapphire"] .faq-answer {
    padding: 0 20px 20px;
    color: #7a8ba2;
    font-size: 13px;
    line-height: 1.9;
}

html[data-ui-theme="sapphire"] .service-time {
    color: #8291a7;
    font-size: 11px;
}

@media (min-width: 640px) {
    html[data-ui-theme="sapphire"][data-ui-page="chat"] .chat-container {
        border-inline: 1px solid #dee7f3;
    }

    html[data-ui-theme="sapphire"] .voice-call-panel {
        right: max(20px, calc((100vw - 560px) / 2));
    }
}

@media (max-width: 359px) {
    html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .card,
    html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .pay-option,
    html[data-ui-theme="sapphire"][data-ui-page="repay_confirm"] .transfer-card {
        margin: 14px;
        padding: 18px;
    }

    html[data-ui-theme="sapphire"][data-ui-page="contract"] .contract-body {
        margin: 14px;
        padding: 20px 12px;
    }

    html[data-ui-theme="sapphire"][data-ui-page="contract"] td {
        padding: 8px 5px;
        font-size: 11px;
    }

    html[data-ui-theme="sapphire"] .chat-input-area {
        gap: 6px;
        padding-inline: 10px;
    }

    html[data-ui-theme="sapphire"] .send-btn {
        padding-inline: 12px;
    }
}

@media print {
    html[data-ui-theme="sapphire"][data-ui-page="contract"],
    html[data-ui-theme="sapphire"][data-ui-page="settle"],
    html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] {
        background: #fff;
    }

    html[data-ui-theme="sapphire"][data-ui-page="contract"] body,
    html[data-ui-theme="sapphire"][data-ui-page="settle"] body,
    html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] body {
        max-width: none;
        min-height: auto;
        margin: 0;
        padding: 0;
        background: #fff;
        box-shadow: none;
    }

    html[data-ui-theme="sapphire"][data-ui-page="contract"] .nav-header,
    html[data-ui-theme="sapphire"][data-ui-page="settle"] .header,
    html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .top-bar,
    html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .bottom-nav {
        display: none;
    }

    html[data-ui-theme="sapphire"][data-ui-page="contract"] .contract-body,
    html[data-ui-theme="sapphire"][data-ui-page="settle"] .container,
    html[data-ui-theme="sapphire"][data-ui-page="lawsuit"] .content {
        margin: 0;
        padding: 20px;
        border: 0;
        box-shadow: none;
    }
}