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

/* 模板初始可见性状态；运行时脚本可用更具体的组件规则或内联状态覆盖。 */
.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: #f8f7f4;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --border: #e5e5e5;
    --shadow: rgba(0, 0, 0, 0.08);
}

/* ============================================================
   前台视觉重构 v3
   暖白导航、白色内容区、炭黑主操作、低饱和状态色
   ============================================================ */
body.page-dashboard {
    --primary: #202020;
    --primary-light: #555;
    --primary-dark: #000;
    --neutral-accent: #555;
    --cyan: #666;
    --pink: #777;
    --ui-bg: #ffffff;
    
    --ui-surface: #ffffff;
    
    
    
    
    
    
    
    
    
    
    
    --ui-green: #4f806a;
    --ui-green-soft: #e8f1ec;
    --ui-amber: #ae7a26;
    --ui-amber-soft: #f8f0df;
    --ui-red: #b85d59;
    --ui-red-soft: #f8e8e6;
    color: var(--ui-ink);
    background: var(--ui-bg);
}

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;
    letter-spacing: -0.02em;
}

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;
    color: #69635d;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    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;
    color: #817b74;
    fill: currentColor;
}

body.page-dashboard .sidebar-nav .nav-item:hover {
    color: var(--ui-ink);
    background: rgba(255, 255, 255, 0.62);
}

body.page-dashboard .sidebar-nav .nav-item.active {
    color: var(--ui-ink);
    background: #fff;
    border-color: #e2dcd5;
    box-shadow: 0 5px 16px rgba(45, 39, 33, 0.06);
}

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: 13px 15px 15px;
    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: 5px 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 .app-version {
    color: #aaa39b;
}

body.page-dashboard .main-content {
    min-height: 100vh;
    margin-left: 248px;
    padding: 24px 30px 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 #eee0d3;
    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 #ead9c9;
    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 #ead9c9;
    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: #8f8880;
    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: #252321;
    --login-muted: #817a73;
    
    --login-soft: #f7f4ef;
    --login-border: #e4ded7;
    
    background: #fbfaf8;
}

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: #625d57;
    background: transparent;
    border-radius: 8px;
}

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

body.page-login-auth .main-content {
    display: grid;
    width: min(calc(100% - 48px), 1120px);
    min-height: calc(100vh - 104px);
    margin: 0 auto;
    padding: 34px 0 70px;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 430px);
    align-items: center;
    gap: clamp(60px, 9vw, 130px);
}

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);
    font-size: clamp(42px, 4.4vw, 64px);
    font-weight: 780;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

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;
    color: #625c56;
    background: #fff;
    border: 1px solid var(--login-border);
    border-radius: 8px;
    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: #514c47;
    font-size: 11px;
    font-weight: 650;
}

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

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

body.page-login .submit-btn {
    min-height: 46px;
    color: #fff;
    background: #292725;
    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);
    }

    body.page-login-auth .main-content {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        gap: 48px;
    }
}

@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 {
        display: flex;
        width: 100%;
        min-height: calc(100vh - 64px);
        padding: 26px 14px 42px;
        align-items: center;
        justify-content: center;
    }

    body.page-login .login-intro {
        display: none;
    }

    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 #eee0d3;
    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: #e7dfd7;
}

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;
    content: "";
    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 {
    position: absolute;
    inset: 12px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

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 #ead9c9;
    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 #eee0d3;
    border-radius: 8px;
}

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

body.page-dashboard #section-profile .stats-row {
    gap: 8px;
    margin-bottom: 12px;
}

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 {
    padding: 13px;
    background: var(--ui-soft);
    
    
}

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: #eee0d3;
    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: #fffbeb;
    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: #fffbeb;
    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: #fffbeb;
    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: #fffbeb;
    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: #fffbeb;
    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: #f8f7f4;
            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: 16px;
            border-top: 1px solid #e5e5e5;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* 管理员后台按钮 */
        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 .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{
            width: 40px;
            height: 40px;
            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: #fffdf8;
        }
        
        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: #fffbeb;
            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 .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;
            background: none;
            border: none;
            padding: 8px;
            cursor: pointer;
            flex-direction: column;
            gap: 5px;
        }
        
        body.page-dashboard .mobile-menu-toggle span{
            display: block;
            width: 24px;
            height: 2px;
            background: #333;
            border-radius: 2px;
            transition: all 0.3s;
        }
        
        body.page-dashboard .mobile-menu-toggle.active span:nth-child(1){
            transform: rotate(45deg) translate(5px, 5px);
        }
        
        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: rotate(-45deg) translate(5px, -5px);
        }
        
        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: #fffbeb;
    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;
}

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: flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.page-dashboard .priority-option{
    cursor: pointer;
}

body.page-dashboard .priority-option input{
    display: none;
}

body.page-dashboard .priority-label{
    padding: 8px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s;
}

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 .ticket-detail-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 .ticket-detail-modal{
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body.page-dashboard .ticket-detail-modal .modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #333333;
    color: white;
}

body.page-dashboard .ticket-detail-modal .modal-header h3{
    margin: 0;
    font-size: 18px;
}

