/* Panelio 用户端唯一外部样式入口。 */

/* 模板初始可见性状态；运行时脚本可用更具体的组件规则或内联状态覆盖。 */
.is-hidden-initially { display: none; }
.is-visible-initially { display: block; }
.is-empty-progress { width: 0%; }

/* ============================================================
   全局基础样式
   ============================================================ */
:root {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --success: #10b981;
    --error: #dc2626;
    --warning: #f59e0b;
    --neutral-accent: #333333;
    --cyan: #06b6d4;
    --pink: #ec4899;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-sidebar: #f7f9fd;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --border: #e5e5e5;
    --shadow: rgba(0, 0, 0, 0.08);
}

/* Whole-page opacity animation makes visible cards flash during navigation. */
body.page-dashboard .content-section.active,
body.page-dashboard .tab-content.active {
    animation: none;
}

body.page-dashboard :is(button, .sidebar-nav .nav-item, .tab-btn, .category-btn) {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease,
        box-shadow .18s ease, transform .18s ease;
}

body.page-dashboard :is(button, .sidebar-nav .nav-item, .tab-btn, .category-btn):not(:disabled):active {
    transform: translateY(1px) scale(.985);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.page-dashboard :is(.page-refresh-btn, .btn-primary, .btn-secondary, .primary-action):not(:disabled):hover {
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard :is(.content-section.active, .tab-content.active) { animation: none; }
    body.page-dashboard :is(button, .sidebar-nav .nav-item, .tab-btn, .category-btn) { transition: none; }
    body.page-dashboard :is(button, .sidebar-nav .nav-item, .tab-btn, .category-btn):not(:disabled):active { transform: none; }
}

/* ============================================================
   前台视觉重构 v3
   暖白导航、白色内容区、炭黑主操作、低饱和状态色
   ============================================================ */
body.page-dashboard {



    --neutral-accent: #555;
    --cyan: #666;
    --pink: #777;






















}

body.page-dashboard .sidebar {
    width: 248px;
    background: var(--ui-sidebar);
    border-right: 1px solid var(--ui-border);
    box-shadow: none;
}

body.page-dashboard .sidebar-header {
    min-height: 78px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--ui-border);
}

body.page-dashboard .sidebar .logo-title {
    color: var(--ui-ink);
    font-size: 16px;
    font-weight: 760;

}

body.page-dashboard .sidebar .logo-subtitle {
    margin-top: 2px;
    color: var(--ui-muted);
    font-size: 10px;
}

body.page-dashboard .sidebar-nav {
    padding: 15px 12px;
}

body.page-dashboard .sidebar-nav .nav-item {
    position: relative;
    min-height: 42px;
    margin: 2px 0;
    padding: 9px 12px;
    gap: 12px;

    background: transparent;
    border: 1px solid transparent;

    font-size: 13px;
    font-weight: 590;
}

body.page-dashboard .sidebar-nav .nav-item::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -1px;
    width: 2px;
    content: "";
    background: transparent;
    border-radius: 0 2px 2px 0;
}

body.page-dashboard .sidebar-nav .nav-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    fill: currentColor;
}

body.page-dashboard .sidebar-nav .nav-item svg.nav-outline-icon {
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard .sidebar-nav .nav-item:hover {

    background: rgba(255, 255, 255, 0.62);
}

body.page-dashboard .sidebar-nav .nav-item.active {

    background: #fff;


}

body.page-dashboard .sidebar-nav .nav-item.active::before {
    background: var(--ui-warm);
}



body.page-dashboard .nav-section-title {
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 680;
    letter-spacing: 0.05em;
}

body.page-dashboard .sidebar-footer {
    padding: 10px 15px 12px;
    background: var(--ui-sidebar);
    border-top-color: var(--ui-border);
}

body.page-dashboard :is(.telegram-bind-sidebar, .email-bind-sidebar, .telegram-sidebar-btn, .admin-panel-btn, .user-card, .logout-btn) {
    min-height: 43px;
    margin: 0;
    padding: 9px 11px;
    color: var(--ui-ink-soft);
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: none;
}

body.page-dashboard :is(.telegram-bind-sidebar, .email-bind-sidebar, .telegram-sidebar-btn, .admin-panel-btn, .logout-btn) svg {
    color: var(--ui-muted);
    fill: currentColor;
}

body.page-dashboard :is(.telegram-bind-sidebar, .email-bind-sidebar, .telegram-sidebar-btn, .admin-panel-btn, .logout-btn):hover {
    color: var(--ui-ink);
    background: #fff;
    border-color: var(--ui-border-strong);
    transform: none;
}

body.page-dashboard .bind-badge {
    color: var(--ui-green);
    background: var(--ui-green-soft);
}

body.page-dashboard .user-avatar,
body.page-dashboard .mobile-user-avatar {
    color: #fff;
    background: var(--ui-primary);
    box-shadow: none;
}

body.page-dashboard .user-name,
body.page-dashboard .user-level {
    color: var(--ui-ink-soft);
}

body.page-dashboard .logout-btn {
    color: var(--ui-red);
    background: var(--ui-red-soft);
    border-color: #efcfcc;
}



body.page-dashboard .main-content {
    min-height: 100vh;
    margin-left: 248px;
    padding: 24px clamp(30px, 2vw, 52px) 44px;
    background: #fff;
}

body.page-dashboard *,
body.page-login *,
body.page-register * {
    background-image: none !important;
}



body.page-dashboard .dashboard-hero {
    margin-bottom: 16px;
    padding: 20px 22px;
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: none;
}

body.page-dashboard .dashboard-hero::before,
body.page-dashboard .dashboard-hero::after {
    display: none;
}

body.page-dashboard .hero-content-main {
    position: relative;
    z-index: 1;
}

body.page-dashboard .hero-greeting {
    gap: 13px;
}

body.page-dashboard .greeting-emoji {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    background: var(--ui-warm-soft);
    border: 1px solid #edd8c6;
    border-radius: 11px;
    font-size: 0;
}

body.page-dashboard .greeting-emoji::before {
    width: 18px;
    height: 18px;
    content: "";
    background: var(--ui-warm);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='black'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.page-dashboard .greeting-text h1 {
    color: var(--ui-ink);
    font-size: 21px;
    font-weight: 760;
    letter-spacing: -0.025em;
}



body.page-dashboard .greeting-time {
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 11px;
}

body.page-dashboard .hero-actions {
    gap: 8px;
}

body.page-dashboard .hero-search-btn {
    min-height: 40px;
    padding: 9px 16px;
    color: #fff;
    background: var(--ui-primary);
    border: 1px solid var(--ui-primary);
    border-radius: 9px;
    box-shadow: 0 6px 14px rgba(37, 35, 33, 0.12);
    font-size: 12px;
    font-weight: 680;
}

body.page-dashboard .hero-search-btn:hover {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    box-shadow: 0 9px 20px rgba(37, 35, 33, 0.16);
    transform: translateY(-1px);
}

body.page-dashboard .hero-search-btn.hero-action-secondary {
    color: var(--ui-ink);
    background: #fff;
    border-color: var(--ui-border-strong);
    box-shadow: none;
}

body.page-dashboard .hero-search-btn.hero-action-secondary:hover {
    background: var(--ui-soft);
}

body.page-dashboard .stats-grid-modern {
    gap: 12px;
    margin-bottom: 19px;
}

body.page-dashboard .stat-card-modern {
    min-height: 80px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard .stat-card-modern::before,
body.page-dashboard .stat-card-modern::after {
    display: none;
}

body.page-dashboard .stat-card-modern:hover {
    border-color: var(--ui-border-strong);
    box-shadow: 0 10px 24px rgba(45, 39, 33, 0.07);
    transform: translateY(-1px);
}

body.page-dashboard .stat-card-inner {
    min-height: 80px;
    padding: 14px 16px;
    gap: 12px;
}

body.page-dashboard .stat-icon-modern {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: var(--ui-warm);
    background: var(--ui-soft-warm);
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    box-shadow: none;
}

body.page-dashboard .stat-info .stat-icon-modern {
    color: #53778c;
    background: #edf3f5;
    border-color: #dbe7eb;
}

body.page-dashboard .stat-warning .stat-icon-modern {
    color: var(--ui-amber);
    background: var(--ui-amber-soft);
    border-color: #ebddbd;
}

body.page-dashboard .stat-success .stat-icon-modern {
    color: var(--ui-green);
    background: var(--ui-green-soft);
    border-color: #d1e4d9;
}

body.page-dashboard .stat-icon-modern svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

body.page-dashboard .stat-value-modern {
    color: var(--ui-ink);
    font-size: 19px;
    font-weight: 740;
    letter-spacing: -0.025em;
}

body.page-dashboard .stat-label-modern {
    color: var(--ui-muted);
    font-size: 10px;
}

body.page-dashboard .section-title {
    margin: 0 0 10px;
    padding-inline: 2px;
    color: var(--ui-ink);
    font-size: 13px;
    font-weight: 710;
}

body.page-dashboard .section-title > span::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    vertical-align: 2px;
    content: "";
    background: var(--ui-warm);
    border-radius: 2px;
}

body.page-dashboard .view-all-link {
    color: var(--ui-ink-soft);
    font-size: 10px;
}

body.page-dashboard .refresh-btn {
    position: relative;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    color: var(--ui-muted);
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    font-size: 0;
}

body.page-dashboard .refresh-btn::before {
    width: 13px;
    height: 13px;
    content: "";
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-1M18 16a7 7 0 0 1-12 1'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-1M18 16a7 7 0 0 1-12 1'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.page-dashboard .subscription-lines-container {
    min-height: 102px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard .subscription-status-mini {
    border-right-color: var(--ui-border);
}

body.page-dashboard .status-badge-mini {
    background: var(--ui-soft);
    border-color: var(--ui-border);
    border-radius: 10px;
}

body.page-dashboard .status-badge-mini .badge-icon {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 0;
}

body.page-dashboard .status-badge-mini .badge-icon::before {
    position: absolute;
    inset: 10px;
    content: "";
    background: var(--ui-warm);
    border-radius: 50%;
}

body.page-dashboard .badge-title {
    color: var(--ui-ink-soft);
}

body.page-dashboard .badge-desc,
body.page-dashboard .badge-desc a {
    color: var(--ui-muted);
}

body.page-dashboard .server-lines-compact {
    color: var(--ui-muted);
}

body.page-dashboard .invite-banner-modern {
    margin-top: 17px;
    padding: 20px 23px;
    color: var(--ui-ink);
    background: var(--ui-soft-warm);
    border: 1px solid #e1e8f2;
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard .invite-bg-pattern {
    display: none;
}

body.page-dashboard .invite-icon-big {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
    font-size: 0;
}

body.page-dashboard .invite-icon-big::before {
    width: 19px;
    height: 19px;
    content: "";
    background: var(--ui-warm);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M4 10h16v11H4zM12 10v11M3 6h18v4H3zM12 6c-3 0-5-1-5-3 3 0 5 3 5 3Zm0 0c3 0 5-1 5-3-3 0-5 3-5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M4 10h16v11H4zM12 10v11M3 6h18v4H3zM12 6c-3 0-5-1-5-3 3 0 5 3 5 3Zm0 0c3 0 5-1 5-3-3 0-5 3-5 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.page-dashboard .invite-info h3 {
    color: var(--ui-ink);
    font-size: 14px;
}

body.page-dashboard .invite-info p {
    color: var(--ui-ink-soft);
    font-size: 11px;
}

body.page-dashboard .invite-info strong {
    color: var(--ui-warm);
    background: #fff;
}

body.page-dashboard .invite-action-btn {
    min-height: 40px;
    padding: 9px 17px;
    color: #fff;
    background: var(--ui-primary);
    border: 1px solid var(--ui-primary);
    border-radius: 9px;
    box-shadow: none;
    font-size: 12px;
}

body.page-dashboard .invite-action-btn:hover {
    background: var(--ui-primary-hover);
    box-shadow: none;
    transform: translateY(-1px);
}

/* 其他用户页面的公共层级 */
body.page-dashboard .content-section > .section-header {


    background: transparent;

    border-radius: 0;
}





body.page-dashboard :is(.stats-cards .stat-card, .search-box, .request-card, .request-item, .order-card, .profile-card, .profile-section, .activity-logs-container, .playback-card, .subscription-card, .invite-card, .faq-item, .docs-card, .support-card, .ticket-card, .redeem-card, .tab-container) {
    background: #fff;
    border-color: var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard :is(.stats-cards .stat-card, .request-card, .request-item, .order-card, .profile-card, .playback-card, .subscription-card, .invite-card):hover {
    border-color: var(--ui-border-strong);
    box-shadow: 0 9px 22px rgba(45, 39, 33, 0.06);
    transform: translateY(-1px);
}

body.page-dashboard :is(input, select, textarea) {
    color: var(--ui-ink);
    background: #fff;
    border-color: var(--ui-border-strong);
    border-radius: 9px;
}

body.page-dashboard :is(input, select, textarea):focus {
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(43, 40, 37, 0.08);
}

body.page-dashboard :is(.tabs, .filter-tabs, .request-tabs, .playback-tabs) {
    background: var(--ui-soft);
    border-color: var(--ui-border);
}

body.page-dashboard :is(.tab-button, .filter-tab, .request-tab, .playback-tab).active {
    color: var(--ui-ink);
    background: #fff;
    border-color: transparent;
    box-shadow: 0 2px 7px rgba(45, 39, 33, 0.07);
}

body.page-dashboard :is(.submit-btn, .primary-btn, .search-box button, .redeem-btn, .order-btn.primary, .ticket-submit-btn, .save-btn) {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    box-shadow: none;
}

body.page-dashboard :is(.submit-btn, .primary-btn, .search-box button, .redeem-btn, .order-btn.primary, .ticket-submit-btn, .save-btn):hover {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
    box-shadow: none;
}

/* 登录页：品牌信息与表单形成双栏，而不是悬空的单卡片 */
body.page-login {
    --primary: #202020;
    --primary-light: #555;
    --primary-dark: #000;
    --neutral-accent: #555;
    --login-ink: #0c1628;
    --login-muted: #6d809d;

    --login-soft: #f1f5fa;
    --login-border: #e1e8f2;

    background: #f7f9fd;
}

body.page-login .header {
    width: min(calc(100% - 48px), 1180px);
    min-height: 68px;
    margin: 14px auto 0;
    padding: 10px 4px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.page-login .logo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
}

body.page-login .logo-icon {
    grid-row: 1 / 3;
}

body.page-login .logo-name {
    color: var(--login-ink);
    font-size: 16px;
    font-weight: 760;
    letter-spacing: -0.02em;
}

body.page-login .logo-tagline {
    color: var(--login-muted);
    font-size: 10px;
    font-weight: 500;
}

body.page-login .nav-links a {
    color: #34445d;
    background: transparent;
    border-radius: 8px;
}

body.page-login .nav-links a:hover {
    color: var(--login-ink);
    background: #e1e8f2;
}



body.page-login .login-intro {
    max-width: 560px;
}

body.page-login .intro-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--login-warm);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.18em;
}

body.page-login .login-intro h1 {
    margin: 0;
    color: var(--login-ink);




}

body.page-login .login-intro h1 em {
    color: var(--login-warm);
    font-style: normal;
}

body.page-login .login-intro > p {
    max-width: 450px;
    margin: 22px 0 28px;
    color: var(--login-muted);
    font-size: 14px;
    line-height: 1.8;
}

body.page-login .intro-features {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

body.page-login .intro-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;

    background: #fff;
    border: 1px solid var(--login-border);

    font-size: 11px;
}

body.page-login .intro-features span::before {
    width: 5px;
    height: 5px;
    content: "";
    background: var(--login-warm);
    border-radius: 50%;
}

body.page-login .login-container {
    width: 100%;
    max-width: 430px;
    padding: 36px;
    background: #fff;
    border: 1px solid var(--login-border);
    border-radius: 16px;
    box-shadow: 0 22px 65px rgba(47, 40, 34, 0.08);
}

body.page-login .welcome-text {
    margin-bottom: 27px;
    text-align: left;
}

body.page-login .welcome-title {
    color: var(--login-ink);
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -0.03em;
}

body.page-login .welcome-subtitle {
    margin-top: 6px;
    color: var(--login-muted);
    font-size: 12px;
    line-height: 1.6;
}

body.page-login .form-label {
    color: #34445d;
    font-size: 11px;
    font-weight: 650;
}

body.page-login .form-input {
    min-height: 45px;
    color: var(--login-ink);
    background: #f7f9fd;
    border-color: var(--login-border);
    border-radius: 9px;
}

body.page-login .form-input:focus {
    background: #fff;
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(43, 40, 37, 0.08);
}

body.page-login .submit-btn {
    min-height: 46px;
    color: #fff;
    background: #0c1628;
    border-radius: 9px;
    box-shadow: 0 7px 17px rgba(37, 35, 33, 0.15);
}

body.page-login .submit-btn:hover {
    background: #11100f;
    box-shadow: 0 10px 22px rgba(37, 35, 33, 0.2);
}

body.page-login :is(.forgot-password-link, .register-link) a {
    color: var(--login-warm) !important;
}

@media (max-width: 1024px) {
    body.page-dashboard .main-content {
        margin-left: 0;
    }

    body.page-dashboard .sidebar {
        width: min(276px, 86vw);
    }


}

@media (max-width: 768px) {
    body.page-dashboard .mobile-header {
        height: 56px;
        color: var(--ui-ink);
        background: rgba(250, 248, 245, 0.95);
        border-bottom-color: var(--ui-border);
        box-shadow: none;
    }

    body.page-dashboard .main-content {
        padding: 72px 13px 34px;
    }

    body.page-dashboard .dashboard-hero {
        padding: 17px;
    }

    body.page-dashboard .hero-content-main {
        align-items: stretch;
        text-align: left;
    }

    body.page-dashboard .hero-greeting {
        flex-direction: row;
        align-items: center;
    }

    body.page-dashboard .hero-actions {
        display: grid;

    }

    body.page-dashboard .hero-search-btn {
        width: 100%;
    }

    body.page-dashboard .stats-grid-modern {

        gap: 8px;
    }

    body.page-dashboard .stat-card-inner {
        padding: 12px;
    }

    body.page-dashboard .stat-value-modern {
        font-size: 17px;
    }

    body.page-dashboard .subscription-lines-container {
        border-radius: 12px;
    }

    body.page-dashboard .invite-content-wrapper {
        align-items: center;
        text-align: left;
    }

    body.page-login .header {
        width: calc(100% - 28px);
        min-height: 58px;
        margin-top: 6px;
        padding-inline: 0;
    }

    body.page-login-auth .main-content {

        width: 100%;
        min-height: calc(100vh - 64px);
        padding: 26px 14px 42px;
        align-items: center;
        justify-content: center;
    }



    body.page-login .login-container {
        max-width: 440px;
        padding: 28px 24px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .main-content {
        padding: 64px 10px 28px;
    }

    body.page-dashboard .greeting-emoji {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    body.page-dashboard .greeting-text h1 {
        font-size: 18px;
    }

    body.page-dashboard .stats-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard .stat-icon-modern {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    body.page-dashboard .stat-value-modern {
        font-size: 15px;
    }

    body.page-dashboard .stat-label-modern {
        font-size: 9px;
    }

    body.page-dashboard .invite-banner-modern {
        padding: 16px;
    }

    body.page-dashboard .invite-content-wrapper {
        align-items: stretch;
        text-align: center;
    }

    body.page-dashboard .invite-icon-big {
        margin-inline: auto;
    }

    body.page-login .logo-tagline {
        display: none;
    }

    body.page-login .login-container {
        padding: 25px 19px;
    }
}

/* v3 子页面统一：订阅、搜索、购买 */
body.page-dashboard .content-section > .section-header {
    border: 0;

    box-shadow: none;
}

body.page-dashboard #section-search .stats-cards {
    gap: 10px;
}

body.page-dashboard #section-search .stats-cards .stat-card {
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    text-align: left;
}

body.page-dashboard #section-search .stats-cards .stat-card::before,
body.page-dashboard #section-search .stats-cards .stat-card::after {
    display: none;
}

body.page-dashboard #section-search .stats-cards .stat-icon {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin: 0;
    background: var(--ui-soft-warm);
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    font-size: 0;
}

body.page-dashboard #section-search .stats-cards .stat-icon::before {
    position: absolute;
    inset: 13px;
    content: "";
    background: var(--ui-warm);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(185, 111, 69, 0.11);
}

body.page-dashboard #section-search .stats-cards .stat-card:nth-child(2) .stat-icon {
    background: var(--ui-amber-soft);
    border-color: #ebddbd;
}

body.page-dashboard #section-search .stats-cards .stat-card:nth-child(2) .stat-icon::before {
    background: var(--ui-amber);
    box-shadow: 0 0 0 5px rgba(174, 122, 38, 0.11);
}

body.page-dashboard #section-search .stats-cards .stat-card:nth-child(3) .stat-icon,
body.page-dashboard #section-search .stats-cards .stat-card:nth-child(4) .stat-icon {
    background: var(--ui-green-soft);
    border-color: #d1e4d9;
}

body.page-dashboard #section-search .stats-cards .stat-card:nth-child(3) .stat-icon::before,
body.page-dashboard #section-search .stats-cards .stat-card:nth-child(4) .stat-icon::before {
    background: var(--ui-green);
    box-shadow: 0 0 0 5px rgba(79, 128, 106, 0.11);
}

body.page-dashboard #section-search .stats-cards .stat-content {
    width: auto;
    text-align: left;
}

body.page-dashboard #section-search .stats-cards .stat-value {
    color: var(--ui-ink);
    font-size: 20px;
}

body.page-dashboard #section-search .stats-cards .stat-label {
    color: var(--ui-muted);
    font-size: 10px;
}







body.page-dashboard #section-subscription {
    --sub-accent: var(--ui-warm);
    --sub-accent-soft: var(--ui-warm-soft);
    --sub-text: var(--ui-ink);
    --sub-muted: var(--ui-muted);
    --sub-border: var(--ui-border);
    --sub-surface: var(--ui-soft);
}









body.page-dashboard #section-subscription .subscription-hero-card {

    background: var(--ui-soft-warm);



}

body.page-dashboard #section-subscription .hero-badge {

    background: #fff;


}

body.page-dashboard #section-subscription .hero-badge .badge-icon {
    position: relative;
    width: 10px;
    height: 10px;
    background: var(--ui-warm);
    border-radius: 50%;
    font-size: 0;
}

body.page-dashboard #section-subscription .hero-title h2,
body.page-dashboard #section-subscription .detail-value,
body.page-dashboard #section-subscription .countdown-days,
body.page-dashboard #section-subscription .history-header h3 {
    color: var(--ui-ink);
}

body.page-dashboard #section-subscription :is(.hero-level, .hero-subtitle, .detail-label, .countdown-label) {
    color: var(--ui-muted);
}

body.page-dashboard #section-subscription .countdown-bg {
    stroke: #eaf3ff;
}

body.page-dashboard #section-subscription .countdown-progress {
    stroke: var(--ui-warm);
}





body.page-dashboard #section-subscription .detail-icon {
    position: relative;
    width: 30px;
    height: 30px;
    background: var(--ui-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 0;
}

body.page-dashboard #section-subscription .detail-icon::before {
    position: absolute;
    inset: 11px;

    background: var(--ui-warm);
    border-radius: 50%;
}



body.page-dashboard #section-subscription .sub-action-btn.primary,
body.page-dashboard #section-subscription .sub-action-btn.primary:hover {
    color: #fff;
    background: var(--ui-primary);
    border: 1px solid var(--ui-primary);
    box-shadow: none;
}

body.page-dashboard #section-subscription .sub-action-btn.secondary,
body.page-dashboard #section-subscription .sub-action-btn.secondary:hover {
    color: var(--ui-ink);
    background: #fff;
    border: 1px solid var(--ui-border);
    box-shadow: none;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-icon {
    position: relative;


    background: rgba(255, 255, 255, 0.12);


    font-size: 0;
}

body.page-dashboard #section-subscription .sub-action-btn.secondary .btn-icon {
    background: var(--ui-soft);
    border-color: var(--ui-border);
}

body.page-dashboard #section-subscription .sub-action-btn .btn-icon::before {
    display: none;
    content: none;
}

body.page-dashboard #section-subscription .subscription-history-section {

    background: #fff;
    border: 1px solid var(--ui-border);


}

body.page-dashboard #section-subscription .history-count {

    background: var(--ui-soft);
    border-color: var(--ui-border);
}

body.page-dashboard #section-subscription .history-empty .empty-icon {
    filter: grayscale(1);
    opacity: 0.55;
}

body.page-dashboard #section-purchase {
    --plan-primary: var(--ui-primary);
    --plan-primary-soft: var(--ui-soft-warm);
    --plan-border: var(--ui-border);
    --plan-text: var(--ui-ink);
    --plan-muted: var(--ui-muted);
}

body.page-dashboard #section-purchase :is(.redeem-card, .my-orders-section, .purchase-tips) {
    background: #fff;
    border-color: var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard #section-purchase .redeem-card {
    background: var(--ui-soft-warm);

}

body.page-dashboard #section-purchase .redeem-card-icon {
    filter: grayscale(1);
}

body.page-dashboard #section-purchase .redeem-btn,
body.page-dashboard #section-purchase .plan-buy-btn {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    box-shadow: none;
}

body.page-dashboard #section-purchase .plan-card-new {
    background: #fff;
    border-color: var(--ui-border);
    border-radius: 14px;
    box-shadow: none;
}

body.page-dashboard #section-purchase .plan-card-new:hover,
body.page-dashboard #section-purchase .plan-card-new.popular {
    border-color: var(--ui-border-strong);
    box-shadow: 0 10px 24px rgba(45, 39, 33, 0.07);
}

@media (max-width: 768px) {
    body.page-dashboard #section-search .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-subscription .subscription-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* v3 我的信息页 */


body.page-dashboard #section-profile .user-profile-card {
    grid-column: 1 / -1;
    margin: 0;

    color: var(--ui-ink);
    background: var(--ui-soft-warm);
    border: 1px solid #e1e8f2;
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard #section-profile .user-avatar-lg {



    background: var(--ui-primary);


    font-size: 24px;
}

body.page-dashboard #section-profile .user-display-name {
    margin-bottom: 7px;


    text-shadow: none;
}

body.page-dashboard #section-profile .user-badge {


    background: #fff;



    backdrop-filter: none;
}

body.page-dashboard #section-profile .user-badge.badge-sub,
body.page-dashboard #section-profile .user-badge.badge-vip {
    color: var(--ui-green);
    background: var(--ui-green-soft);
    border-color: #d1e4d9;
}

body.page-dashboard #section-profile .user-badge.badge-warning {
    color: var(--ui-amber);
    background: var(--ui-amber-soft);
    border-color: #ebddbd;
}

body.page-dashboard #section-profile .user-delete-btn,
body.page-dashboard #section-profile .user-delete-btn:hover {
    min-width: 94px;
    color: var(--ui-red);
    background: var(--ui-red-soft) !important;
    border: 1px solid #eccbc8;
    box-shadow: none;
}



body.page-dashboard #section-profile .stats-section-v2 {
    margin: 0;

    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard #section-profile .section-title-v2 {
    margin-bottom: 13px;


}

body.page-dashboard #section-profile .title-icon--stats,
body.page-dashboard #section-profile .library-icon {
    width: 28px;
    height: 28px;
    color: var(--ui-warm);
    background: var(--ui-soft-warm);
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-profile :is(.title-icon--stats, .library-icon) svg {


    stroke: currentColor;
}



body.page-dashboard #section-profile .stat-item-v2 {
    min-width: 0;
    padding: 11px;
    gap: 8px;
    background: var(--ui-soft);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: none;
}

body.page-dashboard #section-profile .stat-item-v2:hover {
    border-color: var(--ui-border-strong);
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-profile .stat-icon-v2,
body.page-dashboard #section-profile .library-stat-icon {
    position: relative;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-size: 0;
}

body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon)::before {
    position: absolute;
    inset: 10px;
    content: "";
    background: var(--ui-warm);
    border-radius: 50%;
}

body.page-dashboard #section-profile .stat-num,
body.page-dashboard #section-profile .library-stat-value {
    color: var(--ui-ink);
    font-size: 18px;
}

body.page-dashboard #section-profile .stat-text,
body.page-dashboard #section-profile .library-stat-label {
    color: var(--ui-muted);
    font-size: 9px;
}

body.page-dashboard #section-profile .library-stats-card {
    background: var(--ui-soft);


}

body.page-dashboard #section-profile .library-stats-card[hidden],
body.page-dashboard #section-search .search-metric[hidden] {
    display: none !important;
}

body.page-dashboard #section-profile .library-stats-header {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom-color: var(--ui-border);
}



body.page-dashboard #section-profile .library-total {
    color: var(--ui-ink-soft);
    background: #fff;
    border-color: var(--ui-border);
    font-size: 9px;
}

body.page-dashboard #section-profile .library-stats-grid {
    gap: 7px;
}

body.page-dashboard #section-profile .library-stat-item {
    min-width: 0;
    padding: 9px;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    box-shadow: none;
}

body.page-dashboard #section-profile .feature-cards-v2 {
    display: contents;
}

body.page-dashboard #section-profile .feature-card-v2 {
    background: #fff;
    border: 1px solid var(--ui-border);


}

body.page-dashboard #section-profile .feature-card-header-v2 {


    background: var(--ui-soft);

}

body.page-dashboard #section-profile .feature-icon-v2 {
    position: relative;


    flex: 0 0 24px;
    background: #fff;


    font-size: 0;
}

body.page-dashboard #section-profile .feature-icon-v2::before {
    position: absolute;
    inset: 8px;
    content: "";
    background: var(--ui-warm);
    border-radius: 50%;
}







body.page-dashboard #section-profile :is(.emby-bindtip, .password-notice-v2, .emby-info-row, .emby-meta-item) {
    color: var(--ui-ink-soft);
    background: var(--ui-soft);
    border-color: var(--ui-border);
    border-radius: 9px;
}



body.page-dashboard #section-profile .password-notice-v2 > span {
    display: none;
}



body.page-dashboard #section-profile .input-group-v2 input {



    border-color: var(--ui-border-strong);

}

body.page-dashboard #section-profile .btn-v2.btn-primary-v2,
body.page-dashboard #section-profile .btn-v2.btn-primary-v2:hover {
    color: #fff;
    background: var(--ui-primary);
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-profile .btn-v2.btn-secondary-v2,
body.page-dashboard #section-profile .btn-v2.btn-secondary-v2:hover {
    color: var(--ui-ink-soft);
    background: var(--ui-soft);
    border-color: var(--ui-border);
    box-shadow: none;
    transform: none;
}

/* v3 播放监控页 */
body.page-dashboard #section-playback .playback-stat-card,
body.page-dashboard #section-playback .playback-section {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: 13px;
    box-shadow: none;
}

body.page-dashboard #section-playback .playback-stat-card::after {
    display: none;
}

body.page-dashboard #section-playback .playback-stat-card .stat-icon {
    color: var(--ui-warm);
    background: var(--ui-soft-warm);
    border-color: #e1e8f2;
    border-radius: 10px;
}

body.page-dashboard #section-playback .playback-stat-card.stat-online .stat-icon {
    color: var(--ui-green);
    background: var(--ui-green-soft);
    border-color: #d1e4d9;
}

body.page-dashboard #section-playback .playback-stat-card.stat-history .stat-icon {
    color: var(--ui-amber);
    background: var(--ui-amber-soft);
    border-color: #ebddbd;
}

body.page-dashboard #section-playback .playback-section-header h3 {
    color: var(--ui-ink);
    font-size: 14px;
}

body.page-dashboard #section-playback .playback-section-subtitle,
body.page-dashboard #section-playback .stat-subtext {
    color: var(--ui-muted);
}

body.page-dashboard #section-playback :is(.playback-auto-btn, .playback-update-time, .playback-live-pill, .device-count-badge) {
    border-color: var(--ui-border);
    border-radius: 8px;
}

@media (max-width: 900px) {
    body.page-dashboard #section-profile .profile-page-v2 {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-profile .user-profile-card {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    body.page-dashboard #section-profile .user-profile-header {
        flex-direction: column;
        align-items: stretch;
    }

    body.page-dashboard #section-profile .user-profile-actions {
        width: 100%;
        align-items: stretch;
    }

    body.page-dashboard #section-profile .user-delete-btn {
        width: 100%;
    }

    body.page-dashboard #section-profile .user-delete-hint {
        text-align: center;
    }

    body.page-dashboard #section-profile .stats-row,
    body.page-dashboard #section-profile .library-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-profile .user-profile-header {
        align-items: flex-start;
    }

    body.page-dashboard #section-profile .user-profile-actions {
        display: flex;
    }

    body.page-dashboard #section-profile .stats-row,
    body.page-dashboard #section-profile .library-stats-grid {
        grid-template-columns: 1fr;
    }
}

@layer legacy {

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    min-height: 100vh;
    color: #1a1a1a;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

/* Toast */
.toast {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 90%;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    color: #1a1a1a;
    word-wrap: break-word;
}

.toast-message {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    word-wrap: break-word;
}

.toast.success {
    border-left: 4px solid #00b894;
}

.toast.error {
    border-left: 4px solid #e17055;
}

.toast.info {
    border-left: 4px solid #3b82f6;
}

.toast.warning {
    border-left: 4px solid #f39c12;
}

/* Toast 移动端适配 */
@media (max-width: 768px) {
    .toast {
        min-width: 260px;
        max-width: calc(100% - 32px);
        padding: 14px 20px;
        border-radius: 10px;
    }

    .toast-icon {
        font-size: 22px;
    }

    .toast-title {
        font-size: 14px;
    }

    .toast-message {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .toast {
        min-width: auto;
        max-width: calc(100% - 24px);
        padding: 12px 16px;
        gap: 10px;
    }

    .toast-icon {
        font-size: 20px;
    }

    .toast-title {
        font-size: 13px;
    }

    .toast-message {
        font-size: 11px;
    }
}

/* ==================== 全局确认弹窗样式 ==================== */
.global-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    padding: 20px;
}

.global-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}

.global-confirm-dialog {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: all 0.2s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.global-confirm-overlay.show .global-confirm-dialog {
    transform: scale(1) translateY(0);
}

.global-confirm-icon {
    font-size: 48px;
    margin-bottom: 16px;
    line-height: 1;
}

.global-confirm-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    word-wrap: break-word;
}

.global-confirm-message {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 24px;
    word-break: break-word;
    overflow-y: auto;
    max-height: 100%;
    flex: 1;
    min-height: 0;
    text-align: left;
}

.global-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-shrink: 0;
}

.global-confirm-btn {
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
    -webkit-tap-highlight-color: transparent;
}

.global-confirm-btn.cancel {
    background: #f1f5f9;
    color: #64748b;
}

.global-confirm-btn.cancel:hover {
    background: #e2e8f0;
    color: #475569;
}

.global-confirm-btn.cancel:active {
    transform: scale(0.98);
}

.global-confirm-btn.confirm {
    background: #333333;
    color: white;
}

.global-confirm-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.4);
}

.global-confirm-btn.confirm:active {
    transform: translateY(0);
}

.global-confirm-btn.confirm.danger {
    background: #ef4444;
}

.global-confirm-btn.confirm.danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.global-confirm-btn.confirm.warning {
    background: #f59e0b;
}

.global-confirm-btn.confirm.warning:hover {
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.global-confirm-btn.confirm.info {
    background: #3b82f6;
}

.global-confirm-btn.confirm.info:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Prompt 输入框样式 */
.global-prompt-input {
    width: 100%;
    padding: 12px 14px;
    margin: 10px 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.global-prompt-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    background: #fff;
}

.global-prompt-input::placeholder {
    color: #94a3b8;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .global-confirm-overlay {
        padding: 16px;
    }

    .global-confirm-dialog {
        padding: 28px 24px;
    }

    .global-confirm-icon {
        font-size: 44px;
    }

    .global-confirm-title {
        font-size: 18px;
    }

    .global-confirm-message {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .global-confirm-btn {
        padding: 12px 24px;
        min-width: 90px;
    }
}

@media (max-width: 480px) {
    .global-confirm-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .global-confirm-dialog {
        padding: 24px 20px;
        margin: 0;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    .global-confirm-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .global-confirm-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .global-confirm-message {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .global-confirm-buttons {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .global-confirm-btn {
        width: 100%;
        min-width: auto;
        padding: 14px 20px;
        font-size: 15px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .global-confirm-btn.confirm:hover,
    .global-confirm-btn.cancel:hover {
        transform: none;
        box-shadow: none;
    }

    .global-confirm-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s;
    }

    .global-confirm-btn {
        min-height: 44px;
    }

    /* 消除点击延迟 */
    .global-confirm-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* iOS 安全区域增强 */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 480px) {
        .global-confirm-dialog {
            padding-bottom: calc(24px + env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================
   用户中心样式（限定到 page-dashboard）
   ============================================================ */
/* ============================================
   封禁警告横幅
   ============================================ */
body.page-dashboard .banned-alert{
    background: #ef4444;
    color: white;
    padding: 20px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
    animation: shake 0.5s ease-in-out;
}

body.page-dashboard .banned-alert-icon{
    font-size: 40px;
    flex-shrink: 0;
}

body.page-dashboard .banned-alert-content h3{
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

body.page-dashboard .banned-alert-content p{
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ============================================
   顶部 Toast 消息提示
   ============================================ */
body.page-dashboard .toast-message{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #10b981;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

body.page-dashboard .toast-message.show{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

body.page-dashboard .toast-message .toast-icon{
    font-size: 18px;
    font-weight: bold;
}

body.page-dashboard .toast-message .toast-text{
    white-space: nowrap;
}

/* Toast 类型样式 */
body.page-dashboard .toast-success{
    background: #10b981;
}

body.page-dashboard .toast-error{
    background: #ef4444;
}

body.page-dashboard .toast-warning{
    background: #f59e0b;
}

/* ============================================
   修改密码区域
   ============================================ */
body.page-dashboard .password-change-section{
    margin-top: 32px;
    padding: 24px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 16px;
}

body.page-dashboard .password-change-section h3{
    color: #0369a1;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

body.page-dashboard .password-notice{
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    border-left: 4px solid #f59e0b;
}

body.page-dashboard .password-notice .notice-icon{
    font-size: 20px;
    flex-shrink: 0;
}

body.page-dashboard .password-notice .notice-text{
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.5;
}

body.page-dashboard .password-notice .notice-text strong{
    color: #3b82f6;
}

body.page-dashboard .password-change-card{
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e5e5;
}

body.page-dashboard .password-change-card .form-group{
    margin-bottom: 20px;
}

body.page-dashboard .password-change-card .form-group:last-of-type{
    margin-bottom: 24px;
}

body.page-dashboard .password-change-card label{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

body.page-dashboard .password-input-wrapper{
    position: relative;
    display: flex;
    align-items: center;
}

body.page-dashboard .password-input-wrapper input{
    width: 100%;
    padding: 12px 48px 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f9fafb;
}

body.page-dashboard .password-input-wrapper input:focus{
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(32, 32, 32, 0.1);
}

body.page-dashboard .password-input-wrapper input::placeholder{
    color: #9ca3af;
}

body.page-dashboard .toggle-password-btn{
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 18px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

body.page-dashboard .toggle-password-btn:hover{
    opacity: 1;
}

body.page-dashboard .form-actions{
    display: flex;
    justify-content: flex-end;
}

body.page-dashboard .btn-change-password{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

body.page-dashboard .btn-change-password:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(32, 32, 32, 0.5);
}

body.page-dashboard .btn-change-password:disabled{
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}



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

/* ============================================
   危险操作区域
   ============================================ */
body.page-dashboard .danger-zone{
    margin-top: 40px;
    padding: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
}

body.page-dashboard .danger-zone h3{
    color: #dc2626;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
}

body.page-dashboard .danger-zone-content{
    background: white;
    border-radius: 8px;
    overflow: hidden;
}

body.page-dashboard .danger-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #fee2e2;
}

body.page-dashboard .danger-item:last-child{
    border-bottom: none;
}

body.page-dashboard .danger-info{
    flex: 1;
}

body.page-dashboard .danger-title{
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 4px;
}

body.page-dashboard .danger-desc{
    font-size: 13px;
    color: #6b7280;
}

body.page-dashboard .danger-btn{
    background: white;
    color: #dc2626;
    border: 1px solid #dc2626;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .danger-btn:hover{
    background: #dc2626;
    color: white;
}

/* 删除确认弹窗 */
body.page-dashboard .delete-confirm-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

body.page-dashboard .delete-confirm-overlay.show{
    opacity: 1;
    visibility: visible;
}

body.page-dashboard .delete-confirm-dialog{
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s;
}

body.page-dashboard .delete-confirm-overlay.show .delete-confirm-dialog{
    transform: scale(1);
}

body.page-dashboard .delete-confirm-icon{
    font-size: 48px;
    margin-bottom: 16px;
}

body.page-dashboard .delete-confirm-title{
    font-size: 20px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 12px;
}

body.page-dashboard .delete-confirm-text{
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

body.page-dashboard .delete-confirm-input{
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

body.page-dashboard .delete-confirm-input:focus{
    outline: none;
    border-color: #dc2626;
}

body.page-dashboard .delete-confirm-buttons{
    display: flex;
    gap: 12px;
}

body.page-dashboard .delete-confirm-buttons button{
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .delete-cancel-btn{
    background: #f3f4f6;
    color: #374151;
    border: none;
}

body.page-dashboard .delete-cancel-btn:hover{
    background: #e5e7eb;
}

body.page-dashboard .delete-confirm-btn{
    background: #dc2626;
    color: white;
    border: none;
}

body.page-dashboard .delete-confirm-btn:hover{
    background: #b91c1c;
}

body.page-dashboard .delete-confirm-btn:disabled{
    background: #9ca3af;
    cursor: not-allowed;
}

body.page-dashboard .toast-info{
    background: #3b82f6;
}

/* ============================================
   左侧边栏布局
   ============================================ */

/* ============================================
   Dashboard 主页样式 - 全新现代设计
   ============================================ */

/* 欢迎横幅 */
body.page-dashboard .dashboard-hero{
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.page-dashboard .dashboard-hero::before{
    display: none;
}

body.page-dashboard .hero-content-main{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

body.page-dashboard .hero-greeting{
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-dashboard .greeting-emoji{
    font-size: 40px;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-10deg); }
}

body.page-dashboard .greeting-text h1{
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}

body.page-dashboard .user-name-highlight{
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    padding: 1px 8px;
    border-radius: 8px;
}

body.page-dashboard .greeting-time{
    font-size: 13px;
    color: #4a4a4a;
}

body.page-dashboard .dashboard-hero-refined{
    background: #ffffff;
    border-color: #dbe7ff;
}

body.page-dashboard .hero-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.page-dashboard .dashboard-hero-refined .hero-search-btn{
    border: 1px solid transparent;
}

body.page-dashboard .hero-action-secondary{
    background: #ffffff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.16);
}

body.page-dashboard .hero-action-secondary:hover{
    background: #eff6ff;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2);
}

body.page-dashboard .dashboard-kpi-refined .stat-card-modern{
    border-color: #dbe4f4;
    background: #ffffff;
    border-radius: 16px;
}

body.page-dashboard .dashboard-kpi-refined .stat-card-modern:hover{
    border-color: #bfdbfe;
}

body.page-dashboard .dashboard-kpi-refined .stat-card-inner{
    padding: 16px 18px;
    gap: 12px;
}

body.page-dashboard .dashboard-kpi-refined .stat-icon-modern{
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

body.page-dashboard .dashboard-kpi-refined .stat-icon-modern svg{
    width: 22px;
    height: 22px;
}

body.page-dashboard .dashboard-kpi-refined .stat-value-modern{
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.08;
}

body.page-dashboard .dashboard-kpi-refined .stat-label-modern{
    font-size: 12px;
    font-weight: 450;
    color: #64748b;
}

/* ==================== 系统公告区域样式 ==================== */
body.page-dashboard .announcements-container{
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 公告置顶样式 */
body.page-dashboard .announcements-container.announcements-top{
    margin-bottom: 24px;
    border: 1px solid #333333;
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.15);
}

body.page-dashboard .announcements-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    gap: 12px;
}

body.page-dashboard .announcements-title{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-dashboard .announcements-title-icon{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: #202020;
    fill: currentColor;
}

/* 公告切换控制 */
body.page-dashboard .announcements-controls{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}

body.page-dashboard .announcement-nav-btn{
    width: 28px;
    height: 28px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #4a4a4a;
}

body.page-dashboard .announcement-nav-btn:hover{
    background: #333333;
    border-color: #333333;
    color: white;
}

body.page-dashboard .announcement-indicator{
    font-size: 13px;
    color: #666;
    min-width: 36px;
    text-align: center;
    font-weight: 500;
}

body.page-dashboard .announcements-toggle{
    padding: 6px 14px;
    border: 1px solid #d0d0d0;
    background: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    color: #4a4a4a;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .announcements-toggle:hover{
    background: #f0f0f0;
    border-color: #999;
}

body.page-dashboard .announcements-list{
    padding: 16px;
    position: relative;
    min-height: 80px;
}

/* 公告轮播样式 */
body.page-dashboard .announcement-item{
    padding: 14px 16px;
    border-radius: 12px;
    border-left: 0;
    display: none;
    animation: fadeIn 0.3s ease;
}

body.page-dashboard .announcement-item.active{
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

body.page-dashboard .announcement-item.announcement-info{
    background: #ffffff;
}

body.page-dashboard .announcement-item.announcement-warning{
    background: #ffffff;
}

body.page-dashboard .announcement-item.announcement-success{
    background: #ffffff;
}

body.page-dashboard .announcement-item.announcement-error{
    background: #ffffff;
}

body.page-dashboard .announcement-item-header{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

body.page-dashboard .announcement-icon{
    font-size: 16px;
}

body.page-dashboard .announcement-item-title{
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-dashboard .pinned-badge{
    font-size: 12px;
    color: #f59e0b;
    background: #f7f9fd;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #fde68a;
}

body.page-dashboard .announcement-time{
    font-size: 12px;
    color: #888;
    margin-left: auto;
}

body.page-dashboard .announcement-item-content{
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
    white-space: pre-wrap;
}

body.page-dashboard .hero-search-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: white;
    padding: 11px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

body.page-dashboard .hero-search-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .hero-search-btn .btn-icon{
    font-size: 17px;
}

/* 现代统计卡片网格 */
body.page-dashboard .stats-grid-modern{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

body.page-dashboard .stat-card-modern{
    background: white;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
}

body.page-dashboard .stat-card-modern:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .stat-card-inner{
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}

body.page-dashboard .stat-icon-modern{
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .stat-icon-modern svg{
    width: 26px;
    height: 26px;
}

body.page-dashboard .stat-card-modern.stat-primary .stat-icon-modern{
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

body.page-dashboard .stat-card-modern.stat-warning .stat-icon-modern{
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
}

body.page-dashboard .stat-card-modern.stat-success .stat-icon-modern{
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #6ee7b7;
}

body.page-dashboard .stat-card-modern.stat-info .stat-icon-modern{
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

body.page-dashboard .stat-content-modern{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.page-dashboard .stat-value-modern{
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
}

body.page-dashboard .stat-label-modern{
    font-size: 13px;
    color: #4a4a4a;
    font-weight: 500;
}

body.page-dashboard .stat-trend{
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0.15;
    font-size: 28px;
}

/* 快捷操作按钮组 */
body.page-dashboard .quick-actions-modern{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

body.page-dashboard .quick-action-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: white;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.page-dashboard .quick-action-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

body.page-dashboard .action-icon-wrapper{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: transform 0.3s ease;
    position: relative;
}

/* 未读消息红点 */
body.page-dashboard .unread-badge{
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: pulse-badge 2s ease-in-out infinite;
    border: 2px solid white;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

body.page-dashboard .quick-action-item:hover .action-icon-wrapper{
    transform: scale(1.1);
}

body.page-dashboard .action-icon-wrapper.docs{
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

body.page-dashboard .action-icon-wrapper.faq{
    background: #f7f9fd;
    border: 1px solid #fcd34d;
}

body.page-dashboard .action-icon-wrapper.support{
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
}

body.page-dashboard .action-icon-wrapper.trending{
    background: #fef2f2;
    border: 1px solid #fecaca;
}

body.page-dashboard .action-title{
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
}

/* 邀请横幅 - 现代设计 */
body.page-dashboard .invite-banner-modern{
    position: relative;
    background: #f7f9fd;
    border-radius: 16px;
    padding: 24px 28px;
    overflow: hidden;
    border: 1px solid #fcd34d;
}

body.page-dashboard .invite-bg-pattern{
    display: none;
}

body.page-dashboard .invite-content-wrapper{
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

body.page-dashboard .invite-icon-big{
    font-size: 48px;
    flex-shrink: 0;
}

body.page-dashboard .invite-info{
    flex: 1;
    min-width: 200px;
    color: #1a1a1a;
}

body.page-dashboard .invite-info h3{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #b45309;
}

body.page-dashboard .invite-info p{
    font-size: 14px;
    color: #4a4a4a;
}

body.page-dashboard .invite-info strong{
    background: rgba(251, 191, 36, 0.3);
    color: #b45309;
    padding: 2px 8px;
    border-radius: 6px;
}

body.page-dashboard .invite-action-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f59e0b;
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    transition: all 0.3s ease;
}

body.page-dashboard .invite-action-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

body.page-dashboard .invite-action-btn svg{
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

body.page-dashboard .invite-action-btn:hover svg{
    transform: translateX(4px);
}

/* 旧样式保留兼容 */
body.page-dashboard .dashboard-welcome{
    margin-bottom: 20px;
}

body.page-dashboard .dashboard-welcome h1{
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

body.page-dashboard .welcome-subtitle{
    font-size: 13px;
    color: #4a4a4a;
}

/* 迷你统计卡片行 */
body.page-dashboard .dashboard-stats-row{
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

body.page-dashboard .mini-stat-card{
    flex: 1;
    min-width: 120px;
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid #e5e5e5;
    transition: all 0.2s ease;
}

body.page-dashboard .mini-stat-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #3b82f6;
}

body.page-dashboard .mini-stat-icon{
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    flex-shrink: 0;
}

body.page-dashboard .mini-stat-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.page-dashboard .mini-stat-value{
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

body.page-dashboard .mini-stat-label{
    font-size: 12px;
    color: #4a4a4a;
}

/* 快捷链接栏 */
body.page-dashboard .quick-links-bar{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

body.page-dashboard .quick-link-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

body.page-dashboard .quick-link-btn:hover{
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .quick-link-btn.primary{
    background: #3b82f6;
    color: white;
    border: none;
}

body.page-dashboard .quick-link-btn.primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .quick-link-btn .icon{
    font-size: 16px;
}

/* 邀请横幅 */
body.page-dashboard .invite-banner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f7f9fd;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    gap: 16px;
}

body.page-dashboard .invite-banner-left{
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-dashboard .invite-emoji{
    font-size: 28px;
}

body.page-dashboard .invite-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.page-dashboard .invite-text strong{
    font-size: 14px;
    color: #92400e;
}

body.page-dashboard .invite-text span{
    font-size: 12px;
    color: #a16207;
}

body.page-dashboard .invite-banner-btn{
    background: #f59e0b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

body.page-dashboard .invite-banner-btn:hover{
    background: #d97706;
    transform: translateY(-1px);
}

/* 统计卡片网格 (保留旧样式兼容) */
body.page-dashboard .dashboard-stats-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

body.page-dashboard .dashboard-stat-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.page-dashboard .dashboard-stat-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.page-dashboard .dashboard-stat-card.stat-primary{
    background: #ffffff;
}

body.page-dashboard .dashboard-stat-card.stat-warning{
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .dashboard-stat-card.stat-info{
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .stat-icon-wrapper{


    background: #f3f4f6;





}

body.page-dashboard .dashboard-stat-card.stat-primary .stat-icon-wrapper{
    background: rgba(32, 32, 32, 0.1);
}

body.page-dashboard .dashboard-stat-card.stat-warning .stat-icon-wrapper{
    background: rgba(245, 87, 108, 0.1);
}

body.page-dashboard .dashboard-stat-card.stat-info .stat-icon-wrapper{
    background: rgba(79, 172, 254, 0.1);
}

body.page-dashboard .stat-icon{


    color: #3b82f6;
}

body.page-dashboard .dashboard-stat-card.stat-primary .stat-icon{
    color: #3b82f6;
}

body.page-dashboard .dashboard-stat-card.stat-warning .stat-icon{
    color: #b45309;
}

body.page-dashboard .dashboard-stat-card.stat-info .stat-icon{
    color: #4facfe;
}

body.page-dashboard .stat-details{
    flex: 1;
    color: #1a1a1a;
}

body.page-dashboard .stat-label{


    margin-bottom: 8px;
}

body.page-dashboard .stat-value-large{
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
}

/* 章节标题 */
body.page-dashboard .section-title{
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.page-dashboard .view-all-link{
    font-size: 14px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

body.page-dashboard .view-all-link:hover{
    color: #2563eb;
}

/* 快捷入口 */
body.page-dashboard .dashboard-quick-actions{
    margin-bottom: 32px;
}

body.page-dashboard .quick-actions-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

body.page-dashboard .quick-action-card{
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .quick-action-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
}

body.page-dashboard .quick-action-icon{
    width: 48px;
    height: 48px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .quick-action-icon svg{
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

body.page-dashboard .quick-action-content{
    flex: 1;
}

body.page-dashboard .quick-action-title{
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

body.page-dashboard .quick-action-desc{
    font-size: 13px;
    color: #4a4a4a;
}

body.page-dashboard .quick-action-arrow{
    font-size: 20px;
    color: #999999;
    transition: transform 0.3s ease;
}

body.page-dashboard .quick-action-card:hover .quick-action-arrow{
    transform: translateX(4px);
    color: #3b82f6;
}

/* 无订阅卡片 */
body.page-dashboard .dashboard-no-subscription{
    margin-bottom: 32px;
}

body.page-dashboard .no-subscription-card{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    color: #1a1a1a;
}

body.page-dashboard .no-subscription-icon{
    font-size: 48px;
    margin-bottom: 16px;
}

body.page-dashboard .no-subscription-content h3{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

body.page-dashboard .no-subscription-content p{
    font-size: 14px;
    color: #4a4a4a;
}

/* 邀请好友卡片 */
body.page-dashboard .dashboard-invite{
    margin-bottom: 32px;
}

body.page-dashboard .invite-card{
    background: #f7f9fd;
    border: 1px solid #fcd34d;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.page-dashboard .invite-icon{
    width: 64px;
    height: 64px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .invite-icon svg{
    width: 32px;
    height: 32px;
    color: #b45309;
}

body.page-dashboard .invite-content{
    flex: 1;
    color: #1a1a1a;
}

body.page-dashboard .invite-content h3{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

body.page-dashboard .invite-content p{
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
}

body.page-dashboard .invite-btn{
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

body.page-dashboard .invite-btn:hover{
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
    body.page-dashboard .dashboard-stats-grid{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.page-dashboard .nav-section-title{
        margin-top: 10px;
    }

    body.page-dashboard .nav-item-sub{
        margin-left: 4px;
        margin-right: 0;
        padding: 10px;
    }

    body.page-dashboard .hero-actions{
        width: 100%;
        margin-left: 0;
    }

    body.page-dashboard .quick-actions-grid{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .invite-card{
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }

    body.page-dashboard .dashboard-welcome h1{
        font-size: 24px;
    }
}

/* ============================================
   邀请弹窗样式
   ============================================ */
body.page-dashboard .invite-modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.page-dashboard .invite-modal{
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

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

body.page-dashboard .invite-modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    color: #1a1a1a;
}

body.page-dashboard .invite-modal-header h3{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

body.page-dashboard .invite-modal-close{
    background: #e5e7eb;
    border: none;
    color: #4a4a4a;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

body.page-dashboard .invite-modal-close:hover{
    background: rgba(255, 255, 255, 0.3);
}

body.page-dashboard .invite-modal-body{
    padding: 24px;
}

body.page-dashboard .invite-stats{
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

body.page-dashboard .invite-stat-item{
    text-align: center;
}

body.page-dashboard .invite-stat-item .stat-value{
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

body.page-dashboard .invite-stat-item .stat-label{
    font-size: 12px;
    color: #4a4a4a;
}

body.page-dashboard .invite-code-section,
body.page-dashboard .invite-link-section{
    margin-bottom: 16px;
}

body.page-dashboard .invite-code-section label,
body.page-dashboard .invite-link-section label{
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4a4a4a;
    margin-bottom: 8px;
}

body.page-dashboard .invite-code-display{
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fafafa;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

body.page-dashboard .invite-code-display span{
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 2px;
}

body.page-dashboard .invite-link-display{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .invite-link-display input{
    flex: 1;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: #1a1a1a;
    min-width: 0;
}

body.page-dashboard .invite-link-display input:focus{
    outline: none;
    border-color: #3b82f6;
}

body.page-dashboard .copy-btn{









    white-space: nowrap;
}

body.page-dashboard .copy-btn:hover{
    background: #e84660;

}

body.page-dashboard .invite-actions{
    margin-top: 20px;
}

body.page-dashboard .share-btn{
    width: 100%;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

body.page-dashboard .share-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .invite-tips{
    margin-top: 16px;
    padding: 12px 16px;
    background: #fef3c7;
    border-radius: 10px;
    border: 1px solid #fcd34d;
}

body.page-dashboard .invite-tips p{
    margin: 0;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

/* 邀请弹窗响应式 */
@media (max-width: 480px) {
    body.page-dashboard .invite-modal{
        max-width: 100%;
        margin: 10px;
    }



    body.page-dashboard .invite-stat-item .stat-value{
        font-size: 20px;
    }

    body.page-dashboard .invite-code-display span{
        font-size: 16px;
    }

    body.page-dashboard .copy-btn{
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ============================================
   原有左侧边栏布局
   ============================================ */
        body.page-dashboard .sidebar{
            position: fixed;
            left: 0;
            top: 0;
            width: 260px;
            height: 100vh;
            background: #f7f9fd;
            color: #1a1a1a;
            display: flex;
            flex-direction: column;
            z-index: 1000;
            border-right: 1px solid #e5e5e5;
        }

        body.page-dashboard .sidebar-header{
            padding: 24px 20px;
            border-bottom: 1px solid #e5e5e5;
        }

        body.page-dashboard .sidebar .logo{
            display: flex;
            align-items: center;
            gap: 12px;
        }

        body.page-dashboard .sidebar .logo img{
            width: 48px;
            height: 48px;
            border-radius: 12px;
            object-fit: cover;
        }

        body.page-dashboard .logo-text{
            display: flex;
            flex-direction: column;
        }

        body.page-dashboard .logo-title{
            font-size: 20px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.2;
        }

        body.page-dashboard .logo-subtitle{
            font-size: 12px;
            color: #666666;
            font-weight: 400;
        }

        body.page-dashboard .sidebar-nav{
            flex: 1;
            padding: 16px 12px;
            overflow-y: auto;
        }

        body.page-dashboard .sidebar-nav::-webkit-scrollbar{
            width: 4px;
        }

        body.page-dashboard .sidebar-nav::-webkit-scrollbar-thumb{
            background: rgba(0,0,0,0.15);
            border-radius: 2px;
        }

        body.page-dashboard .nav-item{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            margin-bottom: 4px;
            border-radius: 10px;
            color: #4a4a4a;
            text-decoration: none;
            transition: all 0.2s;
            cursor: pointer;
        }

        body.page-dashboard .nav-item:hover{
            background: rgba(59, 130, 246, 0.08);
            color: #1a1a1a;
        }

        body.page-dashboard .nav-item.active{
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
            border-left: 3px solid #3b82f6;
        }

        body.page-dashboard .nav-item svg{
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
        }

        body.page-dashboard .nav-item span{
            font-size: 14px;
            font-weight: 500;
        }

        body.page-dashboard .nav-section-title{
            margin: 14px 10px 8px;
            padding: 0 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            color: #94a3b8;
            text-transform: uppercase;
        }

        body.page-dashboard .help-center-menu{
            margin-top: 4px;
        }

        body.page-dashboard .nav-section-toggle{
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-right: 10px;
            padding: 8px 6px;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            text-align: left;
        }

        body.page-dashboard .nav-section-arrow{
            width: 18px;
            height: 18px;
            fill: currentColor;
            opacity: 0.8;
            transition: transform 0.2s ease;
        }

        body.page-dashboard .help-center-list{
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.25s ease;
        }

        body.page-dashboard .help-center-menu.open .help-center-list{
            max-height: 240px;
        }

        body.page-dashboard .help-center-menu.open .nav-section-arrow{
            transform: rotate(180deg);
        }

        body.page-dashboard .nav-item-sub{
            margin-left: 8px;
            margin-right: 4px;
            padding: 10px 12px;
            border: 1px solid transparent;
            background: rgba(148, 163, 184, 0.08);
        }

        body.page-dashboard .nav-item-sub svg{
            width: 18px;
            height: 18px;
        }

        body.page-dashboard .nav-item-sub span{
            font-size: 13px;
            font-weight: 600;
        }

        body.page-dashboard .nav-item-sub:hover{
            border-color: #dbeafe;
            background: #eff6ff;
            color: #1d4ed8;
        }

        body.page-dashboard .nav-item-sub.active{
            border-left-width: 0;
            border-color: #bfdbfe;
            background: #dbeafe;
            box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.08);
        }

        body.page-dashboard .nav-item-support{
            position: relative;
        }

        body.page-dashboard .nav-item-support .nav-unread-badge{
            margin-left: auto;
        }

        body.page-dashboard .nav-unread-badge{
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #ef4444;
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28);
        }

        body.page-dashboard .sidebar-footer{
            padding: 10px 15px 12px;
            border-top: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        /* 管理员后台按钮 */
        body.page-dashboard .admin-panel-btn{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #333333;
            color: white;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(48, 48, 48, 0.3);
        }

        body.page-dashboard .admin-panel-btn:hover{
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(48, 48, 48, 0.4);
        }

        body.page-dashboard .admin-panel-btn svg{
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Telegram 按钮 */
        body.page-dashboard .telegram-sidebar-btn{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #0088cc;
            color: white;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3);
        }

        body.page-dashboard .telegram-sidebar-btn:hover{
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
        }

        body.page-dashboard .telegram-sidebar-btn svg{
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* Telegram 绑定按钮（侧边栏） */
        body.page-dashboard .telegram-bind-sidebar{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(0, 136, 204, 0.1);
            color: #0088cc;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid rgba(0, 136, 204, 0.2);
            cursor: pointer;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
        }

        body.page-dashboard .telegram-bind-sidebar span:not(.bind-badge){
            flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.page-dashboard .telegram-bind-sidebar:hover{
            background: rgba(0, 136, 204, 0.15);
            border-color: rgba(0, 136, 204, 0.3);
            transform: translateY(-1px);
        }

        body.page-dashboard .telegram-bind-sidebar svg{
            width: 18px;
            height: 18px;
            fill: currentColor;
            flex-shrink: 0;
        }

        body.page-dashboard .telegram-bind-sidebar.bound{
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.2);
        }

        body.page-dashboard .telegram-bind-sidebar.bound:hover{
            background: rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.3);
        }

        body.page-dashboard .telegram-bind-sidebar .bind-badge{
            margin-left: auto;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            background: rgba(0, 136, 204, 0.2);
            color: #0088cc;
            flex-shrink: 0;
            white-space: nowrap;
        }

        body.page-dashboard .telegram-bind-sidebar.bound .bind-badge{
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }

        /* 邮箱绑定按钮 */
        body.page-dashboard .email-bind-sidebar{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(48, 48, 48, 0.1);
            color: #333333;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 500;
            border: 1px solid rgba(48, 48, 48, 0.2);
            cursor: pointer;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
        }

        body.page-dashboard .email-bind-sidebar span:not(.bind-badge){
            flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.page-dashboard .email-bind-sidebar:hover{
            background: rgba(48, 48, 48, 0.15);
            border-color: rgba(48, 48, 48, 0.3);
            transform: translateY(-1px);
        }

        body.page-dashboard .email-bind-sidebar svg{
            width: 18px;
            height: 18px;
            fill: currentColor;
            flex-shrink: 0;
        }

        body.page-dashboard .email-bind-sidebar.bound{
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.2);
        }

        body.page-dashboard .email-bind-sidebar.bound:hover{
            background: rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.3);
        }

        body.page-dashboard .email-bind-sidebar .bind-badge{
            margin-left: auto;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            background: rgba(48, 48, 48, 0.2);
            color: #333333;
            flex-shrink: 0;
            white-space: nowrap;
        }

        body.page-dashboard .email-bind-sidebar.bound .bind-badge{
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }

        body.page-dashboard :is(#telegramBindSidebar, #emailBindSidebar)[hidden]{
            display: none;
        }

        /* 退出按钮 */
        body.page-dashboard .logout-btn{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: rgba(239, 68, 68, 0.1);
            color: #dc2626;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        body.page-dashboard .logout-btn:hover{
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
        }

        body.page-dashboard .logout-btn svg{
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
        }

        body.page-dashboard .app-version{
            text-align: center;
            font-size: 11px;
            color: #b0b0b0;
            padding: 8px 0 2px;
            letter-spacing: 0.5px;
            user-select: none;
        }

        body.page-dashboard .user-card{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(59, 130, 246, 0.05);
            border-radius: 10px;
            margin-bottom: 12px;
        }

        body.page-dashboard .user-avatar{
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            flex-shrink: 0;
        }

        body.page-dashboard .user-info-sidebar{
            flex: 1;
            min-width: 0;
        }

        body.page-dashboard .user-name{
            font-size: 14px;
            font-weight: 600;
            color: #1a1a1a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.page-dashboard .user-level{
            font-size: 12px;
            color: #3b82f6;
            font-weight: 500;
        }

        /* 右上角 Telegram 浮动按钮 */
        body.page-dashboard .telegram-floating-btn{
            position: fixed;
            top: 24px;
            right: 32px;
            width: 48px;
            height: 48px;
            background: #0088cc;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
            transition: all 0.3s;
            z-index: 999;
        }

        body.page-dashboard .telegram-floating-btn:hover{
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 136, 204, 0.5);
        }

        body.page-dashboard .telegram-floating-btn svg{
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        /* 移动端顶部栏 */
        body.page-dashboard .mobile-header{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            z-index: 999;
        }

        body.page-dashboard .mobile-menu-toggle{
            display: flex;

            justify-content: center;
            align-items: center;





        }

        body.page-dashboard .mobile-menu-toggle span{


            background: #1a1a1a;


        }

        body.page-dashboard .mobile-logo{
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
        }

        body.page-dashboard .mobile-logo img{
            width: 32px;
            height: 32px;
            border-radius: 6px;
        }

        body.page-dashboard .mobile-user-avatar{
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: white;
        }

        body.page-dashboard .sidebar-overlay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 998;
        }

        /* 主内容区 */
        body.page-dashboard .main-content{
            margin-left: 260px;
            min-height: 100vh;
            padding: 24px 16px;
            background: #ffffff;
        }

        body.page-dashboard .content-section{
            display: none;
        }

        body.page-dashboard .content-section.active{
            display: block;
        }

        body.page-dashboard .section-header{
            margin-bottom: 24px;
        }

        body.page-dashboard .section-header h1{
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 8px 0;
        }

        body.page-dashboard .section-header p{
            font-size: 14px;
            color: #4a4a4a;
            margin: 0;
        }

        body.page-dashboard .stats-cards{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        body.page-dashboard .stats-cards .stat-card{
            background: white;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: all 0.2s;
            border: 1px solid #e5e5e5;
        }

        body.page-dashboard .stats-cards .stat-card:hover{
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }

        body.page-dashboard .stat-icon{
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-shrink: 0;
        }



        body.page-dashboard .stat-value{


            color: #1a1a1a;
            line-height: 1;
            margin-bottom: 4px;
        }

        body.page-dashboard .stat-label{

            color: #4a4a4a;
        }

        body.page-dashboard .trending-container{
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        body.page-dashboard .trending-section{
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid #e5e5e5;
        }

        body.page-dashboard .trending-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 12px;
        }

        body.page-dashboard .trending-header h3{
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
        }

        body.page-dashboard .request-stats{
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        body.page-dashboard .request-stat-item{
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            font-size: 13px;
            color: #4a4a4a;
            border: 1px solid #e5e5e5;
        }



        body.page-dashboard .status-dot.pending{
            background: #f59e0b;
        }

        body.page-dashboard .status-dot.downloading{
            background: #3b82f6;
        }

        body.page-dashboard .status-dot.completed{
            background: #10b981;
        }

        body.page-dashboard .status-dot.failed{
            background: #ef4444;
        }

        /* ==================== 新版我的信息页面样式 ==================== */
        body.page-dashboard .profile-page-new{
            max-width: 100%;
            margin: 0;
        }

        /* 顶部英雄卡片 */
        body.page-dashboard .profile-hero-card{
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 24px;
            background: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        body.page-dashboard .profile-hero-bg{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 120px;
            background: #333333;
        }

        body.page-dashboard .profile-hero-content{
            position: relative;
            padding: 80px 32px 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        body.page-dashboard .profile-avatar-wrapper{
            position: relative;
            margin-bottom: 16px;
        }

        body.page-dashboard .profile-avatar-new{
            width: 100px;
            height: 100px;
            border-radius: 24px;
            background: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            font-weight: 700;
            color: white;
            border: 4px solid white;
            box-shadow: 0 8px 24px rgba(32, 32, 32, 0.4);
        }

        body.page-dashboard .profile-level-badge{
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            background: #fbbf24;
            color: white;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
        }

        body.page-dashboard .profile-main-info{
            margin-top: 8px;
        }

        body.page-dashboard .profile-username{
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 12px 0;
        }

        body.page-dashboard .profile-meta{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 16px;
        }

        body.page-dashboard .meta-item{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: #64748b;
            background: #f1f5f9;
            padding: 6px 14px;
            border-radius: 20px;
        }

        body.page-dashboard .meta-item .meta-icon{
            font-size: 14px;
        }

        body.page-dashboard .meta-item.warning{
            background: #fef3c7;
            color: #d97706;
        }

        /* 统计数据区域 */
        body.page-dashboard .profile-stats-section{
            margin-bottom: 24px;
        }

        body.page-dashboard .stats-grid-new{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
        }

        body.page-dashboard .stat-card-new{
            background: white;
            border-radius: 20px;
            padding: 24px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            border: 1px solid #f1f5f9;
        }

        body.page-dashboard .stat-card-new:hover{
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        body.page-dashboard .stat-icon-wrapper{
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        body.page-dashboard .stat-icon{
            font-size: 26px;
        }

        body.page-dashboard .stat-card-new.stat-today .stat-icon-wrapper{
            background: #dbeafe;
        }

        body.page-dashboard .stat-card-new.stat-total .stat-icon-wrapper{
            background: #e0e7ff;
        }

        body.page-dashboard .stat-card-new.stat-movies .stat-icon-wrapper{
            background: #fef3c7;
        }

        body.page-dashboard .stat-card-new.stat-series .stat-icon-wrapper{
            background: #dcfce7;
        }

        body.page-dashboard .stat-card-new.stat-library .stat-icon-wrapper{
            background: #fce7f3;
        }

        body.page-dashboard .stat-content{
            flex: 1;
            min-width: 0;
        }

        body.page-dashboard .stat-value-new{
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }

        body.page-dashboard .stat-label-new{
            font-size: 13px;
            color: #64748b;
            margin-top: 2px;
        }

        /* 功能卡片网格 */
        body.page-dashboard .profile-cards-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }

        body.page-dashboard .profile-feature-card{
            background: white;
            border-radius: 20px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            border: 1px solid #f1f5f9;
        }

        body.page-dashboard .feature-card-header{
            padding: 24px 24px 0;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        body.page-dashboard .feature-icon{
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        body.page-dashboard .feature-icon.emby-icon{
            background: #dbeafe;
        }

        body.page-dashboard .feature-icon.password-icon{
            background: #e0e7ff;
        }

        body.page-dashboard .feature-title-group{
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        body.page-dashboard .feature-title-group h3{
            font-size: 18px;
            font-weight: 600;
            color: #1e293b;
            margin: 0;
        }

        body.page-dashboard .feature-status{
            font-size: 12px;
            font-weight: 500;
            padding: 4px 12px;
            border-radius: 20px;
        }

        body.page-dashboard .feature-status.bound{
            background: #dcfce7;
            color: #16a34a;
        }

        body.page-dashboard .feature-status.unbound{
            background: #fef3c7;
            color: #d97706;
        }

        body.page-dashboard .feature-card-body{
            padding: 20px 24px 24px;
        }

        body.page-dashboard .feature-desc{
            color: #64748b;
            font-size: 14px;
            margin: 0 0 20px 0;
            line-height: 1.6;
        }

        /* Emby 信息网格 */
        body.page-dashboard .emby-info-grid{
            display: grid;
            gap: 12px;
            margin-bottom: 20px;
        }

        body.page-dashboard .emby-info-item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: #f8fafc;
            border-radius: 12px;
        }

        body.page-dashboard .info-label{
            color: #64748b;
            font-size: 14px;
        }

        body.page-dashboard .info-value{
            color: #1e293b;
            font-weight: 600;
            font-size: 14px;
        }

        body.page-dashboard .info-value.mono{
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            background: #e2e8f0;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
        }

        body.page-dashboard .emby-btns{
            display: flex;
            gap: 12px;
        }

        body.page-dashboard .btn-feature{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 24px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        body.page-dashboard .btn-feature.btn-primary{
            flex: 1;
            background: #333333;
            color: white;
        }

        body.page-dashboard .btn-feature.btn-primary:hover{
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(32, 32, 32, 0.4);
        }

        body.page-dashboard .btn-feature.btn-secondary{
            flex: 1;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        body.page-dashboard .btn-feature.btn-secondary:hover{
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        body.page-dashboard .btn-feature.btn-unbind{
            width: 100%;
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        body.page-dashboard .btn-feature.btn-unbind:hover{
            background: #fee2e2;
            transform: translateY(-2px);
        }

        body.page-dashboard .btn-feature.btn-submit{
            width: 100%;
            background: #333333;
            color: white;
            margin-top: 8px;
        }

        body.page-dashboard .btn-feature.btn-submit:hover{
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(32, 32, 32, 0.4);
        }

        /* 密码同步提示 */
        body.page-dashboard .password-sync-notice{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            background: #eff6ff;
            border-radius: 12px;
            margin-bottom: 20px;
            font-size: 13px;
            color: #1e40af;
        }

        body.page-dashboard .password-sync-notice .notice-icon{
            font-size: 18px;
        }

        /* 表单样式 */
        body.page-dashboard .form-group-new{
            margin-bottom: 16px;
        }

        body.page-dashboard .form-group-new label{
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
        }

        body.page-dashboard .input-wrapper{
            position: relative;
            display: flex;
            align-items: center;
        }

        body.page-dashboard .input-wrapper input{
            width: 100%;
            padding: 14px 48px 14px 16px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-size: 15px;
            color: #1e293b;
            transition: all 0.3s;
            outline: none;
        }

        body.page-dashboard .input-wrapper input:focus{
            border-color: #333333;
            background: white;
            box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.15);
        }

        body.page-dashboard .input-wrapper input::placeholder{
            color: #94a3b8;
        }

        body.page-dashboard .toggle-pwd{
            position: absolute;
            right: 12px;
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
            padding: 4px;
        }

        body.page-dashboard .toggle-pwd:hover{
            opacity: 1;
        }

        /* 危险操作区域 */
        body.page-dashboard .profile-danger-zone{
            background: white;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #fecaca;
            box-shadow: 0 2px 12px rgba(239, 68, 68, 0.08);
        }

        body.page-dashboard .danger-zone-header{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 24px;
            background: #fef2f2;
            font-weight: 600;
            color: #dc2626;
            font-size: 15px;
        }

        body.page-dashboard .danger-zone-body{
            padding: 20px 24px;
        }

        body.page-dashboard .danger-item-new{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        body.page-dashboard .danger-info .danger-title{
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 4px;
        }

        body.page-dashboard .danger-info .danger-desc{
            font-size: 13px;
            color: #64748b;
        }

        body.page-dashboard .btn-danger{
            padding: 12px 24px;
            background: #dc2626;
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            white-space: nowrap;
        }

        body.page-dashboard .btn-danger:hover{
            background: #b91c1c;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
        }

        /* 响应式设计 - 我的信息页面 */
        @media (max-width: 768px) {
            body.page-dashboard .profile-page-new{
                padding: 0;
            }

            body.page-dashboard .profile-hero-card{
                border-radius: 20px;
            }

            body.page-dashboard .profile-hero-bg{
                height: 100px;
            }

            body.page-dashboard .profile-hero-content{
                padding: 60px 20px 24px;
            }

            body.page-dashboard .profile-avatar-new{
                width: 80px;
                height: 80px;
                font-size: 32px;
            }

            body.page-dashboard .profile-username{
                font-size: 22px;
            }

            body.page-dashboard .profile-meta{
                gap: 8px;
            }

            body.page-dashboard .meta-item{
                font-size: 12px;
                padding: 5px 12px;
            }

            body.page-dashboard .stats-grid-new{
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            body.page-dashboard .stat-card-new{
                padding: 16px;
                flex-direction: column;
                text-align: center;
                gap: 12px;
            }

            body.page-dashboard .stat-icon-wrapper{
                width: 44px;
                height: 44px;
            }

            body.page-dashboard .stat-value-new{
                font-size: 24px;
            }

            body.page-dashboard .profile-cards-grid{
                grid-template-columns: 1fr;
                gap: 16px;
            }

            body.page-dashboard .emby-btns{
                flex-direction: column;
            }

            body.page-dashboard .danger-item-new{
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            body.page-dashboard .btn-danger{
                width: 100%;
            }
        }

        /* ==================== 我的信息页面 V2 样式 ==================== */
        body.page-dashboard .profile-page-v2{
            max-width: 100%;
            margin: 0;
            padding: 0;
        }

        /* 用户卡片 */
        body.page-dashboard .user-profile-card{
            background: #333333;
            border-radius: 20px;
            padding: 28px;
            margin-bottom: 20px;
            box-shadow: 0 8px 32px rgba(32, 32, 32, 0.25);
        }

        body.page-dashboard .user-profile-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        body.page-dashboard .user-profile-main{
            display: flex;
            align-items: center;
            gap: 20px;
            min-width: 0;
            flex: 1;
        }

        body.page-dashboard .user-profile-actions{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            flex-shrink: 0;
        }

        body.page-dashboard .user-delete-btn{
            min-width: 110px;
            background: #ef4444;
            border: 1px solid rgba(255, 255, 255, 0.24);
            box-shadow: 0 8px 18px rgba(185, 28, 28, 0.28);
            backdrop-filter: blur(6px);
        }

        body.page-dashboard .user-delete-btn:hover{
            background: #dc2626;
            box-shadow: 0 10px 20px rgba(127, 29, 29, 0.32);
        }

        body.page-dashboard .user-delete-hint{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.82);
            white-space: nowrap;
        }

        body.page-dashboard .user-avatar-lg{
            width: 72px;
            height: 72px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 700;
            color: white;
            border: 3px solid rgba(255, 255, 255, 0.3);
            flex-shrink: 0;
        }

        body.page-dashboard .user-profile-info{
            flex: 1;
            min-width: 0;
        }

        body.page-dashboard .user-display-name{
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin: 0 0 10px 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        body.page-dashboard .user-badges{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        body.page-dashboard .user-badge{
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            backdrop-filter: blur(10px);
        }

        body.page-dashboard .user-badge.badge-vip{
            background: #fbbf24;
            color: #7c2d12;
        }

        body.page-dashboard .user-badge.badge-sub{
            background: rgba(255, 255, 255, 0.25);
            color: white;
        }

        body.page-dashboard .user-badge.badge-normal{
            background: rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.9);
        }

        body.page-dashboard .user-badge.badge-banned{
            background: #ef4444;
            color: white;
        }

        body.page-dashboard .user-badge.badge-emby{
            background: rgba(16, 185, 129, 0.3);
            color: #d1fae5;
        }

        body.page-dashboard .user-badge.badge-warning{
            background: rgba(251, 191, 36, 0.3);
            color: #fef3c7;
        }

        /* 数据统计区域 */
        body.page-dashboard .stats-section-v2{
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 22px;
            margin-bottom: 20px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
        }

        body.page-dashboard .section-title-v2{
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 16px 0;
        }

        body.page-dashboard .title-icon{
            width: 30px;
            height: 30px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        body.page-dashboard .title-icon--stats{
            background: #dbeafe;
        }

        body.page-dashboard .title-icon--stats svg{
            width: 16px;
            height: 16px;
            fill: none;
            stroke: #1d4ed8;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        body.page-dashboard .stats-row{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 16px;
        }

        body.page-dashboard .stat-item-v2{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px;
            border-radius: 13px;
            background: #ffffff;
            border: 1px solid #e6ecf3;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        body.page-dashboard .stat-item-v2:hover{
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
        }

        body.page-dashboard .stat-item-v2--today{
            background: #f8fbff;
        }

        body.page-dashboard .stat-item-v2--total{
            background: #f8f8ff;
        }

        body.page-dashboard .stat-item-v2--daily{
            background: #f7f9fd;
        }

        body.page-dashboard .stat-icon-v2{
            width: 42px;
            height: 42px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
            border: 1px solid transparent;
        }

        body.page-dashboard .stat-icon-v2.icon-today{
            background: #dbeafe;
            border-color: #bfdbfe;
        }
        body.page-dashboard .stat-icon-v2.icon-total{
            background: #e0e7ff;
            border-color: #c7d2fe;
        }
        body.page-dashboard .stat-icon-v2.icon-daily{
            background: #fef3c7;
            border-color: #fde68a;
        }

        body.page-dashboard .stat-info-v2{
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        body.page-dashboard .stat-num{
            font-size: 24px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.15;
            letter-spacing: -0.01em;
        }

        body.page-dashboard .stat-text{
            font-size: 12px;
            color: #475569;
            font-weight: 600;
        }

        /* 媒体库统计卡片 */
        body.page-dashboard .library-stats-card{
            background: #f3f9ff;
            border-radius: 14px;
            padding: 16px;
            border: 1px solid #cfe3ff;
        }

        body.page-dashboard .library-stats-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(59, 130, 246, 0.22);
        }

        body.page-dashboard .library-title-wrap{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        body.page-dashboard .library-icon{
            width: 28px;
            height: 28px;
            border-radius: 9px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #dbeafe;
            border: 1px solid #bfdbfe;
            flex-shrink: 0;
        }

        body.page-dashboard .library-icon svg{
            width: 15px;
            height: 15px;
            fill: none;
            stroke: #1d4ed8;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        body.page-dashboard .library-title{
            font-size: 14px;
            font-weight: 700;
            color: #1e40af;
            flex: 1;
        }

        body.page-dashboard .library-total{
            font-size: 12px;
            font-weight: 700;
            color: #2563eb;
            background: #ffffff;
            border: 1px solid #d6e7ff;
            padding: 5px 12px;
            border-radius: 999px;
            white-space: nowrap;
        }

        body.page-dashboard .library-stats-grid{
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        body.page-dashboard .library-stat-item{
            display: flex;
            align-items: center;
            gap: 10px;
            background: #ffffff;
            padding: 12px;
            border-radius: 12px;
            border: 1px solid #e4eefc;
            box-shadow: 0 3px 8px rgba(30, 64, 175, 0.06);
        }

        body.page-dashboard .library-stat-icon{
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        body.page-dashboard .library-stat-icon--movie{
            background: #fde68a;
        }

        body.page-dashboard .library-stat-icon--series{
            background: #c7d2fe;
        }

        body.page-dashboard .library-stat-icon--episodes{
            background: #bbf7d0;
        }

        body.page-dashboard .library-stat-data{
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        body.page-dashboard .library-stat-value{
            font-size: 22px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.1;
            letter-spacing: -0.01em;
        }

        body.page-dashboard .library-stat-label{
            font-size: 12px;
            color: #475569;
            font-weight: 600;
        }

        /* 功能卡片区域 */
        body.page-dashboard .feature-cards-v2{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        body.page-dashboard .feature-card-emby{
            order: 1;
        }

        body.page-dashboard .feature-card-emby-password{
            order: 2;
        }

        body.page-dashboard .feature-card-site-password{
            order: 3;
        }

        body.page-dashboard .feature-card-email{
            order: 4;
        }

        body.page-dashboard .feature-card-v2{
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        }

        body.page-dashboard .feature-card-header-v2{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 20px;
            background: #f8fafc;
            border-bottom: 1px solid #f1f5f9;
        }

        body.page-dashboard .feature-icon-v2{
            font-size: 22px;
        }

        body.page-dashboard .feature-title-v2{
            font-size: 15px;
            font-weight: 600;
            color: #1e293b;
            flex: 1;
        }

        body.page-dashboard .feature-badge{
            font-size: 11px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
        }

        body.page-dashboard .feature-badge.success{
            background: #dcfce7;
            color: #16a34a;
        }

        body.page-dashboard .feature-badge.warning{
            background: #fef3c7;
            color: #d97706;
        }

        body.page-dashboard .feature-badge.danger{
            background: #fee2e2;
            color: #dc2626;
        }

        body.page-dashboard .feature-card-content-v2{
            padding: 20px;
        }

        body.page-dashboard .feature-desc-v2{
            font-size: 14px;
            color: #64748b;
            margin: 0 0 16px 0;
            line-height: 1.5;
        }

        /* 订阅要求提示 */
        body.page-dashboard .subscription-required-notice{
            background: #fef3c7;
            border: 1px solid #f59e0b;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
        }

        body.page-dashboard .subscription-required-notice .feature-desc-v2{
            color: #92400e;
            font-weight: 500;
            margin-bottom: 8px;
        }

        body.page-dashboard .subscription-required-notice .subscription-sub-tip{
            font-size: 12px;
            color: #a16207;
            margin: 0 0 12px 0;
        }

        /* Emby 换绑提示 */
        body.page-dashboard .emby-bindtip{
            font-size: 13px;
            color: #64748b;
            background: #f1f5f9;
            padding: 12px 14px;
            border-radius: 10px;
            margin: 0;
            line-height: 1.5;
        }

        /* Emby 账号信息卡 */
        body.page-dashboard .emby-meta-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 16px;
        }

        body.page-dashboard .emby-meta-item{
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 14px;
            min-height: 88px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        body.page-dashboard .emby-meta-item-wide{
            grid-column: 1 / -1;
        }

        body.page-dashboard .emby-meta-status.bound{
            background: #ecfdf5;
            border-color: #86efac;
        }

        body.page-dashboard .emby-meta-status.disabled{
            background: #fef2f2;
            border-color: #fca5a5;
        }

        body.page-dashboard .emby-meta-status.unbound{
            background: #f7f9fd;
            border-color: #fcd34d;
        }

        body.page-dashboard .emby-meta-head{
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        body.page-dashboard .emby-meta-icon{
            font-size: 14px;
            line-height: 1;
        }

        body.page-dashboard .emby-meta-label{
            font-size: 12px;
            color: #64748b;
            font-weight: 500;
        }

        body.page-dashboard .emby-meta-value{
            font-size: 15px;
            color: #0f172a;
            font-weight: 700;
            word-break: break-word;
        }

        @media (max-width: 768px) {
            body.page-dashboard .emby-meta-grid{
                grid-template-columns: 1fr;
            }

            body.page-dashboard .emby-meta-item-wide{
                grid-column: 1;
            }
        }

        /* Emby 信息列表 */
        body.page-dashboard .emby-info-list{
            margin-bottom: 16px;
        }

        body.page-dashboard .emby-info-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            background: #f8fafc;
            border-radius: 10px;
            margin-bottom: 8px;
        }

        body.page-dashboard .emby-info-row:last-child{
            margin-bottom: 0;
        }

        body.page-dashboard .info-key{
            font-size: 13px;
            color: #64748b;
        }

        body.page-dashboard .info-val{
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
        }

        body.page-dashboard .info-val.mono{
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 12px;
            background: #e2e8f0;
            padding: 4px 8px;
            border-radius: 6px;
        }

        /* 按钮样式 V2 */
        body.page-dashboard .btn-v2{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 12px 20px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }

        body.page-dashboard .btn-v2.btn-primary-v2{
            background: #333333;
            color: white;
        }

        body.page-dashboard .btn-v2.btn-primary-v2:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(32, 32, 32, 0.4);
        }

        body.page-dashboard .btn-v2.btn-secondary-v2{
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        body.page-dashboard .btn-v2.btn-secondary-v2:hover{
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        body.page-dashboard .btn-v2.btn-disabled{
            opacity: 0.5;
            cursor: not-allowed;
        }

        body.page-dashboard .btn-v2.btn-disabled:hover{
            transform: none;
            box-shadow: none;
        }

        body.page-dashboard .btn-v2.btn-danger-outline{
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
            width: 100%;
        }

        body.page-dashboard .btn-v2.btn-danger-outline:hover{
            background: #fee2e2;
            transform: translateY(-2px);
        }

        body.page-dashboard .btn-v2.btn-danger-v2{
            background: #dc2626;
            color: white;
            padding: 10px 20px;
        }

        body.page-dashboard .btn-v2.btn-danger-v2:hover{
            background: #b91c1c;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
        }

        body.page-dashboard .btn-v2.btn-full{
            width: 100%;
        }

        body.page-dashboard .btn-group-v2{
            display: flex;
            gap: 10px;
        }

        body.page-dashboard .btn-group-v2 .btn-v2{
            flex: 1;
        }

        /* 密码提示 */
        body.page-dashboard .password-notice-v2{
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            background: #eff6ff;
            border-radius: 10px;
            margin-bottom: 16px;
            font-size: 13px;
            color: #1e40af;
        }

        /* 表单样式 V2 */
        body.page-dashboard .form-field-v2{
            margin-bottom: 14px;
        }

        body.page-dashboard .form-field-v2 label{
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 6px;
        }

        body.page-dashboard .input-group-v2{
            position: relative;
            display: flex;
            align-items: center;
        }

        body.page-dashboard .input-group-v2 input{
            width: 100%;
            padding: 12px 44px 12px 14px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
            color: #1e293b;
            transition: all 0.2s;
            outline: none;
        }

        body.page-dashboard .input-group-v2 input:focus{
            border-color: #333333;
            background: white;
            box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.15);
        }

        body.page-dashboard .input-group-v2 input::placeholder{
            color: #94a3b8;
        }

        body.page-dashboard .toggle-pwd-v2{
            position: absolute;
            right: 10px;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.2s;
            padding: 4px;
        }

        body.page-dashboard .toggle-pwd-v2:hover{
            opacity: 1;
        }

        /* 危险区域 V2 */
        body.page-dashboard .danger-zone-v2{
            background: white;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #fecaca;
            box-shadow: 0 2px 12px rgba(239, 68, 68, 0.06);
        }

        body.page-dashboard .danger-zone-header-v2{
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 20px;
            background: #fef2f2;
            font-weight: 600;
            color: #dc2626;
            font-size: 14px;
        }

        body.page-dashboard .danger-zone-content-v2{
            padding: 16px 20px;
        }

        body.page-dashboard .danger-item-v2{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        body.page-dashboard .danger-text{
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        body.page-dashboard .danger-text strong{
            font-size: 14px;
            color: #1e293b;
        }

        body.page-dashboard .danger-text span{
            font-size: 12px;
            color: #64748b;
        }

        /* 我的信息页面 V2 响应式 */
        @media (max-width: 768px) {
            body.page-dashboard .profile-page-v2{
                padding: 0;
            }

            body.page-dashboard .user-profile-card{
                border-radius: 16px;
                padding: 20px;
            }

            body.page-dashboard .user-profile-header{
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            body.page-dashboard .user-profile-main{
                gap: 16px;
                width: 100%;
            }

            body.page-dashboard .user-profile-actions{
                width: 100%;
                align-items: stretch;
                gap: 6px;
            }

            body.page-dashboard .user-delete-btn{
                width: 100%;
            }

            body.page-dashboard .user-delete-hint{
                text-align: right;
            }

            body.page-dashboard .user-avatar-lg{
                width: 56px;
                height: 56px;
                font-size: 24px;
                border-radius: 14px;
            }

            body.page-dashboard .user-display-name{
                font-size: 20px;
            }

            body.page-dashboard .user-badges{
                gap: 6px;
            }

            body.page-dashboard .user-badge{
                padding: 4px 10px;
                font-size: 11px;
            }

            body.page-dashboard .stats-row{
                grid-template-columns: 1fr;
                gap: 10px;
            }

            body.page-dashboard .stat-item-v2{
                padding: 12px;
            }

            body.page-dashboard .library-stats-grid{
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
            }

            body.page-dashboard .library-stat-item{
                padding: 10px;
                gap: 8px;
            }

            body.page-dashboard .library-stat-icon{
                width: 30px;
                height: 30px;
                font-size: 16px;
            }

            body.page-dashboard .library-stat-value{
                font-size: 18px;
            }

            body.page-dashboard .library-stat-label{
                font-size: 11px;
            }

            body.page-dashboard .feature-cards-v2{
                grid-template-columns: 1fr;
            }

            body.page-dashboard .btn-group-v2{
                flex-direction: column;
            }

            body.page-dashboard .danger-item-v2{
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            body.page-dashboard .btn-v2.btn-danger-v2{
                width: 100%;
            }
        }

        /* 旧版我的信息样式（保留兼容） */
        body.page-dashboard .profile-card{
            background: white;
            border-radius: 16px;
            padding: 32px;
            text-align: center;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid #e5e5e5;
        }

        body.page-dashboard .profile-avatar-large{
            width: 100px;
            height: 100px;
            border-radius: 20px;
            background: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            font-weight: 700;
            color: white;
            margin: 0 auto 20px;
        }

        body.page-dashboard .profile-info h2{
            font-size: 24px;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 8px 0;
        }

        body.page-dashboard .profile-level{
            font-size: 16px;
            color: #fbbf24;
            font-weight: 600;
            margin: 0;
        }

        body.page-dashboard .profile-stats{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
        }

        body.page-dashboard .profile-stat-card{
            background: white;
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }

        body.page-dashboard .profile-stat-card:hover{
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        body.page-dashboard .profile-stat-icon{
            font-size: 32px;
            margin-bottom: 12px;
        }

        body.page-dashboard .profile-stat-value{
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 4px;
        }

        body.page-dashboard .profile-stat-label{
            font-size: 13px;
            color: #64748b;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body.page-dashboard .sidebar{
                transform: translateX(-100%);

            }

            body.page-dashboard .sidebar.show{
                transform: translateX(0);
            }

            body.page-dashboard .sidebar-overlay.show{
                display: block;
            }

            body.page-dashboard .mobile-header{
                display: flex;
            }

            body.page-dashboard .main-content{

                padding: 72px 16px 16px 16px;
            }

            body.page-dashboard .stats-cards{
                grid-template-columns: 1fr 1fr;
            }

            body.page-dashboard .section-header h1{
                font-size: 22px;
            }
        }

        body.page-dashboard{
            background: var(--bg-primary);
            min-height: 100vh;
            padding: 0;
            margin: 0;
        }

        body.page-dashboard .navbar{
            background: white;
            color: #1a1a1a;
            padding: 12px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
            width: 100%;
        }

        body.page-dashboard .navbar .logo{
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
        }

        body.page-dashboard .navbar .logo-icon{
            width: 40px;
            height: 40px;
            background: #1a1a1a;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 20px;
            overflow: hidden;
            flex-shrink: 0;
        }

        body.page-dashboard .navbar .logo-icon img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.page-dashboard .navbar .user-info{
            display: flex;
            gap: 20px;
            align-items: center;
        }

        body.page-dashboard .navbar a{
            color: #666;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
        }

        body.page-dashboard .navbar a:hover{
            color: #1a1a1a;
            background: #f5f7fa;
        }

        body.page-dashboard .bind-bot-btn{
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #666;
            padding: 8px 16px;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.2s;
        }

        body.page-dashboard .bind-bot-btn:hover{
            color: #1a1a1a;
            background: #f5f7fa;
        }

        body.page-dashboard .bind-bot-btn svg{
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

        body.page-dashboard .container{
            max-width: 1920px;
            margin: 0 auto;
            padding: 20px 32px;
            width: 100%;
            box-sizing: border-box;
        }





        body.page-dashboard .stats{
            background: white;
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }

        body.page-dashboard .stats h2{
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 14px;
            font-weight: 600;
        }

        body.page-dashboard .stats-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        body.page-dashboard .stat-card{
            background: #f8fafc;
            padding: 12px 10px;
            border-radius: 10px;
            text-align: center;
            border: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        body.page-dashboard .stat-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            border-radius: 10px 10px 0 0;
        }

        body.page-dashboard .stat-card:nth-child(1)::before{
            background: var(--primary);
        }

        body.page-dashboard .stat-card:nth-child(2)::before{
            background: var(--neutral-accent);
        }

        body.page-dashboard .stat-card:nth-child(3)::before{
            background: var(--cyan);
        }

        body.page-dashboard .stat-card:hover{
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }

        body.page-dashboard .stat-card-icon{
            width: 32px;
            height: 32px;
            margin: 0 auto 8px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        body.page-dashboard .stat-card:nth-child(1) .stat-card-icon{
            background: rgba(59, 130, 246, 0.15);
        }

        body.page-dashboard .stat-card:nth-child(2) .stat-card-icon{
            background: rgba(48, 48, 48, 0.15);
        }

        body.page-dashboard .stat-card:nth-child(3) .stat-card-icon{
            background: rgba(6, 182, 212, 0.15);
        }

        body.page-dashboard .stat-card h3{
            font-size: 22px;
            margin-bottom: 4px;
            color: var(--text-primary);
            font-weight: 700;
            letter-spacing: -0.3px;
        }

        body.page-dashboard .stat-card:nth-child(1) h3{
            color: var(--primary);
        }

        body.page-dashboard .stat-card:nth-child(2) h3{
            color: var(--neutral-accent);
        }

        body.page-dashboard .stat-card:nth-child(3) h3{
            color: var(--cyan);
        }

        body.page-dashboard .stat-card p{
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 500;
            letter-spacing: 0.2px;
        }

        body.page-dashboard .search-section{
            background: white;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        body.page-dashboard .search-section h2{
            margin-bottom: 20px;
            color: #333;
        }

        body.page-dashboard .search-box{
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
            background: #f8fafc;
            padding: 8px;
            border-radius: 12px;
            border: 1px solid var(--border);
        }

        body.page-dashboard .search-box input{
            flex: 1;
            padding: 10px 14px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            background: white;
            transition: all 0.2s;
        }

        body.page-dashboard .search-box input:focus{
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.page-dashboard .search-box select{
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }

        body.page-dashboard .search-box button{
            padding: 10px 24px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
            white-space: nowrap;
        }

        body.page-dashboard .search-box button:hover{
            background: var(--primary-dark);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
        }

        body.page-dashboard .search-box button:active{
            transform: translateY(0);
        }

        body.page-dashboard .search-results{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 16px;
        }

        /* 大屏幕限制最大列数 */
        @media (min-width: 1600px) {
            body.page-dashboard .search-results{
                grid-template-columns: repeat(10, 1fr);
            }
        }

        body.page-dashboard .movie-card{
            background: white;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid var(--border);
            position: relative;
            width: 100%;
        }

        body.page-dashboard .movie-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.12);
            border-color: var(--primary);
        }

        body.page-dashboard .movie-card:active{
            transform: translateY(-2px);
        }

        body.page-dashboard .movie-card.requested::after{
            content: '✓ 已求片';
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(16, 185, 129, 0.95);
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            z-index: 2;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        /* Emby已入库标签 */
        body.page-dashboard .emby-badge{
            position: absolute;
            top: 8px;
            right: 8px;
            background: #52c234;
            color: white;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            z-index: 2;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            gap: 3px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        /* 部分缺失标签（黄色） */
        body.page-dashboard .emby-badge-partial{
            background: #f59e0b;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
        }

        /* 如果同时有已求片和已入库，调整位置 */
        body.page-dashboard .movie-card.requested .emby-badge{
            top: 38px;
        }

        body.page-dashboard .movie-card img{
            width: 100%;
            aspect-ratio: 2/3;
            object-fit: cover;
            background: #f0f0f0;
            transition: opacity 0.3s;
            display: block;
        }

        body.page-dashboard .movie-card img[data-src]{
            opacity: 0;
        }

        body.page-dashboard .movie-card img.loaded{
            opacity: 1;
        }

        body.page-dashboard .movie-card .info{
            padding: 8px;
        }

        body.page-dashboard .movie-card h3{
            font-size: 14px;
            margin-bottom: 5px;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body.page-dashboard .movie-card p{
            font-size: 12px;
            color: #666;
        }

        body.page-dashboard .movie-card .rating{
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 4px;
        }

        body.page-dashboard .movie-card .rating .star{
            color: #fbbf24;
            font-size: 12px;
        }

        body.page-dashboard .movie-card .rating .score{
            font-weight: 600;
            color: #1f2937;
        }

        /* 备注输入框 */
        body.page-dashboard .note-input{
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            margin-top: 10px;
            resize: vertical;
            min-height: 60px;
        }

        body.page-dashboard .note-input:focus{
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.page-dashboard .my-requests{
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        body.page-dashboard .my-requests h2{
            margin-bottom: 20px;
            color: #333;
        }

        body.page-dashboard .request-list{
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        body.page-dashboard .request-item{
            display: flex;
            gap: 12px;
            padding: 12px;
            background: white;
            border-radius: 10px;
            border: 1px solid var(--border);
            border-left: 4px solid var(--primary);
        }

        body.page-dashboard .request-item img{
            width: 80px;
            height: 120px;
            object-fit: cover;
            border-radius: 5px;
        }

        body.page-dashboard .request-item .details{
            flex: 1;
        }

        body.page-dashboard .request-item h3{
            color: #333;
            margin-bottom: 5px;
        }

        body.page-dashboard .request-item .status{
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            margin-top: 10px;
        }

        body.page-dashboard .status.pending{ background: #ffeaa7; color: #d63031; }
        body.page-dashboard .status.approved{ background: #55efc4; color: #00b894; }
        body.page-dashboard .status.processing{ background: #55efc4; color: #00b894; }
        body.page-dashboard .status.completed{ background: #74b9ff; color: #0984e3; }
        body.page-dashboard .status.rejected{ background: #fab1a0; color: #e17055; }
        body.page-dashboard .status.downloading{ background: #c7d2fe; color: #4338ca; }
        body.page-dashboard .status.downloaded{ background: #fde68a; color: #b45309; }
        body.page-dashboard .status.failed{ background: #fecaca; color: #b91c1c; }

        /* 下载状态UI卡片 */
        body.page-dashboard .download-status-card{
            margin-top: 12px;
            background: #f8fafc;
            border-radius: 12px;
            padding: 14px 16px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

        body.page-dashboard .download-status-card .card-header{
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        body.page-dashboard .download-status-card .card-header .icon{
            font-size: 18px;
        }

        body.page-dashboard .download-status-card .card-header .title{
            font-size: 13px;
            font-weight: 600;
            color: #334155;
        }

        body.page-dashboard .download-status-card .card-header .badge{
            margin-left: auto;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 12px;
            font-weight: 500;
        }

        /* 下载中状态卡片 */
        body.page-dashboard .download-status-card.downloading{
            background: #eff6ff;
            border-color: #93c5fd;
        }

        body.page-dashboard .download-status-card.downloading .card-header .title{
            color: #1e40af;
        }

        body.page-dashboard .download-status-card.downloading .card-header .badge{
            background: #3b82f6;
            color: white;
        }

        /* 待上架状态卡片 */
        body.page-dashboard .download-status-card.pending-release{
            background: #fffbeb;
            border-color: #fcd34d;
        }

        body.page-dashboard .download-status-card.pending-release .card-header .title{
            color: #92400e;
        }

        body.page-dashboard .download-status-card.pending-release .card-header .badge{
            background: #f59e0b;
            color: white;
        }

        body.page-dashboard .download-status-card.pending-release .pending-message{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(245, 158, 11, 0.1);
            border-radius: 8px;
            font-size: 13px;
            color: #92400e;
        }

        body.page-dashboard .download-status-card.pending-release .pending-message .spinner{
            width: 16px;
            height: 16px;
            border: 2px solid #fcd34d;
            border-top-color: #f59e0b;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        /* 已完成状态卡片 */
        body.page-dashboard .download-status-card.completed{
            background: #ecfdf5;
            border-color: #6ee7b7;
        }

        body.page-dashboard .download-status-card.completed .card-header .title{
            color: #065f46;
        }

        body.page-dashboard .download-status-card.completed .card-header .badge{
            background: #10b981;
            color: white;
        }

        body.page-dashboard .download-status-card.completed .complete-message{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 8px;
            font-size: 13px;
            color: #065f46;
            font-weight: 500;
        }

        /* 下载失败状态卡片 */
        body.page-dashboard .download-status-card.failed{
            background: #fef2f2;
            border-color: #fca5a5;
        }

        body.page-dashboard .download-status-card.failed .card-header .title{
            color: #991b1b;
        }

        body.page-dashboard .download-status-card.failed .card-header .failed-badge{
            background: #ef4444;
            color: white;
        }

        body.page-dashboard .download-status-card.failed .failed-message{
            padding: 12px;
        }

        body.page-dashboard .download-status-card.failed .error-text{
            color: #991b1b;
            font-size: 13px;
            margin: 0 0 12px 0;
            padding: 8px 12px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 6px;
            border-left: 3px solid #ef4444;
        }

        body.page-dashboard .download-status-card.failed .retry-btn{
            width: 100%;
            padding: 10px 16px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }

        body.page-dashboard .download-status-card.failed .retry-btn:hover:not(:disabled){
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        body.page-dashboard .download-status-card.failed .retry-btn:disabled{
            opacity: 0.6;
            cursor: not-allowed;
        }

        body.page-dashboard .download-status-card.failed .retry-icon{
            font-size: 16px;
            display: inline-block;
        }

        body.page-dashboard .download-status-card.failed .retry-icon.spinning{
            animation: spin 1s linear infinite;
        }

        body.page-dashboard .download-status-card.failed .retry-exhausted{
            color: #6b7280;
            font-size: 12px;
            text-align: center;
            margin: 0;
            padding: 8px;
            background: rgba(107, 114, 128, 0.1);
            border-radius: 6px;
        }

        /* 下载进度条样式 - 与后台保持一致 */
        body.page-dashboard .download-progress{
            background: transparent;
            padding: 0;
            border: none;
            box-shadow: none;
        }

        body.page-dashboard .download-progress .progress-track{
            width: 100%;
            height: 8px;
            background: #e2e8f0;
            border-radius: 999px;
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        }

        body.page-dashboard .download-progress .progress-fill{
            height: 100%;
            background: #3b82f6;
            border-radius: 999px;
            transition: width 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        body.page-dashboard .download-progress.completed .progress-fill{
            background: #10b981;
        }

        /* 流光动画效果 */
        body.page-dashboard .download-progress .progress-fill::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: transparent;
            animation: shimmer 1.5s infinite;
        }

        body.page-dashboard .download-progress.completed .progress-fill::after{
            display: none;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        body.page-dashboard .download-progress .progress-meta{
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #475569;
            margin-top: 8px;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        body.page-dashboard .download-progress .progress-value{
            font-weight: 700;
            color: #0369a1;
            font-size: 13px;
        }

        body.page-dashboard .download-progress .progress-speed{
            color: #059669;
            font-weight: 500;
        }

        body.page-dashboard .download-progress .progress-eta{
            color: #6b7280;
        }

        body.page-dashboard .message{
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            display: none;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
            animation: slideDown 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

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

        body.page-dashboard .message.success{
            background: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        body.page-dashboard .message.error{
            background: #f8d7da;
            color: #721c24;
            border: 2px solid #f5c6cb;
        }

        body.page-dashboard .no-poster{
            width: 100%;
            height: 225px;
            background: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 48px;
            object-fit: cover;
        }

        body.page-dashboard .pagination{
            display: flex;
            gap: 8px;
            align-items: center;
        }

        body.page-dashboard .pagination button{
            padding: 6px 12px;
            border: 1px solid var(--primary);
            background: white;
            color: var(--primary);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
            font-weight: 500;
        }

        body.page-dashboard .pagination button:hover{
            background: var(--primary);
            color: white;
        }

        body.page-dashboard .pagination button.active{
            background: var(--primary);
            color: white;
        }

        body.page-dashboard .pagination button:disabled{
            opacity: 0.5;
            cursor: not-allowed;
        }

        body.page-dashboard .tabs{
            display: flex;
            gap: 0;
            margin-bottom: 0;
            border-bottom: 3px solid #e0e0e0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }

        body.page-dashboard .tabs::-webkit-scrollbar{
            display: none;
        }

        body.page-dashboard .tab-button{
            padding: 15px 40px;
            background: transparent;
            border: none;
            color: #666;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 3px solid transparent;
            margin-bottom: -3px;
            position: relative;
            scroll-snap-align: center;
        }

        body.page-dashboard .tab-button:hover{
            color: var(--primary);
            background: rgba(59, 130, 246, 0.05);
        }

        body.page-dashboard .tab-button.active{
            color: var(--primary);
            border-bottom-color: var(--primary);
            font-weight: 600;
        }

        body.page-dashboard .tab-button:active{
            transform: scale(0.96);
        }

        body.page-dashboard .tab-content{
            display: none;
            padding: 20px;
            background: white;
            border-radius: 0 0 10px 10px;
        }

        body.page-dashboard .tab-content.active{
            display: block;
        }

        body.page-dashboard .tab-container{
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            min-height: calc(100vh - 420px);
        }

        /* 确认对话框样式 */
        body.page-dashboard .confirm-overlay{






            background: rgba(0, 0, 0, 0.6);



            animation: fadeIn 0.3s ease;
        }



        body.page-dashboard .confirm-dialog{


            padding: 30px;




        }

        body.page-dashboard .confirm-dialog .icon{


            margin-bottom: 20px;
        }

        body.page-dashboard .confirm-dialog h3{


            margin-bottom: 15px;

        }

        body.page-dashboard .confirm-dialog .movie-info{
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }

        body.page-dashboard .confirm-dialog .movie-title{
            font-size: 18px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 5px;
        }

        body.page-dashboard .confirm-dialog .movie-type{
            font-size: 14px;
            color: #666;
        }

        body.page-dashboard .confirm-dialog .buttons{


            justify-content: center;
        }

        body.page-dashboard .confirm-dialog button{
            padding: 12px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        body.page-dashboard .confirm-dialog .btn-cancel{
            background: #e0e0e0;

        }

        body.page-dashboard .confirm-dialog .btn-cancel:hover{
            background: #d0d0d0;
        }

        body.page-dashboard .confirm-dialog .btn-confirm{
            background: var(--primary);

        }

        body.page-dashboard .confirm-dialog .btn-confirm:hover{
            background: var(--primary-dark);


        }

        body.page-dashboard .confirm-dialog .btn-confirm:active{
            transform: translateY(0) scale(0.96);
        }

        body.page-dashboard .confirm-dialog .btn-cancel:active{
            transform: scale(0.96);
        }

        /* 电视剧季/集选择器样式 */
        body.page-dashboard .tv-request-dialog{
            max-width: 500px;
        }

        body.page-dashboard .tv-scope-selector{
            margin: 15px 0;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        body.page-dashboard .scope-title{
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            font-size: 15px;
        }

        body.page-dashboard .scope-options{
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 15px;
        }

        body.page-dashboard .scope-option{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }

        body.page-dashboard .scope-option:hover{
            background: #e8f4ff;
            border-color: #3b82f6;
        }

        body.page-dashboard .scope-option input[type="radio"]{
            width: 18px;
            height: 18px;
            accent-color: #3b82f6;
        }

        body.page-dashboard .scope-option .option-label{
            font-size: 14px;
            color: #333;
        }

        body.page-dashboard .season-selector,
body.page-dashboard .episode-selector{
            margin-top: 12px;
            padding: 12px;
            background: white;
            border-radius: 8px;
        }

        body.page-dashboard .season-selector label,
body.page-dashboard .episode-selector label{
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 6px;
        }

        body.page-dashboard .season-selector select,
body.page-dashboard .episode-selector select{
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            background: white;
            cursor: pointer;
            transition: border-color 0.2s;
        }

        body.page-dashboard .season-selector select:focus,
body.page-dashboard .episode-selector select:focus{
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.page-dashboard .season-loading,
body.page-dashboard .episode-loading{
            margin-top: 8px;
            font-size: 12px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        body.page-dashboard .mini-spinner{
            width: 14px;
            height: 14px;
            border: 2px solid #e0e0e0;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        body.page-dashboard .user-note-input{
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e9ecef;
        }

        body.page-dashboard .user-note-input label{
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 6px;
        }

        body.page-dashboard .user-note-input input{
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
            box-sizing: border-box;
        }

        body.page-dashboard .user-note-input input:focus{
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.page-dashboard .user-note-input input::placeholder{
            color: #aaa;
        }

        /* Emby库状态信息显示 */
        body.page-dashboard .emby-status-warning{
            display: flex;
            gap: 12px;
            padding: 12px 14px;
            background: #fffbeb;
            border-left: 4px solid #f59e0b;
            border-radius: 8px;
            align-items: flex-start;
        }

        body.page-dashboard .emby-status-warning .warning-icon{
            font-size: 22px;
            flex-shrink: 0;
        }

        body.page-dashboard .emby-status-warning .warning-content{
            flex: 1;
        }

        body.page-dashboard .emby-status-warning .warning-content strong{
            display: block;
            color: #92400e;
            font-size: 14px;
            margin-bottom: 6px;
        }

        body.page-dashboard .emby-status-warning .warning-content p{
            margin: 4px 0;
            font-size: 13px;
            color: #78350f;
        }

        body.page-dashboard .emby-status-warning .season-info{
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
            font-weight: 500;
        }

        body.page-dashboard .emby-status-warning .season-info.missing{
            color: #dc2626;
        }

        body.page-dashboard .emby-status-complete{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: #ecfdf5;
            border-left: 4px solid #10b981;
            border-radius: 8px;
            color: #065f46;
            font-size: 13px;
            font-weight: 500;
        }

        body.page-dashboard .emby-status-complete .complete-icon{
            font-size: 18px;
        }

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

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        /* 加载动画 */
        body.page-dashboard .loading-overlay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        /* 搜索加载动画 */
        body.page-dashboard .search-loading{
            display: none;
            text-align: center;
            padding: 40px 0;
            color: var(--primary);
        }

        body.page-dashboard .search-loading.show{
            display: block;
        }

        body.page-dashboard .search-loading .spinner{
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        body.page-dashboard .loading-overlay.show{
            display: flex;
        }

        body.page-dashboard .loading-spinner{



            border-top: 6px solid var(--primary);


            margin: 0 auto;
        }

        body.page-dashboard .loading-content{
            text-align: center;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        body.page-dashboard .wallet-payment-overlay[hidden] {
            display: none;
        }

        body.page-dashboard .wallet-payment-overlay {
            position: fixed;
            inset: 0;
            z-index: 10010;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(24, 23, 21, 0.48);
            backdrop-filter: blur(3px);
        }

        body.page-dashboard .wallet-payment-dialog {
            width: min(410px, 100%);
            padding: 30px 28px 24px;
            border: 1px solid #e1e8f2;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 22px 60px rgba(34, 31, 27, 0.2);
            text-align: center;
        }

        body.page-dashboard .wallet-payment-spinner {
            width: 42px;
            height: 42px;
            margin: 0 auto 18px;
            border: 4px solid #e1e8f2;
            border-top-color: #242422;
            border-radius: 50%;
            animation: walletPaymentSpin 0.8s linear infinite;
        }

        body.page-dashboard .wallet-payment-dialog h3 {
            margin: 0;
            color: #0c1628;
            font-size: 20px;
        }

        body.page-dashboard .wallet-payment-dialog p {
            margin: 10px 0 20px;
            color: #6d809d;
            font-size: 13px;
            line-height: 1.65;
        }

        body.page-dashboard .wallet-payment-actions {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        body.page-dashboard .wallet-payment-dialog button {
            min-height: 38px;
            padding: 0 16px;
            border: 1px solid #e1e8f2;
            border-radius: 8px;
            background: #fff;
            color: #34445d;
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
        }

        body.page-dashboard .wallet-payment-dialog .wallet-payment-confirm {
            border-color: #242422;
            background: #242422;
            color: #fff;
        }

        body.page-dashboard .wallet-payment-dialog .wallet-payment-confirm:hover {
            border-color: #11110f;
            background: #11110f;
            color: #fff;
        }

        body.page-dashboard .wallet-payment-dialog .wallet-payment-confirm:disabled {
            cursor: wait;
            opacity: .68;
        }

        body.page-dashboard .wallet-payment-dialog button:hover {
            border-color: #242422;
            color: #242422;
        }

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

        body.page-dashboard .loading-content p{
            margin-top: 20px;
            font-size: 18px;
            font-weight: 600;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 公告弹窗样式 */
        body.page-dashboard .announcement-overlay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        body.page-dashboard .announcement-overlay.show{
            display: flex;
        }

        body.page-dashboard .announcement-dialog{
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            animation: slideIn 0.3s ease;
        }

        body.page-dashboard .announcement-dialog .icon{
            text-align: center;
            font-size: 60px;
            margin-bottom: 20px;
        }

        body.page-dashboard .announcement-dialog h3{
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 700;
        }

        body.page-dashboard .announcement-dialog .content{
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 25px;
            line-height: 1.8;
            color: #333;
            font-size: 15px;
            text-align: center;
        }

        body.page-dashboard .announcement-dialog .content h4{
            color: var(--primary);
            margin-bottom: 12px;
            font-size: 16px;
            text-align: center;
        }

        body.page-dashboard .announcement-dialog .content p{
            margin-bottom: 10px;
            text-align: center;
        }

        body.page-dashboard .announcement-dialog .content ul{
            margin-left: 0;
            margin-bottom: 10px;
            list-style-position: inside;
            text-align: center;
        }

        body.page-dashboard .announcement-dialog .content li{
            margin-bottom: 6px;
            text-align: center;
        }

        body.page-dashboard .announcement-dialog .buttons{
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        body.page-dashboard .announcement-dialog button{
            padding: 12px 40px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            background: var(--primary);
            color: white;
        }

        body.page-dashboard .announcement-dialog button:hover{
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        body.page-dashboard .announcement-dialog button:active{
            transform: translateY(0) scale(0.96);
        }

        /* ==================== 移动端响应式设计 ==================== */
        @media (max-width: 768px) {
            /* 导航栏 */
            body.page-dashboard .navbar{
                padding: 10px 16px;



                flex-direction: row;
                flex-wrap: wrap;
                gap: 8px;
            }

            body.page-dashboard .navbar .logo{
                font-size: 14px;
                flex: 1 1 100%;
                justify-content: center;
                gap: 8px;
            }

            body.page-dashboard .navbar .logo-icon{
                width: 28px;
                height: 28px;
                border-radius: 6px;
                font-size: 16px;
            }

            body.page-dashboard .user-info{
                flex: 1 1 100%;
                justify-content: center;
                gap: 8px;
                font-size: 13px;
            }

            body.page-dashboard .user-info span{
                font-size: 12px;
            }

            body.page-dashboard .user-info a{
                padding: 6px 12px;
                font-size: 12px;
                border-radius: 6px;
            }

            /* 容器 */
            body.page-dashboard .container{
                padding: 8px;
                max-width: 100%;
                margin: 8px auto;
            }

            /* 统计卡片 */


            body.page-dashboard .stats{
                padding: 12px;
                border-radius: 10px;
                margin-bottom: 16px;
            }

            body.page-dashboard .stats h2{
                font-size: 13px;
                margin-bottom: 10px;
            }

            body.page-dashboard .stats-grid{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
                max-width: 100%;
            }

            body.page-dashboard .stat-card{
                padding: 10px 6px;
                border-radius: 8px;
            }

            body.page-dashboard .stat-card-icon{
                width: 26px;
                height: 26px;
                margin-bottom: 6px;
                border-radius: 6px;
                font-size: 12px;
            }

            body.page-dashboard .stat-card h3{
                font-size: 18px;
                margin-bottom: 2px;
            }

            body.page-dashboard .stat-card p{
                font-size: 9px;
            }

            /* 标签页容器 */
            body.page-dashboard .tab-container{
                border-radius: 12px;
            }

            /* 标签页 */
            body.page-dashboard .tabs{
                flex-direction: row;
                gap: 8px;
                border-bottom: none;
                padding: 12px 12px 0;
                background: white;
            }

            body.page-dashboard .tab-button{
                padding: 10px 16px;
                font-size: 13px;
                border: 1px solid #e0e0e0;
                border-radius: 999px;
                margin-bottom: 0;
                white-space: nowrap;
            }

            body.page-dashboard .tab-button.active{
                background: var(--primary);
                color: white;
                border-color: var(--primary);
            }

            body.page-dashboard .tab-content{
                padding: 12px 8px;
            }

            /* 搜索框 */
            body.page-dashboard .search-box{
                flex-direction: column;
                gap: 8px;
                margin-bottom: 16px;
            }

            body.page-dashboard .search-box input{
                font-size: 14px;
                padding: 11px 14px;

            }

            body.page-dashboard .search-box button{
                width: 100%;
                padding: 11px;
                border-radius: 10px;
                font-size: 14px;
            }

            /* 电影卡片 */
            body.page-dashboard .search-results{


                justify-content: start;
            }

            body.page-dashboard .movie-card{
                border-radius: 10px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }

            body.page-dashboard .movie-card img,
body.page-dashboard .no-poster{
                height: 200px;
                object-fit: cover;
            }

            body.page-dashboard .movie-card .info{
                padding: 8px;
            }

            body.page-dashboard .movie-card h3{
                font-size: 12px;
                line-height: 1.3;
                margin-bottom: 4px;
                max-height: 2.6em;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            body.page-dashboard .movie-card p{
                font-size: 10px;
                margin: 2px 0;
            }

            /* 热门推荐区域 */
            body.page-dashboard #trendingTab > div{
                margin-bottom: 20px !important;
            }

            body.page-dashboard #trendingTab h3{
                font-size: 15px !important;
                margin-bottom: 10px !important;
            }

            body.page-dashboard #trendingTab .pagination{
                flex-wrap: wrap;
                gap: 4px;
            }

            body.page-dashboard #trendingTab .pagination button{
                min-width: 30px;
                height: 30px;
                padding: 0 6px;
                font-size: 12px;
            }

            /* 我的求片记录 */
            body.page-dashboard .my-requests h3{
                font-size: 16px;
            }

            body.page-dashboard .request-item{
                flex-direction: row;
                align-items: flex-start;
                padding: 10px;
                border-left-width: 3px;
                gap: 10px;
            }

            body.page-dashboard .request-item img{
                width: 60px;
                height: 90px;
                flex-shrink: 0;
            }

            body.page-dashboard .request-item .details{
                flex: 1;
                min-width: 0;
            }

            body.page-dashboard .request-item .details h3{
                font-size: 14px;
                margin-bottom: 6px;
            }

            body.page-dashboard .request-item .details p{
                font-size: 12px;
                line-height: 1.4;
            }

            body.page-dashboard .status{
                font-size: 11px;
                padding: 3px 8px;
                margin-top: 6px;
            }

            /* 下载状态卡片移动端适配 */
            body.page-dashboard .download-status-card{
                margin-top: 10px;
                padding: 10px 12px;
                border-radius: 10px;
            }

            body.page-dashboard .download-status-card .card-header{
                gap: 6px;
                margin-bottom: 8px;
            }

            body.page-dashboard .download-status-card .card-header .icon{
                font-size: 16px;
            }

            body.page-dashboard .download-status-card .card-header .title{
                font-size: 12px;
            }

            body.page-dashboard .download-status-card .card-header .badge{
                font-size: 10px;
                padding: 2px 6px;
            }

            body.page-dashboard .download-status-card.pending-release .pending-message,
body.page-dashboard .download-status-card.completed .complete-message{
                padding: 8px 10px;
                font-size: 12px;
                gap: 8px;
            }

            body.page-dashboard .download-status-card.pending-release .pending-message .spinner{
                width: 14px;
                height: 14px;
            }

            /* 下载进度条移动端适配 */
            body.page-dashboard .download-progress .progress-track{
                height: 6px;
            }

            body.page-dashboard .download-progress .progress-meta{
                font-size: 11px;
                gap: 8px;
                margin-top: 6px;
            }

            body.page-dashboard .download-progress .progress-value{
                font-size: 12px;
            }

            /* 确认对话框 */
            body.page-dashboard .confirm-dialog{
                padding: 20px 18px;
                width: 90%;
                max-width: 320px;
                border-radius: 16px;
            }

            body.page-dashboard .confirm-dialog .icon{
                font-size: 48px;
                margin-bottom: 12px;
            }

            body.page-dashboard .confirm-dialog h3{
                font-size: 17px;
                margin-bottom: 12px;
            }

            body.page-dashboard .confirm-dialog .movie-info{
                padding: 12px;
                margin-bottom: 16px;
            }

            body.page-dashboard .confirm-dialog .movie-title{
                font-size: 15px;
            }

            body.page-dashboard .confirm-dialog .movie-type{
                font-size: 13px;
            }

            body.page-dashboard .confirm-dialog .buttons{
                flex-direction: row;
                gap: 8px;
            }

            body.page-dashboard .confirm-dialog button{
                flex: 1;
                padding: 11px;
                font-size: 14px;
            }

            /* 加载动画 */
            body.page-dashboard .loading-spinner{
                width: 45px;
                height: 45px;
                border-width: 4px;
            }

            body.page-dashboard .loading-content p{
                font-size: 15px;
                margin-top: 16px;
            }
        }

        @media (max-width: 600px) {
            body.page-dashboard .navbar .logo{
                font-size: 13px;
            }

            body.page-dashboard .navbar .logo-icon{
                width: 26px;
                height: 26px;
            }

            body.page-dashboard .stats-grid{
                grid-template-columns: repeat(3, 1fr);
            }

            body.page-dashboard .stat-card{
                padding: 10px 6px;
            }

            body.page-dashboard .stat-card h3{
                font-size: 22px;
            }

            body.page-dashboard .stat-card p{
                font-size: 10px;
            }

            body.page-dashboard .tab-button{
                padding: 9px 14px;
                font-size: 12px;
            }

            body.page-dashboard .search-results{
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
                justify-content: start;
            }

            body.page-dashboard .movie-card img,
body.page-dashboard .no-poster{
                height: 220px;
                object-fit: cover;
            }
        }

        /* 小屏幕手机优化 */
        @media (max-width: 480px) {
            /* 媒体库统计移动端优化 */




            body.page-dashboard .stat-card-icon{
                width: 24px;
                height: 24px;
                font-size: 11px;
            }





            body.page-dashboard .navbar{
                padding: 8px 12px;
                margin: 8px auto;
                border-radius: 14px;
            }

            body.page-dashboard .navbar .logo{
                font-size: 12px;
            }

            body.page-dashboard .navbar .logo-icon{
                width: 24px;
                height: 24px;
            }

            body.page-dashboard .user-info{
                font-size: 11px;
            }

            body.page-dashboard .user-info a{
                padding: 5px 10px;
                font-size: 11px;
            }



            body.page-dashboard .stats{
                padding: 10px;
                margin-bottom: 10px;
            }

            body.page-dashboard .stats h2{
                font-size: 15px;
                margin-bottom: 10px;
            }

            body.page-dashboard .stats-grid{
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;
            }

            body.page-dashboard .stat-card{
                padding: 10px 6px;
            }

            body.page-dashboard .stat-card h3{
                font-size: 20px;
            }

            body.page-dashboard .stat-card p{
                font-size: 10px;
            }

            body.page-dashboard .tabs{

                gap: 6px;
            }



            body.page-dashboard .tab-content{
                padding: 10px 6px;
            }

            body.page-dashboard .search-results{


                justify-content: start;
            }

            body.page-dashboard .movie-card img,
body.page-dashboard .no-poster{
                height: 240px;
                object-fit: cover;
            }

            body.page-dashboard .movie-card .info{
                padding: 6px;
            }

            body.page-dashboard .movie-card h3{
                font-size: 12px;
            }

            body.page-dashboard .movie-card p{
                font-size: 10px;
            }

            body.page-dashboard .request-item{
                padding: 10px;
            }

            body.page-dashboard .request-item img{
                width: 55px;
                height: 82px;
            }

            body.page-dashboard .request-item .details h3{
                font-size: 13px;
            }

            body.page-dashboard .request-item .details p{
                font-size: 11px;
            }

            /* 下载状态卡片小屏幕适配 */
            body.page-dashboard .download-status-card{
                margin-top: 8px;
                padding: 8px 10px;
                border-radius: 8px;
            }

            body.page-dashboard .download-status-card .card-header{
                margin-bottom: 6px;
            }

            body.page-dashboard .download-status-card .card-header .icon{
                font-size: 14px;
            }

            body.page-dashboard .download-status-card .card-header .title{
                font-size: 11px;
            }

            body.page-dashboard .download-status-card.pending-release .pending-message,
body.page-dashboard .download-status-card.completed .complete-message{
                padding: 6px 8px;
                font-size: 11px;
            }

            /* 下载进度条小屏幕适配 */
            body.page-dashboard .download-progress .progress-track{
                height: 5px;
            }

            body.page-dashboard .download-progress .progress-meta{
                font-size: 10px;
            }

            body.page-dashboard .download-progress .progress-value{
                font-size: 11px;
            }

            body.page-dashboard .confirm-dialog{
                width: 92%;
            }

            body.page-dashboard .confirm-dialog button{
                padding: 10px;
                font-size: 13px;
            }

            /* 电视剧选择器移动端适配 */
            body.page-dashboard .tv-request-dialog{
                max-width: 95%;
            }

            body.page-dashboard .tv-scope-selector{
                margin: 12px 0;
                padding: 12px;
            }

            body.page-dashboard .scope-title{
                font-size: 14px;
                margin-bottom: 10px;
            }

            body.page-dashboard .scope-options{
                gap: 8px;
                margin-bottom: 12px;
            }

            body.page-dashboard .scope-option{
                padding: 8px 10px;
            }

            body.page-dashboard .scope-option .option-label{
                font-size: 13px;
            }

            body.page-dashboard .season-selector,
body.page-dashboard .episode-selector{
                padding: 10px;
            }

            body.page-dashboard .season-selector select,
body.page-dashboard .episode-selector select{
                padding: 8px 10px;
                font-size: 13px;
            }

            body.page-dashboard .user-note-input{
                margin-top: 12px;
                padding-top: 12px;
            }

            body.page-dashboard .user-note-input input{
                padding: 8px 10px;
                font-size: 13px;
            }

            /* 热门推荐 */
            body.page-dashboard #trendingTab h3{
                font-size: 14px !important;
            }

            body.page-dashboard #trendingTab .pagination button{
                min-width: 28px;
                height: 28px;
                font-size: 11px;
            }

            /* 公告弹窗移动端适配 */
            body.page-dashboard .announcement-dialog{
                padding: 20px 18px;
                width: 90%;
                max-width: 350px;
                border-radius: 16px;
            }

            body.page-dashboard .announcement-dialog .icon{
                font-size: 48px;
                margin-bottom: 15px;
            }

            body.page-dashboard .announcement-dialog h3{
                font-size: 18px;
                margin-bottom: 15px;
            }

            body.page-dashboard .announcement-dialog .content{
                padding: 15px;
                margin-bottom: 20px;
                font-size: 14px;
            }

            body.page-dashboard .announcement-dialog button{
                padding: 11px;
                font-size: 14px;
                width: 100%;
            }
        }

        /* ==================== 骨架屏加载样式 ==================== */
        body.page-dashboard .skeleton-card{
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            border: 1px solid var(--border);
        }

        body.page-dashboard .skeleton-poster{
            width: 100%;
            padding-top: 150%; /* 2:3 比例 */
            background: #f0f0f0;
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
        }

        body.page-dashboard .skeleton-info{
            padding: 10px;
        }

        body.page-dashboard .skeleton-title{
            height: 14px;
            background: #f0f0f0;
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
            margin-bottom: 8px;
            width: 90%;
        }

        body.page-dashboard .skeleton-year{
            height: 12px;
            background: #f0f0f0;
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
            margin-bottom: 8px;
            width: 50%;
        }

        body.page-dashboard .skeleton-rating{
            height: 12px;
            background: #f0f0f0;
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
            width: 30%;
            margin-bottom: 8px;
        }

        body.page-dashboard .skeleton-tag{
            height: 18px;
            background: #e8e0f0;
            background-size: 200% 100%;
            animation: skeleton-shimmer 1.5s infinite;
            border-radius: 4px;
            width: 45%;
            margin-top: 5px;
        }

        @keyframes skeleton-shimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* 骨架屏淡出动画 */
        body.page-dashboard .skeleton-fade-out{
            animation: skeleton-fade-out 0.3s ease-out forwards;
        }

        @keyframes skeleton-fade-out {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        /* ==================== 空状态样式 ==================== */
        body.page-dashboard .empty-state{
            text-align: center;
            padding: 60px 20px;
            color: #94a3b8;
        }

        body.page-dashboard .empty-icon{
            font-size: 56px;
            margin-bottom: 16px;
            opacity: 0.8;
        }

        body.page-dashboard .empty-title{
            font-size: 18px;
            font-weight: 600;
            color: #64748b;
            margin-bottom: 8px;
        }

        body.page-dashboard .empty-desc{
            font-size: 14px;
            color: #94a3b8;
            max-width: 280px;
            margin: 0 auto;
            line-height: 1.5;
        }

        /* ==================== 搜索按钮加载状态 ==================== */
        body.page-dashboard .search-box button{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 90px;
        }

        body.page-dashboard .search-box button.loading{
            background: #60a5fa;
        }

        body.page-dashboard .search-box button .btn-spinner{
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: btn-spin 0.8s linear infinite;
        }

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

        /* ==================== 图片加载失败占位符 ==================== */
        body.page-dashboard .img-error-placeholder{
            width: 100%;
            padding-top: 150%;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: #94a3b8;
            position: relative;
        }

        body.page-dashboard .img-error-placeholder::after{
            content: '🎬';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* ==================== 下拉刷新 ==================== */
        body.page-dashboard .pull-refresh-container{
            position: relative;
            overflow: visible;
        }

        body.page-dashboard .pull-refresh-indicator{
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.2s, top 0.2s;
            z-index: 10;
            font-size: 14px;
            color: #64748b;
        }

        body.page-dashboard .pull-refresh-indicator.visible{
            opacity: 1;
            top: -40px;
        }

        body.page-dashboard .pull-refresh-indicator.refreshing{
            top: 10px;
        }

        body.page-dashboard .pull-refresh-indicator .refresh-spinner{
            width: 18px;
            height: 18px;
            border: 2px solid #e2e8f0;
            border-top-color: #3b82f6;
            border-radius: 50%;
            animation: refresh-spin 0.8s linear infinite;
        }

        body.page-dashboard .pull-refresh-indicator .refresh-arrow{
            transition: transform 0.2s;
        }

        body.page-dashboard .pull-refresh-indicator.ready .refresh-arrow{
            transform: rotate(180deg);
        }

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

        /* ==================== 移动端汉堡菜单 ==================== */
        body.page-dashboard .mobile-menu-toggle{
            display: none;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            color: #57779d;
            background: #fff;
            border: 1px solid #dce8f7;
            border-radius: 14px;
            box-shadow: 0 3px 10px rgba(40, 75, 118, .06);
            padding: 0;
            cursor: pointer;
            flex-direction: column;
            gap: 4px;
        }

        body.page-dashboard .mobile-menu-toggle:is(:hover, .active) {
            color: #087df1;
            background: #edf5ff;
            border-color: #c8dffb;
        }

        body.page-dashboard .mobile-menu-toggle:focus-visible {
            outline: 3px solid #a8ceff;
            outline-offset: 2px;
        }

        body.page-dashboard .mobile-menu-toggle span{
            display: block;
            width: 18px;
            height: 2px;
            background: currentColor;
            border-radius: 99px;
            transition: transform .2s ease, opacity .2s ease;
        }

        body.page-dashboard .mobile-menu-toggle.active span:nth-child(1){
            transform: translateY(6px) rotate(45deg);
        }

        body.page-dashboard .mobile-menu-toggle.active span:nth-child(2){
            opacity: 0;
        }

        body.page-dashboard .mobile-menu-toggle.active span:nth-child(3){
            transform: translateY(-6px) rotate(-45deg);
        }

        body.page-dashboard .mobile-menu-overlay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s;
        }

        body.page-dashboard .mobile-menu-overlay.show{
            display: block;
            opacity: 1;
        }

        body.page-dashboard .mobile-menu-drawer{
            position: fixed;
            top: 0;
            right: -280px;
            width: 280px;
            height: 100%;
            background: white;
            z-index: 1000;
            transition: right 0.3s ease;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        body.page-dashboard .mobile-menu-drawer.show{
            right: 0;
        }

        body.page-dashboard .mobile-menu-header{
            padding: 20px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.page-dashboard .mobile-menu-header .user-name{
            font-weight: 600;
            color: #1a1a1a;
        }

        body.page-dashboard .mobile-menu-header .user-level{
            font-size: 12px;
            color: #ffd700;
            margin-left: 8px;
        }

        body.page-dashboard .mobile-menu-close{
            background: none;
            border: none;
            font-size: 24px;
            color: #64748b;
            cursor: pointer;
            padding: 4px;
        }

        body.page-dashboard .mobile-menu-links{
            flex: 1;
            padding: 10px 0;
        }

        body.page-dashboard .mobile-menu-links a{
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            color: #333;
            text-decoration: none;
            transition: background 0.2s;
        }

        body.page-dashboard .mobile-menu-links a:hover,
body.page-dashboard .mobile-menu-links a:active{
            background: #f1f5f9;
        }

        body.page-dashboard .mobile-menu-links a svg{
            width: 20px;
            height: 20px;
            fill: #64748b;
        }

        @media (max-width: 768px) {
            body.page-dashboard .navbar .user-info{
                display: none;
            }

            body.page-dashboard .mobile-menu-toggle{
                display: flex;
            }

            body.page-dashboard .navbar .logo span{
                font-size: 14px;
            }
        }

        /* ==================== 搜索过滤器 ==================== */
        body.page-dashboard .search-filters{
            display: flex;
            gap: 10px;
            margin-top: 12px;
            flex-wrap: wrap;
        }

        body.page-dashboard .filter-group{
            display: flex;
            align-items: center;
            gap: 6px;
        }

        body.page-dashboard .filter-group label{
            font-size: 13px;
            color: #64748b;
        }

        body.page-dashboard .filter-group select{
            padding: 6px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 13px;
            background: white;
            color: #333;
            cursor: pointer;
            outline: none;
            transition: border-color 0.2s;
        }

        body.page-dashboard .filter-group select:focus{
            border-color: #3b82f6;
        }

        body.page-dashboard .filter-reset{
            padding: 6px 12px;
            background: #f1f5f9;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            color: #64748b;
            cursor: pointer;
            transition: all 0.2s;
        }

        body.page-dashboard .filter-reset:hover{
            background: #e2e8f0;
            color: #333;
        }

/* ============================================
   订阅信息页面样式
   ============================================ */
body.page-dashboard .subscription-container{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.page-dashboard .subscription-status-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}

body.page-dashboard .status-header{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.page-dashboard .status-icon{
    font-size: 24px;
}

body.page-dashboard .status-title{
    font-size: 18px;
    font-weight: 600;
}

body.page-dashboard .status-content .loading-placeholder{
    text-align: center;
    padding: 20px;
}

body.page-dashboard .status-content .subscription-info{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

body.page-dashboard .subscription-info-item{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

body.page-dashboard .subscription-info-item .label{
    font-size: 12px;
    color: #4a4a4a;
    margin-bottom: 4px;
}

body.page-dashboard .subscription-info-item .value{
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-dashboard .sub-section-title{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

body.page-dashboard .history-list{
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

body.page-dashboard .history-item{

    border-bottom: 1px solid #e2e8f0;

    justify-content: space-between;

}

body.page-dashboard .history-item:last-child{
    border-bottom: none;
}

body.page-dashboard .subscription-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.page-dashboard .action-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    border: none;
}

body.page-dashboard .action-btn svg{
    width: 18px;
    height: 18px;
}

body.page-dashboard .action-btn.primary{
    background: #3b82f6;
    color: white;
}

/* ============================================
   订阅页面 - 白色简约风格
   ============================================ */
body.page-dashboard .subscription-page-container{
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
}

/* 订阅主卡片 - 白色风格 */
body.page-dashboard .subscription-hero-card{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    padding: 32px;
    color: #1e293b;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

body.page-dashboard .subscription-hero-bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
}

body.page-dashboard .subscription-hero-content{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

body.page-dashboard .hero-left{
    flex: 1;
}

body.page-dashboard .hero-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #475569;
}

body.page-dashboard .badge-icon{
    font-size: 18px;
    color: #f59e0b;
}

body.page-dashboard .hero-title h2{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1e293b;
}

body.page-dashboard .hero-level{
    font-size: 16px;
    color: #64748b;
}

body.page-dashboard .hero-right{
    flex-shrink: 0;
}

/* 倒计时环形进度 - 深色风格 */
body.page-dashboard .hero-countdown{
    width: 140px;
    height: 140px;
}

body.page-dashboard .countdown-ring{
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-dashboard .countdown-ring svg{
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

body.page-dashboard .countdown-bg{
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}

body.page-dashboard .countdown-progress{
    fill: none;
    stroke: #3b82f6;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 1s ease;
}

body.page-dashboard .countdown-inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

body.page-dashboard .countdown-days{
    display: block;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    color: #1e293b;
}

body.page-dashboard .countdown-label{
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* 订阅详情网格 - 白色卡片 */
body.page-dashboard .subscription-details-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

body.page-dashboard .detail-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

body.page-dashboard .detail-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #3b82f6;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.page-dashboard .detail-card:hover::before{
    opacity: 1;
}

body.page-dashboard .detail-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

body.page-dashboard .detail-icon{
    width: 52px;
    height: 52px;
    background: #f8fafc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .detail-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-dashboard .detail-label{
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

body.page-dashboard .detail-value{
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #1e293b;
    background-clip: unset;
}

/* 🛡️ 保号信息卡片 */
body.page-dashboard .retention-info-section{
    margin-top: 0;
}

body.page-dashboard .retention-card{
    background: #ffffff;
    border-radius: 20px;
    padding: 0;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

body.page-dashboard .retention-card:hover{
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .retention-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

body.page-dashboard .retention-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--badge-color, #333333);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

body.page-dashboard .retention-badge-icon{
    font-size: 16px;
}

body.page-dashboard .retention-renew-tag{
    font-size: 13px;
    color: #64748b;
    background: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-weight: 500;
}

body.page-dashboard .retention-body{
    padding: 24px;
}

body.page-dashboard .retention-explain{
    margin-bottom: 16px;
}

body.page-dashboard .retention-explain p{
    margin: 0;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

body.page-dashboard .retention-explain b{
    color: #1e293b;
}

body.page-dashboard .retention-conditions{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .retention-condition-card{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

body.page-dashboard .retention-condition-card:hover{
    background: #f1f5f9;
}

body.page-dashboard .retention-condition-card.condition-met{
    border-color: #86efac;
    background: #f0fdf4;
}

body.page-dashboard .retention-condition-card.condition-unmet{
    border-color: #fecaca;
    background: #fef2f2;
}

body.page-dashboard .condition-icon{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

body.page-dashboard .condition-detail{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .condition-title{
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
    margin-bottom: 2px;
}

body.page-dashboard .condition-desc{
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

body.page-dashboard .condition-desc b{
    color: #1e293b;
    font-weight: 700;
}

body.page-dashboard .condition-status{
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 8px;
    flex-shrink: 0;
}

body.page-dashboard .condition-status.status-ok{
    color: #16a34a;
    background: #dcfce7;
}

body.page-dashboard .condition-status.status-no{
    color: #dc2626;
    background: #fee2e2;
}

body.page-dashboard .condition-status.status-info{
    color: #333333;
    background: #eef2ff;
}

body.page-dashboard .retention-both-tip{
    margin-top: 14px;
    padding: 10px 16px;
    background: #f7f9fd;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

body.page-dashboard .retention-both-tip b{
    color: #b45309;
}

/* 操作按钮组 - 简约风格 */
body.page-dashboard .subscription-action-group{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

body.page-dashboard .sub-action-btn{
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

body.page-dashboard .sub-action-btn::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: left 0.5s ease;
}

body.page-dashboard .sub-action-btn:hover::before{
    left: 100%;
}

body.page-dashboard .sub-action-btn.primary{
    background: #1e293b;
    color: white;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
}

body.page-dashboard .sub-action-btn.primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(30, 41, 59, 0.25);
    background: #0f172a;
}

body.page-dashboard .sub-action-btn.secondary{
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.page-dashboard .sub-action-btn.secondary:hover{
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.page-dashboard .sub-action-btn .btn-icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

body.page-dashboard .sub-action-btn:hover .btn-icon{
    transform: scale(1.1);
}

body.page-dashboard .sub-action-btn.primary .btn-icon{
    background: rgba(255, 255, 255, 0.15);
}

body.page-dashboard .sub-action-btn.secondary .btn-icon{
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .sub-action-btn .btn-content{
    flex: 1;
    text-align: left;
}

body.page-dashboard .sub-action-btn .btn-title{
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

body.page-dashboard .sub-action-btn .btn-desc{
    display: block;
    font-size: 13px;
    opacity: 0.8;
}

body.page-dashboard .sub-action-btn.primary .btn-desc{
    color: rgba(255, 255, 255, 0.8);
}

body.page-dashboard .sub-action-btn.secondary .btn-desc{
    color: #64748b;
}

body.page-dashboard .sub-action-btn .btn-arrow{
    font-size: 18px;
    color: #94a3b8;
    transition: transform 0.3s;
}

body.page-dashboard .sub-action-btn:hover .btn-arrow{
    transform: translateX(4px);
}

body.page-dashboard .sub-action-btn.primary .btn-arrow{
    color: rgba(255, 255, 255, 0.7);
}

/* 订阅历史时间线 - 白色背景 */
body.page-dashboard .subscription-history-section{
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    min-height: 200px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .history-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

body.page-dashboard .history-header h3{
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #1e293b;
    background-clip: unset;
}

body.page-dashboard .history-count{
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .history-timeline{
    position: relative;
}

body.page-dashboard .history-empty{
    text-align: center;
    padding: 40px 20px;
}

body.page-dashboard .history-empty .empty-illustration{
    margin-bottom: 16px;
}

body.page-dashboard .history-empty .empty-illustration svg{
    width: 150px;
    height: auto;
}

body.page-dashboard .history-empty p{
    font-size: 16px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

body.page-dashboard .history-empty span{
    font-size: 13px;
    color: #94a3b8;
}

/* 历史记录项 */
body.page-dashboard .history-item-new{
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    transition: background 0.2s;
}

body.page-dashboard .history-item-new:hover{
    background: #f8fafc;
}

body.page-dashboard .history-item-new.gift-item{
    background: rgba(34, 197, 94, 0.04);
}

body.page-dashboard .history-item-new.gift-item:hover{
    background: rgba(34, 197, 94, 0.08);
}

body.page-dashboard .history-item-new.purchase-item{
    background: rgba(59, 130, 246, 0.04);
}

body.page-dashboard .history-item-new.purchase-item:hover{
    background: rgba(59, 130, 246, 0.08);
}

body.page-dashboard .history-dot{
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    position: relative;
}

body.page-dashboard .history-dot.gift{
    background: #22c55e;
}

body.page-dashboard .history-dot.purchase{
    background: #3b82f6;
}

body.page-dashboard .history-item-new:not(:last-child) .history-dot::after{
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + 20px);
    background: #e2e8f0;
}

body.page-dashboard .history-item-content{
    flex: 1;
}

body.page-dashboard .history-item-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

body.page-dashboard .history-item-title{
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0;
}

body.page-dashboard .source-tag{
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

body.page-dashboard .source-tag.gift{
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

body.page-dashboard .source-tag.purchase{
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

body.page-dashboard .source-tag.redeem{
    background: rgba(48, 48, 48, 0.15);
    color: #333333;
}

body.page-dashboard .source-tag.manual{
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

body.page-dashboard .history-item-new.redeem-item{
    background: rgba(48, 48, 48, 0.04);
}

body.page-dashboard .history-item-new.redeem-item:hover{
    background: rgba(48, 48, 48, 0.08);
}

body.page-dashboard .history-item-new.manual-item{
    background: rgba(100, 116, 139, 0.04);
}

body.page-dashboard .history-item-new.manual-item:hover{
    background: rgba(100, 116, 139, 0.08);
}

body.page-dashboard .history-dot.redeem{
    background: #333333;
}

body.page-dashboard .history-dot.manual{
    background: #64748b;
}

body.page-dashboard .history-item-meta{
    font-size: 13px;
    color: #64748b;




}

body.page-dashboard .duration-tag,
body.page-dashboard .price-tag{
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
}



/* 响应式设计 */
@media (max-width: 768px) {
    body.page-dashboard .subscription-hero-card{
        padding: 24px;
    }

    body.page-dashboard .subscription-hero-content{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    body.page-dashboard .hero-left{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body.page-dashboard .hero-badge{
        align-self: center;
    }

    body.page-dashboard .hero-title h2{
        font-size: 22px;
    }

    body.page-dashboard .hero-countdown{
        width: 120px;
        height: 120px;
    }

    body.page-dashboard .countdown-days{
        font-size: 28px;
    }

    body.page-dashboard .subscription-details-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-dashboard .detail-card{
        padding: 16px;
    }

    body.page-dashboard .detail-icon{
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    body.page-dashboard .detail-value{
        font-size: 16px;
    }

    body.page-dashboard .subscription-action-group{
        grid-template-columns: 1fr;
    }

    /* 保号卡片响应式 */
    body.page-dashboard .retention-header{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        padding: 16px 18px;
    }

    body.page-dashboard .retention-body{
        padding: 18px;
    }

    body.page-dashboard .retention-condition-card{
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }

    body.page-dashboard .condition-status{
        width: 100%;
        text-align: center;
    }

    body.page-dashboard .sub-action-btn{
        min-width: 100%;
        padding: 16px 20px;
    }

}

/* ============================================
   订阅页面 UI 重构（作用域：#section-subscription）
   ============================================ */
body.page-dashboard #section-subscription{
    --sub-accent: #1d4ed8;
    --sub-accent-soft: #dbeafe;
    --sub-text: #0f172a;
    --sub-muted: #64748b;
    --sub-border: #e2e8f0;
    --sub-surface: #f8fafc;
}

body.page-dashboard #section-subscription .subscription-section-header{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--sub-border);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

body.page-dashboard #section-subscription .subscription-header-main h1{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 24px;
    color: var(--sub-text);
}

body.page-dashboard #section-subscription .subscription-header-icon{
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    box-shadow: none;
}

body.page-dashboard #section-subscription .subscription-header-main p{
    margin: 0;
    color: var(--sub-muted);
    font-size: 13px;
    line-height: 1.5;
}

body.page-dashboard #section-subscription .subscription-header-meta{
    display: none;
}

body.page-dashboard #section-subscription .subscription-header-chip{
    display: none;
}

body.page-dashboard #section-subscription .subscription-page-container{
    gap: 16px;
}

body.page-dashboard #section-subscription .subscription-hero-card{
    border-radius: 14px;
    border: 1px solid var(--sub-border);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    padding: 18px;
}

body.page-dashboard #section-subscription .subscription-hero-bg{
    display: none;
}

body.page-dashboard #section-subscription .subscription-hero-content{
    align-items: center;
    gap: 16px;
}

body.page-dashboard #section-subscription .hero-badge{
    margin-bottom: 10px;
    background: #f1f5f9;
    border: 1px solid var(--sub-border);
    color: #1e3a8a;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    padding: 6px 12px;
    font-size: 12px;
}

body.page-dashboard #section-subscription .badge-icon{
    color: #d97706;
}

body.page-dashboard #section-subscription .hero-title h2{
    font-size: 24px;
    margin-bottom: 2px;
    color: var(--sub-text);
}

body.page-dashboard #section-subscription .hero-level{
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

body.page-dashboard #section-subscription .hero-subtitle{
    margin: 6px 0 0;
    color: var(--sub-muted);
    font-size: 13px;
    line-height: 1.5;
    max-width: 460px;
}

body.page-dashboard #section-subscription .hero-tags{
    display: none;
}

body.page-dashboard #section-subscription .hero-tag{
    display: none;
}

body.page-dashboard #section-subscription .hero-countdown{
    width: 112px;
    height: 112px;
}

body.page-dashboard #section-subscription .countdown-bg{
    stroke: #e2e8f0;
    stroke-width: 7;
}

body.page-dashboard #section-subscription .countdown-progress{
    stroke: var(--sub-accent);
    stroke-width: 7;
}

body.page-dashboard #section-subscription .countdown-days{
    color: var(--sub-text);
    font-size: 30px;
}

body.page-dashboard #section-subscription .countdown-label{
    color: var(--sub-muted);
    font-size: 11px;
}

body.page-dashboard #section-subscription .subscription-details-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

body.page-dashboard #section-subscription .detail-card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 104px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--sub-border);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-dashboard #section-subscription .detail-card::before{
    display: none;
}

body.page-dashboard #section-subscription .detail-card:hover{
    transform: none;
    border-color: #bfdbfe;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

body.page-dashboard #section-subscription .detail-card-head{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard #section-subscription .detail-icon{
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--sub-border);
    background: #f8fafc;
    font-size: 16px;
}

body.page-dashboard #section-subscription .detail-label{
    color: var(--sub-muted);
    font-size: 12px;
    font-weight: 500;
}

body.page-dashboard #section-subscription .detail-value{
    font-size: 20px;
    font-weight: 700;
    color: var(--sub-text);
    line-height: 1.2;
}

body.page-dashboard #section-subscription .detail-card:nth-child(2) .detail-icon{
    background: #f8fafc;
    border-color: var(--sub-border);
}

body.page-dashboard #section-subscription .detail-card:nth-child(3) .detail-icon{
    background: #f8fafc;
    border-color: var(--sub-border);
}

body.page-dashboard #section-subscription .detail-card:nth-child(4) .detail-icon{
    background: #f8fafc;
    border-color: var(--sub-border);
}

body.page-dashboard #section-subscription .retention-card,
body.page-dashboard #section-subscription .subscription-history-section{
    border: 1px solid var(--sub-border);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

body.page-dashboard #section-subscription .subscription-action-group{
    gap: 10px;
}

body.page-dashboard #section-subscription .sub-action-btn{
    min-width: 0;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

body.page-dashboard #section-subscription .sub-action-btn::before{
    display: none;
}

body.page-dashboard #section-subscription .sub-action-btn.primary{
    background: #1e3a8a;
}

body.page-dashboard #section-subscription .sub-action-btn.primary:hover{
    background: #1e3a8a;
    transform: none;
    box-shadow: 0 6px 14px rgba(30, 64, 175, 0.22);
}

body.page-dashboard #section-subscription .sub-action-btn.secondary{
    background: #ffffff;
    border: 1px solid var(--sub-border);
}

body.page-dashboard #section-subscription .sub-action-btn.secondary:hover{
    background: #f8fafc;
    transform: none;
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

body.page-dashboard #section-subscription .sub-action-btn .btn-icon{
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 17px;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-title{
    font-size: 14px;
    margin-bottom: 2px;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-desc{
    font-size: 12px;
    opacity: 1;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-arrow{
    font-size: 14px;
}

body.page-dashboard #section-subscription .sub-action-btn:hover .btn-arrow,
body.page-dashboard #section-subscription .sub-action-btn:hover .btn-icon{
    transform: none;
}

body.page-dashboard #section-subscription .subscription-history-section{
    padding: 16px;
    min-height: 0;
    background: #ffffff;
}

body.page-dashboard #section-subscription .history-header h3{
    color: #0f172a;
}

body.page-dashboard #section-subscription .history-header{
    margin-bottom: 14px;
}

body.page-dashboard #section-subscription .history-header h3{
    font-size: 16px;
}

body.page-dashboard #section-subscription .history-count{
    background: #eef2ff;
    border-color: var(--sub-border);
    color: #1d4ed8;
    font-size: 12px;
    padding: 4px 10px;
}

body.page-dashboard #section-subscription .history-timeline{
    max-height: 430px;
    overflow-y: auto;
    padding-right: 4px;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar{
    width: 8px;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar-thumb{
    background: #cbd5e1;
    border-radius: 999px;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar-track{
    background: #f1f5f9;
    border-radius: 999px;
}

body.page-dashboard #section-subscription .history-empty{
    padding: 24px 12px;
}

body.page-dashboard #section-subscription .history-empty .empty-illustration{
    display: none;
}

body.page-dashboard #section-subscription .history-empty .empty-icon{
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid var(--sub-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

body.page-dashboard #section-subscription .history-empty p{
    font-size: 15px;
    margin-bottom: 2px;
}

body.page-dashboard #section-subscription .history-empty span{
    font-size: 12px;
}

body.page-dashboard #section-subscription .history-item-new{
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    gap: 12px;
    background: #ffffff;
    margin-bottom: 10px;
}

body.page-dashboard #section-subscription .history-item-new:hover{
    border-color: #bfdbfe;
    background: #f8fbff;
}

body.page-dashboard #section-subscription .history-dot{
    width: 10px;
    height: 10px;
    margin-top: 5px;
}

body.page-dashboard #section-subscription .history-item-title{
    font-size: 14px;
}

body.page-dashboard #section-subscription .history-item-meta{
    font-size: 12px;
    gap: 6px;
}

body.page-dashboard #section-subscription .duration-tag,
body.page-dashboard #section-subscription .price-tag{
    font-size: 11px;
}

body.page-dashboard #section-subscription .subscription-history-pagination{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    gap: 10px;
}

body.page-dashboard #section-subscription .subscription-history-pagination .pagination-info{
    color: #64748b;
}

body.page-dashboard #section-subscription .subscription-history-pagination .pagination-controls{
    gap: 8px;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn{
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #dbe3ef;
    background: #fff;
    color: #334155;
    font-size: 13px;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn:hover:not([disabled]){
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-current{
    color: #64748b;
    font-size: 13px;
}

@media (max-width: 1024px) {
    body.page-dashboard #section-subscription .subscription-section-header{
        padding: 14px 16px;
    }
}

@media (max-width: 768px) {
    body.page-dashboard #section-subscription .subscription-section-header{
        padding: 14px;
        border-radius: 12px;
    }

    body.page-dashboard #section-subscription .subscription-header-main h1{
        font-size: 20px;
        gap: 8px;
    }

    body.page-dashboard #section-subscription .subscription-header-icon{
        width: 26px;
        height: 26px;
        border-radius: 7px;
    }

    body.page-dashboard #section-subscription .subscription-header-main p{
        font-size: 12px;
    }

    body.page-dashboard #section-subscription .subscription-hero-card{
        padding: 14px;
        border-radius: 12px;
    }

    body.page-dashboard #section-subscription .hero-title h2{
        font-size: 20px;
    }

    body.page-dashboard #section-subscription .hero-subtitle{
        font-size: 12px;
    }

    body.page-dashboard #section-subscription .hero-countdown{
        width: 96px;
        height: 96px;
    }

    body.page-dashboard #section-subscription .subscription-details-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-subscription .detail-card{
        padding: 10px;
        min-height: 96px;
    }

    body.page-dashboard #section-subscription .detail-value{
        font-size: 18px;
    }

    body.page-dashboard #section-subscription .sub-action-btn{
        padding: 10px 12px;
    }

    body.page-dashboard #section-subscription .subscription-action-group{
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-subscription .subscription-hero-content{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard #section-subscription .hero-right{
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    body.page-dashboard #section-subscription .history-timeline{
        max-height: 360px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-subscription .subscription-details-grid{
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-subscription .subscription-history-section{
        padding: 12px;
    }

    body.page-dashboard #section-subscription .history-timeline{
        max-height: 320px;
    }

    body.page-dashboard #section-subscription .subscription-history-pagination .pagination-controls{
        gap: 6px;
    }

    body.page-dashboard #section-subscription .subscription-history-pagination .page-btn{
        padding: 7px 10px;
        font-size: 12px;
    }
}

body.page-dashboard .action-btn.primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.4);
}

body.page-dashboard .action-btn.secondary{
    background: #f1f5f9;
    color: #475569;
}

body.page-dashboard .action-btn.secondary:hover{
    background: #e2e8f0;
}

/* ============================================
   购买套餐页面样式
   ============================================ */
body.page-dashboard .purchase-container{
    max-width: 100%;
    margin: 0;
}

body.page-dashboard .plans-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

body.page-dashboard .plans-loading,
body.page-dashboard .plans-error{
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 15px;
}

body.page-dashboard .plans-error{
    color: #dc2626;
}

body.page-dashboard .plan-card{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

body.page-dashboard .plan-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

body.page-dashboard .plan-card.popular{
    border-color: #3b82f6;
}

body.page-dashboard .plan-card.ultimate{
    border-color: #f59e0b;
    background: #fef3c7;
}

body.page-dashboard .plan-badge{
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f1f5f9;
    color: #64748b;
}

body.page-dashboard .plan-badge.popular{
    background: #3b82f6;
    color: white;
}

body.page-dashboard .plan-badge.ultimate{
    background: #b45309;
    color: white;
}

body.page-dashboard .plan-name{



    margin-bottom: 12px;
}

body.page-dashboard .plan-price{
    margin-bottom: 20px;
}

body.page-dashboard .plan-price .currency{
    font-size: 16px;
    color: #64748b;
    vertical-align: top;
}

body.page-dashboard .plan-price .amount{
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
}

body.page-dashboard .plan-price .period{
    font-size: 14px;
    color: #64748b;
}

body.page-dashboard .plan-btn{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: #f1f5f9;
    color: #475569;
}

body.page-dashboard .plan-btn:hover{
    background: #e2e8f0;
}

body.page-dashboard .plan-btn.popular{
    background: #3b82f6;
    color: white;
}

body.page-dashboard .plan-btn.popular:hover{
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .plan-btn.ultimate{
    background: #b45309;
    color: white;
}

/* 时长选择 */
body.page-dashboard .duration-selector{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

body.page-dashboard .duration-selector h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .duration-options{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

body.page-dashboard .duration-option{
    position: relative;
    cursor: pointer;
}

body.page-dashboard .duration-option input{
    position: absolute;
    opacity: 0;
}

body.page-dashboard .duration-option .option-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s;
}

body.page-dashboard .duration-option input:checked + .option-content{
    border-color: #3b82f6;
    background: rgba(32, 32, 32, 0.05);
}

body.page-dashboard .duration-option.recommended .option-content{
    border-color: #10b981;
}

body.page-dashboard .duration-option.best-value .option-content::before{
    content: '最划算';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

body.page-dashboard .duration-time{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .duration-price{
    font-size: 20px;
    font-weight: 700;
    color: #3b82f6;
    margin-top: 4px;
}

body.page-dashboard .duration-save{
    font-size: 12px;
    color: #10b981;
    margin-top: 4px;
}

/* 支付方式 */
body.page-dashboard .payment-methods{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
}

body.page-dashboard .payment-methods h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .payment-options{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

body.page-dashboard .payment-option{
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s;
}

body.page-dashboard .payment-option input{
    display: none;
}

body.page-dashboard .payment-option:has(input:checked){
    border-color: #3b82f6;
    background: rgba(32, 32, 32, 0.05);
}

body.page-dashboard .payment-icon{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .payment-icon svg{
    width: 24px;
    height: 24px;
}

body.page-dashboard .payment-icon.alipay{
    background: #1677ff;
    color: white;
}

body.page-dashboard .payment-icon.wechat{
    background: #07c160;
    color: white;
}

body.page-dashboard .payment-name{
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

/* 订单确认 */
body.page-dashboard .order-summary{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .order-summary h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .summary-content{
    margin-bottom: 20px;
}

body.page-dashboard .summary-item{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

body.page-dashboard .summary-item .label{
    color: #64748b;
}

body.page-dashboard .summary-item .value{
    font-weight: 500;
    color: #1e293b;
}

body.page-dashboard .summary-item .value.original{
    text-decoration: line-through;
    color: #94a3b8;
}

body.page-dashboard .summary-item.discount .value{
    color: #10b981;
}

body.page-dashboard .summary-item.total{
    border-bottom: none;
    padding-top: 16px;
}

body.page-dashboard .summary-item.total .value{
    font-size: 24px;
    font-weight: 700;
    color: #ef4444;
}

body.page-dashboard .checkout-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

body.page-dashboard .checkout-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .checkout-btn svg{
    width: 20px;
    height: 20px;
}

/* ============================================
   邀请返利页面样式
   ============================================ */
body.page-dashboard .invite-container{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.page-dashboard .invite-code-card{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}

body.page-dashboard .invite-code-header{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.page-dashboard .invite-code-header .icon{
    font-size: 24px;
}

body.page-dashboard .invite-code-header .title{
    font-size: 18px;
    font-weight: 600;
}

body.page-dashboard .invite-code-content{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

body.page-dashboard .code-display{
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: #1a1a1a;
}

body.page-dashboard .copy-btn{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

body.page-dashboard .copy-btn:hover{
    transform: scale(1.05);
}

body.page-dashboard .copy-btn svg{
    width: 18px;
    height: 18px;
}

body.page-dashboard .invite-link-section{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.page-dashboard .invite-link-section label{
    font-size: 14px;
    color: #4a4a4a;
}

body.page-dashboard .link-box{
    display: flex;
    gap: 12px;
}

body.page-dashboard .link-box input{
    flex: 1;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #1a1a1a;
    font-size: 13px;
}

body.page-dashboard .link-box input::placeholder{
    color: #9ca3af;
}

body.page-dashboard .copy-link-btn{
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

body.page-dashboard .copy-link-btn:hover{
    background: #2563eb;
}

/* 奖励规则 */
body.page-dashboard .reward-rules{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .reward-rules h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .rules-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

body.page-dashboard .rule-item{
    display: flex;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

body.page-dashboard .rule-icon{
    font-size: 32px;
}

body.page-dashboard .rule-content{
    flex: 1;
}

body.page-dashboard .rule-title{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

body.page-dashboard .rule-desc{
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

body.page-dashboard .rule-reward{
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
}

/* 邀请统计 */
body.page-dashboard .invite-stats{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .invite-stats h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .invite-stats .stats-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

body.page-dashboard .invite-stats .stat-item{
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
}

body.page-dashboard .invite-stats .stat-value{
    font-size: 28px;
    font-weight: 700;
    color: #3b82f6;
}

body.page-dashboard .invite-stats .stat-label{
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* 邀请记录 */
body.page-dashboard .invite-records{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .invite-records h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .records-list{
    max-height: 300px;
    overflow-y: auto;
}

body.page-dashboard .record-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

body.page-dashboard .record-item:last-child{
    border-bottom: none;
}

body.page-dashboard .record-user{
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-dashboard .record-avatar{
    width: 36px;
    height: 36px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-weight: 600;
}



body.page-dashboard .record-date{
    font-size: 12px;
    color: #64748b;
}

body.page-dashboard .record-reward{
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
}

/* ============================================
   使用文档页面样式
   ============================================ */
body.page-dashboard .docs-container{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}

body.page-dashboard .docs-nav{
    position: sticky;
    top: 24px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    height: fit-content;
}

body.page-dashboard .nav-title{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

body.page-dashboard .nav-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

body.page-dashboard .nav-list li{
    margin-bottom: 8px;
}

body.page-dashboard .nav-list a{
    display: block;
    padding: 8px 12px;
    color: #64748b;
    text-decoration: none;
    font-size: 13px;
    border-radius: 8px;
    transition: all 0.2s;
}

body.page-dashboard .nav-list a:hover{
    background: #f1f5f9;
    color: #1e293b;
}

body.page-dashboard .nav-list a.active{
    background: rgba(32, 32, 32, 0.1);
    color: #3b82f6;
    font-weight: 500;
}

body.page-dashboard .docs-content{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.page-dashboard .doc-section{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .doc-section h2{
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

body.page-dashboard .doc-body{
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

body.page-dashboard .doc-body h3{
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 20px 0 12px;
}

body.page-dashboard .doc-body ul,
body.page-dashboard .doc-body ol{
    padding-left: 20px;
    margin: 12px 0;
}

body.page-dashboard .doc-body li{
    margin-bottom: 8px;
}

body.page-dashboard .doc-tip{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border-radius: 10px;
    margin-top: 16px;
}



body.page-dashboard .tip-text{
    flex: 1;
    font-size: 13px;
    color: #92400e;
}

body.page-dashboard .status-table{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .status-row{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

body.page-dashboard .status-badge{
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    min-width: 70px;
    text-align: center;
}

body.page-dashboard .status-badge.pending{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .status-badge.downloading{
    background: #dbeafe;
    color: #1e40af;
}

body.page-dashboard .status-badge.downloaded{
    background: #e0e7ff;
    color: #4338ca;
}

body.page-dashboard .status-badge.completed{
    background: #d1fae5;
    color: #065f46;
}

body.page-dashboard .status-badge.failed{
    background: #fee2e2;
    color: #991b1b;
}

body.page-dashboard .status-desc{
    flex: 1;
    font-size: 13px;
    color: #64748b;
}

/* ============================================
   FAQ 页面样式
   ============================================ */
body.page-dashboard .faq-container{
    max-width: 100%;
    margin: 0;
}

body.page-dashboard .faq-search{
    position: relative;
    margin-bottom: 20px;
}

body.page-dashboard .faq-search input{
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    transition: border-color 0.3s;
}

body.page-dashboard .faq-search input:focus{
    outline: none;
    border-color: #3b82f6;
}

body.page-dashboard .faq-search svg{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    fill: #94a3b8;
}

body.page-dashboard .faq-categories{
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

body.page-dashboard .category-btn{
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 20px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s;
}

body.page-dashboard .category-btn:hover{
    border-color: #3b82f6;
    color: #3b82f6;
}

body.page-dashboard .category-btn.active{
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

body.page-dashboard .faq-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .faq-item{
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

body.page-dashboard .faq-item.hidden{
    display: none;
}

body.page-dashboard .faq-question{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

body.page-dashboard .faq-question:hover{
    background: #f8fafc;
}

body.page-dashboard .q-icon{
    width: 28px;
    height: 28px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

body.page-dashboard .q-text{
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

body.page-dashboard .toggle-icon{
    font-size: 20px;
    color: #64748b;
    transition: transform 0.3s;
}

body.page-dashboard .faq-item.active .toggle-icon{
    transform: rotate(45deg);
}

body.page-dashboard .faq-answer{
    display: none;
    padding: 0 20px 20px 60px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

body.page-dashboard .faq-item.active .faq-answer{
    display: block;
}

body.page-dashboard .faq-answer p{
    margin-bottom: 12px;
}

body.page-dashboard .faq-answer ul,
body.page-dashboard .faq-answer ol{
    padding-left: 20px;
    margin: 12px 0;
}

body.page-dashboard .faq-answer li{
    margin-bottom: 6px;
}

/* ============================================
   技术支持页面样式
   ============================================ */
body.page-dashboard .support-container{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body.page-dashboard .contact-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

body.page-dashboard .contact-card{
    display: flex;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

body.page-dashboard .contact-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

body.page-dashboard .contact-icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .contact-icon svg{
    width: 24px;
    height: 24px;
    color: white;
}

body.page-dashboard .contact-icon.telegram{
    background: #0088cc;
}

body.page-dashboard .contact-icon.email{
    background: #3b82f6;
}

body.page-dashboard .contact-info{
    flex: 1;
}

body.page-dashboard .contact-title{
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

body.page-dashboard .contact-desc{
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
}

body.page-dashboard .contact-link{
    font-size: 13px;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

body.page-dashboard .contact-link:hover{
    text-decoration: underline;
}

/* 工单表单 */
body.page-dashboard .ticket-form-section{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .ticket-form-section h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
}

body.page-dashboard .ticket-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body.page-dashboard .form-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.page-dashboard .form-group label{
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

body.page-dashboard .form-group label .required{
    color: #ef4444;
}

body.page-dashboard .form-group select,
body.page-dashboard .form-group input,
body.page-dashboard .form-group textarea{
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.3s;
}

body.page-dashboard .form-group select:focus,
body.page-dashboard .form-group input:focus,
body.page-dashboard .form-group textarea:focus{
    outline: none;
    border-color: #3b82f6;
}

body.page-dashboard .form-group textarea{
    resize: vertical;
    min-height: 120px;
}

body.page-dashboard .priority-options{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 520px);
    gap: 8px;
}

body.page-dashboard .priority-option{
    position: relative;
    min-width: 0;
    cursor: pointer;
}

body.page-dashboard .priority-option input{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.page-dashboard .priority-label{
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

body.page-dashboard .priority-option input:focus-visible + .priority-label{
    outline: 2px solid #0b7ff3;
    outline-offset: 2px;
}

body.page-dashboard .priority-option input:checked + .priority-label.low{
    border-color: #10b981;
    background: #d1fae5;
    color: #065f46;
}

body.page-dashboard .priority-option input:checked + .priority-label.normal{
    border-color: #3b82f6;
    background: #dbeafe;
    color: #1e40af;
}

body.page-dashboard .priority-option input:checked + .priority-label.high{
    border-color: #f59e0b;
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .priority-option input:checked + .priority-label.urgent{
    border-color: #ef4444;
    background: #fee2e2;
    color: #991b1b;
}

body.page-dashboard .submit-ticket-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

body.page-dashboard .submit-ticket-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .submit-ticket-btn svg{
    width: 18px;
    height: 18px;
}

/* 我的工单 */
body.page-dashboard .my-tickets-section{
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .my-tickets-section h3{
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 16px;
}

body.page-dashboard .tickets-list{
    max-height: 400px;
    overflow-y: auto;
}

body.page-dashboard .ticket-item{
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
}

body.page-dashboard .ticket-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

body.page-dashboard .ticket-no{
    font-size: 12px;
    color: #64748b;
    font-family: monospace;
}

body.page-dashboard .ticket-status{
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
}

body.page-dashboard .ticket-status.open{
    background: #dbeafe;
    color: #1e40af;
}

body.page-dashboard .ticket-status.in_progress{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .ticket-status.resolved{
    background: #d1fae5;
    color: #065f46;
}

body.page-dashboard .ticket-status.closed{
    background: #f1f5f9;
    color: #64748b;
}

body.page-dashboard .ticket-subject{
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 8px;
}

body.page-dashboard .ticket-meta{
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #64748b;
}

/* 空状态 */
body.page-dashboard .empty-state.small{
    padding: 32px 20px;
    text-align: center;
}

body.page-dashboard .empty-state.small .empty-icon{
    font-size: 32px;
    margin-bottom: 8px;
}

body.page-dashboard .empty-state.small .empty-title{
    font-size: 14px;
    color: #64748b;
    margin-bottom: 4px;
}

body.page-dashboard .empty-state.small .empty-desc{
    font-size: 12px;
    color: #94a3b8;
}

/* 响应式 */
@media (max-width: 768px) {
    body.page-dashboard .docs-container{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .docs-nav{
        position: static;
    }

    body.page-dashboard .invite-stats .stats-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-dashboard .plans-grid{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .payment-options{
        flex-direction: column;
    }

    body.page-dashboard .duration-options{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   额外补充样式
   ============================================ */

/* 套餐卡片选中状态 */
body.page-dashboard .plan-card.selected{
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.2);
    transform: translateY(-4px);
}

/* 支付弹窗样式 */
body.page-dashboard .payment-dialog{
    max-width: 400px;
    text-align: center;
}

body.page-dashboard .payment-dialog .payment-info{
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}

body.page-dashboard .payment-dialog .payment-info p{
    margin: 4px 0;
    color: #475569;
}

body.page-dashboard .payment-dialog .qr-code{
    padding: 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 16px 0;
}

body.page-dashboard .payment-dialog .qr-code img{
    width: 200px;
    height: 200px;
}

body.page-dashboard .payment-dialog .payment-tip{
    color: #64748b;
    font-size: 13px;
    margin-bottom: 20px;
}

/* 无订阅信息样式 */
body.page-dashboard .no-subscription-info{
    text-align: center;
    padding: 30px 20px;
}

body.page-dashboard .no-subscription-info .icon{
    font-size: 48px;
    margin-bottom: 12px;
}

body.page-dashboard .no-subscription-info p{
    color: #4a4a4a;
    margin-bottom: 16px;
}

body.page-dashboard .btn-go-purchase{
    display: inline-block;
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
}

body.page-dashboard .btn-go-purchase:hover{
    background: #2563eb;
}

/* 历史记录项样式 */
body.page-dashboard .history-item .history-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-dashboard .history-item .plan-name{
    font-weight: 500;
    color: #1e293b;
}

body.page-dashboard .history-item .date{
    font-size: 12px;
    color: #64748b;
}

body.page-dashboard .status-tag{
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
    margin-left: 8px;
}

body.page-dashboard .status-tag.active{
    background: #d1fae5;
    color: #065f46;
}

body.page-dashboard .status-tag.pending{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .status-tag.expired{
    background: #fee2e2;
    color: #991b1b;
}

/* 历史记录项元信息样式 */
body.page-dashboard .history-item-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 工单回复样式 */
body.page-dashboard .ticket-reply{
    margin-top: 12px;
    padding: 12px;
    background: #f0fdf4;
    border-radius: 8px;
    font-size: 13px;
    color: #166534;
    border-left: 3px solid #10b981;
}

/* 工单列表项可点击 */
body.page-dashboard .ticket-item{
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .ticket-item:hover{
    background: #f8fafc;
    border-color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.15);
}

body.page-dashboard .ticket-meta .message-count{
    background: #333333;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* 错误文本样式 */
body.page-dashboard .error-text{
    color: #ef4444;
    text-align: center;
    padding: 20px;
}

/* 加载中占位 */


body.page-dashboard .loading-placeholder p{
    color: #4a4a4a;
    font-size: 14px;
}

/* ============================================
   新版套餐卡片样式 - 简约白色风格
   ============================================ */

body.page-dashboard .plans-grid-new{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    body.page-dashboard .plans-grid-new{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    body.page-dashboard .plans-grid-new{
        grid-template-columns: 1fr;
    }
}

body.page-dashboard .plan-card-new{
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.page-dashboard .plan-card-new::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e2e8f0;
    transition: all 0.3s ease;
}

body.page-dashboard .plan-card-new:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

body.page-dashboard .plan-card-new:hover::before{
    background: #3b82f6;
}

body.page-dashboard .plan-card-new.popular{
    border-color: #3b82f6;
}

body.page-dashboard .plan-card-new.popular::before{
    background: #3b82f6;
}

body.page-dashboard .plan-card-new.ultimate{
    border-color: #f59e0b;
    background: #f7f9fd;
}

body.page-dashboard .plan-card-new.ultimate::before{
    background: #f59e0b;
}

body.page-dashboard .popular-badge,
body.page-dashboard .ultimate-badge{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.page-dashboard .popular-badge{
    background: #3b82f6;
    color: white;
}

body.page-dashboard .ultimate-badge{
    background: #f59e0b;
    color: white;
}

body.page-dashboard .plan-card-new.popular,
body.page-dashboard .plan-card-new.ultimate{
    padding-top: 44px;
}

body.page-dashboard .plan-header-new{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

body.page-dashboard .plan-icon{
    font-size: 24px;
}

body.page-dashboard .plan-name-new{
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

/* 套餐价格展示 */
body.page-dashboard .plan-price-display{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
}

body.page-dashboard .price-currency{
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
}

body.page-dashboard .price-amount{
    font-size: 36px;
    font-weight: 800;
    color: #3b82f6;
    line-height: 1;
}

body.page-dashboard .price-period{
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

/* 套餐描述 */
body.page-dashboard .plan-description{
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.5;
}

/* 购买按钮 */
body.page-dashboard .plan-buy-btn{
    width: 100%;
    padding: 14px 20px;
    background: #1e293b;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

body.page-dashboard .plan-buy-btn:hover{
    background: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

body.page-dashboard .plan-buy-btn:active{
    transform: translateY(0);
}

body.page-dashboard .plan-buy-btn.popular{
    background: #3b82f6;
}

body.page-dashboard .plan-buy-btn.popular:hover{
    background: #2563eb;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

body.page-dashboard .plan-buy-btn.ultimate{
    background: #f59e0b;
}

body.page-dashboard .plan-buy-btn.ultimate:hover{
    background: #d97706;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

/* 价格表格 - 简约白色 */
body.page-dashboard .plan-prices-table{
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .price-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .price-row:hover{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .price-row:active{
    transform: scale(0.98);
}

body.page-dashboard .duration-label{
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    min-width: 50px;
}

body.page-dashboard .price-value{
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
    text-align: center;
}

body.page-dashboard .price-tag{
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    min-width: 45px;
    text-align: center;
    font-weight: 500;
}

body.page-dashboard .price-tag.save{
    background: #ecfdf5;
    color: #059669;
    font-weight: 600;
}

/* 支付方式选择器 - 简约风格 */
body.page-dashboard .payment-method-selector{
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.page-dashboard .payment-method-selector h3{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
}

body.page-dashboard .payment-options-inline{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

body.page-dashboard .payment-option-inline{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .payment-option-inline:hover{
    border-color: #cbd5e1;
    background: #f8fafc;
}

body.page-dashboard .payment-option-inline.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .payment-option-inline input{
    display: none;
}

body.page-dashboard .payment-icon-small{
    width: 22px;
    height: 22px;
}

body.page-dashboard .payment-icon-small.alipay{
    color: #1677ff;
}

body.page-dashboard .payment-icon-small.wechat{
    color: #07c160;
}

body.page-dashboard .payment-option-inline span:last-child{
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* 购买提示 - 简约风格 */
body.page-dashboard .purchase-tips{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .tip-item{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

body.page-dashboard .tip-icon{
    font-size: 14px;
}

/* 快速购买确认弹窗 - 简约风格 */
body.page-dashboard .quick-buy-dialog{
    max-width: 420px;
    width: 90%;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

body.page-dashboard .quick-buy-dialog .dialog-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    color: #1e293b;
}

body.page-dashboard .quick-buy-dialog .dialog-header h3{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

body.page-dashboard .quick-buy-dialog .close-btn{
    background: #f1f5f9;
    border: none;
    color: #64748b;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body.page-dashboard .quick-buy-dialog .close-btn:hover{
    background: #e2e8f0;
    color: #1e293b;
}

body.page-dashboard .quick-buy-dialog .order-details{
    padding: 20px 22px;
    background: #f8fafc;
}

body.page-dashboard .quick-buy-dialog .detail-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

body.page-dashboard .quick-buy-dialog .detail-row:last-child{
    border-bottom: none;
}

body.page-dashboard .quick-buy-dialog .detail-row .label{
    color: #64748b;
    font-size: 14px;
}

body.page-dashboard .quick-buy-dialog .detail-row .value{
    color: #1e293b;
    font-weight: 600;
    font-size: 14px;
}

body.page-dashboard .quick-buy-dialog .detail-row.total{
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid #e2e8f0;
}

body.page-dashboard .quick-buy-dialog .detail-row.total .value.price{
    font-size: 24px;
    color: #1e293b;
    font-weight: 700;
}

/* 支付方式选择区域 - 新设计 */
body.page-dashboard .payment-method-section{
    padding: 18px 22px;
}

body.page-dashboard .payment-section-title{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 14px;
}

body.page-dashboard .payment-options-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.page-dashboard .payment-option-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

body.page-dashboard .payment-option-card input{
    display: none;
}

body.page-dashboard .payment-option-card:hover{
    border-color: #cbd5e1;
    background: #f1f5f9;
}

body.page-dashboard .payment-option-card.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .payment-option-icon{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .payment-option-icon.alipay{
    background: #e6f4ff;
    color: #1677ff;
}

body.page-dashboard .payment-option-icon.wechat{
    background: #e6fff0;
    color: #07c160;
}

body.page-dashboard .payment-option-name{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .payment-check{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

body.page-dashboard .payment-option-card.active .payment-check{
    opacity: 1;
    transform: scale(1);
}

body.page-dashboard .quick-buy-dialog .dialog-footer{
    padding: 16px 22px;
    display: flex;
    gap: 12px;
    background: white;
    border-top: 1px solid #e2e8f0;
}

body.page-dashboard .quick-buy-dialog .btn-cancel{
    flex: 1;
    padding: 14px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .quick-buy-dialog .btn-cancel:hover{
    background: #f8fafc;
    border-color: #cbd5e1;
}

body.page-dashboard .quick-buy-dialog .btn-confirm{
    flex: 2;
    padding: 14px;
    border: none;
    background: #1e293b;
    color: white;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

body.page-dashboard .quick-buy-dialog .btn-confirm:hover{
    background: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
}

/* 旧版支付选择样式（兼容） */
body.page-dashboard .quick-buy-dialog .payment-select{
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.page-dashboard .quick-buy-dialog .payment-select .label{
    color: #64748b;
    font-size: 13px;
}

body.page-dashboard .quick-buy-dialog .payment-radio{
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: #475569;
}

body.page-dashboard .quick-buy-dialog .payment-radio:hover{
    background: #f1f5f9;
}

body.page-dashboard .quick-buy-dialog .payment-radio.active{
    border-color: #3b82f6;
    background: #f0f9ff;
    color: #3b82f6;
}

body.page-dashboard .quick-buy-dialog .payment-radio input{
    display: none;
}

body.page-dashboard .quick-buy-dialog .dialog-tips{
    padding: 10px 22px 16px;
    text-align: center;
}

body.page-dashboard .quick-buy-dialog .dialog-tips p{
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

/* ==================== 横版购买对话框样式 ==================== */
body.page-dashboard .purchase-dialog-horizontal{
    background: white;
    border-radius: 20px;
    width: 720px;
    max-width: 95vw;
    display: flex;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25);
    animation: dialogSlideIn 0.3s ease;
    position: relative;
    overflow: hidden;
}

body.page-dashboard .dialog-close-x{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.05);
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

body.page-dashboard .dialog-close-x:hover{
    background: rgba(0,0,0,0.1);
    color: #1e293b;
}

/* 左侧面板 - 套餐信息和支付 */
body.page-dashboard .dialog-left-panel{
    width: 260px;
    background: #1e293b;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    color: white;
}

body.page-dashboard .selected-plan-info{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

body.page-dashboard .plan-icon-lg{
    font-size: 36px;
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .plan-text h3{
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
}

body.page-dashboard .plan-text p{
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

body.page-dashboard .price-display-lg{
    text-align: center;
    margin-bottom: 28px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

body.page-dashboard .price-display-lg .currency{
    font-size: 20px;
    font-weight: 500;
    color: #fbbf24;
    vertical-align: top;
}

body.page-dashboard .price-display-lg .amount{
    font-size: 48px;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
}

body.page-dashboard .verify-section{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.page-dashboard .verify-row{
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .verify-code-box{
    flex: 1;
    background: rgba(251, 191, 36, 0.15);
    border: 1px dashed rgba(251, 191, 36, 0.5);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 6px;
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
}

body.page-dashboard .verify-code-box.refresh-animate{
    transform: scale(1.05);
    background: rgba(251, 191, 36, 0.25);
}

body.page-dashboard .verify-refresh-btn{
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .verify-refresh-btn:hover{
    background: rgba(255,255,255,0.2);
    color: #fbbf24;
    transform: rotate(180deg);
}

body.page-dashboard .verify-input{
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 16px;
    text-align: center;
    letter-spacing: 4px;
    font-weight: 600;
    box-sizing: border-box;
    transition: all 0.2s;
}

body.page-dashboard .verify-input:focus{
    outline: none;
    border-color: #fbbf24;
    background: rgba(255,255,255,0.15);
}

body.page-dashboard .verify-input::placeholder{
    color: rgba(255,255,255,0.4);
    letter-spacing: 0;
    font-weight: 400;
    font-size: 14px;
}

body.page-dashboard .confirm-pay-btn{
    width: 100%;
    padding: 14px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto;
}

body.page-dashboard .confirm-pay-btn:hover{
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* 右侧面板 - 选择项 */
body.page-dashboard .dialog-right-panel{
    flex: 1;
    padding: 28px;
    background: #fafafa;
}

body.page-dashboard .option-group{
    margin-bottom: 24px;
}

body.page-dashboard .option-group:last-child{
    margin-bottom: 0;
}

body.page-dashboard .option-title{
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .option-title::before{
    content: '';
    width: 3px;
    height: 14px;
    background: #3b82f6;
    border-radius: 2px;
}

/* 时长选择网格 */
body.page-dashboard .duration-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

body.page-dashboard .dur-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

body.page-dashboard .dur-card input{
    display: none;
}

body.page-dashboard .dur-card:hover{
    border-color: #cbd5e1;
    background: #f8fafc;
}

body.page-dashboard .dur-card.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .dur-card .dur-name{
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

body.page-dashboard .dur-card .dur-price{
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

body.page-dashboard .dur-card.active .dur-price{
    color: #3b82f6;
}

body.page-dashboard .dur-card .dur-tag{
    position: absolute;
    top: -8px;
    right: -4px;
    background: #f59e0b;
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

body.page-dashboard .dur-card .dur-tag.hot{
    background: #ef4444;
}

body.page-dashboard .dur-card.active::after{
    content: '✓';
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 支付方式网格 */
body.page-dashboard .pay-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.page-dashboard .pay-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .pay-card input{
    display: none;
}

body.page-dashboard .pay-card:hover{
    border-color: #cbd5e1;
}

body.page-dashboard .pay-card.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .pay-card .pay-icon{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .pay-card .pay-icon.alipay{
    background: #e6f4ff;
    color: #1677ff;
}

body.page-dashboard .pay-card .pay-icon.wechat{
    background: #e6fff0;
    color: #07c160;
}

body.page-dashboard .pay-card span:last-child{
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

/* 横版弹窗移动端适配 */
@media (max-width: 720px) {
    body.page-dashboard .purchase-dialog-horizontal{
        flex-direction: column;
        width: 94vw;
        max-height: 90vh;
        overflow-y: auto;
    }

    body.page-dashboard .dialog-left-panel{
        width: 100%;
        padding: 24px 20px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
    }

    body.page-dashboard .selected-plan-info{
        margin-bottom: 0;
        flex: 1;
    }

    body.page-dashboard .price-display-lg{
        margin-bottom: 0;
        padding: 0;
        border: none;
        text-align: right;
    }

    body.page-dashboard .price-display-lg .amount{
        font-size: 32px;
    }

    body.page-dashboard .verify-section{
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    body.page-dashboard .verify-row{
        flex: 1;
        gap: 6px;
    }

    body.page-dashboard .verify-code-box{
        padding: 8px 12px;
        font-size: 18px;
    }

    body.page-dashboard .verify-refresh-btn{
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    body.page-dashboard .verify-input{
        width: 100px;
        flex-shrink: 0;
        padding: 8px;
    }

    body.page-dashboard .confirm-pay-btn{
        flex-shrink: 0;
        width: auto;
        padding: 10px 20px;
        margin-top: 0;
    }

    body.page-dashboard .dialog-right-panel{
        padding: 20px;
    }

    body.page-dashboard .duration-grid{
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    body.page-dashboard .dur-card{
        padding: 12px 6px;
    }

    body.page-dashboard .dur-card .dur-price{
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .dialog-left-panel{
        flex-direction: column;
        align-items: stretch;
    }

    body.page-dashboard .selected-plan-info{
        justify-content: center;
    }

    body.page-dashboard .price-display-lg{
        text-align: center;

        border-top: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    body.page-dashboard .verify-section{
        flex-direction: column;
        gap: 10px;
    }

    body.page-dashboard .verify-row{
        width: 100%;
    }

    body.page-dashboard .verify-code-box{
        flex: 1;
    }

    body.page-dashboard .verify-input{
        width: 100%;
    }

    body.page-dashboard .confirm-pay-btn{
        width: 100%;
    }

    body.page-dashboard .duration-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== 旧版购买对话框样式(保留兼容) ==================== */
body.page-dashboard .purchase-dialog{
    background: white;
    border-radius: 20px;
    max-width: 520px;
    width: 92%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.25);
    animation: dialogSlideIn 0.3s ease;
}

body.page-dashboard .purchase-dialog .dialog-header{
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
}

body.page-dashboard .purchase-dialog .dialog-header h3{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

body.page-dashboard .purchase-dialog .dialog-header .close-btn{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body.page-dashboard .purchase-dialog .dialog-header .close-btn:hover{
    background: #e2e8f0;
    color: #1e293b;
}

body.page-dashboard .purchase-dialog .dialog-body{
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* 套餐信息摘要 */
body.page-dashboard .plan-summary{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 14px;
    margin-bottom: 24px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .plan-summary-icon{
    width: 52px;
    height: 52px;
    background: #3b82f6;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

body.page-dashboard .plan-summary-info{
    flex: 1;
}

body.page-dashboard .plan-summary-name{
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

body.page-dashboard .plan-summary-desc{
    font-size: 13px;
    color: #64748b;
}

/* 选择区块 */
body.page-dashboard .dialog-section{
    margin-bottom: 24px;
}

body.page-dashboard .dialog-section:last-child{
    margin-bottom: 0;
}

body.page-dashboard .dialog-section-title{
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .dialog-section-title::before{
    content: '';
    width: 3px;
    height: 16px;
    background: #3b82f6;
    border-radius: 2px;
}

/* 时长选择卡片 */
body.page-dashboard .duration-options-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.page-dashboard .duration-option-card{
    padding: 16px 14px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;
}

body.page-dashboard .duration-option-card:hover{
    border-color: #cbd5e1;
    background: #f1f5f9;
}

body.page-dashboard .duration-option-card.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .duration-option-card .duration-name{



    margin-bottom: 4px;
}



body.page-dashboard .duration-option-card .duration-price span{
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
}

body.page-dashboard .duration-option-card .duration-tag{
    position: absolute;
    top: -8px;
    right: 12px;
    background: #f59e0b;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}

body.page-dashboard .duration-option-card.active::after{
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 支付方式选择 - 对话框内 */
body.page-dashboard .payment-options-in-dialog{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.page-dashboard .payment-option-in-dialog{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

body.page-dashboard .payment-option-in-dialog input{
    display: none;
}

body.page-dashboard .payment-option-in-dialog:hover{
    border-color: #cbd5e1;
    background: #f1f5f9;
}

body.page-dashboard .payment-option-in-dialog.active{
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .payment-option-in-dialog .payment-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .payment-option-in-dialog .payment-icon.alipay{
    background: #e6f4ff;
    color: #1677ff;
}

body.page-dashboard .payment-option-in-dialog .payment-icon.wechat{
    background: #e6fff0;
    color: #07c160;
}

body.page-dashboard .payment-option-in-dialog .payment-name{
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .payment-option-in-dialog .payment-check-icon{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

body.page-dashboard .payment-option-in-dialog.active .payment-check-icon{
    opacity: 1;
    transform: scale(1);
}

/* 验证码区域 */
body.page-dashboard .verify-code-section{
    display: flex;
    align-items: center;
    gap: 16px;
}

body.page-dashboard .verify-code-display{
    display: flex;






}



body.page-dashboard .verify-code-number{
    font-size: 22px;
    font-weight: 800;
    color: #b45309;
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
}

body.page-dashboard .verify-code-input-wrap{
    flex: 1;
}

body.page-dashboard .verify-code-input-wrap input{
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 6px;
    font-weight: 600;
    transition: all 0.2s;
    box-sizing: border-box;
}

body.page-dashboard .verify-code-input-wrap input:focus{
    outline: none;
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .verify-code-input-wrap input::placeholder{
    letter-spacing: 0;
    font-weight: 400;
    color: #94a3b8;
}

/* 对话框底部 */
body.page-dashboard .purchase-dialog .dialog-footer{
    padding: 20px 24px;
    background: #fafafa;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
}

body.page-dashboard .purchase-dialog .btn-cancel{
    flex: 1;
    padding: 14px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .purchase-dialog .btn-cancel:hover{
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

body.page-dashboard .purchase-dialog .btn-confirm{
    flex: 2;
    padding: 14px 24px;
    border: none;
    background: #1e293b;
    color: white;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

body.page-dashboard .purchase-dialog .btn-confirm:hover{
    background: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

body.page-dashboard .purchase-dialog .btn-confirm:active{
    transform: translateY(0);
}

body.page-dashboard .purchase-dialog .btn-confirm .total-price{
    color: #fbbf24;
}

/* 购买对话框主体 */
body.page-dashboard .purchase-dialog-header{
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

body.page-dashboard .purchase-dialog-header .dialog-title{
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-dashboard .purchase-dialog-header .close-btn{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: white;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.page-dashboard .purchase-dialog-header .close-btn:hover{
    background: #f1f5f9;
    color: #1e293b;
}

body.page-dashboard .purchase-dialog-body{
    padding: 24px;
    max-height: calc(90vh - 180px);
    overflow-y: auto;
}

/* 购买区块 */
body.page-dashboard .purchase-section{
    margin-bottom: 24px;
}

body.page-dashboard .purchase-section:last-of-type{
    margin-bottom: 0;
}

body.page-dashboard .purchase-section .section-label{
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .purchase-section .section-label::before{
    content: '';
    width: 3px;
    height: 14px;
    background: #3b82f6;
    border-radius: 2px;
}

/* 时长选项卡片 - 内部布局 */
body.page-dashboard .duration-option-card .duration-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-dashboard .duration-option-card .duration-name{
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

body.page-dashboard .duration-option-card .duration-price{
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

body.page-dashboard .duration-option-card.active .duration-price{
    color: #3b82f6;
}

body.page-dashboard .duration-option-card .duration-badge{
    position: absolute;
    top: -8px;
    right: 10px;
    background: #f59e0b;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

body.page-dashboard .duration-option-card .duration-badge.best{
    background: #ef4444;
}

/* 验证码样式 */
body.page-dashboard .verify-code-display{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: #fef3c7;
    border-radius: 12px;
    border: 2px dashed #f59e0b;
}

body.page-dashboard .verify-code-label{
    font-size: 12px;
    color: #92400e;
    font-weight: 500;
}

body.page-dashboard .verify-code-value{
    font-size: 28px;
    font-weight: 800;
    color: #b45309;
    letter-spacing: 6px;
    font-family: 'Courier New', monospace;
}

body.page-dashboard .verify-code-input{
    flex: 1;
    min-width: 120px;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 18px;
    text-align: center;
    letter-spacing: 6px;
    font-weight: 600;
    transition: all 0.2s;
    background: white;
}

body.page-dashboard .verify-code-input:focus{
    outline: none;
    border-color: #3b82f6;
    background: #f0f9ff;
}

body.page-dashboard .verify-code-input::placeholder{
    letter-spacing: 0;
    font-weight: 400;
    color: #94a3b8;
    font-size: 14px;
}

/* 订单摘要栏 */
body.page-dashboard .order-summary-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #1e293b;
    border-radius: 14px;
    margin-top: 24px;
}

body.page-dashboard .summary-left{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-dashboard .summary-label{
    font-size: 12px;
    color: #94a3b8;
}

body.page-dashboard .summary-price{
    font-size: 24px;
    font-weight: 700;
    color: #fbbf24;
}

body.page-dashboard .purchase-confirm-btn{
    padding: 14px 32px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .purchase-confirm-btn:hover{
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

body.page-dashboard .purchase-confirm-btn:active{
    transform: translateY(0);
}

/* 购买对话框移动端适配 */
@media (max-width: 520px) {
    body.page-dashboard .purchase-dialog{
        width: 96%;
        border-radius: 16px;
        max-height: 88vh;
    }

    body.page-dashboard .purchase-dialog-header{
        padding: 16px 18px;
    }

    body.page-dashboard .purchase-dialog-body{
        padding: 18px;
        max-height: calc(88vh - 160px);
    }

    body.page-dashboard .purchase-section{
        margin-bottom: 20px;
    }

    body.page-dashboard .duration-options-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.page-dashboard .duration-option-card{
        padding: 14px 10px;
    }

    body.page-dashboard .duration-option-card .duration-price{
        font-size: 18px;
    }

    body.page-dashboard .payment-options-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.page-dashboard .payment-option-card{
        padding: 14px 10px;
    }

    body.page-dashboard .verify-code-section{
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    body.page-dashboard .verify-code-display{
        padding: 14px 20px;
    }

    body.page-dashboard .verify-code-value{
        font-size: 24px;
    }

    body.page-dashboard .verify-code-input{
        width: 100%;
        box-sizing: border-box;
    }

    body.page-dashboard .order-summary-bar{
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        text-align: center;
    }

    body.page-dashboard .summary-left{
        align-items: center;
    }

    body.page-dashboard .purchase-confirm-btn{
        width: 100%;
        padding: 14px;
    }
}

/* Multi-server dashboard: keep each plan, account and line in one server scope. */
body.page-dashboard .user-card .user-info-sidebar {
    display: flex;
    min-height: 40px;
    align-items: center;
}

body.page-dashboard .user-card .user-name {
    width: 100%;
    color: #20314b;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-primary .stat-icon-modern svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.page-dashboard #section-home .subscription-lines-container,
body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
}

body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
    align-items: start;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact,
body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > .server-lines-compact {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
}

body.page-dashboard #section-home .emby-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

body.page-dashboard #section-home .emby-service-card {
    display: flex;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    container: emby-service / inline-size;
    overflow: hidden;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: var(--user-card-radius, 20px);
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055);
}

body.page-dashboard #section-home .emby-service-card-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px;
    background: #f7fbff;
    border-bottom: 1px solid #e2ebf4;
}

body.page-dashboard #section-home .emby-service-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

body.page-dashboard #section-home .emby-service-number {
    align-self: flex-start;
    color: #89a3bf;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

body.page-dashboard #section-home .emby-service-server-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: #0b7ff3;
    background: #e7f3ff;
    border: 1px solid #cee5fb;
    border-radius: 10px;
}

body.page-dashboard #section-home .emby-service-server-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.page-dashboard #section-home .emby-service-identity > div {
    min-width: 0;
}

body.page-dashboard #section-home .emby-service-identity > div > span {
    display: block;
    margin-bottom: 2px;
    color: #7890aa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

body.page-dashboard #section-home .emby-service-identity h3 {
    margin: 0;
    overflow: hidden;
    color: #13243a;
    font-size: 16px;
    font-weight: 780;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-tags {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

body.page-dashboard #section-home .emby-service-tags > span {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 720;
    line-height: 1.2;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-plan {
    max-width: 210px;
    overflow: hidden;
    color: #0b6fda;
    background: #eaf5ff;
    border: 1px solid #cfe5fa;
    text-overflow: ellipsis;
}

body.page-dashboard #section-home .emby-service-access {
    color: #765923;
    background: #fff7df;
    border: 1px solid #f2dfaa;
}

body.page-dashboard #section-home .emby-service-access.is-whitelist {
    color: #16735d;
    background: #edf9f4;
    border-color: #ccebdd;
}

body.page-dashboard #section-home .emby-service-expiry {
    color: #5c6f86;
    background: #fff;
    border: 1px solid #d9e4ef;
}

body.page-dashboard #section-home .emby-service-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    flex: 1 1 auto;
}

body.page-dashboard #section-home :is(.emby-service-account-panel, .emby-service-lines-panel) {
    min-width: 0;
    padding: 16px 18px 18px;
}

body.page-dashboard #section-home .emby-service-lines-panel {
    border-top: 1px solid #e5edf5;
}

body.page-dashboard #section-home .emby-service-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

body.page-dashboard #section-home .emby-service-panel-heading > span {
    color: #263b54;
    font-size: 11px;
    font-weight: 780;
}

body.page-dashboard #section-home .emby-service-panel-heading > small {
    color: #8a9caf;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-home .emby-service-credentials {
    display: grid;
    gap: 8px;
}

body.page-dashboard #section-home .emby-service-credential {
    min-width: 0;
    padding: 9px 10px;
    background: #f8fbfe;
    border: 1px solid #e2ebf4;
    border-radius: 9px;
}

body.page-dashboard #section-home .emby-service-credential > span {
    display: block;
    margin-bottom: 3px;
    color: #8496aa;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-home .emby-service-credential > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.page-dashboard #section-home .emby-service-credential strong {
    min-width: 0;
    overflow: hidden;
    color: #20314b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-credential strong.is-secret {
    letter-spacing: .12em;
}

body.page-dashboard #section-home .emby-service-credential .credential-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

body.page-dashboard #section-home .emby-service-credential .credential-btn,
body.page-dashboard #section-home .emby-service-line .line-toggle-btn,
body.page-dashboard #section-home .emby-service-line .line-copy-btn {
    display: inline-grid;
    width: 28px;
    height: 28px;
    min-width: 28px;
    place-items: center;
    padding: 0;
    color: #60758e;
    background: #fff;
    border: 1px solid #d8e3ee;
    border-radius: 7px;
}

body.page-dashboard #section-home :is(.emby-service-credential, .emby-service-line) button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.page-dashboard #section-home .emby-service-lines-list {
    display: grid;
    grid-auto-rows: max-content;
    height: 168px;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
    scrollbar-gutter: stable;
}

body.page-dashboard #section-home .emby-service-lines-list > .emby-service-lines-empty {
    box-sizing: border-box;
    min-height: 100%;
}

body.page-dashboard #section-home .emby-service-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    background: #f8fbfe;
    border: 1px solid #e2ebf4;
    border-radius: 9px;
}

body.page-dashboard #section-home .emby-service-line .line-icon-badge {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 7px;
}

body.page-dashboard #section-home .emby-service-line-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body.page-dashboard #section-home .emby-service-line-copy strong,
body.page-dashboard #section-home .emby-service-line-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-line-copy strong {
    color: #263b54;
    font-size: 10px;
    font-weight: 750;
}

body.page-dashboard #section-home .emby-service-line-copy span {
    color: #6f849d;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
}

body.page-dashboard #section-home .emby-service-line-copy span.line-hidden {
    color: #a2afbd;
    letter-spacing: .08em;
}

body.page-dashboard #section-home .emby-service-line .line-actions-compact {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

body.page-dashboard #section-home .emby-service-inline-empty {
    display: flex;
    min-height: 86px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: #6f849d;
    background: #f8fbfe;
    border: 1px dashed #d7e4ef;
    border-radius: 9px;
}

body.page-dashboard #section-home .emby-service-inline-empty > span {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    color: #7890aa;
    background: #fff;
    border: 1px solid #dde8f2;
    border-radius: 8px;
}

body.page-dashboard #section-home .emby-service-inline-empty svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.page-dashboard #section-home .emby-service-inline-empty strong,
body.page-dashboard #section-home .emby-service-inline-empty p {
    display: block;
    margin: 0;
    line-height: 1.4;
}

body.page-dashboard #section-home .emby-service-inline-empty strong {
    margin-bottom: 2px;
    color: #344a63;
    font-size: 11px;
}

body.page-dashboard #section-home .emby-service-inline-empty p {
    color: #7d90a6;
    font-size: 9px;
}

body.page-dashboard #section-home .emby-service-import-btn {
    display: flex;
    width: max-content;
    max-width: 100%;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 9px auto 0;
    padding: 6px 10px;
    color: #0b6fda;
    background: #eaf5ff;
    border: 1px solid #cfe5fa;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
}

body.page-dashboard #section-home .emby-service-import-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.page-dashboard #section-home .server-lines-no-access .no-access-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        min-height: 220px;
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-home .emby-service-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.page-dashboard #section-home .emby-service-tags {
        width: 100%;
        justify-content: flex-start;
    }

    body.page-dashboard #section-home .emby-service-card-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .emby-service-lines-panel {
        border-top: 1px solid #e5edf5;
        border-left: 0;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-home .emby-service-card {
        border-radius: 14px;
    }

    body.page-dashboard #section-home .emby-service-card-header,
    body.page-dashboard #section-home :is(.emby-service-account-panel, .emby-service-lines-panel) {
        padding: 14px;
    }

    body.page-dashboard #section-home .emby-service-number {
        display: none;
    }

    body.page-dashboard #section-home .emby-service-plan {
        max-width: min(100%, 190px);
    }
}

/* 确认弹窗基础样式 */
body.page-dashboard .confirm-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .confirm-overlay.show{
    display: flex;
}

body.page-dashboard .confirm-dialog{
    background: white;
    border-radius: 16px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: dialogSlideIn 0.3s ease;
}

body.page-dashboard .confirm-dialog .icon{
    text-align: center;
    font-size: 48px;
    padding-top: 24px;
}

body.page-dashboard .confirm-dialog h3{
    text-align: center;
    color: #1e293b;
    margin: 16px 0;
    font-size: 20px;
    font-weight: 600;
}

body.page-dashboard .confirm-dialog .payment-info{
    padding: 0 24px 16px;
    text-align: center;
}

body.page-dashboard .confirm-dialog .payment-info p{
    margin: 8px 0;
    color: #64748b;
    font-size: 14px;
}

body.page-dashboard .confirm-dialog .payment-tip{
    text-align: center;
    color: #64748b;
    font-size: 13px;
    padding: 0 24px;
    margin: 0 0 20px 0;
}

body.page-dashboard .confirm-dialog .buttons{
    display: flex;
    gap: 12px;
    padding: 0 24px 24px;
}

body.page-dashboard .confirm-dialog .btn-cancel{
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .confirm-dialog .btn-cancel:hover{
    background: #f8fafc;
    border-color: #cbd5e1;
}

body.page-dashboard .confirm-dialog .btn-confirm{
    flex: 2;
    padding: 12px 20px;
    border: none;
    background: #3b82f6;
    color: white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .confirm-dialog .btn-confirm:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   我的订单区域 - 简约风格
   ============================================ */
body.page-dashboard .my-orders-section{
    margin-top: 20px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

body.page-dashboard .orders-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

body.page-dashboard .orders-header h3{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .refresh-orders-btn{
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .refresh-orders-btn:hover{
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

body.page-dashboard .orders-list{
    max-height: 400px;
    overflow-y: auto;
}

body.page-dashboard .orders-loading,
body.page-dashboard .orders-empty{
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

body.page-dashboard .orders-empty .empty-icon{
    font-size: 48px;
    margin-bottom: 12px;
}

/* 订单卡片 */
body.page-dashboard .order-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

body.page-dashboard .order-card:last-child{
    border-bottom: none;
}

body.page-dashboard .order-card:hover{
    background: #f8fafc;
}

body.page-dashboard .order-card.pending{
    background: #fffbeb;
}

body.page-dashboard .order-info{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .order-main{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

body.page-dashboard .order-plan{
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .order-duration{
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

body.page-dashboard .order-status{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

body.page-dashboard .order-status.pending{
    background: #fef3c7;
    color: #b45309;
}

body.page-dashboard .order-status.paid{
    background: #d1fae5;
    color: #065f46;
}

body.page-dashboard .order-status.cancelled{
    background: #f1f5f9;
    color: #64748b;
}

body.page-dashboard .order-status.expired{
    background: #fee2e2;
    color: #991b1b;
}

body.page-dashboard .order-meta{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #64748b;
}

body.page-dashboard .order-no{
    font-family: monospace;
}

body.page-dashboard .order-price{
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
    margin-right: 12px;
}

body.page-dashboard .order-actions{
    display: flex;
    gap: 8px;
}

body.page-dashboard .order-btn{
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

body.page-dashboard .order-btn.pay{
    background: #3b82f6;
    color: white;
}

body.page-dashboard .order-btn.pay:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.page-dashboard .order-btn.cancel{
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .order-btn.cancel:hover{
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* 取消订单确认弹窗 */
body.page-dashboard .cancel-order-dialog{
    max-width: 380px;
}

body.page-dashboard .cancel-order-dialog .cancel-info{
    padding: 0 24px 20px;
    text-align: center;
}

body.page-dashboard .cancel-order-dialog .cancel-info p{
    margin: 8px 0;
    color: #64748b;
    font-size: 14px;
}

body.page-dashboard .cancel-order-dialog .cancel-info strong{
    color: #1e293b;
    font-family: monospace;
}

body.page-dashboard .cancel-order-dialog .warning-text{
    color: #dc2626 !important;
    font-size: 13px !important;
}

body.page-dashboard .cancel-order-dialog .btn-danger{
    background: #ef4444 !important;
}

body.page-dashboard .cancel-order-dialog .btn-danger:hover{
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
}

/* 响应式优化 */
@media (max-width: 768px) {
    body.page-dashboard .plans-grid-new{
        grid-template-columns: 1fr;
        gap: 20px;
    }



    body.page-dashboard .price-row{
        padding: 10px 14px;
    }

    body.page-dashboard .price-value{
        font-size: 18px;
    }

    body.page-dashboard .payment-options-inline{
        flex-direction: column;
    }

    body.page-dashboard .payment-option-inline{
        min-width: auto;
    }

    body.page-dashboard .purchase-tips{
        flex-direction: column;
        gap: 12px;
    }

    body.page-dashboard .quick-buy-dialog{
        width: 95%;

    }

    body.page-dashboard .quick-buy-dialog .dialog-footer{
        flex-direction: column;
    }

    body.page-dashboard .quick-buy-dialog .btn-cancel,
body.page-dashboard .quick-buy-dialog .btn-confirm{
        flex: auto;
    }

    body.page-dashboard .order-card{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard .order-price{
        margin-right: 0;
    }

    body.page-dashboard .order-actions{
        width: 100%;
    }

    body.page-dashboard .order-btn{
        flex: 1;
    }
}

/* ============================================
   兑换码区域样式 - 简约风格
   ============================================ */

/* 兑换码卡片 - 简约白色 */
body.page-dashboard .redeem-card{
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.2s ease;
}

body.page-dashboard .redeem-card:hover{
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

body.page-dashboard .redeem-card-icon{
    font-size: 36px;
    flex-shrink: 0;
}

body.page-dashboard .redeem-card-content{
    flex: 1;
}

body.page-dashboard .redeem-card-title{
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

body.page-dashboard .redeem-card-desc{
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

body.page-dashboard .redeem-card-form{
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

body.page-dashboard .redeem-card-form input{
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    background: #ffffff;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    width: 180px;
}

body.page-dashboard .redeem-card-form input:focus{
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.page-dashboard .redeem-card-form input::placeholder{
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    color: #9ca3af;
}

body.page-dashboard .redeem-btn{
    padding: 12px 24px;
    background: #1e293b;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.page-dashboard .redeem-btn:hover{
    background: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2);
}

body.page-dashboard .redeem-btn:disabled{
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body.page-dashboard .spinner-small{
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

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

/* 兑换区域响应式 */
@media (max-width: 768px) {
    body.page-dashboard .redeem-card{
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    body.page-dashboard .redeem-card-form{
        width: 100%;
        flex-direction: column;
    }

    body.page-dashboard .redeem-card-form input{
        width: 100%;
    }

    body.page-dashboard .redeem-btn{
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   线路信息样式（整合版）
   ============================================ */


body.page-dashboard .dashboard-subscription-lines .section-title{
    display: flex;
    justify-content: space-between;
    align-items: center;

}

body.page-dashboard .dashboard-subscription-lines{
    margin-bottom: 20px;
}

body.page-dashboard .dashboard-subscription-lines .section-title{
    font-size: 16px;
    margin-bottom: 12px;
}

body.page-dashboard .dashboard-subscription-lines .title-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-dashboard .dashboard-subscription-lines .refresh-btn{
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

body.page-dashboard .dashboard-subscription-lines .refresh-btn:hover{
    background: rgba(32, 32, 32, 0.1);
}

body.page-dashboard .subscription-lines-container{
    background: white;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    display: flex;
    gap: 16px;
}

/* 订阅状态迷你卡片 */
body.page-dashboard .subscription-status-mini{
    flex-shrink: 0;
    min-width: 180px;
}

body.page-dashboard .status-badge-mini{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
}

body.page-dashboard .status-badge-mini.whitelist{
    background: #f7f9fd;
    color: #b45309;
    border-color: #fcd34d;
}

body.page-dashboard .status-badge-mini.subscriber{
    background: #ecfdf5;
    color: #047857;
    border-color: #6ee7b7;
}

body.page-dashboard .status-badge-mini.no-sub{
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

body.page-dashboard .status-badge-mini .badge-icon{
    font-size: 22px;
}

body.page-dashboard .status-badge-mini .badge-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.page-dashboard .status-badge-mini .badge-title{
    font-weight: 600;
    font-size: 14px;
}

body.page-dashboard .status-badge-mini .badge-desc{
    font-size: 12px;
    opacity: 0.85;
}

body.page-dashboard .status-badge-mini .badge-desc a{
    color: inherit;
    text-decoration: underline;
}

/* 线路信息紧凑版 */
body.page-dashboard .server-lines-compact{
    flex: 1;
    min-width: 0;
}

/* 无权限提示 */
body.page-dashboard .server-lines-no-access{
    text-align: center;
    padding: 20px 16px;
}

body.page-dashboard .server-lines-no-access .no-access-icon{
    font-size: 32px;
    margin-bottom: 8px;
}

body.page-dashboard .server-lines-no-access h3{
    color: #374151;
    font-size: 14px;
    margin-bottom: 4px;
}

body.page-dashboard .server-lines-no-access p{
    color: #6b7280;
    font-size: 12px;
    margin-bottom: 10px;
}

body.page-dashboard .server-lines-no-access .btn-go-purchase{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: #3b82f6;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    transition: all 0.2s ease;
}

body.page-dashboard .server-lines-no-access .btn-go-purchase:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 账号信息紧凑版 */
body.page-dashboard .server-account-compact{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    color: #1a1a1a;
    margin-bottom: 10px;
}

body.page-dashboard .server-account-compact h4{
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #4a4a4a;
}

body.page-dashboard .account-row{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.page-dashboard .account-item{
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    border-radius: 6px;
    flex: 1;
    min-width: 130px;
}

body.page-dashboard .account-item .label{
    font-size: 11px;
    color: #4a4a4a;
}

body.page-dashboard .account-item .value{
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 12px;
    font-weight: 600;
    flex: 1;
    color: #1a1a1a;
}

body.page-dashboard .account-item .value.hidden{
    letter-spacing: 2px;
}

body.page-dashboard .account-item .btn-small{
    background: #e5e7eb;
    border: none;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: #4a4a4a;
    transition: all 0.2s ease;
}

body.page-dashboard .account-item .btn-small:hover{
    background: #d1d5db;
}

/* 线路列表紧凑版 */
body.page-dashboard .server-lines-list-compact{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.page-dashboard .server-line-compact{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: #fbfdff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

body.page-dashboard .server-line-compact:hover{
    border-color: #3b82f6;
    background: #f0f4ff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.08);
}

body.page-dashboard .line-main-compact{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

body.page-dashboard .line-text-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

body.page-dashboard .line-icon-badge{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.page-dashboard .line-icon-badge.whitelist{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .line-icon-badge.subscriber{
    background: #dbeafe;
    color: #1d4ed8;
}

/* 新版线路样式 - 更清晰的字体 */
body.page-dashboard .line-name-new{
    font-weight: 600;
    font-size: 15px;
    color: #111827;
    flex-shrink: 0;
    white-space: nowrap;
}

body.page-dashboard .line-url-new{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-dashboard .line-url-new.line-hidden{


    font-weight: 400;
}

body.page-dashboard .line-copy-btn{
    padding: 7px 12px;
    min-width: 72px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

body.page-dashboard .line-copy-btn:hover{
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}

body.page-dashboard .line-actions-compact{
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

body.page-dashboard .line-toggle-btn{
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .line-toggle-btn:hover{
    background: #eaf2ff;
    border-color: #bfdbfe;
}

body.page-dashboard .line-action-icon{
    font-size: 13px;
    line-height: 1;
}

/* ==================== 一键导入播放器 ==================== */

/* 线路列表下方的导入栏 */
body.page-dashboard .import-all-bar{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

body.page-dashboard .import-all-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: #333333;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(32, 32, 32, 0.3);
}

body.page-dashboard .import-all-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.4);
}

body.page-dashboard .import-all-btn:active{
    transform: translateY(0);
}

body.page-dashboard .import-all-icon{
    font-size: 15px;
}

/* 导入弹窗遮罩 */
body.page-dashboard .import-dialog-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(24, 38, 56, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    box-sizing: border-box;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

/* 导入弹窗主体 */
body.page-dashboard .import-dialog{
    background: #ffffff;
    border: 1px solid rgba(218, 230, 246, .8);
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    max-height: min(85dvh, calc(100dvh - 40px));
    box-shadow: 0 24px 72px rgba(19, 46, 87, .2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

body.page-dashboard .import-dialog-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

body.page-dashboard .import-dialog-header h3{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-dashboard .import-dialog-close{
    background: #f3f4f6;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

body.page-dashboard .import-dialog-close:hover{
    background: #e5e7eb;
    color: #374151;
}

/* 弹窗账号信息栏 */
body.page-dashboard .import-dialog-account{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #f8fafc;
    font-size: 12px;
    color: #6b7280;
    flex-shrink: 0;
}

body.page-dashboard .import-dialog-account strong{
    color: #374151;
}

body.page-dashboard .import-line-count{
    font-size: 11px;
    background: #e0e7ff;
    color: #4338ca;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

/* 弹窗提示 */
body.page-dashboard .import-dialog-tip{
    padding: 10px 20px 8px;
    margin: 0;
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
    flex-shrink: 0;
}

/* 播放器选择与导入按钮 */
body.page-dashboard .import-player-controls{
    display: grid;
    grid-auto-rows: max-content;
    gap: 12px;
    padding: 12px 20px 20px;
    overflow-y: auto;
    min-height: 0;
}

body.page-dashboard .import-player-picker{
    --control-height: 48px;
    --control-font-size: 15px;
    --control-bg: #f7faff;
    --control-border: #d8e5f7;
    --control-accent: #769bd0;
    --control-ring: rgba(118, 155, 208, .15);
    display: grid;
    gap: 8px;
    color: #526780;
    font-size: 13px;
    font-weight: 600;
}

body.page-dashboard .import-player-picker[hidden]{
    display: none;
}

body.page-dashboard .import-select-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #d6e3f2;
    border-radius: 18px;
    background: #f8fbff;
    color: #203853;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    box-shadow: 0 2px 6px rgba(53, 94, 149, .03);
    cursor: pointer;
}

body.page-dashboard .import-select-trigger > [data-import-select-value]{
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    overflow-wrap: anywhere;
}

body.page-dashboard .import-select-recommendation{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 4px;
    margin-left: auto;
    padding: 3px 8px;
    border: 1px solid #ffe0c8;
    border-radius: 999px;
    background: #fff2e9;
    color: #a95124;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

body.page-dashboard .import-select-recommendation[hidden]{
    display: none;
}

body.page-dashboard .import-select-chevron{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: #7691b4;
    line-height: 0;
    transition: transform .16s ease;
}

body.page-dashboard .import-select-chevron svg{
    display: block;
    width: 18px;
    height: 18px;
}

body.page-dashboard .import-select-trigger[aria-expanded="true"] .import-select-chevron{
    transform: rotate(180deg);
}

body.page-dashboard .import-select-trigger:focus-visible{
    outline: 2px solid #8ab7ed;
    outline-offset: 2px;
}

body.page-dashboard .import-select-menu{
    display: grid;
    gap: 4px;
    max-height: min(280px, 40dvh);
    padding: 6px;
    border: 1px solid #dce7f5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(41, 72, 116, .1);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

body.page-dashboard .import-select-menu[hidden]{
    display: none;
}

body.page-dashboard .import-select-option{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #415a78;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

body.page-dashboard .import-select-option > span:first-child{
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

body.page-dashboard .import-select-option:hover,
body.page-dashboard .import-select-option:focus-visible{
    background: #f4f8fe;
    outline: 2px solid #b8d1f2;
    outline-offset: -2px;
}

body.page-dashboard .import-select-option[aria-selected="true"]{
    background: #eaf2ff;
    color: #355e95;
    font-weight: 600;
}

body.page-dashboard .import-select-check{
    flex-shrink: 0;
    visibility: hidden;
    color: #648abe;
}

body.page-dashboard .import-select-option[aria-selected="true"] .import-select-check{
    visibility: visible;
}

body.page-dashboard .import-player-hint{
    min-height: 18px;
    margin: 0;
    color: #8192a7;
    font-size: 12px;
    line-height: 1.5;
}

body.page-dashboard .import-player-submit{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    border: 1px solid #d1dff3;
    border-radius: 16px;
    background: #eaf2ff;
    color: #355e95;
    box-shadow: 0 3px 10px rgba(53, 94, 149, .06);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.page-dashboard .import-player-submit:not([aria-disabled="true"]):hover{
    background: #e0ecff;
    border-color: #b7cdea;
    box-shadow: 0 5px 14px rgba(53, 94, 149, .12);
}

body.page-dashboard .import-player-submit:focus-visible{
    outline: 2px solid #769bd0;
    outline-offset: 3px;
}

body.page-dashboard .import-player-submit > span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
}

body.page-dashboard .import-player-submit[aria-disabled="true"]{
    opacity: .5;
    cursor: default;
}

body.page-dashboard .import-dialog-buttons{
    padding: 0 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* 播放器导入按钮（通用） */
body.page-dashboard .import-player-btn{
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
}

body.page-dashboard .import-player-btn:hover{
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .import-player-icon{
    font-size: 22px;
    margin-right: 12px;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

body.page-dashboard .import-player-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.page-dashboard .import-player-name{
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

body.page-dashboard .import-player-desc{
    font-size: 11px;
    color: #9ca3af;
}

body.page-dashboard .import-arrow{
    font-size: 16px;
    color: #d1d5db;
    transition: color 0.2s;
    flex-shrink: 0;
}

body.page-dashboard .import-player-btn:hover .import-arrow{
    color: #6b7280;
}

/* SenPlayer 样式 */
body.page-dashboard .import-player-btn.senplayer{
    border-color: #cacac8;
}
body.page-dashboard .import-player-btn.senplayer:hover{
    background: #faf5ff;
    border-color: #777777;
}

/* Forward 样式 */
body.page-dashboard .import-player-btn.forward{
    border-color: #93c5fd;
}
body.page-dashboard .import-player-btn.forward:hover{
    background: #eff6ff;
    border-color: #60a5fa;
}

/* Hills 按钮 */
body.page-dashboard .import-player-btn.hills{
    border-color: #86efac;
    background: #f0fdf4;
}

body.page-dashboard .import-player-btn.hills:hover{
    background: #dcfce7;
    border-color: #4ade80;
}

body.page-dashboard .import-player-btn.vidora{
    border-color: #b5c7ef;
    background: #f4f7ff;
}

body.page-dashboard .import-player-btn.vidora:hover{
    border-color: #7798db;
    background: #edf2ff;
}

body.page-dashboard .import-player-btn[aria-disabled="true"]{
    opacity: .65;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* 弹窗账号信息 */
body.page-dashboard .import-account-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 弹窗底部 */
body.page-dashboard .import-dialog-footer{
    display: grid;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

body.page-dashboard .import-copy-all-btn{
    width: 100%;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #4b5563;
    transition: all 0.2s;
}

body.page-dashboard .import-copy-all-btn:hover{
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1f2937;
}

/* 导入弹窗响应式 */
@media (max-width: 768px) {
    body.page-dashboard .import-dialog-overlay{
        align-items: center;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }

    body.page-dashboard .import-dialog{
        border-radius: 22px;
        max-width: 440px;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    }

    body.page-dashboard .import-player-picker{
        --control-font-size: 16px;
    }

    body.page-dashboard .import-select-trigger{
        font-size: 16px;
    }

    body.page-dashboard .import-select-option{
        min-height: 44px;
    }

    body.page-dashboard .import-player-btn{
        padding: 10px 12px;
    }

    body.page-dashboard .import-player-icon{
        font-size: 18px;
        margin-right: 10px;
    }

    body.page-dashboard .import-all-btn{
        width: 100%;
        justify-content: center;
    }
}

body.page-dashboard .line-url-new.line-hidden{
    color: #9ca3af;
    letter-spacing: 1px;
}

/* 用户等级提示 */
body.page-dashboard .user-level-hint{
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

body.page-dashboard .user-level-hint.whitelist{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .user-level-hint.subscriber{
    background: #d1fae5;
    color: #065f46;
}

/* 响应式 */
@media (max-width: 768px) {
    body.page-dashboard .subscription-lines-container{

        padding: 14px;
    }

    body.page-dashboard .subscription-status-mini{
        min-width: 100%;
    }

    body.page-dashboard .account-row{
        flex-direction: column;
    }

    body.page-dashboard .account-item{
        min-width: 100%;
    }

    body.page-dashboard .server-line-compact{
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
    }

    body.page-dashboard .line-main-compact{
        width: 100%;
        gap: 10px;
    }

    body.page-dashboard .line-icon-badge{
        width: 28px;
        height: 28px;
        border-radius: 9px;
        font-size: 14px;
    }

    body.page-dashboard .line-name-new{

        flex-shrink: 0;
    }

    body.page-dashboard .line-url-new{

        flex: 1;
        min-width: 0;
    }

    body.page-dashboard .line-actions-compact{
        display: flex;
        width: 100%;
        gap: 8px;
        justify-content: flex-end;
    }

    body.page-dashboard .line-toggle-btn{
        flex: none;
        width: 32px;
        height: 32px;
    }

    body.page-dashboard .line-copy-btn{
        flex: 1;
        text-align: center;
        min-width: 0;
    }
}

/* ==================== 播放监控页面样式 ==================== */

/* 统计卡片网格 */
body.page-dashboard .playback-stats-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

body.page-dashboard .playback-stat-card{
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

body.page-dashboard .playback-stat-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

body.page-dashboard .playback-stat-card .stat-icon{
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard .playback-stat-card .stat-icon svg{
    width: 28px;
    height: 28px;
}

body.page-dashboard .playback-stat-card.stat-online .stat-icon{
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #047857;
}

body.page-dashboard .playback-stat-card.stat-playing .stat-icon{
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #3b82f6;
}

body.page-dashboard .playback-stat-card.stat-history .stat-icon{
    background: #f7f9fd;
    border: 1px solid #fcd34d;
    color: #b45309;
}

body.page-dashboard .playback-stat-card .stat-content{
    flex: 1;
}

body.page-dashboard .playback-stat-card .stat-value{
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 6px;
}

body.page-dashboard .playback-stat-card .stat-label{
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* 播放区块 */
body.page-dashboard .playback-section{
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 播放监控头部（兜底样式，避免增强样式未命中时退化） */
body.page-dashboard #section-playback .section-header.playback-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.page-dashboard #section-playback .playback-header-main{
    min-width: 220px;
}

body.page-dashboard #section-playback .playback-header-main h1{
    margin-bottom: 6px;
}

body.page-dashboard #section-playback .playback-header-main p{
    color: #6b7280;
    line-height: 1.5;
}

body.page-dashboard #section-playback .playback-header-tools{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

body.page-dashboard #section-playback .playback-live-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #047857;
}

body.page-dashboard #section-playback .playback-live-pill.is-loading{
    border-color: #fde68a;
    background: #f7f9fd;
    color: #b45309;
}

body.page-dashboard #section-playback .playback-live-pill.is-error{
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

body.page-dashboard #section-playback .playback-live-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    animation: playbackLivePulse 1.8s ease-in-out infinite;
}

body.page-dashboard #section-playback .playback-update-time{
    font-size: 12px;
    color: #6b7280;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}

body.page-dashboard #section-playback .playback-auto-btn{
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard #section-playback .playback-auto-btn.on{
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

body.page-dashboard #section-playback .playback-auto-btn.off{
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

body.page-dashboard #section-playback .playback-refresh-btn{
    font-weight: 600;
}

@media (max-width: 1024px) {
    body.page-dashboard #section-playback .section-header.playback-header{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body.page-dashboard #section-playback .playback-header-tools{
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    body.page-dashboard #section-playback .playback-live-pill,
body.page-dashboard #section-playback .playback-update-time,
body.page-dashboard #section-playback .playback-auto-btn,
body.page-dashboard #section-playback .playback-refresh-btn{
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

body.page-dashboard .section-title-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}

body.page-dashboard .section-title-bar h3{
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .refresh-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.2s ease;
}

body.page-dashboard .refresh-btn:hover{
    background: #e5e7eb;
    color: #1f2937;
}

body.page-dashboard .refresh-btn svg{
    transition: transform 0.3s ease;
}

body.page-dashboard .refresh-btn:hover svg{
    transform: rotate(180deg);
}

body.page-dashboard .history-limit-select{
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #4b5563;
    background: white;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

body.page-dashboard .history-limit-select:hover{
    border-color: #3b82f6;
}

body.page-dashboard .history-limit-select:focus{
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.1);
}

/* 设备网格 */
body.page-dashboard .devices-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}

body.page-dashboard .device-card{
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

body.page-dashboard .device-card:hover{
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.1);
}

body.page-dashboard .device-card.playing{
    border-color: #10b981;
    background: #f0fdf4;
}

body.page-dashboard .device-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

body.page-dashboard .device-header-right{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

body.page-dashboard .playback-server-badge{
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    padding: 3px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .device-info{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

body.page-dashboard .device-icon{
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

body.page-dashboard .device-details{
    min-width: 0;
    flex: 1;
}

body.page-dashboard .device-details h4{
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .device-details p{
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .device-ip{
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: #f9fafb;
    border-radius: 6px;
}

body.page-dashboard .device-status{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

body.page-dashboard .device-status.online{
    background: #d1fae5;
    color: #059669;
}

body.page-dashboard .device-status.playing{
    background: #c7d2fe;
    color: #222222;
}

body.page-dashboard .device-status.idle{
    background: #f3f4f6;
    color: #6b7280;
}

body.page-dashboard .status-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* 正在播放内容 */
body.page-dashboard .now-playing{
    background: white;
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
}

body.page-dashboard .now-playing-header{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

body.page-dashboard .now-playing-content{
    display: flex;
    gap: 12px;
}

body.page-dashboard .now-playing-poster{
    width: 60px;
    height: 90px;
    border-radius: 8px;
    background: #e5e7eb;
    flex-shrink: 0;
    overflow: hidden;
}

body.page-dashboard .now-playing-poster img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-dashboard .now-playing-info{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .now-playing-title{
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .now-playing-meta{
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
}

/* 播放进度条 */
body.page-dashboard .playback-progress{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.page-dashboard .progress-bar{
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

body.page-dashboard .progress-fill{
    height: 100%;
    background: #3b82f6;
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 2px;
}

body.page-dashboard .progress-time{
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* 播放状态标签 */
body.page-dashboard .play-state-tag{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 8px;
}

body.page-dashboard .play-state-tag.paused{
    background: #fef3c7;
    color: #92400e;
}

body.page-dashboard .play-state-tag.transcoding{
    background: #f1f1ef;
    color: #333333;
}

body.page-dashboard .play-state-tag.direct{
    background: #d1fae5;
    color: #059669;
}

/* 播放历史列表 */
body.page-dashboard .history-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .history-item{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

body.page-dashboard .history-item:hover{
    border-color: #3b82f6;
    background: white;
}

body.page-dashboard .history-poster{
    width: 50px;
    height: 75px;
    border-radius: 8px;
    background: #e5e7eb;
    flex-shrink: 0;
    overflow: hidden;
}

body.page-dashboard .history-poster img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-dashboard .history-poster .no-poster{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #9ca3af;
}

body.page-dashboard .history-info{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .history-title{
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .history-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

body.page-dashboard .history-meta-item{
    display: flex;
    align-items: center;
    gap: 4px;
}

body.page-dashboard .history-badge{
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

body.page-dashboard .history-badge.movie{
    background: #f1f1ef;
    color: #333333;
}

body.page-dashboard .history-badge.episode{
    background: #dbeafe;
    color: #2563eb;
}

body.page-dashboard .history-progress-mini{
    width: 60px;
    flex-shrink: 0;
    text-align: right;
}

body.page-dashboard .progress-circle{
    width: 40px;
    height: 40px;
    margin-left: auto;
}

body.page-dashboard .progress-ring{
    transform: rotate(-90deg);
}

body.page-dashboard .progress-ring-bg{
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 3;
}

body.page-dashboard .progress-ring-fill{
    fill: none;
    stroke: #3b82f6;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s ease;
}

body.page-dashboard .progress-text{
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    margin-top: 4px;
}

/* 播放历史分页 */
body.page-dashboard .history-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
}

body.page-dashboard .pagination-info{
    font-size: 13px;
    color: #6b7280;
}

body.page-dashboard .pagination-controls{
    display: flex;
    align-items: center;
    gap: 6px;
}

body.page-dashboard .page-btn{
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .page-btn:hover:not(:disabled){
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

body.page-dashboard .page-btn.active{
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

body.page-dashboard .page-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

body.page-dashboard .page-btn.page-prev,
body.page-dashboard .page-btn.page-next{
    padding: 0 8px;
}

body.page-dashboard .page-ellipsis{
    color: #9ca3af;
    padding: 0 4px;
    font-size: 14px;
}

/* 空状态 */
body.page-dashboard .empty-devices{
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

body.page-dashboard .empty-devices .empty-icon{
    font-size: 48px;
    margin-bottom: 16px;
}

body.page-dashboard .empty-devices h4{
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
}

body.page-dashboard .empty-devices p{
    font-size: 14px;
}

/* 加载状态 */
body.page-dashboard .loading-placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
    gap: 12px;
}

body.page-dashboard .loading-spinner{
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* 错误状态 */
body.page-dashboard .error-state{
    text-align: center;
    padding: 40px 20px;
    background: #fef2f2;
    border-radius: 12px;
    border: 1px solid #fecaca;
}

body.page-dashboard .error-state .error-icon{
    font-size: 40px;
    margin-bottom: 12px;
}

body.page-dashboard .error-state h4{
    font-size: 15px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 6px;
}

body.page-dashboard .error-state p{
    font-size: 13px;
    color: #991b1b;
}

/* 响应式 */
@media (max-width: 768px) {
    body.page-dashboard .playback-stats-grid{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.page-dashboard .playback-stat-card{
        padding: 20px;
    }

    body.page-dashboard .playback-stat-card .stat-icon{
        width: 48px;
        height: 48px;
    }

    body.page-dashboard .playback-stat-card .stat-value{
        font-size: 26px;
    }

    body.page-dashboard .devices-grid{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .section-title-bar{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard .history-item{
        padding: 12px;
    }

    body.page-dashboard .history-poster{
        width: 40px;
        height: 60px;
    }

    body.page-dashboard .history-meta{
        flex-direction: column;
        gap: 4px;
    }

    body.page-dashboard .history-pagination{
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    body.page-dashboard .pagination-controls{
        flex-wrap: wrap;
        justify-content: center;
    }

    body.page-dashboard .page-btn{
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    body.page-dashboard .my-devices-grid{
        grid-template-columns: 1fr;
    }
}

/* ==================== 我的设备列表 ==================== */
body.page-dashboard .device-count-badge{
    background: #e0e7ff;
    color: #222222;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

body.page-dashboard .my-devices-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
}

body.page-dashboard .my-device-card{
    background: white;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

body.page-dashboard .my-device-card:hover{
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

body.page-dashboard .device-main{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

body.page-dashboard .device-icon-large{
    width: 44px;
    height: 44px;
    background: #f0f4ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

body.page-dashboard .device-details .device-name{
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .device-details .device-client{
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .device-details .device-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #9ca3af;
}

body.page-dashboard .device-details .last-active{
    color: #6b7280;
}

body.page-dashboard .device-details .last-ip{
    color: #9ca3af;
}

/* ==================== 播放历史卡片样式 ==================== */
body.page-dashboard .history-cards-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 16px;
}

body.page-dashboard .history-card{
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.page-dashboard .history-card:hover{
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.15);
    transform: translateY(-2px);
}

body.page-dashboard .history-card-header{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

body.page-dashboard .history-icon{
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .history-header-info{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .history-card .history-title{
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.page-dashboard .history-subtitle{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.page-dashboard .history-card .history-badge{
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

body.page-dashboard .history-card .history-badge.movie{
    background: #f1f1ef;
    color: #333333;
}

body.page-dashboard .history-card .history-badge.episode{
    background: #dbeafe;
    color: #2563eb;
}

body.page-dashboard .history-series{
    font-size: 12px;
    color: #6b7280;
}

body.page-dashboard .history-method-badge{
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

body.page-dashboard .history-method-badge.direct{
    background: #d1fae5;
    color: #059669;
}

body.page-dashboard .history-method-badge.transcode{
    background: #fef3c7;
    color: #d97706;
}

body.page-dashboard .history-live-badge{
    padding: 2px 8px;
    border-radius: 4px;
    background: #dcfce7;
    color: #15803d;
    font-size: 10px;
    font-weight: 600;
}

body.page-dashboard .history-card-body{
    padding: 16px 18px;
}

body.page-dashboard .history-progress-section{
    width: 100%;
}

body.page-dashboard .history-progress-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

body.page-dashboard .progress-label{
    font-size: 12px;
    color: #6b7280;
}

body.page-dashboard .progress-value{
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
}

body.page-dashboard .history-progress-bar{
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

body.page-dashboard .history-progress-fill{
    height: 100%;
    background: #3b82f6;
    border-radius: 4px;
    transition: width 0.5s ease;
}

body.page-dashboard .history-progress-fill.completed{
    background: #10b981;
}

body.page-dashboard .history-progress-time{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
    gap: 4px;
}

body.page-dashboard .history-progress-time span:first-child{
    color: #3b82f6;
    font-weight: 500;
}

body.page-dashboard .history-card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}

body.page-dashboard .history-meta-row{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.page-dashboard .history-play-count{
    font-size: 12px;
    color: #6b7280;
}

body.page-dashboard .history-device{
    font-size: 11px;
    color: #9ca3af;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .history-time{
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* 响应式 */
@media (max-width: 768px) {
    body.page-dashboard .history-cards-grid{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .history-card-header{
        padding: 14px;
    }

    body.page-dashboard .history-card-body{
        padding: 14px;
    }

    body.page-dashboard .history-progress-bar{
        height: 10px;
        border-radius: 5px;
    }

    body.page-dashboard .history-progress-fill{
        min-width: 4px;
    }

    body.page-dashboard .history-card-footer{
        padding: 10px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    body.page-dashboard .device-card{
        padding: 14px;
    }

    body.page-dashboard .device-header{
        flex-wrap: wrap;
    }

    body.page-dashboard .now-playing-title{
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ==================== 播放监控 V2 增强样式 ==================== */
body.page-dashboard .playback-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

body.page-dashboard .playback-header-main{
    min-width: 220px;
}

body.page-dashboard .playback-header-main h1{
    margin-bottom: 6px;
}

body.page-dashboard .playback-header-tools{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

body.page-dashboard .playback-live-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #047857;
}

body.page-dashboard .playback-live-pill.is-loading{
    border-color: #fde68a;
    background: #f7f9fd;
    color: #b45309;
}

body.page-dashboard .playback-live-pill.is-error{
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

body.page-dashboard .playback-live-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    animation: playbackLivePulse 1.8s ease-in-out infinite;
}

@keyframes playbackLivePulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.75); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

body.page-dashboard .playback-update-time{
    font-size: 12px;
    color: #6b7280;
    padding: 7px 10px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
}

body.page-dashboard .playback-auto-btn{
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .playback-auto-btn.on{
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

body.page-dashboard .playback-auto-btn.off{
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

body.page-dashboard .playback-auto-btn:hover{
    transform: translateY(-1px);
}

body.page-dashboard .playback-refresh-btn{
    font-weight: 600;
}

body.page-dashboard .playback-stats-grid-v2 .playback-stat-card{
    position: relative;
    overflow: hidden;
}

body.page-dashboard .playback-stats-grid-v2 .playback-stat-card::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    opacity: 0.35;
}

body.page-dashboard .playback-stats-grid-v2 .playback-stat-card.stat-playing::after{
    background: #3b82f6;
}

body.page-dashboard .playback-stats-grid-v2 .playback-stat-card.stat-online::after{
    background: #10b981;
}

body.page-dashboard .playback-stats-grid-v2 .playback-stat-card.stat-history::after{
    background: #f59e0b;
}

body.page-dashboard .playback-stats-grid-v2 .stat-subtext{
    margin-top: 5px;
    font-size: 12px;
    color: #9ca3af;
}

body.page-dashboard .playback-main-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

body.page-dashboard .playback-main-grid .playback-section{
    margin-bottom: 0;
}

body.page-dashboard .playback-section-header{
    min-width: 0;
}

body.page-dashboard .playback-section-subtitle{
    margin: 6px 0 0;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
}

body.page-dashboard .playback-section-live #devicesContainer,
body.page-dashboard .playback-section-device #myDevicesContainer,
body.page-dashboard .playback-section-history #historyContainer{
    min-height: 120px;
}

@media (max-width: 1024px) {
    body.page-dashboard .playback-main-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    body.page-dashboard .playback-header{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body.page-dashboard .playback-header-tools{
        justify-content: flex-start;
    }

    body.page-dashboard .playback-live-pill,
body.page-dashboard .playback-update-time,
body.page-dashboard .playback-auto-btn,
body.page-dashboard .playback-refresh-btn{
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    body.page-dashboard .playback-stats-grid-v2 .stat-subtext{
        font-size: 11px;
    }
}

/* ============================================
   用户操作日志样式 - 重新设计
   ============================================ */
body.page-dashboard .activity-logs-page{
    max-width: 100%;
    margin: 0;
}

/* 筛选栏 */
body.page-dashboard .activity-filter-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

body.page-dashboard .activity-filter-select{
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #1e293b;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
}

body.page-dashboard .activity-filter-select:focus{
    outline: none;
    border-color: #333333;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.1);
}

body.page-dashboard .activity-refresh-btn{
    padding: 10px 20px;
    background: #333333;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

body.page-dashboard .activity-refresh-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(32, 32, 32, 0.35);
}

/* 日志列表 */
body.page-dashboard .activity-logs-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .activity-loading,
body.page-dashboard .activity-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #94a3b8;
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

body.page-dashboard .activity-loading .spinner{
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #333333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

body.page-dashboard .activity-empty .empty-icon{
    font-size: 56px;
    margin-bottom: 16px;
}

/* 单条日志卡片 */
body.page-dashboard .activity-log-card{
    background: white;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #10b981;
}

body.page-dashboard .activity-log-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

body.page-dashboard .activity-log-card.failed{
    border-left-color: #ef4444;
    background: #fffbfb;
}

body.page-dashboard .log-icon-wrapper{
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    border-radius: 14px;
    flex-shrink: 0;
}

body.page-dashboard .log-icon-wrapper .log-icon{
    font-size: 22px;
}

body.page-dashboard .log-body{
    flex: 1;
    min-width: 0;
}

body.page-dashboard .log-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

body.page-dashboard .log-action-name{
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

body.page-dashboard .log-status-badge{
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}

body.page-dashboard .log-status-badge.success{
    background: #dcfce7;
    color: #16a34a;
}

body.page-dashboard .log-status-badge.failed{
    background: #fee2e2;
    color: #dc2626;
}

body.page-dashboard .log-detail-text{
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 8px;
}

body.page-dashboard .log-footer{
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #94a3b8;
}

body.page-dashboard .log-footer .log-time,
body.page-dashboard .log-footer .log-ip{
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 分页 */
body.page-dashboard .activity-pagination{
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

body.page-dashboard .activity-pagination .pagination-info{
    font-size: 13px;
    color: #94a3b8;
}

body.page-dashboard .activity-pagination .pagination-controls{
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-dashboard .activity-pagination .page-btn{
    padding: 10px 18px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

body.page-dashboard .activity-pagination .page-btn:hover:not([disabled]){
    background: #f8fafc;
    border-color: #333333;
    color: #333333;
}

body.page-dashboard .activity-pagination .page-btn[disabled]{
    opacity: 0.4;
    cursor: not-allowed;
}

body.page-dashboard .activity-pagination .page-current{
    font-size: 14px;
    color: #64748b;
    padding: 0 8px;
}

/* 响应式 */
@media (max-width: 768px) {
    body.page-dashboard .activity-filter-bar{
        flex-direction: column;
        align-items: stretch;
    }

    body.page-dashboard .activity-filter-select{
        width: 100%;
    }

    body.page-dashboard .activity-refresh-btn{
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    body.page-dashboard .activity-log-card{
        flex-direction: column;
        gap: 12px;
    }

    body.page-dashboard .log-icon-wrapper{
        width: 40px;
        height: 40px;
    }

    body.page-dashboard .log-icon-wrapper .log-icon{
        font-size: 18px;
    }

    body.page-dashboard .log-footer{
        flex-wrap: wrap;
        gap: 8px;
    }

    body.page-dashboard .activity-pagination .pagination-controls{
        gap: 8px;
    }

    body.page-dashboard .activity-pagination .page-btn{
        padding: 8px 14px;
        font-size: 13px;
    }

    /* 公告区域移动端适配 */
    body.page-dashboard .announcements-container{
        margin-bottom: 16px;

    }



    body.page-dashboard .announcements-title{
        font-size: 14px;
    }

    body.page-dashboard .announcements-toggle{
        padding: 4px 10px;
        font-size: 12px;
    }

    body.page-dashboard .announcements-list{
        padding: 12px;
        gap: 10px;
    }

    body.page-dashboard .announcement-item{
        padding: 12px 14px;
        border-radius: 10px;
    }

    body.page-dashboard .announcement-item-header{
        gap: 6px;
    }

    body.page-dashboard .announcement-item-title{
        font-size: 14px;
    }

    body.page-dashboard .announcement-time{
        font-size: 11px;
    }

    body.page-dashboard .announcement-item-content{
        font-size: 13px;
    }
}

/* ==================== Telegram 绑定弹窗样式 ==================== */
body.page-dashboard .telegram-bind-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

body.page-dashboard .telegram-bind-dialog{
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: dialogSlideIn 0.3s ease;
}

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

body.page-dashboard .telegram-bind-dialog .dialog-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

body.page-dashboard .telegram-bind-dialog .dialog-header h3{
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

body.page-dashboard .telegram-bind-dialog .close-btn{
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

body.page-dashboard .telegram-bind-dialog .close-btn:hover{
    background: #f3f4f6;
    color: #374151;
}

body.page-dashboard .telegram-bind-dialog .dialog-content{
    padding: 24px;
}

body.page-dashboard .telegram-bind-dialog .bind-intro{
    margin-bottom: 20px;
}

body.page-dashboard .telegram-bind-dialog .bind-intro p{
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

body.page-dashboard .telegram-bind-dialog .bind-intro ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

body.page-dashboard .telegram-bind-dialog .bind-intro li{
    font-size: 13px;
    color: #374151;
    padding: 6px 0;
}

body.page-dashboard .telegram-bind-dialog .bind-steps{
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px;
}

body.page-dashboard .telegram-bind-dialog .step-item{
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

body.page-dashboard .telegram-bind-dialog .step-item:last-of-type{
    margin-bottom: 16px;
}

body.page-dashboard .telegram-bind-dialog .step-number{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0088cc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

body.page-dashboard .telegram-bind-dialog .step-content{
    flex: 1;
}

body.page-dashboard .telegram-bind-dialog .step-content p{
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px 0;
}

body.page-dashboard .telegram-bind-dialog .bot-link{
    display: inline-block;
    color: #0088cc;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(0, 136, 204, 0.1);
    border-radius: 8px;
    transition: all 0.2s;
}

body.page-dashboard .telegram-bind-dialog .bot-link:hover{
    background: rgba(0, 136, 204, 0.2);
}

body.page-dashboard .telegram-bind-dialog .bind-code-container{
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
}

body.page-dashboard .telegram-bind-dialog .bind-code-container code{
    flex: 1;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 14px;
    color: #1f2937;
    word-break: break-all;
}

body.page-dashboard .telegram-bind-dialog .copy-btn{
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

body.page-dashboard .telegram-bind-dialog .copy-btn:hover{
    background: #e5e7eb;
}

body.page-dashboard .telegram-bind-dialog .bind-code-display{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    background: #0088cc;
    border-radius: 10px;
}

body.page-dashboard .telegram-bind-dialog .code-label{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

body.page-dashboard .telegram-bind-dialog .code-value{
    font-size: 20px;
    font-weight: 700;
    color: white;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    letter-spacing: 2px;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn{
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn:hover{
    background: rgba(255, 255, 255, 0.3);
}

body.page-dashboard .telegram-bind-dialog .refresh-btn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

body.page-dashboard .telegram-bind-dialog .bind-expire{
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin-top: 12px;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    color: #3b82f6;
    font-size: 13px;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint .hint-icon{
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

body.page-dashboard .telegram-bind-dialog .dialog-footer{
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

body.page-dashboard .telegram-bind-dialog .btn-cancel{
    padding: 10px 24px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

body.page-dashboard .telegram-bind-dialog .btn-cancel:hover{
    background: #f3f4f6;
    color: #374151;
}

/* 移动端适配 */
@media (max-width: 480px) {
    body.page-dashboard .telegram-bind-dialog{
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    body.page-dashboard .telegram-bind-dialog .dialog-content{
        padding: 16px;
    }

    body.page-dashboard .telegram-bind-dialog .bind-steps{
        padding: 16px;
    }

    body.page-dashboard .telegram-bind-dialog .code-value{
        font-size: 18px;
    }
}

/* ============================================
   移动端综合优化 - 卡片和按钮布局
   ============================================ */

/* 订阅与线路信息移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .dashboard-subscription-lines{
        margin-bottom: 20px;
    }

    body.page-dashboard .subscription-lines-container{
        flex-direction: column;
        gap: 12px;
    }

    body.page-dashboard .subscription-status-mini,
body.page-dashboard .server-lines-compact,
body.page-dashboard .checkin-mini-card{
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .dashboard-subscription-lines{
        margin-bottom: 16px;
    }

    body.page-dashboard .section-title{
        font-size: 16px;
    }

    body.page-dashboard .title-actions{
        gap: 8px;
    }

    body.page-dashboard .refresh-btn{
        padding: 6px 8px;
        font-size: 16px;
    }

    body.page-dashboard .view-all-link{
        font-size: 12px;
    }
}

/* 搜索结果卡片移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .search-results{
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    body.page-dashboard .search-item{
        border-radius: 12px;
    }

    body.page-dashboard .search-item-poster{
        height: 200px;
        border-radius: 12px 12px 0 0;
    }

    body.page-dashboard .search-item-info{
        padding: 10px;
    }

    body.page-dashboard .search-item-title{
        font-size: 13px;
        margin-bottom: 4px;
    }

    body.page-dashboard .search-item-year{
        font-size: 11px;
    }

    body.page-dashboard .search-item-actions{
        padding: 8px;
        gap: 6px;
    }

    body.page-dashboard .request-btn{
        padding: 8px;
        font-size: 12px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {


    body.page-dashboard .search-item{
        border-radius: 10px;
    }

    body.page-dashboard .search-item-poster{
        height: 180px;
        border-radius: 10px 10px 0 0;
    }

    body.page-dashboard .search-item-info{
        padding: 8px;
    }

    body.page-dashboard .search-item-title{
        font-size: 12px;
        -webkit-line-clamp: 2;
    }

    body.page-dashboard .search-item-year{
        font-size: 10px;
    }

    body.page-dashboard .search-item-actions{
        padding: 6px 8px;
        gap: 5px;
    }

    body.page-dashboard .request-btn{
        padding: 7px;
        font-size: 11px;
        border-radius: 6px;
    }
}

/* 通用按钮移动端触控优化 */
@media (max-width: 768px) {
    body.page-dashboard button,
body.page-dashboard .btn,
body.page-dashboard .action-btn,
body.page-dashboard a.button{
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body.page-dashboard button:active,
body.page-dashboard .btn:active,
body.page-dashboard .action-btn:active{
        transform: scale(0.98);
    }
}

/* 表单输入框移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard input[type="text"],
body.page-dashboard input[type="email"],
body.page-dashboard input[type="password"],
body.page-dashboard textarea,
body.page-dashboard select{
        font-size: 16px; /* 防止iOS自动缩放 */
        padding: 12px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .search-box input{
        font-size: 15px;
        padding: 10px 14px;
    }

    body.page-dashboard .search-box button{
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* 分页控件移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .pagination{
        gap: 8px;
    }

    body.page-dashboard .pagination button{
        padding: 8px 14px;
        font-size: 13px;
        min-width: 36px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .pagination{
        gap: 6px;
    }

    body.page-dashboard .pagination button{
        padding: 6px 10px;
        font-size: 12px;
        min-width: 32px;
    }

    body.page-dashboard .pagination .page-info{
        font-size: 12px;
    }
}

/* ============================================
   模态框和对话框移动端优化
   ============================================ */

/* Emby账号绑定/创建弹窗移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .emby-bind-overlay{
        padding: 16px;
    }

    body.page-dashboard .emby-bind-dialog{
        max-width: 100%;
        padding: 24px 20px;
        border-radius: 16px;
    }

    body.page-dashboard .emby-bind-dialog .dialog-header h2{
        font-size: 20px;
    }

    body.page-dashboard .emby-bind-dialog .dialog-header p{
        font-size: 13px;
    }

    body.page-dashboard .emby-bind-dialog .form-group{
        margin-bottom: 16px;
    }

    body.page-dashboard .emby-bind-dialog .form-group input{
        padding: 12px 14px;
        font-size: 14px;
    }

    body.page-dashboard .emby-bind-dialog .submit-btn{
        padding: 13px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .emby-bind-overlay{
        padding: 0;
        align-items: flex-end;
    }

    body.page-dashboard .emby-bind-dialog{
        border-radius: 16px 16px 0 0;
        padding: 20px 16px;
        max-height: 85vh;
        overflow-y: auto;
    }

    body.page-dashboard .emby-bind-dialog .close-btn{
        top: 12px;
        right: 12px;
        font-size: 22px;
    }

    body.page-dashboard .emby-bind-dialog .dialog-header{
        margin-bottom: 20px;
    }

    body.page-dashboard .emby-bind-dialog .dialog-header h2{
        font-size: 18px;
    }

    body.page-dashboard .emby-bind-dialog .dialog-header p{
        font-size: 12px;
    }

    body.page-dashboard .emby-tabs{
        gap: 8px;
        margin-bottom: 20px;
    }

    body.page-dashboard .emby-tabs .tab-btn{
        padding: 10px 8px;
        font-size: 13px;
    }

    body.page-dashboard .emby-bind-dialog .form-group{
        margin-bottom: 14px;
    }

    body.page-dashboard .emby-bind-dialog .form-group label{
        font-size: 13px;
        margin-bottom: 6px;
    }

    body.page-dashboard .emby-bind-dialog .form-group input{
        padding: 11px 13px;
        font-size: 14px;
    }

    body.page-dashboard .username-status,
body.page-dashboard .form-error{
        font-size: 12px;
    }

    body.page-dashboard .emby-bind-dialog .submit-btn{
        padding: 12px;
        font-size: 14px;
    }
}

/* 快速购买确认弹窗移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .quick-buy-dialog{
        max-width: 95%;
        border-radius: 16px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-header{
        padding: 16px 18px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-header h3{
        font-size: 16px;
    }

    body.page-dashboard .quick-buy-dialog .order-details{
        padding: 16px 18px;
    }

    body.page-dashboard .quick-buy-dialog .detail-row{
        padding: 9px 0;
    }

    body.page-dashboard .quick-buy-dialog .detail-row .label,
body.page-dashboard .quick-buy-dialog .detail-row .value{
        font-size: 13px;
    }

    body.page-dashboard .quick-buy-dialog .detail-row.total .value.price{
        font-size: 22px;
    }

    body.page-dashboard .payment-method-section{
        padding: 16px 18px;
    }

    body.page-dashboard .payment-options-grid{
        gap: 10px;
    }

    body.page-dashboard .payment-option-card{
        padding: 14px 10px;
    }

    body.page-dashboard .payment-option-icon{
        width: 44px;
        height: 44px;
    }

    body.page-dashboard .payment-option-name{
        font-size: 13px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-footer{
        padding: 14px 18px;
        gap: 10px;
    }

    body.page-dashboard .quick-buy-dialog .btn-cancel,
body.page-dashboard .quick-buy-dialog .btn-confirm{
        padding: 12px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .quick-buy-dialog{
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
    }

    body.page-dashboard .quick-buy-dialog .dialog-header{
        padding: 14px 16px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-header h3{
        font-size: 15px;
    }

    body.page-dashboard .quick-buy-dialog .close-btn{
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    body.page-dashboard .quick-buy-dialog .order-details{
        padding: 14px 16px;
    }

    body.page-dashboard .quick-buy-dialog .detail-row{
        padding: 8px 0;
    }

    body.page-dashboard .quick-buy-dialog .detail-row .label,
body.page-dashboard .quick-buy-dialog .detail-row .value{
        font-size: 12px;
    }

    body.page-dashboard .quick-buy-dialog .detail-row.total .value.price{
        font-size: 20px;
    }

    body.page-dashboard .payment-method-section{
        padding: 14px 16px;
    }

    body.page-dashboard .payment-section-title{
        font-size: 13px;
        margin-bottom: 12px;
    }

    body.page-dashboard .payment-options-grid{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.page-dashboard .payment-option-card{
        flex-direction: row;
        justify-content: flex-start;
        padding: 12px;
        gap: 12px;
    }

    body.page-dashboard .payment-option-icon{
        width: 40px;
        height: 40px;
    }

    body.page-dashboard .payment-option-name{
        font-size: 14px;
        text-align: left;
    }

    body.page-dashboard .payment-check{
        right: 12px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-footer{
        padding: 12px 16px;
        gap: 8px;
        flex-direction: column-reverse;
    }

    body.page-dashboard .quick-buy-dialog .btn-cancel,
body.page-dashboard .quick-buy-dialog .btn-confirm{
        width: 100%;
        padding: 13px;
        font-size: 14px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-tips{
        padding: 8px 16px 14px;
    }

    body.page-dashboard .quick-buy-dialog .dialog-tips p{
        font-size: 11px;
    }
}

/* 横版购买对话框移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .purchase-dialog-horizontal{
        flex-direction: column;
        width: 95%;
        max-width: 480px;
    }

    body.page-dashboard .dialog-left-panel{
        width: 100%;
        padding: 24px 20px;
    }

    body.page-dashboard .selected-plan-info{
        margin-bottom: 20px;
    }

    body.page-dashboard .plan-icon-lg{
        width: 48px;
        height: 48px;
        font-size: 28px;
    }

    body.page-dashboard .plan-text h3{
        font-size: 16px;
    }

    body.page-dashboard .plan-text p{
        font-size: 12px;
    }

    body.page-dashboard .price-display-lg{
        margin-bottom: 20px;
        padding: 16px 0;
    }

    body.page-dashboard .price-display-lg .currency{
        font-size: 18px;
    }

    body.page-dashboard .price-display-lg .amount{
        font-size: 36px;
    }

    body.page-dashboard .dialog-right-panel{
        width: 100%;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .purchase-dialog-horizontal{
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
    }

    body.page-dashboard .dialog-close-x{
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        font-size: 18px;
    }

    body.page-dashboard .dialog-left-panel{
        padding: 20px 16px;
    }

    body.page-dashboard .selected-plan-info{
        gap: 12px;
        margin-bottom: 16px;
    }

    body.page-dashboard .plan-icon-lg{
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    body.page-dashboard .plan-text h3{
        font-size: 15px;
    }

    body.page-dashboard .plan-text p{
        font-size: 11px;
    }

    body.page-dashboard .price-display-lg{
        margin-bottom: 16px;
        padding: 14px 0;
    }

    body.page-dashboard .price-display-lg .currency{
        font-size: 16px;
    }

    body.page-dashboard .price-display-lg .amount{
        font-size: 32px;
    }

    body.page-dashboard .price-display-lg .unit{
        font-size: 16px;
    }

    body.page-dashboard .dialog-right-panel{
        padding: 16px;
    }
}

/* 邀请对话框移动端优化 */
@media (max-width: 768px) {
    body.page-dashboard .invite-dialog{
        max-width: 95%;
        padding: 20px;
        border-radius: 16px;
    }

    body.page-dashboard .invite-dialog .dialog-header h3{
        font-size: 18px;
    }

    body.page-dashboard .invite-code-display{
        padding: 16px;
    }

    body.page-dashboard .invite-code-text{
        font-size: 18px;
    }

    body.page-dashboard .copy-code-btn{
        padding: 10px 18px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .invite-dialog{
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 18px 16px;
        max-height: 80vh;
        overflow-y: auto;
    }

    body.page-dashboard .invite-dialog .dialog-header{
        margin-bottom: 16px;
    }

    body.page-dashboard .invite-dialog .dialog-header h3{
        font-size: 16px;
    }

    body.page-dashboard .invite-code-display{
        padding: 14px;
        border-radius: 10px;
    }

    body.page-dashboard .invite-code-text{
        font-size: 16px;
    }

    body.page-dashboard .copy-code-btn{
        padding: 9px 16px;
        font-size: 12px;
    }

    body.page-dashboard .invite-stats{
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* 通用模态框遮罩层和容器优化 */
@media (max-width: 768px) {
    body.page-dashboard .modal-overlay,
body.page-dashboard .dialog-overlay{
        padding: 16px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .modal-overlay,
body.page-dashboard .dialog-overlay{
        padding: 0;
        align-items: flex-end;
    }

    body.page-dashboard .modal-container,
body.page-dashboard .dialog-container{
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ============================================================
   移动端全局增强 - 统一优化层
   ============================================================ */

/* ---- 平板端 (≤1024px) ---- */
@media (max-width: 1024px) and (min-width: 769px) {
    body.page-dashboard .sidebar{
        width: 220px;
    }

    body.page-dashboard .main-content{
        margin-left: 220px;
    }

    body.page-dashboard .container{
        padding: 16px 20px;
    }

    body.page-dashboard .plans-grid-new{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- 手机端核心增强 (≤768px) ---- */
@media (max-width: 768px) {
    /* 侧边栏动画增强 */
    body.page-dashboard .sidebar{
        width: 55vw;
        max-width: 260px;
        z-index: 1000;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }

    /* 遮罩层过渡动画 */
    body.page-dashboard .sidebar-overlay{
        transition: opacity 0.35s ease;
        opacity: 0;
        pointer-events: none;
    }

    body.page-dashboard .sidebar-overlay.show{
        opacity: 1;
        pointer-events: auto;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    /* 移动端头部增强 */
    body.page-dashboard .mobile-header{
        height: 56px;
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        background: rgba(255, 255, 255, 0.92);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
        padding: 0 12px;
        padding-top: env(safe-area-inset-top);
    }

    /* 主内容区 iOS 安全区域 */
    body.page-dashboard .main-content{
        margin-left: 0 !important;
        padding-top: calc(56px + env(safe-area-inset-top) + 16px);
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    /* Telegram 浮动按钮移动端位置 */
    body.page-dashboard .telegram-floating-btn{
        top: auto;

        right: 16px;
        bottom: calc(24px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
        box-shadow: 0 4px 12px rgba(0, 136, 204, 0.35);
    }

    body.page-dashboard .telegram-floating-btn svg{
        width: 20px;
        height: 20px;
    }

    /* 导航栏移动端优化 */
    body.page-dashboard .navbar{
        position: sticky;
        top: 0;
        z-index: 100;
        border-radius: 0;
        margin: 0;
        width: 100%;
    }

    /* 表单输入框防止 iOS 缩放 */
    body.page-dashboard input[type="text"],
body.page-dashboard input[type="email"],
body.page-dashboard input[type="password"],
body.page-dashboard input[type="number"],
body.page-dashboard input[type="tel"],
body.page-dashboard input[type="search"],
body.page-dashboard input[type="url"],
body.page-dashboard select,
body.page-dashboard textarea{
        font-size: 16px !important;
    }

    /* 确保搜索框在移动端好用 */
    body.page-dashboard .search-box{
        padding: 6px;
        border-radius: 10px;
    }

    body.page-dashboard .search-box input{
        border-radius: 8px;
    }

    /* 所有按钮最小触摸面积 */
    body.page-dashboard button,
body.page-dashboard .btn,
body.page-dashboard a.btn,
body.page-dashboard .tab-button,
body.page-dashboard .copy-btn,
body.page-dashboard .share-btn,
body.page-dashboard .redeem-btn,
body.page-dashboard .order-btn,
body.page-dashboard .page-btn{
        min-height: 44px;
        min-width: 44px;
    }

    /* 个人中心页面增强 */
    body.page-dashboard .profile-hero-content{
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 弹窗底部 sheet 模式统一 */
    body.page-dashboard .invite-modal-overlay,
body.page-dashboard .announcement-dialog-overlay{
        padding: 0;
        align-items: flex-end;
    }

    body.page-dashboard .invite-modal,
body.page-dashboard .announcement-dialog{
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        animation: slideUpFromBottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 套餐卡片移动端间距 */
    body.page-dashboard .plan-card-new{
        padding: 20px 16px;
    }

    /* 线路信息移动端优化 */
    body.page-dashboard .line-url-new{
        max-width: 100%;
        font-size: 11px;
    }

    body.page-dashboard .line-name-new{
        font-size: 12px;
    }

    /* 滚动性能优化 */
    body.page-dashboard .main-content,
body.page-dashboard .sidebar,
body.page-dashboard .ticket-detail-modal,
body.page-dashboard .mobile-menu-drawer{
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* 卡片圆角统一缩小 */
    body.page-dashboard .stats,
body.page-dashboard .tab-container,
body.page-dashboard .search-section,
body.page-dashboard .subscription-hero-card,
body.page-dashboard .redeem-card{
        border-radius: 14px;
    }

    /* ---- 仪表盘首页组件 ---- */

    /* 欢迎横幅 */
    body.page-dashboard .dashboard-hero{
        padding: 20px;
        border-radius: 14px;
    }

    body.page-dashboard .hero-content-main{
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    body.page-dashboard .hero-greeting{
        flex-direction: column;
        gap: 12px;
    }

    body.page-dashboard .greeting-emoji{
        font-size: 40px;
    }

    body.page-dashboard .greeting-text h1{
        font-size: 22px;
    }

    body.page-dashboard .greeting-time{
        font-size: 13px;
    }

    body.page-dashboard .hero-search-btn{
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 15px;
        border-radius: 12px;
    }

    /* 统计卡片网格 */
    body.page-dashboard .stats-grid-modern{
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    body.page-dashboard .stat-card-inner{
        padding: 16px;
        gap: 12px;
    }

    body.page-dashboard .stat-icon-modern{
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    body.page-dashboard .stat-icon-modern svg{
        width: 22px;
        height: 22px;
    }

    body.page-dashboard .stat-value-modern{
        font-size: 24px;
    }

    body.page-dashboard .stat-label-modern{
        font-size: 12px;
    }

    body.page-dashboard .stat-trend{
        font-size: 24px;
        top: 10px;
        right: 10px;
    }

    /* 快捷操作 */
    body.page-dashboard .quick-actions-modern{
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 12px;
    }

    body.page-dashboard .quick-action-item{
        padding: 16px 12px;
    }

    body.page-dashboard .action-icon-wrapper{
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    body.page-dashboard .action-title{
        font-size: 12px;
    }

    /* 邀请横幅 */
    body.page-dashboard .invite-banner-modern{
        padding: 20px;
        border-radius: 14px;
    }

    body.page-dashboard .invite-content-wrapper{
        gap: 16px;
    }

    body.page-dashboard .invite-icon-big{
        font-size: 40px;
    }

    body.page-dashboard .invite-info h3{
        font-size: 16px;
    }

    body.page-dashboard .invite-info p{
        font-size: 13px;
    }

    body.page-dashboard .invite-action-btn{
        padding: 12px 20px;
        font-size: 14px;
    }

    /* 迷你统计卡片 */
    body.page-dashboard .dashboard-stats-row{
        gap: 8px;
    }

    body.page-dashboard .mini-stat-card{
        min-width: calc(50% - 4px);
        padding: 12px;
    }

    body.page-dashboard .mini-stat-icon{
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    body.page-dashboard .mini-stat-value{
        font-size: 18px;
    }

    /* 快捷链接 */
    body.page-dashboard .quick-links-bar{
        gap: 8px;
    }

    body.page-dashboard .quick-link-btn{
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
        padding: 10px 12px;
    }

    /* 邀请横幅（旧版） */
    body.page-dashboard .invite-banner{
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    body.page-dashboard .invite-banner-left{
        flex-direction: column;
    }

    body.page-dashboard .invite-banner-btn{
        width: 100%;
    }

    /* 公告区域 */
    body.page-dashboard .announcements-container{
        border-radius: 12px;
    }

    body.page-dashboard .announcements-header{
        padding: 12px 16px;
    }
}

/* 底部弹出动画 */
@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ---- 小屏手机增强 (≤480px) ---- */
@media (max-width: 480px) {
    /* 侧边栏半屏宽度 */
    body.page-dashboard .sidebar{
        width: 65vw;
        max-width: 240px;
    }

    /* 移动端头部更紧凑 */
    body.page-dashboard .mobile-header{
        height: 50px;
        padding: 0 10px;
    }

    body.page-dashboard .mobile-logo{
        font-size: 14px;
    }

    body.page-dashboard .mobile-logo img{
        width: 28px;
        height: 28px;
    }

    body.page-dashboard .mobile-user-avatar{
        width: 32px;
        height: 32px;
        border-radius: 7px;
        font-size: 13px;
    }

    body.page-dashboard .main-content{
        padding-top: calc(50px + env(safe-area-inset-top) + 10px);
        padding-left: calc(10px + env(safe-area-inset-left));
        padding-right: calc(10px + env(safe-area-inset-right));
    }

    /* 内容间距压缩 */
    body.page-dashboard .container{
        padding: 6px;
    }

    body.page-dashboard .section-header h1{
        font-size: 20px;
    }

    body.page-dashboard .section-header p{
        font-size: 12px;
    }

    /* 统计卡片网格 1 列 */
    body.page-dashboard .stats-cards{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .stats-grid-modern{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.page-dashboard .stat-card-modern{
        border-radius: 12px;
    }

    body.page-dashboard .stat-card-inner{
        padding: 14px;
        flex-direction: row;
        gap: 10px;
    }

    body.page-dashboard .stat-icon-modern{
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    body.page-dashboard .stat-icon-modern svg{
        width: 20px;
        height: 20px;
    }

    body.page-dashboard .stat-value-modern{
        font-size: 22px;
    }

    body.page-dashboard .stat-label-modern{
        font-size: 11px;
    }

    /* 快捷操作 2 列 */
    body.page-dashboard .quick-actions-modern{
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    body.page-dashboard .quick-action-item{
        padding: 14px 10px;
        border-radius: 12px;
    }

    body.page-dashboard .action-icon-wrapper{
        width: 44px;
        height: 44px;
        font-size: 22px;
        border-radius: 12px;
    }

    body.page-dashboard .action-title{
        font-size: 11px;
    }

    body.page-dashboard .unread-badge{
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding: 0 4px;
    }

    /* 欢迎横幅紧凑 */
    body.page-dashboard .dashboard-hero{
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    body.page-dashboard .hero-content-main{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard .hero-greeting{
        gap: 10px;
    }

    body.page-dashboard .greeting-emoji{
        font-size: 36px;
    }

    body.page-dashboard .greeting-text h1{
        font-size: 20px;
    }

    body.page-dashboard .user-name-highlight{
        padding: 1px 8px;
        border-radius: 6px;
    }

    body.page-dashboard .greeting-time{
        font-size: 12px;
    }

    body.page-dashboard .hero-search-btn{
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    /* 邀请横幅紧凑 */
    body.page-dashboard .invite-banner-modern{
        padding: 16px;
        border-radius: 12px;
    }

    body.page-dashboard .invite-content-wrapper{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body.page-dashboard .invite-icon-big{
        font-size: 36px;
        text-align: center;
    }

    body.page-dashboard .invite-info{
        text-align: center;
        min-width: 0;
    }

    body.page-dashboard .invite-info h3{
        font-size: 15px;
    }

    body.page-dashboard .invite-info p{
        font-size: 12px;
    }

    body.page-dashboard .invite-action-btn{
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 14px;
        border-radius: 10px;
    }

    /* 标签页横向滚动 */
    body.page-dashboard .tabs{
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 10px 8px 0;
    }

    body.page-dashboard .tabs::-webkit-scrollbar{
        display: none;
    }

    body.page-dashboard .tab-button{
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 12px;
    }

    /* 搜索结果 2 列 */
    body.page-dashboard .search-results{
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    /* 订阅详情 1 列 */
    body.page-dashboard .subscription-details-grid{
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.page-dashboard .detail-card{
        padding: 14px;
    }

    body.page-dashboard .subscription-action-group{
        gap: 10px;
    }

    body.page-dashboard .sub-action-btn{
        padding: 14px;
    }

    /* 订单卡片紧凑模式 */
    body.page-dashboard .order-card{
        padding: 14px;
    }

    body.page-dashboard .order-actions{
        flex-direction: column;
    }

    body.page-dashboard .order-btn{
        width: 100%;
        text-align: center;
    }

    /* Telegram 按钮更小 */
    body.page-dashboard .telegram-floating-btn{
        width: 40px;
        height: 40px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 12px;
    }

    body.page-dashboard .telegram-floating-btn svg{
        width: 18px;
        height: 18px;
    }

    /* 移动端菜单抽屉全宽 */
    body.page-dashboard .mobile-menu-drawer{
        width: 100%;
        right: -100%;
    }

    /* 所有弹窗底部 sheet 模式 */
    body.page-dashboard .invite-modal,
body.page-dashboard .announcement-dialog,
body.page-dashboard .confirm-dialog,
body.page-dashboard .purchase-dialog,
body.page-dashboard .payment-dialog,
body.page-dashboard .cancel-order-dialog{
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }

    /* 分页控件紧凑 */
    body.page-dashboard .pagination-controls{
        gap: 4px;
    }

    body.page-dashboard .page-btn{
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
    }
}

/* ---- 横屏模式优化 ---- */
@media (max-width: 768px) and (orientation: landscape) {
    body.page-dashboard .mobile-header{
        height: 44px;
    }

    body.page-dashboard .main-content{
        padding-top: calc(44px + 12px);
    }

    /* 横屏统计卡片 2 列 */
    body.page-dashboard .stats-cards{
        grid-template-columns: 1fr 1fr;
    }

    body.page-dashboard .stats-grid-modern{
        grid-template-columns: repeat(4, 1fr);
    }

    /* 横屏弹窗不用底部 sheet */
    body.page-dashboard .invite-modal,
body.page-dashboard .announcement-dialog,
body.page-dashboard .confirm-dialog{
        border-radius: 16px;
        max-height: 80vh;
    }

    /* 横屏套餐卡片 2 列 */
    body.page-dashboard .plans-grid-new{
        grid-template-columns: repeat(2, 1fr);
    }

    /* 搜索结果 3 列 */
    body.page-dashboard .search-results{
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---- 触摸设备优化 ---- */
@media (hover: none) and (pointer: coarse) {
    /* 禁用所有 hover 抬升效果 */
    body.page-dashboard .stat-card:hover,
body.page-dashboard .plan-card-new:hover,
body.page-dashboard .stats-cards .stat-card:hover,
body.page-dashboard .profile-stat-card:hover,
body.page-dashboard .my-device-card:hover,
body.page-dashboard .quick-action-item:hover{
        transform: none;
        box-shadow: inherit;
    }

    /* 添加 active 按压反馈 */
    body.page-dashboard .stat-card:active,
body.page-dashboard .plan-card-new:active,
body.page-dashboard .quick-action-item:active{
        transform: scale(0.97);
        transition: transform 0.1s;
    }

    body.page-dashboard button:active,
body.page-dashboard .btn:active,
body.page-dashboard a.btn:active,
body.page-dashboard .tab-button:active,
body.page-dashboard .copy-btn:active,
body.page-dashboard .order-btn:active,
body.page-dashboard .redeem-btn:active{
        transform: scale(0.96);
        transition: transform 0.1s;
    }

    /* 滚动条自动隐藏 */
    body.page-dashboard *{
        scrollbar-width: none;
    }

    body.page-dashboard *::-webkit-scrollbar{
        display: none;
    }

    /* 禁止长按弹出菜单 */
    body.page-dashboard img,
body.page-dashboard a{
        -webkit-touch-callout: none;
    }

    /* 消除 iOS 点击 300ms 延迟 */
    body.page-dashboard a,
body.page-dashboard button,
body.page-dashboard input,
body.page-dashboard select,
body.page-dashboard textarea,
body.page-dashboard .tab-button{
        touch-action: manipulation;
    }

    /* 增大关闭按钮触摸面积 */
    body.page-dashboard .invite-modal-close,
body.page-dashboard .mobile-menu-close,
body.page-dashboard .dialog-close-x{
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---- iOS 安全区域全局支持 ---- */
@supports (padding: env(safe-area-inset-top)) {
    body.page-dashboard .mobile-header{
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
    }

    body.page-dashboard .sidebar{
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    body.page-dashboard .mobile-menu-drawer{
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ============================================
   购买套餐卡片重构（作用域：#section-purchase）
   ============================================ */
body.page-dashboard #section-purchase{
    --plan-primary: #2563eb;
    --plan-primary-soft: #dbeafe;
    --plan-border: #dce5f2;
    --plan-text: #0f172a;
    --plan-muted: #64748b;
}

body.page-dashboard #section-purchase .plans-grid-new{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
    align-items: stretch;
}

body.page-dashboard #section-purchase .plan-card-new{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 330px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    border: 1px solid var(--plan-border);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

body.page-dashboard #section-purchase .plan-card-new::before{
    display: none;
}

body.page-dashboard #section-purchase .plan-card-new.popular,
body.page-dashboard #section-purchase .plan-card-new.ultimate{
    padding-top: 20px;
}

body.page-dashboard #section-purchase .plan-card-new:hover{
    transform: translateY(-4px);
    border-color: #bed1ef;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.13);
}

body.page-dashboard #section-purchase .plan-card-new.popular{
    border-color: #a7c6ff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
}

body.page-dashboard #section-purchase .plan-card-new.ultimate{
    border-color: #f5d28d;
    background: #f7f9fd;
}

body.page-dashboard #section-purchase .plan-topline{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

body.page-dashboard #section-purchase .plan-ribbon{
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-dashboard #section-purchase .plan-ribbon.normal{
    color: #1d4ed8;
    background: #eaf2ff;
    border: 1px solid #cddffe;
}

body.page-dashboard #section-purchase .plan-ribbon.popular{
    color: #fff;
    background: #2563eb;
}

body.page-dashboard #section-purchase .plan-ribbon.ultimate{
    color: #92400e;
    background: #ffedd5;
    border: 1px solid #fed7aa;
}

body.page-dashboard #section-purchase .plan-header-new{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
}

body.page-dashboard #section-purchase .plan-icon-wrap{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf4ff;
    border: 1px solid #d4e3fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dashboard #section-purchase .plan-card-new.ultimate .plan-icon-wrap{
    background: #f1f5fa;
    border-color: #f8d7a2;
}

body.page-dashboard #section-purchase .plan-icon{
    font-size: 23px;
}

body.page-dashboard #section-purchase .plan-title-group{
    min-width: 0;
}

body.page-dashboard #section-purchase .plan-name-new{
    margin: 0 0 4px;
    font-size: 21px;
    color: var(--plan-text);
    letter-spacing: 0.2px;
}

body.page-dashboard #section-purchase .plan-subtitle{
    margin: 0;
    font-size: 13px;
    color: #5f7086;
    line-height: 1.45;
}

body.page-dashboard #section-purchase .plan-price-display{
    margin: 4px 0 0;
    padding: 14px 0;
    border-top: 1px solid #e5edf8;
    border-bottom: 1px solid #e5edf8;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

body.page-dashboard #section-purchase .price-currency{
    font-size: 17px;
    font-weight: 700;
    color: var(--plan-primary);
}

body.page-dashboard #section-purchase .price-amount{
    font-size: 43px;
    font-weight: 800;
    line-height: 1;
    color: var(--plan-primary);
}

body.page-dashboard #section-purchase .price-period{
    font-size: 13px;
    font-weight: 600;
    color: #6b7e99;
}

body.page-dashboard #section-purchase .plan-price-display.no-price{
    justify-content: center;
}

body.page-dashboard #section-purchase .price-empty{
    font-size: 15px;
    font-weight: 600;
    color: #94a3b8;
}

body.page-dashboard #section-purchase .plan-meta-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.page-dashboard #section-purchase .plan-meta-chip{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #3b4f6d;
    background: #f1f6ff;
    border: 1px solid #d9e6fa;
}

body.page-dashboard #section-purchase .plan-buy-btn{
    margin-top: auto;
    border-radius: 12px;
    border: none;
    width: 100%;
    padding: 13px 16px;
    background: #0f172a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.page-dashboard #section-purchase .plan-buy-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 12px 20px rgba(30, 58, 138, 0.3);
}

body.page-dashboard #section-purchase .plan-buy-btn .buy-btn-arrow{
    font-size: 16px;
    line-height: 1;
}

body.page-dashboard #section-purchase .plan-buy-btn.popular{
    background: #2563eb;
}

body.page-dashboard #section-purchase .plan-buy-btn.popular:hover{
    box-shadow: 0 12px 20px rgba(37, 99, 235, 0.32);
}

body.page-dashboard #section-purchase .plan-buy-btn.ultimate{
    background: #ea580c;
}

body.page-dashboard #section-purchase .plan-buy-btn.ultimate:hover{
    box-shadow: 0 12px 20px rgba(217, 119, 6, 0.35);
}

@media (max-width: 900px) {
    body.page-dashboard #section-purchase .plans-grid-new{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 768px) {
    body.page-dashboard #section-purchase .plans-grid-new{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.page-dashboard #section-purchase .plan-card-new{
        min-height: 0;
        padding: 16px 14px 14px;
        border-radius: 16px;
    }

    body.page-dashboard #section-purchase .plan-card-new.popular,
body.page-dashboard #section-purchase .plan-card-new.ultimate{
        padding-top: 16px;
    }

    body.page-dashboard #section-purchase .plan-name-new{
        font-size: 18px;
    }

    body.page-dashboard #section-purchase .price-amount{
        font-size: 35px;
    }

    body.page-dashboard #section-purchase .plan-subtitle{
        font-size: 12px;
    }
}

/* ============================================
   购买支付弹窗（作用域：#purchaseDialogOverlay）
   ============================================ */
body.page-dashboard #purchaseDialogOverlay.confirm-overlay{
    padding: 24px;
    background: rgba(24, 24, 23, 0.56);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
    width: 900px;
    max-width: 94vw;
    max-height: calc(100vh - 48px);
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(24, 24, 23, 0.24);
}

body.page-dashboard #purchaseDialogOverlay .dialog-close-x{
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e8f2;
    border-radius: 6px;
    background: #ffffff;
    color: #34445d;
    font-size: 0;
    z-index: 20;
}

body.page-dashboard #purchaseDialogOverlay .dialog-close-x:hover{
    border-color: #1f1f1f;
    background: #f7f9fd;
    color: #111111;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading{
    padding: 22px 72px 18px 26px;
    border-bottom: 1px solid #e1e8f2;
    background: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .purchase-eyebrow{
    display: block;
    margin-bottom: 4px;
    color: #6d809d;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading h4{
    margin: 0;
    color: #171717;
    font-size: 22px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading p{
    margin: 5px 0 0;
    color: #6d809d;
    font-size: 13px;
    line-height: 1.45;
}

body.page-dashboard #purchaseDialogOverlay .dialog-left-panel{
    width: auto;
    padding: 18px 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    position: relative;
    border-bottom: 1px solid #e1e8f2;
    background: #ffffff;
    color: #171717;
}

body.page-dashboard #purchaseDialogOverlay .dialog-left-panel::after{
    display: none;
    content: none;
}

body.page-dashboard #purchaseDialogOverlay .selected-plan-info{
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.page-dashboard #purchaseDialogOverlay .plan-icon-lg{
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #f1f5fa;
    color: #1d1d1d;
    font-size: 25px;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .plan-text{
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .plan-text h3{
    margin: 0 0 3px;
    overflow: hidden;
    color: #171717;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .plan-text p{
    margin: 0;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.4;
}

body.page-dashboard #purchaseDialogOverlay .purchase-summary-period{
    margin-left: 4px;
    padding: 5px 8px;
    flex: 0 0 auto;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    background: #ffffff;
    color: #34445d;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg{
    min-width: 132px;
    margin: 0;
    padding: 0 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 0;
    border-left: 1px solid #e1e8f2;
    text-align: right;
}

body.page-dashboard #purchaseDialogOverlay .price-caption{
    margin-bottom: 3px;
    color: #6d809d;
    font-size: 11px;
    font-weight: 600;
}

body.page-dashboard #purchaseDialogOverlay .price-value{
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg .currency{
    margin-right: 3px;
    color: #171717;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg .amount{
    color: #171717;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .dialog-right-panel{
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 0;
    background: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .option-group{
    min-width: 0;
    margin: 0;
    padding: 20px 26px 22px;
    border: 0;
    border-bottom: 1px solid #e1e8f2;
    border-radius: 0;
    background: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .option-group:nth-child(2){
    border-left: 1px solid #e1e8f2;
}

body.page-dashboard #purchaseDialogOverlay .option-title{
    margin: 0 0 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #222222;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .option-title::before{
    display: none;
    content: none;
}

body.page-dashboard #purchaseDialogOverlay .option-step{
    min-width: 26px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #202020;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .duration-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .dur-card{
    min-width: 0;
    min-height: 72px;
    padding: 11px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .dur-card:hover{
    border-color: #6d809d;
    background: #f7f9fd;
}

body.page-dashboard #purchaseDialogOverlay .dur-card.active{
    border-color: #202020;
    background: #202020;
    color: #ffffff;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .dur-card.active::after{
    display: none;
    content: none;
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-name{
    color: #34445d;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-price{
    color: #171717;
    font-size: 18px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .dur-card.active .dur-name,
body.page-dashboard #purchaseDialogOverlay .dur-card.active .dur-price{
    color: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-tag,
body.page-dashboard #purchaseDialogOverlay .dur-card .dur-tag.hot{
    top: -8px;
    right: 4px;
    padding: 2px 5px;
    border: 1px solid #202020;
    border-radius: 4px;
    background: #ffffff;
    color: #202020;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-dashboard #purchaseDialogOverlay .pay-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .pay-card{
    min-width: 0;
    min-height: 72px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .pay-card:hover{
    border-color: #6d809d;
    background: #f7f9fd;
}

body.page-dashboard #purchaseDialogOverlay .pay-card.active{
    border-color: #202020;
    background: #f1f5fa;
    box-shadow: inset 0 0 0 1px #202020;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon,
body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon.alipay,
body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon.wechat{
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #ffffff;
    color: #242424;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-meta{
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-name{
    overflow: hidden;
    color: #202020;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-desc{
    margin-top: 2px;
    overflow: hidden;
    color: #6d809d;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #purchaseDialogOverlay .verify-section{
    grid-column: 1 / -1;
    padding: 18px 26px;
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(360px, 1.3fr);
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #e1e8f2;
    background: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .verify-copy{
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .verify-label{
    color: #202020;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

body.page-dashboard #purchaseDialogOverlay .verify-copy p{
    margin: 4px 0 0;
    color: #6d809d;
    font-size: 11px;
    line-height: 1.4;
}

body.page-dashboard #purchaseDialogOverlay .verify-fields{
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(160px, 0.75fr) minmax(190px, 1.25fr);
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .verify-row{
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 6px;
}

body.page-dashboard #purchaseDialogOverlay .verify-code-box{
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #8b9bb2;
    border-radius: 7px;
    background: #f7f9fd;
    color: #202020;
    font-family: inherit;
    font-size: 18px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard #purchaseDialogOverlay .verify-code-box.refresh-animate{
    transform: none;
    background: #e1e8f2;
}

body.page-dashboard #purchaseDialogOverlay .verify-refresh-btn{
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #202020;
    border-radius: 7px;
    background: #202020;
    color: #ffffff;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .verify-refresh-btn:hover{
    transform: none;
    border-color: #444444;
    background: #444444;
    color: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .verify-input{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #ffffff;
    color: #202020;
    font-size: 13px;
    font-weight: 500;
    line-height: 40px;
    text-align: left;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .verify-input:focus{
    border-color: #202020;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(32, 32, 32, 0.08);
    outline: none;
}

body.page-dashboard #purchaseDialogOverlay .verify-input::placeholder{
    color: #6d809d;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-actions{
    grid-column: 1 / -1;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #f7f9fd;
}

body.page-dashboard #purchaseDialogOverlay .dialog-pay-tip{
    color: #6d809d;
    font-size: 11px;
    line-height: 1.4;
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn{
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #202020;
    border-radius: 7px;
    background: #202020;
    color: #ffffff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn:hover{
    transform: none;
    border-color: #444444;
    background: #444444;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn .pay-arrow{
    font-size: 14px;
    line-height: 1;
}

@media (max-width: 820px) {
    body.page-dashboard #purchaseDialogOverlay .dialog-right-panel{
        grid-template-columns: 1fr;
    }

    body.page-dashboard #purchaseDialogOverlay .option-group:nth-child(2){
        border-left: 0;
    }

    body.page-dashboard #purchaseDialogOverlay .verify-section{
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 620px) {
    body.page-dashboard #purchaseDialogOverlay.confirm-overlay{
        padding: 12px;
        align-items: flex-start;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 24px);
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading{
        padding: 18px 62px 15px 18px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading h4{
        font-size: 19px;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-close-x{
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-left-panel{
        padding: 16px 18px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.page-dashboard #purchaseDialogOverlay .price-display-lg{
        min-width: 0;
        padding: 12px 0 0;
        align-items: flex-start;
        border-left: 0;
        border-top: 1px solid #e1e8f2;
        text-align: left;
    }

    body.page-dashboard #purchaseDialogOverlay .option-group,
    body.page-dashboard #purchaseDialogOverlay .verify-section{
        padding: 18px;
    }

    body.page-dashboard #purchaseDialogOverlay .duration-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #purchaseDialogOverlay .verify-fields{
        grid-template-columns: 1fr;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-actions{
        padding: 14px 18px 18px;
        flex-direction: column;
        align-items: stretch;
    }

    body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn{
        width: 100%;
    }
}

/* UI43：认证页面统一使用仪表盘的浅蓝白主题。 */
body:is(.page-login, .page-forgot, .page-register) {



    --auth-surface: #fff;






    --auth-header-surface: rgba(232, 242, 252, .66);
    --auth-header-border: rgba(197, 218, 237, .72);
    --auth-shadow: 0 22px 60px rgba(43, 79, 120, .12);
    min-height: 100vh;

    background: var(--auth-bg);

}

body:is(.page-login, .page-forgot) .header,
body.page-register .auth-header {
    position: relative;
    z-index: 2;








    background: rgba(255, 255, 255, .72) !important;




}











body:is(.page-login, .page-forgot) .header .logo-icon,
body.page-register .auth-header .logo-icon {






    box-shadow: none;
}





body:is(.page-login, .page-forgot) .header .nav-links a,
body.page-register .auth-header .auth-nav a {






    background: rgba(255, 255, 255, .5);




}

body:is(.page-login, .page-forgot) .header .nav-links a:hover,
body.page-register .auth-header .auth-nav a:hover {

    background: #fff;

}

body:is(.page-login, .page-forgot) .header .nav-icon {
    color: var(--auth-primary);
}

body:is(.page-login, .page-forgot) .header .nav-icon svg {
    width: 15px;
    height: 15px;
}



body.page-login-auth .main-content {
    width: min(calc(100% - 48px), 1120px);
    min-height: calc(100vh - 104px);
    margin: 0 auto;
    padding: 36px 0 70px;
}

body.page-login .login-intro {
    max-width: 560px;
}



body.page-login .login-intro h1,
body.page-login .welcome-title,
body.page-forgot .welcome-title {
    color: var(--auth-ink);
}









body:is(.page-login, .page-forgot) .login-container,
body.page-register .register-wrapper {
    background: var(--auth-surface) !important;



}











body:is(.page-login, .page-forgot) .submit-btn:hover,
body.page-register :is(.register-btn, .send-email-code-btn):hover:not(:disabled) {


    box-shadow: 0 11px 24px rgba(11, 127, 243, .24);
}



body.page-forgot .main-content {

    min-height: calc(100vh - 104px);

}





body.page-forgot .reset-method-btn.active {



    box-shadow: 0 6px 14px rgba(11, 127, 243, .18);
}































body.page-register .form-header h1 {
    color: var(--auth-ink);
}





@media (max-width: 768px) {















}

@media (max-width: 480px) {







}

@media (max-width: 400px) {
    body.page-dashboard #purchaseDialogOverlay .selected-plan-info{
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-summary-period{
        margin-left: 61px;
    }

    body.page-dashboard #purchaseDialogOverlay .pay-grid{
        grid-template-columns: 1fr;
    }
}

/* UI43-final：认证页主题必须位于历史认证规则之后，确保实际生效。 */
body:is(.page-login, .page-forgot, .page-register) {
    --auth-primary: #0b7ff3;
    --auth-primary-hover: #006fdf;
    --auth-bg: #f5f8fc;
    --auth-soft: #edf5ff;
    --auth-border: #dce8f5;
    --auth-border-strong: #c9dced;
    --auth-ink: #0c1628;
    --auth-ink-soft: #34445d;
    --auth-muted: #6d809d;
    color: var(--auth-ink);
    background-color: var(--auth-bg);
    background-image:
        radial-gradient(circle at 86% 8%, rgba(116, 184, 255, .18), transparent 31%),
        linear-gradient(145deg, #eef6ff 0%, #f5f8fc 45%, #fff 100%);
}

body:is(.page-login, .page-forgot) .header,
body.page-register .auth-header {
    display: flex;
    width: min(calc(100% - 48px), 1180px);
    min-height: 66px;
    margin: 18px auto 0;
    padding: 10px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--auth-header-surface) !important;
    border: 1px solid var(--auth-header-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .045) !important;
    backdrop-filter: blur(14px);
}

body:is(.page-login, .page-forgot) .header .logo,
body.page-register .auth-header .logo {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--auth-ink) !important;
}

body:is(.page-login, .page-forgot) .header .logo > span,
body.page-register .auth-header .logo-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body:is(.page-login, .page-forgot) .header .logo > span {
    color: var(--auth-ink) !important;
    font-size: 14px;
    font-weight: 760;
}

body.page-register .auth-header .logo-name {
    color: var(--auth-ink);
    font-size: 15px;
    font-weight: 760;
}

body.page-register .auth-header .logo-tagline {
    color: var(--auth-muted);
    font-size: 10px;
}

body:is(.page-login, .page-forgot) .header .logo-icon,
body.page-register .auth-header .logo-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: var(--auth-soft) !important;
    border: 1px solid #cfe2f6 !important;
    border-radius: 11px !important;
}

body:is(.page-login, .page-forgot) .header .logo-icon img,
body.page-register .auth-header .logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body:is(.page-login, .page-forgot) .header .nav-links,
body.page-register .auth-header .auth-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

body:is(.page-login, .page-forgot) .header .nav-links a,
body.page-register .auth-header .auth-nav a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    color: #315475 !important;
    background: rgba(232, 242, 252, .32) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 12px;
    font-weight: 680;
}

body:is(.page-login, .page-forgot) .header .nav-links a:hover,
body.page-register .auth-header .auth-nav a:hover {
    color: #0b6fda !important;
    background: rgba(255, 255, 255, .58) !important;
    border-color: rgba(197, 218, 237, .72) !important;
}

body.page-login,
body.page-forgot {
    display: flex;
    flex-direction: column;
}

body.page-login-auth .main-content,
body.page-forgot .main-content {
    width: min(calc(100% - 48px), 1120px);
    min-height: calc(100vh - 104px);
    margin: 0 auto;
    padding: 36px 0 70px;
}

body.page-forgot .main-content {
    width: min(calc(100% - 32px), 560px);
    padding: 34px 0 66px;
}

body.page-login .intro-eyebrow {
    color: #0b6fda !important;
}

body.page-login .login-intro h1 em {
    color: var(--auth-primary) !important;
}

body.page-login .login-intro > p,
body.page-login .welcome-subtitle,
body.page-forgot .welcome-subtitle {
    color: var(--auth-muted) !important;
}

body.page-login .intro-features span {
    color: #315475 !important;
    background: rgba(255, 255, 255, .8) !important;
    border-color: var(--auth-border) !important;
    border-radius: 11px !important;
}

body.page-login .intro-features span::before {
    background: var(--auth-primary) !important;
}

body:is(.page-login, .page-forgot) .login-container,
body.page-register .register-wrapper {
    background: #fff !important;
    border-color: var(--auth-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 60px rgba(43, 79, 120, .12) !important;
}

body:is(.page-login, .page-forgot) .login-container {
    padding: 36px !important;
}

body:is(.page-login, .page-forgot) .welcome-title,
body.page-login .login-intro h1,
body.page-forgot .success-message h3,
body.page-register .form-header h1 {
    color: var(--auth-ink) !important;
}

body:is(.page-login, .page-forgot) .form-label,
body.page-register .form-group label {
    color: var(--auth-ink-soft) !important;
}

body:is(.page-login, .page-forgot) .form-input,
body.page-register .form-group input,
body.page-register .email-code-input {
    color: var(--auth-ink);
    background: #f7faff;
    border-color: var(--auth-border);
    border-radius: 12px;
}

body:is(.page-login, .page-forgot) .form-input:focus,
body.page-register .form-group input:focus,
body.page-register .email-code-input:focus {
    background: #fff;
    border-color: #69aef0;
    box-shadow: 0 0 0 4px rgba(11, 127, 243, .11);
}

body:is(.page-login, .page-forgot) .submit-btn,
body.page-register .register-btn,
body.page-register .send-email-code-btn {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 9px 20px rgba(11, 127, 243, .2) !important;
}

body:is(.page-login, .page-forgot) .submit-btn:hover,
body.page-register :is(.register-btn, .send-email-code-btn):hover:not(:disabled) {
    background: var(--auth-primary-hover) !important;
    border-color: var(--auth-primary-hover) !important;
}

body:is(.page-login, .page-forgot) :is(.forgot-password-link, .register-link) a,
body.page-register .login-link a,
body.page-forgot .back-link a {
    color: #0b6fda !important;
}

body.page-forgot .reset-method-switch {
    background: #eef6ff !important;
    border-color: var(--auth-border) !important;
    border-radius: 13px !important;
}

body.page-forgot .reset-method-btn {
    color: #52708d !important;
    border-radius: 10px !important;
}

body.page-forgot .reset-method-btn.active {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-forgot .step-number {
    color: #6d809d !important;
    background: #f1f6fc !important;
    border-color: var(--auth-border) !important;
}

body.page-forgot .step.active {
    color: #0b6fda !important;
}

body.page-forgot .step.active .step-number {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-forgot .step-line {
    background: #d8e6f3 !important;
}

body.page-forgot .send-code-btn {
    color: #0b6fda !important;
    background: #f7faff !important;
    border-color: var(--auth-border-strong) !important;
    border-radius: 12px !important;
}

body.page-forgot .send-code-btn:hover:not(:disabled) {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-register {
    display: block;
    padding: 0 20px 40px;
}

body.page-register .auth-header {
    margin-bottom: 24px;
}

body.page-register .register-wrapper {
    width: min(100%, 1040px);
    min-height: 690px;
    grid-template-columns: minmax(300px, .84fr) minmax(440px, 1.16fr);
}

body.page-register .register-banner {
    padding: 50px 42px;
    background:
        linear-gradient(145deg, rgba(11, 127, 243, .96), rgba(29, 167, 238, .84)),
        linear-gradient(135deg, #0b7ff3, #38bdf8) !important;
    border-right-color: rgba(255, 255, 255, .24) !important;
}

body.page-register .banner-logo {
    border-color: rgba(255, 255, 255, .45) !important;
    border-radius: 18px !important;
}

body.page-register .banner-title {
    color: #fff !important;
}

body.page-register .banner-desc,
body.page-register .feature-item {
    color: rgba(255, 255, 255, .84) !important;
}

body.page-register .feature-icon {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .28) !important;
}

body.page-register .register-form-section {
    padding: 46px 48px;
}

body.page-register .form-header p,
body.page-register .hint,
body.page-register .login-link {
    color: var(--auth-muted) !important;
}

body.page-register .invite-badge {
    color: #315475 !important;
    background: #f2f8ff !important;
    border-color: var(--auth-border) !important;
    border-radius: 12px !important;
}

@media (max-width: 768px) {
    body:is(.page-login, .page-forgot) .header,
    body.page-register .auth-header {
        width: calc(100% - 28px);
        min-height: 58px;
        margin-top: 10px;
        padding-inline: 10px;
        border-radius: 15px !important;
    }

    body.page-login-auth .main-content,
    body.page-forgot .main-content {
        width: 100%;
        min-height: calc(100vh - 68px);
        padding: 26px 14px 42px;
    }

    body:is(.page-login, .page-forgot) .login-container {
        padding: 28px 24px !important;
        border-radius: 18px !important;
    }

    body.page-register {
        padding: 0 0 24px;
    }

    body.page-register .auth-header {
        margin-bottom: 14px;
    }

    body.page-register .register-wrapper {
        min-height: 0;
        border-radius: 18px !important;
    }

    body.page-register .register-banner {
        padding: 30px 24px;
    }

    body.page-register .register-form-section {
        padding: 30px 24px 38px;
    }
}

@media (max-width: 480px) {
    body:is(.page-login, .page-forgot) .header,
    body.page-register .auth-header {
        width: calc(100% - 24px);
        margin-top: 8px;
    }

    body:is(.page-login, .page-forgot) .header .nav-links a,
    body.page-register .auth-header .auth-nav a {
        padding-inline: 8px;
        font-size: 11px;
    }

    body:is(.page-login, .page-forgot) .login-container {
        padding: 24px 18px !important;
    }

    body.page-register .register-form-section {
        padding: 26px 20px 34px;
    }
}

/* ============================================
   用户页满屏布局（桌面端）
   邀请返利 / 播放监控 / 我的信息
   ============================================ */
@media (min-width: 1025px) {
    body.page-dashboard.dashboard-no-page-scroll{
        overflow: hidden;
    }

    body.page-dashboard.dashboard-no-page-scroll .main-content.main-content-fullscreen{
        height: 100vh;
        min-height: 100vh;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.page-dashboard.dashboard-no-page-scroll .main-content.main-content-fullscreen .content-section.panel-fullscreen-active{
        height: calc(100vh - 48px);
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    body.page-dashboard .content-section.panel-fullscreen-active .section-header{
        margin-bottom: 0;
        flex-shrink: 0;
    }

    body.page-dashboard .content-section.panel-fullscreen-active .section-header h1{
        margin-bottom: 6px;
    }

    body.page-dashboard .content-section.panel-fullscreen-active .section-header p{
        margin: 0;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active{
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .section-header.playback-header,
body.page-dashboard #section-playback.panel-fullscreen-active .playback-stats-grid,
body.page-dashboard #section-playback.panel-fullscreen-active .playback-main-grid,
body.page-dashboard #section-playback.panel-fullscreen-active .playback-section-history{
        margin: 0;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .playback-stats-grid{
        gap: 12px;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .playback-stat-card{
        padding: 16px 18px;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .playback-main-grid{
        min-height: 0;
        gap: 12px;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .playback-section{
        margin: 0;
        padding: 16px;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .playback-section-history{
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active .section-title-bar{
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    body.page-dashboard #section-playback.panel-fullscreen-active #devicesContainer,
body.page-dashboard #section-playback.panel-fullscreen-active #myDevicesContainer,
body.page-dashboard #section-playback.panel-fullscreen-active #historyContainer{
        flex: 1;
        min-height: 0;
        overflow: auto;
        padding-right: 4px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active{
        display: flex;
        flex-direction: column;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-container{
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-code-card,
body.page-dashboard #section-invite.panel-fullscreen-active .reward-rules,
body.page-dashboard #section-invite.panel-fullscreen-active .invite-stats,
body.page-dashboard #section-invite.panel-fullscreen-active .invite-records{
        margin: 0;
        padding: 18px;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-code-card{
        grid-column: 1;
        grid-row: 1;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .reward-rules{
        grid-column: 1;
        grid-row: 2;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-stats{
        grid-column: 2;
        grid-row: 1;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-records{
        grid-column: 2;
        grid-row: 2;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .invite-stats .stats-grid{
        gap: 10px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .rules-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .rule-item{
        padding: 12px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .rule-icon{
        font-size: 24px;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active .records-list{
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
        padding-right: 4px;
    }

}

/* ============================================================
   用户中心签到模块（限定到 page-dashboard）
   ============================================================ */
/* ==================== 签到系统样式 ==================== */

/* 签到容器 */
body.page-dashboard .checkin-container{
    margin: 20px 0;
}

/* 签到卡片 */
body.page-dashboard .checkin-card{
    background: #333333;
    border-radius: 16px;
    padding: 24px;
    color: white;
    box-shadow: 0 8px 24px rgba(32, 32, 32, 0.3);
    margin-bottom: 20px;
}

/* 签到信息区域 */
body.page-dashboard .checkin-info-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

/* 签到状态盒子 */
body.page-dashboard .checkin-status-box{
    flex: 1;
}

/* 积分显示 */
body.page-dashboard .coin-display{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

body.page-dashboard .coin-icon{
    font-size: 32px;
}

body.page-dashboard .coin-info{
    display: flex;
    flex-direction: column;
}

body.page-dashboard .coin-label{
    font-size: 14px;
    opacity: 0.9;
}

body.page-dashboard .coin-amount{
    font-size: 28px;
    font-weight: bold;
}

/* 签到统计 */
body.page-dashboard .checkin-stats{
    display: flex;
    gap: 20px;
}

body.page-dashboard .stat-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

body.page-dashboard .stat-label{
    font-size: 12px;
    opacity: 0.9;
}

body.page-dashboard .stat-value{
    font-size: 24px;
    font-weight: bold;
    margin: 4px 0;
}

body.page-dashboard .stat-unit{
    font-size: 12px;
    opacity: 0.8;
}

/* 签到操作盒子 */
body.page-dashboard .checkin-action-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 签到按钮 */
body.page-dashboard .checkin-btn{
    background: white;
    color: #333333;
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.page-dashboard .checkin-btn:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

body.page-dashboard .checkin-btn:disabled,
body.page-dashboard .checkin-btn.disabled{
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

body.page-dashboard .checkin-btn .btn-icon{
    font-size: 20px;
}

body.page-dashboard .checkin-hint{
    font-size: 12px;
    opacity: 0.9;
}

/* 签到日历 */
body.page-dashboard .checkin-calendar{
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 16px;
}

body.page-dashboard .calendar-title{
    font-size: 14px;
    margin-bottom: 12px;
    opacity: 0.9;
}

body.page-dashboard .calendar-days{
    display: flex;
    gap: 8px;
    justify-content: space-around;
}

body.page-dashboard .calendar-day{
    flex: 1;
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    transition: all 0.3s ease;
}

body.page-dashboard .calendar-day.checked{
    background: rgba(255, 255, 255, 0.3);
}

body.page-dashboard .calendar-day.today{
    border: 2px solid white;
}

body.page-dashboard .day-label{
    font-size: 11px;
    margin-bottom: 4px;
    opacity: 0.9;
}

body.page-dashboard .day-status{
    font-size: 18px;
}

/* 兑换套餐区域 */
body.page-dashboard .exchange-section{
    margin-bottom: 20px;
}

body.page-dashboard .exchange-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
    color: var(--text-primary);
}

body.page-dashboard .exchange-plans{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

body.page-dashboard .exchange-plan{
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

body.page-dashboard .exchange-plan:not(.disabled):hover{
    border-color: #333333;
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.15);
    transform: translateY(-2px);
}

body.page-dashboard .exchange-plan.disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

body.page-dashboard .plan-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

body.page-dashboard .plan-name{
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
}

body.page-dashboard .plan-price{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

body.page-dashboard .plan-duration{
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

body.page-dashboard .exchange-btn{
    width: 100%;
    background: #333333;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.page-dashboard .exchange-btn:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.3);
}

body.page-dashboard .exchange-btn.disabled,
body.page-dashboard .exchange-btn:disabled{
    background: #cbd5e0;
    cursor: not-allowed;
    transform: none !important;
}

body.page-dashboard .no-plans{
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 兑换记录 */
body.page-dashboard .exchange-records{
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.page-dashboard .records-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

body.page-dashboard .records-header h3{
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
}

body.page-dashboard .view-all-btn{
    background: none;
    border: none;
    color: #333333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.page-dashboard .view-all-btn:hover{
    text-decoration: underline;
}

body.page-dashboard .records-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-dashboard .exchange-record-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 3px solid #333333;
}

body.page-dashboard .record-info{
    flex: 1;
}

body.page-dashboard .record-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

body.page-dashboard .record-time{
    font-size: 12px;
    color: var(--text-secondary);
}

body.page-dashboard .record-details{
    display: flex;
    gap: 12px;
    align-items: center;
}

body.page-dashboard .record-cost{
    font-size: 14px;
    font-weight: bold;
    color: #e53e3e;
}

body.page-dashboard .record-days{
    font-size: 14px;
    font-weight: bold;
    color: #38a169;
}

body.page-dashboard .no-records{
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 签到成功动画 */
body.page-dashboard .checkin-success-animation{
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(35, 29, 24, .38);
    backdrop-filter: blur(4px);
    z-index: 10000;
    animation: checkinOverlayIn .22s ease both;
}

body.page-dashboard .checkin-success-animation.fade-out{
    animation: checkinOverlayOut .26s ease forwards;
}

body.page-dashboard .checkin-success-dialog {
    position: relative;
    width: min(100%, 360px);
    padding: 30px 30px 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 18px;
    background: #f7f9fd;
    box-shadow: 0 24px 70px rgba(35, 29, 24, .24);
    text-align: center;
    animation: checkinDialogIn .34s cubic-bezier(.2,.8,.2,1) both;
}

body.page-dashboard .checkin-success-dialog::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #a6673f, #d6a276);
}

body.page-dashboard .checkin-success-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6d809d;
    font-size: 23px;
    line-height: 1;
}

body.page-dashboard .checkin-success-close:hover {
    background: #f1f5fa;
    color: #34445d;
}

body.page-dashboard .checkin-success-mark {
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    display: grid;
    place-items: center;
    border: 1px solid #cbe2d5;
    border-radius: 50%;
    background: #edf7f1;
    color: #37805d;
}

body.page-dashboard .checkin-success-mark svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

body.page-dashboard .checkin-success-kicker {
    color: #a6673f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard .success-text {
    margin: 6px 0 5px;
    color: #0c1628;
    font-size: 22px;
    font-weight: 760;
    line-height: 1.25;
}

body.page-dashboard .checkin-success-message {
    margin: 0;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.5;
}

body.page-dashboard .success-reward {
    margin: 20px 0 12px;
    padding: 14px 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    background: #f7f9fd;
    color: #a6673f;
}

body.page-dashboard .success-reward strong {
    font-size: 30px;
    font-weight: 780;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard .success-reward span {
    color: #825e45;
    font-size: 13px;
    font-weight: 650;
}

body.page-dashboard .checkin-success-note {
    margin-bottom: 20px;
    color: #6d809d;
    font-size: 11px;
}

body.page-dashboard .checkin-success-confirm {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: #0c1628;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background .18s ease, transform .18s ease;
}

body.page-dashboard .checkin-success-confirm:hover {
    background: #34445d;
    transform: translateY(-1px);
}

@keyframes checkinOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes checkinOverlayOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes checkinDialogIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bounceIn {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ==================== 签到迷你卡片样式（正方形） ==================== */
body.page-dashboard .checkin-mini-card{
    flex-shrink: 0;
    width: 180px;
    min-height: 100%;
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

body.page-dashboard .checkin-mini-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 16px 14px;
    box-sizing: border-box;
    text-align: center;
}

body.page-dashboard .checkin-mini-header{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

body.page-dashboard .checkin-mini-icon{
    font-size: 16px;
}

body.page-dashboard .checkin-mini-title{
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

body.page-dashboard .checkin-mini-coins{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

body.page-dashboard .coin-icon-mini{
    font-size: 18px;
}

body.page-dashboard .coin-value-mini{
    font-size: 22px;
    font-weight: bold;
    color: #333333;
}

body.page-dashboard .coin-name-mini{
    font-size: 12px;
    color: #6b7280;
}

body.page-dashboard .checkin-mini-btn{
    background: #333333;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 24px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(32, 32, 32, 0.3);
}

body.page-dashboard .checkin-mini-btn:hover:not(:disabled){
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(32, 32, 32, 0.4);
}

body.page-dashboard .checkin-mini-btn:disabled,
body.page-dashboard .checkin-mini-btn.disabled{
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    background: #9ca3af;
    box-shadow: none;
}

body.page-dashboard .checkin-mini-hint{
    font-size: 11px;
    color: #9ca3af;
    margin-top: 6px;
    min-height: 16px;
}

/* 签到兑换区域 */
body.page-dashboard .checkin-exchange-section{
    margin: 20px 0;
}

body.page-dashboard .checkin-exchange-section .exchange-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    body.page-dashboard .checkin-info-area{
        flex-direction: column;
    }

    body.page-dashboard .exchange-plans{
        grid-template-columns: 1fr;
    }

    body.page-dashboard .checkin-stats{
        width: 100%;
        justify-content: space-around;
    }

    body.page-dashboard .calendar-days{
        gap: 4px;
    }

    body.page-dashboard .calendar-day{
        padding: 6px 4px;
    }

    body.page-dashboard .day-label{
        font-size: 10px;
    }

    body.page-dashboard .day-status{
        font-size: 16px;
    }

    /* 签到迷你卡片移动端适配 */
    body.page-dashboard .checkin-mini-card{
        width: 100%;
        height: auto;
        min-height: 100px;
    }

    body.page-dashboard .checkin-mini-content{
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
        gap: 12px;
    }

    body.page-dashboard .checkin-mini-header{
        margin-bottom: 0;
    }

    body.page-dashboard .checkin-mini-coins{
        margin-bottom: 0;
        flex: 1;
        justify-content: center;
    }

    body.page-dashboard .checkin-mini-hint{
        display: none;
    }

    /* 签到按钮移动端增强 */
    body.page-dashboard .checkin-btn{
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        min-height: 44px;
    }

    /* 兑换记录移动端 */
    body.page-dashboard .exchange-record-item{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    body.page-dashboard .record-details{
        width: 100%;
        justify-content: flex-start;
    }

    /* 签到卡片移动端 */
    body.page-dashboard .checkin-card{
        padding: 20px 16px;
        border-radius: 14px;
    }

    body.page-dashboard .coin-amount{
        font-size: 24px;
    }

    body.page-dashboard .stat-item{
        padding: 6px 10px;
    }

    body.page-dashboard .stat-value{
        font-size: 20px;
    }

    /* 签到成功弹窗移动端 */
    body.page-dashboard .checkin-success-dialog{
        width: min(100%, 360px);
        padding: 28px 22px 22px;
    }

    body.page-dashboard .checkin-success-mark{
        width: 50px;
        height: 50px;
    }

    body.page-dashboard .success-text{
        font-size: 20px;
    }

    body.page-dashboard .success-reward strong{
        font-size: 26px;
    }
}

/* 小屏手机优化 */
@media (max-width: 480px) {
    body.page-dashboard .checkin-card{
        padding: 16px 12px;
        border-radius: 12px;
    }

    body.page-dashboard .coin-display{
        gap: 8px;
    }

    body.page-dashboard .coin-icon{
        font-size: 24px;
    }

    body.page-dashboard .coin-amount{
        font-size: 22px;
    }

    body.page-dashboard .coin-label{
        font-size: 12px;
    }

    body.page-dashboard .checkin-stats{
        gap: 8px;
    }

    body.page-dashboard .stat-item{
        padding: 5px 8px;
        border-radius: 6px;
    }

    body.page-dashboard .stat-value{
        font-size: 18px;
    }

    body.page-dashboard .stat-label,
body.page-dashboard .stat-unit{
        font-size: 10px;
    }

    body.page-dashboard .calendar-day{
        padding: 4px 2px;
        border-radius: 6px;
    }

    body.page-dashboard .day-status{
        font-size: 14px;
    }

    body.page-dashboard .exchange-plan{
        padding: 16px;
    }

    body.page-dashboard .plan-name{
        font-size: 14px;
    }

    body.page-dashboard .plan-price{
        font-size: 16px;
    }

    body.page-dashboard .exchange-btn{
        padding: 10px;
        font-size: 13px;
    }

    body.page-dashboard .exchange-records{
        padding: 16px 12px;
    }

    body.page-dashboard .records-header h3{
        font-size: 16px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    body.page-dashboard .checkin-btn:hover:not(:disabled),
body.page-dashboard .exchange-btn:hover:not(:disabled),
body.page-dashboard .exchange-plan:not(.disabled):hover,
body.page-dashboard .checkin-mini-btn:hover:not(:disabled){
        transform: none;
        box-shadow: inherit;
    }

    body.page-dashboard .checkin-btn:active:not(:disabled),
body.page-dashboard .exchange-btn:active:not(:disabled),
body.page-dashboard .checkin-mini-btn:active:not(:disabled){
        transform: scale(0.96);
        transition: transform 0.1s;
    }

    body.page-dashboard .exchange-plan:not(.disabled):active{
        transform: scale(0.98);
        transition: transform 0.1s;
    }

    /* 最小触摸面积 */
    body.page-dashboard .checkin-btn,
body.page-dashboard .exchange-btn,
body.page-dashboard .checkin-mini-btn,
body.page-dashboard .view-all-btn{
        min-height: 44px;
    }

    body.page-dashboard a,
body.page-dashboard button{
        touch-action: manipulation;
    }
}

/* ============================================================
   登录与密码找回页面（限定到 page-login）
   ============================================================ */
body.page-login{
            background: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        body.page-login .header{
            background: white;
            padding: 16px 40px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px auto;
            max-width: 1200px;
            border-radius: 24px;
            width: calc(100% - 40px);
            border: 1px solid #e5e5e5;
        }

        body.page-login .logo{
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
        }

        body.page-login .logo-icon{
            width: 32px;
            height: 32px;
            background: #3b82f6;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
            overflow: hidden;
        }

        body.page-login .logo-icon img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        body.page-login .nav-links{
            display: flex;
            gap: 30px;
            align-items: center;
            flex-wrap: wrap;
        }

        body.page-login .nav-links a{
            color: #4a4a4a;
            text-decoration: none;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
        }

        body.page-login .nav-links a:hover{
            color: #1a1a1a;
        }

        body.page-login .nav-icon{
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        body.page-login .nav-icon svg{
            width: 100%;
            height: 100%;
            fill: currentColor;
        }

        body.page-login .right-menu{
            display: flex;
            gap: 20px;
            align-items: center;
        }

        body.page-login .right-menu a{
            color: #666;
            text-decoration: none;
            font-size: 14px;
        }

        body.page-login .menu-toggle{
            display: none;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            background: white;
            padding: 10px;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
        }

        body.page-login .menu-toggle span{
            display: block;
            height: 2px;
            width: 100%;
            background: #1a1a1a;
            border-radius: 999px;
        }

        /* 主内容区 */
        body.page-login .main-content{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
        }

        body.page-login .login-container{
            background: white;
            padding: 48px 40px;
            border-radius: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            width: 100%;
            max-width: 420px;
            will-change: transform;
            border: 1px solid #e5e5e5;
        }

        body.page-login .welcome-text{
            text-align: center;
            margin-bottom: 32px;
        }

        body.page-login .welcome-title{
            font-size: 28px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        body.page-login .welcome-subtitle{
            font-size: 14px;
            color: #4a4a4a;
            line-height: 1.6;
        }

        body.page-login .form-group{
            margin-bottom: 20px;
        }

        body.page-login .form-label{
            display: block;
            margin-bottom: 8px;
            color: #1a1a1a;
            font-size: 14px;
            font-weight: 500;
        }

        body.page-login .form-input{
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e5e5e5;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.2s;
            background: #fafafa;
            color: #1a1a1a;
        }

        body.page-login .form-input::placeholder{
            color: #999;
        }

        body.page-login .form-input:focus{
            outline: none;
            border-color: #3b82f6;
            background: white;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        body.page-login .form-hint{
            font-size: 12px;
            color: #666666;
            margin-top: 8px;
        }

        body.page-login .forgot-link{
            text-align: right;
            margin-bottom: 24px;
        }

        body.page-login .forgot-link a{
            color: #3b82f6;
            text-decoration: none;
            font-size: 13px;
        }

        body.page-login .forgot-link a:hover{
            text-decoration: underline;
        }

        body.page-login .submit-btn{
            width: 100%;
            padding: 14px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
            will-change: transform;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        body.page-login .submit-btn:hover{
            background: #2563eb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        body.page-login .submit-btn:active{
            transform: translateY(0);
        }

        body.page-login .submit-btn:disabled{
            opacity: 0.85;
            cursor: not-allowed;
            transform: none;
        }

        body.page-login .submit-btn.loading{
            background: #60a5fa;
        }

        body.page-login .submit-btn.success{
            background: #10b981;
        }

        body.page-login .submit-btn .btn-spinner{
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: btn-spin 0.8s linear infinite;
        }

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

        body.page-login .error{
            background: #fef2f2;
            color: #dc2626;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            margin-top: 16px;
            border: 1px solid #fecaca;
            display: none;
        }

        body.page-login .error.show{
            display: block;
        }

        body.page-login .register-link{
            text-align: center;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #e5e5e5;
        }

        body.page-login .register-link span{
            color: #4a4a4a;
            font-size: 14px;
        }

        body.page-login .register-link a{
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
            margin-left: 4px;
        }

        body.page-login .register-link a:hover{
            text-decoration: underline;
        }

        body.page-login .emoji{
            font-size: 20px;
        }

        body.page-login .drawer-overlay{
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 90;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

        body.page-login .drawer-overlay.show{
            opacity: 1;
            visibility: visible;
        }

        body.page-login .mobile-drawer{
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 280px;
            background: #fff;
            box-shadow: -10px 0 30px rgba(0,0,0,0.1);
            z-index: 100;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            padding: 24px;
            gap: 18px;
            will-change: transform;
        }

        body.page-login .mobile-drawer.show{
            transform: translateX(0);
        }

        body.page-login .drawer-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: #1a1a1a;
        }

        body.page-login .drawer-close{
            border: none;
            background: transparent;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            color: #333;
        }

        body.page-login .drawer-links{
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        body.page-login .drawer-links a{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 12px;
            border: 1px solid #f0f0f0;
            color: #333;
            text-decoration: none;
            font-size: 15px;
            transition: background 0.2s;
        }

        body.page-login .drawer-links a:hover{
            background: #f8fafc;
        }

        body.page-login.drawer-open{
            overflow: hidden;
        }

        /* 移动端响应式 */
        @media (max-width: 768px) {
            body.page-login{
                padding: 0;
            }

            body.page-login .header{
                padding: 10px 16px;
                margin: 10px auto;
                width: calc(100% - 20px);
                border-radius: 16px;
            }

            body.page-login .logo{
                font-size: 16px;
            }

            body.page-login .logo-icon{
                width: 28px;
                height: 28px;
            }

            body.page-login .nav-links{
                display: none;
            }

            body.page-login .right-menu{
                gap: 0;
            }

            body.page-login .menu-toggle{
                display: inline-flex;
                width: 38px;
                height: 38px;
                padding: 8px;
                gap: 5px;
            }

            body.page-login .menu-toggle span{
                height: 2px;
            }

            body.page-login .login-container{
                padding: 28px 20px;
                max-width: 100%;
                border-radius: 16px;
                box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            }

            body.page-login .welcome-text{
                margin-bottom: 24px;
            }

            body.page-login .welcome-title{
                font-size: 20px;
            }

            body.page-login .welcome-subtitle{
                font-size: 13px;
            }

            body.page-login .form-group{
                margin-bottom: 16px;
            }

            body.page-login .form-label{
                font-size: 13px;
                margin-bottom: 6px;
            }

            body.page-login .form-input{
                padding: 11px 14px;
                font-size: 14px;
            }

            body.page-login .form-hint{
                font-size: 11px;
                margin-top: 6px;
            }

            body.page-login .submit-btn{
                padding: 13px;
                font-size: 15px;
            }

            body.page-login .main-content{
                padding: 16px 12px 32px;
            }
        }

        @media (max-width: 480px) {
            body.page-login .header{
                padding: 8px 14px;
                margin: 8px auto;
                border-radius: 14px;
            }

            body.page-login .logo{
                font-size: 15px;
            }

            body.page-login .logo-icon{
                width: 26px;
                height: 26px;
            }

            body.page-login .menu-toggle{
                width: 36px;
                height: 36px;
                padding: 7px;
                gap: 4px;
            }

            body.page-login .login-container{
                padding: 24px 18px;
            }

            body.page-login .welcome-title{
                font-size: 19px;
            }

            body.page-login .welcome-subtitle{
                font-size: 12px;
            }

            body.page-login .form-input{
                padding: 10px 13px;
                font-size: 16px;
            }

            body.page-login .submit-btn{
                font-size: 15px;
                padding: 12px;
            }

            body.page-login .main-content{
                padding: 12px 10px 28px;
                padding-bottom: calc(28px + env(safe-area-inset-bottom));
            }
        }

        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            body.page-login .submit-btn:hover{
                transform: none;
                box-shadow: none;
            }

            body.page-login .submit-btn:active{
                transform: scale(0.97);
                transition: transform 0.1s;
            }

            body.page-login .nav-links a:active,
body.page-login .drawer-links a:active{
                background: #f0f4ff;
            }

            /* 最小触摸面积 */
            body.page-login .menu-toggle,
body.page-login .drawer-close,
body.page-login .submit-btn,
body.page-login .forgot-link a{
                min-height: 44px;
                min-width: 44px;
            }

            /* 防止 iOS 缩放 */
            body.page-login .form-input{
                font-size: 16px !important;
            }

            /* 消除点击延迟 */
            body.page-login a,
body.page-login button,
body.page-login input,
body.page-login .menu-toggle{
                touch-action: manipulation;
            }
        }

        /* iOS 安全区域支持 */
        @supports (padding: env(safe-area-inset-top)) {
            body.page-login .header{
                padding-top: calc(16px + env(safe-area-inset-top));
                margin-top: calc(20px + env(safe-area-inset-top));
            }

            body.page-login .mobile-drawer{
                padding-top: calc(24px + env(safe-area-inset-top));
                padding-bottom: env(safe-area-inset-bottom);
            }

            @media (max-width: 768px) {
                body.page-login .header{
                    margin-top: calc(10px + env(safe-area-inset-top));
                    padding-top: calc(10px + env(safe-area-inset-top));
                }
            }
        }

} /* @layer legacy */

/* ============================================================
   前台视觉重构 v4
   唯一样式入口：白色页面、黑色文字、黑色主操作，无紫色与渐变
   ============================================================ */
html.ui-preload body.page-dashboard .content-section {
    display: none !important;
}

body.page-dashboard {












    background: #fff;
}

body.page-dashboard .sidebar-nav .nav-item.active::before {
    background-color: #202020;
}

body.page-dashboard .sidebar-nav .nav-item.active svg {

    background-color: transparent;
}

body.page-dashboard .intro-eyebrow {
    color: #202020;
    background-color: #202020;
}

body.page-dashboard .user-name-highlight {
    padding: 0;
    color: #202020 !important;
    background: transparent !important;
    border-radius: 0;
    -webkit-text-fill-color: #202020;
}

body.page-dashboard :is(
    .hero-search-btn,
    .submit-btn,
    .primary-btn,
    .search-box button,
    .redeem-btn,
    .order-btn.primary,
    .ticket-submit-btn,
    .save-btn,
    .btn-primary-v2,
    .btn-confirm,
    .invite-action-btn,
    .purchase-btn,
    .quick-buy-btn,
    .payment-submit-btn,
    .action-btn.primary,
    .session-expired-content button
) {
    color: #fff !important;
    background: #202020 !important;
    background-image: none !important;
    border-color: #202020 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) > .server-lines-compact {
    grid-column: 1 !important;
    grid-row: auto !important;
}

body.page-dashboard :is(
    .hero-search-btn,
    .submit-btn,
    .primary-btn,
    .search-box button,
    .redeem-btn,
    .order-btn.primary,
    .ticket-submit-btn,
    .save-btn,
    .btn-primary-v2,
    .btn-confirm,
    .invite-action-btn,
    .purchase-btn,
    .quick-buy-btn,
    .payment-submit-btn,
    .action-btn.primary,
    .session-expired-content button
):hover {
    background: #000 !important;
    border-color: #000 !important;
    transform: translateY(-1px);
}

body.page-dashboard :is(
    .btn-cancel,
    .btn-secondary-v2,
    .secondary-btn,
    .order-btn.secondary,
    .action-btn.secondary
) {
    color: #272727 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #cbd8e8 !important;
    box-shadow: none !important;
}

body.page-dashboard :is(
    .dashboard-hero,
    .invite-banner-modern,
    .subscription-status-mini,
    .feature-card-v2,
    .plan-card,
    .quick-buy-dialog,
    .purchase-dialog-horizontal,
    .session-expired-content
) {
    background-image: none !important;
}

body.page-dashboard .account-disabled-alert {
    color: #5f3d13;
    background: #fff9ed !important;
    background-image: none !important;
    border: 1px solid #ead6b5;
    border-left: 4px solid #9a6a25;
}

body.page-dashboard .account-disabled-alert h3,
body.page-dashboard .account-disabled-alert p {
    color: inherit;
}

body.page-dashboard .panel-loading-text {
    padding: 20px 0;
    color: #888;
    text-align: center;
}

body.page-dashboard .request-poster-placeholder {
    display: flex;
    width: 80px;
    height: 120px;
    align-items: center;
    justify-content: center;
    color: #6b6b6b;
    background: #efefed;
    border: 1px solid #e1e8f2;
    border-radius: 6px;
}

body.page-dashboard .media-type-chip,
body.page-dashboard .request-scope-chip {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 8px;
    color: #fff;
    background: #262626;
    border-radius: 4px;
    font-size: 12px;
}

body.page-dashboard .movie-media-type {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    color: #fff;
    background: #262626;
    border-radius: 3px;
    font-size: 10px;
}

body.page-dashboard .request-scope-chip {
    margin-left: 4px;
    color: #333;
    background: #efefed;
    border: 1px solid #e1e8f2;
}

body.page-dashboard .progress-value-complete {
    color: #49755f;
}

body.page-dashboard .request-meta-time {
    margin-top: 10px;
    color: #888;
    font-size: 12px;
}

body.page-dashboard .request-note {
    margin-top: 5px;
    font-size: 12px;
}

body.page-dashboard .request-note-user {
    color: #3f3f3f;
}

body.page-dashboard .request-note-admin {
    color: #a13c37;
}

body.page-dashboard .subscription-sub-tip {
    margin-top: 12px;
    color: #806022;
    font-size: 12px;
}



body.page-dashboard .btn-block {
    width: 100%;
}

body.page-dashboard .pagination-centered {
    justify-content: center;
    margin-top: 16px;
}

body.page-dashboard .pagination-spaced-bottom {
    margin-bottom: 20px;
}

body.page-dashboard .progress-fill-complete {
    width: 100%;
}

body.page-dashboard .profile-action-spaced {
    margin-top: 10px;
}

body.page-dashboard .email-code-actions {
    display: flex;
    gap: 8px;
}

body.page-dashboard .email-code-field {
    flex: 1;
}

body.page-dashboard .email-code-confirm {
    white-space: nowrap;
}

body.page-dashboard .emby-status-info {
    margin-bottom: 15px;
}

body.page-dashboard .announcement-content {
    white-space: pre-line;
}

/* FAQ 与工单页：清除旧主题遗留的蓝色操作 */
body.page-dashboard .category-btn {
    color: #555;
    background: #fff !important;
    border: 1px solid #e1e8f2;
}

body.page-dashboard .category-btn:hover {
    color: #202020;
    background: #f4f4f3 !important;
    border-color: #8b9bb2;
}

body.page-dashboard .category-btn.active {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
}

body.page-dashboard :is(.contact-card, .ticket-form-section, .my-tickets-section) {
    background: #fff !important;
    border-color: #e1e8f2 !important;
}

body.page-dashboard .contact-icon {
    color: #fff !important;
    background: #202020 !important;
}

body.page-dashboard .contact-link {
    color: #202020 !important;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-dashboard .priority-label.low { color: #087d60 !important; background: #f0faf6 !important; border-color: #cdebe0 !important; }
body.page-dashboard .priority-label.normal { color: #1269bf !important; background: #f1f7ff !important; border-color: #d0e5fb !important; }
body.page-dashboard .priority-label.high { color: #a66400 !important; background: #fff8eb !important; border-color: #f2dfb9 !important; }
body.page-dashboard .priority-label.urgent { color: #ba3945 !important; background: #fff3f3 !important; border-color: #f3d1d4 !important; }
body.page-dashboard .priority-option input:checked + .priority-label.low { color: #fff !important; background: #079772 !important; border-color: #079772 !important; }
body.page-dashboard .priority-option input:checked + .priority-label.normal { color: #fff !important; background: #0b7ff3 !important; border-color: #0b7ff3 !important; }
body.page-dashboard .priority-option input:checked + .priority-label.high { color: #fff !important; background: #d48100 !important; border-color: #d48100 !important; }
body.page-dashboard .priority-option input:checked + .priority-label.urgent { color: #fff !important; background: #d94c55 !important; border-color: #d94c55 !important; }

body.page-dashboard .submit-ticket-btn {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
    box-shadow: none !important;
}

body.page-dashboard .submit-ticket-btn:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* Emby 引导、绑定、Telegram 绑定和解绑弹窗 */
body.page-dashboard :is(.emby-bind-overlay, .telegram-bind-overlay, .unbind-overlay) {
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 20, 20, 0.58);
    backdrop-filter: blur(4px);
}

body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog, .unbind-dialog) {
    position: relative;
    width: min(100%, 480px);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 30px;
    color: #202020;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(25, 25, 25, 0.18) !important;
}



body.page-dashboard .emby-guide-dialog {
    width: min(100%, 480px);
    padding: 32px 28px 26px;
    background: #fff !important;
}

body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog) .close-btn {
    color: #777 !important;
    background: #f4f4f3 !important;
    border: 1px solid #e1e8f2 !important;
}

body.page-dashboard .emby-bind-dialog > .close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 2;
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border-radius: 9px;
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog) .close-btn:hover {
    color: #111 !important;
    background: #ececea !important;
}

body.page-dashboard .guide-header {
    margin-bottom: 24px;
    text-align: center;
}

body.page-dashboard .guide-icon {
    margin-bottom: 12px;
    font-size: 42px;
}

body.page-dashboard .guide-header h2,
body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog) .dialog-header h2,
body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog) .dialog-header h3,
body.page-dashboard .unbind-dialog h3,
body.page-dashboard .emby-account-section h3 {
    color: #202020 !important;
}

body.page-dashboard .guide-header p,
body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog) .dialog-header p,
body.page-dashboard .emby-tab-content .tab-desc,
body.page-dashboard .unbind-dialog p {
    color: #6d6d6d !important;
}

body.page-dashboard .guide-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.page-dashboard .guide-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

body.page-dashboard .guide-option:hover {
    background: #f7f7f6;
    border-color: #999;
    transform: translateX(3px);
}

body.page-dashboard .guide-option-icon {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    background: #f1f1ef;
    border-radius: 10px;
    font-size: 24px;
}

body.page-dashboard .guide-option-info {
    flex: 1;
}

body.page-dashboard .guide-option-info h3 {
    margin-bottom: 3px;
    color: #202020;
    font-size: 14px;
}

body.page-dashboard .guide-option-info p {
    margin: 0;
    color: #777;
    font-size: 12px;
}

body.page-dashboard .guide-option-arrow {
    color: #999;
    font-size: 22px;
}

body.page-dashboard .guide-option.guide-btn-disabled {
    cursor: not-allowed;
    opacity: .48;
}

body.page-dashboard .guide-create-hint {
    padding: 10px 13px;
    color: #765a23;
    background: #f7f9fd;
    border: 1px solid #ead6b5;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

body.page-dashboard .emby-bind-dialog .dialog-header {
    margin-bottom: 22px;
    text-align: center;
}

body.page-dashboard .emby-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

body.page-dashboard .emby-tabs .tab-btn {
    flex: 1;
    padding: 11px;
    color: #555;
    background: #f5f5f4 !important;
    background-image: none !important;
    border: 1px solid #e1e8f2;
    border-radius: 9px;
}

body.page-dashboard .emby-tabs .tab-btn.active {
    color: #fff;
    background: #202020 !important;
    border-color: #202020;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group {
    margin-bottom: 16px;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group label {
    display: block;
    margin-bottom: 7px;
    color: #444 !important;
    font-size: 13px;
    font-weight: 600;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group .hint {
    color: #888 !important;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group input {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    color: var(--control-ink);
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 9px;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group input:focus {
    background: #fff;
    border-color: var(--control-accent);
    box-shadow: 0 0 0 3px var(--control-ring);
}

body.page-dashboard .emby-bind-dialog .submit-btn,
body.page-dashboard .unbind-dialog .btn-confirm-unbind {
    width: 100%;
    min-height: 44px;
    color: #fff;
    background: #202020 !important;
    background-image: none !important;
    border: 0;
    border-radius: 9px;
}

body.page-dashboard .emby-account-card,
body.page-dashboard .emby-account-details .detail-row,
body.page-dashboard .telegram-bind-dialog::before,
body.page-dashboard .telegram-bind-dialog .bind-intro,
body.page-dashboard .telegram-bind-dialog .step-badge,
body.page-dashboard .telegram-bind-dialog .bind-code-display {
    color: #333;
    background: #f7f7f6 !important;
    background-image: none !important;
    border-color: #e1e8f2 !important;
}

body.page-dashboard .emby-account-details :is(.detail-label, .detail-value),
body.page-dashboard .telegram-bind-dialog :is(.bind-intro p, .bind-intro li, .step-content label, .code-label, .code-value) {
    color: #444 !important;
}

body.page-dashboard .telegram-bind-dialog .dialog-header {
    background: #fff !important;
}

body.page-dashboard .telegram-bind-dialog :is(.bot-link, .copy-btn, .refresh-btn, .bind-code-container) {
    color: #202020 !important;
    background: #f4f4f3 !important;
    border-color: #e1e8f2 !important;
}

body.page-dashboard .telegram-bind-dialog .step-divider-horizontal {
    color: #777;
}



body.page-dashboard .unbind-dialog .warning-text {
    color: #765a23;
    background: #fff9ed;
    border: 1px solid #ead6b5;
}

body.page-dashboard .unbind-dialog .dialog-btns {
    display: flex;
}

body.page-dashboard .unbind-dialog .btn-cancel {
    flex: 1;
}

body.page-dashboard .unbind-dialog .btn-confirm-unbind {
    flex: 1;
}

/* 登录页补充：链接与辅助文案也统一为黑灰色 */
body.page-login {
    --login-warm: #202020;
    color: #202020;
    background: #fff;
}

body.page-login .forgot-password-link {
    margin-bottom: 15px;
    text-align: right;
}

body.page-login .forgot-password-link a {
    color: #5f5f5f !important;
    font-size: 13px;
    text-decoration: none;
}

body.page-login .register-link {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
    text-align: center;
}

body.page-login .register-link a {
    color: #202020 !important;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.page-login .register-mode-hint {
    display: block;
    margin-top: 4px;
    color: #75623c;
    font-size: 12px;
}

body.page-login .register-link-disabled {
    color: #999;
}

/* 找回密码 */


body.page-forgot .login-container {
    max-width: 500px;
}

body.page-forgot .reset-method-switch {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding: 4px;
    background: #f3f3f2;
    border: 1px solid #e1e8f2;

}

body.page-forgot .reset-method-btn {
    flex: 1;
    min-height: 39px;
    padding: 8px 10px;

    background: transparent;
    border: 1px solid transparent;

    cursor: pointer;
    font-size: 13px;
}

body.page-forgot .reset-method-btn.active {

    background: #202020;

}

body.page-forgot .step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
}

body.page-forgot .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #999;
    font-size: 11px;
}

body.page-forgot .step-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;

    background: #f0f0ef;
    border: 1px solid #e1e8f2;
    border-radius: 50%;
}



body.page-forgot .step.active .step-number {

    background: #202020;

}

body.page-forgot .step-line {
    height: 1px;
    flex: 1;
    margin: 0 10px 17px;
    background: #ddd;
}

body.page-forgot .step-content {
    display: none;
}

body.page-forgot .step-content.active {
    display: block;
}

body.page-forgot .form-group {
    margin-bottom: 18px;
}

body.page-forgot .form-label {
    display: block;
    margin-bottom: 7px;
}

body.page-forgot .form-hint {
    margin-top: 6px;
    color: #888;
    font-size: 11px;
}

body.page-forgot .form-hint.warning {
    color: #765a23;
}

body.page-forgot .code-input-row {
    display: flex;
    gap: 8px;
}

body.page-forgot .code-input-row .form-input {
    flex: 1;
}

body.page-forgot .send-code-btn {
    min-width: 112px;
    padding: 0 14px;

    background: #fff;
    border: 1px solid #cbd8e8;

    cursor: pointer;
    font-weight: 650;
}

body.page-forgot .send-code-btn:hover:not(:disabled) {

    background: #202020;

}

body.page-forgot .send-code-btn:disabled,
body.page-forgot .submit-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
}

body.page-forgot .success-message {
    padding: 18px 0 4px;
    text-align: center;
}

body.page-forgot .success-message .icon {
    margin-bottom: 12px;
    font-size: 42px;
}

body.page-forgot .success-message h3 {
    margin-bottom: 8px;
    color: #202020;
}

body.page-forgot .success-message p {
    margin-bottom: 20px;
    color: #666;
}

body.page-forgot .success-message .submit-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

body.page-forgot .back-link {
    margin-top: 20px;
    text-align: center;
}

body.page-forgot .back-link a {
    color: #555;
    font-size: 12px;
}

/* 注册页 */
body.page-register {
    --primary: #202020;
    --primary-light: #555;
    --primary-dark: #000;
    --neutral-accent: #555;
    min-height: 100vh;

    color: #202020;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.page-register *,
body.page-register *::before,
body.page-register *::after {
    box-sizing: border-box;
}

body.page-register .register-wrapper {
    display: grid;


    margin: 0 auto;
    overflow: hidden;

    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(30, 30, 30, .09);
}

body.page-register .register-banner {
    display: flex;

    align-items: center;
    background: #f1f5fa;
    border-right: 1px solid #e1e8f2;
}

body.page-register .banner-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    object-fit: cover;
    border: 1px solid #e1e8f2;

}

body.page-register .banner-title {
    margin: 0 0 12px;

    font-size: 28px;
    line-height: 1.25;
}

body.page-register .banner-desc {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.7;
}

body.page-register .banner-features {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

body.page-register .feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    font-size: 13px;
}

body.page-register .feature-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-register .register-form-section {
    display: flex;

    flex-direction: column;
    justify-content: center;
}

body.page-register .form-header {
    margin-bottom: 25px;
}

body.page-register .form-header h1 {
    margin: 0 0 6px;
    color: #202020;
    font-size: 25px;
}

body.page-register .form-header p {
    margin: 0;
    color: #777;
    font-size: 13px;
}

body.page-register .message,
body.page-register .invite-badge {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}

body.page-register .message {
    display: none;
}

body.page-register .message.show {
    display: block;
}

body.page-register .message.error {
    color: #9d342f;
    background: #fff5f4;
    border: 1px solid #efcbc8;
}

body.page-register .message.success {
    color: #3d6c56;
    background: #f2f8f4;
    border: 1px solid #cfe1d6;
}

body.page-register .invite-badge {
    display: flex;
    align-items: center;
    gap: 9px;

    background: #f7f9fd;
    border: 1px solid #e1e8f2;
}

body.page-register .invite-required {
    color: #644f28;
    background: #f7f9fd;
    border-color: #ead6b5;
}

body.page-register .form-group {
    margin-bottom: 17px;
}

body.page-register .form-group label {
    display: block;
    margin-bottom: 7px;
    color: #353535;
    font-size: 12px;
    font-weight: 650;
}

body.page-register .field-required {
    color: #a33b36;
}

body.page-register .field-optional {
    color: #888;
    font-weight: 400;
}

body.page-register .input-wrapper {
    position: relative;
}

body.page-register .input-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #777;
    transform: translateY(-50%);
}

body.page-register .form-group input,
body.page-register .email-code-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px 10px 41px;
    color: #202020;
    background: #fafafa;
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    outline: none;
}

body.page-register .email-code-input {
    flex: 1;
    padding-inline: 13px;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 3px;
    text-align: center;
}

body.page-register .form-group input:focus,
body.page-register .email-code-input:focus {
    background: #fff;
    border-color: #777;
    box-shadow: 0 0 0 3px rgba(20, 20, 20, .08);
}

body.page-register .form-group input.error {
    background: #fff7f6;
    border-color: #b9514c;
}

body.page-register .form-group input[readonly] {
    color: #555;
    background: #f1f1ef;
}

body.page-register .hint,
body.page-register .error-text {
    margin-top: 5px;
    color: #818181;
    font-size: 11px;
}

body.page-register .error-text {
    color: #a33b36;
}

body.page-register .password-strength {
    height: 3px;
    margin-top: 7px;
    overflow: hidden;
    background: #e1e8f2;
    border-radius: 3px;
}

body.page-register .password-strength .bar {
    height: 100%;
    width: 0;
    background: #777;
    transition: width .2s ease;
}

body.page-register .password-strength.weak .bar { width: 33%; background: #a33b36; }
body.page-register .password-strength.medium .bar { width: 66%; background: #8a6a2d; }
body.page-register .password-strength.strong .bar { width: 100%; background: #48725d; }

body.page-register .email-code-row {
    display: none;
    margin-top: 8px;
    align-items: stretch;
    gap: 8px;
}

body.page-register .send-email-code-btn,
body.page-register .register-btn {
    min-height: 44px;
    color: #fff;
    background: #202020;
    background-image: none;
    border: 1px solid #202020;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 650;
}

body.page-register .send-email-code-btn {
    min-width: 116px;
    padding: 10px 14px;
    white-space: nowrap;
}

body.page-register .register-btn {
    width: 100%;
    min-height: 47px;
    margin-top: 4px;
    font-size: 15px;
}

body.page-register :is(.send-email-code-btn, .register-btn):hover:not(:disabled) {
    background: #000;
    border-color: #000;
}

body.page-register :is(.send-email-code-btn, .register-btn):disabled {
    cursor: not-allowed;
    opacity: .48;
}

body.page-register .login-link {
    margin-top: 20px;
    color: #777;
    font-size: 13px;
    text-align: center;
}

body.page-register .login-link a {
    color: #202020;
    font-weight: 650;
    text-underline-offset: 3px;
}

/* JavaScript 生成的轻量弹窗也使用外部样式 */
body:is(.page-dashboard, .page-login) .pwa-install-prompt {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 10000;
    width: min(440px, calc(100% - 28px));
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
    box-shadow: 0 14px 40px rgba(20, 20, 20, .14);
    transform: translateX(-50%);
}

body:is(.page-dashboard, .page-login) .pwa-prompt-content,
body:is(.page-dashboard, .page-login) .pwa-prompt-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

body:is(.page-dashboard, .page-login) .pwa-prompt-content {
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 13px;
    color: #203853;
}

body:is(.page-dashboard, .page-login) .pwa-prompt-buttons button {
    min-height: 40px;
    padding: 5px 11px;
    color: #fff;
    background: #087ff5;
    border: 1px solid #087ff5;
    border-radius: 6px;
    cursor: pointer;
}

body:is(.page-dashboard, .page-login) .pwa-prompt-buttons button:last-child {
    color: #444;
    background: #f1f1ef;
    border-color: #e1e8f2;
}

.pwa-install-entry {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 12px;
    color: #2673b0;
    background: #eef6ff;
    border: 1px solid #d2e5fc;
    border-radius: 11px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.pwa-install-entry[hidden], .pwa-install-address[hidden] { display: none !important; }
.pwa-install-entry svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pwa-login-entry { margin-top: 18px; }

.pwa-install-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(440px, calc(100% - 28px));
    max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    padding: 22px;
    color: #203853;
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(22, 45, 75, .2);
}

.pwa-install-dialog::backdrop { background: rgba(22, 36, 56, .45); }
.pwa-install-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pwa-install-heading h2 { margin: 0; font-size: 20px; }
.pwa-dialog-close { width: 40px; height: 40px; flex: 0 0 40px; color: #60738a; background: #f5f8fc; border: 0; border-radius: 10px; font-size: 24px; cursor: pointer; }
.pwa-install-dialog p { margin: 12px 0; font-size: 13px; line-height: 1.7; color: #708099; }
.pwa-install-steps { margin: 20px 0; padding-left: 22px; font-size: 14px; line-height: 1.8; }
.pwa-install-steps li + li { margin-top: 12px; }
.pwa-install-address { display: grid; gap: 8px; padding: 12px; background: #f5f8fc; border-radius: 10px; }
.pwa-install-address label, .pwa-install-address span { font-size: 12px; overflow-wrap: anywhere; }
.pwa-install-address input { width: 100%; min-width: 0; padding: 10px; border: 1px solid #dce7f3; border-radius: 8px; font-size: 13px; }
.pwa-install-address button, .pwa-dialog-done { min-height: 44px; padding: 10px 14px; color: #fff; background: #087ff5; border: 0; border-radius: 9px; font: inherit; font-size: 14px; cursor: pointer; }
.pwa-dialog-done { width: 100%; margin-top: 8px; }
.pwa-install-entry:focus-visible, .pwa-install-dialog button:focus-visible { outline: 3px solid #b5d8ff; outline-offset: 2px; }

body.page-dashboard .session-expired-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .58);
}

body.page-dashboard .session-expired-content {
    width: min(calc(100% - 32px), 340px);
    padding: 34px;
    color: #202020;
    background: #fff;
    border: 1px solid #ddd9d4;
    border-radius: 15px;
    box-shadow: 0 24px 70px rgba(20, 20, 20, .18);
    text-align: center;
}

body.page-dashboard .session-expired-content h3 {
    margin: 0 0 10px;
    color: #202020;
}

body.page-dashboard .session-expired-content p {
    margin: 0 0 22px;
    color: #666;
}

body.page-dashboard .session-expired-content button {
    min-height: 42px;
    padding: 9px 25px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    html:has(body.page-dashboard),
    body.page-dashboard {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.page-dashboard .main-content,
    body.page-dashboard .content-section,
    body.page-dashboard .dashboard-hero,
    body.page-dashboard .hero-content-main,
    body.page-dashboard .stats-grid-modern,
    body.page-dashboard .subscription-lines-container,
    body.page-dashboard .invite-banner-modern {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.page-dashboard .hero-greeting,
    body.page-dashboard .greeting-text,
    body.page-dashboard .hero-actions,
    body.page-dashboard .stat-card-modern,
    body.page-dashboard .stat-card-inner,
    body.page-dashboard .stat-info {
        min-width: 0;
    }

    body.page-dashboard .hero-actions {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard .hero-search-btn {
        min-width: 0 !important;
        padding-inline: 8px;
        white-space: nowrap;
    }

    body.page-dashboard .stats-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }



    body.page-register .register-wrapper {
        display: block;

        border: 0;

        box-shadow: none;
    }

    body.page-register .register-banner {

        border-right: 0;
        border-bottom: 1px solid #e1e8f2;
    }

    body.page-register .banner-logo {
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
    }

    body.page-register .banner-title {
        font-size: 21px;
    }

    body.page-register .banner-features {
        display: none;
    }



    body.page-dashboard .telegram-bind-dialog {
        width: min(100%, 600px);
    }

    body.page-dashboard .telegram-bind-dialog .bind-steps-horizontal {
        flex-direction: column;
    }

    body.page-dashboard .telegram-bind-dialog .step-divider-horizontal {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    body.page-forgot .header {
        width: calc(100% - 24px);
    }

    body.page-forgot .main-content {
        width: 100%;
        padding: 18px 12px 36px;
        align-items: flex-start;
    }

    body.page-forgot .login-container {
        padding: 24px 18px;
    }

    body.page-forgot .reset-method-btn {
        font-size: 12px;
    }

    body.page-register .email-code-row {
        flex-direction: column;
    }

    body.page-register .send-email-code-btn {
        width: 100%;
    }

    body.page-dashboard :is(.emby-bind-overlay, .telegram-bind-overlay, .unbind-overlay) {
        padding: 0;
        align-items: flex-end;
    }

    body.page-dashboard :is(.emby-bind-dialog, .telegram-bind-dialog, .unbind-dialog) {
        width: 100%;
        max-height: 90vh;
        padding: 22px 17px;
        border-radius: 16px 16px 0 0;
    }

    body.page-dashboard .telegram-bind-dialog {
        padding: 0;
    }
}

/* UI6：跨平台单色线性图标，替代系统彩色 Emoji。 */
.ui-glyph {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: visible;
    vertical-align: -0.14em;
    margin-inline: 0.04em 0.22em;
    color: currentColor;
    fill: none;
    stroke: currentColor;
}

.ui-glyph * {
    vector-effect: non-scaling-stroke;
}

:is(.toast-icon, .global-confirm-icon) > .ui-glyph,
:is(.feature-icon, .badge-icon, .input-icon, .icon, .stat-icon, .detail-icon, .empty-icon, .rule-icon, .btn-icon, .warning-icon, .bot-icon, .guide-icon, .guide-option-icon, .redeem-card-icon) > .ui-glyph:only-child {
    width: 1em;
    height: 1em;
    margin: 0;
}

button > .ui-glyph:first-child,
a > .ui-glyph:first-child {
    margin-inline: 0 0.38em;
}

/* UI7：统一提示弹窗、确认框和文字层级。 */
.ui-toast {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    z-index: 30000;
    display: grid;
    width: min(calc(100vw - 40px), 410px);
    min-height: 76px;
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;
    padding: 13px 12px 13px 14px;
    overflow: hidden;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(31, 28, 24, 0.16);
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.ui-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ui-toast .toast-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #202020;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
}

.ui-toast.success .toast-icon { color: #35624c; background: #f1f6f2; border-color: #dce9df; }
.ui-toast.error .toast-icon { color: #9c3f39; background: #fbf3f2; border-color: #efdcd9; }
.ui-toast.warning .toast-icon { color: #7b5a23; background: #faf6ed; border-color: #ece1c9; }

.ui-toast .toast-icon .ui-glyph {
    width: 19px;
    height: 19px;
    margin: 0;
}

.ui-toast .toast-content {
    min-width: 0;
    padding: 1px 0;
}

.ui-toast .toast-title {
    margin: 0 0 3px;
    overflow-wrap: anywhere;
    color: #202020;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.ui-toast .toast-message {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
    color: #6d809d;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 430;
    line-height: 1.55;
    opacity: 1;
    transform: none;
}

.ui-toast .toast-close {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    align-self: start;
    padding: 0;
    color: #6d809d;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ui-toast .toast-close:hover {
    color: #202020;
    background: #f1f5fa;
}

.ui-toast .toast-close .ui-glyph {
    width: 15px;
    height: 15px;
    margin: 0;
}

.ui-toast .toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #282828;
    transform-origin: left;
    animation: ui-toast-progress 4.2s linear forwards;
    opacity: 0.72;
}

.ui-toast.success .toast-progress { background: #48725d; }
.ui-toast.error .toast-progress { background: #a74640; }
.ui-toast.warning .toast-progress { background: #87652d; }

@keyframes ui-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.global-confirm-overlay {
    padding: 20px;
    background: rgba(27, 25, 23, 0.48);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.global-confirm-dialog {
    width: min(100%, 440px);
    max-width: 440px;
    padding: 0;
    overflow: hidden;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(27, 24, 21, 0.2);
    text-align: left;
}

.global-confirm-heading,
body.page-dashboard .dialog-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 21px 22px 17px;
}

.global-confirm-icon,
body.page-dashboard .dialog-heading > .icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #272727;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
    font-size: 20px;
}

.global-confirm-dialog.success .global-confirm-icon { color: #35624c; background: #f1f6f2; border-color: #dce9df; }
.global-confirm-dialog.danger .global-confirm-icon { color: #9c3f39; background: #fbf3f2; border-color: #efdcd9; }
.global-confirm-dialog.warning .global-confirm-icon { color: #7b5a23; background: #faf6ed; border-color: #ece1c9; }

.global-confirm-icon .ui-glyph,
body.page-dashboard .dialog-heading > .icon .ui-glyph {
    width: 20px;
    height: 20px;
    margin: 0;
}

.global-confirm-copy,
body.page-dashboard .dialog-heading-copy {
    min-width: 0;
}

.global-confirm-kicker,
body.page-dashboard .dialog-kicker {
    display: block;
    margin-bottom: 3px;
    color: #6d809d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.13em;
}

.global-confirm-title,
body.page-dashboard .dialog-heading h3 {
    margin: 0;
    color: #202020;
    font-size: 17px;
    font-weight: 740;
    line-height: 1.35;
    text-align: left;
}

.global-confirm-body {
    padding: 0 22px 22px;
}

.global-confirm-message {
    margin: 0;
    overflow-wrap: anywhere;
    color: #34445d;
    font-size: 13px;
    line-height: 1.72;
    text-align: left;
}

.global-prompt-input {
    width: 100%;
    min-height: 44px;
    margin: 14px 0 0;
    padding: 10px 12px;
    color: #202020;
    background: #fff;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    outline: none;
    font-size: 14px;
}

.global-prompt-input:focus {
    border-color: #34445d;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.08);
}

.global-confirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
    padding: 13px 16px;
    background: #f7f9fd;
    border-top: 1px solid #e1e8f2;
}

.global-confirm-btn {
    min-width: 88px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 680;
}

.global-confirm-btn.cancel {
    color: #4e4a46;
    background: #fff;
}

.global-confirm-btn.cancel:hover {
    color: #202020;
    background: #f2f0ed;
    border-color: #beb8b1;
}

.global-confirm-btn.confirm,
.global-confirm-btn.confirm.info,
.global-confirm-btn.confirm.warning,
.global-confirm-btn.confirm.success {
    color: #fff;
    background: #202020;
    border-color: #202020;
}

.global-confirm-btn.confirm:hover,
.global-confirm-btn.confirm.info:hover,
.global-confirm-btn.confirm.warning:hover,
.global-confirm-btn.confirm.success:hover {
    background: #000;
    border-color: #000;
}

.global-confirm-btn.confirm.danger {
    color: #fff;
    background: #993d38;
    border-color: #993d38;
}

.global-confirm-btn.confirm.danger:hover {
    background: #7f302c;
    border-color: #7f302c;
}

.global-captcha-dialog {
    max-width: 380px;
}

.captcha-frame {
    display: flex;
    min-height: 70px;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
}

.captcha-loading {
    color: #6d809d;
    font-size: 12px;
}

.captcha-img {
    display: none;
    width: auto;
    height: 60px;
    cursor: pointer;
}

.captcha-tools {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.captcha-tool-btn {
    min-height: 30px;
    padding: 5px 10px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
}

.captcha-retry-btn { display: none; }

.captcha-code-input {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.45em;
}

body.page-dashboard :is(.confirm-overlay, .announcement-overlay, .modal-overlay) {
    background: rgba(27, 25, 23, 0.48);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) {
    padding: 0 !important;
    overflow: hidden;
    color: #202020;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(27, 24, 21, 0.2) !important;
    text-align: left;
}

body.page-dashboard .confirm-dialog:not(:has(.dialog-heading)) {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
}

body.page-dashboard .confirm-dialog:not(:has(.dialog-heading)) > .icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    grid-column: 1;
    align-items: center;
    justify-content: center;
    margin: 21px 0 0 22px;
    color: #272727;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
    font-size: 20px;
}

body.page-dashboard .confirm-dialog:not(:has(.dialog-heading)) > h3 {
    grid-column: 2;
    align-self: center;
    margin: 21px 22px 0 14px;
    color: #202020;
    font-size: 17px;
    font-weight: 740;
    line-height: 1.35;
    text-align: left;
}

body.page-dashboard .confirm-dialog:not(:has(.dialog-heading)) > :not(.icon):not(h3):not(.buttons) {
    grid-column: 1 / -1;
    margin: 18px 22px 0;
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) > .buttons {
    display: flex;
    width: auto;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 9px;
    margin: 20px 0 0;
    padding: 13px 16px;
    background: #f7f9fd;
    border-top: 1px solid #e1e8f2;
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) > .buttons button {
    width: auto;
    min-width: 88px;
    min-height: 40px;
    margin: 0;
    padding: 9px 16px;
    border-radius: 9px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 680;
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) .btn-cancel {
    color: #4e4a46 !important;
    background: #fff !important;
    border: 1px solid #d5d0ca !important;
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) :is(.btn-confirm, .buttons button:not(.btn-cancel)) {
    color: #fff !important;
    background: #202020 !important;
    background-image: none !important;
    border: 1px solid #202020 !important;
}

body.page-dashboard :is(.confirm-dialog, .announcement-dialog) :is(.btn-confirm, .buttons button:not(.btn-cancel)):hover {
    background: #000 !important;
    border-color: #000 !important;
}

body.page-dashboard .dialog-heading + .movie-info,
body.page-dashboard .result-dialog .movie-info {
    margin: 0 22px;
    padding: 14px;
    color: #34445d;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
    text-align: left;
}

body.page-dashboard .result-message {
    color: #34445d;
    font-size: 13px;
    line-height: 1.65;
    text-align: left;
}

body.page-dashboard .announcement-dialog > .content {
    margin: 0 22px;
    padding: 15px;
    color: #34445d;
    background: #f1f5fa;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

@media (max-width: 560px) {
    .ui-toast {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: calc(100vw - 24px);
    }

    .global-confirm-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .global-confirm-dialog,
    body.page-dashboard :is(.confirm-dialog, .announcement-dialog) {
        width: 100% !important;
        max-width: none !important;
        max-height: min(90vh, 760px);
        overflow-y: auto;
        border-width: 1px 0 0 !important;
        border-radius: 17px 17px 0 0 !important;
    }

    .global-confirm-heading,
    body.page-dashboard .dialog-heading {
        padding: 19px 17px 15px;
    }

    .global-confirm-body {
        padding: 0 17px 20px;
    }

    .global-confirm-buttons,
    body.page-dashboard :is(.confirm-dialog, .announcement-dialog) > .buttons {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    }

    .global-confirm-btn,
    body.page-dashboard :is(.confirm-dialog, .announcement-dialog) > .buttons button {
        flex: 1;
    }
}



















@media (prefers-reduced-motion: reduce) {
    .ui-toast,
    .global-confirm-dialog {
        transition-duration: 0.01ms !important;
    }

    .ui-toast .toast-progress {
        animation: none;
    }
}

/* 用户端右上角操作通知，与浅蓝色控制台视觉保持一致。 */
body.page-dashboard .toast.ui-toast {
    --toast-accent: #0b7ff3;
    --toast-soft: #eaf5ff;
    --toast-icon-border: #cfe5fa;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    bottom: auto;
    left: auto;
    grid-template-columns: 38px minmax(0, 1fr) 28px;
    width: min(calc(100vw - 36px), 390px);
    max-width: 390px;
    min-height: 70px;
    gap: 11px;
    align-items: center;
    padding: 12px 11px 12px 13px;
    overflow: hidden;
    border: 1px solid #dbe5f0;
    border-left: 3px solid var(--toast-accent);
    border-radius: 8px;
    opacity: 0;
    transform: translate3d(18px, -4px, 0) scale(.98);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2, .72, .2, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.page-dashboard .toast.ui-toast.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

body.page-dashboard .toast.ui-toast.success {
    --toast-accent: #07a67c;
    --toast-soft: #e8f8f3;
    --toast-icon-border: #c9ebdf;
}

body.page-dashboard .toast.ui-toast.error {
    --toast-accent: #e44747;
    --toast-soft: #fff0f0;
    --toast-icon-border: #f3d0d0;
}

body.page-dashboard .toast.ui-toast.warning {
    --toast-accent: #e78a00;
    --toast-soft: #fff4e2;
    --toast-icon-border: #f1ddb9;
}

body.page-dashboard .toast.ui-toast .toast-icon {
    position: static;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: var(--toast-accent);
    background: var(--toast-soft);
    border: 1px solid var(--toast-icon-border);
    border-radius: 8px;
    transform: none;
}

body.page-dashboard .toast.ui-toast .toast-icon .ui-glyph {
    width: 18px;
    height: 18px;
    margin: 0;
    stroke-width: 2;
}

body.page-dashboard .toast.ui-toast .toast-content {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body.page-dashboard .toast.ui-toast .toast-title {
    margin: 0 0 2px;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
}

body.page-dashboard .toast.ui-toast .toast-message {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.5;
    opacity: 1;
    transform: none;
    white-space: normal;
}

body.page-dashboard .toast.ui-toast .toast-close {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-self: start;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #7b8ca4;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

body.page-dashboard .toast.ui-toast .toast-close:hover {
    color: #0c1628;
    background: #edf4fb;
}

body.page-dashboard .toast.ui-toast .toast-close:focus-visible {
    outline: 2px solid rgba(11, 127, 243, .32);
    outline-offset: 1px;
}

body.page-dashboard .toast.ui-toast .toast-close .ui-glyph {
    width: 14px;
    height: 14px;
    margin: 0;
}

body.page-dashboard .toast.ui-toast .toast-progress {
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--toast-accent);
    opacity: .8;
}

@media (max-width: 560px) {
    body.page-dashboard .toast.ui-toast {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: calc(100vw - 24px);
        max-width: none;
        min-height: 66px;
        grid-template-columns: 36px minmax(0, 1fr) 28px;
        gap: 10px;
        padding: 11px 10px 11px 12px;
    }

    body.page-dashboard .toast.ui-toast .toast-icon {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .toast.ui-toast {
        transition-duration: .01ms !important;
    }

    body.page-dashboard .toast.ui-toast .toast-progress {
        animation: none !important;
    }
}

/* 保证统一 Toast 不被历史页面选择器覆盖。 */
body .toast.ui-toast {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(calc(100vw - 40px), 410px);
    max-width: 410px;
    padding: 13px 12px 13px 14px;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-left: 1px solid #e1e8f2;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(31, 28, 24, 0.16);
}

body .toast.ui-toast .toast-icon {
    position: static;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    transform: none;
}

body .toast.ui-toast .toast-content {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 1px 0;
}

body .toast.ui-toast .toast-title {
    margin: 0 0 3px;
    color: #202020;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}

body .toast.ui-toast .toast-message {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    color: #6d809d;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.55;
    opacity: 1;
    transform: none;
}

@media (max-width: 560px) {
    body .toast.ui-toast {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        width: calc(100vw - 24px);
    }
}

/* UI7：创建账户相关界面始终以视口中心为视觉焦点。 */
body.page-register {
    display: grid;
    width: 100%;
    margin: 0;
    place-items: center;
}

body.page-register .register-wrapper {
    align-self: center;
}

body.page-dashboard #embyCreateOverlay {
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto;
}

body.page-dashboard #embyCreateOverlay .emby-bind-dialog {
    margin: auto;
}

@media (max-width: 480px) {
    body.page-dashboard #embyCreateOverlay {
        padding: 12px;
    }

    body.page-dashboard #embyCreateOverlay .emby-bind-dialog {
        width: min(100%, 480px);
        max-height: calc(100vh - 24px);
        border: 1px solid #e1e8f2 !important;
        border-radius: 16px;
    }
}

/* ============================================================
   UI8 内容架构：按“核心状态 → 常用操作 → 详细信息”重排功能层级
   ============================================================ */
body.page-dashboard .content-section {
    width: 100%;
    max-width: none;
}

body.page-dashboard .content-section > .section-header {
    padding: 0 0 16px;
    border-bottom: 1px solid #e1e8f2;
}



body.page-dashboard .content-section > .section-header p {
    max-width: 700px;




}

/* 统计数据合并为连续信息带，减少重复卡片边框。 */
body.page-dashboard :is(
    #section-home .stats-grid-modern,
    #section-search .stats-cards,
    #section-requests .request-stats,
    #section-playback .playback-stats-grid,
    #section-profile .stats-row,
    #section-profile .library-stats-grid,
    #section-subscription .subscription-details-grid,
    #section-invite .invite-stats .stats-grid
) {
    display: grid;
    gap: 1px;
    overflow: hidden;
    padding: 0;
    background: #e1e8f2;
    border: 1px solid #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}

body.page-dashboard #section-home .stats-grid-modern,
body.page-dashboard #section-search .stats-cards,
body.page-dashboard #section-subscription .subscription-details-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-dashboard #section-requests .request-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.page-dashboard :is(
    #section-playback .playback-stats-grid,
    #section-profile .stats-row,
    #section-profile .library-stats-grid
) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-dashboard #section-invite .invite-stats .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-dashboard :is(
    #section-home .stat-card-modern,
    #section-search .stats-cards .stat-card,
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile .stat-item-v2,
    #section-profile .library-stat-item,
    #section-subscription .detail-card,
    #section-invite .invite-stats .stat-item
) {
    min-width: 0;
    min-height: 96px;
    margin: 0;
    padding: 17px 18px;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none;
}

body.page-dashboard :is(
    #section-home .stat-card-modern,
    #section-search .stats-cards .stat-card,
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile .stat-item-v2,
    #section-profile .library-stat-item,
    #section-subscription .detail-card,
    #section-invite .invite-stats .stat-item
):hover {
    background: #f7f9fd !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 首页：欢迎与关键状态保持紧凑，账号、线路、签到组成一个功能面板。 */
body.page-dashboard #section-home .dashboard-hero {

    margin-bottom: 14px;

    background: #f7f9fd !important;



}

body.page-dashboard #section-home .dashboard-kpi-refined {
    margin-bottom: 24px;
}

body.page-dashboard #section-home .dashboard-subscription-lines {
    margin-bottom: 18px;
}



body.page-dashboard #section-home .subscription-lines-container {
    display: grid;

    align-items: stretch;
    gap: 1px;
    overflow: hidden;
    padding: 0;
    background: #e1e8f2;
    border: 1px solid #e1e8f2;
    border-radius: 16px;
    box-shadow: none;
}

body.page-dashboard #section-home :is(.subscription-status-mini, .server-lines-compact, .checkin-mini-card) {
    width: auto;
    min-width: 0;
    min-height: 168px;
    margin: 0;
    padding: 18px;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .invite-banner-modern {



    background: #f1f5fa !important;



}

body.page-dashboard #section-home .checkin-exchange-section {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 14px;
    align-items: start;
}

body.page-dashboard #section-home .checkin-exchange-section.is-hidden-initially {
    display: none;
}

body.page-dashboard #section-home .checkin-exchange-section > :is(.exchange-section, .exchange-records) {
    height: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
    box-shadow: none;
}

/* 播放页：实时信息优先，设备次之，历史记录使用完整宽度。 */
body.page-dashboard #section-playback .playback-main-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

body.page-dashboard #section-playback .playback-section-live { grid-column: span 7; }
body.page-dashboard #section-playback .playback-section-device { grid-column: span 5; }
body.page-dashboard #section-playback .playback-section-history { grid-column: 1 / -1; }

body.page-dashboard #section-playback .playback-main-grid .playback-section {
    margin: 0;
    border-color: #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}

/* 个人页：左侧账户概览，右侧账户与安全管理。 */
body.page-dashboard #section-profile .profile-page-v2 {



    align-items: start;
}

body.page-dashboard #section-profile .profile-overview-column {

    top: 92px;



    align-content: start;
}

body.page-dashboard #section-profile :is(.user-profile-card, .stats-section-v2) {
    height: auto;
    margin: 0;
    border-color: #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}



body.page-dashboard #section-profile .user-profile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);


}

body.page-dashboard #section-profile .user-profile-actions {

    padding-top: 14px;




}



body.page-dashboard #section-profile .profile-management-area {



    align-content: start;
}

body.page-dashboard #section-profile .profile-management-header {






    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard #section-profile .profile-management-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #6d809d;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}





body.page-dashboard #section-profile .profile-security-note {



    background: #fff;




}

body.page-dashboard #section-profile .feature-cards-v2 {

    grid-column: auto;


    align-items: start;

}



body.page-dashboard #section-profile .feature-card-v2 {
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-color: #e1e8f2 !important;
    border-radius: 15px;
    box-shadow: none !important;
}





/* 订阅页：概览全宽，快捷操作与历史形成主次两栏。 */


body.page-dashboard #section-subscription :is(.subscription-hero-card, .subscription-details-grid, .retention-info-section) {
    grid-column: 1 / -1;
    margin: 0;
}





body.page-dashboard #section-subscription .subscription-history-section {
    min-width: 0;

    margin: 0;
    border-color: #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}

/* 购买页：套餐是主任务，提示与订单在下方分栏。 */
body.page-dashboard #section-purchase .redeem-card {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(300px, .9fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 15px;
    padding: 18px 20px;
    border-color: #e1e8f2 !important;
    border-radius: 15px;
    box-shadow: none;
}

body.page-dashboard #section-purchase .purchase-container {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 15px;
    align-items: start;
}

body.page-dashboard #section-purchase .plans-grid-new {
    grid-column: 1 / -1;
    margin: 0;
}

body.page-dashboard #section-purchase .plans-empty-state {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 150px;
    align-items: center;
    gap: 16px;
    padding: 24px;
    color: #0c1628;
    background: #fff;
    border: 1px dashed #e1e8f2;
    border-radius: 15px;
}

body.page-dashboard #section-purchase .plans-state-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #0c1628;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 11px;
}

body.page-dashboard #section-purchase .plans-state-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-purchase .plans-state-copy {
    min-width: 0;
}

body.page-dashboard #section-purchase .plans-state-copy h3 {
    margin: 0 0 5px;
    color: #202020;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}

body.page-dashboard #section-purchase .plans-state-copy p {
    margin: 0;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.6;
}

body.page-dashboard #section-purchase .plans-state-action {
    min-height: 40px;
    padding: 9px 15px;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-dashboard #section-purchase .plans-state-action:hover {
    color: #fff;
    background: #202020;
    border-color: #202020;
}

@media (max-width: 640px) {
    body.page-dashboard #section-purchase .plans-empty-state {
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 0;
        padding: 18px;
    }

    body.page-dashboard #section-purchase .plans-state-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

body.page-dashboard #section-purchase :is(.purchase-tips, .my-orders-section) {
    height: 100%;
    margin: 0;
    border-color: #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}

body.page-dashboard #section-purchase .purchase-tips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 10px 18px;
}

body.page-dashboard #section-purchase .purchase-tips .tip-item {
    justify-content: flex-start;
    padding: 13px 2px;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard #section-purchase .purchase-tips .tip-item:last-child { border-bottom: 0; }

/* 邀请页：分享与统计在左，规则和记录在右。 */
body.page-dashboard #section-invite .invite-container {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    gap: 15px;
    align-items: start;
}

body.page-dashboard #section-invite :is(.invite-code-card, .reward-rules, .invite-stats, .invite-records) {
    min-width: 0;
    margin: 0;
    border-color: #e1e8f2;
    border-radius: 15px;
    box-shadow: none;
}

body.page-dashboard #section-invite .invite-code-card { grid-column: 1; grid-row: 1; }
body.page-dashboard #section-invite .reward-rules { grid-column: 2; grid-row: 1; }
body.page-dashboard #section-invite .invite-stats { grid-column: 1; grid-row: 2; }
body.page-dashboard #section-invite .invite-records { grid-column: 2; grid-row: 2; }

body.page-dashboard #section-invite .rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

body.page-dashboard #section-invite .rule-item {
    min-height: 0;
    padding: 15px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e1e8f2;
    border-radius: 0;
}

body.page-dashboard #section-invite .rule-item:last-child { border-bottom: 0; }

/* 文档与支持：导航保持窄栏，工单提交和跟踪并排。 */
body.page-dashboard #section-docs .docs-container {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

body.page-dashboard #section-docs .docs-nav {
    position: sticky;
    top: 88px;
}

body.page-dashboard #section-support .support-container {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    gap: 15px;
    align-items: start;
}

body.page-dashboard #section-support .contact-cards {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

body.page-dashboard #section-support :is(.ticket-form-section, .my-tickets-section) {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    padding: 22px;
    border-radius: 15px;
    box-shadow: none;
}

body.page-dashboard #section-faq .faq-container {
    max-width: none;
}

@media (max-width: 1180px) {


    body.page-dashboard #section-home .server-lines-compact {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.page-dashboard #section-home .subscription-status-mini { grid-column: 1; grid-row: 2; }
    body.page-dashboard #section-home .checkin-mini-card { grid-column: 2; grid-row: 2; }

    body.page-dashboard #section-profile .profile-page-v2,
    body.page-dashboard #section-subscription .subscription-page-container,
    body.page-dashboard #section-purchase .purchase-container,
    body.page-dashboard #section-invite .invite-container,
    body.page-dashboard #section-support .support-container {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-profile .profile-overview-column {
        position: static;

        align-items: stretch;
    }

    body.page-dashboard #section-profile :is(.user-profile-card, .stats-section-v2) {
        height: 100%;
    }

    body.page-dashboard #section-invite :is(.invite-code-card, .reward-rules, .invite-stats, .invite-records),
    body.page-dashboard #section-subscription :is(.subscription-hero-card, .subscription-details-grid, .retention-info-section),
    body.page-dashboard #section-support .contact-cards {
        grid-column: 1;
        grid-row: auto;
    }

    body.page-dashboard #section-invite .invite-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-invite .invite-code-card,
    body.page-dashboard #section-invite .invite-stats { grid-column: 1; }
    body.page-dashboard #section-invite .reward-rules,
    body.page-dashboard #section-invite .invite-records { grid-column: 2; }
    body.page-dashboard #section-invite .invite-code-card,
    body.page-dashboard #section-invite .reward-rules { grid-row: 1; }
    body.page-dashboard #section-invite .invite-stats,
    body.page-dashboard #section-invite .invite-records { grid-row: 2; }

    body.page-dashboard #section-support .support-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-support .contact-cards { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    body.page-dashboard .content-section > .section-header {


        flex-direction: column;
        margin-bottom: 17px;
        padding-bottom: 13px;
    }

    body.page-dashboard #section-home .stats-grid-modern,
    body.page-dashboard #section-search .stats-cards,
    body.page-dashboard #section-requests .request-stats,
    body.page-dashboard #section-subscription .subscription-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-playback .playback-main-grid,
    body.page-dashboard #section-profile .profile-page-v2,
    body.page-dashboard #section-profile .feature-cards-v2,
    body.page-dashboard #section-invite .invite-container,
    body.page-dashboard #section-support .support-container {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-profile .profile-overview-column {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-profile :is(.user-profile-card, .stats-section-v2) {
        height: auto;
    }

    body.page-dashboard #section-profile .profile-management-header {
        align-items: flex-start;
    }

    body.page-dashboard #section-playback .playback-main-grid > .playback-section,
    body.page-dashboard #section-profile .feature-cards-v2,
    body.page-dashboard #section-invite :is(.invite-code-card, .reward-rules, .invite-stats, .invite-records),
    body.page-dashboard #section-support :is(.contact-cards, .ticket-form-section, .my-tickets-section) {
        grid-column: 1;
        grid-row: auto;
    }

    body.page-dashboard #section-support .contact-cards,
    body.page-dashboard #section-profile .feature-cards-v2 {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-purchase .redeem-card {
        grid-template-columns: auto 1fr;
    }

    body.page-dashboard #section-purchase .redeem-card-form {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.page-dashboard #section-docs .docs-container {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-docs .docs-nav {
        position: static;
    }
}

@media (max-width: 560px) {
    body.page-dashboard :is(
        #section-home .stats-grid-modern,
        #section-search .stats-cards,
        #section-requests .request-stats,
        #section-subscription .subscription-details-grid,
        #section-invite .invite-stats .stats-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 13px;
    }

    body.page-dashboard :is(
        #section-playback .playback-stats-grid,
        #section-profile .stats-row,
        #section-profile .library-stats-grid
    ) {
        grid-template-columns: 1fr;
        border-radius: 13px;
    }

    body.page-dashboard #section-home .subscription-lines-container,
    body.page-dashboard #section-home .checkin-exchange-section,
    body.page-dashboard #section-purchase .purchase-container {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-home :is(.subscription-status-mini, .server-lines-compact, .checkin-mini-card) {
        grid-column: 1;
        grid-row: auto;
        min-height: 0;
    }

    body.page-dashboard #section-purchase .redeem-card {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    body.page-dashboard #section-purchase .redeem-card-icon {
        display: none;
    }

    body.page-dashboard #section-support :is(.ticket-form-section, .my-tickets-section) {
        padding: 18px;
    }

    body.page-dashboard #section-profile .profile-management-header {
        flex-direction: column;
    }



    body.page-dashboard #section-profile .user-profile-actions {
        flex-direction: column;
        align-items: stretch;
    }




}

@media (max-width: 380px) {
    body.page-dashboard :is(
        #section-home .stats-grid-modern,
        #section-search .stats-cards,
        #section-subscription .subscription-details-grid,
        #section-invite .invite-stats .stats-grid
    ) {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   UI9 卡片操作区：允许收缩、换行，避免按钮越出卡片边界
   ============================================================ */
body.page-dashboard [class*="card"],
body.page-dashboard :is(
    .dashboard-hero,
    .subscription-lines-container,
    .checkin-exchange-section,
    .playback-section,
    .feature-cards-v2,
    .subscription-page-container,
    .purchase-container,
    .invite-container,
    .support-container
) {
    min-width: 0;
    max-width: 100%;
}

body.page-dashboard [class*="card"] > *,
body.page-dashboard :is(
    .hero-greeting,
    .invite-banner-content,
    .account-item,
    .line-card-compact,
    .order-item,
    .ticket-item,
    .history-card-header,
    .history-card-footer
) > * {
    min-width: 0;
}

/* 卡片标题和操作区可以分行，长标题不再把按钮推出卡片。 */
body.page-dashboard [class*="card"] :is(
    .card-header,
    [class$="-card-header"],
    [class*="-card-header "],
    .records-header,
    .playback-section-header,
    .feature-card-header-v2
) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

body.page-dashboard :is(
    .hero-actions,
    .title-actions,
    .playback-header-tools,
    .user-profile-actions,
    .btn-group-v2,
    .subscription-action-group,
    .order-actions,
    .order-detail-actions,
    .device-actions,
    .line-actions-compact,
    .ticket-actions,
    .delete-confirm-buttons,
    .dialog-btns,
    .dialog-footer,
    .buttons,
    .import-dialog-buttons,
    .import-dialog-footer,
    .pwa-prompt-buttons,
    .announcements-controls,
    .bot-actions-grid,
    .captcha-tools,
    .search-filters,
    .search-item-actions,
    .pagination-controls
) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

body.page-dashboard :is(
    .hero-actions,
    .playback-header-tools,
    .user-profile-actions,
    .btn-group-v2,
    .subscription-action-group,
    .order-actions,
    .order-detail-actions,
    .device-actions,
    .line-actions-compact,
    .ticket-actions,
    .delete-confirm-buttons,
    .dialog-btns,
    .dialog-footer,
    .buttons,
    .import-dialog-buttons,
    .import-dialog-footer,
    .pwa-prompt-buttons,
    .announcements-controls,
    .bot-actions-grid,
    .captcha-tools,
    .search-filters,
    .search-item-actions
) > :is(button, a) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.page-dashboard [class*="card"] :is(button, a[class*="btn"]) {
    max-width: 100%;
}

/* 输入框和相邻按钮使用可收缩网格，输入内容再长也不会撑开卡片。 */
body.page-dashboard :is(
    .redeem-card-form,
    .email-code-actions,
    .search-box,
    .link-box,
    .invite-code-content,
    .invite-code-display,
    .invite-link-display,
    .bind-code-display,
    .force-bind-code-display,
    .verify-row
),
body.page-register .email-code-row,
body.page-forgot .code-input-row {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
}

body.page-dashboard :is(
    .redeem-card-form,
    .email-code-actions,
    .search-box,
    .link-box,
    .invite-code-content,
    .invite-code-display,
    .invite-link-display,
    .bind-code-display,
    .force-bind-code-display,
    .verify-row
) > :is(input, .form-input, .input-group-v2),
body.page-register .email-code-row > input,
body.page-forgot .code-input-row > input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.page-dashboard :is(
    .redeem-card-form,
    .email-code-actions,
    .search-box,
    .link-box,
    .invite-code-content,
    .invite-code-display,
    .invite-link-display,
    .bind-code-display,
    .force-bind-code-display,
    .verify-row
) > button,
body.page-register .email-code-row > button,
body.page-forgot .code-input-row > button {
    min-width: 0;
    max-width: 100%;
}

/* 普通认证页同样使用安全盒模型，避免表单卡片内的操作按钮外溢。 */
body:is(.page-login, .page-register) :is(
    .login-container,
    .login-card,
    .register-wrapper,
    .register-form-section,
    .form-group,
    .verify-code-group
) {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 640px) {
    body.page-dashboard :is(
        .hero-actions,
        .playback-header-tools,
        .user-profile-actions,
        .btn-group-v2,
        .order-actions,
        .order-detail-actions,
        .device-actions,
        .ticket-actions,
        .delete-confirm-buttons,
        .dialog-btns,
        .dialog-footer,
        .buttons,
        .import-dialog-footer,
        .pwa-prompt-buttons
    ) {
        width: 100%;
    }

    body.page-dashboard :is(
        .hero-actions,
        .user-profile-actions,
        .btn-group-v2,
        .order-actions,
        .order-detail-actions,
        .device-actions,
        .ticket-actions,
        .delete-confirm-buttons,
        .dialog-btns,
        .dialog-footer,
        .buttons,
        .import-dialog-footer,
        .pwa-prompt-buttons
    ) > :is(button, a) {
        flex: 1 1 132px;
    }
}

@media (max-width: 440px) {
    body.page-dashboard :is(
        .redeem-card-form,
        .email-code-actions,
        .search-box,
        .link-box,
        .invite-code-content,
        .invite-code-display,
        .invite-link-display,
        .bind-code-display,
        .force-bind-code-display,
        .verify-row
    ),
    body.page-register .email-code-row,
    body.page-forgot .code-input-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard :is(
        .redeem-card-form,
        .email-code-actions,
        .search-box,
        .link-box,
        .invite-code-content,
        .invite-code-display,
        .invite-link-display,
        .bind-code-display,
        .force-bind-code-display,
        .verify-row
    ) > button,
    body.page-register .email-code-row > button,
    body.page-forgot .code-input-row > button {
        width: 100%;
    }
}

/* ============================================================
   UI10 首页邀请卡片：内容与奖励操作形成清晰的左右分区
   ============================================================ */
body.page-dashboard #section-home .invite-banner-modern {



    background: #f7f9fd !important;


}

body.page-dashboard #section-home .invite-content-wrapper {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

body.page-dashboard #section-home .invite-main-content {
    display: grid;
    min-width: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

body.page-dashboard #section-home .invite-icon-big {
    width: 44px;
    height: 44px;
    margin: 0;
    flex: none;
    background: #fff;
    border-color: #e1e8f2;

}

body.page-dashboard #section-home .invite-info {
    min-width: 0;
    color: #202020;
    text-align: left;
}

body.page-dashboard #section-home .invite-info h3 {
    margin: 0 0 4px;
    color: #202020;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.35;
}

body.page-dashboard #section-home .invite-info p {
    max-width: 650px;
    margin: 0;
    color: #6d809d;
    font-size: 11px;
    line-height: 1.55;
}

body.page-dashboard #section-home .invite-reward-panel {
    display: grid;
    min-width: 0;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 18px;
    padding-left: 22px;
    border-left: 1px solid #e1e8f2;
}

body.page-dashboard #section-home .invite-reward-summary {
    display: grid;
    min-width: 128px;
    gap: 3px;
}

body.page-dashboard #section-home .invite-reward-label {
    color: #6d809d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard #section-home .invite-reward-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    white-space: nowrap;
}

body.page-dashboard #section-home .invite-reward-value strong {
    color: #202020;
    background: transparent;
    font-size: 20px;
    font-weight: 780;
    line-height: 1;
}

body.page-dashboard #section-home .invite-reward-value span {
    color: #34445d;
    font-size: 10px;
}

body.page-dashboard #section-home .invite-action-btn {
    display: inline-flex;
    width: auto;
    min-width: 112px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    color: #fff;
    background: #202020 !important;
    border: 1px solid #202020 !important;

    box-shadow: none;
    font-size: 12px;
    font-weight: 680;
}

body.page-dashboard #section-home .invite-action-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

body.page-dashboard #section-home .invite-action-btn:hover {
    background: #000 !important;
    border-color: #000 !important;
    box-shadow: none;
    transform: translateY(-1px);
}

body.page-dashboard #section-subscription .sub-action-btn[aria-busy="true"] {
    cursor: wait;
    opacity: .62;
}

@media (max-width: 760px) {
    body.page-dashboard #section-home .invite-content-wrapper {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    body.page-dashboard #section-home .invite-reward-panel {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        padding: 13px 0 0;
        border-top: 1px solid #e1e8f2;
        border-left: 0;
    }

    body.page-dashboard #section-home .invite-reward-summary {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-home .invite-banner-modern {
        padding: 15px;
    }

    body.page-dashboard #section-home .invite-main-content {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 11px;
    }

    body.page-dashboard #section-home .invite-icon-big {
        width: 40px;
        height: 40px;
    }

    body.page-dashboard #section-home .invite-reward-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .invite-action-btn {
        width: 100%;
    }
}

/* ============================================================
   UI11 账号与线路：隐藏签到时移除空网格列
   ============================================================ */
body.page-dashboard #section-home .subscription-lines-container {
    grid-template-columns: minmax(220px, .78fr) minmax(0, 2.17fr);
}



body.page-dashboard #section-home .checkin-mini-card[hidden],
body.page-dashboard #section-home .checkin-mini-card.is-hidden-initially {
    display: none !important;
}

body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .checkin-mini-card {
    display: flex;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-home .subscription-lines-container {
        grid-template-columns: minmax(220px, .78fr) minmax(0, 1.45fr);
    }

    body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) .subscription-status-mini {
        grid-column: 1;
        grid-row: 1;
    }

    body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) .server-lines-compact {
        grid-column: 2;
        grid-row: 1;
    }





    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .subscription-status-mini {
        grid-column: 1;
        grid-row: 2;
    }

    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .checkin-mini-card {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 560px) {
    body.page-dashboard #section-home .subscription-lines-container,
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .subscription-lines-container :is(
        .subscription-status-mini,
        .server-lines-compact,
        .checkin-mini-card
    ),
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card :is(
        .subscription-status-mini,
        .server-lines-compact,
        .checkin-mini-card
    ) {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ============================================================
   UI12 内容表面：主内容卡片统一纯白，暖灰仅保留给侧边栏
   ============================================================ */
body.page-dashboard .main-content :is(
    #section-home .dashboard-hero,
    #section-home .stat-card-modern,
    #section-home .subscription-status-mini,
    #section-home .status-badge-mini,
    #section-home .server-lines-compact,
    #section-home .checkin-mini-card,
    #section-home .invite-banner-modern,
    #section-home .exchange-section,
    #section-home .exchange-records,
    #section-home .exchange-record-item,
    .announcements-container,
    .announcement-item,
    .account-item,
    .server-line-compact,
    .trending-section,
    .request-item,
    .download-status-card,
    .empty-state,
    .loading-placeholder,
    .playback-stat-card,
    .playback-section,
    .device-card,
    .session-card,
    .history-card,
    .history-card-header,
    .history-card-body,
    .history-card-footer,
    #section-profile .user-profile-card,
    #section-profile .stats-section-v2,
    #section-profile .stat-item-v2,
    #section-profile .library-stats-card,
    #section-profile .library-stat-item,
    #section-profile .feature-card-v2,
    #section-profile .feature-card-header-v2,
    #section-profile .feature-card-content-v2,
    #section-profile .emby-bindtip,
    #section-profile .password-notice-v2,
    #section-profile .emby-info-row,
    #section-profile .emby-meta-item,
    #section-subscription .subscription-hero-card,
    #section-subscription .detail-card,
    #section-subscription .retention-info-section,
    #section-subscription .subscription-history-section,
    #section-subscription .history-empty,
    #section-purchase .redeem-card,
    #section-purchase .plan-card,
    #section-purchase .plan-card-new,
    #section-purchase .purchase-tips,
    #section-purchase .my-orders-section,
    #section-purchase .order-card,
    #section-purchase .order-item,
    #section-invite .invite-code-card,
    #section-invite .invite-link-section,
    #section-invite .reward-rules,
    #section-invite .invite-stats,
    #section-invite .invite-records,
    #section-invite .rule-item,
    #section-docs .docs-nav,
    #section-docs .docs-content,
    #section-docs .doc-section,
    #section-faq .faq-item,
    #section-faq .faq-question,
    #section-faq .faq-answer,
    #section-support .contact-card,
    #section-support .ticket-form-section,
    #section-support .my-tickets-section,
    #section-support .ticket-item,
    #section-activity-logs .activity-empty,
    #section-activity-logs .activity-log-card,
    .activity-item,
    .category-item,
    .invite-stat-item,
    .list-item,
    .rank-item,
    .record-item,
    .tip-item,
    .top-item,
    [class~="card"],
    [class$="-card"],
    [class*="-card "]
) {
    background: #fff !important;
    background-image: none !important;
}

/* 高优先级旧主题曾在 hover 时重新涂成暖灰，这里保持卡片始终为白色。 */
body.page-dashboard :is(
    #section-home .stat-card-modern,
    #section-home .server-line-compact,
    #section-search .stats-cards .stat-card,
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile .stat-item-v2,
    #section-profile .library-stat-item,
    #section-subscription .detail-card,
    #section-invite .invite-stats .stat-item,
    #section-activity-logs .activity-log-card
):hover {
    background: #fff !important;
    background-image: none !important;
}

/* 登录、注册、找回密码及创建账户页面中的表单卡片同样使用纯白表面。 */
body:is(.page-login, .page-register, .page-forgot) :is(
    .login-container,
    .register-wrapper,
    .register-form-section
) {
    background: #fff !important;
    background-image: none !important;
}

/* UI14：Telegram 绑定弹窗。 */
body.page-dashboard .telegram-bind-overlay {
    padding: 24px;
    background: rgba(20, 20, 20, .62);
    backdrop-filter: blur(7px);
}

body.page-dashboard .telegram-bind-dialog {
    width: min(100%, 720px);
    max-width: 720px;
    max-height: min(92vh, 860px);
    padding: 0;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(17, 17, 17, .24) !important;
    animation: telegramDialogEnter .22s ease-out;
}

@keyframes telegramDialogEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.page-dashboard .telegram-dialog-header {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard .telegram-dialog-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

body.page-dashboard .telegram-dialog-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 13px;
}

body.page-dashboard .telegram-dialog-icon svg,
body.page-dashboard .telegram-bind-dialog button svg,
body.page-dashboard .telegram-bind-dialog a svg,
body.page-dashboard .telegram-feature-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard .telegram-dialog-eyebrow,
body.page-dashboard .telegram-section-kicker {
    display: block;
    margin-bottom: 3px;
    color: #6d809d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard .telegram-dialog-heading h3 {
    margin: 0;
    color: #202020;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.25;
}

body.page-dashboard .telegram-dialog-heading p {
    margin: 4px 0 0;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.45;
}

body.page-dashboard .telegram-bind-dialog .close-btn {
    display: inline-flex;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #6d809d !important;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 10px;
    line-height: 1;
}

body.page-dashboard .telegram-bind-dialog .close-btn:hover {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
}

body.page-dashboard .telegram-bind-dialog .close-btn svg {
    width: 18px;
    height: 18px;
}

body.page-dashboard .telegram-bind-dialog .telegram-dialog-content {
    display: grid;
    gap: 14px;
    max-height: calc(min(92vh, 860px) - 96px);
    padding: 20px 24px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e1e8f2 transparent;
}

body.page-dashboard .telegram-features,
body.page-dashboard .telegram-step-card,
body.page-dashboard .telegram-bind-dialog .bind-code-display,
body.page-dashboard .telegram-bind-dialog .bind-status-hint {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e1e8f2 !important;
    box-shadow: none !important;
}

body.page-dashboard .telegram-features {
    padding: 15px;
    border-radius: 14px;
}

body.page-dashboard .telegram-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

body.page-dashboard .telegram-section-heading h4,
body.page-dashboard .telegram-step-card h4,
body.page-dashboard .telegram-bind-dialog .code-header h4 {
    margin: 0;
    color: #202020;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.4;
}

body.page-dashboard .telegram-section-heading > p {
    margin: 0;
    color: #6d809d;
    font-size: 11px;
    white-space: nowrap;
}

body.page-dashboard .telegram-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.page-dashboard .telegram-feature-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

body.page-dashboard .telegram-feature-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard .telegram-feature-icon svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard .telegram-bind-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.page-dashboard .telegram-step-card {
    display: flex;
    min-width: 0;
    min-height: 180px;
    flex-direction: column;
    margin: 0;
    padding: 16px;
    border-radius: 14px;
}

body.page-dashboard .telegram-step-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

body.page-dashboard .telegram-step-index {
    display: inline-flex;
    min-width: 34px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #fff;
    background: #202020;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
}

body.page-dashboard .telegram-step-state {
    color: #6d809d;
    font-size: 11px;
    font-weight: 600;
}

body.page-dashboard .telegram-step-card > p {
    margin: 6px 0 14px;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.55;
}

body.page-dashboard .telegram-bind-dialog .bot-link {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 10px 12px;
    overflow: hidden;
    color: #fff !important;
    background: #202020 !important;
    border: 1px solid #202020 !important;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

body.page-dashboard .telegram-bind-dialog .bot-link:hover {
    color: #fff !important;
    background: #000 !important;
    border-color: #000 !important;
}

body.page-dashboard .telegram-bind-dialog .bot-link.is-disabled,
body.page-dashboard .telegram-bind-dialog .bot-link.is-disabled:hover {
    color: #6d809d !important;
    background: #f1f5fa !important;
    border-color: #e1e8f2 !important;
    cursor: not-allowed;
    pointer-events: none;
}

body.page-dashboard .telegram-bind-dialog .bot-link .bot-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .telegram-bind-dialog .bot-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

body.page-dashboard .telegram-bind-dialog .bind-code-container {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 5px 5px 5px 12px;
    color: #202020 !important;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 10px;
}

body.page-dashboard .telegram-bind-dialog .bind-code-container code {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #0c1628;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .telegram-bind-dialog .copy-btn {
    display: inline-flex;
    width: 34px;
    height: 32px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #202020 !important;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 8px;
}

body.page-dashboard .telegram-bind-dialog .copy-btn:hover {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
}

body.page-dashboard .telegram-bind-dialog .copy-btn:disabled,
body.page-dashboard .telegram-bind-dialog .copy-btn:disabled:hover {
    color: #6d809d !important;
    background: #f1f5fa !important;
    border-color: #e1e8f2 !important;
    cursor: not-allowed;
}

body.page-dashboard .telegram-bind-dialog .copy-btn svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard .telegram-bind-dialog .bind-code-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin: 0;
    padding: 15px 16px;
    border-radius: 14px;
}

body.page-dashboard .telegram-bind-dialog .code-header,
body.page-dashboard .telegram-bind-dialog .code-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.page-dashboard .telegram-bind-dialog .code-label {
    display: block;
    margin-bottom: 3px;
    color: #6d809d !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard .telegram-bind-dialog .code-expire {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    text-align: right;
}

body.page-dashboard .telegram-bind-dialog .code-expire:empty {
    display: none;
}

body.page-dashboard .telegram-bind-dialog .code-main {
    padding-top: 12px;
    border-top: 1px solid #e1e8f2;
}

body.page-dashboard .telegram-bind-dialog .code-value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #171717 !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.2;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn {
    display: inline-flex;
    width: auto;
    min-height: 38px;
    min-width: 96px;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    color: #fff !important;
    background: #202020 !important;
    border: 1px solid #202020 !important;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn::before {
    display: none;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn:hover {
    color: #fff !important;
    background: #000 !important;
    border-color: #000 !important;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn:disabled {
    cursor: wait;
    opacity: .48;
}

body.page-dashboard .telegram-bind-dialog.is-unavailable .refresh-btn:disabled {
    cursor: not-allowed;
}

body.page-dashboard .telegram-bind-dialog .refresh-btn svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    margin: 0;
    padding: 12px 14px;
    color: #0c1628;
    border-radius: 12px;
    font-size: 12px;
    text-align: left;
}

body.page-dashboard .telegram-status-dot {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: #202020;
    border-radius: 50%;
}

body.page-dashboard .telegram-status-dot::after {
    position: absolute;
    inset: -4px;
    content: "";
    border: 1px solid rgba(32, 32, 32, .3);
    border-radius: inherit;
    animation: telegramStatusPulse 1.7s ease-out infinite;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint.is-unavailable .telegram-status-dot {
    background: #6d809d;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint.is-unavailable .telegram-status-dot::after {
    display: none;
}

@keyframes telegramStatusPulse {
    0% { opacity: .9; transform: scale(.7); }
    70%, 100% { opacity: 0; transform: scale(1.45); }
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint strong,
body.page-dashboard .telegram-bind-dialog .bind-status-hint .hint-text {
    display: block;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint strong {
    margin-bottom: 2px;
    color: #0c1628;
    font-size: 12px;
    font-weight: 720;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint .hint-text {
    color: #6d809d;
    font-size: 10px;
    line-height: 1.4;
}

@media (max-width: 700px) {
    body.page-dashboard .telegram-bind-dialog {
        width: min(100%, 560px);
    }

    body.page-dashboard .telegram-dialog-header {
        min-height: 88px;
        padding: 18px;
    }

    body.page-dashboard .telegram-bind-dialog .telegram-dialog-content {
        max-height: calc(92vh - 88px);
        padding: 16px 18px 20px;
    }

    body.page-dashboard .telegram-feature-grid,
    body.page-dashboard .telegram-bind-flow {
        grid-template-columns: 1fr;
    }

    body.page-dashboard .telegram-step-card {
        min-height: auto;
    }

    body.page-dashboard .telegram-step-card > p {
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .telegram-bind-overlay {
        align-items: flex-end;
        padding: 0;
    }

    body.page-dashboard .telegram-bind-dialog {
        width: 100%;
        max-width: none;
        max-height: 94dvh;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-radius: 18px 18px 0 0;
    }

    body.page-dashboard .telegram-dialog-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    body.page-dashboard .telegram-dialog-heading h3 {
        font-size: 17px;
    }

    body.page-dashboard .telegram-dialog-heading p,
    body.page-dashboard .telegram-section-heading > p {
        display: none;
    }

    body.page-dashboard .telegram-bind-dialog .telegram-dialog-content {
        max-height: calc(94dvh - 88px);
        padding: 14px 14px 18px;
    }

    body.page-dashboard .telegram-section-heading {
        align-items: flex-start;
    }

    body.page-dashboard .telegram-bind-dialog .code-main {
        align-items: flex-end;
    }

    body.page-dashboard .telegram-bind-dialog .code-value {
        font-size: 21px;
        letter-spacing: .1em;
    }

    body.page-dashboard .telegram-bind-dialog .refresh-btn span {
        display: none;
    }

    body.page-dashboard .telegram-bind-dialog .refresh-btn {
        width: 38px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .telegram-bind-dialog,
    body.page-dashboard .telegram-status-dot::after {
        animation: none;
    }
}

/* UI15：首页 Emby 凭据与线路操作区。 */
body.page-dashboard #section-home .server-account-compact {
    margin: 0 0 10px;
    padding: 14px;
    color: #202020;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
}

body.page-dashboard #section-home .server-account-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

body.page-dashboard #section-home .server-account-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #0c1628;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
}

body.page-dashboard #section-home .server-account-icon svg,
body.page-dashboard #section-home .credential-btn svg,
body.page-dashboard #section-home .line-icon-badge svg,
body.page-dashboard #section-home .line-actions-compact button svg,
body.page-dashboard #section-home .import-all-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home .server-account-title {
    min-width: 0;
    flex: 1;
}

body.page-dashboard #section-home .server-account-title > span {
    display: block;
    margin-bottom: 1px;
    color: #6d809d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard #section-home .server-account-title h4 {
    margin: 0;
    color: #202020;
    font-size: 13px;
    font-weight: 740;
    line-height: 1.35;
}

body.page-dashboard #section-home .server-account-private {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 4px 9px;
    color: #6d809d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

body.page-dashboard #section-home .server-account-compact .account-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body.page-dashboard #section-home .server-account-compact .account-item {
    display: block;
    min-width: 0;
    padding: 9px 10px 10px;
    color: #202020;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
}

body.page-dashboard #section-home .credential-label {
    display: block;
    margin-bottom: 5px;
    color: #6d809d;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-home .credential-value-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

body.page-dashboard #section-home .server-account-compact .account-item .value {
    display: block;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #0c1628;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .server-account-compact .account-item .value.hidden {
    color: #34445d;
    font-family: Arial, "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .11em;
}

body.page-dashboard #section-home .credential-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

body.page-dashboard #section-home .credential-btn,
body.page-dashboard #section-home .line-toggle-btn {
    display: inline-flex;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard #section-home :is(.credential-btn, .line-toggle-btn):hover {
    color: #fff;
    background: #202020;
    border-color: #202020;
}

body.page-dashboard #section-home .credential-btn svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard #section-home .server-lines-list-compact {
    gap: 9px;
}

body.page-dashboard #section-home .server-line-compact {
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    box-shadow: none;
}

body.page-dashboard #section-home .server-line-compact:hover {
    background: #fff !important;
    border-color: #8b9bb2;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-home .line-main-compact {
    align-items: center;
    gap: 10px;
}

body.page-dashboard #section-home .line-icon-badge,
body.page-dashboard #section-home .line-icon-badge.whitelist,
body.page-dashboard #section-home .line-icon-badge.subscriber {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 10px;
    box-shadow: none;
}

body.page-dashboard #section-home .line-icon-badge svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard #section-home .line-text-group {
    gap: 3px;
}

body.page-dashboard #section-home .line-name-new {
    overflow: hidden;
    color: #0c1628;
    font-size: 12px;
    font-weight: 720;
    text-overflow: ellipsis;
}

body.page-dashboard #section-home .line-url-new,
body.page-dashboard #section-home .line-url-new.line-hidden {
    color: #6d809d;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 550;
}

body.page-dashboard #section-home .line-url-new.line-hidden {
    letter-spacing: .1em;
}

body.page-dashboard #section-home .line-actions-compact {
    gap: 6px;
}

body.page-dashboard #section-home .line-copy-btn {
    display: inline-flex;
    min-width: 70px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    color: #fff;
    background: #202020;
    border: 1px solid #202020;
    border-radius: 9px;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
}

body.page-dashboard #section-home .line-copy-btn:hover {
    color: #fff;
    background: #000;
    border-color: #000;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-home .line-actions-compact button svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard #section-home .import-all-bar {
    margin-top: 10px;
}

body.page-dashboard #section-home .import-all-btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    color: #fff;
    background: #202020;
    border: 1px solid #202020;
    border-radius: 10px;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
}

body.page-dashboard #section-home .import-all-btn:hover {
    background: #000;
    border-color: #000;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-home .import-all-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 760px) {
    body.page-dashboard #section-home .server-account-compact .account-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .server-line-compact {
        align-items: stretch;
        padding: 11px;
    }

    body.page-dashboard #section-home .line-actions-compact {
        justify-content: flex-end;
    }

    body.page-dashboard #section-home .line-copy-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 420px) {
    body.page-dashboard #section-home .server-account-private {
        display: none;
    }

    body.page-dashboard #section-home .server-account-compact {
        padding: 11px;
    }
}

/* UI20：统一密码可见性控件。 */
.password-visibility-field {
    position: relative;
    width: 100%;
}

.password-visibility-field > input {
    width: 100%;
    padding-right: 46px !important;
}

.password-visibility-field > input::-ms-reveal,
.password-visibility-field > input::-ms-clear {
    display: none;
}

.password-visibility-toggle,
body.page-dashboard .toggle-pwd-v2.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    z-index: 2;
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    margin: 0;
    padding: 0;
    color: #6d809d;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    opacity: 1;
    transform: translateY(-50%);
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible,
body.page-dashboard .toggle-pwd-v2.password-visibility-toggle:hover {
    color: #181818;
    background: #f1f5fa;
    outline: none;
    opacity: 1;
}

.password-visibility-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* UI20：首页重新组织为概览、核心数据和独立功能面板。 */
body.page-dashboard #section-home .announcement-item {
    padding-inline: 16px;
    border-left: 0 !important;
}

body.page-dashboard #section-home .announcements-container.announcements-top {
    border-color: #e1e8f2;

    box-shadow: 0 10px 28px rgba(24, 24, 24, .06);
}

body.page-dashboard #section-home .dashboard-overview-grid {
    display: grid;

    align-items: stretch;

    margin-bottom: 24px;
}

body.page-dashboard #section-home .dashboard-hero {

    height: 100%;
    margin: 0;

    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 8px;

}

body.page-dashboard #section-home .dashboard-hero .hero-content-main {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;

}

body.page-dashboard #section-home .hero-greeting {
    align-items: flex-start;
}

body.page-dashboard #section-home .greeting-emoji {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    animation: none;
}

body.page-dashboard #section-home .greeting-emoji::before {
    display: none;
}

body.page-dashboard #section-home .greeting-emoji svg {
    display: block;
    width: 19px;
    height: 19px;
}

body.page-dashboard #section-home .greeting-text h1 {
    margin: 0;



}



body.page-dashboard #section-home .hero-actions {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;

}

body.page-dashboard #section-home .hero-search-btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 9px 13px;
    color: #fff;
    background: #202020;
    border: 1px solid #202020 !important;
    border-radius: 7px;
    box-shadow: none;
}

body.page-dashboard #section-home .hero-search-btn:hover {
    color: #fff;
    background: #000;
    border-color: #000 !important;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary {
    color: #202020;
    background: #fff;
    border-color: #e1e8f2 !important;
}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {

    background: #f1f5fa;
    border-color: #8b9bb2 !important;
}

body.page-dashboard #section-home .dashboard-kpi-refined {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0;
    border-radius: 0;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern {
    min-width: 0;
    min-height: 108px;
    padding: 0 !important;

    border: 1px solid #e1e8f2 !important;
    border-radius: 8px !important;
}



body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-inner {
    min-height: 108px;
    padding: 17px;
    gap: 13px;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-value-modern {
    overflow-wrap: anywhere;
    color: #202020;
    font-size: 19px;
    font-weight: 760;
    letter-spacing: 0;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-label-modern {
    margin-top: 3px;
    color: #6d809d;
    font-size: 10px;
}

body.page-dashboard #section-home .dashboard-subscription-lines {
    margin: 0 0 18px;
}

body.page-dashboard #section-home .dashboard-subscription-lines > .section-title {
    display: flex;

    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 10px;
    padding: 0;
}

body.page-dashboard #section-home .dashboard-subscription-lines > .section-title h2 {
    margin: 0;
    color: #202020;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0;
}

body.page-dashboard #section-home .dashboard-subscription-lines > .section-title h2::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 9px;
    vertical-align: 2px;
    content: "";
    background: #202020;
    border-radius: 2px;
}

body.page-dashboard #section-home .subscription-lines-container,
body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
    display: grid;
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.68fr);
    align-items: stretch;
    gap: 12px;
    overflow: visible;
    padding: 0;
    background: transparent !important;
    border: 0;
    border-radius: 0;
}



body.page-dashboard #section-home .subscription-status-mini,
body.page-dashboard #section-home .checkin-mini-card {
    width: auto;
    min-width: 0;
    min-height: 188px;
    margin: 0;
    padding: 20px;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .subscription-status-mini {
    display: flex;
    align-items: center;
}

body.page-dashboard #section-home .status-badge-mini,
body.page-dashboard #section-home .status-badge-mini:is(.whitelist, .subscriber, .no-sub) {
    width: 100%;
    height: auto;
    gap: 12px;
    padding: 0;
    color: #202020;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.page-dashboard #section-home .status-badge-mini .badge-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-home .status-badge-mini .badge-icon::before {
    display: none;
}

body.page-dashboard #section-home .status-badge-mini .badge-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home .status-badge-mini .badge-title {
    color: #202020;
    font-size: 14px;
    font-weight: 740;
}

body.page-dashboard #section-home .status-badge-mini .badge-desc,
body.page-dashboard #section-home .status-badge-mini .badge-desc a {
    color: #6d809d;
    font-size: 10px;
    text-decoration: none;
}

body.page-dashboard #section-home .server-lines-compact {
    min-width: 0;
    min-height: 188px;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .server-lines-compact > :is(.loading-placeholder, .server-lines-no-access) {
    display: flex;
    min-height: 188px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-home .server-lines-compact > .server-account-compact,
body.page-dashboard #section-home .server-lines-compact .server-line-compact {
    border-radius: 8px;
}

body.page-dashboard #section-home .invite-banner-modern {
    min-height: 0;
    margin: 0 0 18px;
    padding: 17px 18px;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-home .invite-icon-big {
    border-radius: 7px;
}

body.page-dashboard #section-home .invite-action-btn {
    border-radius: 7px;
}

@media (max-width: 1180px) {


    body.page-dashboard #section-home .dashboard-hero {
        min-height: 176px;
    }

    body.page-dashboard #section-home .hero-actions {
        width: min(100%, 340px);
    }
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .server-lines-compact {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .subscription-status-mini,
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card .checkin-mini-card {
        grid-row: 2;
    }
}

@media (max-width: 800px) {
    body.page-dashboard #section-home .dashboard-kpi-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-home .subscription-lines-container,
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .subscription-lines-container :is(
        .subscription-status-mini,
        .server-lines-compact,
        .checkin-mini-card
    ),
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card :is(
        .subscription-status-mini,
        .server-lines-compact,
        .checkin-mini-card
    ) {
        grid-column: 1;
        grid-row: auto;
    }

    body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) > .subscription-status-mini,
    body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) > .server-lines-compact {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 520px) {
    body.page-dashboard #section-home .dashboard-overview-grid {
        gap: 10px;
        margin-bottom: 20px;
    }

    body.page-dashboard #section-home .dashboard-hero {
        min-height: 210px;
        padding: 18px;
    }

    body.page-dashboard #section-home .hero-actions {
        width: 100%;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined {
        gap: 10px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-inner {
        min-height: 104px;
        padding: 14px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-value-modern {
        font-size: 16px;
    }

    body.page-dashboard #section-home .dashboard-subscription-lines > .section-title {
        align-items: flex-start;
    }

    body.page-dashboard #section-home .subscription-status-mini,
    body.page-dashboard #section-home .checkin-mini-card,
    body.page-dashboard #section-home .server-lines-compact > :is(.loading-placeholder, .server-lines-no-access) {
        min-height: 150px;
    }
}

/* UI22：首页视觉升级，增加克制的色彩、层级与媒体氛围。 */
body.page-dashboard #section-home .dashboard-overview-grid {
    grid-template-columns: minmax(560px, 1.22fr) minmax(420px, .78fr);
    gap: 14px;
}

body.page-dashboard #section-home .dashboard-hero {
    position: relative;
    min-height: 252px;
    overflow: hidden;
    padding: 0;

    background:
        radial-gradient(circle at 82% 8%, rgba(183, 200, 164, .2), transparent 34%),
        radial-gradient(circle at 8% 110%, rgba(194, 151, 98, .2), transparent 38%),
        linear-gradient(135deg, #202521 0%, #17201d 55%, #242b26 100%) !important;


}

body.page-dashboard #section-home .dashboard-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(90deg, #000, transparent 86%);
}

body.page-dashboard #section-home .dashboard-hero .hero-content-main {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 252px;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    align-items: stretch;
}

body.page-dashboard #section-home .dashboard-hero-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 10px 22px 26px;
}

body.page-dashboard #section-home .hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 9px;
    font-weight: 720;
    letter-spacing: .12em;
}

body.page-dashboard #section-home .hero-live-badge > span {
    width: 7px;
    height: 7px;
    background: #9cc47f;
    border: 2px solid rgba(156, 196, 127, .22);
    border-radius: 50%;

}

body.page-dashboard #section-home .hero-greeting {
    display: block;
    margin-top: 19px;
}

body.page-dashboard #section-home .hero-date-line {
    margin: 0 0 5px;
    color: rgba(237, 246, 255, .62);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}





body.page-dashboard #section-home .greeting-time {
    max-width: 520px;
    margin-top: 8px;
    color: rgba(237, 246, 255, .72);
    font-size: 11px;
}

body.page-dashboard #section-home .hero-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

body.page-dashboard #section-home .hero-status-pills > span {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-size: 9px;
}

body.page-dashboard #section-home .hero-status-dot {
    width: 5px;
    height: 5px;
    background: #e2bd7e;
    border-radius: 50%;
}

body.page-dashboard #section-home .hero-status-dot.status-expiry {
    background: #82b8ad;
}

body.page-dashboard #section-home .hero-actions {
    width: min(100%, 330px);
    margin: auto 0 0;
}

body.page-dashboard #section-home .hero-search-btn,
body.page-dashboard #section-home .hero-search-btn:hover {
    min-height: 38px;

    background: #e1e8f2;

}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary,
body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {

    background: rgba(255, 255, 255, .07);

}

body.page-dashboard #section-home .hero-search-btn:hover {
    background: #fff3de;
}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {
    background: rgba(255, 255, 255, .12);
}

body.page-dashboard #section-home .hero-search-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home .dashboard-hero-scene {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

body.page-dashboard #section-home .hero-scene-orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
}

body.page-dashboard #section-home .hero-scene-orbit.orbit-one {
    top: -28px;
    right: -40px;
    width: 250px;
    height: 250px;
}

body.page-dashboard #section-home .hero-scene-orbit.orbit-two {
    top: 24px;
    right: 8px;
    width: 158px;
    height: 158px;
}

body.page-dashboard #section-home .hero-poster-stack {
    position: absolute;
    top: 38px;
    right: 26px;
    width: 196px;
    height: 130px;
}

body.page-dashboard #section-home .hero-poster {
    position: absolute;
    display: grid;
    width: 82px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;

}

body.page-dashboard #section-home .hero-poster svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: rgba(255, 255, 255, .78);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home .hero-poster.poster-one {
    z-index: 3;
    right: 55px;
    bottom: 0;
    background: linear-gradient(155deg, #9f6948, #563b31);
    transform: rotate(-3deg);
}

body.page-dashboard #section-home .hero-poster.poster-two {
    z-index: 2;
    right: 6px;
    bottom: 7px;
    background: linear-gradient(155deg, #506d70, #293e45);
    transform: rotate(8deg);
}

body.page-dashboard #section-home .hero-poster.poster-three {
    z-index: 1;
    right: 104px;
    bottom: 5px;
    background: linear-gradient(155deg, #6d7550, #39422f);
    transform: rotate(-12deg);
}

body.page-dashboard #section-home .hero-scene-status {
    position: absolute;
    right: 28px;
    bottom: 18px;
    display: grid;
    min-width: 172px;
    gap: 2px;
    padding: 9px 11px;
    background: rgba(13, 18, 15, .64);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

body.page-dashboard #section-home .hero-scene-status span {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 8px;
}

body.page-dashboard #section-home .hero-scene-status span i {
    width: 5px;
    height: 5px;
    background: #88bd83;
    border-radius: 50%;
}

body.page-dashboard #section-home .hero-scene-status strong {

    font-size: 10px;
    letter-spacing: .12em;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern {


    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #fff, var(--kpi-soft)) !important;

}







body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--kpi-accent);
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern:hover {
    background: linear-gradient(145deg, #fff, var(--kpi-soft)) !important;


    transform: translateY(-1px) !important;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-inner {
    position: relative;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern {

    background: rgba(255, 255, 255, .72);

}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-index {
    position: absolute;
    top: 12px;
    right: 13px;
    color: color-mix(in srgb, var(--kpi-accent) 58%, transparent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

body.page-dashboard #section-home .dashboard-subscription-lines > .section-title {
    min-height: 42px;
}

body.page-dashboard #section-home .dashboard-section-heading {
    display: grid;
    gap: 2px;
}

body.page-dashboard #section-home .dashboard-section-heading > span {

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

body.page-dashboard #section-home .dashboard-section-heading > h2 {
    margin: 0;
    color: #202020;
    font-size: 15px;
    font-weight: 760;
}

body.page-dashboard #section-home .subscription-status-mini {
    background: linear-gradient(145deg, #fff, #f1f5fa) !important;

}

body.page-dashboard #section-home .checkin-mini-card {
    background: linear-gradient(145deg, #fff, #edf5f0) !important;

}

body.page-dashboard #section-home .invite-banner-modern {
    background: linear-gradient(110deg, #fff 0%, #f1f5fa 52%, #edf4ef 100%) !important;
    border-color: #e1e8f2;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-home .dashboard-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .dashboard-kpi-refined {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-home .dashboard-hero .hero-content-main {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .dashboard-hero-copy {
        padding: 22px;
    }

    body.page-dashboard #section-home .dashboard-hero-scene {
        display: none;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    body.page-dashboard #section-home .hero-status-pills {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .hero-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* UI23：参考图浅蓝科技色系。 */
body.page-dashboard {
    --primary: #0b7ff3;
    --primary-light: #3a9cff;
    --primary-dark: #0068d4;
    --ui-primary: #0b7ff3;
    --ui-primary-hover: #006fdf;
    --ui-bg: #f5f8fc;
    --ui-sidebar: #f7f9fd;
    --ui-surface: #fff;
    --ui-soft: #f1f5fa;
    --ui-soft-warm: #e5f2ff;
    --ui-warm: #0b7ff3;
    --ui-warm-soft: #e5f2ff;
    --ui-border: #e1e8f2;
    --ui-border-strong: #cbd8e8;
    --ui-ink: #0c1628;
    --ui-ink-soft: #34445d;
    --ui-muted: #6d809d;
    --ui-blue: #0b7ff3;
    --ui-blue-soft: #e5f2ff;
    --ui-green: #07a67c;
    --ui-green-soft: #e8f8f3;
    --ui-amber: #ed9000;
    --ui-amber-soft: #fff3e1;
    --ui-red: #ef4444;
    --ui-red-soft: #fff0f0;
    color: var(--ui-ink);
    background: var(--ui-bg);
}

body.page-dashboard .sidebar,
body.page-dashboard .sidebar-footer {
    background: var(--ui-sidebar);
    border-color: var(--ui-border);
}

body.page-dashboard .main-content,
body.page-dashboard .mobile-header {
    background: var(--ui-bg);
}

body.page-dashboard .sidebar .logo-title,
body.page-dashboard :is(.page-header h1, .section-header h1, .section-title h2, .dashboard-section-heading > h2) {
    color: var(--ui-ink);
}

body.page-dashboard :is(.sidebar .logo-subtitle, .page-header p, .section-header p, .nav-section-title) {
    color: var(--ui-muted);
}

body.page-dashboard .sidebar-nav .nav-item {
    color: #60728e;
}

body.page-dashboard .sidebar-nav .nav-item svg {
    color: #6d809d;
}

body.page-dashboard .sidebar-nav .nav-item:hover {
    color: #0b65c3;
    background: #edf5ff;
}

body.page-dashboard .sidebar-nav .nav-item.active {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    box-shadow: 0 8px 18px rgba(11, 127, 243, .2);
}

body.page-dashboard .sidebar-nav .nav-item.active svg {
    color: #fff;
}

body.page-dashboard .sidebar-nav .nav-item.active::before {
    display: none;
}

body.page-dashboard :is(.telegram-bind-sidebar, .email-bind-sidebar, .telegram-sidebar-btn, .admin-panel-btn, .user-card) {
    color: var(--ui-ink-soft);
    background: #fff;
    border-color: var(--ui-border);
}

body.page-dashboard .app-version {
    color: #8ca0bb;
}

body.page-dashboard :is(.btn-primary, .primary-btn, .submit-btn, .action-btn.primary, .modal-confirm-btn),
body.page-dashboard :is(.btn-primary, .primary-btn, .submit-btn, .action-btn.primary, .modal-confirm-btn):hover {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    box-shadow: 0 7px 18px rgba(11, 127, 243, .18);
}

body.page-dashboard :is(input, textarea, select):focus {
    border-color: #67adf7;
    box-shadow: 0 0 0 3px rgba(11, 127, 243, .11);
}

body.page-dashboard #section-home .dashboard-hero {
    color: var(--ui-ink);
    background: linear-gradient(120deg, #eaf5ff 0%, #f6faff 58%, #fff 100%) !important;
    border-color: #dce8f5;
    box-shadow: 0 16px 36px rgba(43, 79, 120, .09);
}

body.page-dashboard #section-home .dashboard-hero::before {
    display: block;
    background-image:
        linear-gradient(rgba(77, 137, 196, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 137, 196, .045) 1px, transparent 1px) !important;
}

body.page-dashboard #section-home .hero-live-badge {
    color: #0b6fda;
}

body.page-dashboard #section-home .hero-live-badge > span {
    background: #0b7ff3;
    border-color: rgba(11, 127, 243, .22);
    box-shadow: 0 0 0 4px rgba(11, 127, 243, .1);
}

body.page-dashboard #section-home .hero-date-line,
body.page-dashboard #section-home .greeting-time {
    color: var(--ui-muted);
}

body.page-dashboard #section-home .greeting-text h1 {
    color: var(--ui-ink);
}

body.page-dashboard #section-home .user-name-highlight {
    color: #087af0;
}

body.page-dashboard #section-home .hero-status-pills > span {
    color: #4d6585;
    background: rgba(255, 255, 255, .74);
    border-color: #d8e6f4;
}

body.page-dashboard #section-home .hero-status-dot {
    background: #ed9000;
}

body.page-dashboard #section-home .hero-status-dot.status-expiry {
    background: #08a7df;
}

body.page-dashboard #section-home .hero-search-btn,
body.page-dashboard #section-home .hero-search-btn:hover {
    color: #fff !important;
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;

    box-shadow: none !important;
    font-weight: 650;
}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary,
body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {
    color: #1764ac !important;
    background: #eef6ff !important;
    border-color: #d4e6f9 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .hero-search-btn:focus-visible {
    outline: 2px solid var(--ui-primary-hover);
    outline-offset: 3px;
}

body.page-dashboard #section-home .hero-scene-orbit {
    border-color: rgba(11, 127, 243, .14);
}

body.page-dashboard #section-home .hero-poster {
    border-color: rgba(255, 255, 255, .72);

}

body.page-dashboard #section-home .hero-poster.poster-one {
    background: linear-gradient(155deg, #0b8cff, #0867dd) !important;
}

body.page-dashboard #section-home .hero-poster.poster-two {
    background: linear-gradient(155deg, #27b8e8, #078dc8) !important;
}

body.page-dashboard #section-home .hero-poster.poster-three {
    background: linear-gradient(155deg, #9ed6ff, #4ba5f1) !important;
}

body.page-dashboard #section-home .hero-scene-status {
    background: rgba(255, 255, 255, .88);
    border-color: #d6e5f3;
    box-shadow: 0 10px 24px rgba(43, 79, 120, .11);
}

body.page-dashboard #section-home .hero-scene-status span {
    color: var(--ui-muted);
}

body.page-dashboard #section-home .hero-scene-status span i {
    background: var(--ui-green);
}

body.page-dashboard #section-home .hero-scene-status strong {
    color: #1767b8;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern {
    --kpi-accent: #0b7ff3;
    --kpi-soft: #e5f2ff;
    background: #fff !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 10px 25px rgba(43, 79, 120, .065);
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern.stat-info {
    --kpi-accent: #08a7df;
    --kpi-soft: #e3f6fc;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern.stat-warning {
    --kpi-accent: #0b7ff3;
    --kpi-soft: #e5f2ff;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern.stat-success {
    --kpi-accent: #07a67c;
    --kpi-soft: #e8f8f3;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern::before {
    display: none;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern:hover {
    background: #fff !important;
    border-color: color-mix(in srgb, var(--kpi-accent) 40%, #dce6f1) !important;
    box-shadow: 0 14px 30px rgba(43, 79, 120, .11) !important;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern {
    color: var(--kpi-accent);
    background: var(--kpi-soft);
    border-color: color-mix(in srgb, var(--kpi-accent) 18%, #e4edf6);
}

body.page-dashboard #section-home .dashboard-section-heading > span {
    color: #0b7ff3;
}

body.page-dashboard #section-home .subscription-status-mini,
body.page-dashboard #section-home .checkin-mini-card,
body.page-dashboard #section-home .invite-banner-modern {
    background: #fff !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 10px 25px rgba(43, 79, 120, .055);
}

body.page-dashboard #section-home .subscription-status-mini {
    border-top: 3px solid #0b7ff3 !important;
}

body.page-dashboard #section-home .checkin-mini-card {
    border-top: 3px solid #07a67c !important;
}

body.page-dashboard #section-home .invite-banner-modern {
    background: linear-gradient(110deg, #fff 0%, #f3f9ff 58%, #eaf5ff 100%) !important;
}

/* UI21：邀请好友弹窗，统一为黑白信息面板。 */
body.page-dashboard.invite-modal-open {
    overflow: hidden;
}

body.page-dashboard .invite-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(24, 24, 24, .58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: inviteBackdropIn .18s ease-out;
}

body.page-dashboard .invite-modal {
    display: flex;
    box-sizing: border-box;
    width: min(100%, 560px);
    min-width: 0;
    max-width: 560px;
    max-height: min(90dvh, 760px);
    flex-direction: column;
    overflow: hidden;
    color: #202020;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 12px;
    box-shadow: 0 28px 80px rgba(15, 15, 15, .25);
    animation: inviteDialogIn .22s ease-out;
}

body.page-dashboard .invite-modal-header {
    display: flex;
    min-height: 98px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 19px 22px;
    color: #202020;
    background: #fff;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard .invite-modal-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

body.page-dashboard .invite-modal-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard .invite-modal-icon svg,
body.page-dashboard .invite-modal-close svg,
body.page-dashboard .invite-copy-btn svg,
body.page-dashboard .invite-tips > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard .invite-modal-kicker,
body.page-dashboard .invite-share-kicker {
    display: block;
    margin-bottom: 3px;
    color: #6d809d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
}

body.page-dashboard .invite-modal-header h3 {
    margin: 0;
    color: #202020;
    font-size: 17px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard .invite-modal-header p {
    margin: 4px 0 0;
    color: #6d809d;
    font-size: 11px;
    line-height: 1.4;
}

body.page-dashboard .invite-modal-close {
    display: inline-flex;
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard .invite-modal-close:hover,
body.page-dashboard .invite-modal-close:focus-visible {
    color: #fff;
    background: #202020;
    border-color: #202020;
    outline: none;
}

body.page-dashboard .invite-modal-close svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard .invite-modal-body {
    min-height: 0;
    padding: 0 22px 22px;
    overflow-y: auto;
    background: #fff;
}

body.page-dashboard .invite-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard .invite-stat-item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 16px;
    text-align: center;
}

body.page-dashboard .invite-stat-item + .invite-stat-item::before {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 1px;
    content: "";
    background: #e1e8f2;
}

body.page-dashboard .invite-stat-item .stat-value {
    display: block;
    width: 100%;
    margin: 0;
    color: #202020;
    font-size: 25px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard .invite-stat-item .stat-label {
    display: block;
    width: 100%;
    margin: 0;
    color: #6d809d;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

body.page-dashboard .invite-share-section {
    padding-top: 19px;
}

body.page-dashboard .invite-share-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

body.page-dashboard .invite-share-heading h4 {
    margin: 0;
    color: #202020;
    font-size: 14px;
    font-weight: 740;
    letter-spacing: 0;
}

body.page-dashboard .invite-share-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 9px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

body.page-dashboard .invite-code-section,
body.page-dashboard .invite-link-section {
    margin: 0;
}

body.page-dashboard .invite-field {
    display: grid;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 9px 9px 9px 13px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard .invite-field:focus-within {
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, .06);
}

body.page-dashboard .invite-field-content {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body.page-dashboard .invite-field-label {
    display: block;
    margin: 0;
    color: #6d809d;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
}

body.page-dashboard .invite-field code {
    min-width: 0;
    overflow: hidden;
    color: #202020;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 17px;
    font-weight: 760;
    line-height: 1.3;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .invite-field input {
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #34445d;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .invite-field input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

body.page-dashboard .invite-copy-btn {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard .invite-copy-btn:hover,
body.page-dashboard .invite-copy-btn:focus-visible,
body.page-dashboard .invite-copy-btn.invite-copy-primary {
    color: #fff;
    background: #202020;
    border-color: #202020;
    outline: none;
}

body.page-dashboard .invite-copy-btn.invite-copy-primary:hover,
body.page-dashboard .invite-copy-btn.invite-copy-primary:focus-visible {
    background: #000;
    border-color: #000;
}

body.page-dashboard .invite-copy-btn svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard .invite-tips {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    padding: 14px 0 0;
    color: #34445d;
    background: transparent;
    border: 0;
    border-top: 1px solid #e1e8f2;
    border-radius: 0;
}

body.page-dashboard .invite-tips > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 1px;
    color: #34445d;
}

body.page-dashboard .invite-tips p {
    display: grid;
    gap: 3px;
    margin: 0;
    color: #34445d;
    font-size: 11px;
    line-height: 1.5;
}

body.page-dashboard .invite-tips strong {
    color: #202020;
    font-size: 11px;
    font-weight: 720;
}

@keyframes inviteBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes inviteDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    body.page-dashboard .invite-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    body.page-dashboard .invite-modal {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: 92dvh;
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 12px 12px 0 0 !important;
    }

    body.page-dashboard .invite-modal-header {
        min-height: 90px;
        padding: 17px 18px;
    }

    body.page-dashboard .invite-modal-body {
        padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    }

    body.page-dashboard .invite-modal-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body.page-dashboard .invite-stat-item {
        padding-inline: 11px;
    }

    body.page-dashboard .invite-stat-item .stat-value {
        font-size: 21px;
    }
}

@media (max-width: 380px) {
    body.page-dashboard .invite-modal-header p,
    body.page-dashboard .invite-share-badge {
        display: none;
    }

    body.page-dashboard .invite-stat-item .stat-label {
        font-size: 9px;
    }

    body.page-dashboard .invite-field {
        min-height: 62px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .invite-modal-overlay,
    body.page-dashboard .invite-modal {
        animation: none;
    }
}

/* UI23: 我的订阅，采用一体化概览与主次双栏。 */
body.page-dashboard #section-subscription {
    --subscription-ink: #202020;
    --subscription-muted: #6d809d;
    --subscription-line: #e1e8f2;
    --subscription-soft: #f7f9fd;
    --subscription-success: #286647;
    --subscription-danger: #a94747;
}

body.page-dashboard #section-subscription .subscription-section-header {
    display: flex;
    min-height: 84px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 18px;
    padding: 0 0 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--subscription-line);
    border-radius: 0;
    box-shadow: none;
}

body.page-dashboard #section-subscription .subscription-header-main {
    min-width: 0;
}

body.page-dashboard #section-subscription .subscription-page-kicker,
body.page-dashboard #section-subscription .subscription-panel-heading > div > span,
body.page-dashboard #section-subscription .history-heading-copy > span {
    display: block;
    margin: 0 0 4px;
    color: #6d809d;
    font-size: 10px;
    font-weight: 680;
    line-height: 1.2;
}

body.page-dashboard #section-subscription .subscription-header-main h1 {
    display: block;
    margin: 0;
    color: var(--subscription-ink);
    font-size: 26px;
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #section-subscription .subscription-header-main p {
    margin: 6px 0 0;
    color: var(--subscription-muted);
    font-size: 12px;
    line-height: 1.45;
}

body.page-dashboard #section-subscription .subscription-plan-mark svg,
body.page-dashboard #section-subscription .detail-icon svg,
body.page-dashboard #section-subscription .subscription-panel-icon svg,
body.page-dashboard #section-subscription .sub-action-btn svg,
body.page-dashboard #section-subscription .subscription-sync-note svg,
body.page-dashboard #section-subscription .history-empty svg,
body.page-dashboard #section-subscription .subscription-history-pagination svg,
body.page-dashboard #section-subscription .retention-card svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-subscription :is(
    .subscription-plan-mark,
    .detail-icon,
    .subscription-panel-icon,
    .sub-action-btn,
    .subscription-sync-note,
    .history-empty,
    .subscription-history-pagination,
    .retention-card
) svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-subscription .subscription-page-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

body.page-dashboard #section-subscription .subscription-summary-panel {
    min-width: 0;

    background: #fff;



}

body.page-dashboard #section-subscription .subscription-hero-card {
    min-height: 0;
    margin: 0;
    padding: 0;

    background: #fff;



}

body.page-dashboard #section-subscription .subscription-hero-content {
    display: grid;

    align-items: stretch;
    gap: 30px;
    padding: 24px 26px;
}

body.page-dashboard #section-subscription .hero-left {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

body.page-dashboard #section-subscription .subscription-plan-mark {
    display: inline-flex;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    color: var(--subscription-ink);
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-subscription .subscription-plan-mark svg {
    width: 23px;
    height: 23px;
}

body.page-dashboard #section-subscription .hero-copy,
body.page-dashboard #section-subscription .hero-title {
    min-width: 0;
}

body.page-dashboard #section-subscription .hero-badge {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    padding: 0;
    color: var(--subscription-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.page-dashboard #section-subscription .hero-badge .badge-text {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-subscription .subscription-state-text {
    display: inline-flex;
    min-height: 22px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    color: #34445d;
    background: var(--subscription-soft);
    border: 1px solid var(--subscription-line);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 680;
    line-height: 1;
}

body.page-dashboard #section-subscription .subscription-state-text::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

body.page-dashboard #section-subscription .subscription-summary-panel[data-state="active"] .subscription-state-text,
body.page-dashboard #section-subscription .subscription-summary-panel[data-state="permanent"] .subscription-state-text {
    color: var(--subscription-success);
    background: #f2f8f4;
    border-color: #dcebe2;
}

body.page-dashboard #section-subscription .subscription-summary-panel[data-state="expired"] .subscription-state-text,
body.page-dashboard #section-subscription .subscription-summary-panel[data-state="error"] .subscription-state-text {
    color: var(--subscription-danger);
    background: #fcf5f5;
    border-color: #f0dddd;
}

body.page-dashboard #section-subscription .hero-title h2 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--subscription-ink);
    font-size: 23px;
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: 0;
}

body.page-dashboard #section-subscription .hero-level {
    display: block;
    margin-top: 3px;
    color: #34445d;
    font-size: 11px;
    font-weight: 620;
    line-height: 1.4;
}

body.page-dashboard #section-subscription .hero-subtitle {
    max-width: none;
    margin: 7px 0 0;
    color: var(--subscription-muted);
    font-size: 11px;
    line-height: 1.45;
}

body.page-dashboard #section-subscription .subscription-server-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.page-dashboard #section-subscription .subscription-server-tag {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    color: #2374b7;
    background: #eef6ff;
    border: 1px solid #cfe3ff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

body.page-dashboard #section-subscription .subscription-server-tag svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-subscription .subscription-server-tag > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.page-dashboard #section-subscription .hero-right {
    display: flex;
    min-width: 178px;
    align-items: center;
    justify-content: flex-end;
    border-left: 1px solid var(--subscription-line);
}

body.page-dashboard #section-subscription .hero-countdown {
    display: flex;
    width: auto;
    height: auto;
    min-width: 150px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-left: 28px;
    text-align: right;
}

body.page-dashboard #section-subscription .countdown-kicker,
body.page-dashboard #section-subscription .countdown-label {
    color: var(--subscription-muted);
    font-size: 10px;
    font-weight: 640;
    line-height: 1.3;
}

body.page-dashboard #section-subscription .countdown-value-row {
    display: flex;
    max-width: 100%;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    margin: 4px 0;
}

body.page-dashboard #section-subscription .countdown-days {
    overflow-wrap: anywhere;
    color: var(--subscription-ink);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #section-subscription .countdown-unit {
    color: #34445d;
    font-size: 11px;
    font-weight: 650;
}

body.page-dashboard #section-subscription .subscription-details-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    overflow: visible;
    background: #fff;
    border-top: 1px solid var(--subscription-line);
    border-radius: 0;
}

body.page-dashboard #section-subscription .detail-card {
    display: flex;
    min-width: 0;
    min-height: 86px;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 17px 20px;
    background: #fff !important;
    border: 0;
    border-right: 1px solid var(--subscription-line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-subscription .detail-card:last-child {
    border-right: 0;
}

body.page-dashboard #section-subscription .detail-card:hover {
    background: #fff !important;
    border-color: var(--subscription-line);
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-subscription .detail-icon,
body.page-dashboard #section-subscription .detail-card:nth-child(n) .detail-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}



body.page-dashboard #section-subscription .detail-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body.page-dashboard #section-subscription .detail-label {
    color: var(--subscription-muted);
    font-size: 10px;
    font-weight: 620;
    line-height: 1.25;
}

body.page-dashboard #section-subscription .detail-value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--subscription-ink);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #section-subscription .subscription-content-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
    gap: 16px;
    align-items: stretch;
}

body.page-dashboard #section-subscription .subscription-actions-panel,
body.page-dashboard #section-subscription .subscription-history-section {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--subscription-line);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-subscription .subscription-actions-panel {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    padding: 20px;
}

body.page-dashboard #section-subscription .subscription-panel-heading,
body.page-dashboard #section-subscription .history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.page-dashboard #section-subscription .subscription-panel-heading {
    justify-content: flex-start;
    margin-bottom: 18px;
}

body.page-dashboard #section-subscription .subscription-panel-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--subscription-ink);
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-subscription .subscription-panel-icon svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-subscription .subscription-panel-heading h3,
body.page-dashboard #section-subscription .history-header h3 {
    margin: 0;
    color: var(--subscription-ink);
    font-size: 15px;
    font-weight: 740;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #section-subscription .subscription-action-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin: 0;
}

body.page-dashboard #section-subscription .sub-action-btn {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 11px 13px;
    text-align: left;
    border-radius: 7px;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-subscription .sub-action-btn.primary,
body.page-dashboard #section-subscription .sub-action-btn.primary:hover,
body.page-dashboard #section-subscription .sub-action-btn.secondary,
body.page-dashboard #section-subscription .sub-action-btn.secondary:hover {
    color: var(--subscription-ink);
    background: #fff;
    border: 1px solid #e1e8f2;
    box-shadow: none;
}

body.page-dashboard #section-subscription .sub-action-btn.primary:hover,
body.page-dashboard #section-subscription .sub-action-btn.secondary:hover {
    border-color: #8b9bb2;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 7px;
    opacity: .9;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-icon svg {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-title {
    margin: 0;
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-desc {
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 10px;
    font-weight: 560;
    line-height: 1.3;
    opacity: .68;
}

body.page-dashboard #section-subscription .sub-action-btn .btn-arrow {
    width: 15px;
    height: 15px;
    color: inherit;
}

body.page-dashboard #section-subscription .sub-action-btn.secondary::after {
    width: 6px;
    height: 6px;
    justify-self: center;
    content: "";
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .5;
}

body.page-dashboard #section-subscription .subscription-sync-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--subscription-muted);
    border-top: 1px solid var(--subscription-line);
    font-size: 10px;
    line-height: 1.45;
}

body.page-dashboard #section-subscription .subscription-sync-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

body.page-dashboard #section-subscription .subscription-history-section {
    min-height: 300px;
    padding: 0;
}

body.page-dashboard #section-subscription .history-header {
    min-height: 72px;
    margin: 0;
    padding: 16px 19px;
    border-bottom: 1px solid var(--subscription-line);
}

body.page-dashboard #section-subscription .history-heading-copy {
    min-width: 0;
}

body.page-dashboard #section-subscription .history-count {
    display: inline-flex;
    min-height: 26px;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 9px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 640;
}

body.page-dashboard #section-subscription .history-timeline {
    max-height: 404px;
    overflow-y: auto;
    padding: 0 19px;
    scrollbar-color: #cbd8e8 transparent;
    scrollbar-width: thin;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar {
    width: 6px;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar-thumb {
    background: #cbd8e8;
    border-radius: 999px;
}

body.page-dashboard #section-subscription .history-timeline::-webkit-scrollbar-track {
    background: transparent;
}

body.page-dashboard #section-subscription .history-empty {
    display: flex;
    min-height: 226px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 28px 16px;
    color: var(--subscription-muted);
    background: #fff !important;
    text-align: center;
}

body.page-dashboard #section-subscription .history-empty .empty-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0 0 12px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-subscription .history-empty .empty-icon svg {
    width: 19px;
    height: 19px;
}

body.page-dashboard #section-subscription .history-empty p {
    margin: 0;
    color: var(--subscription-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

body.page-dashboard #section-subscription .history-empty > span:last-child {
    margin-top: 5px;
    color: var(--subscription-muted);
    font-size: 10px;
    line-height: 1.4;
}

body.page-dashboard #section-subscription .history-item-new {
    display: grid;
    min-width: 0;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 16px 2px;
    background: #fff !important;
    border: 0;
    border-bottom: 1px solid var(--subscription-line);
    border-radius: 0;
    box-shadow: none;
}

body.page-dashboard #section-subscription .history-item-new:last-child {
    border-bottom: 0;
}

body.page-dashboard #section-subscription .history-item-new:hover {
    background: #fff !important;
    border-color: var(--subscription-line);
}

body.page-dashboard #section-subscription .history-dot {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    background: var(--subscription-ink);
    border: 0;
    border-radius: 50%;
}

body.page-dashboard #section-subscription .history-item-content {
    min-width: 0;
}

body.page-dashboard #section-subscription .history-item-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.page-dashboard #section-subscription .history-item-title {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--subscription-ink);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.3;
}

body.page-dashboard #section-subscription .source-tag,
body.page-dashboard #section-subscription .source-tag:is(.gift, .purchase, .redeem, .manual) {
    display: inline-flex;
    min-height: 22px;
    flex: 0 0 auto;
    align-items: center;
    padding: 3px 8px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-subscription .history-item-meta {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 7px;
    color: var(--subscription-muted);
    font-size: 10px;
    line-height: 1.35;
}

body.page-dashboard #section-subscription .history-date-range {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.page-dashboard #section-subscription .history-item-tags {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}

body.page-dashboard #section-subscription :is(.duration-tag, .price-tag, .status-tag) {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    padding: 3px 7px;
    color: #34445d;
    background: var(--subscription-soft);
    border: 1px solid var(--subscription-line);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
    line-height: 1;
}

body.page-dashboard #section-subscription .status-tag.active {
    color: var(--subscription-success);
    background: #f2f8f4;
    border-color: #dcebe2;
}

body.page-dashboard #section-subscription .status-tag.expired {
    color: #716d68;
}

body.page-dashboard #section-subscription .status-tag.pending {
    color: #645b3d;
    background: #faf8f0;
    border-color: #ebe5cf;
}

body.page-dashboard #section-subscription .subscription-history-pagination {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 19px;
    border-top: 1px solid var(--subscription-line);
}

body.page-dashboard #section-subscription .subscription-history-pagination:empty {
    display: none;
}

body.page-dashboard #section-subscription .subscription-history-pagination .pagination-info,
body.page-dashboard #section-subscription .subscription-history-pagination .page-current {
    color: var(--subscription-muted);
    font-size: 10px;
    font-weight: 600;
}

body.page-dashboard #section-subscription .subscription-history-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn {
    display: inline-flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--subscription-ink);
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn:hover:not([disabled]) {
    color: #fff;
    background: var(--subscription-ink);
    border-color: var(--subscription-ink);
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn[disabled] {
    cursor: not-allowed;
    opacity: .38;
}

body.page-dashboard #section-subscription .subscription-history-pagination .page-btn svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard #section-subscription .retention-info-section {
    min-width: 0;
    margin: 0;
}

body.page-dashboard #section-subscription .retention-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--subscription-line);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-subscription .retention-header {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 19px;
    background: #fff;
    border-bottom: 1px solid var(--subscription-line);
}

body.page-dashboard #section-subscription .retention-badge {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 0;
    color: var(--subscription-ink);
    background: transparent;
    border: 0;
}

body.page-dashboard #section-subscription .retention-badge-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-subscription .retention-badge-icon svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-subscription .retention-badge-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body.page-dashboard #section-subscription .retention-badge-copy small {
    color: var(--subscription-muted);
    font-size: 9px;
    font-weight: 620;
}

body.page-dashboard #section-subscription .retention-badge-text {
    color: var(--subscription-ink);
    font-size: 13px;
    font-weight: 720;
}

body.page-dashboard #section-subscription .retention-renew-tag,
body.page-dashboard #section-subscription .condition-status {
    display: inline-flex;
    min-height: 24px;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 8px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-subscription .retention-body {
    padding: 0 19px 14px;
}

body.page-dashboard #section-subscription .retention-explain {
    padding: 13px 0;
    color: var(--subscription-muted);
    background: transparent;
    border: 0;
}

body.page-dashboard #section-subscription .retention-explain p {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
}

body.page-dashboard #section-subscription .retention-conditions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--subscription-line);
}

body.page-dashboard #section-subscription .retention-condition-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 0;
    background: #fff !important;
    border: 0;
    border-right: 1px solid var(--subscription-line);
    border-radius: 0;
    box-shadow: none;
}

body.page-dashboard #section-subscription .retention-condition-card:last-child {
    padding-left: 16px;
    border-right: 0;
}

body.page-dashboard #section-subscription .condition-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #34445d;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-subscription .condition-icon svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard #section-subscription .condition-detail {
    min-width: 0;
}

body.page-dashboard #section-subscription .condition-title {
    color: var(--subscription-ink);
    font-size: 11px;
    font-weight: 700;
}

body.page-dashboard #section-subscription .condition-desc {
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: var(--subscription-muted);
    font-size: 9px;
    line-height: 1.4;
}

body.page-dashboard #section-subscription .condition-status.status-ok {
    color: var(--subscription-success);
    border-color: #dcebe2;
}

body.page-dashboard #section-subscription .condition-status.status-no {
    color: var(--subscription-danger);
    border-color: #f0dddd;
}

body.page-dashboard #section-subscription .retention-both-tip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 11px;
    color: var(--subscription-muted);
    border-top: 1px solid var(--subscription-line);
    font-size: 9px;
    line-height: 1.4;
}

body.page-dashboard #section-subscription .retention-both-tip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

@media (max-width: 980px) {
    body.page-dashboard #section-subscription .subscription-content-grid {
        grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
    }

    body.page-dashboard #section-subscription .subscription-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-subscription .detail-card:nth-child(2) {
        border-right: 0;
    }

    body.page-dashboard #section-subscription .detail-card:nth-child(-n + 2) {
        border-bottom: 1px solid var(--subscription-line);
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-subscription .subscription-section-header {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        margin-bottom: 14px;
        padding-bottom: 14px;
        text-align: left;
    }

    body.page-dashboard #section-subscription .subscription-header-main h1 {
        font-size: 22px;
    }

    body.page-dashboard #section-subscription .subscription-hero-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
        text-align: left;
    }

    body.page-dashboard #section-subscription .hero-left {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    body.page-dashboard #section-subscription .hero-badge {
        align-self: auto;
    }

    body.page-dashboard #section-subscription .hero-right {
        min-width: 0;
        justify-content: flex-start;
        padding-top: 16px;
        border-top: 1px solid var(--subscription-line);
        border-left: 0;
    }

    body.page-dashboard #section-subscription .hero-countdown {
        min-width: 0;
        align-items: flex-start;
        padding-left: 0;
        text-align: left;
    }

    body.page-dashboard #section-subscription .countdown-value-row {
        justify-content: flex-start;
    }

    body.page-dashboard #section-subscription .subscription-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-subscription .subscription-actions-panel {
        min-height: 0;
    }

    body.page-dashboard #section-subscription .subscription-sync-note {
        margin-top: 18px;
    }

    body.page-dashboard #section-subscription .retention-conditions {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-subscription .retention-condition-card,
    body.page-dashboard #section-subscription .retention-condition-card:last-child {
        padding: 13px 0;
        border-right: 0;
        border-bottom: 1px solid var(--subscription-line);
    }

    body.page-dashboard #section-subscription .retention-condition-card:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-subscription .subscription-page-kicker,
    body.page-dashboard #section-subscription .subscription-header-main p {
        display: none;
    }

    body.page-dashboard #section-subscription .subscription-hero-content {
        padding: 17px;
    }

    body.page-dashboard #section-subscription .hero-left {
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard #section-subscription .subscription-plan-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    body.page-dashboard #section-subscription .hero-badge {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body.page-dashboard #section-subscription .hero-title h2 {
        font-size: 20px;
    }

    body.page-dashboard #section-subscription .subscription-details-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-subscription .detail-card,
    body.page-dashboard #section-subscription .detail-card:nth-child(n) {
        min-height: 68px;
        padding: 13px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--subscription-line);
    }

    body.page-dashboard #section-subscription .detail-card:last-child {
        border-bottom: 0;
    }

    body.page-dashboard #section-subscription .subscription-actions-panel {
        padding: 17px;
    }

    body.page-dashboard #section-subscription .history-header,
    body.page-dashboard #section-subscription .subscription-history-pagination {
        padding-right: 15px;
        padding-left: 15px;
    }

    body.page-dashboard #section-subscription .history-timeline {
        padding: 0 15px;
    }

    body.page-dashboard #section-subscription .history-item-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    body.page-dashboard #section-subscription .history-item-tags {
        justify-content: flex-start;
    }

    body.page-dashboard #section-subscription .retention-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.page-dashboard #section-subscription .retention-condition-card {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    body.page-dashboard #section-subscription .condition-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* ============================================================
   UI25 搜索求片：搜索、统计与结果分区
   ============================================================ */
body.page-dashboard #section-search {
    --search-ink: #202020;
    --search-muted: #6d809d;
    --search-line: #e1e8f2;
    --search-soft: #f7f7f6;
    --search-danger: #a94343;
    max-width: none;
}

body.page-dashboard #section-search :is(h1, h2, h3, p, span, small, strong, button, input, select, label) {
    letter-spacing: 0;
}

body.page-dashboard #section-search .search-section-header {
    min-height: 0;
    align-items: flex-end;
    margin-bottom: 18px;
    padding-bottom: 15px;
}

body.page-dashboard #section-search .search-heading-copy {
    min-width: 0;
}

body.page-dashboard #section-search .search-page-kicker,
body.page-dashboard #section-search .search-results-kicker {
    display: block;
    margin-bottom: 5px;
    color: #6d809d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-dashboard #section-search .search-section-header h1 {
    margin: 0 0 5px;
    color: var(--search-ink);
    font-size: 28px;
    font-weight: 760;
    line-height: 1.2;
}

body.page-dashboard #section-search .search-section-header p {
    margin: 0;
    color: var(--search-muted);
    font-size: 12px;
    line-height: 1.55;
}

body.page-dashboard #section-search .search-heading-status {
    display: grid;
    min-width: 104px;
    grid-template-columns: 1fr;
    justify-items: end;
    gap: 3px;
    padding: 8px 11px;
    color: var(--search-muted);
    background: #fff;
    border: 1px solid var(--search-line);
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.2;
}

body.page-dashboard #section-search .search-heading-status strong {
    color: var(--search-ink);
    font-size: 15px;
    font-weight: 760;
}

body.page-dashboard #section-search .search-command-panel {
    margin: 0 0 12px;

    background: #fff;
    border: 1px solid var(--search-line);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-search .search-command-label {
    display: block;
    margin: 0 0 8px;
    color: var(--search-ink);
    font-size: 11px;
    font-weight: 720;
}

body.page-dashboard #section-search .search-box {
    display: grid;
    width: 100%;
    min-width: 0;

    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 5px 5px 5px 15px;
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.page-dashboard #section-search .search-box:focus-within {
    border-color: #202020 !important;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, .07) !important;
}

body.page-dashboard #section-search .search-input-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;

}

body.page-dashboard #section-search :is(.search-input-icon, .search-box button, .search-filter-title, .search-metric-icon, .search-state-icon, .movie-rating-badge, .movie-card-cta) svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-search .search-box input {
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0;
    color: var(--search-ink);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 42px;
}

body.page-dashboard #section-search .search-box input::placeholder {
    color: #6d809d;
    opacity: 1;
}

body.page-dashboard #section-search .search-box input::-webkit-search-cancel-button {
    cursor: pointer;
}

body.page-dashboard #section-search .search-box button {
    display: inline-flex;
    width: auto;
    min-width: 102px;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0 17px;
    color: #fff !important;
    background: #202020 !important;
    border: 1px solid #202020 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 720;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-box button:hover {
    color: #fff !important;
    background: #000 !important;

    transform: none !important;
}

body.page-dashboard #section-search .search-box button:disabled {
    cursor: wait;
    opacity: .72;
}

body.page-dashboard #section-search .search-box button.loading {
    background: #202020 !important;
}

body.page-dashboard #section-search .search-box button .btn-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
}

body.page-dashboard #section-search .search-filters {
    display: flex;
    min-width: 0;



    padding-top: 13px;

}

body.page-dashboard #section-search .search-filter-title {
    display: inline-flex;

    align-items: center;
    gap: 7px;
    margin-right: auto;


    font-weight: 700;
}

body.page-dashboard #section-search .search-filter-title svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard #section-search .filter-group {
    display: grid;


}

body.page-dashboard #section-search .filter-group label {


    font-weight: 650;
}

body.page-dashboard #section-search .filter-group select {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 30px 0 10px;
    color: var(--search-ink);
    background-color: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    outline: 0;
    font-family: inherit;
    font-size: 10px;
}

body.page-dashboard #section-search .filter-group select:focus {
    border-color: #202020;
    box-shadow: 0 0 0 2px rgba(32, 32, 32, .06);
}

body.page-dashboard #section-search .filter-reset {
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 650;
}

body.page-dashboard #section-search .filter-reset:hover {
    color: #202020;
    background: #f7f7f6;
    border-color: #cbd8e8;
}

body.page-dashboard #section-search .search-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0 0 24px;
    padding: 0;
    background: var(--search-line);
    border: 1px solid var(--search-line);
    border-radius: 8px;
}

body.page-dashboard #section-search .search-metric {
    display: grid;
    min-width: 0;

    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    background: #fff !important;
}

body.page-dashboard #section-search .search-metric-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard #section-search .search-metric-icon svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-search .search-metric-copy {
    display: flex;

    flex-direction: column;

}

body.page-dashboard #section-search .search-metric-copy small {


    font-weight: 620;
}

body.page-dashboard #section-search .search-metric-copy strong {



    font-weight: 760;


}

body.page-dashboard #section-search #message:empty {
    display: none;
}

body.page-dashboard #section-search #message:not(:empty) {
    margin: 0 0 14px;
}

body.page-dashboard #section-search .search-results-region {
    min-width: 0;
}

body.page-dashboard #section-search .search-results-toolbar {
    display: flex;


    justify-content: space-between;

    margin-bottom: 12px;


}

body.page-dashboard #section-search .search-results-toolbar h2 {



    color: var(--search-ink);

    font-weight: 750;



}

body.page-dashboard #section-search .search-results-count {
    display: inline-flex;

    flex: 0 0 auto;
    align-items: center;
    padding: 0 9px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 999px;

    font-weight: 650;
}

body.page-dashboard #section-search .search-loading {
    display: none;
}

body.page-dashboard #section-search .search-results {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    align-items: stretch;
    gap: 13px;
    margin: 0;
}

body.page-dashboard #section-search .search-state {
    display: flex;
    min-height: 250px;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 20px;
    color: var(--search-muted);
    background: #fff;
    border: 1px dashed #e1e8f2;
    border-radius: 8px;
    text-align: center;
}

body.page-dashboard #section-search .search-state-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-search .search-state-icon svg {
    width: 20px;
    height: 20px;
}

body.page-dashboard #section-search .search-state h3 {
    margin: 0 0 6px;
    color: var(--search-ink);
    font-size: 14px;
    font-weight: 730;
}

body.page-dashboard #section-search .search-state p {
    margin: 0;
    color: var(--search-muted);
    font-size: 10px;
    line-height: 1.5;
}

body.page-dashboard #section-search .search-state-error .search-state-icon {
    color: var(--search-danger);
    border-color: #ead5d5;
}

body.page-dashboard #section-search .movie-card {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: var(--search-ink);
    background: #fff !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    cursor: pointer;
    outline: 0;
    transform: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.page-dashboard #section-search .movie-card:hover,
body.page-dashboard #section-search .movie-card:focus-visible {
    background: #fff !important;
    border-color: #8b9bb2 !important;
    box-shadow: 0 8px 24px rgba(24, 24, 24, .08) !important;
    transform: none !important;
}

body.page-dashboard #section-search .movie-card.requested::after {
    content: none !important;
}

body.page-dashboard #section-search .movie-card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #f2f2f1;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard #section-search .movie-card img.movie-poster,
body.page-dashboard #section-search .movie-card .no-poster {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: #f2f2f1;
}

body.page-dashboard #section-search .movie-card img.movie-poster {
    transition: opacity .2s ease;
}

body.page-dashboard #section-search .no-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d809d;
}

body.page-dashboard #section-search .no-poster svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-search :is(.movie-type-badge, .movie-rating-badge, .requested-badge, .emby-badge) {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 7px;
    color: #202020;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(220, 216, 211, .92) !important;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(20, 20, 20, .08) !important;
    backdrop-filter: blur(6px);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

body.page-dashboard #section-search .movie-type-badge {
    bottom: 9px;
    left: 9px;
}

body.page-dashboard #section-search .movie-rating-badge {
    right: 9px;
    bottom: 9px;
}

body.page-dashboard #section-search .movie-rating-badge svg {
    width: 12px;
    height: 12px;
}

body.page-dashboard #section-search .requested-badge {
    top: 9px;
    right: 9px;
}

body.page-dashboard #section-search .emby-badge {
    top: 9px !important;
    right: auto !important;
    left: 9px !important;
}

body.page-dashboard #section-search .emby-badge-partial {
    color: #735b20;
    border-color: #e7d8aa !important;
}

body.page-dashboard #section-search .movie-card .info {
    display: flex;
    min-width: 0;
    min-height: 116px;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 12px 11px;
}

body.page-dashboard #section-search .movie-card h3 {
    display: -webkit-box;
    min-height: 38px;
    margin: 0 0 7px;
    overflow: hidden;
    color: var(--search-ink);
    font-size: 13px;
    font-weight: 730;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.page-dashboard #section-search .movie-card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: var(--search-muted);
    font-size: 9px;
    line-height: 1.35;
}

body.page-dashboard #section-search .movie-card-meta > span:nth-child(2) {
    width: 3px;
    height: 3px;
    flex: 0 0 3px;
    background: #8b9bb2;
    border-radius: 50%;
}

body.page-dashboard #section-search .movie-card-cta {
    display: flex;
    min-height: 28px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 11px;
    color: #34445d;
    border-top: 1px solid #e1e8f2;
    font-size: 9px;
    font-weight: 680;
}

body.page-dashboard #section-search .movie-card-cta svg {
    width: 14px;
    height: 14px;
}

body.page-dashboard #section-search .skeleton-card {
    overflow: hidden;
    min-width: 0;
    background: #fff !important;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-search .skeleton-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    padding: 0;
    background: #f1f1f0;
}

body.page-dashboard #section-search .skeleton-info {
    min-height: 116px;
    padding: 12px;
}

body.page-dashboard #section-search :is(.skeleton-title, .skeleton-year, .skeleton-rating, .skeleton-tag) {
    background: #e1e8f2;
    background-image: none;
    border-radius: 4px;
}

body.page-dashboard #section-search .skeleton-tag {
    margin-top: 13px;
}

body.page-dashboard #section-search #searchPagination {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
}

body.page-dashboard #section-search #searchPagination:empty {
    display: none;
}

body.page-dashboard #section-search #searchPagination button {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    box-shadow: none;
    font-size: 10px;
}

body.page-dashboard #section-search #searchPagination button.active {
    color: #fff;
    background: #202020;
    border-color: #202020;
}

body.page-dashboard #section-search #searchPagination button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

@media (max-width: 900px) {
    body.page-dashboard #section-search .search-results {
        grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    }
}

@media (max-width: 680px) {
    body.page-dashboard #section-search .search-section-header {
        align-items: flex-start;
        flex-direction: row;
    }

    body.page-dashboard #section-search .search-section-header h1 {
        font-size: 24px;
    }

    body.page-dashboard #section-search .search-heading-status {
        min-width: 92px;
    }

    body.page-dashboard #section-search .search-command-panel {
        padding: 13px;
    }

    body.page-dashboard #section-search .search-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    body.page-dashboard #section-search .search-filter-title {
        grid-column: 1 / -1;
        margin: 0;
    }

    body.page-dashboard #section-search .filter-group {
        min-width: 0;
    }

    body.page-dashboard #section-search .filter-reset {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.page-dashboard #section-search .search-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 20px;
    }

    body.page-dashboard #section-search .search-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-search .search-section-header p,
    body.page-dashboard #section-search .search-page-kicker {
        display: none;
    }

    body.page-dashboard #section-search .search-section-header {
        align-items: center;
        margin-bottom: 13px;
        padding-bottom: 12px;
    }

    body.page-dashboard #section-search .search-section-header h1 {
        margin: 0;
        font-size: 22px;
    }

    body.page-dashboard #section-search .search-box {
        min-height: 48px;
        grid-template-columns: 18px minmax(0, 1fr) auto !important;
        gap: 7px;
        padding-left: 11px;
    }

    body.page-dashboard #section-search .search-input-icon {
        width: 18px;
    }

    body.page-dashboard #section-search .search-box input {
        height: 38px;
        font-size: 12px;
        line-height: 38px;
    }

    body.page-dashboard #section-search .search-box button {
        width: 42px;
        min-width: 42px;
        height: 38px;
        padding: 0;
    }

    body.page-dashboard #section-search .search-box button span {
        display: none;
    }

    body.page-dashboard #section-search .search-metric {
        min-height: 68px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding: 11px;
    }

    body.page-dashboard #section-search .search-metric-icon {
        width: 32px;
        height: 32px;
    }

    body.page-dashboard #section-search .search-metric-copy strong {
        font-size: 17px;
    }

    body.page-dashboard #section-search .search-results-toolbar {
        align-items: center;
        margin-bottom: 10px;
    }

    body.page-dashboard #section-search .search-results-toolbar h2 {
        max-width: 68vw;
        font-size: 15px;
    }

    body.page-dashboard #section-search .search-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    body.page-dashboard #section-search .movie-card .info,
    body.page-dashboard #section-search .skeleton-info {
        min-height: 108px;
        padding: 10px;
    }

    body.page-dashboard #section-search .movie-card h3 {
        min-height: 35px;
        font-size: 12px;
    }

    body.page-dashboard #section-search .search-state {
        min-height: 210px;
    }
}

/* UI26: 求片确认图标使用矢量线框，避免系统 Emoji 基线造成视觉偏移。 */
body.page-dashboard .tv-request-dialog .dialog-heading > .request-confirm-icon {
    display: inline-flex !important;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    text-align: center;
}

body.page-dashboard .tv-request-dialog .dialog-heading > .request-confirm-icon svg {
    display: block;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: none !important;
}

/* ============================================================
   UI27: 邀请返利页，分享主面板、统计带、记录与规则分区
   ============================================================ */
body.page-dashboard #section-invite {
    --invite-ink: #202020;
    --invite-muted: #6d809d;
    --invite-border: #e1e8f2;
    --invite-soft: #f7f9fd;
    --invite-warm: #f1f5fa;
}

body.page-dashboard #section-invite .invite-page-header {
    align-items: flex-end;
}

body.page-dashboard #section-invite .invite-page-heading {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body.page-dashboard #section-invite .invite-page-kicker,
body.page-dashboard #section-invite .invite-panel-kicker {
    display: block;
    margin: 0;
    color: #6d809d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-page-header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-rate-summary {
    display: grid;
    min-width: 250px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--invite-border);
}

body.page-dashboard #section-invite .invite-rate-icon,
body.page-dashboard #section-invite .invite-panel-icon,
body.page-dashboard #section-invite .invite-metric-icon,
body.page-dashboard #section-invite .invite-record-state-icon {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    color: var(--invite-ink);
    background: #fff;
    border: 1px solid var(--invite-border);
    border-radius: 7px;
}

body.page-dashboard #section-invite .invite-rate-icon {
    width: 42px;
    height: 42px;
}

body.page-dashboard #section-invite :is(.invite-rate-icon, .invite-panel-icon, .invite-metric-icon, .invite-record-state-icon) svg,
body.page-dashboard #section-invite .invite-page-copy-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-invite .invite-rate-copy {
    display: grid;
    min-width: 0;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 8px;
}

body.page-dashboard #section-invite .invite-rate-copy small,
body.page-dashboard #section-invite .invite-rate-copy > span {
    color: var(--invite-muted);
    font-size: 10px;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-rate-copy strong {
    grid-row: 1 / 3;
    margin: 0;
    color: var(--invite-ink);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-rate-copy > span {
    grid-column: 1;
}

body.page-dashboard #section-invite .invite-page-layout {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
    grid-template-areas:
        "share share"
        "metrics metrics"
        "records rules";
    gap: 14px;
    align-items: stretch;
}

body.page-dashboard #section-invite :is(.invite-share-panel, .invite-page-metrics, .invite-records-panel, .invite-rules-panel) {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    color: var(--invite-ink);
    background: #fff;
    border: 1px solid var(--invite-border);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-invite .invite-share-panel {
    display: grid;
    grid-area: share;
    gap: 18px;
    padding: 20px;
}

body.page-dashboard #section-invite .invite-panel-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

body.page-dashboard #section-invite .invite-panel-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

body.page-dashboard #section-invite .invite-panel-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    background: var(--invite-soft);
}

body.page-dashboard #section-invite .invite-panel-heading > div {
    min-width: 0;
}

body.page-dashboard #section-invite .invite-panel-heading h2 {
    margin: 2px 0 0;
    color: var(--invite-ink);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-panel-heading p {
    margin: 3px 0 0;
    color: var(--invite-muted);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-validity-badge,
body.page-dashboard #section-invite .invite-record-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 5px 10px;
    color: #34445d;
    background: var(--invite-soft);
    border: 1px solid var(--invite-border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-count strong {
    margin-right: 3px;
    color: var(--invite-ink);
    font-size: inherit;
}

body.page-dashboard #section-invite .invite-share-fields {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
    gap: 10px;
}

body.page-dashboard #section-invite .invite-page-field {
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    min-height: 72px;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard #section-invite .invite-page-field:focus-within {
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, .05);
}

body.page-dashboard #section-invite .invite-page-field-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

body.page-dashboard #section-invite .invite-page-field-copy > :is(span, label) {
    margin: 0;
    color: #6d809d;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-page-field code {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--invite-ink);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 18px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-invite .invite-page-field input {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #34445d;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-invite .invite-page-field input:focus {
    outline: none;
}

body.page-dashboard #section-invite .invite-page-copy-btn {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard #section-invite .invite-page-copy-btn:hover,
body.page-dashboard #section-invite .invite-page-copy-btn:focus-visible,
body.page-dashboard #section-invite .invite-page-copy-btn.invite-page-copy-primary {
    color: #fff;
    background: var(--invite-ink);
    border-color: var(--invite-ink);
    outline: none;
}

body.page-dashboard #section-invite .invite-page-copy-btn.invite-page-copy-primary:hover,
body.page-dashboard #section-invite .invite-page-copy-btn.invite-page-copy-primary:focus-visible {
    background: #000;
    border-color: #000;
}

body.page-dashboard #section-invite .invite-page-copy-btn.is-copied {
    color: #265f48;
    background: #edf6f1;
    border-color: #bfdcca;
}

body.page-dashboard #section-invite .invite-flow {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--invite-border);
}

body.page-dashboard #section-invite .invite-flow-step {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0;
    border-right: 1px solid var(--invite-border);
}

body.page-dashboard #section-invite .invite-flow-step:first-child {
    padding-left: 0;
}

body.page-dashboard #section-invite .invite-flow-step:last-child {
    padding-right: 0;
    border-right: 0;
}

body.page-dashboard #section-invite .invite-flow-number,
body.page-dashboard #section-invite .invite-rule-index {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;

    background: var(--invite-soft);
    border: 1px solid var(--invite-border);
    border-radius: 6px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-flow-step > div,
body.page-dashboard #section-invite .invite-rule-row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body.page-dashboard #section-invite .invite-flow-step strong,
body.page-dashboard #section-invite .invite-rule-row strong {
    color: var(--invite-ink);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.3;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-flow-step span:last-child {
    color: var(--invite-muted);
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-page-metrics {
    display: grid;
    grid-area: metrics;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

body.page-dashboard #section-invite .invite-page-metric {
    display: grid;
    min-width: 0;
    min-height: 98px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-right: 1px solid var(--invite-border);
}

body.page-dashboard #section-invite .invite-page-metric:last-child {
    border-right: 0;
}

body.page-dashboard #section-invite .invite-metric-icon {
    width: 38px;
    height: 38px;
    background: var(--invite-soft);
}

body.page-dashboard #section-invite .invite-metric-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body.page-dashboard #section-invite .invite-metric-copy small,
body.page-dashboard #section-invite .invite-metric-copy > span {
    overflow: hidden;
    color: var(--invite-muted);
    font-size: 9px;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-invite .invite-metric-copy strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    overflow: hidden;
    color: var(--invite-ink);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-metric-copy strong em {
    color: #34445d;
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

body.page-dashboard #section-invite .invite-records-panel,
body.page-dashboard #section-invite .invite-rules-panel {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    padding: 20px;
}

body.page-dashboard #section-invite .invite-records-panel {
    grid-area: records;
}

body.page-dashboard #section-invite .invite-rules-panel {
    grid-area: rules;
}

body.page-dashboard #section-invite .invite-records-list,
body.page-dashboard #section-invite .invite-rules-list {
    min-width: 0;
    margin-top: 16px;
    border-top: 1px solid var(--invite-border);
}

body.page-dashboard #section-invite .invite-records-list {
    max-height: 330px;
    overflow-y: auto;
    scrollbar-width: thin;
}

body.page-dashboard #section-invite .invite-record-row {
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 2px;
    background: #fff;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard #section-invite .invite-record-row:last-child {
    border-bottom: 0;
}

body.page-dashboard #section-invite .invite-record-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

body.page-dashboard #section-invite .invite-record-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    overflow: hidden;
    color: #fff;
    background: var(--invite-ink);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-person-copy,
body.page-dashboard #section-invite .invite-record-result {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body.page-dashboard #section-invite .invite-record-person-copy strong,
body.page-dashboard #section-invite .invite-record-result > strong {
    overflow: hidden;
    color: var(--invite-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-invite .invite-record-person-copy span {
    color: var(--invite-muted);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-result {
    justify-items: end;
    flex: 0 0 auto;
    text-align: right;
}

body.page-dashboard #section-invite .invite-record-status {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 3px 8px;
    color: #34445d;
    background: var(--invite-soft);
    border: 1px solid var(--invite-border);
    border-radius: 999px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-status.status-approved {
    color: #286046;
    background: #edf6f1;
    border-color: #cfe5d8;
}

body.page-dashboard #section-invite .invite-record-status.status-pending {
    color: #73551d;
    background: #fbf5e8;
    border-color: #ead9b4;
}

body.page-dashboard #section-invite .invite-record-state {
    display: flex;
    min-height: 190px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--invite-muted);
    text-align: center;
}

body.page-dashboard #section-invite .invite-record-state-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 3px;
    background: var(--invite-soft);
}

body.page-dashboard #section-invite .invite-record-state strong {
    color: var(--invite-ink);
    font-size: 12px;
    font-weight: 720;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-state > span:last-child {
    color: var(--invite-muted);
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0;
}

body.page-dashboard #section-invite .invite-record-loading .invite-record-state-icon svg {
    animation: inviteRecordSpin 1.2s linear infinite;
}

body.page-dashboard #section-invite .invite-rules-list {
    display: grid;
}

body.page-dashboard #section-invite .invite-rule-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 15px 0;
    border-bottom: 1px solid #e1e8f2;
}

body.page-dashboard #section-invite .invite-rule-row:last-child {
    border-bottom: 0;
}

body.page-dashboard #section-invite .invite-rule-row p {
    margin: 0;
    color: var(--invite-muted);
    font-size: 9px;
    line-height: 1.55;
    letter-spacing: 0;
}

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

@media (min-width: 1025px) {
    body.page-dashboard #section-invite.panel-fullscreen-active .invite-page-layout {
        flex: 1;
        min-height: 0;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    body.page-dashboard #section-invite.panel-fullscreen-active :is(.invite-records-panel, .invite-rules-panel) {
        min-height: 0;
        overflow: hidden;
    }

    body.page-dashboard #section-invite.panel-fullscreen-active :is(.invite-records-list, .invite-rules-list) {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}

@media (max-width: 1024px) {
    body.page-dashboard #section-invite .invite-page-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "share"
            "metrics"
            "records"
            "rules";
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-invite .invite-page-header {
        align-items: stretch;
    }

    body.page-dashboard #section-invite .invite-rate-summary {
        width: 100%;
        min-width: 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--invite-border);
        border-left: 0;
    }

    body.page-dashboard #section-invite .invite-share-fields {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-invite .invite-page-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-invite .invite-page-metric:nth-child(2) {
        border-right: 0;
    }

    body.page-dashboard #section-invite .invite-page-metric:nth-child(-n + 2) {
        border-bottom: 1px solid var(--invite-border);
    }
}

@media (max-width: 560px) {
    body.page-dashboard #section-invite .invite-page-header h1 {
        font-size: 23px;
    }

    body.page-dashboard #section-invite .invite-share-panel,
    body.page-dashboard #section-invite :is(.invite-records-panel, .invite-rules-panel) {
        padding: 15px;
    }

    body.page-dashboard #section-invite .invite-validity-badge {
        display: none;
    }

    body.page-dashboard #section-invite .invite-flow {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-invite .invite-flow-step,
    body.page-dashboard #section-invite .invite-flow-step:first-child,
    body.page-dashboard #section-invite .invite-flow-step:last-child {
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid var(--invite-border);
    }

    body.page-dashboard #section-invite .invite-flow-step:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    body.page-dashboard #section-invite .invite-page-metric {
        min-height: 84px;
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding: 12px;
    }

    body.page-dashboard #section-invite .invite-metric-icon {
        width: 32px;
        height: 32px;
    }

    body.page-dashboard #section-invite .invite-metric-copy strong {
        font-size: 20px;
    }

    body.page-dashboard #section-invite .invite-record-row {
        align-items: flex-start;
        gap: 10px;
    }

    body.page-dashboard #section-invite .invite-record-result {
        max-width: 42%;
    }
}

@media (max-width: 380px) {
    body.page-dashboard #section-invite .invite-panel-heading p,
    body.page-dashboard #section-invite .invite-metric-copy > span {
        display: none;
    }

    body.page-dashboard #section-invite .invite-page-metric {
        min-height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard #section-invite .invite-record-loading .invite-record-state-icon svg {
        animation: none;
    }
}

/* ============================================================
   UI28: 我的信息与操作日志，统一账户中心的布局和记录层级
   ============================================================ */
body.page-dashboard :is(#section-profile, #section-activity-logs) {
    --account-text: var(--ui-ink);
    --account-muted: var(--ui-muted);
    --account-subtle: var(--ui-muted);
    --account-border: var(--ui-border);
    --account-border-strong: var(--ui-border-strong);
    --account-soft: var(--ui-soft);
    --account-warm: var(--ui-blue-soft);
    --account-success: #39705a;
    --account-success-bg: #edf6f1;
    --account-danger: #aa4e48;
    --account-danger-bg: #fff3f1;
    color: var(--account-text);
}

body.page-dashboard :is(#section-profile, #section-activity-logs) * {
    box-sizing: border-box;
    letter-spacing: 0;
}

body.page-dashboard :is(#section-profile, #section-activity-logs) :is(button, select, input) {
    font: inherit;
}

body.page-dashboard :is(#section-profile, #section-activity-logs) svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 我的信息 */
body.page-dashboard #section-profile .profile-page-header {
    min-height: 76px;
    align-items: flex-end;
}

body.page-dashboard #section-profile .profile-header-copy {
    min-width: 0;
}

body.page-dashboard #section-profile .profile-page-kicker,
body.page-dashboard #section-profile .user-profile-kicker,
body.page-dashboard #section-profile .profile-management-eyebrow {
    display: block;
    margin: 0 0 6px;
    color: var(--account-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

body.page-dashboard #section-profile .profile-page-header h1 {
    margin: 0 0 5px;
    color: var(--account-text);
    font-size: 27px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
}

body.page-dashboard #section-profile .profile-page-header p {
    margin: 0;
    color: var(--account-muted);
    font-size: 12px;
}

body.page-dashboard #section-profile .profile-header-state {
    display: grid;
    grid-template-columns: 8px auto;
    gap: 2px 8px;
    min-width: 142px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 8px;
}

body.page-dashboard #section-profile .profile-header-state-dot {
    grid-row: 1 / 3;
    align-self: center;
    width: 8px;
    height: 8px;
    background: var(--account-success);
    border-radius: 50%;
}

body.page-dashboard #section-profile .profile-header-state > span:not(.profile-header-state-dot) {
    color: var(--account-subtle);
    font-size: 9px;
    line-height: 1.2;
}

body.page-dashboard #section-profile .profile-header-state strong {
    color: var(--account-text);
    font-size: 12px;
    font-weight: 700;
}

body.page-dashboard #section-profile .profile-page-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
}

body.page-dashboard #section-profile .profile-overview-column {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    align-items: stretch;
}

body.page-dashboard #section-profile :is(.user-profile-card, .stats-section-v2, .feature-card-v2) {
    min-width: 0;
    height: auto;
    margin: 0;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile .user-profile-card {
    display: flex;
    min-height: 0;
    padding: 20px;
}

body.page-dashboard #section-profile .user-profile-header {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

body.page-dashboard #section-profile .user-profile-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 15px;
}

body.page-dashboard #section-profile .user-avatar-lg {
    display: grid;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    place-items: center;
    padding: 0;

    background: #0c1628;
    border: 0;
    border-radius: 8px;

}

body.page-dashboard #section-profile .user-avatar-lg::before,
body.page-dashboard #section-profile .user-avatar-lg::after {
    display: none;
}

body.page-dashboard #section-profile .user-avatar-lg span {
    font-size: 24px;
    font-weight: 760;
    line-height: 1;
}

body.page-dashboard #section-profile .user-profile-info {
    min-width: 0;
}

body.page-dashboard #section-profile .user-display-name {
    margin: 0 0 9px;
    overflow: hidden;
    color: var(--account-text);
    font-size: 23px;
    font-weight: 760;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-profile .user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.page-dashboard #section-profile .user-plan-badges {
    display: inline-flex;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 6px;
}

body.page-dashboard #section-profile .user-badge {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #34445d !important;
    background: var(--account-soft) !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body.page-dashboard #section-profile .user-badge.badge-emby {
    color: var(--account-success) !important;
    background: var(--account-success-bg) !important;
    border-color: #d5e9df !important;
}

body.page-dashboard #section-profile .user-badge:is(.badge-banned, .badge-warning) {
    color: var(--account-danger) !important;
    background: var(--account-danger-bg) !important;
    border-color: #f0d5d1 !important;
}

body.page-dashboard #section-profile .badge-status-dot {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

body.page-dashboard #section-profile .user-profile-actions {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;


    border-top: 0;
    border-left: 1px solid var(--account-border);
}

body.page-dashboard #section-profile .user-delete-btn {
    display: inline-flex;
    width: auto;

    align-items: center;
    justify-content: center;



    background: #fff !important;



}

body.page-dashboard #section-profile .user-delete-btn:hover {

    background: var(--account-danger-bg) !important;
    transform: none;
}



body.page-dashboard #section-profile .user-delete-hint {
    color: var(--account-subtle);
    font-size: 10px;
    text-align: right;
}

body.page-dashboard #section-profile .stats-section-v2 {
    min-height: 0;

}

body.page-dashboard #section-profile .profile-stats-heading,
body.page-dashboard #section-profile .library-stats-header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;


}

body.page-dashboard #section-profile .section-title-v2,
body.page-dashboard #section-profile .library-title-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

body.page-dashboard #section-profile .section-title-v2 {
    color: var(--account-text);
    font-size: 14px;
    font-weight: 720;
}

body.page-dashboard #section-profile .profile-stats-caption,
body.page-dashboard #section-profile .library-total {
    color: var(--account-subtle);
    font-size: 10px;
}

body.page-dashboard #section-profile :is(.title-icon--stats, .library-icon) {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #34445d;
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 7px;
}

body.page-dashboard #section-profile :is(.title-icon--stats, .library-icon)::before {
    display: none;
}

body.page-dashboard #section-profile :is(.title-icon--stats, .library-icon) svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard #section-profile .stats-row,
body.page-dashboard #section-profile .library-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 0;
}

/* UI41: profile data cards share the media-library card dimensions. */
body.page-dashboard #section-profile .stats-row .stat-item-v2,
body.page-dashboard #section-profile .library-stat-item {
    display: flex;
    min-width: 0;
    min-height: 74px;
    align-items: center;
    gap: 11px;
    padding: 17px 18px;
    background: #fff !important;
    border: 0 !important;
    border-right: 1px solid var(--account-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile :is(.stat-item-v2, .library-stat-item):last-child {
    border-right: 0 !important;
}

body.page-dashboard #section-profile .stat-item-v2:hover,
body.page-dashboard #section-profile .library-stat-item:hover {
    transform: none;
}

body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon) {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;

    background: var(--account-soft) !important;
    border: 1px solid var(--account-border);
    border-radius: 7px;
}

body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon)::before {
    display: none;
}

body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon) svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-profile :is(.stat-info-v2, .library-stat-data) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body.page-dashboard #section-profile :is(.stat-num, .library-stat-value) {
    color: var(--account-text);
    font-size: 19px;
    font-weight: 760;
    line-height: 1.1;
}

body.page-dashboard #section-profile :is(.stat-text, .library-stat-label) {
    color: var(--account-muted);
    font-size: 10px;
    line-height: 1.3;
}

body.page-dashboard #section-profile .library-stats-card {
    padding: 0;
    margin: 0;
    background: #fff;


    border-radius: 0;

}

body.page-dashboard #section-profile .library-stats-header {
    min-height: 45px;
    padding-block: 8px;
}

body.page-dashboard #section-profile .library-title {
    color: var(--account-text);
    font-size: 12px;
    font-weight: 700;
}

body.page-dashboard #section-profile .library-stats-grid .library-stat-item {
    min-height: 74px;
}

body.page-dashboard #section-profile .profile-management-area {
    display: grid;
    min-width: 0;
    gap: 14px;
}

body.page-dashboard #section-profile .profile-management-header {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 8px;
}

body.page-dashboard #section-profile .profile-management-header h3 {
    margin: 0 0 4px;
    color: var(--account-text);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: 0;
}

body.page-dashboard #section-profile .profile-management-header p {
    margin: 0;
    color: var(--account-muted);
    font-size: 11px;
    line-height: 1.5;
}

body.page-dashboard #section-profile .profile-security-note {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: #34445d;
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 999px;
    font-size: 9px;
    white-space: nowrap;
}

body.page-dashboard #section-profile .feature-cards-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

body.page-dashboard #section-profile .profile-feature-stack {
    display: grid;
    min-width: 0;
    gap: 14px;
    align-content: start;
}

body.page-dashboard #section-profile .feature-card-header-v2 {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 61px;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: #fff !important;
    border-bottom: 1px solid var(--account-border);
}

body.page-dashboard #section-profile .feature-icon-v2 {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #34445d;
    background: var(--account-soft) !important;
    border: 1px solid var(--account-border);
    border-radius: 7px;
}

body.page-dashboard #section-profile .feature-icon-v2::before {
    display: none;
}

body.page-dashboard #section-profile .feature-icon-v2 svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-profile .feature-title-v2 {
    min-width: 0;
    color: var(--account-text);
    font-size: 14px;
    font-weight: 720;
}

body.page-dashboard #section-profile .feature-badge {
    padding: 5px 8px;
    color: #34445d !important;
    background: var(--account-soft) !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 999px;
    font-size: 10px;
}

body.page-dashboard #section-profile .feature-badge.success {
    color: var(--account-success) !important;
    background: var(--account-success-bg) !important;
    border-color: #d5e9df !important;
}

body.page-dashboard #section-profile .feature-badge:is(.danger, .warning) {
    color: var(--account-danger) !important;
    background: var(--account-danger-bg) !important;
    border-color: #f0d5d1 !important;
}

body.page-dashboard #section-profile .feature-card-content-v2 {
    padding: 16px;
    background: #fff !important;
    color: #34445d;
    font-size: 13px;
    line-height: 1.55;
}

body.page-dashboard #section-profile .emby-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding: 0;
    background: #fff;
    border: 0;
}

body.page-dashboard #section-profile .emby-meta-item,
body.page-dashboard #section-profile .emby-info-row {
    min-width: 0;
    padding: 11px 0;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--account-border) !important;
    border-radius: 0 !important;
}

body.page-dashboard #section-profile .emby-meta-item-wide {
    grid-column: 1 / -1;
}

body.page-dashboard #section-profile .emby-meta-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.page-dashboard #section-profile .emby-meta-icon {
    display: inline-flex;
    color: var(--account-subtle);
}

body.page-dashboard #section-profile .emby-meta-icon svg {
    width: 13px;
    height: 13px;
}

body.page-dashboard #section-profile .emby-meta-label,
body.page-dashboard #section-profile .info-key {
    color: var(--account-subtle);
    font-size: 11px;
}

body.page-dashboard #section-profile .emby-meta-value,
body.page-dashboard #section-profile .info-val {
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--account-text);
    font-size: 13px;
    font-weight: 650;
}

body.page-dashboard #section-profile :is(.emby-bindtip, .password-notice-v2, .subscription-sub-tip) {
    color: var(--account-muted);
    background: var(--account-soft) !important;
    border: 1px solid var(--account-border) !important;
    border-radius: 7px !important;
    font-size: 11px;
    line-height: 1.5;
}

body.page-dashboard #section-profile .password-notice-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    padding: 10px 11px;
    font-size: 12px;
    line-height: 1.4;
}

body.page-dashboard #section-profile .notice-mark {
    display: inline-flex;
    flex: 0 0 15px;
    color: #34445d;
}

body.page-dashboard #section-profile .notice-mark svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard #section-profile .form-field-v2 {
    margin-bottom: 12px;
}

body.page-dashboard #section-profile .form-field-v2 label {
    display: block;
    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 650;
}

body.page-dashboard #section-profile .input-group-v2 {
    position: relative;
}

body.page-dashboard #section-profile .input-group-v2 input {
    width: 100%;
    min-height: 42px;
    padding: 10px 40px 10px 12px;
    color: var(--account-text);
    background: #fff;
    border: 1px solid var(--account-border-strong);
    border-radius: 7px;
    outline: 0;
    font-size: 13px;
}

body.page-dashboard #section-profile .input-group-v2 input:focus {
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(31, 30, 28, .08);
}

body.page-dashboard #section-profile .toggle-pwd-v2 {
    display: grid;
    position: absolute;
    top: 50%;
    right: 7px;


    place-items: center;
    padding: 0;

    background: transparent;
    border: 0;

    transform: translateY(-50%);
}

body.page-dashboard #section-profile .btn-v2:is(.btn-primary-v2, .btn-secondary-v2) {
    min-height: 40px;
    color: var(--ui-primary) !important;
    background: var(--ui-blue-soft) !important;
    border: 1px solid #cfe5fa !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 12px;
}

body.page-dashboard #section-profile .btn-v2:is(.btn-primary-v2, .btn-secondary-v2):hover:not(:disabled) {
    color: var(--ui-primary-hover) !important;
    background: #d6eaff !important;
    border-color: #b9d8f9 !important;
    transform: none;
}

body.page-dashboard #section-profile .btn-v2.btn-primary-v2 {
    color: #fff !important;
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

body.page-dashboard #section-profile .btn-v2.btn-primary-v2:hover:not(:disabled) {
    color: #fff !important;
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}

body.page-dashboard #section-profile .btn-v2:is(.btn-primary-v2, .btn-secondary-v2):focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 3px;
}

/* 操作日志 */
body.page-dashboard #section-activity-logs .activity-page-header {
    min-height: 76px;
    align-items: flex-end;
}

body.page-dashboard #section-activity-logs .activity-page-kicker,
body.page-dashboard #section-activity-logs .activity-records-kicker {
    display: block;
    margin: 0 0 6px;
    color: var(--account-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-dashboard #section-activity-logs .activity-page-header h1 {
    margin: 0 0 5px;
    color: var(--account-text);
    font-size: 27px;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
}

body.page-dashboard #section-activity-logs .activity-page-header p {
    margin: 0;
    color: var(--account-muted);
    font-size: 12px;
}

body.page-dashboard #section-activity-logs .activity-header-summary {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 5px;
    min-width: 112px;
    justify-items: end;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 8px;
}

body.page-dashboard #section-activity-logs .activity-header-summary > span {
    grid-column: 1 / -1;
    color: var(--account-subtle);
    font-size: 9px;
}

body.page-dashboard #section-activity-logs .activity-header-summary strong {
    color: var(--account-text);
    font-size: 18px;
    line-height: 1;
}

body.page-dashboard #section-activity-logs .activity-header-summary em {
    align-self: end;
    color: var(--account-muted);
    font-size: 9px;
    font-style: normal;
}

body.page-dashboard #section-activity-logs .activity-logs-page {
    display: grid;
    max-width: none;
    gap: 14px;
    margin: 0;
}

body.page-dashboard #section-activity-logs :is(.activity-filter-panel, .activity-records-panel) {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-activity-logs .activity-filter-panel {
    display: grid;
    grid-template-columns: minmax(190px, .45fr) minmax(0, 1.55fr);
    align-items: end;
    gap: 18px;
    padding: 15px;
}

body.page-dashboard #section-activity-logs .activity-filter-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding-bottom: 2px;
}

body.page-dashboard #section-activity-logs .activity-filter-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #34445d;
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 7px;
}

body.page-dashboard #section-activity-logs .activity-filter-icon svg {
    width: 18px;
    height: 18px;
}

body.page-dashboard #section-activity-logs .activity-filter-heading div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body.page-dashboard #section-activity-logs .activity-filter-heading strong {
    color: var(--account-text);
    font-size: 13px;
}

body.page-dashboard #section-activity-logs .activity-filter-heading div > span {
    overflow: hidden;
    color: var(--account-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-activity-logs .activity-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 10px;
    margin: 0;
}

body.page-dashboard #section-activity-logs .activity-filter-field {
    display: grid;
    min-width: 0;
    gap: 6px;
}

body.page-dashboard #section-activity-logs .activity-filter-field > span {
    color: #34445d;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-activity-logs .activity-filter-select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 32px 8px 11px;
    color: var(--account-text);
    background-color: #fff;
    border: 1px solid var(--account-border-strong);
    border-radius: 7px;
    outline: 0;
    box-shadow: none;
}

body.page-dashboard #section-activity-logs .activity-filter-select:focus {
    border-color: #6d809d;
    box-shadow: 0 0 0 3px rgba(31, 30, 28, .08);
}

body.page-dashboard #section-activity-logs .activity-refresh-btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 9px 13px;
    color: #fff;
    background: #0c1628;
    border: 1px solid #0c1628;
    border-radius: 7px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard #section-activity-logs .activity-refresh-btn:hover {
    background: #34445d;
    transform: none;
}

body.page-dashboard #section-activity-logs .activity-refresh-btn svg {
    width: 15px;
    height: 15px;
}

body.page-dashboard #section-activity-logs .activity-records-heading {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--account-border);
}

body.page-dashboard #section-activity-logs .activity-records-heading h2 {
    margin: 0;
    color: var(--account-text);
    font-size: 16px;
    font-weight: 740;
    letter-spacing: 0;
}

body.page-dashboard #section-activity-logs .activity-records-kicker {
    margin-bottom: 4px;
    font-size: 9px;
}

body.page-dashboard #section-activity-logs .activity-page-indicator {
    padding: 5px 8px;
    color: var(--account-muted);
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 999px;
    font-size: 9px;
}

body.page-dashboard #section-activity-logs .activity-list-columns,
body.page-dashboard #section-activity-logs .activity-log-card {
    display: grid;
    grid-template-columns: minmax(160px, .72fr) minmax(220px, 1.3fr) minmax(190px, .8fr) 74px;
    gap: 16px;
}

body.page-dashboard #section-activity-logs .activity-list-columns {
    align-items: center;
    min-height: 35px;
    padding: 8px 16px;

    background: var(--account-soft);
    border-bottom: 1px solid var(--account-border);
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-activity-logs .activity-list-columns span:last-child {
    text-align: right;
}

body.page-dashboard #section-activity-logs .activity-logs-list {
    display: block;
    min-height: 170px;
}

body.page-dashboard #section-activity-logs .activity-log-card {
    min-width: 0;
    align-items: center;
    margin: 0;
    padding: 13px 16px;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid var(--account-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-activity-logs .activity-log-card:last-child {
    border-bottom: 0 !important;
}

body.page-dashboard #section-activity-logs .activity-log-card:hover {
    background: #fcfbfa !important;
    transform: none;
}

body.page-dashboard #section-activity-logs .log-action-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

body.page-dashboard #section-activity-logs .log-icon-wrapper {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #34445d;
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 7px;
}

body.page-dashboard #section-activity-logs .activity-log-card.failed .log-icon-wrapper {
    color: var(--account-danger);
    background: var(--account-danger-bg);
    border-color: #efd6d3;
}

body.page-dashboard #section-activity-logs .log-icon-wrapper svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-activity-logs .log-action-copy,
body.page-dashboard #section-activity-logs .log-detail-cell {
    min-width: 0;
}

body.page-dashboard #section-activity-logs .log-action-name {
    display: block;
    overflow: hidden;
    color: var(--account-text);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-activity-logs .log-mobile-label {
    display: none;
    margin-bottom: 4px;
    color: var(--account-subtle);
    font-size: 9px;
}

body.page-dashboard #section-activity-logs .log-detail-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #34445d;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.page-dashboard #section-activity-logs .log-meta-cell {
    display: grid;
    min-width: 0;
    gap: 5px;
}

body.page-dashboard #section-activity-logs :is(.log-time, .log-ip) {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--account-muted);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-activity-logs :is(.log-time, .log-ip) svg {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    color: var(--account-subtle);
}

body.page-dashboard #section-activity-logs .log-result-cell {
    display: flex;
    justify-content: flex-end;
}

body.page-dashboard #section-activity-logs .log-status-badge {
    display: inline-flex;
    min-width: 53px;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid var(--account-border);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
}

body.page-dashboard #section-activity-logs .log-status-badge i {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

body.page-dashboard #section-activity-logs .log-status-badge.success {
    color: var(--account-success);
    background: var(--account-success-bg);
    border-color: #d5e9df;
}

body.page-dashboard #section-activity-logs .log-status-badge.failed {
    color: var(--account-danger);
    background: var(--account-danger-bg);
    border-color: #efd6d3;
}

body.page-dashboard #section-activity-logs :is(.activity-loading, .activity-empty) {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 28px 20px;
    color: var(--account-muted);
    background: #fff;
    border: 0;
    border-radius: 0;
}

body.page-dashboard #section-activity-logs :is(.activity-loading, .activity-empty) strong {
    color: var(--account-text);
    font-size: 12px;
}

body.page-dashboard #section-activity-logs :is(.activity-loading, .activity-empty) p {
    margin: 0;
    font-size: 10px;
}

body.page-dashboard #section-activity-logs .activity-loading .spinner {
    width: 30px;
    height: 30px;
    margin: 0 0 4px;
    border: 2px solid var(--account-border);
    border-top-color: #0c1628;
}

body.page-dashboard #section-activity-logs .activity-empty .empty-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin: 0 0 4px;
    color: #6d809d;
    background: var(--account-soft);
    border: 1px solid var(--account-border);
    border-radius: 8px;
    font-size: 0;
}

body.page-dashboard #section-activity-logs .activity-empty .empty-icon svg {
    width: 20px;
    height: 20px;
}

body.page-dashboard #section-activity-logs .activity-pagination {
    display: flex;
    min-height: 52px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 9px 16px;
    border-top: 1px solid var(--account-border);
}

body.page-dashboard #section-activity-logs .activity-pagination:empty {
    display: none;
}

body.page-dashboard #section-activity-logs .activity-pagination .pagination-info,
body.page-dashboard #section-activity-logs .activity-pagination .page-current {
    color: var(--account-muted);
    font-size: 9px;
}

body.page-dashboard #section-activity-logs .activity-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dashboard #section-activity-logs .activity-pagination .page-btn {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    color: #34445d;
    background: #fff;
    border: 1px solid var(--account-border-strong);
    border-radius: 7px;
    box-shadow: none;
}

body.page-dashboard #section-activity-logs .activity-pagination .page-btn:hover:not([disabled]) {
    color: #fff;
    background: #0c1628;
    border-color: #0c1628;
}

body.page-dashboard #section-activity-logs .activity-pagination .page-btn[disabled] {
    opacity: .42;
}

body.page-dashboard #section-activity-logs .activity-pagination .page-btn svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-profile .profile-overview-column {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-profile .stat-item-v2,
    body.page-dashboard #section-profile .library-stat-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    body.page-dashboard #section-activity-logs .activity-filter-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    body.page-dashboard #section-profile .profile-page-header,
    body.page-dashboard #section-activity-logs .activity-page-header {
        align-items: flex-start;
    }

    body.page-dashboard #section-profile .profile-overview-column,
    body.page-dashboard #section-profile .feature-cards-v2 {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-profile .user-profile-card,
    body.page-dashboard #section-profile .stats-section-v2 {
        min-height: 0;
    }

    body.page-dashboard #section-profile .stat-item-v2,
    body.page-dashboard #section-profile .library-stat-item {
        flex-direction: row;
        align-items: center;
    }

    body.page-dashboard #section-activity-logs .activity-list-columns,
    body.page-dashboard #section-activity-logs .activity-log-card {
        grid-template-columns: minmax(145px, .7fr) minmax(200px, 1.3fr) minmax(160px, .8fr) 68px;
        gap: 11px;
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-profile .profile-header-state,
    body.page-dashboard #section-activity-logs .activity-header-summary {
        align-self: stretch;
        justify-content: start;
        justify-items: start;
    }

    body.page-dashboard #section-profile .profile-header-state {
        grid-template-columns: 8px auto;
    }

    body.page-dashboard #section-activity-logs .activity-header-summary {
        grid-template-columns: auto auto auto;
        align-items: baseline;
        justify-content: start;
    }

    body.page-dashboard #section-activity-logs .activity-header-summary > span {
        grid-column: auto;
    }

    body.page-dashboard #section-profile .stats-row,
    body.page-dashboard #section-profile .library-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-dashboard #section-profile .stat-item-v2,
    body.page-dashboard #section-profile .library-stat-item {
        min-height: 84px;
        padding: 11px;
    }

    body.page-dashboard #section-activity-logs .activity-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-activity-logs .activity-refresh-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.page-dashboard #section-activity-logs .activity-list-columns {
        display: none;
    }

    body.page-dashboard #section-activity-logs .activity-log-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 16px;
        align-items: start;
        padding: 15px;
    }

    body.page-dashboard #section-activity-logs .log-action-cell {
        grid-column: 1;
        grid-row: 1;
    }

    body.page-dashboard #section-activity-logs .log-result-cell {
        grid-column: 2;
        grid-row: 1;
    }

    body.page-dashboard #section-activity-logs .log-detail-cell,
    body.page-dashboard #section-activity-logs .log-meta-cell {
        grid-column: 1 / -1;
    }

    body.page-dashboard #section-activity-logs .log-mobile-label {
        display: block;
    }

    body.page-dashboard #section-activity-logs .log-meta-cell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid var(--account-border);
    }

    body.page-dashboard #section-activity-logs .log-detail-text {
        display: block;
        -webkit-line-clamp: initial;
    }
}

@media (max-width: 560px) {
    body.page-dashboard #section-profile .profile-page-header h1,
    body.page-dashboard #section-activity-logs .activity-page-header h1 {
        font-size: 23px;
    }

    body.page-dashboard #section-profile .user-profile-card,
    body.page-dashboard #section-profile .profile-management-header,
    body.page-dashboard #section-profile .feature-card-content-v2,
    body.page-dashboard #section-activity-logs .activity-filter-panel {
        padding: 14px;
    }

    body.page-dashboard #section-profile .user-profile-header {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    body.page-dashboard #section-profile .user-profile-main {
        width: 100%;
        align-items: center;
    }

    body.page-dashboard #section-profile .user-profile-info {
        flex: 1 1 auto;
        width: auto;
    }

    body.page-dashboard #section-profile .user-profile-actions,
    body.page-dashboard #section-profile .profile-management-header {
        align-items: stretch;
        flex-direction: column;
    }

    body.page-dashboard #section-profile .user-profile-actions {

        margin: 0;
        padding: 14px 0 0;

        border-left: 0;
    }

    body.page-dashboard #section-profile .user-delete-btn {
        width: 100%;
        height: 40px;
        min-height: 40px;
        flex: 0 0 40px;
    }

    body.page-dashboard #section-profile .user-delete-hint {
        text-align: center;
    }

    body.page-dashboard #section-profile .profile-security-note {
        align-self: flex-start;
    }

    body.page-dashboard #section-profile .stats-row,
    body.page-dashboard #section-profile .library-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.page-dashboard #section-profile .stat-item-v2,
    body.page-dashboard #section-profile .library-stat-item {
        min-height: 92px;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 10px;
    }

    body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon) {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    body.page-dashboard #section-profile :is(.stat-num, .library-stat-value) {
        max-width: 100%;
        overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
    }

    body.page-dashboard #section-profile .emby-meta-grid,
    body.page-dashboard #section-activity-logs .activity-filter-bar,
    body.page-dashboard #section-activity-logs .log-meta-cell {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-profile .emby-meta-item-wide,
    body.page-dashboard #section-activity-logs .activity-refresh-btn {
        grid-column: 1;
    }

    body.page-dashboard #section-activity-logs .activity-filter-heading div > span {
        white-space: normal;
    }

    body.page-dashboard #section-activity-logs .activity-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    body.page-dashboard #section-activity-logs .activity-pagination .pagination-controls {
        justify-content: space-between;
    }
}

@media (max-width: 380px) {
    body.page-dashboard #section-profile .profile-stats-caption,
    body.page-dashboard #section-profile .library-total {
        display: none;
    }

    body.page-dashboard #section-profile .user-profile-main {
        align-items: flex-start;
    }

    body.page-dashboard #section-profile .user-avatar-lg {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
    }

    body.page-dashboard #section-activity-logs .activity-log-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-activity-logs :is(.log-action-cell, .log-result-cell, .log-detail-cell, .log-meta-cell) {
        grid-column: 1;
        grid-row: auto;
    }

    body.page-dashboard #section-activity-logs .log-result-cell {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard #section-activity-logs .activity-loading .spinner {
        animation: none;
    }
}

/* 播放监控刷新是文字按钮，不继承全局的紧凑图标按钮尺寸。 */
body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 13px;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn::before {
    display: none;
    content: none;
}

body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn svg,
body.page-dashboard #section-playback .playback-header-tools .playback-refresh-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

body.page-dashboard #section-playback .playback-header-tools .playback-refresh-spinner {
    border-width: 2px;
}

body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn:hover:not(:disabled) {
    color: #fff;
    background: #202020;
    border-color: #202020;
}

body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn:disabled {
    opacity: .65;
    cursor: wait;
}

@media (max-width: 768px) {
    body.page-dashboard #section-playback .playback-header-tools .playback-refresh-btn {
        width: 100%;
        min-width: 0;
    }
}

/* 强制绑定页沿用绑定卡片，在后端放行前不渲染面板。 */
body.page-dashboard .force-bind-tg-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(24, 24, 24, .48);
    backdrop-filter: blur(3px);
}

body.page-dashboard .force-bind-tg-dialog {
    display: grid;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}

body.page-dashboard .force-bind-header {
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
}

body.page-dashboard .force-bind-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #202020;
    background: #f7f9fd;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    font-size: 20px;
}

body.page-dashboard .force-bind-header h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

body.page-dashboard .force-bind-header p {
    margin: 0;
    color: #6d809d;
    font-size: 12px;
    line-height: 1.65;
}

body.page-dashboard .force-bind-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.page-dashboard .force-step {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard .force-step-num {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: #202020;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
}

body.page-dashboard .force-step-content {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 9px;
}

body.page-dashboard .force-step-content label {
    color: #202020;
    font-size: 12px;
    font-weight: 750;
}

body.page-dashboard .force-bot-link,
body.page-dashboard .force-bind-code-box {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    color: #202020;
    background: #f7f9fd;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    text-decoration: none;
}

body.page-dashboard .force-bot-link .arrow {
    margin-left: 0;
}

body.page-dashboard .force-bot-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

body.page-dashboard #forceBindBotName {
    min-width: 0;
    font-size: 11px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

body.page-dashboard .force-bind-code-box code {
    min-width: 0;
    overflow: hidden;
    color: #202020;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .force-bind-code-box .copy-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-left: auto;
    padding: 0;
    color: #202020;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
}

body.page-dashboard .force-bind-code-display {
    display: grid;
    gap: 11px;
    padding: 14px;
    background: #f7f9fd;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
}

body.page-dashboard .force-bind-code-display .code-header,
body.page-dashboard .force-bind-code-display .code-main {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.page-dashboard .force-bind-code-display .code-label,
body.page-dashboard .force-bind-code-display .code-expire {
    color: #6d809d;
    font-size: 11px;
}

body.page-dashboard .force-bind-code-display .code-value {
    min-width: 0;
    overflow: hidden;
    color: #202020;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
}

body.page-dashboard .force-bind-code-display .refresh-btn {
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    place-items: center;
    padding: 0;
    color: #fff;
    background: #202020;
    border: 0;
    border-radius: 7px;
    font-size: 0;
    line-height: 0;
}

body.page-dashboard .force-bind-code-display .refresh-btn::before {
    display: none;
    content: none;
}

body.page-dashboard .force-bind-code-display .refresh-btn svg {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard .force-bind-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 13px;
    color: #34445d;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
}

body.page-dashboard.page-telegram-binding {
    display: block;
    min-height: 100dvh;
    background: #f5f8fc;
}

body.page-dashboard.page-telegram-binding #telegramBindingPage {
    position: static;
    min-height: 100dvh;
    align-items: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.page-dashboard.page-telegram-binding .force-bind-tg-dialog {
    max-height: none;
    border-color: #dce8f7;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(55, 88, 130, .1);
}

body.page-dashboard.page-telegram-binding .force-bot-link[hidden] {
    display: none;
}

body.page-dashboard.page-telegram-binding .binding-logout {
    text-align: center;
}

body.page-dashboard.page-telegram-binding .binding-logout button {
    padding: 8px 16px;
    color: #63748a;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 620px) {
    body.page-dashboard .force-bind-tg-overlay {
        align-items: end;
        padding: 12px;
    }

    body.page-dashboard .force-bind-tg-dialog {
        max-height: calc(100vh - 24px);
        padding: 18px;
    }

    body.page-dashboard .force-bind-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard .force-bind-code-display .code-header,
    body.page-dashboard .force-bind-code-display .code-main {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.page-dashboard .force-bind-code-display .code-value {
        font-size: 20px;
    }
}
/* Wallet */
.purchase-wallet-strip {
    min-height: 68px;
    margin: 0 0 18px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #fff;
}

.purchase-wallet-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid #cce4d8;
    border-radius: 7px;
    background: #edf7f2;
    color: #276d56;
}

.purchase-wallet-icon svg,
.wallet-refresh-button svg,
.wallet-ledger-kind svg,
.wallet-unavailable svg,
.purchase-wallet-link svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.purchase-wallet-icon svg {
    width: 21px;
    height: 21px;
}

.purchase-wallet-copy {
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.purchase-wallet-copy span,
.purchase-wallet-note {
    color: #6d809d;
    font-size: 12px;
}

.purchase-wallet-copy strong {
    color: #0c1628;
    font-size: 19px;
    line-height: 1.1;
}

.purchase-wallet-note {
    flex: 1;
}

.purchase-wallet-link {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #fff;
    color: #0c1628;
    font-size: 12px;
    font-weight: 650;
}

.purchase-wallet-link svg {
    width: 15px;
    height: 15px;
}

.wallet-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.wallet-refresh-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #fff;
    color: #34445d;
}

.wallet-refresh-button svg {
    width: 18px;
    height: 18px;
}

.wallet-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wallet-page[hidden],
.wallet-unavailable[hidden],
.wallet-recharge-surface[hidden],
.purchase-wallet-strip[hidden] {
    display: none !important;
}

.wallet-overview-surface {
    min-height: 118px;
    display: grid;
    grid-template-columns: minmax(230px, 1.25fr) repeat(2, minmax(150px, .72fr)) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #fff;
}

.wallet-overview-primary,
.wallet-overview-metric {
    min-width: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border-right: 1px solid #e1e8f2;
}

.wallet-overview-primary {
    background: #f7f9fd;
}

.wallet-overview-primary > span,
.wallet-overview-metric > span,
.wallet-overview-primary > small,
.wallet-overview-metric > small {
    color: #6d809d;
    font-size: 12px;
    line-height: 1.35;
}

.wallet-overview-primary strong {
    color: #0c1628;
    font-size: 32px;
    line-height: 1.08;
    font-variant-numeric: tabular-nums;
}

.wallet-overview-metric strong {
    color: #0c1628;
    font-size: 25px;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.wallet-overview-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    letter-spacing: 0;
    white-space: nowrap;
}

.wallet-overview-value > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.wallet-overview-value .wallet-currency {
    font-size: .78em;
}

.wallet-overview-metric.has-pending strong,
.wallet-overview-metric.has-pending small {
    color: #9b641b;
}

.wallet-purchase-button {
    min-width: 126px;
    margin: 30px 20px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #242422;
    border-radius: 7px;
    background: #242422;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.wallet-purchase-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wallet-workspace {
    display: grid;
    grid-template-columns: minmax(330px, .78fr) minmax(520px, 1.22fr);
    align-items: start;
    gap: 14px;
}

.wallet-recharge-surface,
.wallet-topup-surface,
.wallet-ledger-surface {
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #fff;
}

.wallet-recharge-surface {
    min-width: 0;
    padding: 20px;
}

.wallet-block-heading,
.wallet-ledger-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.wallet-block-heading > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wallet-block-heading span {
    color: #6d809d;
    font-size: 11px;
}

.wallet-block-heading h2 {
    margin: 0;
    color: #0c1628;
    font-size: 16px;
    line-height: 1.25;
}

.wallet-quick-amounts {
    margin: 16px 0 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.wallet-quick-amounts button {
    height: 42px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #fff;
    color: #34445d;
    font-size: 12px;
    font-weight: 650;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.wallet-quick-amounts button:not(.active):not(:disabled):hover {
    border-color: #8b9bb2;
    background: #f7f9fd;
}

.wallet-quick-amounts button.active {
    border-color: #242422;
    background: #242422;
    color: #fff;
}

.wallet-recharge-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.wallet-recharge-field,
.wallet-method-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.wallet-recharge-field,
.wallet-method-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wallet-recharge-field > span:first-child,
.wallet-method-field legend {
    color: #6d809d;
    font-size: 11px;
    font-weight: 600;
}

.wallet-money-input {
    height: 46px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #cbd8e8;
    border-radius: 7px;
    background: #fff;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.wallet-money-input:focus-within {
    border-color: #34445d;
    box-shadow: 0 0 0 3px rgba(36, 35, 33, .09);
}

.wallet-money-prefix {
    width: 44px;
    height: 100%;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-right: 1px solid #e1e8f2;
    background: #f7f9fd;
    color: #34445d;
    font-size: 15px;
    font-weight: 700;
}

.wallet-money-input input {
    width: 100%;
    height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0 14px;
    appearance: textfield;
    -moz-appearance: textfield;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0c1628;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    line-height: 44px;
}

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

.wallet-money-input:has(input:disabled) {
    background: #f1f5fa;
    border-color: #e1e8f2;
}

.wallet-money-input:has(input:disabled) .wallet-money-prefix,
.wallet-money-input input:disabled {
    color: #6d809d;
}

.wallet-method-options {
    height: 46px;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #f1f5fa;
}

.wallet-method-options label {
    min-width: 0;
    position: relative;
}

.wallet-method-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wallet-method-options span {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #6d809d;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.wallet-method-options input:checked + span {
    border: 1px solid #e1e8f2;
    background: #fff;
    color: #0c1628;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(32, 31, 29, .08);
}

.wallet-recharge-button {
    height: 46px;
    padding: 0 15px;
    border: 1px solid #242422;
    border-radius: 7px;
    background: #242422;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.wallet-recharge-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.wallet-recharge-hint {
    min-height: 16px;
    margin: 10px 0 0;
    color: #6d809d;
    font-size: 11px;
}

.wallet-topup-surface {
    min-width: 0;
    overflow: hidden;
}

.wallet-topup-heading,
.wallet-ledger-heading {
    min-height: 62px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e1e8f2;
    background: #f7f9fd;
}

.wallet-topup-rule {
    color: #6d809d;
    font-size: 10px;
    white-space: nowrap;
}

.wallet-topup-list {
    padding: 0 16px;
}

.wallet-topup-pagination {
    min-height: 48px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e1e8f2;
    background: #f7f9fd;
}

.wallet-topup-pagination[hidden] {
    display: none;
}

.wallet-topup-pagination span {
    min-width: 76px;
    color: #6d809d;
    font-size: 11px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wallet-topup-pagination button {
    min-width: 62px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e1e8f2;
    border-radius: 6px;
    background: #fff;
    color: #34445d;
    font-size: 11px;
    font-weight: 650;
}

.wallet-topup-pagination button:hover:not(:disabled) {
    border-color: #8b9bb2;
    background: #f1f5fa;
}

.wallet-topup-pagination button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.wallet-topup-row {
    min-height: 68px;
    padding: 9px 0;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) 104px 126px 118px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e1e8f2;
}

.wallet-topup-row:last-child {
    border-bottom: 0;
}

.wallet-topup-row.pending {
    margin: 0 -16px;
    padding-right: 16px;
    padding-left: 13px;
    border-left: 3px solid #c88b35;
    background: #fffaf2;
}

.wallet-topup-main,
.wallet-topup-payment,
.wallet-topup-state {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wallet-topup-main strong,
.wallet-topup-payment strong,
.wallet-topup-state strong {
    overflow: hidden;
    color: #0c1628;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-topup-main span,
.wallet-topup-payment span,
.wallet-topup-state span {
    color: #6d809d;
    font-size: 10px;
}

.wallet-topup-payment strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.wallet-topup-status {
    width: fit-content;
    padding: 3px 7px;
    border: 1px solid #e1e8f2;
    border-radius: 999px;
    background: #f1f5fa;
    color: #6d809d;
    font-size: 10px;
    font-weight: 650;
}

.wallet-topup-status.pending {
    border-color: #ead5b4;
    background: #fff5e5;
    color: #97601a;
}

.wallet-topup-status.paid {
    border-color: #cce4d8;
    background: #edf7f2;
    color: #28765d;
}

.wallet-topup-status.cancelled,
.wallet-topup-status.expired {
    color: #817b73;
}

.wallet-topup-actions {
    width: 118px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.wallet-topup-actions button {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e1e8f2;
    border-radius: 6px;
    background: #fff;
    color: #34445d;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.wallet-topup-actions .primary {
    border-color: #242422;
    background: #242422;
    color: #fff;
}

.wallet-topup-empty {
    min-height: 148px;
    display: grid;
    place-items: center;
    color: #6d809d;
    font-size: 11px;
}

.wallet-ledger-heading {
    min-height: 62px;
}

.wallet-ledger-filters {
    padding: 3px;
    display: flex;
    gap: 2px;
    border: 1px solid #e1e8f2;
    border-radius: 7px;
    background: #f1f5fa;
}

.wallet-ledger-filters button {
    min-width: 52px;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #6d809d;
    font-size: 11px;
}

.wallet-ledger-filters button.active {
    background: #fff;
    color: #0c1628;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(32, 31, 29, .08);
}

.wallet-ledger-list {
    padding: 0 16px;
}

.wallet-ledger-row {
    min-height: 60px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e1e8f2;
}

.wallet-ledger-row:last-child {
    border-bottom: 0;
}

.wallet-ledger-kind {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 7px;
}

.wallet-ledger-kind.credit {
    border: 1px solid #cce4d8;
    background: #edf7f2;
    color: #28765d;
}

.wallet-ledger-kind.debit {
    transform: rotate(180deg);
    border: 1px solid #ead4cf;
    background: #fbf1ef;
    color: #a14d42;
}

.wallet-ledger-kind svg {
    width: 16px;
    height: 16px;
}

.wallet-ledger-copy,
.wallet-ledger-amount {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wallet-ledger-copy strong {
    overflow: hidden;
    color: #0c1628;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-ledger-copy span,
.wallet-ledger-amount span {
    color: #6d809d;
    font-size: 10px;
}

.wallet-ledger-amount {
    text-align: right;
}

.wallet-ledger-amount strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.wallet-ledger-amount.credit strong {
    color: #28765d;
}

.wallet-ledger-amount.debit strong {
    color: #a14d42;
}

.wallet-ledger-empty,
.wallet-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.wallet-ledger-empty {
    min-height: 130px;
    gap: 5px;
    color: #6d809d;
    font-size: 11px;
}

.wallet-ledger-empty strong {
    color: #34445d;
    font-size: 13px;
}

.wallet-unavailable {
    min-height: 320px;
    gap: 7px;
    border: 1px solid #e1e8f2;
    border-radius: 8px;
    background: #fff;
}

.wallet-unavailable svg {
    width: 34px;
    height: 34px;
    margin-bottom: 5px;
    color: #6d809d;
}

.wallet-unavailable h2,
.wallet-unavailable p {
    margin: 0;
}

.wallet-unavailable h2 {
    color: #0c1628;
    font-size: 16px;
}

.wallet-unavailable p {
    color: #6d809d;
    font-size: 12px;
}

body.page-dashboard #purchaseDialogOverlay .pay-card-wallet {
    grid-column: 1 / -1;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon.wallet {
    border-color: #cce4d8;
    background: #edf7f2;
    color: #28765d;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon.wallet svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #purchaseDialogOverlay .pay-card.is-disabled {
    border-style: dashed;
    background: #f7f9fd;
    cursor: not-allowed;
    opacity: .68;
}

.order-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.order-price-wrap small {
    color: #2f7d64;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .wallet-overview-surface {
        grid-template-columns: minmax(220px, 1.1fr) repeat(2, minmax(130px, .7fr));
    }

    .wallet-overview-metric:nth-of-type(3) {
        border-right: 0;
    }

    .wallet-purchase-button {
        min-height: 40px;
        margin: 0;
        grid-column: 1 / -1;
        border-radius: 0;
    }

    .wallet-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.page-dashboard .content-section > .section-header.wallet-page-header {
        align-items: flex-end;
        flex-direction: row;
    }

    .wallet-refresh-button {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .purchase-wallet-strip {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .purchase-wallet-note {
        display: none;
    }

    .purchase-wallet-link {
        margin-left: auto;
    }

    .wallet-page {
        gap: 10px;
    }

    .wallet-overview-surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wallet-overview-primary {
        grid-column: 1 / -1;
        border-right: 0;
        border-bottom: 1px solid #e1e8f2;
    }

    .wallet-overview-metric {
        padding: 13px 15px;
    }

    .wallet-overview-metric:nth-of-type(2) {
        border-right: 1px solid #e1e8f2;
    }

    .wallet-overview-primary strong {
        font-size: 27px;
    }

    .wallet-overview-metric strong {
        font-size: 19px;
    }

    .wallet-recharge-surface {
        padding: 15px;
    }

    .wallet-topup-heading,
    .wallet-ledger-heading {
        min-height: 58px;
        padding: 11px 14px;
    }

    .wallet-topup-rule {
        max-width: 116px;
        line-height: 1.35;
        text-align: right;
        white-space: normal;
    }

    .wallet-topup-list {
        padding: 0 14px;
    }

    .wallet-topup-pagination {
        padding: 8px 14px;
        justify-content: center;
    }

    .wallet-topup-row {
        min-height: 0;
        padding: 12px 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px 12px;
    }

    .wallet-topup-row.pending {
        margin: 0 -14px;
        padding-right: 14px;
        padding-left: 11px;
    }

    .wallet-topup-payment {
        align-items: flex-end;
        text-align: right;
    }

    .wallet-topup-actions {
        width: auto;
        grid-column: 2;
    }

    .wallet-topup-state {
        justify-content: center;
    }

    .wallet-topup-actions:empty {
        display: none;
    }

    .wallet-ledger-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .wallet-ledger-filters {
        width: 100%;
    }

    .wallet-ledger-filters button {
        flex: 1;
    }

    .wallet-ledger-list {
        padding: 0 14px;
    }

    .wallet-ledger-row {
        min-height: 58px;
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .wallet-ledger-kind {
        width: 28px;
        height: 28px;
    }
}

/* UI24：全用户端页面统一为浅蓝科技视觉系统。 */
body.page-dashboard .content-section > .section-header {
    min-height: 78px;
    align-items: flex-end;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom-color: #dfe7f1;
}

body.page-dashboard .section-heading-copy,
body.page-dashboard .content-section > .section-header > :is(div, .playback-header-main) {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body.page-dashboard :is(
    .page-kicker,
    .search-page-kicker,
    .profile-page-kicker,
    .activity-page-kicker,
    .subscription-page-kicker,
    .invite-page-kicker,
    .wallet-block-heading > div > span,
    .search-results-kicker,
    .activity-records-kicker,
    .invite-panel-kicker,
    .profile-management-eyebrow
) {
    color: #0b7ff3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.page-dashboard .content-section > .section-header h1 {
    margin: 0;
    color: #0c1628;



}

body.page-dashboard .content-section > .section-header p {
    margin: 0;
    color: #6d809d;
    font-size: 12px;

}

body.page-dashboard :is(
    #section-search .search-command-panel,
    #section-search .search-results-region,
    #section-requests .request-item,
    #section-playback .playback-section,
    #section-profile .user-profile-card,
    #section-profile .stats-section-v2,
    #section-profile .library-stats-card,
    #section-profile .feature-card-v2,
    #section-activity-logs .activity-filter-panel,
    #section-activity-logs .activity-records-panel,
    #section-subscription .subscription-hero-card,
    #section-subscription .subscription-actions-panel,
    #section-subscription .subscription-history-section,
    #section-subscription .retention-card,
    #section-purchase .purchase-wallet-strip,
    #section-purchase .redeem-card,
    #section-purchase .plan-card-new,
    #section-purchase .purchase-tips,
    #section-purchase .my-orders-section,
    #section-wallet .wallet-overview-surface,
    #section-wallet .wallet-recharge-surface,
    #section-wallet .wallet-topup-surface,
    #section-wallet .wallet-ledger-surface,
    #section-invite .invite-share-panel,
    #section-invite .invite-page-metrics,
    #section-invite .invite-records-panel,
    #section-invite .invite-rules-panel,
    #section-docs .docs-nav,
    #section-docs .docs-content,
    #section-docs .doc-section,
    #section-faq .faq-search,
    #section-faq .faq-item,
    #section-support .contact-card,
    #section-support .ticket-form-section,
    #section-support .my-tickets-section
) {
    color: #0c1628;
    background: #fff !important;
    border-color: #e1e8f2 !important;
    box-shadow: 0 10px 26px rgba(43, 79, 120, .06) !important;
}

body.page-dashboard :is(
    #section-search .search-command-panel,
    #section-search .search-results-region,
    #section-playback .playback-section,
    #section-profile .user-profile-card,
    #section-profile .stats-section-v2,
    #section-profile .library-stats-card,
    #section-profile .feature-card-v2,
    #section-activity-logs .activity-filter-panel,
    #section-activity-logs .activity-records-panel,
    #section-subscription .subscription-actions-panel,
    #section-subscription .subscription-history-section,
    #section-purchase .redeem-card,
    #section-purchase .purchase-tips,
    #section-purchase .my-orders-section,
    #section-wallet .wallet-overview-surface,
    #section-wallet .wallet-recharge-surface,
    #section-wallet .wallet-topup-surface,
    #section-wallet .wallet-ledger-surface,
    #section-invite .invite-share-panel,
    #section-invite .invite-page-metrics,
    #section-invite .invite-records-panel,
    #section-invite .invite-rules-panel,
    #section-docs .docs-nav,
    #section-docs .docs-content,
    #section-faq .faq-item,
    #section-support .contact-card,
    #section-support .ticket-form-section,
    #section-support .my-tickets-section
) {
    border-radius: 14px;
}

body.page-dashboard :is(
    #section-search .search-metrics,
    #section-requests .request-stats,
    #section-playback .playback-stats-grid,
    #section-profile .stats-row,
    #section-profile .library-stats-grid,
    #section-subscription .subscription-details-grid,
    #section-invite .invite-page-metrics
) {
    gap: 1px;
    background: #e1e8f2;
    border-color: #e1e8f2;
    box-shadow: 0 10px 24px rgba(43, 79, 120, .05);
}

body.page-dashboard :is(
    #section-search .search-metric,
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile .stat-item-v2,
    #section-profile .library-stat-item,
    #section-subscription .detail-card,
    #section-invite .invite-page-metric
) {
    color: #0c1628;
    background: #fff !important;
    border-color: transparent !important;
}

body.page-dashboard :is(
    #section-search .search-metric-icon,
    #section-playback .playback-stat-card .stat-icon,
    #section-profile .stat-icon-v2,
    #section-profile .library-stat-icon,
    #section-subscription .detail-icon,
    #section-invite .invite-metric-icon,
    #section-invite .invite-panel-icon,
    #section-activity-logs .activity-filter-icon
) {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-search .search-metric:nth-child(2) .search-metric-icon,
body.page-dashboard #section-playback .playback-stat-card.stat-online .stat-icon,
body.page-dashboard #section-invite .invite-page-metric:nth-child(2) .invite-metric-icon {
    color: #08a7df;
    background: #e3f6fc;
    border-color: #ccecf6;
}

body.page-dashboard #section-search .search-metric:nth-child(3) .search-metric-icon,
body.page-dashboard #section-playback .playback-stat-card.stat-history .stat-icon,
body.page-dashboard #section-invite .invite-page-metric:nth-child(4) .invite-metric-icon {
    color: var(--ui-primary);
    background: var(--ui-blue-soft);
    border-color: #cfe5fa;
}

body.page-dashboard :is(
    #section-search .search-box input,
    #section-search .search-filters,
    #section-activity-logs .activity-filter-select,
    #section-profile .input-group-v2 input,
    #section-purchase .redeem-card input,
    #section-wallet .wallet-money-input,
    #section-wallet .wallet-method-options,
    #section-invite .invite-page-field,
    #section-faq .faq-search input,
    #section-support input,
    #section-support select,
    #section-support textarea
) {
    color: #0c1628;
    background: #f8fbff;
    border-color: #d8e3ef;
}

body.page-dashboard :is(
    #section-search .search-box input,
    #section-activity-logs .activity-filter-select,
    #section-profile .input-group-v2 input,
    #section-purchase .redeem-card input,
    #section-wallet .wallet-money-input,
    #section-invite .invite-page-field,
    #section-faq .faq-search input,
    #section-support input,
    #section-support select,
    #section-support textarea
):focus-within,
body.page-dashboard :is(
    #section-search .search-box input,
    #section-activity-logs .activity-filter-select,
    #section-profile .input-group-v2 input,
    #section-purchase .redeem-card input,
    #section-faq .faq-search input,
    #section-support input,
    #section-support select,
    #section-support textarea
):focus {
    border-color: #67adf7;
    box-shadow: 0 0 0 3px rgba(11, 127, 243, .1);
    outline: none;
}

body.page-dashboard :is(
    #section-search .search-box button,
    #section-playback .playback-refresh-btn,
    #section-profile .btn-primary-v2,
    #section-activity-logs .activity-refresh-btn,
    #section-subscription .sub-action-btn.primary,
    #section-purchase .redeem-btn,
    #section-purchase .plan-buy-btn,
    #section-wallet .wallet-purchase-button,
    #section-wallet .wallet-recharge-button,
    #section-invite .invite-page-copy-primary,
    #section-support .submit-ticket-btn
) {
    color: #fff;
    background: #0b7ff3 !important;
    border-color: #0b7ff3 !important;
    box-shadow: 0 8px 18px rgba(11, 127, 243, .18);
}

body.page-dashboard :is(
    #section-search .search-box button,
    #section-playback .playback-refresh-btn,
    #section-profile .btn-primary-v2,
    #section-activity-logs .activity-refresh-btn,
    #section-subscription .sub-action-btn.primary,
    #section-purchase .redeem-btn,
    #section-purchase .plan-buy-btn,
    #section-wallet .wallet-purchase-button,
    #section-wallet .wallet-recharge-button,
    #section-invite .invite-page-copy-primary,
    #section-support .submit-ticket-btn
):hover {
    color: #fff;
    background: #006fdf !important;
    border-color: #006fdf !important;
}

body.page-dashboard :is(
    #section-search .filter-reset,
    #section-playback .playback-auto-btn,
    #section-profile .btn-secondary-v2,
    #section-subscription .sub-action-btn.secondary,
    #section-purchase .refresh-orders-btn,
    #section-wallet .wallet-refresh-button,
    #section-wallet .wallet-topup-pagination button,
    #section-invite .invite-page-copy-btn:not(.invite-page-copy-primary),
    #section-faq .category-btn
) {
    color: #47617f;
    background: #fff;
    border-color: #d6e2ef;
    box-shadow: none;
}

body.page-dashboard #section-search .search-results-toolbar,
body.page-dashboard #section-playback .section-title-bar,
body.page-dashboard #section-activity-logs .activity-records-heading,
body.page-dashboard #section-subscription :is(.history-header, .subscription-panel-heading),
body.page-dashboard #section-purchase .orders-header,
body.page-dashboard #section-wallet :is(.wallet-topup-heading, .wallet-ledger-heading),
body.page-dashboard #section-invite .invite-panel-header {
    background: #fbfdff;
    border-bottom-color: #e4ebf4;
}

body.page-dashboard #section-search .search-results-toolbar h2,
body.page-dashboard #section-playback .playback-section-header h3,
body.page-dashboard #section-activity-logs .activity-records-heading h2,
body.page-dashboard #section-subscription :is(.subscription-panel-heading h3, .history-header h3),
body.page-dashboard #section-purchase .orders-header h3,
body.page-dashboard #section-wallet .wallet-block-heading h2,
body.page-dashboard #section-invite .invite-panel-heading h2,
body.page-dashboard #section-support :is(.ticket-form-section h3, .my-tickets-section h3) {
    color: #0c1628;
}

body.page-dashboard #section-requests .request-item {
    margin-bottom: 12px;
    border: 1px solid #e1e8f2;
    border-radius: 14px;
}

body.page-dashboard #section-requests .request-item:hover {
    border-color: #bfd6ed !important;
    box-shadow: 0 14px 30px rgba(43, 79, 120, .1) !important;
}

body.page-dashboard #section-requests :is(.media-type-chip, .request-scope-chip) {
    color: #0b6fda;
    background: #eaf5ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-requests :is(.download-status-card, .request-note) {
    background: #f7faff;
    border-color: #dce7f3;
}

body.page-dashboard #section-playback .playback-live-pill {
    color: #078664;
    background: #e8f8f3;
    border-color: #c9eadf;
}

body.page-dashboard #section-playback .playback-auto-btn.on {
    color: #0b6fda;
    background: #eaf5ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-profile .user-avatar-lg {
    color: #fff;
    background: #0b7ff3;
    border-color: #0b7ff3;
    box-shadow: 0 10px 22px rgba(11, 127, 243, .18);
}

body.page-dashboard #section-profile :is(.user-badge.badge-vip, .user-badge.badge-sub, .user-badge.badge-emby, .feature-badge.success) {
    color: #078664;
    background: #e8f8f3;
    border-color: #c9eadf;
}

body.page-dashboard #section-profile .feature-card-header-v2,
body.page-dashboard #section-profile .profile-management-header {
    background: #fbfdff;
    border-bottom-color: #e4ebf4;
}

body.page-dashboard #section-activity-logs .activity-header-summary,
body.page-dashboard #section-profile .profile-header-state {
    color: #47617f;
    background: #fff;
    border-color: #d8e3ef;
    box-shadow: 0 7px 18px rgba(43, 79, 120, .055);
}

body.page-dashboard #section-activity-logs .activity-log-card {
    background: #fff;
    border-bottom-color: #e7edf5;
}

body.page-dashboard #section-activity-logs .activity-log-card:hover {
    background: #f7fbff;
}

body.page-dashboard #section-subscription .subscription-hero-card {

    border-color: #dce8f5 !important;
}

body.page-dashboard #section-subscription :is(.hero-title h2, .hero-level, .hero-subtitle, .countdown-days, .countdown-unit) {
    color: #0c1628;
}

body.page-dashboard #section-subscription .subscription-plan-mark,
body.page-dashboard #section-subscription .subscription-panel-icon {
    color: #0b7ff3;
    background: #dceeff;
    border-color: #c7e2fb;
}

body.page-dashboard #section-subscription .hero-countdown {
    background: rgba(255, 255, 255, .82);
    border-color: #d6e5f3;
    box-shadow: 0 10px 22px rgba(43, 79, 120, .07);
}

body.page-dashboard #section-subscription .subscription-state-text,
body.page-dashboard #section-subscription .status-tag.active {
    color: #078664;
    background: #e8f8f3;
    border-color: #c9eadf;
}

body.page-dashboard #section-purchase .purchase-wallet-strip,
body.page-dashboard #section-wallet .wallet-overview-primary {
    background: #eaf5ff !important;
    border-color: #cfe5fa !important;
}

body.page-dashboard #section-purchase .redeem-card-icon,
body.page-dashboard #section-purchase .plan-icon-wrap,
body.page-dashboard #section-wallet .wallet-ledger-kind,
body.page-dashboard #section-support .contact-icon {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-purchase .plan-card-new.popular,
body.page-dashboard #section-purchase .plan-card-new.ultimate {
    border-color: #7db9f5 !important;
    box-shadow: 0 14px 30px rgba(11, 127, 243, .1) !important;
}

body.page-dashboard #section-purchase :is(.plan-ribbon.popular, .plan-ribbon.ultimate) {
    color: #fff;
    background: #0b7ff3;
}

body.page-dashboard #section-wallet .wallet-overview-surface {

    background: #fff !important;
}

body.page-dashboard #section-wallet :is(.wallet-overview-value, .wallet-overview-metric > strong) {
    color: #0c1628;
}

body.page-dashboard #section-wallet .wallet-quick-amounts button.active,
body.page-dashboard #section-wallet .wallet-ledger-filters button.active,
body.page-dashboard #section-faq .category-btn.active {
    color: #fff;
    background: #0b7ff3;
    border-color: #0b7ff3;
}

body.page-dashboard #section-wallet .wallet-topup-row.pending {
    background: #f7fbff;
    border-left-color: #0b7ff3;
}

body.page-dashboard #section-invite .invite-rate-summary {
    color: #0c1628;
    background: #eaf5ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-invite .invite-flow-number,
body.page-dashboard #section-invite .invite-rule-index {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-docs .docs-nav .nav-title,
body.page-dashboard #section-docs .doc-section > h2,
body.page-dashboard #section-faq .faq-question,
body.page-dashboard #section-support .contact-title {
    color: #0c1628;
}

body.page-dashboard #section-docs .docs-nav a:hover,
body.page-dashboard #section-docs .docs-nav a.active {
    color: #0b6fda;
    background: #eaf5ff;
}

body.page-dashboard #section-docs .doc-tip {
    color: #315475;
    background: #eef7ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-faq .faq-categories {
    padding: 5px;
    background: #edf3f9;
    border: 1px solid #dce6f1;
    border-radius: 11px;
}

body.page-dashboard #section-support .contact-link {
    color: #0b6fda;
}

body.page-dashboard :is(
    #section-search .search-state,
    #section-purchase .plans-empty-state,
    #section-wallet .wallet-unavailable,
    #section-wallet .wallet-ledger-empty,
    #section-wallet .wallet-topup-empty,
    #section-invite .invite-record-state,
    #section-activity-logs .activity-empty,
    #section-support .empty-state
) {
    color: #6d809d;
    background: #f8fbff;
    border-color: #dce7f3;
}

@media (max-width: 820px) {
    body.page-dashboard .content-section > .section-header {
        min-height: 0;
        align-items: flex-start;
    }

    body.page-dashboard :is(
        #section-search .search-metrics,
        #section-requests .request-stats,
        #section-subscription .subscription-details-grid,
        #section-invite .invite-page-metrics
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.page-dashboard .content-section > .section-header h1 {
        font-size: 23px;
    }

    body.page-dashboard :is(
        #section-search .search-command-panel,
        #section-search .search-results-region,
        #section-playback .playback-section,
        #section-profile .feature-card-v2,
        #section-activity-logs .activity-filter-panel,
        #section-subscription .subscription-actions-panel,
        #section-subscription .subscription-history-section,
        #section-purchase .redeem-card,
        #section-wallet .wallet-recharge-surface,
        #section-support .ticket-form-section,
        #section-support .my-tickets-section
    ) {
        border-radius: 12px;
    }
}

/* UI25：用户端弹窗、确认与支付流程沿用同一蓝灰组件规范。 */
body.page-dashboard :is(
    .confirm-overlay,
    .announcement-overlay,
    .telegram-bind-overlay,
    .force-bind-tg-overlay,
    .emby-bind-overlay,
    .unbind-overlay,
    .wallet-payment-overlay,
    #purchaseDialogOverlay
) {
    background: rgba(22, 42, 68, .46);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body.page-dashboard :is(
    .confirm-dialog,
    .announcement-dialog,
    .telegram-bind-dialog,
    .force-bind-tg-dialog,
    .emby-bind-dialog,
    .unbind-dialog,
    .wallet-payment-dialog,
    .purchase-dialog,
    .purchase-dialog-horizontal,
    .payment-dialog
) {
    color: #0c1628;
    background: #fff !important;
    border: 1px solid #dbe5f0 !important;
    box-shadow: 0 28px 72px rgba(18, 54, 91, .2) !important;
}

body.page-dashboard :is(
    .dialog-heading,
    .dialog-header,
    .telegram-dialog-header,
    .purchase-dialog-header,
    .purchase-dialog-heading
) {
    background: #f8fbff !important;
    border-bottom-color: #e1e9f2 !important;
}

body.page-dashboard :is(.dialog-kicker, .telegram-dialog-eyebrow) {
    color: #0b7ff3;
}

body.page-dashboard :is(
    .dialog-heading h3,
    .dialog-header h3,
    .telegram-dialog-heading h3,
    .purchase-dialog-heading h4,
    .wallet-payment-dialog h3
) {
    color: #0c1628;
}

body.page-dashboard :is(
    .dialog-heading p,
    .telegram-dialog-heading p,
    .purchase-dialog-heading p,
    .wallet-payment-dialog p
) {
    color: #6d809d;
}

body.page-dashboard :is(
    .telegram-dialog-icon,
    .request-confirm-icon,
    .announcement-dialog .icon,
    .wallet-payment-spinner
) {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
}

body.page-dashboard :is(
    .dialog-btn-confirm,
    .confirm-btn,
    .btn-confirm,
    .purchase-confirm-btn,
    .wallet-payment-confirm,
    .telegram-bind-primary,
    .emby-bind-submit
) {
    color: #fff !important;
    background: #0b7ff3 !important;
    border-color: #0b7ff3 !important;
    box-shadow: 0 8px 18px rgba(11, 127, 243, .18);
}

body.page-dashboard :is(
    .dialog-btn-confirm,
    .confirm-btn,
    .btn-confirm,
    .purchase-confirm-btn,
    .wallet-payment-confirm,
    .telegram-bind-primary,
    .emby-bind-submit
):hover {
    background: #006fdf !important;
    border-color: #006fdf !important;
}

body.page-dashboard .global-confirm-overlay {
    background: rgba(22, 42, 68, .46);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body.page-dashboard .global-confirm-dialog {
    color: #0c1628;
    background: #fff !important;
    border-color: #dbe5f0;
    box-shadow: 0 28px 72px rgba(18, 54, 91, .2);
}

body.page-dashboard :is(.global-confirm-kicker, .global-confirm-dialog.info .global-confirm-icon) {
    color: #0b7ff3;
}

body.page-dashboard .global-confirm-btn.confirm:not(.danger) {
    color: #fff;
    background: #0b7ff3;
    border-color: #0b7ff3;
}

body.page-dashboard .toast.ui-toast {
    color: #0c1628;
    background: rgba(255, 255, 255, .97);
    border-color: #dbe5f0;
    border-left-color: var(--toast-accent);
    box-shadow: 0 16px 42px rgba(18, 54, 91, .17), 0 3px 10px rgba(18, 54, 91, .07);
}

body.page-dashboard .toast.ui-toast .toast-title {
    color: #0c1628;
}

body.page-dashboard .toast.ui-toast .toast-message {
    color: #60738f;
}

/* UI27：订阅、套餐余额、搜索布局与日志分页细节修正。 */
body.page-dashboard #section-subscription .subscription-hero-content {
    grid-template-columns: minmax(0, 1fr);
}

body.page-dashboard #section-subscription .hero-left {
    width: 100%;
}

body.page-dashboard #section-purchase .purchase-wallet-copy {
    min-width: 152px;
    gap: 5px;
}

body.page-dashboard #section-purchase .purchase-wallet-copy > span {
    color: #5d7390;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

body.page-dashboard #section-purchase .purchase-wallet-copy strong {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: #0c1628;
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1.08;
    white-space: nowrap;
}

body.page-dashboard #section-purchase .purchase-wallet-copy strong > span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body.page-dashboard #section-purchase .purchase-wallet-copy strong .wallet-currency {
    font-size: .78em;
}

body.page-dashboard #section-purchase .purchase-wallet-note {
    min-width: 0;
    color: #6d809d;
    line-height: 1.45;
}

body.page-dashboard #section-search .search-command-panel {
    overflow: hidden;
    padding: 17px;
}

body.page-dashboard #section-search .search-filters {
    display: grid;
    min-height: 76px;
    grid-template-columns: minmax(180px, 1fr) minmax(140px, 168px) minmax(140px, 168px) auto;
    align-items: end;
    gap: 12px;
    margin: 14px -17px -17px;
    padding: 14px 17px 16px;
    background: #f8fbff !important;
    border-top: 1px solid #e1e8f2;
}

body.page-dashboard #section-search .search-filter-title {
    min-width: 0;
    min-height: 40px;
    align-self: end;
    margin: 0;
    color: #47617f;
    font-size: 11px;
    line-height: 1.3;
}

body.page-dashboard #section-search .filter-group {
    min-width: 0;
    gap: 6px;
}

body.page-dashboard #section-search .filter-group label {
    overflow: hidden;
    color: #6d809d;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .filter-group select,
body.page-dashboard #section-search .filter-reset {
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
}

body.page-dashboard #section-search .filter-reset {
    min-width: 82px;
    align-self: end;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-metrics {
    align-items: stretch;
    margin-bottom: 12px;
}

body.page-dashboard #section-search .search-metric {
    min-height: 86px;
    align-content: center;
    padding: 15px 18px;
}

body.page-dashboard #section-search .search-metric-copy {
    min-width: 0;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

body.page-dashboard #section-search .search-metric-copy small {
    overflow: hidden;
    color: #6d809d;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-metric-copy strong {
    max-width: 100%;
    overflow: hidden;
    color: #0c1628;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-results-region {
    overflow: hidden;
}

body.page-dashboard #section-search .search-results-toolbar {
    display: grid;
    min-height: 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0 0 12px;
    padding: 12px 17px;
    background: #fbfdff;
    border-bottom: 1px solid #e4ebf4;
}

body.page-dashboard #section-search .search-results-toolbar > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 3px;
}

body.page-dashboard #section-search .search-results-kicker {
    display: block;
    margin: 0;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-results-toolbar h2 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-results-count {
    min-width: 54px;
    min-height: 30px;
    justify-content: center;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 820px) {
    body.page-dashboard #section-search .search-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-search .search-filter-title,
    body.page-dashboard #section-search .filter-reset {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    body.page-dashboard #section-purchase .purchase-wallet-strip {
        align-items: center;
        flex-wrap: wrap;
    }

    body.page-dashboard #section-purchase .purchase-wallet-copy {
        min-width: 0;
        flex: 1;
    }

    body.page-dashboard #section-purchase .purchase-wallet-note {
        width: 100%;
        flex-basis: 100%;
        order: 4;
    }

    body.page-dashboard #section-search .search-filters {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body.page-dashboard #section-search .search-filter-title,
    body.page-dashboard #section-search .filter-reset {
        grid-column: 1;
    }

    body.page-dashboard #section-search .search-results-toolbar {
        min-height: 64px;
        gap: 10px;
        padding: 10px 12px;
    }

    body.page-dashboard #section-search .search-results-toolbar h2 {
        font-size: 15px;
    }
}

/* UI29：精简用户页头并重排播放监控工具栏。 */
body.page-dashboard #section-playback .playback-header {
    align-items: flex-end;
}

body.page-dashboard #section-playback .playback-header-tools {
    display: flex;
    width: auto;
    max-width: min(100%, 720px);
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.page-dashboard #section-playback :is(.playback-sync-group, .playback-action-group) {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

body.page-dashboard #section-playback .playback-sync-group {
    min-height: 42px;
    padding: 4px 5px 4px 10px;
    background: #fff;
    border: 1px solid #d8e3ef;
    border-radius: 11px;
    box-shadow: 0 7px 18px rgba(47, 79, 118, .07);
}

body.page-dashboard #section-playback .playback-sync-group .playback-live-pill {
    min-height: 32px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    box-shadow: none;
}

body.page-dashboard #section-playback .playback-sync-group .playback-update-time {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    margin: 0;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-left: 1px solid #e1e8f2;
    white-space: nowrap;
}

body.page-dashboard #section-playback .playback-action-group > button {
    height: 42px;
    min-height: 42px;
    margin: 0;
    white-space: nowrap;
}

body.page-dashboard #section-playback .playback-action-group .playback-auto-btn {
    min-width: 116px;
}

body.page-dashboard #section-playback .playback-action-group .playback-refresh-btn {
    min-width: 112px;
}

@media (max-width: 1080px) {
    body.page-dashboard #section-playback .playback-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body.page-dashboard #section-playback .playback-header-tools {
        width: 100%;
        max-width: none;
        justify-content: space-between;
    }
}

@media (max-width: 680px) {
    body.page-dashboard #section-playback .playback-header-tools {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-playback :is(.playback-sync-group, .playback-action-group) {
        width: 100%;
    }

    body.page-dashboard #section-playback .playback-sync-group {
        justify-content: space-between;
    }

    body.page-dashboard #section-playback .playback-action-group > button {
        flex: 1;
    }
}

@media (max-width: 430px) {
    body.page-dashboard #section-playback .playback-sync-group {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 5px 10px;
    }

    body.page-dashboard #section-playback .playback-sync-group .playback-update-time {
        width: 100%;
        min-height: 31px;
        padding: 4px 8px 0;
        border-top: 1px solid #e1e8f2;
        border-left: 0;
    }
}

@media (max-width: 720px) {
    body.page-dashboard #section-purchase .purchase-wallet-copy strong {
        font-size: 27px;
    }
}

/* UI30：用户端所有可见卡片共用同一圆角，避免页面之间出现不同弧度。 */
body.page-dashboard {
    --user-card-radius: 20px;
    --user-radius-control: 12px;
}

body.page-dashboard :is(
    .dashboard-hero,
    #section-search .search-command-panel,
    #section-subscription .subscription-hero-card,
    #section-purchase .purchase-wallet-strip,
    #section-wallet .wallet-overview-surface,
    #section-invite .invite-share-panel
) {
    border-radius: var(--user-card-radius) !important;
    overflow: hidden;
}

body.page-dashboard :is(
    #section-search .search-results-region,
    #section-playback .playback-section,
    #section-profile .user-profile-card,
    #section-profile .stats-section-v2,
    #section-profile .library-stats-card,
    #section-profile .feature-card-v2,
    #section-activity-logs .activity-filter-panel,
    #section-activity-logs .activity-records-panel,
    #section-subscription .subscription-actions-panel,
    #section-subscription .subscription-history-section,
    #section-subscription .retention-card,
    #section-purchase :is(.redeem-card, .purchase-tips, .my-orders-section),
    #section-wallet :is(.wallet-recharge-surface, .wallet-topup-surface, .wallet-ledger-surface),
    #section-invite :is(.invite-page-metrics, .invite-records-panel, .invite-rules-panel),
    #section-docs :is(.docs-nav, .docs-content, .doc-section),
    #section-faq :is(.faq-search, .faq-item),
    #section-support :is(.contact-card, .ticket-form-section, .my-tickets-section)
) {
    border-radius: var(--user-card-radius) !important;
}

body.page-dashboard :is(
    .dashboard-kpi-refined .stat-card-modern,
    .dashboard-stat-card,
    #section-search .search-metrics,
    #section-requests .request-stats,
    #section-playback .playback-stats-grid,
    #section-profile :is(.stats-row, .library-stats-grid),
    #section-subscription .subscription-details-grid,
    #section-activity-logs .activity-log-card,
    #section-purchase .plan-card-new,
    #section-wallet .wallet-topup-row,
    #section-invite .invite-page-metric,
    #section-support .ticket-item
) {
    border-radius: var(--user-card-radius) !important;
}

body.page-dashboard :is(
    #section-search .search-metrics,
    #section-requests .request-stats,
    #section-playback .playback-stats-grid,
    #section-profile :is(.stats-row, .library-stats-grid),
    #section-subscription .subscription-details-grid,
    #section-invite .invite-page-metrics
) {
    overflow: hidden;
}

body.page-dashboard :is(
    #section-search :is(.search-box input, .search-filters, .filter-group select, .filter-reset),
    #section-activity-logs :is(.activity-filter-select, .activity-filter-input, .activity-pagination .page-btn),
    #section-profile :is(.input-group-v2 input, .btn-primary-v2, .btn-secondary-v2),
    #section-subscription .sub-action-btn,
    #section-purchase :is(.redeem-card input, .redeem-btn, .purchase-wallet-link, .plan-buy-btn, .refresh-orders-btn),
    #section-wallet :is(.wallet-money-input, .wallet-method-options, .wallet-purchase-button, .wallet-recharge-button, .wallet-topup-pagination button),
    #section-playback :is(.playback-auto-btn, .playback-refresh-btn)
) {
    border-radius: var(--user-radius-control) !important;
}

@media (max-width: 720px) {
    body.page-dashboard {
        --user-card-radius: 18px;
    }
}

/* UI31：仪表盘顶部分离栏，建立页头与内容概览的横向分界。 */
body.page-dashboard #section-home .dashboard-page-divider {
    width: 100%;
    min-height: 52px;
    margin: 0 0 16px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #20314b;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #dce7f3;
    border-radius: var(--user-card-radius);
    box-shadow: 0 8px 22px rgba(43, 79, 120, .045);
}

body.page-dashboard #section-home .dashboard-page-divider-title,
body.page-dashboard #section-home .dashboard-page-divider-status {
    display: inline-flex;
    min-width: 0;
    align-items: center;
}

body.page-dashboard #section-home .dashboard-page-divider-title {
    gap: 10px;
}

body.page-dashboard #section-home .dashboard-page-divider-title > div {
    display: grid;
    gap: 1px;
}

body.page-dashboard #section-home .dashboard-page-divider-title > div > span {
    color: #6c819d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

body.page-dashboard #section-home .dashboard-page-divider-title strong {
    color: #0c1628;
    font-size: 14px;
    line-height: 1.25;
}

body.page-dashboard #section-home .dashboard-page-divider-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    color: #0b7ff3;
    background: #e5f2ff;
    border: 1px solid #cfe5fa;
    border-radius: 10px;
}

body.page-dashboard #section-home .dashboard-page-divider-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

body.page-dashboard #section-home .dashboard-page-divider-status {
    flex: 0 0 auto;
    gap: 7px;
    padding: 6px 10px;
    color: #16735d;
    background: #effaf6;
    border: 1px solid #ccebdd;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-dashboard #section-home .dashboard-page-divider-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #18b687;
}

@media (max-width: 560px) {
    body.page-dashboard #section-home .dashboard-page-divider {
        min-height: 48px;
        margin-bottom: 13px;
        padding: 7px 12px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status {
        padding: 5px 8px;
        font-size: 10px;
    }
}

/* UI32：拆分连续统计带，并让操作日志使用与页面协调的独立卡片层级。 */
body.page-dashboard :is(
    #section-home .dashboard-kpi-refined,
    #section-home .subscription-lines-container,
    #section-search :is(.stats-cards, .search-metrics),
    #section-requests .request-stats,
    #section-playback .playback-stats-grid,
    #section-profile :is(.stats-row, .library-stats-grid),
    #section-subscription .subscription-details-grid,
    #section-invite :is(.invite-page-metrics, .invite-stats .stats-grid)
) {
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard :is(
    #section-home .dashboard-kpi-refined .stat-card-modern,
    #section-home .subscription-lines-container > :is(.subscription-status-mini, .server-lines-compact, .checkin-mini-card),
    #section-search :is(.stats-cards .stat-card, .search-metric),
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile :is(.stat-item-v2, .library-stat-item),
    #section-subscription .detail-card,
    #section-invite :is(.invite-page-metric, .invite-stats .stat-item)
) {
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #dce7f3 !important;
    border-radius: var(--user-card-radius) !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055) !important;
}

body.page-dashboard #section-wallet .wallet-overview-surface {
    gap: 14px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-wallet :is(.wallet-overview-primary, .wallet-overview-metric, .wallet-purchase-button) {
    margin: 0;
    background: #fff !important;
    border: 1px solid #dce7f3 !important;
    border-radius: var(--user-card-radius) !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055) !important;
}

body.page-dashboard #section-wallet .wallet-purchase-button {
    min-height: 100%;
    color: #fff;
    background: #0b7ff3 !important;
    border-color: #0b7ff3 !important;
}

body.page-dashboard :is(
    #section-requests .request-item,
    #section-search .movie-card,
    #section-playback :is(.device-card, .my-device-card, .history-card),
    #section-profile .feature-card-v2,
    #section-subscription :is(.subscription-actions-panel, .subscription-history-section, .retention-card, .retention-condition-card),
    #section-purchase :is(.redeem-card, .plan-card-new, .purchase-tips, .my-orders-section, .order-card, .pay-card),
    #section-wallet :is(.wallet-recharge-surface, .wallet-topup-surface, .wallet-ledger-surface),
    #section-invite :is(.invite-share-panel, .invite-records-panel, .invite-rules-panel, .invite-reward-panel),
    #section-support :is(.contact-card, .ticket-form-section, .my-tickets-section, .ticket-item, .telegram-step-card),
    #section-faq .faq-item
) {
    border-radius: var(--user-card-radius) !important;
    overflow: hidden;
}

body.page-dashboard :is(
    #section-home .dashboard-kpi-refined .stat-card-modern,
    #section-home .subscription-lines-container > :is(.subscription-status-mini, .server-lines-compact, .checkin-mini-card),
    #section-search :is(.stats-cards .stat-card, .search-metric),
    #section-requests .request-stat-item,
    #section-playback .playback-stat-card,
    #section-profile :is(.stat-item-v2, .library-stat-item),
    #section-subscription .detail-card,
    #section-invite :is(.invite-page-metric, .invite-stats .stat-item)
):hover {
    background: #fff !important;
    border-color: #c7dced !important;
    box-shadow: 0 12px 28px rgba(43, 79, 120, .085) !important;
}

body.page-dashboard #section-subscription .subscription-summary-panel {
    display: grid;
    gap: 14px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-subscription .subscription-hero-card {
    overflow: hidden;
    background: linear-gradient(120deg, #eaf5ff 0%, #f8fbff 68%, #fff 100%) !important;
    border: 1px solid #dce7f3 !important;
    border-radius: var(--user-card-radius) !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055) !important;
}

body.page-dashboard #section-activity-logs .activity-records-panel {
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-activity-logs .activity-records-heading,
body.page-dashboard #section-activity-logs .activity-list-columns,
body.page-dashboard #section-activity-logs .activity-log-card,
body.page-dashboard #section-activity-logs .activity-pagination:not(:empty) {
    background: rgba(255, 255, 255, .86) !important;
    border: 1px solid #dce7f3 !important;
    border-radius: var(--user-card-radius) !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .045) !important;
}

body.page-dashboard #section-activity-logs .activity-records-heading {
    margin-bottom: 10px;
    background: #f7fbff !important;
}

body.page-dashboard #section-activity-logs .activity-list-columns {
    margin-bottom: 10px;
    color: #6d809d;
    background: #edf5fc !important;
}

body.page-dashboard #section-activity-logs .activity-logs-list {
    display: grid;
    gap: 10px;
    background: transparent;
}

body.page-dashboard #section-activity-logs .activity-log-card,
body.page-dashboard #section-activity-logs .activity-log-card:last-child {
    border: 1px solid #dce7f3 !important;
}

body.page-dashboard #section-activity-logs .activity-log-card:hover {
    background: #f8fbff !important;
    border-color: #c7dced !important;
}

body.page-dashboard #section-activity-logs .activity-pagination:not(:empty) {
    margin-top: 10px;
    padding: 10px 14px;
}

@media (max-width: 720px) {
    body.page-dashboard :is(
        #section-home .dashboard-kpi-refined,
        #section-home .subscription-lines-container,
        #section-search :is(.stats-cards, .search-metrics),
        #section-requests .request-stats,
        #section-playback .playback-stats-grid,
        #section-profile :is(.stats-row, .library-stats-grid),
        #section-subscription .subscription-details-grid,
        #section-invite :is(.invite-page-metrics, .invite-stats .stats-grid)
    ) {
        gap: 10px !important;
    }

    body.page-dashboard #section-wallet .wallet-overview-surface {
        gap: 10px;
    }
}

/* UI33：钱包充值区重排为清晰的金额、支付方式与确认操作。 */
body.page-dashboard #section-wallet .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

body.page-dashboard #section-wallet .wallet-recharge-surface {
    padding: 0;
    background: #fff !important;
}

body.page-dashboard #section-wallet .wallet-recharge-heading {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f5f9fe 0%, #fff 78%);
    border-bottom: 1px solid #e1eaf4;
}

body.page-dashboard #section-wallet .wallet-recharge-heading-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    color: #0b7ff3;
    background: #e5f2ff;
    border: 1px solid #cfe5fa;
    border-radius: 13px;
}

body.page-dashboard #section-wallet .wallet-recharge-heading-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.page-dashboard #section-wallet .wallet-recharge-heading h2 {
    margin: 0;
    color: #0c1628;
    font-size: 19px;
    line-height: 1.25;
}

body.page-dashboard #section-wallet .wallet-recharge-heading p {
    margin: 4px 0 0;
    color: #6d809d;
    font-size: 11px;
    line-height: 1.45;
}

body.page-dashboard #section-wallet .wallet-recharge-form {
    gap: 14px;
    padding: 18px 20px 0;
}

body.page-dashboard #section-wallet .wallet-recharge-step {
    min-width: 0;
    padding: 14px;
    background: #f8fbff;
    border: 1px solid #dce7f3;
    border-radius: var(--user-card-radius);
}

body.page-dashboard #section-wallet .wallet-recharge-step-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

body.page-dashboard #section-wallet .wallet-recharge-step-title > span {
    min-width: 28px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    color: #fff;
    background: #20314b;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
}

body.page-dashboard #section-wallet .wallet-recharge-step-title strong {
    color: #0c1628;
    font-size: 13px;
    line-height: 1.3;
}

body.page-dashboard #section-wallet .wallet-quick-amounts {
    margin: 0 0 12px;
    gap: 8px;
}

body.page-dashboard #section-wallet .wallet-quick-amounts button {
    height: 48px;
    color: #20314b;
    background: #fff;
    border: 1px solid #d6e2ef;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(43, 79, 120, .035);
}

body.page-dashboard #section-wallet .wallet-quick-amounts button:not(.active):not(:disabled):hover {
    color: #0b6fda;
    background: #f4f9ff;
    border-color: #9cc9f5;
}

body.page-dashboard #section-wallet .wallet-quick-amounts button.active {
    color: #fff;
    background: #0b7ff3;
    border-color: #0b7ff3;
    box-shadow: 0 8px 18px rgba(11, 127, 243, .18);
}

body.page-dashboard #section-wallet .wallet-recharge-field {
    gap: 7px;
}

body.page-dashboard #section-wallet .wallet-recharge-field > span:first-child {
    color: #536985;
    font-size: 11px;
    font-weight: 700;
}

body.page-dashboard #section-wallet .wallet-money-input {
    height: 52px;
    background: #fff;
    border: 1px solid #cfddeb;

}



body.page-dashboard #section-wallet .wallet-money-prefix {
    width: 48px;
    flex-basis: 48px;
    color: #0b6fda;
    background: #edf6ff;
    border-right-color: #d7e7f6;
}

body.page-dashboard #section-wallet .wallet-money-input input {
    height: 50px;
    color: #0c1628;
    font-size: 15px;
    line-height: 50px;
}

body.page-dashboard #section-wallet .wallet-method-options {
    height: auto;
    padding: 0;
    gap: 8px;
    background: transparent;
    border: 0;
}

body.page-dashboard #section-wallet .wallet-method-options span {
    min-height: 58px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    padding: 9px 12px;
    color: #20314b;
    background: #fff;
    border: 1px solid #d6e2ef;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(43, 79, 120, .035);
}

body.page-dashboard #section-wallet .wallet-method-options span strong {
    font-size: 12px;
    line-height: 1.2;
}

body.page-dashboard #section-wallet .wallet-method-options span small {
    color: #7b8da5;
    font-size: 9px;
    line-height: 1.25;
}

body.page-dashboard #section-wallet .wallet-method-options input:checked + span {
    color: #0b6fda;
    background: #edf6ff;
    border: 1px solid #67adf7;
    box-shadow: 0 0 0 2px rgba(11, 127, 243, .08);
}

body.page-dashboard #section-wallet .wallet-recharge-button {
    height: 52px;
    border-radius: 12px !important;
    font-size: 13px;
    box-shadow: 0 9px 20px rgba(11, 127, 243, .19);
}

body.page-dashboard #section-wallet .wallet-recharge-hint {
    min-height: 0;
    margin: 14px 20px 18px;
    padding: 11px 13px;
    color: #16735d;
    background: #effaf6;
    border: 1px solid #ccebdd;
    border-radius: 12px;
    line-height: 1.45;
}

body.page-dashboard #section-wallet .wallet-recharge-hint:empty {
    display: none;
}

@media (max-width: 720px) {
    body.page-dashboard #section-wallet .wallet-recharge-heading {
        min-height: 74px;
        padding: 15px;
    }

    body.page-dashboard #section-wallet .wallet-recharge-form {
        padding: 14px 14px 0;
    }

    body.page-dashboard #section-wallet .wallet-recharge-hint {
        margin: 12px 14px 14px;
    }
}

@media (max-width: 520px) {
    body.page-dashboard #section-wallet .wallet-quick-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-wallet .wallet-method-options {
        grid-template-columns: 1fr;
    }
}

/* UI36：突出签到入口，并收紧订阅、钱包、求片与账户统计的视觉细节。 */
body.page-dashboard #section-home #checkinMiniCard,
body.page-dashboard #section-home #checkinMiniCard:hover {
    padding: 0 !important;
    color: #fff !important;
    background: linear-gradient(145deg, #1597ff 0%, #087df4 52%, #0569dc 100%) !important;
    border-color: rgba(5, 105, 220, .72) !important;
    box-shadow: 0 16px 34px rgba(8, 125, 244, .24) !important;
}

body.page-dashboard #section-home #checkinMiniCard :is(
    .checkin-mini-title,
    .coin-value-mini,
    .coin-name-mini,
    .checkin-mini-hint
) {
    color: #fff !important;
}

body.page-dashboard #section-home #checkinMiniCard .coin-name-mini,
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-hint {
    color: rgba(255, 255, 255, .82) !important;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-btn {
    color: #0877e8;
    background: #fff;
    box-shadow: 0 8px 18px rgba(4, 70, 151, .2);
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-btn:is(:disabled, .disabled) {
    color: rgba(255, 255, 255, .9);
    background: rgba(9, 60, 129, .32);
    border: 1px solid rgba(255, 255, 255, .2);
}

/* UI37：宽屏下适度增高账号与线路区域，三列保持等高。 */
@media (min-width: 1181px) {
    body.page-dashboard #section-home .subscription-lines-container > .subscription-status-mini,
    body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact,
    body.page-dashboard #section-home .subscription-lines-container > #checkinMiniCard {
        min-height: 312px;
    }
}

/* UI38：签到卡片采用奖励凭证式布局，标题固定在左上角。 */
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 24px 22px 20px;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    text-align: left;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-header {
    width: 100%;
    margin: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-heading {
    display: grid;
    min-width: 0;
    gap: 5px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, .8) !important;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-state {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 22px;
    font-weight: 760;
    line-height: 1.18;
    color: #fff;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    color: #fff;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-icon svg {
    width: 32px;
    height: 32px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-reward {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 14px 0 10px;
    text-align: center;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-reward-label {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    line-height: 1.35;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-coins {
    justify-content: center;
    gap: 0;
    margin: 0;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard #section-home #checkinMiniCard .coin-prefix-mini,
body.page-dashboard #section-home #checkinMiniCard .coin-value-mini {
    color: #fff !important;
    font-size: 38px;
    font-weight: 760;
    line-height: 1.08;
}

body.page-dashboard #section-home #checkinMiniCard .coin-name-mini {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-actions {
    display: grid;
    width: 100%;
    gap: 7px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-btn {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-hint {
    display: block;
    min-height: 16px;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

@media (max-width: 560px) {
    body.page-dashboard #section-home #checkinMiniCard .checkin-mini-content {
        padding: 21px 18px 18px;
    }

    body.page-dashboard #section-home #checkinMiniCard .checkin-mini-state {
        font-size: 20px;
    }
}

body.page-dashboard #section-subscription .detail-icon::before {
    display: none !important;
    content: none !important;
}

body.page-dashboard #section-subscription .detail-icon svg {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-wallet .wallet-overview-surface {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.page-dashboard #section-requests .request-note-admin {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-requests .media-type-chip {
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
    line-height: 1;
}

body.page-dashboard #section-requests .media-type-chip svg {
    display: block;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-profile .profile-stats-heading,
body.page-dashboard #section-profile .library-stats-header {
    border-bottom: 0 !important;
}

body.page-dashboard #section-profile .library-stats-card {
    margin-top: 14px;
    border-top: 0 !important;
}

body.page-dashboard #section-profile .library-server-list {
    display: grid;
    min-width: 0;
}

body.page-dashboard #section-profile .library-server-block {
    min-width: 0;
    border-top: 1px solid var(--account-border);
}

body.page-dashboard #section-profile .library-server-heading {
    display: flex;
    min-width: 0;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--account-muted);
    background: #f8fafc;
}

body.page-dashboard #section-profile .library-server-heading strong {
    min-width: 0;
    overflow: hidden;
    color: var(--account-text);
    font-size: 11px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-profile .library-server-heading span {
    flex: 0 0 auto;
    font-size: 10px;
}

body.page-dashboard #section-profile .library-server-block.is-unavailable .library-server-heading span {
    color: #a15d4f;
}

body.page-dashboard #section-profile .library-server-block.is-unavailable .library-stats-grid {
    opacity: .55;
}

@media (max-width: 560px) {
    body.page-dashboard #section-profile .library-server-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

@media (max-width: 720px) {
    body.page-dashboard #section-wallet .wallet-overview-surface {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-dashboard #section-wallet :is(.wallet-overview-primary, .wallet-overview-metric) {
        grid-column: 1;
    }
}

/* UI39：购买套餐页采用主目录与账单侧栏布局。 */
body.page-dashboard #section-purchase.purchase-redesign {
    --purchase-blue: #0b7ff3;
    --purchase-blue-dark: #086ed3;
    --purchase-ink: #0c1628;
    --purchase-muted: #647995;
    --purchase-border: #dce7f3;
    --purchase-soft: #edf6ff;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-workspace {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr);
    gap: 20px;
    align-items: start;
}

body.page-dashboard #section-purchase.purchase-redesign :is(.purchase-primary-column, .purchase-secondary-column) {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 16px;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-heading {
    min-height: 48px;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 2px;
    flex-wrap: nowrap;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-copy {
    flex: 0 0 auto;
    display: grid;
    gap: 3px;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-panel-kicker,
body.page-dashboard #section-purchase.purchase-redesign .redeem-card-eyebrow,
body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-heading > div > span,
body.page-dashboard #section-purchase.purchase-redesign .orders-header > div > span {
    color: #6c819d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-heading h2,
body.page-dashboard #section-purchase.purchase-redesign .redeem-card-title,
body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-heading h3,
body.page-dashboard #section-purchase.purchase-redesign .orders-header h3 {
    margin: 0;
    color: var(--purchase-ink);
    font-size: 20px;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.25;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filters {
    display: flex;
    flex: 0 1 auto;
    width: max-content;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
    max-width: min(100%, 540px);
    padding: 4px;
    background: #edf4fa;
    border: 1px solid #d8e5f0;
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 31px;
    max-width: 100%;
    padding: 0 10px;
    color: #657c97;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter:hover {
    color: #264c73;
    background: rgba(255, 255, 255, .7);
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter[aria-selected="true"] {
    color: var(--purchase-ink);
    background: #fff;
    box-shadow: 0 2px 7px rgba(57, 89, 121, .12);
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #96a9bc;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-teal { background: #0f766e; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-indigo { background: #4338ca; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-orange { background: #0b7ff3; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-green { background: #15803d; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-rose { background: #be123c; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-cyan { background: #0e7490; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-amber { background: #0e7490; }
body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter-dot.server-tone-purple { background: #7e22ce; }

body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filter span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-dashboard #section-purchase.purchase-redesign .plans-grid-new {
    display: grid;
    width: 100%;
    max-width: 100%;


    margin: 0;
}

body.page-dashboard #section-purchase.purchase-redesign .plans-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: var(--purchase-muted);
    background: #fff;
    border: 1px solid var(--purchase-border);
    border-radius: var(--user-card-radius);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-card-new {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 224px;
    display: grid;


    align-items: center;

    padding: 24px;
    background: #fff;
    border: 1px solid var(--purchase-border);
    box-shadow: 0 10px 26px rgba(43, 79, 120, .065);
    transform: none;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-card-new:hover {
    background: #fff;
    border-color: #b9d5ef;
    box-shadow: 0 15px 32px rgba(43, 79, 120, .1);
    transform: translateY(-2px);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-card-new:is(.popular, .ultimate) {
    padding: 24px;
    background: #fff;
    border-color: #91c2f1 !important;
    box-shadow: 0 12px 30px rgba(11, 127, 243, .095) !important;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-topline {
    grid-area: tags;
    justify-content: flex-start;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-ribbon {
    min-height: 27px;
    padding: 5px 10px;
    color: #0b6fda;
    background: #eaf5ff;
    border: 1px solid #cfe5fa;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-ribbon:is(.normal, .popular, .ultimate) {
    color: #0b6fda;
    background: #eaf5ff;
    border: 1px solid #cfe5fa;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-ribbon.ultimate {
    color: var(--purchase-blue);
    background: var(--purchase-soft);
    border-color: #cfe5fa;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-header-new {
    grid-area: header;
    align-items: center;
    gap: 14px;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-icon-wrap {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    color: var(--purchase-blue);
    background: #e5f2ff;
    border-color: #cfe5fa;
    border-radius: 15px;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-card-new.ultimate .plan-icon-wrap {
    background: var(--purchase-soft);
    border-color: #cfe5fa;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-icon {
    font-size: 26px;
    line-height: 1;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-name-new {
    margin: 0 0 5px;
    color: var(--purchase-ink);
    font-size: 23px;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.2;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-subtitle {
    display: -webkit-box;
    max-width: 500px;
    margin: 0;
    overflow: hidden;
    color: var(--purchase-muted);
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-price-display {
    grid-area: price;
    min-width: 170px;
    margin: 0;
    padding: 0;

    border: 0;
}

body.page-dashboard #section-purchase.purchase-redesign .price-currency {
    color: var(--purchase-blue);
    font-size: 18px;
}

body.page-dashboard #section-purchase.purchase-redesign .price-amount {
    color: var(--purchase-blue);
    font-size: 42px;
    font-weight: 780;
}

body.page-dashboard #section-purchase.purchase-redesign .price-period {
    color: #657b98;
    font-size: 12px;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-meta-row {
    grid-area: meta;
    min-width: 0;
    gap: 8px;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-meta-chip {
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    overflow-wrap: anywhere;
    color: #415b79;
    background: #f5f9fd;
    border-color: #dce7f3;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-meta-chip svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-duration-chip {
    color: #1d4ed8;
    background: #edf4ff;
    border-color: #b6cdf5;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-retention-chip {
    font-weight: 720;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-pricing-chip {
    color: #344054;
    background: #edf1f5;
    border-color: #c5d0dc;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-teal {
    color: #0f766e;
    background: #e8faf7;
    border-color: #8dd7cb;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-indigo {
    color: #4338ca;
    background: #eff0ff;
    border-color: #b9bdf6;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-orange {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-green {
    color: #15803d;
    background: #eaf9ee;
    border-color: #a6d9b1;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-rose {
    color: #be123c;
    background: #fff0f4;
    border-color: #efb5c4;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-cyan {
    color: #0e7490;
    background: #e8f9ff;
    border-color: #9bd5e4;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-amber {
    color: #0e7490;
    background: #e5f7fb;
    border-color: #aedce9;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-purple {
    color: #7e22ce;
    background: #faf0ff;
    border-color: #d7b6ef;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-custom-chip.custom-tone-lime {
    color: #4d7c0f;
    background: #f3fadf;
    border-color: #c9dc98;
}

/* UI42：套餐卡片中的服务器标签使用稳定的颜色主题，便于区分多台 Emby。 */
body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip {
    min-width: 0;
    max-width: min(100%, 280px);
    border-width: 1.5px;
    font-weight: 750;
    white-space: normal;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-teal {
    color: #0f766e;
    background: #e8faf7;
    border-color: #8dd7cb;
    box-shadow: 0 4px 10px rgba(15, 118, 110, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-indigo {
    color: #4338ca;
    background: #eff0ff;
    border-color: #b9bdf6;
    box-shadow: 0 4px 10px rgba(67, 56, 202, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-orange {
    color: #0b7ff3;
    background: #e5f2ff;
    border-color: #cfe5fa;
    box-shadow: 0 4px 10px rgba(11, 127, 243, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-green {
    color: #15803d;
    background: #eaf9ee;
    border-color: #a6d9b1;
    box-shadow: 0 4px 10px rgba(21, 128, 61, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-rose {
    color: #be123c;
    background: #fff0f4;
    border-color: #efb5c4;
    box-shadow: 0 4px 10px rgba(190, 18, 60, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-cyan {
    color: #0e7490;
    background: #e8f9ff;
    border-color: #9bd5e4;
    box-shadow: 0 4px 10px rgba(14, 116, 144, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-amber {
    color: #0e7490;
    background: #e8f9ff;
    border-color: #aedce9;
    box-shadow: 0 4px 10px rgba(14, 116, 144, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-server-chip.server-tone-purple {
    color: #7e22ce;
    background: #faf0ff;
    border-color: #d7b6ef;
    box-shadow: 0 4px 10px rgba(126, 34, 206, .14);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-buy-btn {
    grid-area: action;

    min-width: 170px;
    min-height: 48px;
    margin: 0;
    padding: 12px 18px;
    color: #fff;
    background: var(--purchase-blue);
    border: 1px solid var(--purchase-blue);
    box-shadow: 0 9px 18px rgba(11, 127, 243, .17);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-buy-btn:is(.popular, .ultimate) {
    background: var(--purchase-blue);
}

body.page-dashboard #section-purchase.purchase-redesign .plan-buy-btn:hover {
    background: var(--purchase-blue-dark);
    border-color: var(--purchase-blue-dark);
    box-shadow: 0 12px 22px rgba(11, 127, 243, .22);
}

body.page-dashboard #section-purchase.purchase-redesign .buy-btn-arrow,
body.page-dashboard #section-purchase.purchase-redesign .redeem-btn svg,
body.page-dashboard #section-purchase.purchase-redesign .refresh-orders-btn svg,
body.page-dashboard #section-purchase.purchase-redesign .redeem-card-icon svg,
body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-purchase.purchase-redesign .buy-btn-arrow {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-tips {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    height: auto;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--purchase-border);
    box-shadow: 0 8px 22px rgba(43, 79, 120, .045);
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

body.page-dashboard #section-purchase.purchase-redesign :is(.purchase-tips-icon, .redeem-card-icon) {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: var(--purchase-blue);
    background: #e5f2ff;
    border: 1px solid #cfe5fa;
    border-radius: 13px;
}

body.page-dashboard #section-purchase.purchase-redesign :is(.purchase-tips-icon, .redeem-card-icon) svg {
    width: 21px;
    height: 21px;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.page-dashboard #section-purchase.purchase-redesign .purchase-tips .tip-item {
    min-width: 0;
    justify-content: flex-start;
    gap: 7px;
    padding: 8px 10px;
    color: #526985;
    background: #f7faff;
    border: 0;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.4;
}

body.page-dashboard #section-purchase.purchase-redesign .tip-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #93a7bf;
}

body.page-dashboard #section-purchase.purchase-redesign .tip-dot.success { background: #17b485; }
body.page-dashboard #section-purchase.purchase-redesign .tip-dot.primary { background: #0b7ff3; }
body.page-dashboard #section-purchase.purchase-redesign .tip-dot.warning { background: #ef9a19; }

body.page-dashboard #section-purchase.purchase-redesign .purchase-secondary-column {
    position: sticky;
    top: 88px;
    margin-top: 64px;
}

body.page-dashboard #section-purchase.purchase-redesign :is(.redeem-card, .my-orders-section) {
    height: auto;
    margin: 0;
    background: #fff;
    border: 1px solid var(--purchase-border) !important;
    box-shadow: 0 10px 26px rgba(43, 79, 120, .055);
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 224px;
    box-sizing: border-box;
    align-content: center;
    padding: 22px;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-content {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-desc {
    color: var(--purchase-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    width: 100%;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-form input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--purchase-ink);
    background: #f7faff;
    border: 1px solid #d6e4f2;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 1px;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-card-form input:focus {
    background: #fff;
    border-color: #7db9f5;
    box-shadow: 0 0 0 3px rgba(11, 127, 243, .1);
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-btn {
    min-height: 48px;
    padding: 11px 16px;
    color: #fff;
    background: var(--purchase-ink);
    border: 1px solid var(--purchase-ink);
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-btn:hover {
    background: #17243a;
    border-color: #17243a;
    box-shadow: none;
    transform: none;
}

body.page-dashboard #section-purchase.purchase-redesign .redeem-btn svg {
    width: 16px;
    height: 16px;
}

body.page-dashboard #section-purchase.purchase-redesign .my-orders-section {
    min-height: 0;
    overflow: hidden;
}

body.page-dashboard #section-purchase.purchase-redesign .orders-header {
    min-height: 70px;
    padding: 14px 18px;
    background: #fbfdff;
    border-bottom: 1px solid #e4ebf4;
}

body.page-dashboard #section-purchase.purchase-redesign .orders-header > div {
    display: grid;
    gap: 3px;
}

body.page-dashboard #section-purchase.purchase-redesign .orders-header h3 {
    font-size: 17px;
}

body.page-dashboard #section-purchase.purchase-redesign .refresh-orders-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    color: #47617f;
    background: #fff;
    border-color: #d6e2ef;
}

body.page-dashboard #section-purchase.purchase-redesign .refresh-orders-btn svg {
    width: 17px;
    height: 17px;
}

body.page-dashboard #section-purchase.purchase-redesign .orders-list {
    max-height: 440px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #c6d6e7 transparent;
}

body.page-dashboard #section-purchase.purchase-redesign .order-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    align-items: center;
    margin: 10px;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid #e2eaf3;
    border-radius: 14px !important;
}

body.page-dashboard #section-purchase.purchase-redesign .order-card:hover {
    background: #f9fcff;
    border-color: #c9dced;
}

body.page-dashboard #section-purchase.purchase-redesign .order-card.pending {
    background: #fffbf2;
    border-color: #efdcb6;
}

body.page-dashboard #section-purchase.purchase-redesign .order-main {
    gap: 7px;
    margin: 0 0 7px;
    flex-wrap: wrap;
}

body.page-dashboard #section-purchase.purchase-redesign .order-plan {
    color: var(--purchase-ink);
    font-size: 14px;
    font-weight: 740;
}

body.page-dashboard #section-purchase.purchase-redesign .order-duration,
body.page-dashboard #section-purchase.purchase-redesign .order-status {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1.3;
}

body.page-dashboard #section-purchase.purchase-redesign .order-status::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    content: "";
    border-radius: 50%;
    background: currentColor;
}

body.page-dashboard #section-purchase.purchase-redesign .order-meta {
    min-width: 0;
    gap: 6px 10px;
    flex-wrap: wrap;
    color: #788ba4;
    font-size: 10px;
}

body.page-dashboard #section-purchase.purchase-redesign .order-no {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-purchase.purchase-redesign .order-price-wrap {
    display: grid;
    justify-items: end;
    gap: 3px;
}

body.page-dashboard #section-purchase.purchase-redesign .order-price {
    margin: 0;
    color: var(--purchase-ink);
    font-size: 17px;
    font-weight: 760;
}

body.page-dashboard #section-purchase.purchase-redesign .order-price-wrap small {
    color: #138467;
    font-size: 10px;
}

body.page-dashboard #section-purchase.purchase-redesign .order-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

body.page-dashboard #section-purchase.purchase-redesign .order-btn {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
}

body.page-dashboard #section-purchase.purchase-redesign .order-btn.pay {
    color: #fff;
    background: var(--purchase-blue);
}

body.page-dashboard #section-purchase.purchase-redesign .order-btn.cancel {
    color: #5c708c;
    background: #fff;
    border: 1px solid #d9e4ef;
}

body.page-dashboard #section-purchase.purchase-redesign :is(.orders-loading, .orders-empty) {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #7387a1;
}

body.page-dashboard #section-purchase.purchase-redesign .orders-empty .empty-icon {
    display: none;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-purchase.purchase-redesign .purchase-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-secondary-column {
        position: static;
        margin-top: 0;

        align-items: start;
    }
}

@media (max-width: 820px) {
    body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-heading {
        align-items: flex-end;
        gap: 10px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filters {
        justify-content: flex-end;
        max-width: min(100%, 540px);
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-secondary-column {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-purchase.purchase-redesign .plans-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-purchase.purchase-redesign .plan-card-new {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "tags tags"
            "header price"
            "meta meta"
            "action action";
        padding: 20px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .plan-buy-btn {
        width: 100%;
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-tips {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-purchase.purchase-redesign .plans-grid-new {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    body.page-dashboard #section-purchase.purchase-redesign {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-workspace {
        gap: 16px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-heading h2 {
        font-size: 18px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .plan-card-new {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "tags"
            "header"
            "price"
            "meta"
            "action";
        gap: 16px;
        min-height: 0;
        padding: 18px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .plan-price-display {
        min-width: 0;
        justify-content: flex-start;
    }

    body.page-dashboard #section-purchase.purchase-redesign .price-amount {
        font-size: 36px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .purchase-tips-list {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-purchase.purchase-redesign .redeem-card {
        min-height: 0;
        padding: 18px;
    }

    body.page-dashboard #section-purchase.purchase-redesign .redeem-card-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-purchase.purchase-redesign .redeem-btn {
        justify-content: center;
    }

    body.page-dashboard #section-purchase.purchase-redesign .order-card {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-purchase.purchase-redesign .order-price-wrap {
        justify-items: start;
    }
}

/* UI40: purchase checkout dialog uses a compact summary and confirmation layout. */
body.page-dashboard #purchaseDialogOverlay.confirm-overlay {
    padding: 24px;
    background: rgba(18, 35, 58, .58);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog {
    box-sizing: border-box;
    width: min(920px, calc(100vw - 48px));
    max-width: 920px;
    max-height: calc(100vh - 48px);
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    color: #102039;
    background: #f5f9fd;
    border: 1px solid #d6e4f1;
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(14, 37, 66, .26);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dialog-close-x {
    top: 20px;
    right: 22px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    color: #536a85;
    background: #fff;
    border: 1px solid #d9e5f0;
    border-radius: 11px;
    box-shadow: 0 4px 12px rgba(35, 72, 111, .06);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dialog-close-x:hover {
    color: #0b72df;
    background: #edf6ff;
    border-color: #b9d8f5;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-heading {
    min-height: 68px;
    padding: 12px 76px 12px 24px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border-bottom: 1px solid #deE8f2;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    color: #087df0;
    background: #e6f3ff;
    border: 1px solid #cbe3fa;
    border-radius: 13px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading-copy {
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-eyebrow {
    margin: 0 0 2px;
    color: #0a74df;
    font-size: 10px;
    font-weight: 750;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-heading h4 {
    margin: 0;
    color: #102039;
    font-size: 21px;
    font-weight: 780;
    line-height: 1.2;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-heading p {
    margin: 3px 0 0;
    color: #71849c;
    font-size: 11px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary {
    margin: 12px 18px 0;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #eaf5ff 0%, #f8fbff 100%);
    border: 1px solid #cfe4f8;
    border-radius: 15px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .selected-plan-info {
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .plan-icon-lg {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: #087df0;
    background: #fff;
    border: 1px solid #c7dff6;
    border-radius: 13px;
    font-size: 25px;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .plan-text {
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .plan-text h3 {
    margin: 0 0 3px;
    overflow: hidden;
    color: #102039;
    font-size: 18px;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .plan-text p {
    margin: 0;
    color: #6f839d;
    font-size: 11px;
    line-height: 1.4;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .purchase-summary-period {
    min-height: 25px;
    margin-left: 2px;
    padding: 5px 9px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: #0b70d3;
    background: #fff;
    border: 1px solid #bedcf7;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-display-lg {
    min-width: 128px;
    margin: 0;
    padding: 0 0 0 20px;
    display: grid;
    justify-items: end;
    border: 0;
    border-left: 1px solid #cbdff3;
    text-align: right;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-caption {
    margin: 0 0 2px;
    color: #627a96;
    font-size: 10px;
    font-weight: 650;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-value {
    display: flex;
    align-items: baseline;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-display-lg .currency {
    margin-right: 3px;
    color: #087df0;
    font-size: 17px;
    font-weight: 750;
}

body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-display-lg .amount {
    color: #087df0;
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-body {
    padding: 12px 18px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
    gap: 12px;
    align-items: start;
}

body.page-dashboard #purchaseDialogOverlay .checkout-selection-panel {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 12px;
}

body.page-dashboard #purchaseDialogOverlay .checkout-option-card,
body.page-dashboard #purchaseDialogOverlay .checkout-confirm-panel {
    min-width: 0;
    margin: 0;
    padding: 14px;
    background: #fff;
    border: 1px solid #dce7f1;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(35, 72, 111, .045);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .option-title {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .option-title::before {
    content: none;
    display: none;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .option-step {
    min-width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #087df0;
    background: #e8f4ff;
    border: 1px solid #cce4fa;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
}

body.page-dashboard #purchaseDialogOverlay .option-title-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

body.page-dashboard #purchaseDialogOverlay .option-title-copy strong {
    color: #15243a;
    font-size: 13px;
    line-height: 1.25;
}

body.page-dashboard #purchaseDialogOverlay .option-title-copy small {
    color: #8292a7;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .duration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card {
    min-width: 0;
    min-height: 62px;
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #243751;
    background: #f8fbfe;
    border: 1px solid #d9e6f2;
    border-radius: 11px;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card:hover {
    background: #f2f8ff;
    border-color: #a9cff3;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card.active {
    color: #0872db;
    background: #eaf5ff;
    border-color: #75b7f4;
    box-shadow: inset 0 0 0 1px rgba(8, 125, 240, .08);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card.active::after {
    content: none;
    display: none;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card .dur-name {
    color: #617994;
    font-size: 11px;
    font-weight: 650;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card .dur-price {
    color: #15243a;
    font-size: 16px;
    font-weight: 780;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card.active :is(.dur-name, .dur-price) {
    color: #0872db;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card .dur-tag,
body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dur-card .dur-tag.hot {
    top: -7px;
    right: 8px;
    color: #fff;
    background: #087df0;
    border: 0;
    border-radius: 999px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card {
    min-width: 0;
    min-height: 56px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fbfe;
    border: 1px solid #d9e6f2;
    border-radius: 11px;
    box-shadow: none;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card:hover {
    background: #f2f8ff;
    border-color: #a9cff3;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card.active {
    background: #eaf5ff;
    border-color: #75b7f4;
    box-shadow: inset 0 0 0 1px rgba(8, 125, 240, .08);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-icon,
body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-icon.alipay,
body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-icon.wechat {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    color: #087df0;
    background: #fff;
    border: 1px solid #d1e3f4;
    border-radius: 10px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-icon.wechat {
    color: #09a869;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-icon.wallet {
    color: #178364;
    background: #effaf5;
    border-color: #cae9dc;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-meta {
    min-width: 0;
    display: grid;
    gap: 2px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-name {
    overflow: hidden;
    color: #15243a;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card .pay-desc {
    margin: 0;
    overflow: hidden;
    color: #7d8fa5;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card.is-disabled {
    background: #f7f9fb;
    border-style: dashed;
    opacity: .62;
}

body.page-dashboard #purchaseDialogOverlay .checkout-confirm-panel {
    display: grid;
    align-content: start;
    gap: 10px;
    background: #fff;
}

body.page-dashboard #purchaseDialogOverlay .checkout-payment-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-section {
    padding: 11px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    background: transparent;
    border: 0;
    border-top: 1px solid #e1ebf5;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-copy > div {
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-label {
    color: #15243a;
    font-size: 13px;
    font-weight: 750;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-copy p {
    margin: 2px 0 0;
    color: #7890aa;
    font-size: 10px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-fields {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-code-box {
    height: 42px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    color: #0872db;
    background: #fff;
    border: 1px dashed #88bdeb;
    border-radius: 11px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 4px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-refresh-btn {
    width: 42px;
    height: 42px;
    color: #087df0;
    background: #fff;
    border: 1px solid #c9dff3;
    border-radius: 11px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-refresh-btn:hover {
    color: #fff;
    background: #087df0;
    border-color: #087df0;
    transform: none;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-input {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    color: #15243a;
    background: #fff;
    border: 1px solid #c9dff3;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 650;
    line-height: 42px;
    text-align: center;
    letter-spacing: 2px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-input:focus {
    background: #fff;
    border-color: #65aef0;
    box-shadow: 0 0 0 3px rgba(8, 125, 240, .1);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .verify-input::placeholder {
    color: #9aabc0;
    font-size: 11px;
    letter-spacing: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-actions {
    margin-top: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
    gap: 9px;
    background: transparent;
    border: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dialog-pay-tip {
    color: #6d849f;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .confirm-pay-btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: #087df0;
    border: 1px solid #087df0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(8, 125, 240, .18);
    font-size: 13px;
    font-weight: 750;
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .confirm-pay-btn:hover {
    color: #fff;
    background: #086dd1;
    border-color: #086dd1;
    box-shadow: 0 12px 24px rgba(8, 109, 209, .22);
    transform: translateY(-1px);
}

body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .confirm-pay-btn .pay-arrow {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    body.page-dashboard #purchaseDialogOverlay.confirm-overlay {
        padding: 12px;
        align-items: center;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog {
        width: min(620px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #purchaseDialogOverlay .checkout-confirm-panel {
        min-height: 0;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-actions {
        margin-top: 0;
    }
}

@media (max-width: 520px) {
    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .purchase-dialog-heading {
        min-height: 72px;
        padding: 15px 62px 15px 16px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-heading-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .dialog-close-x {
        top: 17px;
        right: 16px;
        width: 36px;
        height: 36px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-order-summary {
        margin: 12px 12px 0;
        padding: 14px;
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .selected-plan-info {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .purchase-summary-period {
        margin-left: 60px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-order-summary .price-display-lg {
        min-width: 0;
        padding: 12px 0 0;
        justify-items: start;
        border-left: 0;
        border-top: 1px solid #cbdff3;
        text-align: left;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-body {
        padding: 12px;
        gap: 12px;
    }

    body.page-dashboard #purchaseDialogOverlay .checkout-selection-panel {
        gap: 12px;
    }

    body.page-dashboard #purchaseDialogOverlay .checkout-option-card,
    body.page-dashboard #purchaseDialogOverlay .checkout-confirm-panel {
        padding: 14px;
        border-radius: 13px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .duration-grid,
    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-checkout-dialog .pay-card-wallet {
        grid-column: auto;
    }
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon {
    min-width: 0;
    padding: 0 2px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon > label {
    display: block;
    margin-bottom: 8px;
    color: #243751;
    font-size: 13px;
    font-weight: 700;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-row input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d9e6f2;
    border-radius: 7px;
    background: #fff;
    color: #15243a;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-row button {
    min-width: 68px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #0b7ff3;
    border-radius: 7px;
    background: #eef6ff;
    color: #086ed3;
    font-weight: 700;
    cursor: pointer;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-feedback {
    min-height: 19px;
    margin-top: 5px;
    color: #627994;
    font-size: 11px;
}

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-feedback:empty { display: none; }

body.page-dashboard #purchaseDialogOverlay .purchase-coupon-feedback.is-valid { color: #148157; }
body.page-dashboard #purchaseDialogOverlay .purchase-coupon-feedback.is-error { color: #bc3d3d; }

/* UI42: dashboard hero uses cached Emby artwork with a soft three-poster rotation. */
body.page-dashboard #section-home .hero-poster {
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 15px 28px rgba(19, 76, 137, .2);
}

body.page-dashboard #section-home .hero-poster > img {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    transform: scale(1.07);
    filter: saturate(.94) contrast(1.02);
    transition: opacity .28s ease, transform .46s ease, filter .28s ease;
}

body.page-dashboard #section-home .hero-poster.has-image > img {
    opacity: 1;
    transform: scale(1.015);
}

body.page-dashboard #section-home .hero-poster-fallback {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity .24s ease;
}

body.page-dashboard #section-home .hero-poster.has-image .hero-poster-fallback {
    opacity: 0;
}

body.page-dashboard #section-home .hero-poster-stack.is-rotating .hero-poster > img {
    opacity: .08;
    filter: saturate(.7) blur(1px);
    transform: scale(.96);
}

/* UI44: every two seconds the latest-poster queue advances by one card:
   right -> centre -> left, then a newly arrived Emby item rotates in at right. */
body.page-dashboard #section-home .hero-poster {
    transition: right .64s cubic-bezier(.2, .8, .24, 1),
        bottom .64s cubic-bezier(.2, .8, .24, 1),
        transform .64s cubic-bezier(.2, .8, .24, 1),
        opacity .42s ease,
        filter .42s ease;
    will-change: right, bottom, transform, opacity;
}

body.page-dashboard #section-home .hero-poster.hero-poster--left {
    z-index: 1;
    right: 104px;
    bottom: 5px;
    opacity: .94;
    transform: rotate(-12deg) scale(.93);
}

body.page-dashboard #section-home .hero-poster.hero-poster--middle {
    z-index: 3;
    right: 55px;
    bottom: 0;
    opacity: 1;
    transform: rotate(-3deg) scale(1);
}

body.page-dashboard #section-home .hero-poster.hero-poster--right {
    z-index: 2;
    right: 6px;
    bottom: 7px;
    opacity: .98;
    transform: rotate(8deg) scale(.97);
}

body.page-dashboard #section-home .hero-poster.is-exiting-left {
    z-index: 0;
    right: 154px;
    bottom: 12px;
    opacity: 0;
    filter: brightness(.92) saturate(.82);
    transform: rotate(-23deg) scale(.76);
}

body.page-dashboard #section-home .hero-poster.is-moving-left {
    z-index: 1;
    right: 104px;
    bottom: 5px;
    opacity: .94;
    transform: rotate(-12deg) scale(.93);
}

body.page-dashboard #section-home .hero-poster.is-moving-middle {
    z-index: 3;
    right: 55px;
    bottom: 0;
    opacity: 1;
    transform: rotate(-3deg) scale(1);
}

body.page-dashboard #section-home .hero-poster.hero-poster--right.is-entering-right {
    z-index: 2;
    right: -50px;
    bottom: 15px;
    opacity: 0;
    filter: brightness(1.08) saturate(1.08);
    transform: rotate(20deg) scale(.78);
    transition: none;
}

/* UI43: successful check-in is celebrated inside the existing card. */
body.page-dashboard #section-home #checkinMiniCard {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

body.page-dashboard #section-home #checkinMiniCard > .checkin-mini-content {
    position: relative;
    z-index: 2;
    transition: opacity .28s ease, transform .34s ease, filter .28s ease;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-confirming > .checkin-mini-content {
    opacity: .12;
    filter: blur(2px);
    transform: scale(.965);
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-stage {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #fff;
    text-align: center;
    pointer-events: none;
    animation: checkin-success-stage-enter .5s cubic-bezier(.2, .76, .24, 1.14) both;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-stage.is-leaving {
    animation: checkin-success-stage-exit .24s ease both;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-stage strong {
    font-size: 22px;
    line-height: 1.2;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-stage > span:last-child {
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-mark {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    color: #087df4;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 26px rgba(3, 57, 127, .28);
    animation: checkin-success-mark-pop .54s cubic-bezier(.16, .82, .24, 1.26) both;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-mark svg {
    width: 27px;
    height: 27px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-home #checkinMiniCard::after {
    position: absolute;
    z-index: 1;
    top: -42%;
    left: -72%;
    width: 48%;
    height: 190%;
    content: '';
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .36), transparent);
    transform: rotate(13deg);
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating::after {
    animation: checkin-card-sheen 1s cubic-bezier(.22, .65, .28, 1) both;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating {
    animation: checkin-card-pulse .68s ease both;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-revealing .checkin-mini-state {
    animation: checkin-state-enter .62s cubic-bezier(.2, .75, .25, 1.15) both;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-revealing .checkin-mini-reward {
    animation: checkin-reward-rise .72s cubic-bezier(.18, .78, .22, 1.08) .08s both;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-complete .checkin-mini-icon {
    filter: drop-shadow(0 5px 12px rgba(255, 255, 255, .3));
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i {
    --burst-x: 0px;
    --burst-y: -108px;
    position: absolute;
    top: 56%;
    left: 50%;
    width: 7px;
    height: 13px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, .48);
    animation: checkin-burst-particle .82s cubic-bezier(.15, .68, .26, 1) both;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(2) { --burst-x: 62px; --burst-y: -88px; background: #c7f0ff; animation-delay: .03s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(3) { --burst-x: 103px; --burst-y: -38px; background: #fff4a8; animation-delay: .07s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(4) { --burst-x: 92px; --burst-y: 43px; background: #bdf7dc; animation-delay: .01s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(5) { --burst-x: 37px; --burst-y: 92px; background: #fff; animation-delay: .09s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(6) { --burst-x: -42px; --burst-y: 86px; background: #c7f0ff; animation-delay: .04s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(7) { --burst-x: -96px; --burst-y: 38px; background: #fff4a8; animation-delay: .08s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(8) { --burst-x: -102px; --burst-y: -34px; background: #bdf7dc; animation-delay: .02s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(9) { --burst-x: -58px; --burst-y: -90px; background: #fff; animation-delay: .06s; }
body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i:nth-child(10) { --burst-x: 28px; --burst-y: -102px; background: #c7f0ff; animation-delay: .1s; }

@keyframes checkin-card-sheen {
    0% { left: -72%; opacity: 0; }
    20% { opacity: 1; }
    100% { left: 126%; opacity: 0; }
}

@keyframes checkin-success-stage-enter {
    0% { opacity: 0; transform: translateY(10px) scale(.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes checkin-success-stage-exit {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) scale(.96); }
}

@keyframes checkin-success-mark-pop {
    0% { opacity: 0; transform: scale(.35) rotate(-12deg); }
    62% { opacity: 1; transform: scale(1.12) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes checkin-card-pulse {
    0%, 100% { transform: scale(1); }
    46% { transform: scale(1.018); }
}

@keyframes checkin-state-enter {
    0% { opacity: .35; transform: translateY(9px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes checkin-reward-rise {
    0% { opacity: .2; transform: translateY(18px) scale(.84); }
    65% { opacity: 1; transform: translateY(-3px) scale(1.07); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes checkin-burst-particle {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.82) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.page-dashboard #section-home #checkinMiniCard > .checkin-mini-content,
    body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-stage,
    body.page-dashboard #section-home #checkinMiniCard .checkin-mini-success-mark,
    body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating,
    body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating::after,
    body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating .checkin-mini-state,
    body.page-dashboard #section-home #checkinMiniCard.is-checkin-celebrating .checkin-mini-reward,
    body.page-dashboard #section-home #checkinMiniCard .checkin-mini-burst > i {
        animation: none !important;
        transition: none !important;
    }
}
/* Multi-Emby account management */
body.page-dashboard .multi-emby-account-list {
    border-top: 1px solid #d8e2ed;
}

body.page-dashboard .multi-emby-account-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px 0;
    border-bottom: 1px solid #d8e2ed;
}

body.page-dashboard .multi-emby-account-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid #bed3e8;
    border-radius: 7px;
    background: #edf6ff;
    color: #176aa6;
}

body.page-dashboard .multi-emby-account-mark svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.page-dashboard .multi-emby-account-main {
    min-width: 0;
}

body.page-dashboard .multi-emby-account-server {
    overflow: hidden;
    color: #26354a;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .multi-emby-account-name {
    overflow: hidden;
    margin-top: 3px;
    color: #66768a;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .multi-emby-account-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border: 1px solid #abc9e6;
    border-radius: 4px;
    color: #176aa6;
    font-size: 10px;
    font-weight: 600;
    vertical-align: 1px;
}

body.page-dashboard .multi-emby-account-tag.is-disabled {
    color: #98534e;
    background: #fff4f3;
    border-color: #e7c9c6;
}

body.page-dashboard .multi-emby-account-actions {
    display: flex;
    gap: 6px;
}

body.page-dashboard .multi-emby-account-actions .btn-v2 {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
}

body.page-dashboard .multi-emby-empty,
body.page-dashboard .multi-emby-loading {
    padding: 24px 0;
    color: #718096;
    font-size: 13px;
    text-align: center;
}

body.page-dashboard .multi-emby-empty.is-error {
    color: #b43d49;
}

body.page-dashboard .multi-emby-add-actions {
    margin-top: 14px;
}

body.page-dashboard .search-command-context {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

body.page-dashboard .request-server-choice {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.2fr);
    align-items: center;
    gap: 10px 16px;
    margin: 14px 0 15px;
    padding: 12px 14px;
    border: 1px solid #d8e3ef;
    border-radius: 10px;
    background: #f7faff;
}

body.page-dashboard .request-server-choice.is-hidden-initially,
body.page-dashboard .request-server-choice select.is-hidden-initially,
body.page-dashboard .request-server-auto.is-hidden-initially {
    display: none;
}

body.page-dashboard .request-server-choice-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.page-dashboard .request-server-choice-kicker {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

body.page-dashboard .request-server-auto {
    overflow: hidden;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .request-server-choice select {
    width: 100%;
    min-height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid #cbd8e6;
    border-radius: 6px;
    background: #fff;
    color: #26354a;
    font: inherit;
}

body.page-dashboard .request-server-hint {
    grid-column: 1 / -1;
    margin: 0;
    color: #66758a;
    font-size: 12px;
    line-height: 1.5;
}

body.page-dashboard .emby-status-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f6f83;
    font-size: 13px;
}

body.page-dashboard #section-profile .form-field-v2 select,
body.page-dashboard .emby-bind-dialog select {
    width: 100%;
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid #cbd8e6;
    border-radius: 6px;
    background: #fff;
    color: #243247;
    font: inherit;
}

@media (max-width: 560px) {
    body.page-dashboard .search-command-context {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    body.page-dashboard .request-server-choice {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.page-dashboard .multi-emby-account-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    body.page-dashboard .multi-emby-account-actions {
        grid-column: 2;
    }
}
/* 站内播放器导入桥接页 */
body.page-player-import {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: #19314e;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(135deg, #e9f2ff 0%, #f8fbff 52%, #e3f3ff 100%);
}

.player-import-shell {
    width: min(100% - 32px, 460px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 44px 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.player-import-card,
.player-import-help {
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 20px 55px rgba(45, 92, 145, .14);
}

.player-import-card { padding: 34px 30px 30px; text-align: center; }
.player-import-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #1978ee, #54c3ef);
    font-size: 27px;
    font-weight: 700;
}
.player-import-kicker { margin: 0 0 8px; color: #3178c7; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.player-import-card h1, .player-import-modal h2 { margin: 0; color: #172c46; font-weight: 750; }
.player-import-card h1 { font-size: 25px; }
.player-import-subtitle { min-height: 22px; margin: 10px 0 24px; color: #7187a1; font-size: 14px; line-height: 1.5; }
.player-import-action, .player-import-manual, .player-import-modal-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
.player-import-action { width: 100%; color: #fff; background: #1978ee; box-shadow: 0 9px 20px rgba(25, 120, 238, .24); }
.player-import-help { margin-top: 16px; padding: 20px 22px; }
.player-import-help-title { color: #243d5b; font-size: 15px; font-weight: 750; }
.player-import-help p { margin: 8px 0 15px; color: #7890aa; font-size: 12px; line-height: 1.5; }
.player-import-manual { width: 100%; color: #30628f; background: #edf5ff; border: 1px solid #d2e4fa; }
.player-import-footer { padding-top: 20px; color: #7690ac; font-size: 12px; text-align: center; }
.player-import-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(18, 37, 59, .52); }
.player-import-modal[hidden] { display: none; }
.player-import-modal-panel { width: min(100%, 480px); max-height: min(760px, calc(100vh - 32px)); overflow: auto; border: 1px solid #edf3fa; border-radius: 16px; background: #fff; box-shadow: 0 26px 70px rgba(18, 37, 59, .28); }
.player-import-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 22px 15px; border-bottom: 1px solid #edf2f7; }
.player-import-modal-header .player-import-kicker { margin-bottom: 6px; }
.player-import-modal h2 { font-size: 18px; }
.player-import-close { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #75869a; background: #f2f6fa; font-size: 20px; cursor: pointer; }
.player-import-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 17px 22px 0; }
.player-import-apps button { min-height: 42px; border: 1px solid #dce8f4; border-radius: 9px; color: #607793; background: #fbfdff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.player-import-apps button.selected { border-color: #398ee9; color: #166cc2; background: #edf6ff; }
.player-import-tip { min-height: 18px; margin: 10px 22px 12px; color: #8a9bae; font-size: 12px; }
.player-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px 12px; }
.player-import-fields label, .player-import-line label { display: grid; gap: 6px; color: #607793; font-size: 12px; font-weight: 650; }
.player-import-fields input, .player-import-line input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 0 11px; border: 1px solid #dbe6f0; border-radius: 8px; outline: 0; color: #203853; background: #fbfdff; font: inherit; font-size: 13px; }
.player-import-lines { display: grid; gap: 10px; padding: 0 22px; }
.player-import-form-error { margin: 12px 22px 0; padding: 10px 12px; border: 1px solid #f0c8c5; border-radius: 9px; color: #a3423b; background: #fff3f1; font-size: 12px; line-height: 1.5; }
.player-import-form-error[hidden] { display: none; }
.player-import-line { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 8px; align-items: end; padding: 12px; border: 1px solid #e0eaf4; border-radius: 10px; background: #f8fbff; }
.player-import-line-remove { width: 40px; height: 40px; border: 1px solid #e0e7ef; border-radius: 8px; color: #8a9bae; background: #fff; font-size: 18px; cursor: pointer; }
.player-import-modal-actions { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; padding: 18px 22px 22px; }
.player-import-modal-actions button { min-height: 42px; font-size: 12px; }
.player-import-modal-actions .secondary { border: 1px solid #dce7f1; color: #57708c; background: #f8fbfe; }
.player-import-modal-actions .primary { color: #fff; background: #1978ee; }

@media (max-width: 500px) {
    .player-import-shell { width: min(100% - 22px, 460px); padding: 22px 0 16px; }
    .player-import-card { padding: 28px 20px 22px; }
    .player-import-fields, .player-import-line { grid-template-columns: 1fr; }
    .player-import-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .player-import-line-remove { width: 100%; }
    .player-import-modal-actions { grid-template-columns: 1fr; }
}

/* Server-scoped subscription summary */
body.page-dashboard .server-subscription-cards {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

body.page-dashboard .server-subscription-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: start;
    gap: 12px;
}

body.page-dashboard .server-subscription-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1e9f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(39, 73, 108, .06);
}

body.page-dashboard .server-subscription-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.page-dashboard .server-subscription-label,
body.page-dashboard .server-subscription-card-grid span {
    display: block;
    color: #8192a5;
    font-size: 11px;
}

body.page-dashboard .server-subscription-card h3 {
    margin: 4px 0 0;
    color: #203853;
    font-size: 16px;
}

body.page-dashboard .server-subscription-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: #376b53;
    background: #edf8f1;
    font-size: 11px;
    font-weight: 700;
}

body.page-dashboard .server-subscription-card.expired .server-subscription-status,
body.page-dashboard .server-subscription-card.none .server-subscription-status {
    color: #8a6170;
    background: #fbf1f4;
}

body.page-dashboard .server-subscription-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

body.page-dashboard .server-subscription-card-grid strong {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #314b66;
    font-size: 13px;
}

body.page-dashboard .server-subscription-warning {
    margin: 12px 0 0;
    color: #ad5a4b;
    font-size: 12px;
    font-weight: 650;
}

body.page-dashboard .retention-server-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(129, 146, 165, .18);
}

body.page-dashboard .retention-server-line:last-child { border-bottom: 0; }

body.page-dashboard .subscription-renewal {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e1e9f2;
    color: #314b66;
}

body.page-dashboard .subscription-renewal-panel {
    min-width: 0;
    border: 1px solid #e1e9f2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(39, 73, 108, .06);
}

body.page-dashboard .subscription-renewal-panel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    list-style: none;
    cursor: pointer;
}

body.page-dashboard .subscription-renewal-panel > summary::-webkit-details-marker { display: none; }
body.page-dashboard .subscription-renewal-panel > summary:focus-visible { outline: 3px solid #bddcff; outline-offset: 2px; border-radius: 12px; }
body.page-dashboard .subscription-renewal-summary-copy { min-width: 0; }
body.page-dashboard .subscription-renewal-summary-copy > strong { display: block; color: #203853; font-size: 14px; overflow-wrap: anywhere; }
body.page-dashboard .subscription-renewal-summary-copy > span { display: block; margin-top: 5px; color: #75869b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
body.page-dashboard .subscription-renewal-summary-action { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: #087ff5; font-size: 12px; }
body.page-dashboard .subscription-renewal-summary-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.page-dashboard .subscription-renewal-panel .renewal-collapse-label { display: none; }
body.page-dashboard .subscription-renewal-panel[open] .renewal-expand-label { display: none; }
body.page-dashboard .subscription-renewal-panel[open] .renewal-collapse-label { display: inline; }
body.page-dashboard .subscription-renewal-panel[open] .subscription-renewal-summary-action svg { transform: rotate(180deg); }
body.page-dashboard .subscription-renewal-panel > .subscription-renewal { margin: 0; padding: 16px; }
body.page-dashboard .subscription-renewal-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
body.page-dashboard .subscription-renewal-controls > .subscription-renewal-manual { margin-top: 0; }

body.page-dashboard .subscription-renewal-heading,
body.page-dashboard .subscription-renewal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body.page-dashboard .subscription-renewal-heading {
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 14px;
}

body.page-dashboard .subscription-renewal-heading > span {
    padding: 4px 8px;
    border-radius: 6px;
    color: #087ff5;
    background: #edf6ff;
    font-size: 12px;
}

body.page-dashboard .subscription-renewal-row {
    padding: 12px;
    border: 1px solid #e1e9f2;
    border-radius: 10px;
}

body.page-dashboard .subscription-renewal-manual { margin-top: 10px; }
body.page-dashboard .subscription-renewal-copy { min-width: 0; }
body.page-dashboard .subscription-renewal-copy > strong { font-size: 13px; }
body.page-dashboard .subscription-renewal-copy > p,
body.page-dashboard .subscription-renewal-hint {
    margin: 5px 0 0;
    color: #75869b;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

body.page-dashboard .subscription-renewal-copy .subscription-renewal-window { color: #537795; }
body.page-dashboard .subscription-renewal-hint { margin-top: 10px; }
body.page-dashboard .subscription-renewal-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

body.page-dashboard .subscription-renewal-toggle > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.page-dashboard .subscription-renewal-switch {
    display: inline-block;
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #aebcca;
    transition: background .15s;
}

body.page-dashboard .subscription-renewal-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

body.page-dashboard .retention-auto-input:checked + .subscription-renewal-switch { background: #087ff5; }
body.page-dashboard .retention-auto-input:checked + .subscription-renewal-switch::after { transform: translateX(18px); }
body.page-dashboard .retention-auto-input:focus-visible + .subscription-renewal-switch { outline: 3px solid #bddcff; outline-offset: 3px; }
body.page-dashboard .retention-auto-input:disabled ~ span { opacity: .55; }
body.page-dashboard .subscription-renewal-button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: #087ff5;
    color: #fff;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

body.page-dashboard .subscription-renewal-button:disabled { background: #e9eef4; color: #8b9bb0; cursor: not-allowed; }

@media (max-width: 1000px) {
    body.page-dashboard .subscription-renewal-controls { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    body.page-dashboard .server-subscription-summary-grid { grid-template-columns: 1fr; }
    body.page-dashboard .subscription-renewal-manual { flex-wrap: wrap; }
    body.page-dashboard .subscription-renewal-button { width: 100%; }
}

/* 多服务器套餐摘要、线路空状态与操作日志筛选的最终布局覆盖。 */
body.page-dashboard .user-level-plans {
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 1px;
    overflow: visible;
    line-height: 1.35;
    white-space: normal;
}

body.page-dashboard .sidebar-plan-item {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

/* 用户卡片在窄桌面和浏览器缩放后仍保持内容宽度可收缩。 */
body.page-dashboard .sidebar-footer {
    min-width: 0;
}

body.page-dashboard .user-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

body.page-dashboard .user-info-sidebar {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

@media (max-width: 1024px) and (min-width: 769px) {
    body.page-dashboard .user-card {
        gap: 9px;
        padding-inline: 9px;
    }

    body.page-dashboard .user-avatar {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .user-card {
        gap: 8px;
        padding: 9px;
    }

    body.page-dashboard .user-avatar {
        width: 34px;
        height: 34px;
    }
}

body.page-dashboard #section-home .status-badge-mini .badge-info {
    min-width: 0;
}

body.page-dashboard #section-home .subscription-mini-plan {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

body.page-dashboard #section-home #dashboardLevelValue {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-self: stretch;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact > :is(.loading-placeholder, .server-lines-no-access) {
    width: 100%;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    box-sizing: border-box;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact > .server-lines-empty {
    justify-content: center;
    text-align: center;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact > .server-lines-empty p {
    max-width: 28em;
    margin: 5px auto 0;
    line-height: 1.55;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel {
    grid-template-columns: minmax(190px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-heading {
    min-height: 54px;
    padding: 8px 10px;
    background: #f5f9fe;
    border: 1px solid #dce7f3;
    border-radius: 9px;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-heading div > span {
    white-space: normal;
    line-height: 1.4;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar {
    grid-template-columns: minmax(150px, 200px) minmax(140px, 180px) auto;
    justify-content: end;
    gap: 8px;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar > .activity-filter-field {
    gap: 5px;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar .activity-filter-select {
    min-height: 36px;
    padding: 0 30px 0 10px;
    background: #fff;
    border-color: #d5e1ee;
    border-radius: 7px;
    font-size: 12px;
}

body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar .activity-refresh-btn {
    min-width: 96px;
    min-height: 36px;
    padding: 0 11px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel {
        grid-template-columns: 1fr;
    }

    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar {
        grid-template-columns: minmax(150px, 220px) minmax(140px, 200px) auto;
        justify-content: start;
    }
}

@media (max-width: 760px) {
    body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact {
        min-height: 168px;
    }

    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar .activity-refresh-btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 520px) {
    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-activity-logs .activity-logs-page > .activity-filter-panel > .activity-filter-bar .activity-refresh-btn {
        grid-column: 1;
    }
}

/* Final dashboard server-card layout overrides. */
body.page-dashboard #section-home .subscription-lines-container,
body.page-dashboard #section-home .subscription-lines-container:not(.has-checkin-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    gap: 14px !important;
}

body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) !important;
}

body.page-dashboard #section-home .subscription-lines-container > .server-lines-compact,
body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > .server-lines-compact {
    display: block;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: 0;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-home .emby-service-card,
body.page-dashboard #section-home .emby-service-card:hover {
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #dce7f3 !important;
    border-radius: var(--user-card-radius, 20px) !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055) !important;
}

body.page-dashboard #section-home .emby-service-card-header {
    background: #f7fbff !important;
}

@media (max-width: 1180px) {
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        min-height: 220px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard #section-home .emby-service-card,
    body.page-dashboard #section-home .emby-service-card:hover {
        border-radius: 14px !important;
    }
}

/* Keep the fixed sidebar and dashboard canvas separate on small laptops. */
@media (min-width: 769px) and (max-width: 1024px) {
    body.page-dashboard .sidebar {
        width: 220px;
        max-width: none;
    }

    body.page-dashboard .main-content {
        width: calc(100% - 220px);
        max-width: none;
        margin-left: 220px;
        padding-inline: clamp(16px, 2vw, 22px);
    }

    body.page-dashboard #section-home :is(
        .subscription-lines-container,
        .server-lines-compact,
        #serverLinesContainer,
        .emby-service-list
    ) {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

}

@media (min-width: 769px) and (max-width: 900px) {
    body.page-dashboard #section-home .emby-service-card-body {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .emby-service-lines-panel {
        border-top: 1px solid #e5edf5;
        border-left: 0;
    }
}

/* 统一前台页面标题栏刷新入口。 */
body.page-dashboard .content-section > .section-header {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: 18px;
}

body.page-dashboard .page-refresh-btn {
    display: inline-flex;
    min-width: 72px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    padding: 0 11px;
    color: #23639a;
    background: #f4f9ff;
    border: 1px solid #cfe1f3;
    border-radius: 8px;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

body.page-dashboard .page-refresh-btn:hover:not(:disabled) {
    color: #075eb4;
    background: #e8f3ff;
    border-color: #acd0f2;
}

body.page-dashboard .page-refresh-btn:focus-visible {
    outline: 2px solid rgba(11, 127, 243, .26);
    outline-offset: 2px;
}

body.page-dashboard .page-refresh-btn:disabled {
    opacity: .72;
    cursor: wait;
}

body.page-dashboard .page-refresh-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

body.page-dashboard .page-refresh-btn--compact {
    min-width: 62px;
    height: 28px;
    padding-inline: 9px;
    color: #16735d;
    background: #f5fcf8;
    border-color: #ccebdd;
    border-radius: 7px;
    font-size: 10px;
}

body.page-dashboard .page-refresh-btn--compact:hover:not(:disabled) {
    color: #0f624f;
    background: #eaf9f1;
    border-color: #a9ddc6;
}

body.page-dashboard .page-refresh-spinner {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: page-refresh-spin .72s linear infinite;
}

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

/* 兑换成功：将关键信息分块呈现，避免沿用支付成功弹窗的拥挤布局。 */
body.page-dashboard .redemption-success-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 31, 51, .42);
    opacity: 0;
    transition: opacity .18s ease;
}

body.page-dashboard .redemption-success-overlay.show {
    opacity: 1;
}

body.page-dashboard .redemption-success-dialog {
    width: min(100%, 480px);
    max-height: min(720px, calc(100vh - 40px));
    overflow: auto;
    padding: 25px;
    color: #16304b;
    background: #fff;
    border: 1px solid #d8e7f4;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(18, 49, 79, .24);
    transform: translateY(10px) scale(.98);
    transition: transform .2s ease;
}

body.page-dashboard .redemption-success-overlay.show .redemption-success-dialog {
    transform: translateY(0) scale(1);
}

body.page-dashboard .redemption-success-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

body.page-dashboard .redemption-success-icon {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    color: #10845f;
    background: #eaf9f1;
    border: 1px solid #bfe6d1;
    border-radius: 13px;
}

body.page-dashboard .redemption-success-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

body.page-dashboard .redemption-success-kicker {
    display: block;
    margin-bottom: 4px;
    color: #148363;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

body.page-dashboard .redemption-success-dialog h3 {
    margin: 0;
    color: #112b46;
    font-size: 23px;
    font-weight: 780;
    line-height: 1.2;
}

body.page-dashboard .redemption-success-message {
    margin: 18px 0 16px;
    color: #637a92;
    font-size: 13px;
    line-height: 1.6;
}

body.page-dashboard .redemption-success-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
    background: #f7fbff;
    border: 1px solid #e0ebf5;
    border-radius: 12px;
}

body.page-dashboard .redemption-success-summary > div {
    min-width: 0;
    padding: 10px 11px;
    background: #fff;
    border: 1px solid #e5edf5;
    border-radius: 9px;
}

body.page-dashboard .redemption-success-summary span,
body.page-dashboard .redemption-success-summary strong {
    display: block;
    overflow-wrap: anywhere;
}

body.page-dashboard .redemption-success-summary span {
    margin-bottom: 4px;
    color: #8498ad;
    font-size: 10px;
}

body.page-dashboard .redemption-success-summary strong {
    color: #203b57;
    font-size: 13px;
    line-height: 1.35;
}

body.page-dashboard .redemption-success-actions {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 9px;
    margin-top: 18px;
}

body.page-dashboard .redemption-success-actions button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 0 12px;
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

body.page-dashboard .redemption-success-secondary {
    color: #52708d;
    background: #f7fbff;
    border: 1px solid #d8e6f2;
}

body.page-dashboard .redemption-success-primary {
    color: #fff;
    background: #1479d1;
    border: 1px solid #1479d1;
    box-shadow: 0 8px 16px rgba(20, 121, 209, .18);
}

body.page-dashboard .redemption-success-actions button:hover {
    filter: brightness(.97);
}

body.page-dashboard .redemption-success-actions button:focus-visible {
    outline: 2px solid rgba(20, 121, 209, .28);
    outline-offset: 2px;
}

body.page-dashboard .redemption-success-primary svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* 卡片只保留轻微层次，不用 hover 伪元素/轮廓制造四角方框。 */
body.page-dashboard #section-home .emby-service-card,
body.page-dashboard #section-home .emby-service-card:hover,
body.page-dashboard #section-home .emby-service-card:focus,
body.page-dashboard #section-home .emby-service-card:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    transform: none !important;
    filter: none !important;
}

body.page-dashboard #section-home .emby-service-card::before,
body.page-dashboard #section-home .emby-service-card::after,
body.page-dashboard #section-home .emby-service-card:hover::before,
body.page-dashboard #section-home .emby-service-card:hover::after {
    display: none !important;
    content: none !important;
}

/*
 * The server card is rendered inside several legacy dashboard surfaces.  A
 * cached/older rule on one of those surfaces could still paint a square
 * hover frame outside the card's rounded corners. Keep the complete server
 * card stack decoration-free so only the card border supplies its shape.
 */
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
)::before,
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
)::after,
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
):hover::before,
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
):hover::after {
    display: none !important;
    content: none !important;
}

body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
):hover,
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
):focus,
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list,
    .emby-service-card
):focus-visible,
body.page-dashboard #section-home .emby-service-card:focus-within {
    outline: 0 !important;
    outline-offset: 0 !important;
}

body.page-dashboard #section-home .emby-service-card:hover,
body.page-dashboard #section-home .emby-service-card:focus,
body.page-dashboard #section-home .emby-service-card:focus-visible,
body.page-dashboard #section-home .emby-service-card:focus-within {
    background-clip: padding-box !important;
    border-color: #dce7f3 !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .055) !important;
    transform: none !important;
    filter: none !important;
}

body.page-dashboard #section-home .emby-service-card {
    background-clip: padding-box !important;
    isolation: isolate;
}

/* Keep long line/account copy inside its panel instead of expanding the
   two-column service card. */
body.page-dashboard #section-home .emby-service-card,
body.page-dashboard #section-home .emby-service-card-body,
body.page-dashboard #section-home :is(.emby-service-account-panel, .emby-service-lines-panel),
body.page-dashboard #section-home .emby-service-lines-list {
    min-width: 0;
}

body.page-dashboard #section-home .emby-service-card-body {
    min-height: 0;
}

body.page-dashboard #section-home .emby-service-lines-list {
    max-height: 168px;
    min-height: 0;
}

body.page-dashboard #section-home .emby-service-line,
body.page-dashboard #section-home .emby-service-inline-empty {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

body.page-dashboard #section-home .emby-service-line-copy,
body.page-dashboard #section-home .emby-service-inline-empty > div {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

body.page-dashboard #section-home .emby-service-inline-empty p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep the line count beside its label. Right-aligning this value made it look
   detached from the heading and could place it against the card edge at some
   zoom levels. */
body.page-dashboard #section-home .emby-service-lines-panel {
    box-sizing: border-box;
    overflow: hidden;
}

body.page-dashboard #section-home .emby-service-lines-heading {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    overflow: hidden;
}

body.page-dashboard #section-home .emby-service-lines-heading > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-lines-heading > .emby-service-lines-count {
    display: inline-flex;
    min-width: max-content;
    max-width: 42%;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    overflow: hidden;
    color: #6f8499;
    background: #f1f6fb;
    border: 1px solid #dde8f2;
    border-radius: 6px;
    box-sizing: border-box;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-home .emby-service-lines-heading > .emby-service-lines-hint {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    color: #7d90a6;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
}

body.page-dashboard #section-home .emby-service-lines-hint[hidden] {
    display: none;
}

body.page-dashboard #section-home .emby-service-lines-hint svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The legacy line action used a text-button width. Service cards only show an
   icon here, so keep copy and visibility actions the same compact size. */
body.page-dashboard #section-home .emby-service-card .emby-service-line .line-copy-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    padding: 0;
    gap: 0;
    border-radius: 7px;
    box-sizing: border-box;
}

/* The check-in panel has its own stable height. It must not stretch with a
   growing server list; only the line list itself may scroll. */
body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard {
    align-self: start;
    box-sizing: border-box;
    height: 284px;
    min-height: 284px;
    max-height: 284px;
    overflow: hidden;
}

body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard .checkin-mini-content {
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 1180px) and (min-width: 801px) {
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }
}

@media (max-width: 800px) {
    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card > #checkinMiniCard {
        height: auto;
        min-height: 100px;
        max-height: none;
    }
}

/* Fill the last row without making desktop cards taller. Keep the original
   account/line proportions; stack only when the card is actually too narrow. */
@media (min-width: 801px) {
    body.page-dashboard #section-home .emby-service-list > .emby-service-card {
        flex-basis: calc((100% - 14px) / 2);
    }

    @container emby-service (min-width: 400px) {
        body.page-dashboard #section-home .emby-service-card-body {
            grid-template-columns: minmax(min(230px, 41%), .72fr) minmax(0, 1.28fr);
        }

        body.page-dashboard #section-home .emby-service-lines-panel {
            border-top: 0;
            border-left: 1px solid #e5edf5;
        }
    }

    @container emby-service (min-width: 400px) and (max-width: 560px) {
        body.page-dashboard #section-home :is(.emby-service-account-panel, .emby-service-lines-panel) {
            padding-inline: 12px;
        }

        body.page-dashboard #section-home .emby-service-credential {
            padding-inline: 8px;
        }

        body.page-dashboard #section-home .emby-service-credential > div {
            gap: 4px;
        }

        body.page-dashboard #section-home .emby-service-credential .credential-btn {
            width: 24px;
            height: 24px;
            min-width: 24px;
        }

        body.page-dashboard #section-home .emby-service-line {
            gap: 6px;
            padding-inline: 6px;
        }

        body.page-dashboard #section-home .emby-service-card .emby-service-line :is(.line-toggle-btn, .line-copy-btn) {
            width: 28px;
            height: 28px;
            min-width: 28px;
            min-height: 28px;
            flex-basis: 28px;
        }
    }
}

/* The legacy stat-card hover rule also matched the server-list shell. */
body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list
) {
    /* These elements are layout shells. Only the service card itself may
       paint a border, radius, shadow, or clipping edge. */
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.page-dashboard #section-home :is(
    .subscription-lines-container,
    .server-lines-compact,
    .emby-service-list
):is(:hover, :focus, :focus-visible, :focus-within) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    transform: none !important;
    filter: none !important;
}

body.page-dashboard .payment-dialog > .payment-dialog-heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    margin: 20px 22px 0;
}

body.page-dashboard .payment-dialog-heading-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: #276294;
    background: #eff6fd;
    border: 1px solid #dce8f4;
    border-radius: 9px;
}

body.page-dashboard .payment-dialog-heading-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard .payment-dialog-heading h3 {
    min-width: 0;
    margin: 0;
    text-align: left;
}

body.page-dashboard .payment-dialog .payment-info p {
    overflow-wrap: anywhere;
}

body.page-dashboard .payment-dialog > .buttons button {
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .purchase-credit-summary:not([hidden]) {
    display: block;
    margin-top: 6px;
    color: #296b56;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 620px) {
    body.page-dashboard .content-section > .section-header {
        align-items: flex-start;
        gap: 12px;
    }

    body.page-dashboard .page-refresh-btn {
        min-width: 34px;
        width: 34px;
        padding: 0;
    }

    body.page-dashboard .page-refresh-btn span {
        display: none;
    }

    body.page-dashboard .page-refresh-btn--compact {
        min-width: 34px;
        width: 34px;
        padding: 0;
    }

    body.page-dashboard .redemption-success-dialog {
        padding: 20px;
        border-radius: 15px;
    }

    body.page-dashboard .redemption-success-summary {
        grid-template-columns: 1fr;
    }

    body.page-dashboard .redemption-success-actions {
        grid-template-columns: 1fr;
    }
}

/* UI43-end: 认证页主题覆盖历史规则，保持登录、注册、找回密码一致。 */
body:is(.page-login, .page-forgot, .page-register) {
    --auth-primary: #0b7ff3;
    --auth-primary-hover: #006fdf;
    --auth-bg: #f5f8fc;
    --auth-surface: #fff;
    --auth-soft: #edf5ff;
    --auth-border: #dce8f5;
    --auth-border-strong: #c9dced;
    --auth-ink: #0c1628;
    --auth-ink-soft: #34445d;
    --auth-muted: #6d809d;
    --auth-header-surface: rgba(232, 242, 252, .66);
    --auth-header-border: rgba(197, 218, 237, .72);
    min-height: 100vh;
    color: var(--auth-ink) !important;
    background-color: var(--auth-bg) !important;
    background-image:
        radial-gradient(circle at 86% 8%, rgba(116, 184, 255, .18), transparent 31%),
        linear-gradient(145deg, #eef6ff 0%, #f5f8fc 45%, #fff 100%) !important;
}

body.page-login,
body.page-forgot {
    display: flex !important;
    flex-direction: column !important;
}

body:is(.page-login, .page-forgot) .header,
body.page-register .auth-header {
    position: relative;
    z-index: 2;
    display: flex !important;
    width: min(calc(100% - 48px), 1180px) !important;
    min-height: 66px !important;
    margin: 18px auto 0 !important;
    padding: 10px 15px !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--auth-header-surface) !important;
    border: 1px solid var(--auth-header-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(43, 79, 120, .045) !important;
    backdrop-filter: blur(14px);
}

body:is(.page-login, .page-forgot) .header .logo,
body.page-register .auth-header .logo {
    display: flex !important;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--auth-ink) !important;
}

body.page-login .header .logo {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 10px;
}

body.page-login .header .logo-icon {
    grid-row: 1 / 3;
}

body:is(.page-login, .page-forgot) .header .logo-icon,
body.page-register .auth-header .logo-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px;
    background: var(--auth-soft) !important;
    border: 1px solid #cfe2f6 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    overflow: hidden;
}

body:is(.page-login, .page-forgot) .header .logo-icon img,
body.page-register .auth-header .logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-login .header .logo-name,
body.page-forgot .header .logo > span,
body.page-register .auth-header .logo-name {
    color: var(--auth-ink) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
}

body.page-login .header .logo-tagline,
body.page-register .auth-header .logo-tagline {
    color: var(--auth-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

body:is(.page-login, .page-forgot) .header .nav-links,
body.page-register .auth-header .auth-nav {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
}

body:is(.page-login, .page-forgot) .header .nav-links a,
body.page-register .auth-header .auth-nav a {
    display: inline-flex !important;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 8px 12px !important;
    color: #315475 !important;
    background: rgba(232, 242, 252, .32) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 680 !important;
}

body:is(.page-login, .page-forgot) .header .nav-links a:hover,
body.page-register .auth-header .auth-nav a:hover {
    color: #0b6fda !important;
    background: rgba(255, 255, 255, .58) !important;
    border-color: rgba(197, 218, 237, .72) !important;
}

body:is(.page-login, .page-forgot) .header .nav-icon {
    color: var(--auth-primary) !important;
}

body:is(.page-login, .page-forgot) .header .nav-icon svg {
    width: 15px !important;
    height: 15px !important;
}

body.page-login-auth .main-content {
    display: grid !important;
    width: min(calc(100% - 48px), 1120px) !important;
    min-height: calc(100vh - 104px) !important;
    margin: 0 auto !important;
    padding: 36px 0 70px !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 430px) !important;
    align-items: center;
    gap: clamp(60px, 9vw, 130px) !important;
}

body.page-login .login-intro h1,
body.page-login .welcome-title,
body.page-forgot .welcome-title,
body.page-forgot .success-message h3,
body.page-register .form-header h1 {
    color: var(--auth-ink) !important;
}

body.page-login .login-intro h1 em,
body.page-login .intro-eyebrow,
body.page-login :is(.forgot-password-link, .register-link) a,
body.page-register .login-link a,
body.page-forgot .back-link a {
    color: #0b6fda !important;
}

body.page-login .login-intro > p,
body.page-login .welcome-subtitle,
body.page-forgot .welcome-subtitle,
body.page-register .form-header p,
body.page-register .hint,
body.page-register .login-link,
body.page-forgot .form-hint,
body.page-forgot .back-link,
body.page-forgot .success-message p {
    color: var(--auth-muted) !important;
}

body.page-login .intro-features span {
    color: #315475 !important;
    background: rgba(255, 255, 255, .8) !important;
    border-color: var(--auth-border) !important;
    border-radius: 11px !important;
}

body.page-login .intro-features span::before {
    background: var(--auth-primary) !important;
}

body:is(.page-login, .page-forgot) .login-container,
body.page-register .register-wrapper {
    background: var(--auth-surface) !important;
    border-color: var(--auth-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 60px rgba(43, 79, 120, .12) !important;
}

body:is(.page-login, .page-forgot) .login-container {
    padding: 36px !important;
}

body:is(.page-login, .page-forgot) .form-label,
body.page-register .form-group label {
    color: var(--auth-ink-soft) !important;
}

body:is(.page-login, .page-forgot) .form-input,
body.page-register .form-group input,
body.page-register .email-code-input {
    color: var(--auth-ink);
    background: #f7faff;
    border-color: var(--auth-border);
    border-radius: 12px;
}

body:is(.page-login, .page-forgot) .form-input:focus,
body.page-register .form-group input:focus,
body.page-register .email-code-input:focus {
    background: #fff;
    border-color: #69aef0;
    box-shadow: 0 0 0 4px rgba(11, 127, 243, .11);
}

body:is(.page-login, .page-forgot) .submit-btn,
body.page-register .register-btn,
body.page-register .send-email-code-btn {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 9px 20px rgba(11, 127, 243, .2) !important;
}

body:is(.page-login, .page-forgot) .submit-btn:hover,
body.page-register :is(.register-btn, .send-email-code-btn):hover:not(:disabled) {
    background: var(--auth-primary-hover) !important;
    border-color: var(--auth-primary-hover) !important;
}

body.page-forgot .main-content {
    display: flex !important;
    width: min(calc(100% - 32px), 560px) !important;
    min-height: calc(100vh - 104px) !important;
    margin: 0 auto !important;
    padding: 34px 0 66px !important;
    align-items: center;
    justify-content: center;
}

body.page-forgot .reset-method-switch {
    background: #eef6ff !important;
    border-color: var(--auth-border) !important;
    border-radius: 13px !important;
}

body.page-forgot .reset-method-btn {
    color: #52708d !important;
    border-radius: 10px !important;
}

body.page-forgot .reset-method-btn.active {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-forgot .step-number {
    color: #6d809d !important;
    background: #f1f6fc !important;
    border-color: var(--auth-border) !important;
}

body.page-forgot .step.active {
    color: #0b6fda !important;
}

body.page-forgot .step.active .step-number {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-forgot .step-line {
    background: #d8e6f3 !important;
}

body.page-forgot .send-code-btn {
    color: #0b6fda !important;
    background: #f7faff !important;
    border-color: var(--auth-border-strong) !important;
    border-radius: 12px !important;
}

body.page-forgot .send-code-btn:hover:not(:disabled) {
    color: #fff !important;
    background: var(--auth-primary) !important;
    border-color: var(--auth-primary) !important;
}

body.page-register {
    display: block !important;
    padding: 0 20px 40px !important;
}

body.page-register .auth-header {
    margin-bottom: 24px !important;
}

body.page-register .register-wrapper {
    width: min(100%, 1040px) !important;
    min-height: 690px !important;
    grid-template-columns: minmax(300px, .84fr) minmax(440px, 1.16fr) !important;
}

body.page-register .register-banner {
    padding: 50px 42px !important;
    background: linear-gradient(145deg, rgba(11, 127, 243, .96), rgba(29, 167, 238, .84)) !important;
    border-right-color: rgba(255, 255, 255, .24) !important;
}

body.page-register .banner-logo {
    border-color: rgba(255, 255, 255, .45) !important;
    border-radius: 18px !important;
}

body.page-register .banner-title {
    color: #fff !important;
}

body.page-register .banner-desc,
body.page-register .feature-item {
    color: rgba(255, 255, 255, .84) !important;
}

body.page-register .feature-icon {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .28) !important;
}

body.page-register .register-form-section {
    padding: 46px 48px !important;
}

body.page-register .invite-badge {
    color: #315475 !important;
    background: #f2f8ff !important;
    border-color: var(--auth-border) !important;
    border-radius: 12px !important;
}

@media (max-width: 1024px) {
    body.page-login-auth .main-content {
        gap: 48px !important;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) !important;
    }
}

@media (max-width: 768px) {
    body:is(.page-login, .page-forgot) .header,
    body.page-register .auth-header {
        width: calc(100% - 28px) !important;
        min-height: 58px !important;
        margin-top: 10px !important;
        padding-inline: 10px !important;
        border-radius: 15px !important;
    }

    body.page-login-auth .main-content,
    body.page-forgot .main-content {
        width: 100% !important;
        min-height: calc(100vh - 68px) !important;
        padding: 26px 14px 42px !important;
    }

    body.page-login-auth .main-content {
        display: flex !important;
    }

    body.page-login .login-intro {
        display: none !important;
    }

    body:is(.page-login, .page-forgot) .login-container {
        padding: 28px 24px !important;
        border-radius: 18px !important;
    }

    body.page-register {
        padding: 0 0 24px !important;
    }

    body.page-register .auth-header {
        margin-bottom: 14px !important;
    }

    body.page-register .register-wrapper {
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    body.page-register .register-banner {
        padding: 30px 24px !important;
    }

    body.page-register .register-form-section {
        padding: 30px 24px 38px !important;
    }
}

@media (max-width: 480px) {
    body:is(.page-login, .page-forgot) .header,
    body.page-register .auth-header {
        width: calc(100% - 24px) !important;
        margin-top: 8px !important;
    }

    body.page-login .header .logo-tagline {
        display: none !important;
    }

    body:is(.page-login, .page-forgot) .header .nav-links a,
    body.page-register .auth-header .auth-nav a {
        padding-inline: 8px !important;
        font-size: 11px !important;
    }

    body:is(.page-login, .page-forgot) .login-container {
        padding: 24px 18px !important;
    }

    body.page-register .register-form-section {
        padding: 26px 20px 34px !important;
    }
}

/* 个人信息：数据统计与媒体库分项卡使用同一紧凑高度。 */


/* 签到完成后点击卡片，在本次奖励与总积分之间做轻量翻页切换。 */
body.page-dashboard #section-home #checkinMiniCard.is-checkin-complete {
    cursor: pointer;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-complete:focus-visible {
    outline: 2px solid #1683ee;
    outline-offset: 3px;
}

body.page-dashboard #section-home #checkinMiniCard .checkin-mini-content {
    transform-style: preserve-3d;
    transition: transform .24s ease, opacity .18s ease;
}

body.page-dashboard #section-home #checkinMiniCard.is-checkin-flipping .checkin-mini-content {
    opacity: .18;
    transform: rotateY(90deg) scale(.98);
}

body.page-dashboard .force-bind-email-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 35, 52, .42);
    backdrop-filter: blur(5px);
}

body.page-dashboard .force-bind-email-dialog {
    width: min(100%, 390px);
    padding: 30px 28px 26px;
    color: #172536;
    text-align: center;
    background: #fff;
    border: 1px solid #dce7f3;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(31, 58, 87, .2);
}

body.page-dashboard .force-bind-email-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    place-items: center;
    color: #0b7ff3;
    background: #eaf5ff;
    border-radius: 14px;
}

body.page-dashboard .force-bind-email-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

body.page-dashboard .force-bind-email-dialog h2 {
    margin: 0 0 10px;
    font-size: 21px;
}

body.page-dashboard .force-bind-email-dialog p {
    margin: 0 0 20px;
    color: #637389;
    font-size: 13px;
    line-height: 1.7;
}

body.page-dashboard .force-bind-email-dialog button {
    width: 100%;
    justify-content: center;
}

/* 解绑确认弹窗：明确当前服务器、删除范围与不可恢复风险。 */
body.page-dashboard .unbind-dialog {
    width: min(100%, 480px);
    max-height: min(90vh, 720px);
    padding: 0;
    overflow: hidden auto;
    text-align: left;
}

body.page-dashboard .unbind-dialog-header {
    padding: 28px 30px 20px;
    background: #f8fbff;
    border-bottom: 1px solid #e1e9f2;
}

body.page-dashboard .unbind-dialog-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    place-items: center;
    color: #a33b36;
    background: #fff0ee;
    border: 1px solid #f1c7c2;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 750;
    line-height: 1;
}

body.page-dashboard .unbind-dialog-kicker {
    margin-bottom: 5px;
    color: #a33b36;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
}

body.page-dashboard .unbind-dialog h3 {
    margin: 0 0 8px;
    color: #0c1628 !important;
    font-size: 21px;
    font-weight: 750;
    line-height: 1.3;
}

body.page-dashboard .unbind-dialog-header p {
    margin: 0;
    color: #627691 !important;
    font-size: 13px;
    line-height: 1.6;
}

body.page-dashboard .unbind-dialog-scope {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 30px 0;
    padding: 12px 14px;
    color: #60738f;
    background: #f4f8fc;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
    font-size: 12px;
}

body.page-dashboard .unbind-dialog-scope strong {
    min-width: 0;
    overflow: hidden;
    color: #18395f;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard .unbind-dialog-danger {
    display: grid;
    gap: 4px;
    margin: 12px 30px 0;
    padding: 12px 14px;
    color: #7e3c38;
    background: #fff7f5;
    border: 1px solid #f0d0cc;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
}

body.page-dashboard .unbind-dialog-danger strong {
    color: #a33b36;
    font-size: 13px;
}

body.page-dashboard .unbind-dialog-note {
    margin: 10px 30px 20px;
    color: #73839a !important;
    font-size: 11px;
    line-height: 1.55;
}

body.page-dashboard .unbind-dialog form {
    margin: 0;
    padding: 0 30px 30px;
}

body.page-dashboard .unbind-dialog .form-group {
    margin-bottom: 14px;
}

body.page-dashboard .unbind-dialog .form-group label {
    margin-bottom: 7px;
    color: #31445d !important;
    font-size: 12px;
    font-weight: 700;
}

body.page-dashboard .unbind-dialog .form-group input {
    min-height: 46px;
    color: var(--control-ink);
    background: var(--control-bg);
    border-color: var(--control-border);
    border-radius: 9px;
}

body.page-dashboard .unbind-dialog .form-error {
    min-height: 18px;
    margin: 0 0 10px;
    color: #b33f3a;
    font-size: 12px;
    line-height: 1.5;
}

body.page-dashboard .unbind-dialog .dialog-btns {
    display: grid;
    grid-template-columns: minmax(86px, .72fr) minmax(0, 1.28fr);
    gap: 10px;
}

body.page-dashboard .unbind-dialog .dialog-btns button {
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

body.page-dashboard .unbind-dialog .btn-cancel {
    color: #47617f;
    background: #fff;
    border: 1px solid #d6e2ef;
}

body.page-dashboard .unbind-dialog .btn-cancel:hover {
    background: #f4f8fc;
    border-color: #bdcddd;
}

body.page-dashboard .unbind-dialog .btn-confirm-unbind {
    color: #fff !important;
    background: #a33b36 !important;
    border: 1px solid #a33b36;
    box-shadow: 0 7px 16px rgba(163, 59, 54, .18);
}

body.page-dashboard .unbind-dialog .btn-confirm-unbind:hover {
    background: #8d302c !important;
    border-color: #8d302c;
}

@media (max-width: 480px) {
    body.page-dashboard .unbind-dialog-header {
        padding: 24px 20px 18px;
    }

    body.page-dashboard .unbind-dialog-scope,
    body.page-dashboard .unbind-dialog-danger {
        margin-right: 20px;
        margin-left: 20px;
    }

    body.page-dashboard .unbind-dialog-note {
        margin-right: 20px;
        margin-left: 20px;
    }

    body.page-dashboard .unbind-dialog form {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* Keep profile actions compact and its metrics inset from the enclosing surface. */
body.page-dashboard #section-profile .user-profile-actions {
    gap: 0;
    padding: 0;
    border: 0;
}

body.page-dashboard #section-profile .user-delete-btn {
    min-width: 0;
    min-height: 38px;
    gap: 7px;
    padding: 8px 13px;
    color: #a33b36 !important;
    background: #fff5f4 !important;
    border: 1px solid #e9c7c4 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

body.page-dashboard #section-profile .user-delete-btn:hover {
    color: #872d2b !important;
    background: #fbe8e6 !important;
    border-color: #daaaa6 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile .user-delete-btn:focus-visible {
    outline: 2px solid #b94b45;
    outline-offset: 3px;
}

body.page-dashboard #section-profile .user-delete-btn svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.page-dashboard #section-profile .stats-section-v2 {
    padding: 0 18px 18px;
}

body.page-dashboard #section-profile .profile-stats-heading,
body.page-dashboard #section-profile .library-stats-header {
    padding: 14px 0 12px;
}

body.page-dashboard #section-profile .stats-row {
    gap: 12px !important;
    margin-bottom: 12px;
}

body.page-dashboard #section-profile .library-stats-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile .library-server-heading {
    min-height: 38px;
    padding: 9px 0;
    background: transparent;
}

body.page-dashboard #section-profile .library-server-block .library-stats-grid {
    gap: 12px !important;
    padding: 0 0 14px !important;
}

body.page-dashboard #section-profile .library-server-block:last-child .library-stats-grid {
    padding-bottom: 0 !important;
}

body.page-dashboard #section-profile .stats-row .stat-item-v2,
body.page-dashboard #section-profile .library-stats-grid .library-stat-item {
    min-height: 78px !important;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 13px 14px !important;
    background: #f8fbff !important;
    border: 1px solid #dce7f3 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile :is(.stat-icon-v2, .library-stat-icon) {
    color: #2468c0;
    background: #eaf3ff !important;
    border-color: #cfe2f9;
}

body.page-dashboard #section-profile :is(.icon-total, .library-stat-icon--series) {
    color: #177a71;
    background: #eaf8f5 !important;
    border-color: #c9e8e0;
}

body.page-dashboard #section-profile :is(.icon-daily, .library-stat-icon--episodes) {
    color: var(--ui-primary);
    background: var(--ui-blue-soft) !important;
    border-color: #cfe5fa;
}

body.page-dashboard .account-avatar-image,
body.page-dashboard #section-profile .user-avatar-lg .account-avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

body.page-dashboard :is(.user-avatar, .mobile-user-avatar, #section-profile .user-avatar-lg) {
    overflow: hidden;
    padding: 0;
}

body.page-dashboard #section-profile .profile-avatar-editor {
    display: flex;
    flex: 0 0 76px;
    width: 76px;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

body.page-dashboard #section-profile .profile-avatar-editor .user-avatar-lg {
    flex: none;
    margin: 0;
}

body.page-dashboard #section-profile :is(.avatar-upload-button, .avatar-reset-button) {
    width: max-content;
    max-width: 100%;
    padding: 2px 5px;
    border: 0;
    background: transparent;
    color: #1768b4;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

body.page-dashboard #section-profile .avatar-reset-button {
    color: #65788b;
}

body.page-dashboard #section-profile .avatar-reset-button[hidden] {
    display: none;
}

body.page-dashboard #section-profile :is(.avatar-upload-button, .avatar-reset-button):focus-visible {
    outline: 2px solid #1768b4;
    outline-offset: 2px;
    border-radius: 3px;
}

@media (max-width: 560px) {
    body.page-dashboard #section-profile .user-profile-actions {
        width: 100%;
        padding-top: 14px;
        border-top: 1px solid #e1e8f2;
    }

    body.page-dashboard #section-profile .stats-section-v2 {
        padding: 0 12px 14px;
    }

    body.page-dashboard #section-profile .stats-row,
    body.page-dashboard #section-profile .library-stats-grid {
        gap: 8px !important;
    }

    body.page-dashboard #section-profile .stats-row .stat-item-v2,
    body.page-dashboard #section-profile .library-stats-grid .library-stat-item {
        min-height: 88px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px !important;
    }
}

/* Playback monitor: keep its cards readable without oversizing sparse states. */
body.page-dashboard #section-playback.playback-compact {
    max-width: none;
}

body.page-dashboard #section-playback.playback-compact .playback-stats-grid {
    gap: 12px !important;
    margin-bottom: 20px;
}

body.page-dashboard #section-playback.playback-compact .playback-stat-card {
    gap: 12px;
    padding: 16px 18px;
}

body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 9px;
}

body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-icon svg {
    width: 23px;
    height: 23px;
}

body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-value {
    margin-bottom: 4px;
    font-size: 27px;
}

body.page-dashboard #section-playback.playback-compact .playback-main-grid {
    gap: 12px;
    margin-bottom: 16px;
}

/* Keep optional navigation hidden even when the shared link rule uses flex. */
body.page-dashboard .sidebar-nav .nav-item[hidden] {
    display: none !important;
}

/* The device panel keeps its initial desktop height as records arrive. */
body.page-dashboard #section-playback.playback-compact .playback-section-device {
    display: flex;
    flex-direction: column;
    height: 310px;
    min-height: 0;
    overflow: hidden;
}

body.page-dashboard #section-playback.playback-compact .playback-section-device .section-title-bar {
    flex: 0 0 auto;
}

body.page-dashboard #section-playback.playback-compact .playback-section-device #myDevicesContainer {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    overscroll-behavior-y: contain;
    padding: 2px 4px 4px 2px;
}

body.page-dashboard #section-playback.playback-compact .playback-section {
    padding: 18px;
    margin-bottom: 16px;
}

body.page-dashboard #section-playback.playback-compact .section-title-bar {
    margin-bottom: 14px;
    padding-bottom: 12px;
}

body.page-dashboard #section-playback.playback-compact :is(#devicesContainer, #myDevicesContainer, #historyContainer) {
    min-height: 100px;
}

body.page-dashboard #section-playback.playback-compact .empty-devices {
    padding: 34px 12px;
}

body.page-dashboard #section-playback.playback-compact .empty-devices .empty-icon {
    margin-bottom: 10px;
    font-size: 38px;
}

body.page-dashboard #section-playback.playback-compact .my-devices-grid {
    gap: 10px;
}

body.page-dashboard #section-playback.playback-compact .my-device-card {
    gap: 10px;
    padding: 10px 12px;
}

body.page-dashboard #section-playback.playback-compact .device-icon-large {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    font-size: 18px;
}

body.page-dashboard #section-playback.playback-compact .my-device-card .device-details {
    min-width: 0;
}

body.page-dashboard #section-playback.playback-compact .my-device-card .device-name {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25;
}

body.page-dashboard #section-playback.playback-compact .history-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 12px;
}

body.page-dashboard #section-playback.playback-compact .history-card-header {
    gap: 10px;
    padding: 12px 14px 10px;
}

body.page-dashboard #section-playback.playback-compact .history-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    font-size: 18px;
}

body.page-dashboard #section-playback.playback-compact .history-card .history-title {
    margin-bottom: 4px;
}

body.page-dashboard #section-playback.playback-compact .history-card-body {
    padding: 12px 14px;
}

body.page-dashboard #section-playback.playback-compact .history-progress-header {
    margin-bottom: 6px;
}

body.page-dashboard #section-playback.playback-compact .history-card-footer {
    padding: 8px 14px;
}

@media (min-width: 1360px) {
    body.page-dashboard #section-playback.playback-compact .my-devices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 721px) and (max-width: 1359px) {
    body.page-dashboard #section-playback.playback-compact .playback-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-playback.playback-compact :is(.playback-section-live, .playback-section-device) {
        grid-column: 1;
    }

    body.page-dashboard #section-playback.playback-compact .my-devices-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.page-dashboard #section-playback.playback-compact .playback-stats-grid {
        gap: 10px !important;
        margin-bottom: 14px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card,
    body.page-dashboard #section-playback.playback-compact .playback-section {
        padding: 14px;
    }

    body.page-dashboard #section-playback.playback-compact .history-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.page-dashboard #section-profile .profile-account-stack .feature-card-emby { order: 0; }
body.page-dashboard #section-profile .profile-account-stack .feature-card-email { order: 1; }
body.page-dashboard #section-profile .profile-account-stack .feature-card-telegram { order: 2; }

@media (min-width: 1360px) {
    body.page-dashboard #section-playback.playback-compact .playback-main-grid {
        align-items: stretch;
    }

    body.page-dashboard #section-playback.playback-compact .playback-section-live {
        min-height: 310px;
    }
}

/* 积分抽奖 */
body.page-dashboard #section-lottery>.section-header{flex-direction:row;align-items:center}
body.page-dashboard .lottery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;font-size:12px;color:#758296}
body.page-dashboard .lottery-scope-label{display:inline-flex;align-items:center;gap:7px}
body.page-dashboard .lottery-scope-label:before{content:"";width:6px;height:6px;background:#9daec4;border-radius:50%}
body.page-dashboard #lotteryStatus{padding:6px 12px;border:1px solid #e0e7ef;background:#fff;border-radius:30px;color:#5b756d}
body.page-dashboard .lottery-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;align-items:start}
body.page-dashboard :is(.lottery-play-card,.lottery-prizes-panel,.lottery-rules-panel,.lottery-records-panel){border:1px solid #e1e7ef;border-radius:22px;background:#fff;padding:26px;min-width:0}
body.page-dashboard .lottery-play-card{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,#e5f2ff 0,transparent 61%),linear-gradient(150deg,#fbfdff,#f1f7ff 65%,#f4f7fc);border-color:#dce7f3;box-shadow:0 12px 36px #34364c06}
body.page-dashboard .lottery-wheel-heading{text-align:center;position:relative;z-index:1}
body.page-dashboard .lottery-kicker{font-size:10px;letter-spacing:2px;color:#0b7ff3;font-weight:650}
body.page-dashboard .lottery-wheel-heading h2{font-size:29px;letter-spacing:1px;margin:9px 0 8px;color:#24374d;overflow-wrap:anywhere}
body.page-dashboard .lottery-wheel-heading p{color:#6d809d;font-size:12px;margin:0}
body.page-dashboard .lottery-wheel-stage{position:relative;width:100%;max-width:510px;margin:23px auto 12px;padding:8px 4px 14px}
body.page-dashboard .lottery-wheel-frame{position:relative;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#cfe5ff,#4b98eb 40%,#b7dcff 65%,#2478d0);box-shadow:0 18px 30px #2468c01c,0 3px 0 #2478d0,inset 0 0 0 1px #eaf5ff}
body.page-dashboard .lottery-wheel-rotor{position:absolute;inset:0;border-radius:50%;will-change:transform}
body.page-dashboard .lottery-wheel-rotor>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 1px #3975ba70)}
body.page-dashboard .lottery-wheel-sector>path,body.page-dashboard .lottery-wheel-sector>circle{stroke:#fbfdff;stroke-width:2}
body.page-dashboard .lottery-wheel-sector.selected>path,body.page-dashboard .lottery-wheel-sector.selected>circle{fill:#bee0ff}
body.page-dashboard .lottery-wheel-sector.exhausted>g{opacity:.48}
body.page-dashboard .lottery-wheel-rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body.page-dashboard .lottery-wheel-rim>circle:first-child{fill:none;stroke:#9bcaff;stroke-width:21}
body.page-dashboard .lottery-wheel-rim .lottery-rim-dots{fill:none;stroke:#f1f8ff;stroke-width:5;stroke-linecap:round;stroke-dasharray:.01 .99;filter:drop-shadow(0 1px 1px #2478d0)}
body.page-dashboard .lottery-wheel-pointer{position:absolute;z-index:3;top:-14px;left:50%;width:38px;transform:translateX(-50%);filter:drop-shadow(0 3px 3px #2468c040)}
body.page-dashboard .lottery-wheel-pointer svg{display:block;width:100%;height:auto;fill:#0b7ff3;stroke:#edf6ff;stroke-width:1.5}
body.page-dashboard .lottery-wheel-pointer circle{fill:#cfe5ff;stroke:#006fdf}
body.page-dashboard .lottery-draw-btn{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:25%;aspect-ratio:1;padding:0;border:5px solid #b7dcff;border-radius:50%;background:linear-gradient(150deg,#334a68,#182d45);box-shadow:0 0 0 5px #f1f8ff7d,0 7px 15px #1d304b30,inset 0 1px 1px #fff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#ffffff;cursor:pointer;transition:box-shadow .2s}
body.page-dashboard .lottery-draw-btn strong{font-size:clamp(13px,1.15vw,17px);font-weight:650;letter-spacing:1px;white-space:nowrap}
body.page-dashboard .lottery-draw-btn span{font-size:clamp(9px,.75vw,11px);color:#d7eaff;white-space:nowrap}
body.page-dashboard .lottery-draw-btn:hover:not(:disabled){box-shadow:0 0 0 7px #eaf5ffb3,0 7px 22px #1d304b40,inset 0 1px 1px #fff2}
body.page-dashboard .lottery-draw-btn:focus-visible{outline:3px solid #5588bd;outline-offset:8px}
body.page-dashboard .lottery-draw-btn:disabled{cursor:default;filter:saturate(.6);color:#d7eaff}
body.page-dashboard .lottery-stage-star{position:absolute;color:#549ce6;z-index:1;pointer-events:none;line-height:1}
body.page-dashboard .star-one{top:11%;left:0;font-size:24px;transform:rotate(10deg)}
body.page-dashboard .star-two{right:-2px;top:49%;font-size:34px}
body.page-dashboard .star-three{bottom:4%;left:11%;font-size:13px;color:#9bbde3}
body.page-dashboard .lottery-play-meta{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;color:#6d809d;flex-wrap:wrap}
body.page-dashboard .lottery-meta-divider{height:10px;width:1px;background:#dce7f3}
body.page-dashboard .lottery-wheel-footnote{text-align:center;font-size:10px;color:#6d809d;margin:11px 0 0;line-height:1.6}
body.page-dashboard .lottery-result{display:flex;align-items:center;gap:12px;width:100%;padding:15px 17px;margin-top:21px;border:1px solid #dce7f3;border-radius:13px;background:#f8fbff;color:#8d8d8b;font-size:12px;overflow-wrap:anywhere;min-height:72px}
body.page-dashboard .lottery-result>div{display:flex;flex-direction:column;gap:6px;min-width:0}
body.page-dashboard .lottery-result-spark{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e5f2ff;color:#0b7ff3;font-size:25px}
body.page-dashboard .lottery-result strong{font-size:14px;font-weight:600;color:#34445d}
body.page-dashboard .lottery-result.won{background:#f1f8f3;border-color:#d1e5d7}
body.page-dashboard .lottery-result.won strong{color:#337451}
body.page-dashboard .lottery-result.won .lottery-result-spark{background:#e1efdf;color:#578764}
/* Keep the wheel's natural height; the prize list scrolls within the same row. */
body.page-dashboard .lottery-prizes-panel{padding:0;border:0;background:none;contain:size;align-self:stretch;display:flex;flex-direction:column;min-height:0}
body.page-dashboard .lottery-prizes-panel>:not(.lottery-prizes-grid){flex-shrink:0}
body.page-dashboard .lottery-wallet{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 25px;background:linear-gradient(110deg,#263c56,#405a79);border-radius:18px;color:#d0dbe7;box-shadow:0 10px 24px #253c5812;margin-bottom:26px}
body.page-dashboard .lottery-wallet>div>span{font-size:12px;letter-spacing:1px}
body.page-dashboard .lottery-point-count{display:flex;align-items:baseline;gap:9px;color:#d2dfef;margin-top:8px;font-size:12px}
body.page-dashboard .lottery-point-count strong{font-size:37px;line-height:1.1;letter-spacing:-1px;font-weight:650;color:#ffffff;font-variant-numeric:tabular-nums}
body.page-dashboard .lottery-wallet-icon{width:55px;height:55px;display:grid;place-items:center;border:1px solid #ffffff18;background:#ffffff08;border-radius:16px;transform:rotate(-8deg)}
body.page-dashboard .lottery-wallet-icon svg{width:36px;height:36px;fill:none;stroke:#b7dcff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.page-dashboard .lottery-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
body.page-dashboard .lottery-panel-heading h2,body.page-dashboard .lottery-rules-panel h2{font-size:18px;font-weight:650;margin:0;color:#293d55}
body.page-dashboard .lottery-panel-heading>div>h2{margin-top:6px}
body.page-dashboard .lottery-panel-heading>span{color:#8795a6;font-size:11px}
body.page-dashboard .lottery-prizes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(106px,auto);align-content:start;gap:10px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cbd7e6 transparent;padding:2px;overscroll-behavior:contain}
body.page-dashboard .lottery-prizes-grid:focus-visible{outline:2px solid #5588bd;outline-offset:3px;border-radius:12px}
body.page-dashboard .lottery-prize{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:9px;row-gap:6px;padding:12px;border:1px solid #e2e7ef;border-radius:14px;background:linear-gradient(145deg,#fff,#f8fafe);min-width:0;transition:border-color .2s,box-shadow .2s}
body.page-dashboard .lottery-prize-symbol{display:grid;grid-row:1/3;place-items:center;width:28px;height:28px;border-radius:9px;background:#edf1fa;color:#657ea7}
body.page-dashboard .lottery-prize-symbol svg{width:21px;height:21px}
body.page-dashboard .lottery-prize.prize-coins .lottery-prize-symbol{background:#e5f2ff;color:#0b7ff3}
body.page-dashboard .lottery-prize.prize-balance .lottery-prize-symbol{background:#eaf3ef;color:#608975}
body.page-dashboard .lottery-prize.prize-none .lottery-prize-symbol{background:#f1f5fa;color:#6d809d}
body.page-dashboard .lottery-prize.prize-custom .lottery-prize-symbol{background:#f1eaf6;color:#9a72ad}
body.page-dashboard .lottery-prize.prize-coupon .lottery-prize-symbol{background:#efeafd;color:#7868bd}
body.page-dashboard .lottery-prize-number{position:absolute;top:14px;right:12px;color:#b2becc;font-size:10px;font-variant-numeric:tabular-nums}
body.page-dashboard .lottery-prize h3{grid-column:2;font-size:14px;font-weight:650;margin:0;padding-right:22px;color:#2d425b;overflow-wrap:anywhere}
body.page-dashboard .lottery-prize p{grid-column:2;font-size:11px;color:#8390a1;line-height:1.6;margin:0;overflow-wrap:anywhere}
body.page-dashboard .lottery-prize>div{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:3px;font-size:10px;color:#8c97a6;flex-wrap:wrap}
body.page-dashboard .lottery-prize-kind{padding:4px 7px;border-radius:5px;background:#f0f3f8;color:#75859b}
body.page-dashboard .lottery-prize.sold-out{opacity:.55}
body.page-dashboard .lottery-prize.selected{border-color:#0b7ff3;box-shadow:0 0 0 2px #b7dcff4d;background:#edf6ff}
body.page-dashboard .lottery-prize-tip{font-size:11px;color:#8c99aa;line-height:1.7;margin:16px 3px 0}
body.page-dashboard :is(.lottery-rules-panel,.lottery-records-panel){margin-top:22px}
body.page-dashboard .lottery-rules-panel p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:#7b8798;line-height:1.8}
body.page-dashboard .lottery-rules-panel ul{margin:12px 0 0;padding-left:18px;color:#8591a1;font-size:11px;line-height:1.9}
body.page-dashboard .lottery-record{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #e9eef5;min-width:0}
body.page-dashboard .lottery-record:last-child{border-bottom:0}
body.page-dashboard .lottery-record>div{display:flex;flex-direction:column;gap:7px;min-width:0;align-items:flex-start}
body.page-dashboard .lottery-record strong{color:#294361;font-size:14px;overflow-wrap:anywhere}
body.page-dashboard .lottery-record p{margin:0;color:#6e8096;font-size:13px}
body.page-dashboard .lottery-record span{font-size:11px;color:#8a98aa}
body.page-dashboard .lottery-record code{font-size:12px;overflow-wrap:anywhere;white-space:normal;color:#2d5e93}
body.page-dashboard .lottery-small-btn{padding:7px 12px;border:1px solid #dce5f0;background:#fff;border-radius:8px;color:#356295;cursor:pointer;font-size:12px}
body.page-dashboard .lottery-small-btn:disabled{opacity:.4;cursor:default}
body.page-dashboard .lottery-pagination{display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:#71839b;margin-top:18px}
body.page-dashboard .lottery-empty{color:#8190a3;padding:24px 0;font-size:13px;grid-column:1/-1}
body.page-dashboard .lottery-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:50%}
body.page-dashboard .lottery-confetti i{position:absolute;top:15%;left:var(--confetti-x);width:6px;height:10px;border-radius:2px;background:var(--confetti-color);opacity:0;animation:lotteryConfetti 1.9s var(--confetti-delay) ease-out both}
@keyframes lotteryConfetti{0%{opacity:0;transform:translateY(0) rotate(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(300px) rotate(var(--confetti-turn))}}
@media(max-width:1150px){body.page-dashboard .lottery-layout{grid-template-columns:1fr}body.page-dashboard .lottery-play-card{max-width:none}body.page-dashboard .lottery-prizes-panel{contain:none}body.page-dashboard .lottery-prizes-grid{grid-template-columns:repeat(3,minmax(0,1fr));flex:none;max-height:560px}body.page-dashboard .lottery-draw-btn strong{font-size:17px}body.page-dashboard .lottery-draw-btn span{font-size:11px}}
@media(max-width:600px){body.page-dashboard :is(.lottery-play-card,.lottery-rules-panel,.lottery-records-panel){padding:19px 16px;border-radius:18px}body.page-dashboard .lottery-layout{gap:21px}body.page-dashboard .lottery-wheel-heading h2{font-size:25px}body.page-dashboard .lottery-wheel-heading p{font-size:11px}body.page-dashboard .lottery-wheel-stage{margin:23px auto 11px;padding:6px 2px 10px}body.page-dashboard .lottery-wheel-pointer{width:29px;top:-12px}body.page-dashboard .lottery-draw-btn{border-width:3px;box-shadow:0 0 0 3px #f1f8ff7d,0 5px 12px #1d304b30}body.page-dashboard .lottery-draw-btn strong{font-size:12px;letter-spacing:0}body.page-dashboard .lottery-draw-btn span{font-size:8px}body.page-dashboard .lottery-draw-btn{gap:4px}body.page-dashboard .lottery-play-meta{font-size:11px;gap:9px}body.page-dashboard .lottery-wheel-footnote{font-size:9px}body.page-dashboard .lottery-result{padding:12px;gap:9px;margin-top:16px;font-size:11px}body.page-dashboard .lottery-result strong{font-size:12px}body.page-dashboard .lottery-result-spark{width:30px;height:30px;font-size:22px}body.page-dashboard .lottery-wallet{padding:20px;margin-bottom:22px}body.page-dashboard .lottery-prizes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.page-dashboard .lottery-prize{padding:15px 12px}body.page-dashboard .lottery-record{flex-direction:column;gap:12px}body.page-dashboard .lottery-toolbar{font-size:11px;margin-bottom:15px}body.page-dashboard .lottery-prize>div{font-size:9px}body.page-dashboard .lottery-stage-star.star-two{font-size:22px}body.page-dashboard .lottery-stage-star.star-one{font-size:18px}}
@media(prefers-reduced-motion:reduce){body.page-dashboard .lottery-confetti i{animation:none}body.page-dashboard .lottery-prize{transition:none}}
/* Scope the wheel palette above the legacy page-wide gradient reset. */
body.page-dashboard .main-content #section-lottery .lottery-play-card{background:radial-gradient(ellipse at 50% 43%,#e5f2ff 0,transparent 61%),linear-gradient(150deg,#fbfdff,#f1f7ff 65%,#f4f7fc) !important}
body.page-dashboard #section-lottery .lottery-wheel-frame{background:linear-gradient(145deg,#cfe5ff,#4b98eb 40%,#b7dcff 65%,#2478d0) !important}
/* 保留绝对定位的居中变换，不能被通用按钮按压动画覆盖。 */
body.page-dashboard #section-lottery .lottery-draw-btn{background:linear-gradient(150deg,#334a68,#182d45) !important;transform:translate(-50%,-50%)}
body.page-dashboard #section-lottery .lottery-wallet{background:linear-gradient(110deg,#263c56,#405a79) !important}
body.page-dashboard #section-lottery .lottery-prize{background:linear-gradient(145deg,#fff,#f8fafe) !important}
body.page-dashboard #section-lottery .lottery-prize.selected{background:#edf6ff !important}

/* Lottery result in the browser top layer; keyboard focus stays in the dialog. */
body.page-dashboard.lottery-result-open{overflow:hidden !important}
body.page-dashboard .lottery-result-dialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 36px));max-width:420px;max-height:calc(100dvh - 40px);box-sizing:border-box;padding:35px 30px 28px;border:1px solid #dce7f3;border-radius:25px;overflow:auto;text-align:center;color:#293e58;background:radial-gradient(ellipse at 50% 22%,#e5f2ff,transparent 58%),#fbfdff !important;box-shadow:0 28px 90px #15233838}
body.page-dashboard .lottery-result-dialog::backdrop{background:#17294270;backdrop-filter:blur(5px)}
body.page-dashboard .lottery-result-dialog[open]{animation:lotteryDialogIn .25s ease-out both}
body.page-dashboard .lottery-result-dialog.is-no-win{background:#fbfcff !important;border-color:#e1e7f0}
body.page-dashboard .lottery-dialog-close{position:absolute;top:13px;right:13px;width:30px;height:30px;padding:7px;display:grid;place-items:center;border:0;border-radius:50%;background:#edf5ff;color:#6d809d;cursor:pointer}
body.page-dashboard .lottery-dialog-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
body.page-dashboard .lottery-dialog-kicker{font-size:10px;letter-spacing:3px;color:#6d809d}
body.page-dashboard .lottery-dialog-icon{position:relative;margin:22px auto 19px;width:94px;height:94px;display:grid;place-items:center;border-radius:50%;color:#0b7ff3;background:#e5f2ff;box-shadow:0 0 0 8px #edf5ff7a}
body.page-dashboard .lottery-dialog-icon>svg{width:47px;height:47px;stroke-width:1.3}
body.page-dashboard .is-win .lottery-dialog-icon:before,body.page-dashboard .is-win .lottery-dialog-icon:after{content:"✦";position:absolute;font-size:22px;color:#549ce6;top:0;left:-16px}
body.page-dashboard .is-win .lottery-dialog-icon:after{font-size:15px;top:auto;left:auto;bottom:2px;right:-20px}
body.page-dashboard .is-no-win .lottery-dialog-icon{background:#eaf0f9;box-shadow:0 0 0 8px #f0f4fb}
body.page-dashboard .lottery-sad-face{font-size:52px;line-height:1}
body.page-dashboard .lottery-result-dialog h2{margin:0;font-size:25px;line-height:1.4;font-weight:650;letter-spacing:1px;color:#30425b}
body.page-dashboard .lottery-result-dialog h3{margin:15px 0 0;font-size:20px;line-height:1.5;font-weight:650;color:#0b7ff3;overflow-wrap:anywhere}
body.page-dashboard .lottery-result-dialog.is-no-win h3{color:#70849f;font-size:17px;font-weight:500}
body.page-dashboard .lottery-dialog-description{margin:8px 0 0;font-size:13px;line-height:1.8;color:#85909c;overflow-wrap:anywhere}
body.page-dashboard .lottery-dialog-reward{margin-top:19px;padding:15px;background:#edf6ff;border:1px dashed #b7dcff;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;color:#6d809d;font-size:11px}
body.page-dashboard .lottery-dialog-reward[hidden],body.page-dashboard .lottery-dialog-actions>[hidden]{display:none}
body.page-dashboard .lottery-dialog-reward code{color:#34445d;font-size:14px;letter-spacing:1px;overflow-wrap:anywhere;white-space:normal}
body.page-dashboard .lottery-dialog-copy{padding:6px 13px;background:#fff;border:1px solid #cbd8e8;border-radius:7px;color:#0b7ff3;font-size:11px;cursor:pointer}
body.page-dashboard .lottery-dialog-credited{color:#758d6f;font-size:12px}
body.page-dashboard .lottery-dialog-note{margin:21px 0 0;color:#a3aab2;font-size:11px;line-height:1.8}
body.page-dashboard .lottery-dialog-actions{margin-top:23px;display:flex;flex-direction:column;gap:9px}
body.page-dashboard .lottery-dialog-primary{padding:14px 20px;min-height:46px;border:0;border-radius:11px;color:#ffffff;background:linear-gradient(130deg,#36506d,#213852) !important;font-size:14px;font-weight:600;cursor:pointer}
body.page-dashboard .lottery-dialog-secondary{padding:8px 18px;border:0;background:transparent;color:#929eae;font-size:12px;cursor:pointer}
body.page-dashboard .lottery-result-dialog button:focus-visible{outline:2px solid #7797ba;outline-offset:4px}
@keyframes lotteryDialogIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){body.page-dashboard .lottery-result-dialog{padding:29px 23px 24px;border-radius:21px}body.page-dashboard .lottery-result-dialog h2{font-size:23px}body.page-dashboard .lottery-result-dialog h3{font-size:18px}body.page-dashboard .lottery-dialog-icon{width:84px;height:84px}body.page-dashboard .lottery-dialog-reward code{font-size:12px}}
@media(prefers-reduced-motion:reduce){body.page-dashboard .lottery-result-dialog[open]{animation:none}}

body.page-dashboard .lottery-wheel-name,body.page-dashboard .lottery-wheel-reward{font-family:system-ui,sans-serif;letter-spacing:0}
body.page-dashboard .lottery-record{align-items:center}
body.page-dashboard .lottery-record-info{flex:1}
body.page-dashboard .lottery-record .lottery-record-claim{flex-direction:row;align-items:center;gap:16px;width:400px;max-width:48%;padding:12px 14px;border:1px solid #e2eaf5;border-radius:10px;background:#f8faff}
body.page-dashboard .lottery-record-code-details{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
body.page-dashboard .lottery-record-claim .lottery-code-state{font-weight:600;color:#54739a}
body.page-dashboard .lottery-record-claim code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;letter-spacing:.5px}
body.page-dashboard .lottery-record-copy{flex-shrink:0;min-width:54px;padding:8px 13px}
body.page-dashboard .lottery-custom-content{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;line-height:1.8}
body.page-dashboard .lottery-dialog-reward .lottery-custom-content{width:100%;font-size:13px;color:#34445d}
body.page-dashboard .lottery-record .lottery-custom-content{width:100%;max-height:240px;overflow:auto;padding:12px 14px;border:1px solid #e8e0ee;border-radius:10px;background:#faf7fc;color:#765c86}
body.page-dashboard .lottery-record-claim[data-status="used"] .lottery-code-state{color:#4c8068}
body.page-dashboard .lottery-record-claim:is([data-status="revoked"],[data-status="expired"]){background:#fafbfc;border-color:#e7ebf0}
body.page-dashboard .lottery-record-claim:is([data-status="revoked"],[data-status="expired"]) .lottery-code-state{color:#8c98a7}
@media(max-width:600px){body.page-dashboard .lottery-record{align-items:stretch}body.page-dashboard .lottery-record .lottery-record-claim{width:100%;max-width:none;gap:12px;padding:11px 12px}body.page-dashboard .lottery-record-claim code{font-size:12px}body.page-dashboard .lottery-record-copy{padding:8px 11px}}


/* Telegram Mini App 用户中心样式 */
body.telegram-preview-page {
    color-scheme: light;
    --tg-bg: #f3f6fc;
    --tg-surface: #ffffff;
    --tg-surface-muted: #f0f5fc;
    --tg-ink: #24344d;
    --tg-muted: #62758f;
    --tg-border: #e2eaf5;
    --tg-blue: #3975d2;
    --tg-blue-deep: #285dac;
    --tg-green: #258261;
    --tg-orange: #2995d5;
    --tg-purple: #8e79bd;
    --tg-shadow: 0 22px 60px rgba(54, 82, 128, .10);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.telegram-preview-page * { box-sizing: border-box; }

body.telegram-preview-page {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    color: var(--tg-ink);
    background: var(--tg-bg);
}

body.telegram-preview-page button { font: inherit; }

.telegram-preview-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 980px);
    min-width: 0;
    max-width: 100%;
    height: 100dvh;
    margin: 0 auto;
    padding: 32px 22px 24px;
}

.telegram-preview-note {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    width: min(100%, 560px);
    margin: 0 0 14px;
    color: #82909c;
    font-size: 12px;
    letter-spacing: .02em;
}

.telegram-preview-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tg-blue); box-shadow: 0 0 0 4px #2995d51c; }

.telegram-app {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: min(100%, 560px);
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--tg-border);
    border-radius: 28px;
    background: var(--tg-bg);
    box-shadow: var(--tg-shadow);
}

.telegram-icon-button { width: 34px; height: 34px; flex: 0 0 auto; border: 0; border-radius: 11px; color: #758592; background: #eef2f5; font-size: 22px; line-height: 1; cursor: pointer; }

.telegram-app-content { flex: 1 1 auto; width: min(100%, 680px); align-self: center; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) 20px 20px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9d7ea transparent; }
.telegram-tab-panel { min-height: 0; }
/* Keep large surfaces visible; motion stays within controls and dialogs. */
body.telegram-preview-page .telegram-app-content { scroll-behavior: auto; }
body.telegram-preview-page :is(button, summary, select) { -webkit-tap-highlight-color: transparent; }
body.telegram-preview-page .telegram-detail-icon-button:is(:hover, :focus-visible, [aria-pressed="true"]) {
    color: var(--tg-blue-deep); background: #e5efff;
}
body.telegram-preview-page .telegram-detail-icon-button:focus-visible {
    outline: 2px solid var(--tg-blue); outline-offset: 2px;
}
body.telegram-preview-page .telegram-market-modal:not([hidden]) > .telegram-market-modal-card {
    animation: telegram-local-dialog-enter .2s cubic-bezier(.16, 1, .3, 1);
}
@keyframes telegram-local-dialog-enter {
    from { transform: translateY(6px) scale(.99); }
    to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.telegram-preview-page .telegram-market-modal:not([hidden]) > .telegram-market-modal-card { animation: none; }
}
.telegram-page-heading { margin-top: 4px; margin-bottom: 18px; }
.telegram-detail-list { display: flex; flex-direction: column; gap: 14px; }
.telegram-detail-item { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--tg-border); border-radius: 22px; background: var(--tg-surface); }
.telegram-detail-item strong { font-size: 13px; }
.telegram-detail-item span { color: #5d7c89; font-size: 11px; }
.telegram-detail-item small { color: var(--tg-muted); font-size: 10px; }
.telegram-detail-button { position: relative; width: 100%; padding-right: 35px; text-align: left; cursor: pointer; }
.telegram-detail-button b { position: absolute; top: 50%; right: 15px; color: #9cabb3; font-size: 18px; font-weight: 400; transform: translateY(-50%); }
.telegram-subscription-detail { min-width: 0; padding: 18px 18px 10px; border: 1px solid var(--tg-border); border-radius: 24px; background: var(--tg-surface); box-shadow: 0 4px 16px #36528006; }
.telegram-subscription-detail > summary { display: block; cursor: pointer; list-style: none; }
.telegram-subscription-detail > summary::-webkit-details-marker { display: none; }
.telegram-subscription-detail > summary:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 6px; border-radius: 14px; }
.telegram-subscription-detail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; }
.telegram-subscription-detail-head strong { min-width: 0; overflow-wrap: anywhere; font-size: 15px; }
.telegram-subscription-detail-head .telegram-plan-badge { margin-left: auto; }
.telegram-expand-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--tg-blue-deep); background: var(--tg-surface-muted); transition: transform .18s ease; }
.telegram-expand-icon .ui-glyph { width: 17px; height: 17px; }
.telegram-subscription-detail[open] .telegram-expand-icon { transform: rotate(180deg); }
.telegram-subscription-summary-rows { display: block; }
.telegram-subscription-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #edf2f8; font-size: 13px; line-height: 1.6; }
.telegram-subscription-row > span:first-child { color: var(--tg-muted); }
.telegram-subscription-row > span:last-child { min-width: 0; overflow-wrap: anywhere; color: var(--tg-ink); }
.telegram-subscription-detail dl { margin: 0; }
.telegram-subscription-detail dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #edf2f8; font-size: 13px; line-height: 1.6; }
.telegram-subscription-detail dt { color: var(--tg-muted); }
.telegram-subscription-detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--tg-ink); }
.telegram-subscription-extra { padding-top: 0; }
.telegram-secret-row { display: flex; min-width: 0; align-items: center; gap: 5px; }
.telegram-secret-row code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--tg-ink); font-family: inherit; font-size: 11px; }
.telegram-secret-actions { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid #e0e9f7; border-radius: 16px; background: #f1f6fd; }
.telegram-detail-icon-button { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 12px; color: #5279aa; background: transparent; cursor: pointer; transition: color .15s ease, background .15s ease; }
.telegram-detail-icon-button:hover, .telegram-detail-icon-button:focus-visible { color: #155b83; background: #deeff7; outline: none; }
.telegram-detail-icon-button:focus-visible { box-shadow: inset 0 0 0 2px #6ab3d5; }
.telegram-ui-icon { display: block; width: 19px; height: 19px; }
.telegram-bottom-nav .ui-glyph { width: 16px; height: 16px; }
.telegram-detail-lines { padding: 11px 0 4px; border-top: 1px solid #edf0f2; }
.telegram-detail-lines > strong { display: block; margin-bottom: 6px; font-size: 12px; }
.telegram-detail-lines > p { margin: 5px 0 8px; color: var(--tg-muted); font-size: 11px; }
.telegram-detail-line { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #edf2f8; font-size: 12px; }
.telegram-detail-line > span { flex: 0 0 60px; color: var(--tg-muted); overflow-wrap: anywhere; }
.telegram-detail-line .telegram-secret-row { flex: 1 1 auto; }
.telegram-empty-state { padding: 24px 18px; border: 1px dashed #d4e1f2; border-radius: 18px; color: var(--tg-muted); background: #f8fbff; font-size: 13px; line-height: 1.7; text-align: center; }
.telegram-profile-card { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; min-height: 126px; margin-bottom: 18px; padding: 22px 20px; overflow: hidden; border: 1px solid #dbe7fb; border-radius: 26px; color: var(--tg-ink); background: linear-gradient(125deg, #e5efff, #f2f7ff 70%, #e8f5f6); box-shadow: 0 8px 24px #36528009; }
.telegram-profile-card::after { position: absolute; right: -30px; bottom: -58px; width: 150px; height: 150px; border: 1px solid #cadbf5; border-radius: 50%; content: ""; }
.telegram-profile-avatar { position: relative; z-index: 1; display: grid; flex: 0 0 auto; width: 56px; height: 56px; place-items: center; border: 3px solid #fff; border-radius: 20px; color: var(--tg-blue-deep); background: #dce9fc; box-shadow: 0 4px 12px #3652800d; font-size: 22px; font-weight: 700; }
.telegram-profile-avatar.has-image { overflow: hidden; padding: 0; }
.telegram-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.telegram-profile-heading { position: relative; z-index: 1; display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.telegram-profile-heading .telegram-section-kicker { color: var(--tg-muted); font-size: 11px; }
.telegram-profile-heading strong { overflow: hidden; color: var(--tg-ink); font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-profile-heading > span:last-child { overflow: hidden; color: var(--tg-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-profile-status { position: relative; z-index: 1; display: inline-flex !important; align-items: center; gap: 5px; align-self: flex-start; margin: 0 0 0 auto; padding: 6px 10px; border: 1px solid #d5eadd; border-radius: 999px; color: #258261 !important; background: #f1fbf5; font-size: 11px !important; white-space: nowrap; }
.telegram-profile-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-green); }
.telegram-profile-facts { display: grid; gap: 12px; }
.telegram-profile-fact { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--tg-border); border-radius: 22px; background: var(--tg-surface); }
.telegram-profile-fact-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 16px; color: var(--tg-blue-deep); background: #eaf2ff; }
.telegram-profile-fact-icon-blue { color: #277fa9; background: #e8f5fb; }
.telegram-profile-fact-icon-purple { color: #7b68ae; background: #f0ecfb; }
.telegram-profile-fact-icon-orange { color: var(--tg-blue); background: #e7f5fb; }
.telegram-profile-fact > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.telegram-profile-fact small { color: var(--tg-muted); font-size: 12px; }
.telegram-profile-fact strong { overflow: hidden; color: var(--tg-ink); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-profile-fact-coins { border-color: #dce8fa; background: linear-gradient(100deg, #edf4ff, #fff); }

.telegram-hero { position: relative; display: flex; min-height: 128px; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; padding: 18px 20px; border: 1px solid #dbe7fb; border-radius: 24px; color: var(--tg-ink); background: radial-gradient(circle at 100% 0, #dceafb 0, transparent 56%), linear-gradient(125deg, #eaf2ff, #f5f9ff 65%, #e8f5f6); box-shadow: 0 8px 24px #36528008; }
.telegram-hero + .telegram-subscription { margin-top: 16px; }
.telegram-hero::after { position: absolute; right: -48px; bottom: -94px; width: 180px; height: 180px; border: 1px solid #cbdcf4; border-radius: 50%; content: ""; }
.telegram-hero-copy { position: relative; z-index: 1; min-width: 0; }
.telegram-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid #d3e6df; border-radius: 999px; color: #237252; background: #ffffffbf; font-size: 10px; }
.telegram-status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--tg-green); box-shadow: 0 0 0 3px #25826112; }
.telegram-hero h2 { margin: 8px 0 4px; font-size: 21px; font-weight: 720; line-height: 1.3; letter-spacing: -.03em; }
.telegram-hero p { margin: 0; color: #5b7395; font-size: 12px; line-height: 1.6; }
.telegram-hero-orbit { position: relative; z-index: 1; display: grid; flex: 0 0 70px; width: 70px; height: 70px; place-items: center; }
.telegram-orbit-play { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid #fff; border-radius: 20px; color: var(--tg-blue-deep); background: #dceaff; box-shadow: 0 6px 16px #3975d212; }
.telegram-orbit-play svg { width: 28px; height: 28px; }

.telegram-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 2px 14px; }
.telegram-section-heading h2 { margin: 5px 0 0; font-size: 19px; font-weight: 720; letter-spacing: -.02em; }
.telegram-section-kicker { color: var(--tg-muted); font-size: 11px; letter-spacing: .05em; }
.telegram-text-button { padding: 3px 0; border: 0; color: var(--tg-blue-deep); background: transparent; font-size: 11px; cursor: pointer; }
.telegram-text-button span { padding-left: 4px; font-size: 16px; vertical-align: -1px; }

.telegram-subscription { padding: 20px; border: 1px solid var(--tg-border); border-radius: 26px; background: var(--tg-surface); box-shadow: 0 4px 16px #36528006; }
.telegram-subscription .telegram-section-heading { margin: 0 0 15px; }
.telegram-subscription-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; color: var(--tg-muted); }
.telegram-subscription-summary strong { font-size: 12px; font-weight: 500; }
.telegram-plan-list { display: flex; flex-direction: column; gap: 10px; }
.telegram-plan-server { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 12px; border: 1px solid #e6edf7; border-radius: 18px; background: #f8faff; }
.telegram-plan-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.telegram-plan-icon { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: var(--tg-blue); background: #e7f5fb; font-size: 18px; }
.telegram-plan-server .telegram-plan-icon { width: 36px; height: 36px; border-radius: 13px; font-size: 16px; }
.telegram-plan-icon-blue { color: #348db6; background: #e7f5fb; }
.telegram-plan-copy { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 3px; }
.telegram-plan-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-plan-copy span { color: var(--tg-muted); font-size: 11px; line-height: 1.6; }
.telegram-plan-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; color: #237252; background: #e8f6ef; font-size: 11px; }
.telegram-plan-badge-muted { color: #697d86; background: #edf1f3; }
.telegram-progress-line { height: 5px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #edf1f3; }
.telegram-progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ea477, #70c79b); }
.telegram-plan-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--tg-muted); font-size: 11px; line-height: 1.6; }

.telegram-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.telegram-quick-action { display: flex; min-height: 92px; align-items: center; gap: 10px; padding: 16px 12px; border: 1px solid var(--tg-border); border-radius: 22px; color: var(--tg-ink); text-align: left; background: var(--tg-surface); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.telegram-quick-action:hover, .telegram-quick-action:focus-visible { border-color: #b9d6e4; box-shadow: 0 7px 18px #274f6812; transform: translateY(-1px); outline: none; }
.telegram-quick-icon { display: grid; flex: 0 0 auto; width: 36px; height: 36px; place-items: center; border-radius: 13px; color: #258261; background: #e9f8f0; font-size: 17px; font-weight: 720; }
.telegram-quick-icon-blue { color: #2788bd; background: #e7f4fb; }
.telegram-quick-icon-orange { color: var(--tg-blue); background: #e7f5fb; }
.telegram-quick-icon-purple { color: #806bb1; background: #f0ecfb; }
.telegram-quick-action > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.telegram-quick-action strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-quick-action small { color: var(--tg-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.telegram-quick-arrow { color: #a3afb8; font-size: 17px; }

.telegram-bottom-nav { display: grid; flex: 0 0 auto; align-self: center; width: min(calc(100% - 32px), 640px); gap: 4px; margin: 0 16px max(12px, env(safe-area-inset-bottom)); padding: 6px; border: 1px solid #e2eaf5; border-radius: 24px; background: #ffffffed; box-shadow: 0 6px 24px #3652800d; backdrop-filter: blur(18px); }
.telegram-bottom-nav button { position: relative; display: flex; min-width: 0; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 7px 2px; border: 0; border-radius: 18px; color: var(--tg-muted); background: transparent; cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.telegram-bottom-nav button span { display: grid; width: 21px; height: 21px; place-items: center; font-size: 20px; line-height: 1; }
.telegram-bottom-nav button strong { font-size: 11px; font-weight: 600; }
.telegram-bottom-nav button.is-active { color: var(--tg-blue-deep); background: #eaf2ff; }
.telegram-bottom-nav button[hidden] { display: none; }
.telegram-bottom-nav button i { position: absolute; top: -2px; left: calc(50% + 7px); display: grid; width: 14px; height: 14px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #e47468; font-size: 8px; font-style: normal; }

.telegram-preview-toast { position: fixed; z-index: 30; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); left: 18px; max-width: 380px; margin: 0 auto; padding: 13px 16px; border: 1px solid #d7e4f7; border-radius: 18px; color: var(--tg-ink); background: #fffffffa; box-shadow: 0 10px 28px #36528020; font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.telegram-preview-toast.is-visible { opacity: 1; transform: translateY(0); }

body.telegram-preview-page .is-hidden { display: none !important; }
.telegram-auth-state { position: fixed; z-index: 8; top: 50%; left: 50%; width: min(calc(100% - 40px), 420px); padding: 24px; border: 1px solid #edd4d0; border-radius: 24px; color: #94493f; background: #fffaf9; box-shadow: 0 12px 32px #36528012; font-size: 14px; line-height: 1.8; text-align: center; transform: translate(-50%, -50%); }
.telegram-auth-state.is-loading { display: grid; justify-items: center; gap: 10px; border-color: var(--tg-border); color: var(--tg-ink); background: var(--tg-surface); }
.telegram-auth-state.is-loading > span:last-child { color: var(--tg-muted); font-size: 12px; }
.telegram-auth-spinner { width: 32px; height: 32px; margin: 4px 0; border: 3px solid #e5efff; border-top-color: var(--tg-blue); border-radius: 50%; animation: telegram-auth-spin .9s linear infinite; }
@keyframes telegram-auth-spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
    .telegram-preview-shell { padding-top: 54px; }
}

body.telegram-live-page .telegram-preview-shell { width: 100%; height: 100dvh; padding: 0; }
body.telegram-live-page .telegram-app { width: 100%; border: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 420px) {
    .telegram-preview-shell { height: 100dvh; padding: 0; }
    .telegram-preview-note { display: none; }
    .telegram-app { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .telegram-app-content { padding-right: 14px; padding-left: 14px; }
    .telegram-hero { padding-right: 17px; padding-left: 17px; }
}

@media (max-width: 355px) {
    .telegram-hero { padding: 16px; }
    .telegram-hero h2 { font-size: 20px; }
    .telegram-hero p { font-size: 11px; }
    .telegram-hero-orbit { flex-basis: 54px; width: 54px; }
    .telegram-orbit-play { width: 50px; height: 50px; border-radius: 18px; }
    .telegram-quick-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .telegram-quick-action, .telegram-preview-toast, .telegram-bottom-nav button, .telegram-expand-icon { transition: none; }
    .telegram-auth-spinner { animation: none; }
}

/* Shared by the authenticated Mini App and its sample-data preview. */
.telegram-bottom-nav svg { display: block; width: 21px; height: 21px; }
body.telegram-preview-page button:focus-visible { outline: 2px solid var(--tg-blue); outline-offset: 3px; }
body.telegram-preview-page button:disabled { opacity: .55; cursor: not-allowed; }
body.telegram-preview-page button:active:not(:disabled) { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
    body.telegram-preview-page button:active:not(:disabled) { transform: none; }
}
@media (max-width: 355px) {
    .telegram-profile-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; padding: 20px 16px; }
    .telegram-profile-card .telegram-profile-avatar { grid-row: 1 / span 2; }
    .telegram-profile-status { grid-column: 2; justify-self: start; margin: 0; }
    .telegram-plan-server { flex-wrap: wrap; }
    .telegram-plan-server .telegram-plan-copy { flex-basis: calc(100% - 50px); }
    .telegram-plan-server .telegram-plan-badge { margin-left: 48px; }
}

/* Website marketplace */
body.page-dashboard #section-market .market-page { display: grid; gap: 18px; }
body.page-dashboard #section-market .market-balance-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border: 1px solid #dbe7ef; border-radius: 18px; background: linear-gradient(135deg, #f3faff, #fff); box-shadow: 0 10px 28px rgba(29, 76, 110, .08); }
body.page-dashboard #section-market .market-balance-banner div { display: grid; gap: 5px; }
body.page-dashboard #section-market .market-balance-banner span { color: #6d7f8e; font-size: 13px; }
body.page-dashboard #section-market .market-balance-banner .market-balance-label { color: #6d7f8e; font-size: 13px; line-height: 1.2; }
body.page-dashboard #section-market .market-balance-banner .market-balance-total { display: inline-flex; align-items: baseline; gap: 3px;  font-size: 28px; font-weight: 750; line-height: 1.1; letter-spacing: 0; }
body.page-dashboard #section-market .market-balance-banner .market-balance-currency,
body.page-dashboard #section-market .market-balance-banner .market-balance-amount { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
body.page-dashboard #section-market .market-workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 18px; align-items: start; }
body.page-dashboard #section-market .market-surface { min-width: 0; padding: 22px; border: 1px solid #e1e9ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(35, 63, 81, .06); }
body.page-dashboard #section-market .market-surface-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
body.page-dashboard #section-market .market-surface-heading h2 { margin: 4px 0 0; font-size: 19px; }
body.page-dashboard #section-market .market-count { color: #7b8c99; font-size: 13px; }
body.page-dashboard #section-market .market-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px; }
body.page-dashboard #section-market .market-listing-card { display: grid; gap: 12px; padding: 16px; border: 1px solid #e5edf2; border-radius: 13px; background: #fbfdfe; animation: market-listing-enter .28s ease both; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
body.page-dashboard #section-market .market-listing-card:hover { transform: translateY(-2px); border-color: #c8dfe7; box-shadow: 0 8px 18px rgba(47,120,153,.1); }
body.page-dashboard #section-market .market-listing-card-top, body.page-dashboard #section-market .market-listing-meta, body.page-dashboard #section-market .market-my-listing { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
body.page-dashboard #section-market .market-asset-type {  font-size: 12px; font-weight: 700; }
body.page-dashboard #section-market .market-server-name, body.page-dashboard #section-market .market-listing-meta span, body.page-dashboard #section-market .market-my-listing span { color: #7a8b97; font-size: 12px; }
body.page-dashboard #section-market .market-listing-card h3 { margin: 0; color: #203947; font-size: 16px; }
body.page-dashboard #section-market .market-listing-meta strong { color: var(--ui-primary); font-size: 20px; }
body.page-dashboard #section-market .primary-action { border: 0; border-radius: 9px; padding: 10px 14px; color: #fff; background: #2f7899; font-weight: 700; cursor: pointer; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
body.page-dashboard #section-market .primary-action:hover, body.page-dashboard #section-market .primary-action:focus-visible { transform: translateY(-1px); background: #24647f; box-shadow: 0 5px 12px rgba(47,120,153,.2); outline: none; }
body.page-dashboard #section-market .primary-action:active { transform: scale(.97); }
body.page-dashboard #section-market .market-sell-surface label { display: grid; gap: 7px; margin: 0 0 14px; color: #506774; font-size: 13px; font-weight: 600; }
body.page-dashboard #section-market .market-sell-surface select, body.page-dashboard #section-market .market-sell-surface input { width: 100%; box-sizing: border-box; border: 1px solid #d5e0e7; border-radius: 9px; padding: 10px 11px; color: #203947; background: #fff; }
body.page-dashboard #section-market .market-help { margin: -4px 0 16px; color: #7a8b97; font-size: 12px; line-height: 1.6; }
body.page-dashboard #section-market .market-my-listings { margin-top: 24px; padding-top: 18px; border-top: 1px solid #edf1f3; }
body.page-dashboard #section-market .market-my-listings-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
body.page-dashboard #section-market .market-my-listings h3 { margin: 0; font-size: 15px; }
body.page-dashboard #section-market .market-my-listings-caption { color: #8a9aa3; font-size: 11px; }
body.page-dashboard #section-market .market-category-filters { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 8px; scrollbar-width: thin; }
body.page-dashboard #section-market .market-category-filter { flex: 0 0 auto; min-height: 27px; padding: 0 9px; border: 1px solid #dce8ed; border-radius: 999px;  background: #fff; font-size: 10px; cursor: pointer; transition: transform .18s ease, color .18s ease, background-color .18s ease, border-color .18s ease; }
body.page-dashboard #section-market .market-category-filter span { margin-left: 3px; color: #97a6ad; }
body.page-dashboard #section-market .market-category-filter:hover, body.page-dashboard #section-market .market-category-filter:focus-visible { transform: translateY(-1px); border-color: #9bc5d4; color: #285f77; outline: none; }
body.page-dashboard #section-market .market-category-filter.is-active { border-color: #2f7899; color: #fff; background: #2f7899; }

body.page-dashboard #section-market .market-my-listing { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 11px 0; border-bottom: 1px solid #f0f3f5; animation: market-listing-enter .28s ease both; }
body.page-dashboard #section-market .market-my-listing:nth-child(2) { animation-delay: .03s; }
body.page-dashboard #section-market .market-my-listing:nth-child(3) { animation-delay: .06s; }
body.page-dashboard #section-market .market-my-listing:nth-child(4) { animation-delay: .09s; }
body.page-dashboard #section-market .market-my-listing-main { display: grid; min-width: 0; gap: 5px; }
body.page-dashboard #section-market .market-my-listing-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
body.page-dashboard #section-market .market-my-listing strong { overflow: hidden; color: #203947; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body.page-dashboard #section-market .market-my-listing-meta { overflow: hidden; color: #7a8b97; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body.page-dashboard #section-market .market-category-pill { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #d6e6eb; border-radius: 6px; color: #34748b; background: #eef8fa; font-size: 9px; font-weight: 700; }
body.page-dashboard #section-market .market-category-pill.market-category-whitelist { color: #1768b4; background: #e5f2ff; border-color: #cfe5fa; }
body.page-dashboard #section-market .market-category-pill.market-category-coupon { color: #765891; background: #f6f0fb; border-color: #e2d4f0; }
body.page-dashboard #section-market .market-category-pill.market-category-points { color: #39745f; background: #eef8f2; border-color: #d0e7da; }
body.page-dashboard #section-market .market-category-pill.market-category-custom { color: #8b5a4c; background: #fcf1ee; border-color: #efd5cf; }
body.page-dashboard #section-market .market-my-listing-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
body.page-dashboard #section-market .market-action-btn { display: inline-flex; min-height: 28px; align-items: center; gap: 4px; padding: 0 9px; border: 1px solid #d8e5ea; border-radius: 7px; color: #376d82; background: #f5fafb; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
body.page-dashboard #section-market .market-action-btn:hover, body.page-dashboard #section-market .market-action-btn:focus-visible { transform: translateY(-1px); border-color: #9bc5d4; color: #1d5d79; background: #eaf5fa; outline: none; }
body.page-dashboard #section-market .market-action-btn:active { transform: scale(.96); }
body.page-dashboard #section-market .market-action-cancel { border-color: #edc9c3; color: #a65247; background: #fff7f6; }
body.page-dashboard #section-market .market-action-cancel:hover, body.page-dashboard #section-market .market-action-cancel:focus-visible { border-color: #dbaaa2; color: #8d3025; background: #fff0ee; }
@keyframes market-listing-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
body.page-dashboard #section-market .market-empty, body.page-dashboard #section-market .market-unavailable { display: grid; place-items: center; min-height: 150px; color: #81919b; text-align: center; }
body.page-dashboard #section-market .market-unavailable { gap: 8px; }
body.page-dashboard #section-market .market-unavailable strong { color: #324d5b; font-size: 18px; }
body.page-dashboard #section-support .withdrawal-fields { align-items: end; }
@media (max-width: 900px) { body.page-dashboard #section-market .market-workspace { grid-template-columns: 1fr; } }
@media (max-width: 560px) { body.page-dashboard #section-market .market-balance-banner { align-items: flex-start; flex-direction: column; } body.page-dashboard #section-market .market-surface { padding: 17px; } body.page-dashboard #section-market .market-listing-grid { grid-template-columns: 1fr; } body.page-dashboard #section-market .market-my-listing { align-items: flex-start; flex-direction: column; gap: 8px; } body.page-dashboard #section-market .market-my-listing-actions { width: 100%; justify-content: flex-end; } }

body.page-dashboard #section-market .market-page[hidden], body.page-dashboard #section-market .market-unavailable[hidden] { display: none !important; }
body.page-dashboard .market-listing-open-btn { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 9px 13px; color: #fff; background: #2f7899; font-size: 12px; font-weight: 700; cursor: pointer; }
body.page-dashboard .market-listing-open-btn:hover, body.page-dashboard .market-listing-open-btn:focus-visible { background: #24647f; outline: none; }
body.page-dashboard .market-owner-badge { display: inline-flex; justify-content: center; padding: 8px 10px; border: 1px solid #d7e8ee; border-radius: 8px; color: #37758a; background: #f0f8fa; font-size: 12px; font-weight: 650; }
body.page-dashboard .market-listing-modal-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; background: #10283885; }
body.page-dashboard .market-listing-modal-overlay[hidden] { display: none !important; }
body.page-dashboard .market-listing-modal { width: min(100%, 480px); padding: 24px; border: 1px solid #dfe9ee;  background: #fff; box-shadow: 0 24px 70px #1028383b; }
body.page-dashboard .market-listing-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.page-dashboard .market-listing-modal-header h2 { margin: 4px 0 0;  font-size: 21px; }
body.page-dashboard .market-listing-modal-close { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #dbe5ea;   background: #f6fafb; font-size: 22px; line-height: 1; cursor: pointer; }
body.page-dashboard .market-listing-modal-close:hover, body.page-dashboard .market-listing-modal-close:focus-visible { color: #1e5c75; background: #eaf5f8; outline: none; }
body.page-dashboard .market-listing-modal-description { margin: 13px 0 18px; color: #748792; font-size: 12px; line-height: 1.65; }
body.page-dashboard .market-listing-modal form { display: grid; gap: 15px; }
body.page-dashboard .market-listing-modal label { display: grid; gap: 7px; color: #506774; font-size: 13px; font-weight: 650; }
body.page-dashboard .market-listing-modal label[hidden], .telegram-market-modal-card label[hidden] { display: none !important; }
body.page-dashboard .market-listing-modal select, body.page-dashboard .market-listing-modal input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 11px; border: 1px solid #d5e0e7; border-radius: 9px; color: #203947; background: #fff; font: inherit; }
body.page-dashboard .market-listing-modal textarea { width: 100%; box-sizing: border-box; min-height: 96px; padding: 10px 11px; border: 1px solid #d5e0e7; border-radius: 9px; color: #203947; background: #fff; font: inherit; resize: vertical; }
body.page-dashboard .market-listing-modal select:focus, body.page-dashboard .market-listing-modal input:focus { border-color: #76b5ca; outline: 2px solid #76b5ca44; }
body.page-dashboard .market-listing-modal textarea:focus { border-color: #76b5ca; outline: 2px solid #76b5ca44; }
body.page-dashboard .market-custom-fields { display: grid; gap: 12px; padding: 12px; border: 1px solid #e2edf0; border-radius: 11px; background: #f7fbfc; }
body.page-dashboard .market-custom-fields[hidden], .telegram-market-custom-fields[hidden] { display: none !important; }
body.page-dashboard .market-custom-review-hint { margin: -2px 0 0; color: #708792; font-size: 11px; line-height: 1.5; }
body.page-dashboard .market-purchases-heading { margin-top: 18px; }
body.page-dashboard .market-purchase-note { margin-top: 8px; padding: 10px 11px; border: 1px solid #e2edf0; border-radius: 9px; background: #f8fbfc; }
body.page-dashboard .market-purchase-note p { margin: 6px 0 0; color: #546e79; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
body.page-dashboard .market-listing-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 3px; }
body.page-dashboard .market-listing-modal-actions .btn-cancel { min-height: 38px; padding: 0 15px; border: 1px solid #d8e3e8;   background: #fff; cursor: pointer; }
body.page-dashboard .market-listing-modal-actions .primary-action { min-height: 38px; padding: 0 17px; border: 0; border-radius: 9px; color: #fff; background: #2f7899; font-weight: 700; cursor: pointer; }
body.page-dashboard .market-listing-modal-actions button:hover, body.page-dashboard .market-listing-modal-actions button:focus-visible { outline: 2px solid #76b5ca55; outline-offset: 1px; }
body.market-listing-modal-open { overflow: hidden; }

/* Telegram Mini App marketplace */
.telegram-bottom-nav { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.telegram-market-page { display: grid; gap: 16px; }
.telegram-market-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 20px; border: 1px solid #dbe7fb; border-radius: 26px; background: linear-gradient(125deg, #eaf2ff, #f5f9ff 70%, #e8f5f6); box-shadow: 0 8px 20px #36528008; }
.telegram-market-balance div { display: grid; gap: 5px; }
.telegram-market-balance span { color: var(--tg-muted); font-size: 12px; }
.telegram-market-balance .telegram-market-balance-label { color: var(--tg-muted); font-size: 12px; line-height: 1.2; }
.telegram-market-balance .telegram-market-balance-total { display: inline-flex; align-items: baseline; gap: 2px; color: var(--tg-blue-deep); font-size: 30px; font-weight: 760; line-height: 1.2; letter-spacing: -.02em; }
.telegram-market-balance .telegram-market-balance-currency,
.telegram-market-balance .telegram-market-balance-amount { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.telegram-market-balance > span { max-width: 125px; color: #80929b; font-size: 12px; line-height: 1.4; text-align: right; }
.telegram-market-notice { margin: 0 3px; color: #80909a; font-size: 12px; line-height: 1.5; }
.telegram-market-surface { min-width: 0; padding: 18px; border: 1px solid var(--tg-border); border-radius: 24px; background: var(--tg-surface); }
.telegram-market-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.telegram-market-heading h3 { margin: 5px 0 0; color: var(--tg-ink); font-size: 18px; }
.telegram-market-count { color: var(--tg-muted); font-size: 12px; }
.telegram-market-refresh { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid #dce7f6; border-radius: 50%; color: #5279aa; background: #eef4fd; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.telegram-market-refresh > span { display: grid; place-items: center; }
.telegram-market-refresh:hover, .telegram-market-refresh:focus-visible { border-color: #aed3e2; background: #eef8fb; outline: none; }
.telegram-market-refresh[aria-busy="true"] .telegram-ui-icon { animation: telegram-refresh-spin .85s linear infinite; }
@keyframes telegram-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .telegram-detail-icon-button, .telegram-market-refresh { transition: none; }
    .telegram-market-refresh[aria-busy="true"] .telegram-ui-icon { animation: none; }
}
.telegram-market-listing-grid { display: grid; gap: 12px; }
.telegram-market-listing-card { display: grid; gap: 12px; padding: 16px; border: 1px solid #e3ecf8; border-radius: 20px; background: #f8faff; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
@media (hover: hover) and (pointer: fine) {
    .telegram-market-listing-card:hover { transform: translateY(-1px); border-color: #c8dfe7; box-shadow: 0 6px 14px #2b718c12; }
}
.telegram-market-card-top, .telegram-market-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.telegram-market-card-top > span:last-child { overflow: hidden; color: var(--tg-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-market-asset-type { color: #377e97; font-size: 12px; font-weight: 700; }
.telegram-market-asset-coupon { color: #8b6bad; }
.telegram-market-listing-card h4 { margin: 0; overflow-wrap: anywhere; color: var(--tg-ink); font-size: 15px; line-height: 1.6; }
.telegram-market-meta span { overflow: hidden; color: var(--tg-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.telegram-market-meta strong { color: var(--tg-blue-deep); font-size: 22px; }
.telegram-market-owner-badge { display: inline-flex; justify-content: center; padding: 7px 9px; border: 1px solid #d7e8ee; border-radius: 8px; color: #37758a; background: #f0f8fa; font-size: 12px; font-weight: 650; }
.telegram-market-buy, .telegram-market-submit { min-height: 44px; padding: 10px 14px; border: 1px solid #d4e3fb; border-radius: 15px; color: var(--tg-blue-deep); background: #e5efff; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease; }
.telegram-market-buy:hover, .telegram-market-buy:focus-visible, .telegram-market-submit:hover, .telegram-market-submit:focus-visible { background: #dbe9ff; box-shadow: 0 3px 12px #3975d213; }
.telegram-market-buy:disabled, .telegram-market-submit:disabled { opacity: .55; cursor: wait; }
.telegram-market-sell-surface { margin-top: 0; }
.telegram-market-help { margin: -3px 0 13px; color: var(--tg-muted); font-size: 12px; line-height: 1.5; }
.telegram-market-sell-surface form { display: grid; gap: 10px; }
.telegram-market-sell-surface label { display: grid; gap: 5px; color: #506774; font-size: 13px; font-weight: 650; }
.telegram-market-sell-surface select, .telegram-market-sell-surface input { width: 100%; box-sizing: border-box; min-height: 35px; padding: 8px 9px; border: 1px solid #d5e0e7; border-radius: 8px; color: var(--tg-ink); background: #fff; font: inherit; font-size: 13px; }
.telegram-market-sell-surface select:focus, .telegram-market-sell-surface input:focus { border-color: #86bfd2; outline: 2px solid #86bfd244; }
.telegram-market-my-listings { margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf1f3; }
.telegram-market-my-listings-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.telegram-market-my-listings-heading h4 { margin: 0; color: var(--tg-ink); font-size: 12px; }
.telegram-market-my-listings-heading > span { color: var(--tg-muted); font-size: 11px; }
.telegram-market-category-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.telegram-market-category-filter { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--tg-border); border-radius: 999px; color: var(--tg-muted); background: #f8faff; font-size: 12px; cursor: pointer; transition: transform .16s ease, color .16s ease, border-color .16s ease, background-color .16s ease; }
.telegram-market-category-filter span { margin-left: 2px; color: #98a8ae; }
.telegram-market-category-filter:hover, .telegram-market-category-filter:focus-visible { transform: translateY(-1px); border-color: #9bc8d8; color: #28647c; outline: none; }
.telegram-market-category-filter.is-active { border-color: #c9ddfc; color: var(--tg-blue-deep); background: #eaf2ff; }
.telegram-market-category-filter.is-active span { color: #4873ae; }
#telegramMarketMyListings { display: grid; }
.telegram-market-my-listing { display: grid; min-width: 0; gap: 7px; padding: 11px 0; border-bottom: 1px solid #e9eef2; }
.telegram-market-my-listing:last-child { border-bottom: 0; }
.telegram-market-my-listing-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.telegram-market-my-listing-title { display: flex; min-width: 0; align-items: center; gap: 6px; }
.telegram-market-my-listing-title strong { min-width: 0; overflow: hidden; color: var(--tg-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.telegram-market-category-pill { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #d6e6eb; border-radius: 999px; color: #34748b; background: #eef8fa; font-size: 10px; font-weight: 700; }
.telegram-market-category-pill.telegram-market-category-whitelist { color: #1768b4; background: #e5f2ff; border-color: #cfe5fa; }
.telegram-market-category-pill.telegram-market-category-coupon { color: #765891; background: #f6f0fb; border-color: #e2d4f0; }
.telegram-market-category-pill.telegram-market-category-points { color: #39745f; background: #eef8f2; border-color: #d0e7da; }
.telegram-market-category-pill.telegram-market-category-custom { color: #8b5a4c; background: #fcf1ee; border-color: #efd5cf; }
.telegram-market-listing-status { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: #23765e; background: #eaf6f1; font-size: 11px; line-height: 1.4; }
.telegram-market-listing-status[data-status="pending_review"] { color: #866321; background: #faf4e5; }
.telegram-market-listing-status:is([data-status="rejected"], [data-status="cancelled"], [data-status="expired"]) { color: #9a554c; background: #fcf0ee; }
.telegram-market-listing-status[data-status="sold"] { color: #356d95; background: #eaf3f9; }
.telegram-market-my-listing-meta { display: flex; align-items: baseline; gap: 5px; color: var(--tg-muted); font-size: 12px; }
.telegram-market-my-listing-meta strong { color: #255d78; font-size: 12px; font-weight: 700; }
.telegram-market-listing-note { margin: 0; color: var(--tg-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.telegram-market-my-listing-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.telegram-market-action { display: inline-flex; flex: 0 0 auto; min-height: 38px; align-items: center; gap: 4px; padding: 0 12px; border: 1px solid var(--tg-border); border-radius: 13px; color: var(--tg-blue-deep); background: #f0f5ff; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease; }
.telegram-market-action:hover, .telegram-market-action:focus-visible { transform: translateY(-1px); border-color: #9bc5d4; color: #1d5d79; background: #eaf5fa; outline: 2px solid #9bc5d455; outline-offset: 1px; }
.telegram-market-action:active { transform: scale(.96); }
.telegram-market-cancel { border-color: #edc9c3; color: #a65247; background: #fff7f6; }
.telegram-market-cancel:hover, .telegram-market-cancel:focus-visible { border-color: #dbaaa2; color: #8d3025; background: #fff0ee; outline-color: #dbaaa255; }
.telegram-market-edit { border-color: #cfe0e9; color: #2d718e; background: #f2f8fb; }
.telegram-market-edit:hover, .telegram-market-edit:focus-visible { border-color: #9bc4d7; color: #1d5d79; background: #eaf5fa; outline-color: #9bc4d755; }
.telegram-market-empty { display: block; padding: 10px 0; color: var(--tg-muted); font-size: 13px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
    body.page-dashboard #section-market .market-listing-card,
    body.page-dashboard #section-market .market-my-listing,
    .telegram-market-listing-card,
    .telegram-market-my-listing { animation: none; transition: none; }
}
.telegram-market-unavailable { display: grid; min-height: 270px; place-items: center; align-content: center; gap: 7px; padding: 20px; color: var(--tg-muted); text-align: center; }
.telegram-market-unavailable strong { color: var(--tg-ink); font-size: 17px; }
.telegram-market-unavailable span { font-size: 13px; }
.telegram-market-page[hidden], .telegram-market-unavailable[hidden], .telegram-market-modal[hidden], .telegram-market-listing-card[hidden], .telegram-market-my-listing[hidden] { display: none !important; }
.telegram-market-open-btn { flex: 0 0 auto; min-height: 40px; padding: 0 13px; border: 1px solid #d4e3fb; border-radius: 14px; color: var(--tg-blue-deep); background: #e5efff; font-size: 12px; font-weight: 700; cursor: pointer; }
body.telegram-preview-page .telegram-market-open-btn,
body.telegram-preview-page .telegram-market-cancel { font-size: 12px; font-weight: 700; line-height: 1; }
.telegram-market-open-btn:hover, .telegram-market-open-btn:focus-visible { background: #dbe9ff; }
.telegram-market-open-btn:disabled { opacity: .5; cursor: not-allowed; }
.telegram-market-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: #33496766; backdrop-filter: blur(6px); }
.telegram-market-modal-card { width: min(100%, 400px); max-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 36px)); overflow-y: auto; padding: 24px; border: 1px solid var(--tg-border); border-radius: 28px; background: #fff; box-shadow: 0 22px 58px #24344d26; }
.telegram-market-modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.telegram-market-modal-heading h3 { margin: 3px 0 0; color: var(--tg-ink); font-size: 18px; }
.telegram-market-modal-close { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--tg-border); border-radius: 14px; color: var(--tg-muted); background: var(--tg-surface-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.telegram-market-modal-close:hover, .telegram-market-modal-close:focus-visible { color: #1e5c75; background: #eaf5f8; outline: none; }
.telegram-market-modal-card > p { margin: 14px 0 20px; color: var(--tg-muted); font-size: 12px; line-height: 1.8; }
.telegram-market-purchase-modal-card > p { white-space: pre-line; }
.telegram-market-modal-card form { display: grid; gap: 16px; }
.telegram-market-modal-card label { display: grid; gap: 5px; color: #506774; font-size: 13px; font-weight: 650; }
.telegram-market-modal-card select, .telegram-market-modal-card input, .telegram-market-modal-card textarea { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 9px; border: 1px solid #d5e0e7; border-radius: 8px; color: var(--tg-ink); background: #fff; font: inherit; font-size: 13px; }
.telegram-market-modal-card textarea { min-height: 86px; resize: vertical; }
.telegram-market-modal-card select:focus, .telegram-market-modal-card input:focus { border-color: #86bfd2; outline: 2px solid #86bfd244; }
.telegram-market-modal-card textarea:focus { border-color: #86bfd2; outline: 2px solid #86bfd244; }
.telegram-market-form-error { margin: 0; padding: 8px 10px; border: 1px solid #f2c8c1; border-radius: 8px; color: #a5473f; background: #fff5f2; font-size: 13px; line-height: 1.5; }
.telegram-market-form-error[hidden] { display: none; }
.telegram-market-custom-fields { display: grid; gap: 9px; padding: 10px; border: 1px solid #e2edf0; border-radius: 10px; background: #f7fbfc; }
.telegram-market-custom-review-hint { margin: -1px 0 0; color: var(--tg-muted); font-size: 12px; line-height: 1.5; }
.telegram-market-purchases-heading { margin: 17px 0 8px; }
.telegram-market-purchase-note { margin-top: 7px; padding: 9px 10px; border: 1px solid #e2edf0; border-radius: 9px; background: #f8fbfc; }
.telegram-market-purchase-note p { margin: 5px 0 0; color: var(--tg-muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.telegram-market-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.telegram-market-modal-cancel { min-height: 44px; padding: 0 18px; border: 1px solid var(--tg-border); border-radius: 15px; color: var(--tg-muted); background: var(--tg-surface-muted); font-size: 13px; cursor: pointer; }
.telegram-market-modal-actions .telegram-market-submit { min-height: 44px; padding: 0 18px; color: #fff; border-color: var(--tg-blue); background: var(--tg-blue); }
.telegram-market-modal-actions button:hover, .telegram-market-modal-actions button:focus-visible { outline: 2px solid #3975d255; outline-offset: 2px; }
body.telegram-market-modal-open { overflow: hidden; }
@media (max-width: 355px) { .telegram-market-balance { align-items: flex-start; flex-direction: column; } .telegram-market-balance > span { max-width: none; text-align: left; } }

/* Center both verification prompts in the user panel, PWA and Mini App. */
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) {
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: rgba(23, 43, 57, .52);
}
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-dialog {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border: 1px solid #dce8ed !important;
    border-radius: 28px !important;
    color: var(--tg-ink, #20334f);
    background: #fff;
    box-shadow: 0 24px 64px rgba(21, 43, 58, .25);
}
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-heading { padding: 20px 20px 15px; }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-icon { border-radius: 12px; color: #2d7898; background: #edf7fa; border-color: #dcecf2; }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-body { padding: 0 20px 20px; }
body:is(.telegram-preview-page, .page-dashboard) #turnstilePromptModal .turnstile-widget-host { display: flex; justify-content: center; min-width: 0; }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-buttons { padding: 12px 20px 18px; background: #fff; border-color: #e8eef1; }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-btn { min-height: 44px; border-radius: 15px; font-size: 13px; }
body:is(.telegram-preview-page, .page-dashboard) #captchaPromptModal .captcha-tool-btn { font-size: 13px; }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-btn.confirm { background: var(--tg-blue, #3975d2); border-color: var(--tg-blue, #3975d2); }
body:is(.telegram-preview-page, .page-dashboard) :is(#captchaPromptModal, #turnstilePromptModal) .global-confirm-btn.confirm:hover { background: var(--tg-blue-deep, #2c60b5); border-color: var(--tg-blue-deep, #2c60b5); }

/* Keep user page tools beside their headings on small screens. */
@media (max-width: 820px) {
    body.page-dashboard .content-section:not(#section-playback) > .section-header {
        flex-direction: row;
        align-items: flex-start;
    }
}

@media (max-width: 620px) {
    body.page-dashboard .content-section:not(#section-playback) > .section-header {
        gap: 10px;
    }

    body.page-dashboard .content-section > .section-header > :first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.page-dashboard .content-section > .section-header .page-refresh-btn {
        width: 32px;
        min-width: 32px;
        height: 32px !important;
        min-height: 32px !important;
        flex: 0 0 32px;
        align-self: flex-start;
        margin-top: 2px;
        border-radius: 9px;
    }

    body.page-dashboard .content-section > .section-header .page-refresh-btn svg {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    body.page-dashboard #section-home .dashboard-page-divider {
        gap: 8px;
        padding: 7px 9px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-title {
        gap: 7px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 7px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-icon svg {
        width: 14px;
        height: 14px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status {
        gap: 5px;
        padding: 3px 4px 3px 7px;
        font-size: 9px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status i {
        width: 5px;
        height: 5px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status .page-refresh-btn {
        width: 24px;
        min-width: 24px;
        height: 24px !important;
        min-height: 24px !important;
        padding: 0;
        border-radius: 7px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status .page-refresh-btn svg {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }

    body.page-dashboard .toast.ui-toast {
        top: auto;
        right: 12px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 12px;
        width: min(330px, calc(100vw - 24px));
        max-width: 330px;
        min-height: 0;
        grid-template-columns: 24px minmax(0, 1fr) 22px;
        gap: 8px;
        margin-inline: auto;
        padding: 8px 9px;
        border-radius: 10px;
        transform: translate3d(0, 12px, 0);
    }

    body.page-dashboard .toast.ui-toast.show {
        transform: translate3d(0, 0, 0);
    }

    body.page-dashboard .toast.ui-toast .toast-icon {
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }

    body.page-dashboard .toast.ui-toast .toast-icon .ui-glyph {
        width: 14px;
        height: 14px;
    }

    body.page-dashboard .toast.ui-toast .toast-title {
        margin-bottom: 1px;
        font-size: 11px;
    }

    body.page-dashboard .toast.ui-toast .toast-message {
        font-size: 10px;
        line-height: 1.35;
    }

    body.page-dashboard .toast.ui-toast .toast-close {
        width: 22px;
        height: 22px;
    }

    body.page-dashboard .toast.ui-toast .toast-progress {
        display: none;
    }

    body.page-dashboard #section-search .search-command-panel {
        padding: 14px;
    }

    body.page-dashboard #section-search .search-box {
        min-height: 48px;
        grid-template-columns: 18px minmax(0, 1fr) 38px !important;
        gap: 7px;
        padding: 4px 4px 4px 11px;
        border-radius: 14px !important;
    }

    body.page-dashboard #section-search .search-input-icon,
    body.page-dashboard #section-search .search-input-icon svg {
        width: 17px;
        height: 17px;
    }

    body.page-dashboard #section-search .search-box input {
        height: 38px;
        font-size: 12px;
        line-height: 38px;
    }

    body.page-dashboard #section-search .search-box button {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 10px !important;
    }

    body.page-dashboard #section-search .search-box button span {
        display: none;
    }

    body.page-dashboard #section-search .search-filters {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 8px;
        margin: 12px -14px -14px;
        padding: 11px 14px 13px;
    }

    body.page-dashboard #section-search .search-filter-title {
        min-height: 30px;
        grid-column: 1;
        grid-row: 1;
    }

    body.page-dashboard #section-search .filter-group {
        grid-row: 2;
        gap: 4px;
    }

    body.page-dashboard #section-search .filter-group select {
        height: 34px;
        min-height: 34px;
        border-radius: 9px;
        font-size: 11px;
    }

    body.page-dashboard #section-search .filter-reset {
        width: auto;
        min-width: 84px;
        height: 30px;
        min-height: 30px;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        padding-inline: 10px;
        border-radius: 9px;
    }

    body.page-dashboard #section-requests .request-item {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
        gap: 8px 10px;
        padding: 11px;
    }

    body.page-dashboard #section-requests .request-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.page-dashboard #section-requests .request-stat-item {
        min-height: 64px !important;
        padding: 10px 12px !important;
    }

    body.page-dashboard #section-requests .request-item > :is(img, .request-poster-placeholder) {
        width: 56px;
        height: 84px;
        grid-column: 1;
        grid-row: 1;
    }

    body.page-dashboard #section-requests .request-poster-placeholder span {
        font-size: 10px;
        line-height: 1.3;
        white-space: nowrap;
    }

    body.page-dashboard #section-requests .request-item .details {
        display: contents;
    }

    body.page-dashboard #section-requests .request-item .details > h3 {
        min-width: 0;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0;
        overflow-wrap: anywhere;
        font-size: 13px;
        line-height: 1.4;
    }

    body.page-dashboard #section-requests .request-item .details > :not(h3) {
        min-width: 0;
        grid-column: 1 / -1;
        margin: 0;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-requests .request-item .details > .status {
        justify-self: start;
    }

    body.page-dashboard #section-requests .request-item :is(.media-type-chip, .request-scope-chip) {
        max-width: 100%;
        margin: 3px 4px 0 0;
        padding: 2px 5px;
        border-radius: 6px;
        font-size: 10px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-requests .request-item .download-status-card {
        width: 100%;
        padding: 9px 10px;
    }

    body.page-dashboard #section-requests .download-status-card .card-header .title {
        min-width: 0;
        flex: 1 1 auto;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-requests .download-status-card .card-header .badge {
        flex: 0 0 auto;
    }

    body.page-dashboard #section-requests .request-meta-time,
    body.page-dashboard #section-requests .request-note {
        font-size: 11px;
    }

    body.page-dashboard #section-playback .playback-action-group {
        justify-content: flex-start;
        gap: 8px;
    }

    body.page-dashboard #section-playback .playback-action-group > button {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        flex: 0 0 auto !important;
        padding: 0 11px;
        font-size: 11px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card {
        min-width: 0;
        min-height: 92px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px !important;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-icon svg {
        width: 16px;
        height: 16px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-value {
        margin: 0;
        font-size: 20px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-label {
        font-size: 10px;
        line-height: 1.25;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card .stat-subtext {
        display: none;
    }

    body.page-dashboard #section-profile .multi-emby-add-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.page-dashboard #section-profile .multi-emby-add-actions > button {
        width: 100%;
        min-width: 0;
        height: 38px;
        min-height: 38px;
        flex: none;
        padding: 0 8px;
        font-size: 11px;
    }

    body.page-dashboard #section-faq .faq-search {
        margin-bottom: 12px;
    }

    body.page-dashboard #section-faq .faq-search input {
        height: 40px;
        padding: 0 13px;
        border-radius: 11px !important;
        font-size: 12px;
    }

    body.page-dashboard #section-faq .faq-categories {
        gap: 6px;
        margin-bottom: 14px;
        padding: 5px;
    }

    body.page-dashboard #section-faq .category-btn {
        min-height: 30px;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.2;
    }

    body.page-dashboard #section-faq .faq-question {
        gap: 8px;
        padding: 12px 14px;
    }

    body.page-dashboard #section-faq .q-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    body.page-dashboard #section-faq .faq-answer {
        padding: 0 14px 15px;
        font-size: 12px;
        line-height: 1.6;
        text-align: left;
    }
}
/* Wallet source accounting and withdrawal progress. */
body.page-dashboard #section-wallet .wallet-source-panel { margin-block: 16px; min-width: 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-secondary); }
.wallet-source-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.wallet-source-heading h2 { margin: 0; font-size: 17px; }
.wallet-source-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.wallet-source-grid > div { min-width: 0; }
.wallet-source-grid dt { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.wallet-source-grid dd { margin: 4px 0 0; color: var(--text-primary); font-size: 20px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wallet-source-grid .wallet-source-income dd { color: var(--primary); }
.wallet-source-grid .wallet-source-hold dd { color: var(--text-secondary); }
.wallet-source-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.wallet-source-footer details { min-width: 0; }
.wallet-source-footer details[open] { flex-basis: 100%; }
.wallet-source-footer summary { width: fit-content; color: var(--text-secondary); font-size: 12px; line-height: 1.6; cursor: pointer; }
.wallet-source-footer summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 3px; }
#walletWithdrawalCount { margin-left: 4px; font-variant-numeric: tabular-nums; }
.wallet-source-rules { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.wallet-source-help .wallet-source-rules { margin: 10px 0 0; color: var(--text-secondary); font-size: 12px; }
.wallet-source-alert { color: #d65a53; font-size: 13px; line-height: 1.6; }
.wallet-source-alert[hidden], .wallet-withdrawal-history[hidden] { display: none; }
.wallet-source-action { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; border: 1px solid var(--primary); border-radius: 8px; background: var(--primary); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.wallet-source-action:hover { filter: brightness(.95); }
.wallet-source-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.wallet-withdrawal-list { display: grid; max-height: 240px; margin-top: 12px; overflow-y: auto; }
.wallet-withdrawal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wallet-withdrawal-row:first-child { padding-top: 0; }
.wallet-withdrawal-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wallet-withdrawal-row span { overflow-wrap: anywhere; min-width: 0; }
.wallet-withdrawal-status { padding: 3px 8px; border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary); font-size: 11px; }
.wallet-withdrawal-status[data-status="paid"] { color: #267456; background: #edf8f2; }
.wallet-withdrawal-status[data-status="rejected"] { color: #a34b45; background: #fff1ef; }
.wallet-withdrawal-note { grid-column: 1 / -1; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
@media (max-width: 1100px) {
    .wallet-source-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    body.page-dashboard #section-wallet .wallet-source-panel { padding: 14px 16px; }
    .wallet-source-heading { gap: 10px; }
    .wallet-source-heading h2 { font-size: 16px; }
    .wallet-source-action { padding-inline: 12px; }
    .wallet-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .wallet-source-grid dd { font-size: 18px; }
    .wallet-source-footer { column-gap: 18px; }
}

body.page-dashboard #section-home .hero-greeting-heading {
    display: contents;
}

body.page-dashboard #section-home .hero-checkin-shortcut {
    display: none;
}

body.page-dashboard #section-home .dashboard-home-intro,
body.page-dashboard #section-home .announcement-meta {
    display: contents;
}

body.page-dashboard #section-home .announcements-toggle-icon {
    display: none;
}

/* Mobile home overview; desktop layout and other dashboard pages retain their styles. */
@media (max-width: 768px) {
    body.page-dashboard #section-home .dashboard-home-intro {
        display: flex;
        flex-direction: column;
    }

    body.page-dashboard #section-home .dashboard-home-intro .dashboard-page-divider { order: 0; }
    body.page-dashboard #section-home .dashboard-home-intro .announcements-container { order: 1; }

    body.page-dashboard #section-home .announcements-container.announcements-top {
        margin-bottom: 14px;
        border-color: #dce7f5;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgb(43 79 120 / 4%);
    }

    body.page-dashboard #section-home .announcements-header {
        min-height: 52px;
        gap: 8px;
        padding: 9px 12px;
        background: #f8fbff;
        border-bottom-color: #e7eef8;
    }

    body.page-dashboard #section-home .announcements-title {
        flex: 0 0 auto;
        gap: 7px;
        font-size: 13px;
        color: #385779;
    }

    body.page-dashboard #section-home .announcements-title-icon {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        padding: 5px;
        border-radius: 8px;
        color: #4685cb;
        background: #eaf3ff;
    }

    body.page-dashboard #section-home .announcements-controls {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0 0 0 auto;
        background: #edf4fc;
        border-radius: 9px;
    }

    body.page-dashboard #section-home .announcements-container:not(.has-multiple-announcements) .announcements-controls { display: none; }

    body.page-dashboard #section-home .announcements-controls .announcement-nav-btn {
        width: 30px;
        min-width: 30px;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0;
        border: 0;
        border-radius: 8px;
        color: #577ca4;
        background: transparent;
        box-shadow: none;
    }

    body.page-dashboard #section-home .announcement-indicator {
        min-width: 30px;
        font-size: 11px;
        color: #718aa7;
        font-variant-numeric: tabular-nums;
    }

    body.page-dashboard #section-home .announcements-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 3px;
        min-height: 32px !important;
        padding: 5px 7px;
        margin-left: auto;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #718aa7;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    body.page-dashboard #section-home .has-multiple-announcements .announcements-toggle { margin-left: 0; }
    body.page-dashboard #section-home .announcements-toggle-icon {
        display: block;
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.page-dashboard #section-home .is-collapsed .announcements-toggle-icon { transform: rotate(180deg); }
    body.page-dashboard #section-home .is-collapsed .announcements-header { border-bottom-color: transparent; }

    body.page-dashboard #section-home .announcements-list { min-height: 0; padding: 12px; }
    body.page-dashboard #section-home .announcement-item { padding: 0; border-radius: 0; }
    body.page-dashboard #section-home .announcement-item-header {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: start;
        gap: 5px 7px;
        margin-bottom: 8px;
    }

    body.page-dashboard #section-home .announcement-icon {
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border-radius: 7px;
        background: #eef5ff;
        font-size: 14px;
    }

    body.page-dashboard #section-home .announcement-item-title { min-width: 0; font-size: 13px; line-height: 1.6; color: #2d4563; overflow-wrap: anywhere; }
    body.page-dashboard #section-home .announcement-meta { display: flex; grid-column: 2; align-items: center; flex-wrap: wrap; gap: 6px; }
    body.page-dashboard #section-home .announcement-time { margin-left: 0; font-size: 10px; color: #96a3b5; }
    body.page-dashboard #section-home .pinned-badge { padding: 1px 5px; border: 0; font-size: 10px; line-height: 1.6; }
    body.page-dashboard #section-home .announcement-item-content { font-size: 13px; line-height: 1.75; color: #64758d; overflow-wrap: anywhere; }

    body.page-dashboard #section-home .dashboard-page-divider {
        gap: 8px;
        min-height: 56px;
        padding: 6px 10px;
        margin-bottom: 14px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-title {
        min-width: 0;
        gap: 8px;
    }

    body.page-dashboard #section-home .dashboard-page-divider-title > div > span,
    body.page-dashboard #section-home .hero-live-badge,
    body.page-dashboard #section-home .dashboard-hero::before,
    body.page-dashboard #section-home .dashboard-hero-scene,
    body.page-dashboard #section-home .stat-card-index {
        display: none;
    }

    body.page-dashboard #section-home .dashboard-page-divider-title strong {
        font-size: 15px;
        line-height: 1.35;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status {
        flex: 0 0 auto;
        gap: 4px;
        padding: 0 0 0 8px;
        border-radius: 8px;
        font-size: 10px;
        line-height: 1.4;
    }

    body.page-dashboard #section-home .dashboard-page-divider-status .page-refresh-btn {
        width: 28px;
        min-width: 28px;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0;
        padding: 7px;
        border: 0;
        border-radius: 7px;
        background: transparent;
    }

    body.page-dashboard #section-home .dashboard-overview-grid {
        gap: 12px;
        margin-bottom: 20px;
    }

    body.page-dashboard #section-home .dashboard-hero {
        min-height: 0;
        padding: 0;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 6px 20px rgba(43, 79, 120, .045);
    }

    body.page-dashboard #section-home .dashboard-hero .hero-content-main {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    body.page-dashboard #section-home .dashboard-hero-copy {
        padding: 18px;
    }

    body.page-dashboard #section-home .hero-greeting {
        width: 100%;
        margin: 0;
    }

    body.page-dashboard #section-home .hero-greeting-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0 0 10px;
    }

    body.page-dashboard #section-home .hero-date-line {
        margin: 0;
        font-size: 11px;
        line-height: 1.5;
    }

    body.page-dashboard #section-home .hero-checkin-shortcut:not([hidden]) {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 5px;
        min-height: 30px;
        padding: 5px 9px;
        color: #1764ac;
        background: #eef6ff;
        border: 1px solid #d4e6f9;
        border-radius: 8px;
        font: inherit;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
        cursor: pointer;
    }

    body.page-dashboard #section-home .hero-checkin-shortcut svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    body.page-dashboard #section-home .greeting-text h1 {
        margin: 0;
        color: var(--ui-ink-soft);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0;
    }

    body.page-dashboard #section-home .user-name-highlight {
        display: block;
        margin-top: 2px;
        padding: 0;
        color: var(--ui-ink);
        font-size: clamp(23px, 6vw, 27px);
        font-weight: 750;
        line-height: 1.3;
        background: transparent;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-home .greeting-time {
        margin: 10px 0 0;
        font-size: 12px;
        line-height: 1.65;
    }

    body.page-dashboard #section-home .hero-status-pills {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 14px;
    }

    body.page-dashboard #section-home .hero-status-pills > span {
        min-width: 0;
        min-height: 28px;
        padding: 4px 9px;
        font-size: 10px;
        line-height: 1.5;
        background: #f5f9ff;
        border-color: #e0ebf7;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-home .hero-status-dot {
        flex: 0 0 5px;
    }

    body.page-dashboard #section-home .hero-actions {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 14px 0 0;
    }

    body.page-dashboard #section-home .hero-search-btn,
    body.page-dashboard #section-home .hero-search-btn:hover {
        width: auto;
        flex: 0 0 auto;
        min-width: 0 !important;
        min-height: 36px;
        padding: 7px 13px;
        gap: 6px;
        color: #fff !important;
        background: var(--ui-primary-hover) !important;
        border-color: var(--ui-primary-hover) !important;
        border-radius: 9px;
        box-shadow: none !important;
        font-size: 12px;
        font-weight: 650;
        line-height: 1.5;
    }

    body.page-dashboard #section-home .hero-search-btn svg {
        width: 14px;
        height: 14px;
    }

    body.page-dashboard #section-home .hero-search-btn.hero-action-secondary,
    body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {
        color: #1764ac !important;
        background: #eef6ff !important;
        border-color: #d4e6f9 !important;
    }

    body.page-dashboard #section-home .hero-search-btn:focus-visible,
    body.page-dashboard #section-home .hero-checkin-shortcut:focus-visible {
        outline: 2px solid var(--ui-primary-hover);
        outline-offset: 3px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern {
        min-height: 0;
        border-radius: 16px !important;
        box-shadow: 0 4px 14px rgba(43, 79, 120, .035) !important;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-inner {
        min-height: 88px;
        padding: 13px 12px;
        gap: 10px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 9px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-icon-modern svg {
        width: 17px;
        height: 17px;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-content-modern {
        min-width: 0;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-value-modern {
        font-size: clamp(17px, 4.4vw, 20px);
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    body.page-dashboard #section-home #dashboardExpiryValue {
        font-size: clamp(15px, 4vw, 18px);
        letter-spacing: -.025em;
    }

    body.page-dashboard #section-home .dashboard-kpi-refined .stat-label-modern {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.5;
    }

    body.page-dashboard #section-search .search-command-panel {
        padding: 14px;
    }

    body.page-dashboard #section-search .search-box {

        grid-template-columns: 16px minmax(0, 1fr) 34px !important;
        gap: 6px;
        padding: 3px 3px 3px 10px;
        border-radius: 10px !important;
    }

    body.page-dashboard #section-search .search-box input {

        min-height: 0 !important;
        padding: 0;
        font-size: 16px;
        line-height: 34px;
    }

    body.page-dashboard #section-search .search-box button {
        width: 34px;
        min-width: 34px;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0;
        border-radius: 8px !important;
    }

    body.page-dashboard #section-search .search-box button span {
        display: none;
    }

    body.page-dashboard #section-search .search-filters {
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px 10px;
        margin: 12px 0 0;
        padding: 10px 0 0;
        background: transparent !important;
        border: 0;
        border-top: 1px solid #e4ebf4;
        border-radius: 0 !important;
    }

    body.page-dashboard #section-search .search-filter-title {
        min-height: 24px;
        grid-column: 1;
        grid-row: 1;
        font-size: 12px;
    }

    body.page-dashboard #section-search .filter-group {
        min-width: 0;
        grid-row: 2;
        gap: 4px;
    }

    body.page-dashboard #section-search .filter-group label {
        font-size: 11px;
    }

    body.page-dashboard #section-search .filter-group select {
        height: 36px;
        min-height: 36px;
        padding: 5px 28px 5px 10px;
        color: var(--ui-ink-soft);
        background-color: #f8fbff;
        border-color: #dce7f3;
        border-radius: 8px;
        font-size: 14px;
    }

    body.page-dashboard #section-search .filter-reset {
        width: auto;
        min-width: 0;
        height: 24px;
        min-height: 24px;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        padding: 0;
        color: #1764ac !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 4px;
        font-size: 11px;
    }

    body.page-dashboard #section-playback .playback-header-tools {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 10px 12px;
        background: #fff;
        border: 1px solid #dce7f3;
        border-radius: 12px;
        box-shadow: none;
    }

    body.page-dashboard #section-playback .playback-sync-group {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.page-dashboard #section-playback .playback-sync-group .playback-live-pill {
        width: auto;
        min-height: 26px;
        justify-content: flex-start;
        gap: 5px;
        padding: 4px 7px;
        border: 0;
        border-radius: 6px;
        font-size: 11px;
    }

    body.page-dashboard #section-playback .playback-sync-group .playback-update-time {
        width: auto;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 10px;
        white-space: nowrap;
    }

    body.page-dashboard #section-playback .playback-action-group {
        justify-content: flex-start;
        gap: 8px;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.page-dashboard #section-playback .playback-action-group > button {
        width: auto !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        flex: 0 0 auto !important;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 11px;
    }

    body.page-dashboard #section-playback.playback-compact .playback-stat-card {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        text-align: center;
    }

    body.page-dashboard #section-playback .playback-stat-card .stat-content {
        width: 100%;
        text-align: center;
    }

    body.page-dashboard #section-support .ticket-form-section {
        padding: 16px;
    }

    body.page-dashboard #section-support .ticket-form-section h3 {
        margin-bottom: 14px;
        font-size: 16px;
    }

    body.page-dashboard #section-support .ticket-form {
        gap: 14px;
    }

    body.page-dashboard #section-support .ticket-form .form-group {
        gap: 6px;
    }

    body.page-dashboard #section-support .ticket-form .form-group > label {
        font-size: 13px;
    }

    body.page-dashboard #section-support .ticket-form :is(select, input[type="text"], input[type="number"], textarea) {
        width: 100%;
        min-height: 40px !important;
        height: 40px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 16px;
        line-height: 1.4;
    }

    body.page-dashboard #section-support .ticket-form #ticketDescription {
        min-height: 106px !important;
        height: 106px;
        resize: vertical;
    }

    body.page-dashboard #section-support .priority-options {
        gap: 6px;
    }

    body.page-dashboard #section-support .priority-label {
        min-height: 32px;
        padding: 5px 6px;
        font-size: 12px;
    }

    body.page-dashboard #section-support .submit-ticket-btn {
        min-height: 38px;
        padding: 8px 12px;
        gap: 6px;
        border-radius: 8px;
        font-size: 13px;
    }

    body.page-dashboard #section-support .submit-ticket-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Wide announcement modal, shared by desktop and mobile dashboard layouts. */
body.home-announcement-open { overflow: hidden; }
#homeAnnouncementDialog {
    width: min(860px, calc(100vw - 40px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #20334e;
    background: #fff;
    border: 1px solid #e0eafa;
    border-radius: 22px;
    box-shadow: 0 24px 80px rgb(22 43 72 / 24%);
}
#homeAnnouncementDialog::backdrop { background: rgb(22 35 56 / 44%); backdrop-filter: blur(4px); }
#homeAnnouncementDialog[open] { display: flex; flex-direction: column; }
#homeAnnouncementDialog .home-announcement-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 20px;
    background: #f7faff;
    border-bottom: 1px solid #e8eef7;
}
#homeAnnouncementDialog .home-announcement-header > div { flex: 1; min-width: 0; }
#homeAnnouncementDialog .home-announcement-icon {
    display: grid;
    flex: 0 0 44px;
    height: 44px;
    place-items: center;
    color: #087df1;
    background: #e6f2ff;
    border-radius: 14px;
}
#homeAnnouncementDialog .home-announcement-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#homeAnnouncementDialog[data-type="warning"] .home-announcement-icon { color: #b57b16; background: #fff2d9; }
#homeAnnouncementDialog[data-type="success"] .home-announcement-icon { color: #078b71; background: #e5f7f1; }
#homeAnnouncementDialog[data-type="error"] .home-announcement-icon { color: #cf5151; background: #ffeded; }
#homeAnnouncementDialog .home-announcement-eyebrow { color: #7085a2; font-size: 12px; }
#homeAnnouncementDialog h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
#homeAnnouncementDialog .home-announcement-position { flex: 0 0 auto; color: #7085a2; font-size: 12px; }
#homeAnnouncementDialog .home-announcement-content {
    min-height: 0;
    max-height: min(48dvh, 420px);
    padding: 24px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #3d506b;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
}
#homeAnnouncementDialog .home-announcement-content:focus-visible { outline: 2px solid #91c3ff; outline-offset: -3px; }
#homeAnnouncementDialog .home-announcement-footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 28px;
    border-top: 1px solid #e8eef7;
}
#homeAnnouncementCountdown { min-width: 0; color: #7085a2; font-size: 13px; line-height: 1.5; }
#homeAnnouncementAcknowledge {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 24px;
    color: #fff;
    background: #087df1;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#homeAnnouncementAcknowledge:disabled { color: #8595ad; background: #edf2f8; cursor: not-allowed; }
#homeAnnouncementAcknowledge:focus-visible { outline: 3px solid #a0ccff; outline-offset: 3px; }
@media (max-width: 768px) {
    #homeAnnouncementDialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); border-radius: 18px; }
    #homeAnnouncementDialog .home-announcement-header { gap: 10px; padding: 18px 18px 16px; }
    #homeAnnouncementDialog .home-announcement-icon { flex-basis: 36px; height: 36px; border-radius: 11px; }
    #homeAnnouncementDialog h2 { font-size: 18px; }
    #homeAnnouncementDialog .home-announcement-content { max-height: min(35vw, 30dvh, 220px); padding: 18px; font-size: 14px; }
    #homeAnnouncementDialog .home-announcement-footer { gap: 12px; padding: 12px 18px; }
    #homeAnnouncementCountdown { font-size: 12px; }
    #homeAnnouncementAcknowledge { min-height: 40px; padding: 9px 18px; }
}
@media (max-height: 450px) {
    #homeAnnouncementDialog .home-announcement-header { padding-block: 10px; }
    #homeAnnouncementDialog .home-announcement-content { max-height: calc(100dvh - 190px); padding-block: 12px; }
    #homeAnnouncementDialog .home-announcement-footer { padding-block: 10px; }
}

/* Shared field palette and sizing, including controls inside dynamic dialogs. */
body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) {
    --control-bg: #f8fbff;
    --control-border: #dce7f3;
    --control-ink: var(--ui-ink-soft, #34445d);
    --control-muted: var(--ui-muted, #6d809d);
    --control-accent: var(--ui-primary, #0b7ff3);
    --control-ring: rgba(11, 127, 243, .13);
    --control-height: 42px;
    --control-font-size: 14px;
}

body.telegram-preview-page {
    --control-bg: var(--tg-surface-muted, #f5f7f9);
    --control-border: var(--tg-border, #e4e9ee);
    --control-ink: var(--tg-ink, #17202a);
    --control-muted: var(--tg-muted, #7c8996);
    --control-accent: var(--tg-blue, #2995d5);
    --control-ring: rgba(41, 149, 213, .14);
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(
    input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])),
    select, textarea
) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding-inline: 12px;
    color: var(--control-ink) !important;
    background-color: var(--control-bg) !important;
    border: 1px solid var(--control-border) !important;
    border-radius: 12px !important;
    outline: none;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--control-font-size) !important;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(
    input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"])),
    select:where(:not([multiple]):not([size]))
) {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    padding-block: 0 !important;
    line-height: normal;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.6;
    resize: vertical;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) select:where(:not([multiple]):not([size])) {
    appearance: none;
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236d809d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, textarea)::placeholder {
    color: var(--control-muted) !important;
    opacity: .85;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"])):focus {
    border-color: var(--control-accent) !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--control-ring) !important;
}

/* These searches have a single shared border around the icon and input. */
body.page-dashboard :is(#section-search .search-box, #section-faq .faq-search) {
    min-width: 0;
    color: var(--control-muted);
    background: var(--control-bg) !important;
    border: 1px solid var(--control-border) !important;
    border-radius: 12px !important;
}

body.page-dashboard :is(#section-search .search-box, #section-faq .faq-search):focus-within {
    border-color: var(--control-accent) !important;
    box-shadow: 0 0 0 3px var(--control-ring) !important;
}

body.page-dashboard :is(#section-search .search-box, #section-faq .faq-search) input,
body.page-dashboard :is(#section-search .search-box, #section-faq .faq-search) input:focus {
    height: 36px !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-dashboard #section-search .search-box {
    min-height: 46px;
}

body.page-dashboard #section-search .search-input-icon {
    color: var(--control-muted);
}

body.page-dashboard #section-search .search-box button,
body.page-dashboard #section-search .search-box button.loading {
    height: 36px;
    color: #fff !important;
    background: var(--control-accent) !important;
    border-color: var(--control-accent) !important;
    border-radius: 9px !important;
}

body.page-dashboard #section-search .search-box button:hover {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}

body.page-register .input-wrapper input { padding-left: 42px; }
body.page-dashboard #section-profile .input-group-v2 input { padding-right: 44px; }
body.page-dashboard #section-profile .form-field-v2 label { color: var(--control-ink); }
body.page-dashboard #section-profile .toggle-pwd-v2 {
    width: 32px;
    height: 32px;
    color: var(--control-muted);
    border-radius: 9px;
}

body:is(.page-dashboard, .page-login, .page-register) :is(.email-code-actions, .email-code-row, .code-input-row) {
    min-width: 0;
    gap: 8px;
}
body:is(.page-dashboard, .page-login, .page-register) :is(.email-code-actions, .email-code-row, .code-input-row) > input {
    min-width: 0;
    flex: 1 1 0;
}
body:is(.page-dashboard, .page-login, .page-register) :is(.send-email-code-btn, .send-code-btn, .email-code-confirm, #sendEmailCodeBtn) {
    flex: 0 0 auto;
    min-height: var(--control-height);
    padding: 0 12px;
    border-radius: 12px !important;
    font-size: 12px;
    white-space: nowrap;
}
body.page-dashboard #section-profile :is(.email-code-confirm, #sendEmailCodeBtn) {
    color: var(--control-accent) !important;
    background: var(--ui-blue-soft) !important;
    border-color: var(--control-border) !important;
}
body.page-dashboard #section-profile :is(.email-code-confirm, #sendEmailCodeBtn):hover {
    color: #fff !important;
    background: var(--control-accent) !important;
    border-color: var(--control-accent) !important;
}

body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, select, textarea)[readonly] {
    background-color: #f0f5fb !important;
    color: var(--control-muted) !important;
}
body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, select, textarea):disabled {
    background-color: #edf2f7 !important;
    color: #8190a5 !important;
    opacity: .75;
    cursor: not-allowed;
}
body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, select, textarea):is([aria-invalid="true"], .is-invalid, .error) {
    border-color: #df6565 !important;
    box-shadow: 0 0 0 3px rgba(223, 101, 101, .1) !important;
}

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
    body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) {
        --control-height: 40px;
        --control-font-size: 16px;
    }
    body.page-dashboard #section-search .search-box { min-height: 42px; }
    body.page-dashboard #section-search .search-box input { height: 34px !important; }
    body.page-dashboard :is(.form-field-v2, .form-group, .market-listing-field) { min-width: 0; }
}

/* Keep account actions beside each Emby account on narrow screens. */
@media (max-width: 560px) {
    body.page-dashboard #section-profile .multi-emby-account-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 7px;
        min-height: 64px;
        padding: 9px 0;
    }

    body.page-dashboard #section-profile .multi-emby-account-mark {
        width: 34px;
        height: 34px;
    }

    body.page-dashboard #section-profile .multi-emby-account-actions {
        grid-column: auto;
        flex-wrap: nowrap;
        gap: 4px;
    }

    body.page-dashboard #section-profile .multi-emby-account-actions .btn-v2 {
        width: auto;
        min-width: 0;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px;
        padding: 0 7px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        line-height: 1;
        white-space: nowrap;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    body.page-dashboard #section-activity-logs :is(.activity-list-columns, .activity-log-card) {
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.3fr) minmax(0, .8fr) 64px;
    }
    body.page-dashboard #section-activity-logs .activity-log-card > div {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.page-dashboard, .page-login, .page-register, .page-player-import, .telegram-preview-page) :is(input, select, textarea) { transition: none; }
}

/* Confirm the complete page stylesheet is applied before revealing the document. */
:root { --emby-page-style-ready: frontend-v5; }

/* 线路状态标签：数据来自面板服务器最近一次检测。 */
.line-health-tag { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:650; line-height:1.4; white-space:nowrap; font-variant-numeric:tabular-nums; border:1px solid transparent; }
.line-health-tag.is-green { color:#15803d; background:#ecfdf3; border-color:#bbf7d0; }
.line-health-tag.is-orange { color:#b45309; background:#fff7ed; border-color:#fed7aa; }
.line-health-tag.is-red { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.line-health-tag.is-muted { color:#64748b; background:#f1f5f9; border-color:#e2e8f0; }
button.line-health-tag { appearance:none; font-family:inherit; cursor:pointer; box-shadow:none; margin:0; }
button.line-health-tag:hover:not(:disabled) { filter:brightness(.96); }
button.line-health-tag:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
button.line-health-tag:disabled { opacity:1; cursor:not-allowed; }
.line-health-tag.is-checking::before { content:''; width:8px; height:8px; margin-right:4px; border:1.5px solid #cbd5e1; border-top-color:#64748b; border-radius:50%; animation:line-probe-spin .8s linear infinite; }
@keyframes line-probe-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .line-health-tag.is-checking::before { animation:none; } }
body.page-dashboard #section-home .emby-service-line-title { display:flex; align-items:center; gap:6px; min-width:0; }
body.page-dashboard #section-home .emby-service-line-title strong { flex:1; min-width:0; }
body.page-dashboard #section-home .emby-service-line-title .line-health-tag { min-width:0; min-height:0; font-family:inherit; font-size:9px; }

/* 官网同款的圆角与节奏；保留原页面、卡片、按钮的背景和状态配色。 */
body:is(.page-dashboard, .page-login, .page-register) {
    --user-card-radius: 26px;
    --user-control-radius: 15px;
    --user-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

body.page-dashboard :is(
    #section-home .announcements-container,
    #section-home .dashboard-page-divider,
    #section-home .dashboard-hero,
    #section-home .stat-card-modern,
    #section-home .emby-service-card,
    #section-home .checkin-mini-card,
    #section-home .invite-banner-modern,
    #section-search .search-command-panel,
    #section-search .search-results-region,
    #section-requests .request-item,
    #section-playback .playback-section,
    #section-profile .user-profile-card,
    #section-profile .stats-section-v2,
    #section-profile .library-stats-card,
    #section-profile .feature-card-v2,
    #section-activity-logs .activity-filter-panel,
    #section-activity-logs .activity-records-panel,
    #section-subscription .subscription-hero-card,
    #section-subscription .subscription-actions-panel,
    #section-subscription .subscription-history-section,
    #section-subscription .retention-card,
    #section-purchase .purchase-wallet-strip,
    #section-purchase .redeem-card,
    #section-purchase .plan-card-new,
    #section-purchase .purchase-tips,
    #section-purchase .my-orders-section,
    #section-wallet .wallet-overview-surface,
    #section-wallet .wallet-recharge-surface,
    #section-wallet .wallet-topup-surface,
    #section-wallet .wallet-ledger-surface,
    #section-wallet .wallet-source-panel,
    #section-market .market-balance-banner,
    #section-market .market-surface,
    #section-invite .invite-share-panel,
    #section-invite .invite-page-metrics,
    #section-invite .invite-records-panel,
    #section-invite .invite-rules-panel,
    #section-docs .docs-nav,
    #section-docs .docs-content,
    #section-docs .doc-section,
    #section-faq .faq-item,
    #section-support .contact-card,
    #section-support .ticket-form-section,
    #section-support .my-tickets-section
) {
    border-radius: var(--user-card-radius);
}

body.page-dashboard .sidebar-nav .nav-item {
    border-radius: 15px;
    transition: color .2s, background-color .2s, box-shadow .25s;
}

body.page-dashboard :is(.user-card, .telegram-bind-sidebar, .email-bind-sidebar, .telegram-sidebar-btn, .admin-panel-btn, .logout-btn) {
    border-radius: 14px;
}

body.page-dashboard .sidebar .logo-title { letter-spacing: -.035em; }
body.page-dashboard .content-section > .section-header h1 {
    font-size: clamp(28px, 2.4vw, 34px);
    font-weight: 730;
    line-height: 1.3;
    letter-spacing: -.04em;
}
body.page-dashboard .content-section > .section-header p { line-height: 1.7; }
body.page-dashboard #section-home .greeting-text h1 {
    font-size: clamp(26px, 2.25vw, 34px);
    font-weight: 730;
    line-height: 1.35;
    letter-spacing: -.04em;
}
body.page-dashboard #section-home .greeting-time { line-height: 1.75; }
body.page-dashboard #section-home .dashboard-subscription-lines > .section-title .dashboard-section-heading > h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.025em;
}
body.page-dashboard :is(.page-kicker, .search-page-kicker, .profile-page-kicker, .activity-page-kicker, .subscription-page-kicker, .invite-page-kicker) {
    font-weight: 650;
    letter-spacing: .15em;
}

body.page-dashboard :is(
    .hero-search-btn, .btn-primary, .primary-btn, .submit-btn, .btn-v2,
    .plan-buy-btn, .sub-action-btn, .invite-action-btn, .submit-ticket-btn,
    .market-surface .primary-action, .market-surface .secondary-action,
    .wallet-recharge-submit, .wallet-withdraw-btn, .redeem-btn,
    .emby-service-import-btn, .hero-checkin-shortcut, .checkin-mini-btn,
    .search-box button, .filter-reset, .page-refresh-btn
) {
    border-radius: var(--user-control-radius);
    transition: box-shadow .25s, border-color .2s, opacity .2s, transform .2s var(--user-motion-ease);
}
body.page-dashboard #section-home .hero-search-btn,
body.page-dashboard #section-home .hero-search-btn:hover {
    border-radius: var(--user-control-radius);
}
body.page-dashboard :is(.announcements-toggle, .announcement-nav-btn, .refresh-btn, .emby-service-icon-btn, .multi-emby-account-mark) {
    border-radius: 12px;
}
body.page-dashboard #section-home .announcements-container.announcements-top { border-radius: var(--user-card-radius); }
body.page-dashboard #section-home .emby-service-credential .credential-btn,
body.page-dashboard #section-home .emby-service-card .emby-service-line :is(.line-toggle-btn, .line-copy-btn) { border-radius: 10px; }
body.page-dashboard :is(.hero-status-pills > span, .emby-service-tags > span, .plan-meta-chip) {
    border-radius: 999px;
}
body.page-dashboard :is(.emby-service-account-field, .emby-service-line, .market-listing-card, .activity-log-card, .request-filter-panel) {
    border-radius: 16px;
}
body.page-dashboard :is(.search-box, .faq-search) { border-radius: 18px; }
/* 套餐卡片按实际卡宽纵向排版，避免两列卡片内再次分栏挤压名称。 */
body.page-dashboard #section-purchase.purchase-redesign .plan-card-new {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tags" "header" "price" "meta" "action";
    gap: 18px;
    align-content: start;
}
body.page-dashboard #section-purchase.purchase-redesign .plan-header-new { min-width: 0; }
body.page-dashboard #section-purchase.purchase-redesign .plan-title-group { min-width: 0; flex: 1; }
body.page-dashboard #section-purchase.purchase-redesign .plan-name-new { overflow-wrap: anywhere; }
body.page-dashboard #section-purchase.purchase-redesign .plan-price-display { justify-content: flex-start; }
body.page-dashboard #section-purchase.purchase-redesign .plan-meta-row { align-self: start; }
body.page-dashboard #section-purchase.purchase-redesign .plan-buy-btn { width: 100%; margin-top: auto; }


body.page-dashboard :is(
    .import-dialog, .confirm-dialog, .unbind-dialog, .bind-dialog,
    .purchase-dialog, .ticket-modal, .captcha-dialog, .retention-captcha-dialog,
    .home-announcement-dialog, .market-confirm-dialog, .lottery-result-dialog
) { border-radius: 26px; }

body.page-login :is(.login-container, .forgot-container),
body.page-register :is(.register-wrapper, .register-container) {
    border-radius: 28px;
}
body.page-login .login-intro h1 {
    font-size: clamp(40px, 4.4vw, 62px);
    line-height: 1.25;
    letter-spacing: -.045em;
    font-weight: 730;
}
body.page-login .welcome-title,
body.page-register .register-title {
    font-weight: 730;
    letter-spacing: -.03em;
}
body:is(.page-login, .page-register) :is(.submit-btn, .register-btn, .form-input, .input-wrapper input, .send-code-btn) {
    border-radius: var(--user-control-radius);
}
body:is(.page-dashboard, .page-login, .page-register) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    body.page-dashboard :is(.plan-card-new, .market-listing-card) {
        transition: transform .3s var(--user-motion-ease), box-shadow .3s, border-color .25s;
    }
    body.page-dashboard :is(.plan-card-new, .market-listing-card):hover {
        transform: translateY(-3px);
    }
    body.page-dashboard :is(.hero-search-btn, .plan-buy-btn, .sub-action-btn, .invite-action-btn, .submit-ticket-btn):hover {
        transform: translateY(-1px);
    }
}
body.page-dashboard :is(.hero-search-btn, .plan-buy-btn, .sub-action-btn, .invite-action-btn, .submit-ticket-btn):active {
    transform: translateY(1px);
}

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
    body:is(.page-dashboard, .page-login, .page-register) {
        --user-card-radius: 22px;
        --user-control-radius: 13px;
    }
    body.page-dashboard .content-section > .section-header h1 { font-size: 26px; }
    body.page-dashboard #section-home .greeting-text h1 { font-size: 26px; }
    body.page-dashboard #section-home .dashboard-subscription-lines > .section-title .dashboard-section-heading > h2 { font-size: 18px; }
    body.page-login .login-intro h1 { font-size: 36px; }
    body.page-login :is(.login-container, .forgot-container),
    body.page-register :is(.register-wrapper, .register-container) { border-radius: 24px; }
}
@media (max-width: 360px) {
    body.page-dashboard #section-home .greeting-text h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .content-section.active,
    body.page-dashboard .tab-content.active { animation: none; }
    body.page-dashboard :is(.plan-card-new, .market-listing-card, .hero-search-btn, .plan-buy-btn, .sub-action-btn, .invite-action-btn, .submit-ticket-btn, .sidebar-nav .nav-item) {
        transition: none;
        transform: none;
    }
}
.line-monitor-note { margin:8px 0; color:#64748b; font-size:12px; line-height:1.5; }

/* 用户端控件：闭合框、展开菜单和播放器选择使用相同颜色与圆角。 */
body.page-dashboard { --control-radius: var(--user-control-radius); }
body.page-dashboard :is(a, button, select, label) { -webkit-tap-highlight-color: transparent; }
body.page-dashboard :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) {
    border-radius: var(--control-radius) !important;
}
body.page-dashboard .user-select { position: relative; display: block; min-width: 0; width: 100%; }
body.page-dashboard .user-select[hidden] { display: none !important; }
body.page-dashboard .user-select:has(> .history-limit-select) { width: 144px; flex: 0 0 144px; }
body.page-dashboard select.user-select-native {
    position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none;
}
body.page-dashboard .user-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-width: 0; height: var(--control-height); min-height: var(--control-height);
    padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius);
    color: var(--control-ink); background: var(--control-bg); font: inherit;
    font-size: var(--control-font-size); text-align: left; cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
body.page-dashboard .user-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-dashboard .user-select-chevron { display: grid; flex: 0 0 18px; place-items: center; color: var(--control-muted); transition: transform .2s var(--user-motion-ease); }
body.page-dashboard .user-select-chevron svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.page-dashboard .user-select-trigger[aria-expanded="true"] .user-select-chevron { transform: rotate(180deg); }
body.page-dashboard :is(.user-select-trigger, .import-select-trigger):is(:focus-visible, [aria-expanded="true"]) {
    border-color: var(--control-accent); box-shadow: 0 0 0 3px var(--control-ring); outline: none;
}
body.page-dashboard .user-select-trigger[aria-invalid="true"] { border-color: var(--error); }
body.page-dashboard .user-select-trigger:disabled { opacity: .6; cursor: not-allowed; }
body.page-dashboard .user-select-menu {
    position: fixed; z-index: 2200; display: grid; gap: 4px; box-sizing: border-box;
    padding: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
body.page-dashboard :is(.user-select-menu, .import-select-menu) {
    border: 1px solid var(--control-border); border-radius: 18px; background: #fff;
    box-shadow: 0 12px 32px rgb(43 79 120 / 12%);
}
body.page-dashboard :is(.user-select-menu, .import-select-menu)[hidden] { display: none !important; }
body.page-dashboard :is(.user-select-menu, .import-select-menu):not([hidden]) { animation: user-menu-enter .2s var(--user-motion-ease); }
body.page-dashboard .user-select-menu[data-direction="up"] { animation-name: user-menu-enter-up; }
body.page-dashboard :is(.user-select-option, .import-select-option) {
    min-width: 0; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 12px;
    color: var(--control-ink); background: #fff; font: inherit; font-size: var(--control-font-size);
    text-align: left; cursor: pointer; overflow-wrap: anywhere;
    transition: background-color .16s ease, color .16s ease;
}
body.page-dashboard .user-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.page-dashboard .user-select-option::after { content: '✓'; flex: 0 0 auto; opacity: 0; }
body.page-dashboard .user-select-option[aria-selected="true"]::after { opacity: 1; }
body.page-dashboard :is(.user-select-option, .import-select-option):is(:hover, :focus-visible, [aria-selected="true"]) {
    color: var(--ui-primary-hover); background: var(--ui-blue-soft); outline: none;
}
body.page-dashboard .user-select-option:disabled { color: var(--control-muted); background: #fff; opacity: .55; cursor: not-allowed; }
body.page-dashboard .import-select-trigger {
    border-color: var(--control-border); color: var(--control-ink); background: var(--control-bg);
    border-radius: var(--control-radius); transition: border-color .18s, box-shadow .18s;
}
@keyframes user-menu-enter { from { opacity: .65; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes user-menu-enter-up { from { opacity: .65; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 金额使用一个组合输入框，内层输入不再重复绘制边框和焦点环。 */
body.page-dashboard #section-wallet .wallet-money-input {
    border-color: var(--control-border); border-radius: var(--control-radius) !important; overflow: hidden;
}
body.page-dashboard #section-wallet .wallet-money-input:focus-within {
    border-color: var(--control-accent); box-shadow: 0 0 0 3px var(--control-ring);
}
body.page-dashboard #section-wallet .wallet-money-input input,
body.page-dashboard #section-wallet .wallet-money-input input:focus {
    flex: 1; min-width: 0; height: 100% !important; min-height: 0 !important;
    padding: 0 12px !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; outline: none !important;
}

/* 按目录可用宽度决定列数，平板保留至少 300px 的套餐卡宽。 */
body.page-dashboard #section-purchase.purchase-redesign .plans-grid-new {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 18px;
}
body.page-dashboard #section-purchase.purchase-redesign :is(.plan-topline, .plan-meta-row) { flex-wrap: wrap; }
body.page-dashboard #section-purchase.purchase-redesign .plan-price-display { flex-wrap: wrap; gap: 6px; }
@media (max-width: 1180px) {
    body.page-dashboard #section-purchase.purchase-redesign .plans-grid-new {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
    body.page-dashboard #section-purchase.purchase-redesign .purchase-secondary-column {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
    body.page-dashboard #section-purchase.purchase-redesign .purchase-catalog-heading { flex-wrap: wrap; align-items: center; }
    body.page-dashboard #section-purchase.purchase-redesign .purchase-plan-filters { width: auto; max-width: 100%; flex-wrap: wrap; }
}

/* 交易市场沿用面板蓝色操作与白色卡片，状态标签保留语义颜色。 */
body.page-dashboard #section-market .market-balance-banner {
    color: var(--ui-ink); background: linear-gradient(135deg, #edf6ff, #fff); border-color: var(--ui-border);
}
body.page-dashboard #section-market .market-balance-banner .market-balance-total { color: var(--ui-ink); }
body.page-dashboard #section-market :is(.market-surface, .market-listing-card) { background: #fff; border-color: var(--ui-border); }
body.page-dashboard #section-market :is(.market-listing-card h3, .market-my-listing strong, .market-unavailable strong) { color: var(--ui-ink); }
body.page-dashboard #section-market :is(.market-balance-banner span, .market-help, .market-count, .market-server-name, .market-listing-meta span, .market-my-listing-meta, .market-my-listings-caption, .market-empty) { color: var(--ui-muted); }
body.page-dashboard #section-market .market-asset-type { color: var(--ui-primary); }
body.page-dashboard #section-market :is(.primary-action, .market-category-filter.is-active),
body.page-dashboard :is(.market-listing-open-btn, .market-listing-modal-actions .primary-action) {
    color: #fff; background: var(--ui-primary); border-color: var(--ui-primary);
    border-radius: var(--user-control-radius);
}
body.page-dashboard #section-market .primary-action:hover,
body.page-dashboard :is(.market-listing-open-btn, .market-listing-modal-actions .primary-action):hover {
    background: var(--ui-primary-hover); box-shadow: 0 5px 14px rgb(11 127 243 / 16%);
}
body.page-dashboard #section-market .market-category-filter.is-active span { color: #fff; }
body.page-dashboard #section-market .market-category-filter { color: var(--ui-muted); border-color: var(--ui-border); }
body.page-dashboard #section-market :is(.market-category-filter, .market-action-btn):is(:hover, :focus-visible) {
    color: var(--ui-primary-hover); border-color: #b9d5ef; background: var(--ui-blue-soft);
}
body.page-dashboard #section-market .market-category-filter.is-active:hover { color: #fff; background: var(--ui-primary-hover); }
body.page-dashboard #section-market .market-action-btn:not(.market-action-cancel),
body.page-dashboard .market-owner-badge {
    color: var(--ui-primary-hover); border-color: var(--ui-border); background: var(--ui-blue-soft); border-radius: 12px;
}
body.page-dashboard .market-listing-modal { border-color: var(--ui-border); border-radius: var(--user-card-radius); }
body.page-dashboard .market-listing-modal-header h2 { color: var(--ui-ink); }
body.page-dashboard .market-listing-modal :is(label, .market-listing-modal-description) { color: var(--ui-muted); }
body.page-dashboard .market-listing-modal-close { color: var(--ui-muted); background: var(--ui-soft); border-color: var(--ui-border); border-radius: 12px; }
body.page-dashboard .market-listing-modal-actions .btn-cancel { color: var(--ui-muted); border-color: var(--ui-border); border-radius: var(--user-control-radius); }
body.page-dashboard #section-market :is(.market-listing-card, .market-my-listing) { animation: none; }
body.page-dashboard .dashboard-subscription-lines .refresh-btn[aria-busy="true"]::before { animation: refresh-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .dashboard-subscription-lines .refresh-btn[aria-busy="true"]::before { animation: none; }
    body.page-dashboard :is(.user-select-menu, .import-select-menu):not([hidden]) { animation: none; }
    body.page-dashboard :is(.user-select-trigger, .import-select-trigger, .user-select-chevron, .import-select-chevron, .user-select-option, .import-select-option) { transition: none; }
}

/* 工单详情：浅色标题、紧凑信息与固定回复区，仅内容区滚动。 */
html.ticket-detail-open, body.page-dashboard.ticket-detail-open { overflow: hidden; }
body.page-dashboard .modal-overlay.ticket-detail-overlay {
    position: fixed; inset: 0; z-index: 10000; display: flex;
    align-items: center; justify-content: center; box-sizing: border-box;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: rgb(20 38 62 / 36%); backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow: auto; overscroll-behavior: contain;
}
body.page-dashboard .ticket-detail-modal {
    display: flex; flex-direction: column; width: 100%; max-width: 720px;
    max-height: 100%; padding: 0; overflow: hidden; box-sizing: border-box;
    border: 1px solid var(--ui-border); border-radius: var(--user-card-radius, 26px);
    background: #fff; color: var(--ui-ink); box-shadow: 0 24px 80px rgb(20 38 62 / 18%);
    animation: ticket-detail-enter .22s var(--user-motion-ease, ease-out);
}
body.page-dashboard .ticket-detail-modal .modal-header {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
    gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--ui-border);
    background: #f8fbff; color: var(--ui-ink);
}
body.page-dashboard .ticket-detail-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.page-dashboard .ticket-detail-heading p { margin: 0 0 3px; color: var(--ui-muted); font-size: 11px; }
body.page-dashboard .ticket-detail-modal .modal-header h3 { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
body.page-dashboard .ticket-ui-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.page-dashboard .ticket-detail-mark { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--ui-primary); background: var(--ui-blue-soft); }
body.page-dashboard .ticket-detail-mark svg { width: 23px; height: 23px; }
body.page-dashboard .ticket-detail-modal .modal-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid var(--ui-border); border-radius: 13px; color: var(--ui-muted); background: #fff; cursor: pointer; }
body.page-dashboard .ticket-detail-modal .modal-close:hover { color: var(--ui-primary); background: var(--ui-blue-soft); }
body.page-dashboard .ticket-detail-modal .modal-body { flex: 1 1 auto; min-height: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.page-dashboard .ticket-info-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; padding: 16px; margin-bottom: 20px; border: 1px solid #eaf0f7; border-radius: 16px; background: #f8faff; }
body.page-dashboard .ticket-info-card .info-row { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 6px; }
body.page-dashboard .ticket-info-card .info-label { color: var(--ui-muted); font-size: 11px; }
body.page-dashboard .ticket-info-card .info-value { max-width: 100%; font-size: 13px; font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; color: var(--ui-ink-soft); }
body.page-dashboard .ticket-info-card .ticket-status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 10px; font-size: 11px; line-height: 1.4; border-radius: 999px; }
body.page-dashboard .ticket-info-card .ticket-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
body.page-dashboard .ticket-subject-section { margin-bottom: 20px; }
body.page-dashboard .ticket-subject-section h4 { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--ui-ink); overflow-wrap: anywhere; }
body.page-dashboard .ticket-description { padding: 14px 16px; border: 1px solid var(--ui-border); border-radius: 14px; color: var(--ui-ink-soft); background: #fff; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
body.page-dashboard .ticket-chat-section { margin: 0; }
body.page-dashboard .ticket-chat-section h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--ui-ink); }
body.page-dashboard .ticket-chat-section h4 > span { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--ui-soft); color: var(--ui-muted); font-size: 10px; font-weight: 500; }
body.page-dashboard .ticket-detail-modal .chat-messages { display: flex; flex-direction: column; gap: 12px; padding: 0; }
body.page-dashboard .ticket-detail-modal .chat-message { max-width: 92%; min-width: 0; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 16px; box-sizing: border-box; }
body.page-dashboard .ticket-detail-modal .chat-message.user { align-self: flex-end; border-color: #d9e9fa; border-bottom-right-radius: 6px; background: #edf6ff; }
body.page-dashboard .ticket-detail-modal .chat-message.admin { align-self: flex-start; border-bottom-left-radius: 6px; background: #f8fafc; }
body.page-dashboard .ticket-detail-modal .message-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; margin-bottom: 7px; }
body.page-dashboard .ticket-detail-modal .sender-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; color: var(--ui-ink-soft); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
body.page-dashboard .ticket-sender-role { padding: 2px 6px; border-radius: 6px; color: var(--ui-primary-hover); background: #e3effc; font-size: 10px; font-weight: 500; }
body.page-dashboard .ticket-detail-modal .message-time { color: var(--ui-muted); font-size: 10px; line-height: 1.5; }
body.page-dashboard .ticket-detail-modal .message-content { color: var(--ui-ink-soft); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
body.page-dashboard .ticket-chat-empty { margin: 0; padding: 12px; color: var(--ui-muted); font-size: 12px; text-align: center; }
body.page-dashboard .ticket-detail-footer { flex: 0 0 auto; padding: 16px 24px 20px; border-top: 1px solid var(--ui-border); background: #fff; }
body.page-dashboard .ticket-reply-section[hidden], body.page-dashboard .ticket-closed-notice[hidden] { display: none; }
body.page-dashboard .ticket-reply-section label { display: block; margin-bottom: 9px; color: var(--ui-ink); font-size: 13px; font-weight: 600; }
body.page-dashboard .ticket-reply-section textarea { display: block; width: 100%; min-height: 76px; max-height: 140px; margin: 0; padding: 11px 14px; border: 1px solid var(--control-border); border-radius: var(--user-control-radius); background: var(--control-bg); color: var(--ui-ink-soft); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; box-sizing: border-box; }
body.page-dashboard .ticket-reply-section textarea:focus { outline: none; border-color: var(--control-accent); box-shadow: 0 0 0 3px var(--control-ring); }
body.page-dashboard .ticket-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
body.page-dashboard .ticket-reply-actions > span { font-size: 11px; color: var(--ui-muted); }
body.page-dashboard .ticket-send-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 44px; width: auto; padding: 10px 18px; border: 1px solid var(--ui-primary); border-radius: var(--user-control-radius); background: var(--ui-primary); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .18s, box-shadow .18s; }
body.page-dashboard .ticket-send-btn:hover:not(:disabled) { background: var(--ui-primary-hover); box-shadow: 0 4px 12px rgb(11 127 243 / 15%); }
body.page-dashboard .ticket-send-btn:disabled { cursor: default; opacity: .65; }
body.page-dashboard .ticket-closed-notice { padding: 12px; border: 1px solid var(--ui-border); border-radius: 14px; color: var(--ui-muted); background: var(--ui-soft); font-size: 12px; line-height: 1.7; text-align: center; }
@keyframes ticket-detail-enter { from { transform: translateY(8px) scale(.99); } to { transform: translateY(0) scale(1); } }
@media (max-width: 640px) {
    body.page-dashboard .modal-overlay.ticket-detail-overlay { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
    body.page-dashboard .ticket-detail-modal { border-radius: 22px; }
    body.page-dashboard .ticket-detail-modal .modal-header { padding: 16px; gap: 12px; }
    body.page-dashboard .ticket-detail-modal .modal-header h3 { font-size: 18px; }
    body.page-dashboard .ticket-detail-modal .modal-body { padding: 16px; }
    body.page-dashboard .ticket-info-card { padding: 12px; gap: 12px; }
    body.page-dashboard .ticket-info-card .info-row:first-child { grid-column: 1 / -1; }
    body.page-dashboard .ticket-info-card .info-value { font-size: 12px; }
    body.page-dashboard .ticket-detail-modal .chat-message { max-width: 96%; padding: 11px 12px; }
    body.page-dashboard .ticket-detail-footer { padding: 14px 16px 16px; }
    body.page-dashboard .ticket-reply-section textarea { --control-font-size: 16px; font-size: 16px; min-height: 76px; max-height: 110px; }
}
@media (max-height: 500px) {
    body.page-dashboard .ticket-detail-modal .modal-header { padding: 10px 16px; }
    body.page-dashboard .ticket-detail-heading p { display: none; }
    body.page-dashboard .ticket-detail-footer { padding: 10px 16px; }
    body.page-dashboard .ticket-reply-section textarea { min-height: 52px; max-height: 68px; }
    body.page-dashboard .ticket-reply-actions { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-dashboard .ticket-detail-modal { animation: none; }
}

/* 求片确认：影片摘要、目标服务器与剧集范围使用同一组留白。 */
body.page-dashboard #confirmOverlay {
    align-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body.page-dashboard:has(#confirmOverlay.show) > .user-select-menu { z-index: 100000; }
body.page-dashboard #confirmOverlay .tv-request-dialog {
    display: flex;
    flex-direction: column;
    width: 560px !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    overflow: hidden;
    border-width: 1px !important;
    border-radius: 24px !important;
    animation: request-confirm-enter .22s ease-out;
}
body.page-dashboard #confirmOverlay .dialog-heading {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 13px;
    padding: 22px 24px;
    border-bottom: 0;
    background: #fff !important;
}
body.page-dashboard #confirmOverlay .dialog-heading > .request-confirm-icon {
    width: 44px;
    height: 44px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: 15px;
}
body.page-dashboard #confirmOverlay .dialog-kicker { font-size: 11px; }
body.page-dashboard #confirmOverlay .dialog-heading h3 {
    margin: 3px 0 5px;
    font-size: 21px;
    line-height: 1.3;
    text-align: left;
}
body.page-dashboard #confirmOverlay .dialog-heading p { margin: 0; font-size: 12px; line-height: 1.6; }
body.page-dashboard #confirmOverlay .request-confirm-close {
    display: grid;
    width: 36px;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0;
    place-items: center;
    color: var(--ui-muted);
    background: #f5f8fc;
    border: 1px solid #e7edf5;
    border-radius: 12px;
    transition: color .18s, background-color .18s;
}
body.page-dashboard #confirmOverlay .request-confirm-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body.page-dashboard #confirmOverlay .request-confirm-close:hover { color: var(--ui-primary); background: var(--ui-blue-soft); }
body.page-dashboard #confirmOverlay .request-confirm-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
body.page-dashboard #confirmOverlay .request-media-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px;
    background: #f5f8fd;
    border: 1px solid #e7edf6;
    border-radius: 17px;
    text-align: left;
}
body.page-dashboard #confirmOverlay .request-media-poster {
    position: relative;
    display: grid;
    flex: 0 0 62px;
    width: 62px;
    height: 88px;
    place-items: center;
    overflow: hidden;
    color: #91afd2;
    background: #e6eef9;
    border-radius: 10px;
}
body.page-dashboard #confirmOverlay .request-media-poster svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; }
body.page-dashboard #confirmOverlay .request-media-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.page-dashboard #confirmOverlay .request-media-poster img[hidden] { display: none; }
body.page-dashboard #confirmOverlay .request-media-copy { flex: 1; min-width: 0; }
body.page-dashboard #confirmOverlay .request-media-label { color: var(--ui-muted); font-size: 11px; }
body.page-dashboard #confirmOverlay .movie-title { margin: 5px 0 9px; color: var(--ui-ink); font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
body.page-dashboard #confirmOverlay .movie-type { display: inline-flex; padding: 3px 9px; color: #3474b9; background: #e7f0ff; border-radius: 7px; font-size: 11px; line-height: 1.5; }
body.page-dashboard #confirmOverlay .request-server-choice {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin: 22px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}
body.page-dashboard #confirmOverlay .request-server-choice-label { gap: 0; }
body.page-dashboard #confirmOverlay .request-server-choice-kicker { color: var(--ui-ink); font-size: 13px; font-weight: 650; }
body.page-dashboard #confirmOverlay .request-server-auto {
    padding: 12px 14px;
    color: var(--ui-primary);
    background: #f4f8ff;
    border: 1px solid #dfeafa;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.page-dashboard #confirmOverlay .request-server-choice.is-hidden-initially,
body.page-dashboard #confirmOverlay .request-server-auto.is-hidden-initially { display: none; }
body.page-dashboard #confirmOverlay :is(.user-select, .user-select-trigger, select) { width: 100%; min-width: 0; }
body.page-dashboard #confirmOverlay :is(.user-select-trigger, select) { min-height: 46px; border-radius: 14px; font-size: 14px; }
body.page-dashboard #confirmOverlay .request-server-hint { color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
body.page-dashboard #confirmOverlay .emby-status-info { margin: 16px 0 0; }
body.page-dashboard #confirmOverlay .tv-scope-selector { margin: 22px 0 0; padding: 0; border: 0; background: transparent; }
body.page-dashboard #confirmOverlay .scope-title { margin: 0 0 10px; color: var(--ui-ink); font-size: 13px; font-weight: 650; }
body.page-dashboard #confirmOverlay .scope-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.page-dashboard #confirmOverlay .scope-option {
    min-width: 0;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid #e0e8f2;
    border-radius: 13px;
    background: #fff;
    transition: border-color .18s, background-color .18s;
}
body.page-dashboard #confirmOverlay .scope-option:has(input:checked) { border-color: #8bbcf5; background: #f0f6ff; }
body.page-dashboard #confirmOverlay .scope-option input { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; accent-color: var(--ui-primary); }
body.page-dashboard #confirmOverlay .scope-option .option-label { min-width: 0; color: var(--ui-ink-soft); font-size: 13px; font-weight: 600; }
body.page-dashboard #confirmOverlay .scope-option small { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 10px; font-weight: 400; }
body.page-dashboard #confirmOverlay :is(.season-selector, .episode-selector) { margin: 15px 0 0; padding: 0; background: transparent; }
body.page-dashboard #confirmOverlay :is(.season-selector, .episode-selector, .user-note-input) label { margin-bottom: 8px; color: var(--ui-ink-soft); font-size: 12px; }
body.page-dashboard #confirmOverlay .user-note-input { margin-top: 18px; padding-top: 0; border: 0; }
body.page-dashboard #confirmOverlay .user-note-input label span { margin-left: 5px; color: var(--ui-muted); font-size: 11px; }
body.page-dashboard #confirmOverlay .user-note-input input { min-height: 44px; margin: 0; padding: 11px 13px; background: #fff; border-color: #dce6f2; border-radius: 13px; font-size: 14px; }
body.page-dashboard #confirmOverlay .request-confirm-actions {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 10px;
    margin: 0;
    padding: 18px 24px;
    background: #fff;
    border-top: 1px solid #edf1f7;
}
body.page-dashboard #confirmOverlay .request-confirm-actions button { width: 100%; min-width: 0; min-height: 46px; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 650; transform: none; transition: background-color .18s, border-color .18s, color .18s; }
body.page-dashboard #confirmOverlay .btn-cancel { color: #586c85 !important; background: #f5f8fc !important; border-color: #e0e8f2 !important; }
body.page-dashboard #confirmOverlay .btn-cancel:hover { background: #eaf0f8 !important; }
body.page-dashboard #confirmOverlay .btn-confirm { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
body.page-dashboard #confirmOverlay .btn-confirm:hover:not(:disabled) { background: var(--ui-primary-hover) !important; border-color: var(--ui-primary-hover) !important; }
body.page-dashboard #confirmOverlay .btn-confirm:disabled { opacity: 1; color: #8495ad !important; background: #edf2f8 !important; border-color: #e2e9f2 !important; cursor: not-allowed; }
body.page-dashboard #confirmOverlay :is(button, input, select):focus-visible { outline: 2px solid #6daaf0; outline-offset: 3px; }
@keyframes request-confirm-enter { from { transform: translateY(8px) scale(.99); } to { transform: translateY(0) scale(1); } }
@media (max-width: 560px) {
    body.page-dashboard #confirmOverlay .dialog-heading { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 10px; padding: 18px; }
    body.page-dashboard #confirmOverlay .dialog-heading > .request-confirm-icon { width: 38px; height: 38px; border-radius: 13px; }
    body.page-dashboard #confirmOverlay .dialog-heading h3 { font-size: 19px; }
    body.page-dashboard #confirmOverlay .dialog-heading p { font-size: 11px; }
    body.page-dashboard #confirmOverlay .request-confirm-close { width: 34px; height: 34px; }
    body.page-dashboard #confirmOverlay .request-confirm-body { padding: 0 18px 18px; }
    body.page-dashboard #confirmOverlay .request-media-summary { gap: 12px; padding: 13px; }
    body.page-dashboard #confirmOverlay .request-media-poster { flex-basis: 52px; width: 52px; height: 76px; }
    body.page-dashboard #confirmOverlay .movie-title { font-size: 16px; }
    body.page-dashboard #confirmOverlay .scope-option { gap: 6px; padding: 11px 7px; }
    body.page-dashboard #confirmOverlay .scope-option .option-label { font-size: 12px; }
    body.page-dashboard #confirmOverlay :is(.user-select-trigger, select, .user-note-input input) { font-size: 16px; }
    body.page-dashboard #confirmOverlay .request-confirm-actions { padding: 15px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-dashboard #confirmOverlay .tv-request-dialog { animation: none; }
    body.page-dashboard #confirmOverlay :is(button, .scope-option) { transition: none; }
}