.app-body-online {
    --if-bg: #050506;
    --if-panel: rgba(17, 17, 21, 0.94);
    --if-panel-2: rgba(25, 24, 28, 0.9);
    --if-panel-3: rgba(42, 17, 22, 0.58);
    --if-line: rgba(255, 255, 255, 0.14);
    --if-line-strong: rgba(255, 255, 255, 0.26);
    --if-text: #f2efea;
    --if-muted: #aaa39d;
    --if-faint: #746e6a;
    --if-red: #d52232;
    --if-red-2: #ff4050;
    --if-gold: #d3b061;
    --if-ok: #b9cf8a;
    --if-bad: #ff7b89;
    --if-radius: 8px;
    --font-ui-1: var(--font);
    --text-light: var(--if-muted);
    --border-light: var(--if-line);
    --border-hover: rgba(255, 64, 80, 0.72);
    --shadow-base: 0 12px 28px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.36);
    font-family: var(--font) !important;
    background:
        linear-gradient(120deg, rgba(213, 34, 50, 0.16), transparent 30%),
        radial-gradient(circle at 82% 10%, rgba(211, 176, 97, 0.1), transparent 25%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 18px),
        var(--if-bg) !important;
}

.app-body-online *,
.app-body-online *::before,
.app-body-online *::after {
    letter-spacing: 0 !important;
}

.app-body-online :where(
    h1, h2, h3, h4,
    .page-title, .section-title, .login-title, .changeinfo-title, .faq-title,
    .userptt-title, .lottery-title, .board-title, .group-title,
    .banner-section-title, .monthly-banner-title, .char-group-title,
    .rating-title, .song-title, .course-title
) {
    color: var(--if-text) !important;
    font-family: var(--font) !important;
    text-shadow: none !important;
}

.app-body-online :where(.page-title, .login-title, .changeinfo-title, .faq-title, .userptt-title, .lottery-title, .board-title) {
    position: relative;
    margin-bottom: 1.4rem !important;
    padding-bottom: 0.8rem !important;
    border-bottom: 1px solid var(--if-line) !important;
}

.app-body-online :where(.page-title, .login-title, .changeinfo-title, .faq-title, .userptt-title, .lottery-title, .board-title)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 96px !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--if-red-2), var(--if-gold)) !important;
    transform: none !important;
}

.app-body-online :where(
    .login-page-container, .changeinfo-page-container, .faq-page-wrapper,
    .chart-container, .banner-container, .store-container, .userptt-container,
    .char-container, .leaderboard-container, .song-table-container,
    .unlock-progress-container, .redeem-container, .container, .batch-rating-container
) {
    color: var(--if-text) !important;
    background: transparent !important;
    font-family: var(--font) !important;
}

.app-body-online :where(
    .section-card, .login-card, .changeinfo-form-card, .faq-list-container, .faq-item,
    .rating-section, .chart-item, .banner-card, .current-banner, .banner-item,
    .monthly-banner-section, .monthly-banner-item, .redeem-banner-card,
    .store-card, .form-card, .table-section, .song-card, .course-list, .course-btn,
    .char-basic, .char-skill, .skill-item, .userptt-main-card,
    .userptt-background-selection, .userptt-background-item, .userptt-b30-container,
    .userptt-b30-item, .announcement-item, .sign-section, .user-assets,
    .resource-item, .asset-item, .summary-item, .condition-container,
    .sub-condition-container, .result-modal, .guarantee-panel, .friend-card,
    .data-card, .rank-card, .info-card, .panel, .card
) {
    color: var(--if-text) !important;
    background: linear-gradient(180deg, var(--if-panel), rgba(8, 8, 11, 0.96)) !important;
    border: 1px solid var(--if-line) !important;
    border-radius: var(--if-radius) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important;
}

.app-body-online :where(.section-card, .login-card, .changeinfo-form-card, .faq-list-container, .rating-section, .table-section, .store-card, .userptt-main-card, .unlock-progress-container) {
    padding: clamp(16px, 2.6vw, 26px) !important;
}

.app-body-online :where(
    .login-card, .changeinfo-form-card, .faq-list-container, .rating-section,
    .chart-item, .banner-card, .current-banner, .banner-item,
    .monthly-banner-section, .monthly-banner-item, .table-section,
    .store-card, .userptt-main-card, .unlock-progress-container
)::before {
    background: linear-gradient(90deg, rgba(213, 34, 50, 0.18), rgba(211, 176, 97, 0.08), transparent) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.app-body-online :where(
    button, input[type="submit"], input[type="button"], .submit-btn, .btn, .button,
    .back-btn, .action-btn, .tab-button, .faq-question-btn, .search-btn,
    .login-submit-btn, .changeinfo-submit-btn, .userptt-function-btn,
    .userptt-download-btn, .monthly-buy-btn, .reset-banner-btn, .single-draw-btn,
    .ten-draw-btn, .again-btn, .makeup-btn, .draw-btns button, .modal-btn-group button
) {
    min-height: 38px !important;
    color: var(--if-text) !important;
    background: linear-gradient(180deg, rgba(42, 17, 22, 0.78), rgba(13, 12, 15, 0.92)) !important;
    border: 1px solid rgba(213, 34, 50, 0.46) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    font-family: var(--font) !important;
    text-shadow: none !important;
    transform: none !important;
}

.app-body-online :where(
    button, input[type="submit"], input[type="button"], .submit-btn, .btn, .button,
    .back-btn, .action-btn, .tab-button, .faq-question-btn, .search-btn,
    .login-submit-btn, .changeinfo-submit-btn, .userptt-function-btn,
    .userptt-download-btn, .monthly-buy-btn, .reset-banner-btn, .single-draw-btn,
    .ten-draw-btn, .again-btn, .makeup-btn, .draw-btns button, .modal-btn-group button
):hover {
    color: #fff !important;
    background: rgba(213, 34, 50, 0.22) !important;
    border-color: rgba(255, 64, 80, 0.82) !important;
}

.app-body-online .home-filters .filter-chip {
    min-height: 38px !important;
    padding: 8px 13px !important;
    color: var(--if-muted) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--if-line) !important;
    border-radius: 5px !important;
}