body.page-dashboard .ticket-detail-modal .modal-close{
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

body.page-dashboard .ticket-detail-modal .modal-body{
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* 工单信息卡片 */
body.page-dashboard .ticket-info-card{
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

body.page-dashboard .ticket-info-card .info-row{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

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

/* 工单主题区域 */
body.page-dashboard .ticket-subject-section{
    margin-bottom: 20px;
}

body.page-dashboard .ticket-subject-section h4{
    font-size: 16px;
    color: #1e293b;
    margin: 0 0 12px 0;
}

body.page-dashboard .ticket-description{
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

/* 对话记录区域 */
body.page-dashboard .ticket-chat-section{
    margin-bottom: 20px;
}

body.page-dashboard .ticket-chat-section h4{
    font-size: 15px;
    color: #1e293b;
    margin: 0 0 12px 0;
}

body.page-dashboard .chat-messages{
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

body.page-dashboard .chat-message{
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 85%;
}

body.page-dashboard .chat-message.user{
    background: #e0e7ff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

body.page-dashboard .chat-message.admin{
    background: #f0fdf4;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border-left: 3px solid #10b981;
}

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

body.page-dashboard .sender-name{
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

body.page-dashboard .message-time{
    font-size: 11px;
    color: #94a3b8;
}

body.page-dashboard .message-content{
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
}

/* 回复区域 */
body.page-dashboard .ticket-reply-section{
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
}

body.page-dashboard .ticket-reply-section h4{
    font-size: 15px;
    color: #1e293b;
    margin: 0 0 12px 0;
}

body.page-dashboard .ticket-reply-section textarea{
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 12px;
    font-family: inherit;
    box-sizing: border-box;
}

body.page-dashboard .ticket-reply-section textarea:focus{
    outline: none;
    border-color: #333333;
    box-shadow: 0 0 0 3px rgba(32, 32, 32, 0.1);
}

body.page-dashboard .ticket-reply-section .btn{
    width: 100%;
}

/* 用户端工单发送按钮 */
body.page-dashboard .ticket-send-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: #333333;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(32, 32, 32, 0.3);
}

body.page-dashboard .ticket-send-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(32, 32, 32, 0.4);
}

body.page-dashboard .ticket-send-btn:active{
    transform: translateY(0);
}

body.page-dashboard .ticket-send-btn .btn-icon{
    font-size: 16px;
}

body.page-dashboard .ticket-send-btn .btn-text{
    font-weight: 600;
}

body.page-dashboard .ticket-closed-notice{
    text-align: center;
    padding: 20px;
    color: #64748b;
    background: #f8fafc;
    border-radius: 12px;
    font-size: 14px;
}

/* 移动端适配 */
@media (max-width: 640px) {
    body.page-dashboard .ticket-detail-overlay{
        padding: 0;
    }
    
    body.page-dashboard .ticket-detail-modal{
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }
    
    body.page-dashboard .ticket-info-card{
        grid-template-columns: 1fr;
    }
    
    body.page-dashboard .chat-message{
        max-width: 95%;
    }
}

/* 错误文本样式 */
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: #fffbeb;
}

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;
    }
}

/* 确认弹窗基础样式 */
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: #fffbeb;
    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(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

/* 导入弹窗主体 */
body.page-dashboard .import-dialog{
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    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-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-account-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 弹窗底部 */
body.page-dashboard .import-dialog-footer{
    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: flex-end;
        padding: 0;
    }
    
    body.page-dashboard .import-dialog{
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 80vh;
    }
    
    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: #fffbeb;
    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: #fffbeb;
    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 .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-delete-btn{
    width: 32px;
    height: 32px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body.page-dashboard .device-card:hover .device-delete-btn{
    opacity: 1;
}

body.page-dashboard .device-delete-btn:hover{
    background: #fecaca;
    color: #b91c1c;
}

/* 触摸设备始终显示删除按钮 */
@media (hover: none) and (pointer: coarse) {
    body.page-dashboard .device-delete-btn{
        opacity: 1;
    }
}

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 .device-actions{
    flex-shrink: 0;
}

body.page-dashboard .btn-delete-device{
    background: #fee2e2;
    color: #dc2626;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-dashboard .btn-delete-device:hover{
    background: #fecaca;
}

/* ==================== 播放历史卡片样式 ==================== */
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-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: #fffbeb;
    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 .ticket-detail-modal{
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 线路信息移动端优化 */
    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: #fffef9;
}

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: #fff4e0;
    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{
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
    width: 860px;
    max-width: 94vw;
    min-height: 500px;
    display: grid;
    grid-template-columns: 310px 1fr;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 34px 80px rgba(2, 6, 23, 0.45);
    background: #ffffff;
}

body.page-dashboard #purchaseDialogOverlay .dialog-close-x{
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.8);
    color: #334155;
    font-size: 20px;
    z-index: 20;
}

body.page-dashboard #purchaseDialogOverlay .dialog-close-x:hover{
    background: #fff;
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.35);
}

body.page-dashboard #purchaseDialogOverlay .dialog-left-panel{
    width: auto;
    padding: 24px 22px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #202020;
    position: relative;
}

body.page-dashboard #purchaseDialogOverlay .dialog-left-panel::after{
    content: "";
    position: absolute;
    inset: auto -40px -40px auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(147, 197, 253, 0.16);
    pointer-events: none;
}

