/* ============================================================
 * NetworkPanel 经典主题（切换按钮打开的「经典版」）
 *
 * 在 pages.css 基础上覆盖变量与部分组件：
 * - 深色渐变头部（传统门户网站质感）
 * - 卡片更大圆角、更厚阴影、轻微立体边框
 * - 主按钮使用渐变而非纯色
 * - 整体配色更沉稳（靛蓝/深紫方向）
 * ============================================================ */

.np-theme-classic {
    --np-primary: #4f5bd8;
    --np-primary-dark: #3b47b0;
    --np-primary-soft: rgba(79, 91, 216, 0.10);
    --np-success: #10a861;
    --np-warning: #e09400;
    --np-danger: #e13b3b;

    --np-bg: #f0f2f5;
    --np-card: #ffffff;
    --np-subtle: #f7f8fa;
    --np-border: #e0e3ea;
    --np-border-strong: #cdd1db;

    --np-text: #1a1c23;
    --np-text-secondary: #555b6b;
    --np-text-muted: #8a90a0;

    --np-radius-sm: 10px;
    --np-radius: 16px;
    --np-radius-lg: 20px;
    --np-shadow-sm: 0 2px 4px rgba(20, 25, 55, 0.06);
    --np-shadow: 0 4px 12px rgba(20, 25, 55, 0.10);
    --np-shadow-md: 0 10px 30px rgba(20, 25, 55, 0.14);
}

@media (prefers-color-scheme: dark) {
    .np-theme-classic {
        --np-primary: #6f7eff;
        --np-primary-dark: #5b6be0;
        --np-primary-soft: rgba(111, 126, 255, 0.14);
        --np-bg: #12141a;
        --np-card: #1c1f27;
        --np-subtle: #252933;
        --np-border: #2e3340;
        --np-border-strong: #3a4050;
        --np-text: #ececf1;
        --np-text-secondary: #a4abc0;
        --np-text-muted: #7b8299;
        --np-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
        --np-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
        --np-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
    }
}

/* 经典版头部：深色渐变 + 无模糊 */
.np-theme-classic .np-header {
    background: linear-gradient(90deg, #3a3f4f 0%, #4f5bd8 100%);
    border-bottom: none;
    box-shadow: 0 4px 14px rgba(40, 45, 80, 0.22);
    backdrop-filter: none;
}

.np-theme-classic .np-header-inner { height: 64px; }

.np-theme-classic .np-brand { color: #fff; }
.np-theme-classic .np-brand:hover { color: #e8eaff; }

.np-theme-classic .np-brand-mark {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 11px;
}

.np-theme-classic .np-brand-name { font-size: 17px; letter-spacing: 0.4px; }

.np-theme-classic .np-nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    border-radius: 20px;
    padding: 7px 16px;
}

.np-theme-classic .np-nav-link:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.np-theme-classic .np-nav-link.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* 主题切换按钮在经典头部中需要更醒目（覆盖 pages.css 的白色背景） */
.np-theme-classic .np-theme-switch {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.35);
}
.np-theme-classic .np-theme-switch:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.np-theme-classic .np-theme-switch-dot { background: #ffd36e; }

/* 登录/注册按钮在深色头部改为浅色 */
.np-theme-classic .np-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.np-theme-classic .np-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
}

.np-theme-classic .np-btn-primary {
    background: linear-gradient(135deg, #ff8a4c, #ff5e62);
    border: none;
    color: #fff;
}
.np-theme-classic .np-btn-primary:hover {
    background: linear-gradient(135deg, #ff7a38, #f04b50);
}

/* 卡片：更大圆角、更厚阴影、立体边框 */
.np-theme-classic .np-card,
.np-theme-classic .info-panel,
.np-theme-classic .friend-links-card {
    border-radius: var(--np-radius-lg);
    box-shadow: 0 6px 18px rgba(25, 30, 65, 0.10);
    border: 1px solid var(--np-border);
}

.np-theme-classic .np-card:hover {
    box-shadow: 0 10px 26px rgba(25, 30, 65, 0.14);
    transform: translateY(-1px);
    transition: box-shadow .2s, transform .2s;
}

/* 页面标题区 */
.np-theme-classic .np-page-head {
    background: linear-gradient(135deg, rgba(79, 91, 216, 0.08), rgba(79, 91, 216, 0.02));
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-lg);
    padding: 22px 26px;
    margin-bottom: 20px;
}

.np-theme-classic .np-page-title { font-weight: 700; letter-spacing: 0.3px; }

/* 表单类主按钮 */
.np-theme-classic .btn-primary,
.np-theme-classic .play-btn-rect {
    background: linear-gradient(135deg, var(--np-primary), #7b6cf1);
    border: none;
    box-shadow: 0 4px 14px rgba(79, 91, 216, 0.28);
}
.np-theme-classic .play-btn-rect:hover {
    background: linear-gradient(135deg, var(--np-primary-dark), #6a5be0);
}

.np-theme-classic .play-btn-rect.btn-stop {
    background: linear-gradient(135deg, #ef4444, #d9363e);
}

/* 底部 */
.np-theme-classic .np-footer {
    background: #ffffff;
    border-top: 1px solid var(--np-border);
    box-shadow: 0 -2px 10px rgba(20, 25, 55, 0.04);
}

@media (prefers-color-scheme: dark) {
    .np-theme-classic .np-footer { background: var(--np-card); }
}

/* 排行榜领奖台 */
.np-theme-classic .podium-avatar-box {
    box-shadow: 0 4px 10px rgba(79, 91, 216, 0.20);
}

/* 首页信息面板 */
.np-theme-classic .info-panel {
    background: var(--np-card);
    border-radius: var(--np-radius-lg);
}

/* 数据卡片 */
.np-theme-classic .data-card {
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius);
    background: linear-gradient(180deg, var(--np-card) 0%, var(--np-subtle) 100%);
}

/* 公告滚动条 */
.np-theme-classic .notice-bar {
    background: #fff9e6;
    border: 1px solid #f0d99e;
    border-radius: var(--np-radius);
}

@media (prefers-color-scheme: dark) {
    .np-theme-classic .notice-bar {
        background: #2e2818;
        border-color: #5c4f2a;
    }
}