.app-body-online .home-filters .filter-chip.is-active {
    color: #fff !important;
    background: rgba(213, 34, 50, 0.24) !important;
    border-color: rgba(255, 64, 80, 0.78) !important;
}

.app-body-online :where(input, select, textarea, .login-input, .changeinfo-input, .search-input, .redeem-input) {
    color: var(--if-text) !important;
    background: rgba(0, 0, 0, 0.46) !important;
    border: 1px solid var(--if-line) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    font-family: var(--font) !important;
}

.app-body-online :where(input, select, textarea, .login-input, .changeinfo-input, .search-input, .redeem-input):focus {
    border-color: rgba(255, 64, 80, 0.72) !important;
    outline: 2px solid rgba(255, 64, 80, 0.35) !important;
    outline-offset: 1px !important;
}

.app-body-online :where(label, .login-label, .changeinfo-label, .resource-label, .asset-label, .current-info, .hint, .tip-content, .faq-answer-text, .announcement-content, .empty-tip, .no-data) {
    color: var(--if-muted) !important;
    font-family: var(--font) !important;
}

.app-body-online :where(.highlight, .rating-value, .b30-rating, .course-ptt, .resource-value, .asset-value, .result-value, .userptt-value, .points-cost, .owned, .success, .completed, .passed) {
    color: var(--if-gold) !important;
}

.app-body-online :where(.error, .flash-error, .code-error, .unowned-banner, .status-unowned, .unplayed) {
    color: var(--if-bad) !important;
}

.app-body-online :where(.flash, .flash-message, .app-flash, .alert, .message, .changeinfo-hint-box, .login-form-footer, .register-tip, .redeem-status) {
    color: var(--if-text) !important;
    background: rgba(213, 34, 50, 0.12) !important;
    border: 1px solid rgba(255, 64, 80, 0.36) !important;
    border-left: 3px solid var(--if-red-2) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.app-body-online :where(table, .leaderboard-table, .rank-table, .song-table, .char-level-table) {
    width: 100% !important;
    color: var(--if-text) !important;
    background: rgba(8, 8, 11, 0.94) !important;
    border: 1px solid var(--if-line) !important;
    border-collapse: collapse !important;
    border-radius: var(--if-radius) !important;
    overflow: hidden !important;
    font-family: var(--font) !important;
}

.app-body-online :where(th) {
    color: var(--if-muted) !important;
    background: rgba(213, 34, 50, 0.16) !important;
    border-bottom: 1px solid var(--if-line) !important;
}

.app-body-online :where(td) {
    color: var(--if-text) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-body-online :where(tr:hover td, .table-row:hover td) {
    background: rgba(213, 34, 50, 0.08) !important;
}

.app-body-online :where(.progress-track, .horizon-progress-section, .vertical-progress, .guarantee-progress, .welcome-progress) {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--if-line) !important;
}

.app-body-online :where(.progress-fill, .horizon-progress-inner, .month-extra-bar, .guarantee-remaining, .progress-bar) {
    background: linear-gradient(90deg, var(--if-red), var(--if-gold)) !important;
}

.app-body-online :where(.faq-arrow-icon) {
    border-color: var(--if-red-2) !important;
}

.app-body-online :where(.loading-spinner, .spinner) {
    border-color: rgba(255, 255, 255, 0.16) !important;
    border-top-color: var(--if-red-2) !important;
}

.app-body-online :where(
    .welcome-message,
    .sweep-line,
    .login-sweep-line,
    .changeinfo-sweep-line
) {
    display: none !important;
    animation: none !important;
}

.app-body-online :where(
    .scan-line,
    .scanline,
    [class*="scanLine"]
) {
    animation: none !important;
}

.app-body-online :where(.char-icon, .char-card-icon, .banner-item-img, .current-banner-img, .monthly-banner-img, .redeem-banner-img, .userptt-background-icon, .announcement-image) {
    border: 1px solid var(--if-line) !important;
    border-radius: 5px !important;
    background: var(--if-panel) !important;
}

.app-body-online [style*="0, 150, 255"],
.app-body-online [style*="138, 43, 226"],
.app-body-online [style*="#60a5fa"],
.app-body-online [style*="#a5b4fc"],
.app-body-online [style*="#5b67c9"],
.app-body-online [style*="#4338ca"] {
    border-color: var(--if-line) !important;
    color: var(--if-muted) !important;
    text-shadow: none !important;
}

@media (max-width: 760px) {
    .app-body-online :where(.login-page-container, .changeinfo-page-container, .faq-page-container, .chart-container, .banner-container, .store-container, .userptt-container, .char-container, .song-table-container, .unlock-progress-container, .container) {
        width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}