body.page-dashboard #purchaseDialogOverlay .dialog-left-head{
    display: inline-flex;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.35);
    background: rgba(30, 64, 175, 0.4);
    color: #dbeafe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

body.page-dashboard #purchaseDialogOverlay .selected-plan-info{
    margin-bottom: 0;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.26);
    border: 1px solid rgba(191, 219, 254, 0.2);
}

body.page-dashboard #purchaseDialogOverlay .plan-icon-lg{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(191, 219, 254, 0.24);
}

body.page-dashboard #purchaseDialogOverlay .plan-text h3{
    font-size: 22px;
    margin: 0 0 2px;
    letter-spacing: 0.2px;
}

body.page-dashboard #purchaseDialogOverlay .plan-text p{
    color: rgba(226, 232, 240, 0.88);
    font-size: 13px;
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg{
    margin-bottom: 0;
    padding: 16px 0 14px;
    text-align: left;
    border-top: 1px solid rgba(191, 219, 254, 0.24);
    border-bottom: 1px solid rgba(191, 219, 254, 0.24);
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg .currency{
    font-size: 22px;
    color: #fde68a;
    margin-right: 2px;
}

body.page-dashboard #purchaseDialogOverlay .price-display-lg .amount{
    font-size: 52px;
    color: #fef08a;
    font-weight: 800;
}

body.page-dashboard #purchaseDialogOverlay .dialog-pay-tip{
    font-size: 12px;
    line-height: 1.5;
    color: rgba(219, 234, 254, 0.9);
}

body.page-dashboard #purchaseDialogOverlay .verify-section{
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .verify-label{
    font-size: 12px;
    font-weight: 700;
    color: #dbeafe;
}

body.page-dashboard #purchaseDialogOverlay .verify-row{
    gap: 8px;
}

body.page-dashboard #purchaseDialogOverlay .verify-code-box{
    border-radius: 10px;
    border: 1px dashed rgba(251, 191, 36, 0.7);
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
    font-size: 24px;
    letter-spacing: 8px;
    padding: 9px 12px;
}

body.page-dashboard #purchaseDialogOverlay .verify-refresh-btn{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(191, 219, 254, 0.2);
    background: rgba(30, 64, 175, 0.45);
    color: #bfdbfe;
}

body.page-dashboard #purchaseDialogOverlay .verify-refresh-btn:hover{
    color: #fef08a;
    background: rgba(30, 64, 175, 0.7);
}

body.page-dashboard #purchaseDialogOverlay .verify-input{
    border-radius: 10px;
    border: 1px solid rgba(191, 219, 254, 0.25);
    background: rgba(15, 23, 42, 0.34);
    font-size: 15px;
}

body.page-dashboard #purchaseDialogOverlay .verify-input:focus{
    border-color: rgba(253, 224, 71, 0.72);
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn{
    margin-top: 4px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    background: #3b82f6;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.35);
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(30, 64, 175, 0.42);
}

body.page-dashboard #purchaseDialogOverlay .confirm-pay-btn .pay-arrow{
    font-size: 15px;
}

body.page-dashboard #purchaseDialogOverlay .dialog-right-panel{
    padding: 24px 22px 20px;
    background: #f8f8f7;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.page-dashboard #purchaseDialogOverlay .dialog-right-head h4{
    margin: 0 0 4px;
    font-size: 20px;
    color: #0f172a;
    font-weight: 800;
}

body.page-dashboard #purchaseDialogOverlay .dialog-right-head p{
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

body.page-dashboard #purchaseDialogOverlay .option-group{
    margin-bottom: 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #dbe7fb;
    background: rgba(255, 255, 255, 0.85);
}

body.page-dashboard #purchaseDialogOverlay .option-title{
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}

body.page-dashboard #purchaseDialogOverlay .option-title::before{
    width: 4px;
    height: 14px;
    border-radius: 99px;
    background: #3b82f6;
}

body.page-dashboard #purchaseDialogOverlay .duration-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.page-dashboard #purchaseDialogOverlay .dur-card{
    gap: 5px;
    padding: 14px 8px 12px;
    border-radius: 12px;
    border: 1px solid #d5e2f6;
    background: #fff;
}

body.page-dashboard #purchaseDialogOverlay .dur-card:hover{
    border-color: #93c5fd;
    background: #f8fbff;
}

body.page-dashboard #purchaseDialogOverlay .dur-card.active{
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.2);
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-name{
    font-size: 12px;
    color: #334155;
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-price{
    font-size: 22px;
    line-height: 1;
    color: #0f172a;
}

body.page-dashboard #purchaseDialogOverlay .dur-card.active .dur-price{
    color: #1d4ed8;
}

body.page-dashboard #purchaseDialogOverlay .dur-card .dur-tag{
    top: -7px;
    right: -3px;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
}

body.page-dashboard #purchaseDialogOverlay .pay-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.page-dashboard #purchaseDialogOverlay .pay-card{
    align-items: center;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #d6e2f5;
    background: #fff;
}

body.page-dashboard #purchaseDialogOverlay .pay-card:hover{
    border-color: #93c5fd;
    background: #f8fbff;
}

