/* ==============================================
   赛博朋克霓虹主题 - Cyberpunk Neon Theme
   深色背景 + 霓虹发光 + 渐变效果
   ============================================== */

/* 主题变量定义 */
[data-theme="cyberpunk"] {
    /* 主色调 - 霓虹青 */
    --primary-color: #00e5ff;
    --primary-color-rgb: 0, 229, 255;
    --primary-hover: #00b8d4;
    --primary-hover-color: #00b8d4;

    /* 辅助色 - 霓虹紫 */
    --secondary-color: #bd00ff;

    /* 功能色 */
    --success-color: #39ff14;
    --warning-color: #ffe600;
    --error-color: #ff1744;

    /* 背景色 - 深空黑 */
    --background-color: #0a0a1a;
    --surface-color: #12122a;
    --hover-color: rgba(0, 229, 255, 0.08);

    /* 文本色 */
    --text-primary: #e0e6ff;
    --text-secondary: #7a82a6;

    /* 边框 - 霓虹边框 */
    --border-color: #1e2448;

    /* 发光阴影 */
    --shadow: 0 0 8px rgba(0, 229, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 0 20px rgba(0, 229, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);

    /* 赛博朋克专属变量 */
    --neon-glow: 0 0 7px rgba(0, 229, 255, 0.4), 0 0 14px rgba(0, 229, 255, 0.2);
    --neon-glow-strong: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(0, 229, 255, 0.1);
    --neon-glow-purple: 0 0 7px rgba(189, 0, 255, 0.4), 0 0 14px rgba(189, 0, 255, 0.2);
    --surface-gradient: linear-gradient(135deg, #12122a 0%, #1a1040 50%, #12122a 100%);
    --header-gradient: linear-gradient(90deg, #0a0a1a 0%, #12122a 30%, #1a0a2e 70%, #12122a 100%);
    --sidebar-gradient: linear-gradient(180deg, #12122a 0%, #0e0e22 100%);
    --accent-gradient: linear-gradient(135deg, #00e5ff, #bd00ff);
    --border-gradient: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(189, 0, 255, 0.3));
}

/* ==============================================
   全局背景与表面
   ============================================== */

[data-theme="cyberpunk"] body {
    background: var(--background-color);
}

/* 表面卡片渐变背景 */
[data-theme="cyberpunk"] .app-header {
    background: var(--header-gradient);
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    box-shadow: 0 1px 12px rgba(0, 229, 255, 0.1);
}

[data-theme="cyberpunk"] .sidebar {
    background: var(--sidebar-gradient);
    border-right: 1px solid rgba(0, 229, 255, 0.1);
}

[data-theme="cyberpunk"] .app-main {
    background: var(--background-color);
}

[data-theme="cyberpunk"] .app-footer {
    background: var(--sidebar-gradient);
    border-top: 1px solid rgba(0, 229, 255, 0.1);
}

/* ==============================================
   导航栏霓虹效果
   ============================================== */

[data-theme="cyberpunk"] .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

[data-theme="cyberpunk"] .nav-link:hover {
    background: rgba(0, 229, 255, 0.06);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

[data-theme="cyberpunk"] .nav-link.active {
    background: rgba(0, 229, 255, 0.1);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

[data-theme="cyberpunk"] .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-gradient);
    box-shadow: var(--neon-glow);
}

[data-theme="cyberpunk"] .nav-sublink:hover {
    color: var(--primary-color);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

[data-theme="cyberpunk"] .nav-sublink.active {
    color: var(--primary-color);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

[data-theme="cyberpunk"] .nav-submenu {
    background: rgba(0, 229, 255, 0.03);
}

/* ==============================================
   按钮霓虹发光效果
   ============================================== */

[data-theme="cyberpunk"] .btn-primary {
    background: linear-gradient(135deg, #00c8e0, #00a0c0);
    border: 1px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

[data-theme="cyberpunk"] .btn-primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00b8d4);
    box-shadow: var(--neon-glow-strong);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    transform: translateY(-2px);
}

[data-theme="cyberpunk"] .btn-secondary {
    background: rgba(189, 0, 255, 0.15);
    border: 1px solid rgba(189, 0, 255, 0.3);
    color: #d580ff;
    text-shadow: 0 0 6px rgba(189, 0, 255, 0.2);
}

[data-theme="cyberpunk"] .btn-secondary:hover {
    background: rgba(189, 0, 255, 0.25);
    box-shadow: var(--neon-glow-purple);
    color: #e0a0ff;
}

[data-theme="cyberpunk"] .btn-success {
    background: linear-gradient(135deg, #1aff6c, #00cc44);
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

[data-theme="cyberpunk"] .btn-success:hover {
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3), 0 0 30px rgba(57, 255, 20, 0.1);
    transform: translateY(-2px);
}

[data-theme="cyberpunk"] .action-btn {
    border-color: rgba(0, 229, 255, 0.2);
    transition: all 0.3s ease;
}

[data-theme="cyberpunk"] .action-btn:hover {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

[data-theme="cyberpunk"] .action-btn.primary {
    background: linear-gradient(135deg, #00c8e0, #00a0c0);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* ==============================================
   表单输入 - 霓虹边框效果
   ============================================== */

[data-theme="cyberpunk"] .form-input,
[data-theme="cyberpunk"] .form-select,
[data-theme="cyberpunk"] .form-textarea,
[data-theme="cyberpunk"] .form-control {
    background: rgba(18, 18, 42, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.12);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

[data-theme="cyberpunk"] .form-input:focus,
[data-theme="cyberpunk"] .form-select:focus,
[data-theme="cyberpunk"] .form-textarea:focus,
[data-theme="cyberpunk"] .form-control:focus {
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.15), 0 0 3px rgba(0, 229, 255, 0.3);
    background: rgba(18, 18, 42, 0.95);
}

[data-theme="cyberpunk"] .form-input::placeholder,
[data-theme="cyberpunk"] .form-textarea::placeholder {
    color: rgba(122, 130, 166, 0.6);
}

/* ==============================================
   模态框 - 霓虹边框
   ============================================== */

[data-theme="cyberpunk"] .modal-content,
[data-theme="cyberpunk"] .custom-confirm-dialog,
[data-theme="cyberpunk"] .custom-input-dialog,
[data-theme="cyberpunk"] .custom-alert-dialog {
    background: var(--surface-gradient);
    border: 1px solid rgba(0, 229, 255, 0.15);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="cyberpunk"] .modal-overlay,
[data-theme="cyberpunk"] .dialog-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

/* ==============================================
   内容编辑器 - 霓虹效果
   ============================================== */

[data-theme="cyberpunk"] .editor-container {
    background: var(--surface-color);
    border: 1px solid rgba(0, 229, 255, 0.15);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="cyberpunk"] .content-editor-dialog {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

[data-theme="cyberpunk"] .editor-actions .btn-icon:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--primary-color);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* ==============================================
   状态指示器 - 霓虹脉冲
   ============================================== */

[data-theme="cyberpunk"] .status-indicator {
    background: linear-gradient(135deg, #00c853, #39ff14);
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.25);
    text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

/* ==============================================
   切换开关 - 霓虹效果
   ============================================== */

[data-theme="cyberpunk"] .toggle-switch {
    background: rgba(30, 36, 72, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.1);
}

[data-theme="cyberpunk"] .toggle-switch.active {
    background: linear-gradient(135deg, #00c8e0, #00e5ff);
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

[data-theme="cyberpunk"] .toggle-switch::after {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ==============================================
   预览面板 - 霓虹效果
   ============================================== */

[data-theme="cyberpunk"] .preview-placeholder {
    color: var(--text-secondary);
    background: rgba(18, 18, 42, 0.5);
    border: 1px dashed rgba(0, 229, 255, 0.15);
}

/* ==============================================
   滚动条 - 霓虹风格
   ============================================== */

[data-theme="cyberpunk"] ::-webkit-scrollbar-track {
    background: rgba(10, 10, 26, 0.5);
}

[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.3), rgba(189, 0, 255, 0.3));
    border-radius: 3px;
}

[data-theme="cyberpunk"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.5), rgba(189, 0, 255, 0.5));
}

/* ==============================================
   标题与品牌 - 霓虹文字
   ============================================== */

[data-theme="cyberpunk"] .app-title {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

[data-theme="cyberpunk"] .app-header .header-logo-container {
    background: linear-gradient(145deg, #0a0a1a, #1a1040);
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15), inset 0 0 8px rgba(0, 229, 255, 0.05);
}

[data-theme="cyberpunk"] .app-header .header-logo-container:hover {
    box-shadow: var(--neon-glow-strong);
    border-color: rgba(0, 229, 255, 0.4);
}

/* ==============================================
   用户菜单 - 霓虹下拉
   ============================================== */

[data-theme="cyberpunk"] .user-menu-trigger {
    background: rgba(18, 18, 42, 0.6);
    border-color: rgba(0, 229, 255, 0.2);
}

[data-theme="cyberpunk"] .user-menu-trigger:hover {
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

[data-theme="cyberpunk"] .user-menu-trigger.active>svg {
    color: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5));
}

[data-theme="cyberpunk"] .user-dropdown {
    background: linear-gradient(160deg, rgba(18, 18, 42, 0.97), rgba(26, 16, 64, 0.97));
    border-color: rgba(0, 229, 255, 0.25);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
}

[data-theme="cyberpunk"] .dropdown-divider {
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
}

[data-theme="cyberpunk"] .dropdown-item:hover {
    background: rgba(0, 229, 255, 0.08);
    color: var(--primary-color);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

[data-theme="cyberpunk"] .dropdown-item:hover svg {
    stroke: var(--primary-color);
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.4));
}

[data-theme="cyberpunk"] .dropdown-item.dropdown-item-danger:hover {
    background: rgba(255, 23, 68, 0.12);
    color: var(--error-color);
    text-shadow: 0 0 8px rgba(255, 23, 68, 0.35);
}

[data-theme="cyberpunk"] .dropdown-item.dropdown-item-danger:hover svg {
    stroke: var(--error-color);
    filter: drop-shadow(0 0 4px rgba(255, 23, 68, 0.45));
}

/* ==============================================
   卡片与面板 - 微妙的边框发光
   ============================================== */

[data-theme="cyberpunk"] .config-panel,
[data-theme="cyberpunk"] .config-section,
[data-theme="cyberpunk"] .article-card,
[data-theme="cyberpunk"] .template-card {
    border-color: rgba(0, 229, 255, 0.08);
    transition: all 0.3s ease;
}

[data-theme="cyberpunk"] .config-panel:hover,
[data-theme="cyberpunk"] .config-section:hover,
[data-theme="cyberpunk"] .article-card:hover,
[data-theme="cyberpunk"] .template-card:hover {
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.08);
}

/* ==============================================
   底部 - 霓虹边框
   ============================================== */

[data-theme="cyberpunk"] .beian-link:hover {
    color: var(--primary-color);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

/* ==============================================
   动画装饰 - 顶部扫描线
   ============================================== */

[data-theme="cyberpunk"] .app-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-gradient);
    opacity: 0.6;
    z-index: 9999;
    pointer-events: none;
    animation: scanline 4s ease-in-out infinite;
}

@keyframes scanline {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

/* 网格背景纹理 */
[data-theme="cyberpunk"] .app-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="cyberpunk"] .app-main .content-area {
    position: relative;
    z-index: 1;
}

/* ==============================================
   通知 - 霓虹风格
   ============================================== */

[data-theme="cyberpunk"] .notification {
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="cyberpunk"] .notification-success {
    border-color: rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="cyberpunk"] .notification-error {
    border-color: rgba(255, 23, 68, 0.3);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="cyberpunk"] .notification-warning {
    border-color: rgba(255, 230, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 230, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ==============================================
   选择框下拉 - 深色霓虹
   ============================================== */

[data-theme="cyberpunk"] select option {
    background: #12122a;
    color: #e0e6ff;
}

/* ==============================================
   代码/文本高亮
   ============================================== */

[data-theme="cyberpunk"] code,
[data-theme="cyberpunk"] .code-block {
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.1);
    color: #00e5ff;
}

/* ==============================================
   表格式数据区域
   ============================================== */

[data-theme="cyberpunk"] table th {
    background: rgba(0, 229, 255, 0.05);
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

[data-theme="cyberpunk"] table td {
    border-bottom: 1px solid rgba(0, 229, 255, 0.05);
}

[data-theme="cyberpunk"] table tr:hover td {
    background: rgba(0, 229, 255, 0.03);
}

/* ==============================================
   暗色主题兼容 - 深色背景适配规则
   ============================================== */

[data-theme="cyberpunk"] .panel-header-divider::before {
    background: rgba(0, 229, 255, 0.08);
}

[data-theme="cyberpunk"] .resize-handle {
    background: rgba(0, 229, 255, 0.1);
}

[data-theme="cyberpunk"] .config-notice {
    background: rgba(0, 229, 255, 0.08);
    border-left-color: rgba(0, 229, 255, 0.4);
}

[data-theme="cyberpunk"] .notice-icon {
    stroke: var(--primary-color);
}

[data-theme="cyberpunk"] .slider-container input[type="range"] {
    background: rgba(0, 229, 255, 0.08);
}

[data-theme="cyberpunk"] .slider-container input[type="range"]:hover {
    background: rgba(0, 229, 255, 0.12);
}

[data-theme="cyberpunk"] .btn-generate {
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="cyberpunk"] .btn-generate:hover {
    box-shadow: var(--neon-glow-strong);
}

[data-theme="cyberpunk"] .spinner {
    border-color: rgba(0, 229, 255, 0.1);
    border-top-color: var(--primary-color);
}

[data-theme="cyberpunk"] .preview-placeholder {
    background: transparent;
}