body.page-dashboard #purchaseDialogOverlay .pay-card.active{
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 7px 16px rgba(59, 130, 246, 0.18);
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-icon{
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-meta{
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-name{
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

body.page-dashboard #purchaseDialogOverlay .pay-card .pay-desc{
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    margin-top: 2px;
}

@media (max-width: 900px) {
    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
        width: 760px;
        grid-template-columns: 280px 1fr;
    }

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

@media (max-width: 720px) {
    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
        width: 96vw;
        max-height: 92vh;
        overflow-y: auto;
        grid-template-columns: 1fr;
        border-radius: 18px;
        min-height: 0;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-left-panel{
        padding: 18px 16px;
        gap: 10px;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-right-panel{
        padding: 18px 14px 16px;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-right-head h4{
        font-size: 18px;
    }

    body.page-dashboard #purchaseDialogOverlay .price-display-lg .amount{
        font-size: 44px;
    }

    body.page-dashboard #purchaseDialogOverlay .pay-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .hero-actions{
        flex-direction: column;
        gap: 8px;
    }

    body.page-dashboard #purchaseDialogOverlay .purchase-dialog-horizontal{
        width: 100vw;
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }

    body.page-dashboard #purchaseDialogOverlay .dialog-close-x{
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
    }

    body.page-dashboard #purchaseDialogOverlay .selected-plan-info{
        padding-right: 44px;
    }

    body.page-dashboard #purchaseDialogOverlay .plan-text h3{
        font-size: 19px;
    }

    body.page-dashboard #purchaseDialogOverlay .price-display-lg .amount{
        font-size: 38px;
    }
}

/* ============================================
   用户页满屏布局（桌面端）
   邀请返利 / 播放监控 / 我的信息
   ============================================ */
@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;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 10000;
    animation: bounceIn 0.5s ease;
}

body.page-dashboard .checkin-success-animation.fade-out{
    animation: fadeOut 0.3s ease forwards;
}

body.page-dashboard .success-icon{
    font-size: 64px;
    margin-bottom: 16px;
}

body.page-dashboard .success-text{
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 12px;
}

body.page-dashboard .success-reward{
    font-size: 20px;
    color: #333333;
    font-weight: bold;
}

@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-animation{
        width: calc(100% - 40px);
        max-width: 320px;
        padding: 32px 24px;
    }
    
    body.page-dashboard .success-icon{
        font-size: 48px;
    }
    
    body.page-dashboard .success-text{
        font-size: 20px;
    }
    
    body.page-dashboard .success-reward{
        font-size: 18px;
    }
}

/* 小屏手机优化 */
@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 {
    --ui-sidebar: #f7f5f1;
    --ui-soft: #f7f7f6;
    --ui-soft-warm: #f4f2ef;
    --ui-border: #e7e4df;
    --ui-border-strong: #d6d1ca;
    --ui-ink: #1f1f1f;
    --ui-ink-soft: #4b4b4b;
    --ui-muted: #777;
    --ui-primary: #202020;
    --ui-primary-hover: #000;
    --ui-warm: #202020;
    --ui-warm-soft: #f0f0ef;
    background: #fff;
}

body.page-dashboard .sidebar-nav .nav-item.active::before {
    background-color: #202020;
}

body.page-dashboard .sidebar-nav .nav-item.active svg {
    color: #202020;
    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 :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 #d8d5d0 !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 #e0ded9;
    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 #dedbd6;
}

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 #ddd9d4;
}

body.page-dashboard .category-btn:hover {
    color: #202020;
    background: #f4f4f3 !important;
    border-color: #aaa49d;
}

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: #dedbd6 !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 {
    color: #444 !important;
    background: #fff !important;
    border-color: #d8d5d0 !important;
}

body.page-dashboard .priority-option input:checked + .priority-label {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
    box-shadow: none !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 #dedbd6 !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 #e1dfdc !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 #e2dfdb;
    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: #fff9ed;
    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 #dfdcd7;
    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: #202020 !important;
    background: #fafafa !important;
    border: 1px solid #ddd9d4 !important;
    border-radius: 9px;
}

body.page-dashboard :is(.emby-bind-dialog, .unbind-dialog) .form-group input:focus {
    background: #fff !important;
    border-color: #777 !important;
    box-shadow: 0 0 0 3px rgba(20, 20, 20, .08);
}

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: #e1dfdc !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: #ddd9d4 !important;
}

body.page-dashboard .telegram-bind-dialog .step-divider-horizontal {
    color: #777;
}

body.page-dashboard .unbind-dialog {
    width: min(100%, 420px);
    text-align: center;
}

body.page-dashboard .unbind-dialog .warning-text {
    color: #765a23;
    background: #fff9ed;
    border: 1px solid #ead6b5;
}

body.page-dashboard .unbind-dialog .dialog-btns {
    display: flex;
    gap: 10px;
}

body.page-dashboard .unbind-dialog .btn-cancel {
    flex: 1;
}

body.page-dashboard .unbind-dialog .btn-confirm-unbind {
    flex: 1;
    background: #a33b36 !important;
}

/* 登录页补充：链接与辅助文案也统一为黑灰色 */
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 .main-content {
    display: flex;
    width: min(calc(100% - 32px), 520px);
    min-height: calc(100vh - 96px);
    margin: 0 auto;
    padding: 32px 0 56px;
    align-items: center;
    justify-content: center;
}

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 #e3e1dd;
    border-radius: 10px;
}

body.page-forgot .reset-method-btn {
    flex: 1;
    min-height: 39px;
    padding: 8px 10px;
    color: #555;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
}

body.page-forgot .reset-method-btn.active {
    color: #fff;
    background: #202020;
    border-color: #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;
    color: #777;
    background: #f0f0ef;
    border: 1px solid #dedbd7;
    border-radius: 50%;
}

body.page-forgot .step.active {
    color: #202020;
}

body.page-forgot .step.active .step-number {
    color: #fff;
    background: #202020;
    border-color: #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;
    color: #202020;
    background: #fff;
    border: 1px solid #cbc7c1;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 650;
}

body.page-forgot .send-code-btn:hover:not(:disabled) {
    color: #fff;
    background: #202020;
    border-color: #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;
    padding: 32px 20px;
    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;
    width: min(100%, 980px);
    min-height: 650px;
    margin: 0 auto;
    overflow: hidden;
    grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr);
    background: #fff;
    border: 1px solid #dfdcd7;
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(30, 30, 30, .09);
}

body.page-register .register-banner {
    display: flex;
    padding: 50px 38px;
    align-items: center;
    background: #f7f5f1;
    border-right: 1px solid #e4e0da;
}

body.page-register .banner-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    object-fit: cover;
    border: 1px solid #ddd8d1;
    border-radius: 16px;
}

body.page-register .banner-title {
    margin: 0 0 12px;
    color: #202020;
    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 #dfdcd7;
    border-radius: 8px;
}

body.page-register .register-form-section {
    display: flex;
    padding: 44px 42px;
    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;
    color: #5c4a2b;
    background: #faf7f0;
    border: 1px solid #e7dcc8;
}

body.page-register .invite-required {
    color: #644f28;
    background: #fff9ed;
    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 #ddd9d4;
    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: #e7e5e2;
    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.page-dashboard .pwa-install-prompt {
    position: fixed;
    bottom: 80px;
    left: 50%;
    z-index: 10000;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #ddd9d4;
    border-radius: 11px;
    box-shadow: 0 14px 40px rgba(20, 20, 20, .14);
    transform: translateX(-50%);
}

body.page-dashboard .pwa-prompt-content,
body.page-dashboard .pwa-prompt-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-dashboard .pwa-prompt-content {
    flex-wrap: wrap;
}

body.page-dashboard .pwa-prompt-buttons button {
    min-height: 32px;
    padding: 5px 11px;
    color: #fff;
    background: #202020;
    border: 1px solid #202020;
    border-radius: 6px;
    cursor: pointer;
}

body.page-dashboard .pwa-prompt-buttons button:last-child {
    color: #444;
    background: #f1f1ef;
    border-color: #ddd9d4;
}

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 {
        padding: 0;
    }

    body.page-register .register-wrapper {
        display: block;
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.page-register .register-banner {
        padding: 28px 22px;
        border-right: 0;
        border-bottom: 1px solid #e4e0da;
    }

    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-register .register-form-section {
        padding: 28px 20px 42px;
    }

    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 #ddd9d3;
    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: #f4f2ef;
    border: 1px solid #e6e1db;
    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: #6d6862;
    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: #8b857e;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ui-toast .toast-close:hover {
    color: #202020;
    background: #f3f1ee;
}

.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 #ddd8d1;
    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: #f3f1ee;
    border: 1px solid #e3dfd9;
    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: #8a847d;
    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: #65615c;
    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 #cfc9c1;
    border-radius: 9px;
    outline: none;
    font-size: 14px;
}

.global-prompt-input:focus {
    border-color: #595550;
    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: #faf9f7;
    border-top: 1px solid #ebe7e2;
}

.global-confirm-btn {
    min-width: 88px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #d5d0ca;
    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: #f6f4f1;
    border: 1px solid #e1dcd6;
    border-radius: 10px;
}

.captcha-loading {
    color: #77716b;
    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: #4e4a46;
    background: #fff;
    border: 1px solid #d8d2cb;
    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 #ddd8d1 !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: #f3f1ee;
    border: 1px solid #e3dfd9;
    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: #faf9f7;
    border-top: 1px solid #ebe7e2;
}

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: #5f5a54;
    background: #f7f5f2;
    border: 1px solid #e7e2dc;
    border-radius: 10px;
    text-align: left;
}

body.page-dashboard .result-message {
    color: #5f5a54;
    font-size: 13px;
    line-height: 1.65;
    text-align: left;
}

body.page-dashboard .announcement-dialog > .content {
    margin: 0 22px;
    padding: 15px;
    color: #5f5a54;
    background: #f7f5f2;
    border: 1px solid #e7e2dc;
    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;
    }
}

/* 保证统一 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 #ddd9d3;
    border-left: 1px solid #ddd9d3;
    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: #6d6862;
    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 #dedbd6 !important;
        border-radius: 16px;
    }
}

/* ============================================================
   UI8 内容架构：按“核心状态 → 常用操作 → 详细信息”重排功能层级
   ============================================================ */
body.page-dashboard .content-section {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
}

body.page-dashboard .content-section > .section-header {
    display: flex;
    min-height: 76px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e8e4df;
}

body.page-dashboard .content-section > .section-header h1 {
    margin: 0 0 4px;
    color: #202020;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 760;
    letter-spacing: -0.035em;
}

body.page-dashboard .content-section > .section-header p {
    max-width: 700px;
    margin: 0;
    color: #77716b;
    font-size: 13px;
    line-height: 1.55;
}

/* 统计数据合并为连续信息带，减少重复卡片边框。 */
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: #e8e4df;
    border: 1px solid #e8e4df;
    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: #faf9f7 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 首页：欢迎与关键状态保持紧凑，账号、线路、签到组成一个功能面板。 */
body.page-dashboard #section-home .dashboard-hero {
    
    margin-bottom: 14px;
    
    background: #faf9f7 !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: #e7e3de;
    border: 1px solid #e7e3de;
    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: #f7f5f2 !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 #e5e1dc;
    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: #e5e1dc;
    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: #e5e1dc;
    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 #e8e4df;
}

body.page-dashboard #section-profile .profile-management-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #8a847e;
    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: #e5e1dc !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-hero-card {
    
    border-color: #e4dfd8;
    
    
}



body.page-dashboard #section-subscription .subscription-history-section {
    min-width: 0;
    
    margin: 0;
    border-color: #e5e1dc;
    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: #e4dfd9 !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: #242321;
    background: #fff;
    border: 1px dashed #d9d5d0;
    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: #343230;
    background: #fff;
    border: 1px solid #dedad5;
    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: #77736e;
    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 #d9d5d0;
    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: #e5e1dc;
    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 #eeeae5;
}

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: #e5e1dc;
    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 #eeeae5;
    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,
body.page-dashboard #section-activity-logs .activity-logs-page {
    max-width: 1120px;
    margin-inline: auto;
}

@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 {
        min-height: 0;
        align-items: flex-start;
        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-requests .request-stats,
        #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: #faf9f7 !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: #e3ded8;
    
}

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: #77716b;
    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 #e5e0da;
}

body.page-dashboard #section-home .invite-reward-summary {
    display: grid;
    min-width: 128px;
    gap: 3px;
}

body.page-dashboard #section-home .invite-reward-label {
    color: #8a847e;
    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: #68625d;
    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 #e5e0da;
        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,
    .custom-link-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 #dedbd6 !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 #ebe9e6;
}

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 #dedbd6;
    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: #89857f;
    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: #797672;
    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: #706d69 !important;
    background: #fff !important;
    border: 1px solid #dfdcd8 !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: #d8d5d1 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 #e4e1dd !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: #8a8782;
    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: #474542;
    background: #fff;
    border: 1px solid #ece9e5;
    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: #55524e;
    background: #fff;
    border: 1px solid #e4e1dd;
    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: #87837e;
    font-size: 11px;
    font-weight: 600;
}

body.page-dashboard .telegram-step-card > p {
    margin: 6px 0 14px;
    color: #7b7873;
    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: #77736e !important;
    background: #f5f4f2 !important;
    border-color: #dfdcd8 !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 #dcd9d5 !important;
    border-radius: 10px;
}

body.page-dashboard .telegram-bind-dialog .bind-code-container code {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #292826;
    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 #e1ded9 !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: #aaa6a0 !important;
    background: #f5f4f2 !important;
    border-color: #e5e2de !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: #8a8782 !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: #66635f;
    background: #fff;
    border: 1px solid #e2dfdb;
    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 #eeece9;
}

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: #343230;
    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: #8d8983;
}

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: #292826;
    font-size: 12px;
    font-weight: 720;
}

body.page-dashboard .telegram-bind-dialog .bind-status-hint .hint-text {
    color: #85817d;
    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 #dedbd7;
    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: #343230;
    background: #fff;
    border: 1px solid #e1ded9;
    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: #8a8681;
    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: #716d68;
    background: #fff;
    border: 1px solid #e4e1dd;
    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 #e4e1dd;
    border-radius: 10px;
}

body.page-dashboard #section-home .credential-label {
    display: block;
    margin-bottom: 5px;
    color: #817d78;
    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: #252422;
    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: #55514d;
    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: #55514d;
    background: #fff;
    border: 1px solid #dedbd7;
    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 #dedbd7;
    border-radius: 12px;
    box-shadow: none;
}

body.page-dashboard #section-home .server-line-compact:hover {
    background: #fff !important;
    border-color: #aaa49e;
    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: #55514d;
    background: #fff;
    border: 1px solid #e1ded9;
    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: #262523;
    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: #817d78;
    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: #74716d;
    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: #f2f1ef;
    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: #dedbd7;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(24, 24, 24, .06);
}

body.page-dashboard #section-home .dashboard-overview-grid {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(520px, 1.38fr);
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
}

body.page-dashboard #section-home .dashboard-hero {
    min-height: 228px;
    height: 100%;
    margin: 0;
    padding: 24px;
    background: #fff !important;
    border: 1px solid #dfdcd8;
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-home .dashboard-hero .hero-content-main {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}

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 #dedbd7;
    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;
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.25;
    letter-spacing: 0;
}

body.page-dashboard #section-home .greeting-time {
    max-width: 430px;
    margin-top: 7px;
    color: #74716d;
    font-size: 11px;
    line-height: 1.55;
}

body.page-dashboard #section-home .hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: auto 0 0;
}

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: #d8d5d1 !important;
}

body.page-dashboard #section-home .hero-search-btn.hero-action-secondary:hover {
    color: #202020;
    background: #f6f5f3;
    border-color: #aaa6a1 !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;
    background: #fff !important;
    border: 1px solid #dfdcd8 !important;
    border-radius: 8px !important;
}

body.page-dashboard #section-home .dashboard-kpi-refined .stat-card-modern:hover {
    background: #fff !important;
    border-color: #aaa6a1 !important;
    box-shadow: none !important;
    transform: none !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;
    color: #202020;
    background: #fff;
    border: 1px solid #dedbd7;
    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: #77736f;
    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;
    min-height: 34px;
    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-lines-container.has-checkin-card {
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.45fr) minmax(190px, .53fr);
}

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 #dfdcd8 !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 #dedbd7;
    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: #77736f;
    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 #dfdcd8;
    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 #dfdcd8;
    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-overview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    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 .dashboard-kpi-refined {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.page-dashboard #section-home .subscription-lines-container.has-checkin-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    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;
    }
}

/* 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 #dcd9d5;
    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 #e8e5e1;
}

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 #dcd9d5;
    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: #85817c;
    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: #77736f;
    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: #67635f;
    background: #fff;
    border: 1px solid #dcd9d5;
    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 #e8e5e1;
}

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: #e8e5e1;
}

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: #7c7873;
    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: #66625e;
    background: #fff;
    border: 1px solid #dfdcd8;
    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 #dcd9d5;
    border-radius: 8px;
}

body.page-dashboard .invite-field:focus-within {
    border-color: #8d8984;
    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: #85817c;
    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: #474440;
    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: #4f4b47;
    background: #fff;
    border: 1px solid #d8d5d1;
    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: #625e59;
    background: transparent;
    border: 0;
    border-top: 1px solid #e8e5e1;
    border-radius: 0;
}

body.page-dashboard .invite-tips > svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin-top: 1px;
    color: #4f4b47;
}

body.page-dashboard .invite-tips p {
    display: grid;
    gap: 3px;
    margin: 0;
    color: #625e59;
    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: #77736f;
    --subscription-line: #e5e1dc;
    --subscription-soft: #f7f6f4;
    --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: #8a8681;
    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;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--subscription-line);
    border-radius: 8px;
    box-shadow: none;
}

body.page-dashboard #section-subscription .subscription-hero-card {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.page-dashboard #section-subscription .subscription-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    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 #dcd8d3;
    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: #66625e;
    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: #66625e;
    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 .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: #5f5b57;
    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: #4d4945;
    background: #fff;
    border: 1px solid #dfdcd8;
    border-radius: 7px;
}

body.page-dashboard #section-subscription .detail-icon svg {
    width: 16px;
    height: 16px;
}

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 #dedad5;
    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 #dedad5;
    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: #aaa59f;
}

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 {
    width: 17px;
    height: 17px;
}

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: #5d5955;
    background: #fff;
    border: 1px solid #dfdcd7;
    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: #c9c5c0 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: #c9c5c0;
    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: #5f5b57;
    background: #fff;
    border: 1px solid #dfdcd7;
    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: #5e5a56;
    background: #fff;
    border: 1px solid #dfdcd7;
    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: #5d5955;
    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 #dedad5;
    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 #dedad5;
    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: #5e5a56;
    background: #fff;
    border: 1px solid #dfdcd7;
    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: #55514d;
    border: 1px solid #dfdcd7;
    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: #746f69;
    --search-line: #e5e1dc;
    --search-soft: #f7f7f6;
    --search-danger: #a94343;
    max-width: 1480px;
}

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: #8a857f;
    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;
    padding: 17px;
    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;
    min-height: 54px;
    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 #d9d5d0 !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;
    color: #716d68;
}

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: #aaa59f;
    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;
    border-color: #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;
    align-items: flex-end;
    gap: 10px;
    margin: 13px 0 0;
    padding-top: 13px;
    border-top: 1px solid #eeeae6;
}

body.page-dashboard #section-search .search-filter-title {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    margin-right: auto;
    color: #5e5954;
    font-size: 10px;
    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;
    min-width: 124px;
    gap: 5px;
}

body.page-dashboard #section-search .filter-group label {
    color: var(--search-muted);
    font-size: 9px;
    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 #dedad5;
    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: #4f4b47;
    background: #fff;
    border: 1px solid #dedad5;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 650;
}

body.page-dashboard #section-search .filter-reset:hover {
    color: #202020;
    background: #f7f7f6;
    border-color: #cfcac4;
}

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;
    min-height: 82px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    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: #4e4a46;
    background: #fff;
    border: 1px solid #dfdbd6;
    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;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

body.page-dashboard #section-search .search-metric-copy small {
    color: var(--search-muted);
    font-size: 9px;
    font-weight: 620;
}

body.page-dashboard #section-search .search-metric-copy strong {
    overflow: hidden;
    color: var(--search-ink);
    font-size: 20px;
    font-weight: 760;
    line-height: 1.15;
    text-overflow: ellipsis;
}

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;
    min-height: 50px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding: 0 2px 11px;
    border-bottom: 1px solid var(--search-line);
}

body.page-dashboard #section-search .search-results-toolbar h2 {
    max-width: min(780px, 70vw);
    margin: 0;
    overflow: hidden;
    color: var(--search-ink);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.page-dashboard #section-search .search-results-count {
    display: inline-flex;
    min-height: 28px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 9px;
    color: #625e59;
    background: #fff;
    border: 1px solid #dfdbd6;
    border-radius: 999px;
    font-size: 9px;
    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 #dcd8d3;
    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: #625e59;
    background: #fff;
    border: 1px solid #dfdbd6;
    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 #e2ded9 !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: #9f9a94 !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 #e8e4df;
}

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: #aaa59f;
}

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: #aaa59f;
    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: #4c4844;
    border-top: 1px solid #eeeae6;
    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 #e2ded9;
    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: #efeeec;
    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: #514d49;
    background: #fff;
    border: 1px solid #dedad5;
    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: #77736f;
    --invite-border: #e5e1dc;
    --invite-soft: #f7f6f4;
    --invite-warm: #f4f1ed;
}

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: #85807a;
    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: #5f5a55;
    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 #dcd8d3;
    border-radius: 8px;
}

body.page-dashboard #section-invite .invite-page-field:focus-within {
    border-color: #88827c;
    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: #807b75;
    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: #46423e;
    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: #4f4a46;
    background: #fff;
    border: 1px solid #d8d4cf;
    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;
    color: #65605b;
    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: #68635e;
    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 #ece9e5;
}

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: #67625d;
    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 #ece9e5;
}

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: #1f1e1c;
    --account-muted: #77726c;
    --account-subtle: #9a948d;
    --account-border: #e6e2dd;
    --account-border-strong: #d9d4ce;
    --account-soft: #f8f7f5;
    --account-warm: #f5f2ee;
    --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;
    color: #fff;
    background: #22211f;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
}

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-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #625e59 !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;
}

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;
    gap: 7px;
    padding: 2px 0 2px 18px;
    border-top: 0;
    border-left: 1px solid var(--account-border);
}

body.page-dashboard #section-profile .user-delete-btn {
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: var(--account-danger) !important;
    background: #fff !important;
    border: 1px solid #e9c9c5 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body.page-dashboard #section-profile .user-delete-btn:hover {
    color: #913d38 !important;
    background: var(--account-danger-bg) !important;
    transform: none;
}

body.page-dashboard #section-profile .user-delete-btn svg {
    width: 16px;
    height: 16px;
}

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;
    padding: 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;
    padding: 13px 16px;
    border-bottom: 1px solid var(--account-border);
}

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: #4f4b46;
    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;
}

body.page-dashboard #section-profile .stat-item-v2,
body.page-dashboard #section-profile .library-stat-item {
    display: flex;
    min-width: 0;
    min-height: 96px;
    align-items: center;
    gap: 11px;
    padding: 14px;
    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;
    color: #55504a;
    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 {
    margin: 0;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--account-border);
    border-radius: 0;
    box-shadow: none;
}

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: #5f5a55;
    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: #4f4b46;
    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: #625e59 !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: #5b5650;
    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: #69645e;
}

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;
    color: #5f5a55;
    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: #77716b;
    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;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    color: #817b74;
    background: transparent;
    border: 0;
    border-radius: 6px;
    transform: translateY(-50%);
}

body.page-dashboard #section-profile .btn-v2:is(.btn-primary-v2, .btn-secondary-v2) {
    min-height: 40px;
    color: var(--account-text) !important;
    background: var(--account-soft) !important;
    border: 1px solid var(--account-border-strong) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 12px;
}

body.page-dashboard #section-profile .btn-v2:is(.btn-primary-v2, .btn-secondary-v2):hover {
    color: #fff !important;
    background: #22211f !important;
    border-color: #22211f !important;
    transform: none;
}

/* 操作日志 */
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: #514d48;
    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: #625d57;
    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: #77716b;
    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: #22211f;
    border: 1px solid #22211f;
    border-radius: 7px;
    box-shadow: none;
    cursor: pointer;
}

body.page-dashboard #section-activity-logs .activity-refresh-btn:hover {
    background: #3a3835;
    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;
    color: var(--account-subtle);
    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: #514d48;
    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: #58534e;
    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: #282624;
}

body.page-dashboard #section-activity-logs .activity-empty .empty-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin: 0 0 4px;
    color: #7d7771;
    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: #514d48;
    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: #22211f;
    border-color: #22211f;
}

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 {
        width: 100%;
        margin: 0;
        padding: 14px 0 0;
        border-top: 1px solid var(--account-border);
        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 #dedad5;
    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;
    }
}

/* 强制绑定 Telegram 仅以阻断弹窗出现，避免内容落入各页面底部。 */
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 #dedad5;
    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: #f7f6f4;
    border: 1px solid #e5e1dc;
    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: #77736e;
    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 #e5e1dc;
    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: #f8f7f5;
    border: 1px solid #e5e1dc;
    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 #dedad5;
    border-radius: 7px;
}

body.page-dashboard .force-bind-code-display {
    display: grid;
    gap: 11px;
    padding: 14px;
    background: #f8f7f5;
    border: 1px solid #e5e1dc;
    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: #77736e;
    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: #55514d;
    background: #fff;
    border: 1px solid #e5e1dc;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
}

@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;
    }
}