/* ========================================
   洋芋哥的小窝 - 前端样式
   资深设计师优化版本
   ======================================== */

/* 自定义旋转135度 - 用于左侧导航展开/收缩图标 */
.fa-rotate-135 {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
}

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

/* 主题CSS变量 */
:root {
    --primary: #228566;
    --primary-hover: #1f785c;
    --primary-light: rgba(34, 133, 102, 0.1);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#2a393c) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #2eb48a;
    --nav-text: #b4c8ce;
    --nav-arrow: #8ea3a0;
    --bg: #17191a;
    --bg-secondary: #1a2224;
    --bg-card: #1e2628;
    --bg-hover: #2a393c;
    --border: #2a393c;
    --text: #a5bcc2;
    --text-light: #6d8a8f;
    --text-heading: #ffffff;
    --text-secondary: #b4c8ce;
    --text-muted: #708985;
    --danger: #e74c3c;
    --danger-hover: #c0392b;
    --success: #27ae60;
    --info: #3498db;
    --info-hover: #2980b9;
    --warning: #f0ad4e;
    --info-gradient: linear-gradient(135deg, #3498db, #2980b9);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-primary: rgba(34, 133, 102, 0.5);
    --shadow-info: rgba(52, 152, 219, 0.5);
    --gradient-primary: linear-gradient(135deg, #228566, #1f785c);
    --border-radius-card: 16px;
    --border-radius-button: 8px;
    --border-radius-input: 10px;
    --transition-speed: 0.3s;
}

/* 海洋主题 */
[data-theme="ocean"] {
    --primary: #3179c4;
    --primary-hover: #2c6db0;
    --primary-light: rgba(49, 121, 196, 0.1);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#1e4976) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #91b9e4;
    --nav-text: #aab6c6;
    --nav-arrow: #aab6c7;
    --bg: #0a1929;
    --bg-secondary: #0d2137;
    --bg-card: #132f4c;
    --bg-hover: #1e4976;
    --border: #1e4976;
    --text: #b2bac2;
    --text-light: #7b8a9a;
    --text-heading: #ffffff;
    --text-secondary: #8a9ab0;
    --text-muted: #6e829f;
    --danger: #e74c3c;
    --danger-hover: #c0392b;
    --success: #2ecc71;
    --info: #3179c4;
    --info-hover: #2c6db0;
    --warning: #f0ad4e;
    --info-gradient: linear-gradient(135deg, #3179c4, #2c6db0);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-primary: rgba(49, 121, 196, 0.5);
    --shadow-info: rgba(49, 121, 196, 0.5);
    --gradient-primary: linear-gradient(135deg, #3179c4, #2c6db0);
}

/* 日落主题 */
[data-theme="sunset"] {
    --primary: #db3b00;
    --primary-hover: #c53500;
    --primary-light: rgba(219, 59, 0, 0.1);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#5a3a2a) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #ff8f66;
    --nav-text: #c2ab93;
    --nav-arrow: #beaa96;
    --bg: #1a1410;
    --bg-secondary: #2a1f18;
    --bg-card: #3a2820;
    --bg-hover: #5a3a2a;
    --border: #5a3a2a;
    --text: #d4c4b4;
    --text-light: #a49484;
    --text-heading: #ffffff;
    --text-secondary: #c0a890;
    --text-muted: #96795d;
    --danger: #e74c3c;
    --danger-hover: #c0392b;
    --success: #27ae60;
    --info: #3498db;
    --info-hover: #2980b9;
    --warning: #f0ad4e;
    --info-gradient: linear-gradient(135deg, #3498db, #2980b9);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-primary: rgba(219, 59, 0, 0.5);
    --shadow-info: rgba(52, 152, 219, 0.5);
    --gradient-primary: linear-gradient(135deg, #db3b00, #c53500);
}

/* 紫色主题 */
[data-theme="purple"] {
    --primary: #a044f6;
    --primary-hover: #903ddd;
    --primary-light: rgba(160, 68, 246, 0.1);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#3d3555) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #c48bf9;
    --nav-text: #ac9dc3;
    --nav-arrow: #a99fbf;
    --bg: #1a1625;
    --bg-secondary: #231d33;
    --bg-card: #2d2640;
    --bg-hover: #3d3555;
    --border: #3d3555;
    --text: #c4b8d9;
    --text-light: #9488a9;
    --text-heading: #ffffff;
    --text-secondary: #a898c0;
    --text-muted: #887aa6;
    --danger: #e74c3c;
    --danger-hover: #c0392b;
    --success: #27ae60;
    --info: #3498db;
    --info-hover: #2980b9;
    --warning: #f0ad4e;
    --info-gradient: linear-gradient(135deg, #3498db, #2980b9);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-primary: rgba(160, 68, 246, 0.5);
    --shadow-info: rgba(52, 152, 219, 0.5);
    --gradient-primary: linear-gradient(135deg, #a044f6, #903ddd);
}

/* 紫罗兰主题 - 兼容旧名称 */
[data-theme="violet"] {
    --primary: #a044f6;
    --primary-hover: #903ddd;
    --primary-light: rgba(160, 68, 246, 0.1);
    --nav-icon: #c48bf9;
    --nav-text: #ac9dc3;
    --nav-arrow: #a99fbf;
    --bg: #1a1625;
    --bg-secondary: #231d33;
    --bg-card: #2d2640;
    --bg-hover: #3d3555;
    --border: #3d3555;
    --text: #c4b8d9;
    --text-light: #9488a9;
    --text-heading: #ffffff;
    --text-secondary: #a898c0;
    --text-muted: #887aa6;
    --danger: #e74c3c;
    --danger-hover: #c0392b;
    --success: #27ae60;
    --info: #3498db;
    --info-hover: #2980b9;
    --warning: #f0ad4e;
    --info-gradient: linear-gradient(135deg, #3498db, #2980b9);
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-primary: rgba(160, 68, 246, 0.5);
    --shadow-info: rgba(52, 152, 219, 0.5);
    --gradient-primary: linear-gradient(135deg, #a044f6, #903ddd);
}

/* 暗夜主题 - 星空蓝紫调 */
[data-theme="midnight"] {
    --primary: #5267f6;
    --primary-hover: #4a5ddd;
    --primary-light: rgba(82, 103, 246, 0.12);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#252538) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #7283f8;
    --nav-text: #8890b0;
    --nav-arrow: #8a8aac;
    --bg: #0d0d14;
    --bg-secondary: #12121c;
    --bg-card: #1a1a28;
    --bg-hover: #252538;
    --border: #2a2a40;
    --text: #b0b8d0;
    --text-light: #7880a0;
    --text-heading: #e0e4f0;
    --text-secondary: #8890b0;
    --text-muted: #77779e;
    --danger: #e06060;
    --danger-hover: #c04040;
    --success: #60c080;
    --info: #5267f6;
    --info-hover: #4a5ddd;
    --warning: #e0a050;
    --info-gradient: linear-gradient(135deg, #5267f6, #3a50e8);
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-primary: rgba(82, 103, 246, 0.3);
    --shadow-info: rgba(82, 103, 246, 0.3);
    --gradient-primary: linear-gradient(135deg, #5267f6, #4a5ddd);
}

/* 深夜主题 - 纯黑深邃 */
[data-theme="night"] {
    --primary: #1e90ff;
    --primary-hover: #1c86ee;
    --primary-light: rgba(30, 144, 255, 0.1);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#1a1a2e) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #4da6ff;
    --nav-text: #b8c4d4;
    --nav-arrow: #9aa8b8;
    --bg: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a24;
    --bg-hover: #1a1a2e;
    --border: #242430;
    --text: #c8d4e4;
    --text-light: #687888;
    --text-heading: #ffffff;
    --text-secondary: #a8b4c4;
    --text-muted: #586878;
    --danger: #ff4757;
    --danger-hover: #e63950;
    --success: #2ed573;
    --info: #1e90ff;
    --info-hover: #1c86ee;
    --warning: #ffa502;
    --info-gradient: linear-gradient(135deg, #1e90ff, #0077b6);
    --shadow: rgba(0, 0, 0, 0.6);
    --shadow-primary: rgba(30, 144, 255, 0.4);
    --shadow-info: rgba(30, 144, 255, 0.4);
    --gradient-primary: linear-gradient(135deg, #1e90ff, #1c86ee);
}

/* 赛博朋克主题 - 霓虹柔化版 */
[data-theme="cyber"] {
    --primary: #e70074;
    --primary-hover: #d00068;
    --primary-light: rgba(231, 0, 116, 0.12);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#1f1f38) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #ff2391;
    --nav-text: #70ddaa;
    --nav-arrow: #4c9771;
    --bg: #0a0a10;
    --bg-secondary: #0f0f18;
    --bg-card: #141425;
    --bg-hover: #1f1f38;
    --border: #2a2a48;
    --text: #a0ffd8;
    --text-light: #60cc90;
    --text-heading: #ffffff;
    --text-secondary: #70ddaa;
    --text-muted: #438664;
    --danger: #ff3060;
    --danger-hover: #dd2050;
    --success: #00ff9f;
    --info: #00ccff;
    --info-hover: #00aadd;
    --warning: #ffcc00;
    --info-gradient: linear-gradient(135deg, #00ccff, #00aadd);
    --shadow: rgba(231, 0, 116, 0.2);
    --shadow-primary: rgba(231, 0, 116, 0.5);
    --shadow-info: rgba(0, 204, 255, 0.3);
    --gradient-primary: linear-gradient(135deg, #e70074, #d00068);
}

/* 樱花主题 - 粉色浪漫 */
[data-theme="cherry"] {
    --primary: #ff6b9d;
    --primary-hover: #ff558a;
    --primary-light: rgba(255, 107, 157, 0.12);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#2d1f25) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #ff99bb;
    --nav-text: #e8c4d0;
    --nav-arrow: #d8a4b4;
    --bg: #0f0a0c;
    --bg-secondary: #1a1014;
    --bg-card: #24151a;
    --bg-hover: #2d1f25;
    --border: #3a252d;
    --text: #f0d8e0;
    --text-light: #b88898;
    --text-heading: #ffffff;
    --text-secondary: #d8b8c4;
    --text-muted: #a87888;
    --danger: #ff6b6b;
    --danger-hover: #ee5a5a;
    --success: #7bed9f;
    --info: #70a1ff;
    --info-hover: #5a91ee;
    --warning: #ffd32a;
    --info-gradient: linear-gradient(135deg, #ff6b9d, #ff558a);
    --shadow: rgba(255, 107, 157, 0.2);
    --shadow-primary: rgba(255, 107, 157, 0.5);
    --shadow-info: rgba(112, 161, 255, 0.3);
    --gradient-primary: linear-gradient(135deg, #ff6b9d, #ff558a);
}

/* 浅色主题 - 清新白 */
[data-theme="light"] {
    --primary: #20865e;
    --primary-hover: #1d7955;
    --primary-light: rgba(32, 134, 94, 0.08);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#e8ecf0) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #1d7854;
    --nav-text: #4a5f7a;
    --nav-arrow: #5c6b80;
    --bg: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e8ecf0;
    --border: #dce1e6;
    --text: #2c3e50;
    --text-light: #607085;
    --text-heading: #1a2332;
    --text-secondary: #4a5f7a;
    --text-muted: #607086;
    --danger: #dc3545;
    --danger-hover: #c82333;
    --success: #28a745;
    --info: #3b82f6;
    --info-hover: #2563eb;
    --warning: #f59e0b;
    --info-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-primary: rgba(32, 134, 94, 0.2);
    --shadow-info: rgba(59, 130, 246, 0.2);
    --gradient-primary: linear-gradient(135deg, #20865e, #1d7955);
}

/* 天空蓝主题 - 清新蓝 */
[data-theme="skyblue"] {
    --primary: #1870be;
    --primary-hover: #1568b5;
    --primary-light: rgba(24, 112, 190, 0.08);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#e3f0fa) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #176db9;
    --nav-text: #3a6b9f;
    --nav-arrow: #546f83;
    --bg: #f0f7ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e3f0fa;
    --border: #d0e3f5;
    --text: #1e3a5f;
    --text-light: #4a6a8a;
    --text-heading: #0d1b2a;
    --text-secondary: #3a6b9f;
    --text-muted: #557085;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    --info: #3b82f6;
    --info-hover: #2563eb;
    --warning: #f59e0b;
    --info-gradient: linear-gradient(135deg, #3b82f6, #2563eb);
    --shadow: rgba(33, 150, 243, 0.08);
    --shadow-primary: rgba(33, 150, 243, 0.2);
    --shadow-info: rgba(59, 130, 246, 0.2);
    --gradient-primary: linear-gradient(135deg, #1870be, #1568b5);
}

/* 玫瑰粉主题 - 温暖粉 */
[data-theme="rose"] {
    --primary: #c41a55;
    --primary-hover: #c2185b;
    --primary-light: rgba(196, 26, 85, 0.08);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#fce4ec) 背景，已全部达标 ≥4.5:1 */
    --nav-icon: #c41a55;
    --nav-text: #7a3050;
    --nav-arrow: #905568;
    --bg: #fff0f3;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #fce4ec;
    --border: #f8bbd0;
    --text: #4a1a2a;
    --text-light: #8a5060;
    --text-heading: #2a0a15;
    --text-secondary: #7a3050;
    --text-muted: #905568;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    --info: #3b82f6;
    --info-hover: #2563eb;
    --warning: #f59e0b;
    --info-gradient: linear-gradient(135deg, #e91e63, #c2185b);
    --shadow: rgba(233, 30, 99, 0.08);
    --shadow-primary: rgba(233, 30, 99, 0.2);
    --shadow-info: rgba(233, 30, 99, 0.15);
    --gradient-primary: linear-gradient(135deg, #c41a55, #c2185b);
}

/* 薰衣草主题 - 优雅紫 */
[data-theme="lavender"] {
    --primary: #7c4dff;
    --primary-hover: #651fff;
    --primary-light: rgba(124, 77, 255, 0.08);
    /* 左侧导航专用颜色 - 针对 --bg-hover(#ede5ff) 背景优化对比度 ≥4.5:1 */
    --nav-icon: #6f3bff;
    --nav-text: #5a4a7a;
    --nav-arrow: #6e5e84;
    --bg: #f5f0ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #ede5ff;
    --border: #d5c8f5;
    --text: #2a1f4e;
    --text-light: #6a5a8a;
    --text-heading: #1a1030;
    --text-secondary: #5a4a7a;
    --text-muted: #6e5e84;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    --info: #3b82f6;
    --info-hover: #2563eb;
    --warning: #f59e0b;
    --info-gradient: linear-gradient(135deg, #7c4dff, #651fff);
    --shadow: rgba(124, 77, 255, 0.08);
    --shadow-primary: rgba(124, 77, 255, 0.2);
    --shadow-info: rgba(124, 77, 255, 0.15);
    --gradient-primary: linear-gradient(135deg, #7c4dff, #651fff);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    overflow-x: hidden;
    -webkit-transition: background 0.3s ease, color 0.3s ease;
    transition: background 0.3s ease, color 0.3s ease;
}

.fa {
    font-family: "FontAwesome" !important;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow);
    padding: 8px 15px;
    -webkit-transition: background 0.3s ease, box-shadow 0.3s ease;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.top-user {
    float: right;
    position: relative;
}

.top-user-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-align: center;
    background: var(--gradient-primary);
    color: var(--text-heading);
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--shadow-primary);
}

.top-user-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--shadow-primary);
}

.drop-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--shadow);
    list-style: none;
    padding: 8px 0;
    min-width: 180px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.drop-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 15px;
}

.top-user:hover .drop-menu {
    display: block;
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drop-menu li {
    padding: 0;
}

.drop-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}

.drop-menu li a i {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
}

.drop-menu li a span {
    flex: 1;
    text-align: left;
}

.drop-menu li a:hover {
    background: var(--bg-hover);
    color: var(--primary);
    padding-left: 20px;
}

.drop-menu li.active a {
    background: var(--primary-light);
    color: var(--primary);
}

.drop-menu li .tips {
    margin-left: 4px;
    font-size: 12px;
}

.text-danger {
    color: var(--primary);
}

.pull-right {
    float: right;
}

.logo-bg {
    float: left;
    display: flex;
    align-items: center;
    gap: 12px;
}

.expand {
    font-size: 18px;
    color: var(--primary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.expand:hover {
    background: var(--primary-light);
    color: var(--primary-hover);
}

.logo img {
    height: 30px;
    border-radius: 8px;
    animation: spin 10s linear infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--primary);
    box-shadow: 0 0 12px var(--shadow-primary), 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 4px;
    background: rgba(255, 255, 255, 0.95);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.95) 100%);
}

.logo img:hover {
    transform: rotate(360deg);
}

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

.top-menu {
    float: left;
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-menu li {
    display: inline-block;
    margin-right: 10px;
}

.top-menu li a {
    display: inline-block;
    padding: 6px 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: all 0.2s;
}

.top-menu li a:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

.top-menu li.active a {
    background: var(--primary);
    color: var(--text-heading);
}

.top-menu li a .label {
    background: var(--danger);
    color: var(--text-heading);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
}

.fa-heart {
    color: var(--danger);
    font-size: 18px;
    margin-left: 10px;
    text-decoration: none;
}

.main {
    display: flex;
    margin-top: 60px;
    min-height: calc(100vh - 60px);
}

.left-side {
    width: 200px;
    background: var(--bg-hover);
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    z-index: 999;
    box-shadow: 2px 0 10px var(--shadow);
    -webkit-transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.left-side.collapsed {
    width: 0;
    overflow: hidden;
}

.right-side.expanded {
    margin-left: 0;
}

/* 三横杠点击后隐藏左侧边栏 */
body.hide-side .left-side {
    width: 0;
    overflow: hidden;
}

body.hide-side .right-side {
    margin-left: 0;
}

.expand {
    cursor: pointer;
    font-size: 20px;
    color: var(--text-heading);
    margin-right: 10px;
    transition: transform 0.2s;
}

.side-content {
    padding: 15px 0;
}

.left-nav {
    list-style: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* 自定义滚动条样式 */
.left-nav::-webkit-scrollbar {
    width: 4px;
}

.left-nav::-webkit-scrollbar-track {
    background: transparent;
}

.left-nav::-webkit-scrollbar-thumb {
    background: var(--nav-icon, var(--primary));
    border-radius: 2px;
}

.left-nav li {
    position: relative;
}

.left-nav li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    color: var(--nav-icon, var(--primary));
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    white-space: nowrap;
    height: 48px;
    width: auto;
    position: relative;
    z-index: 1;
}

.left-nav li a:hover {
    background: var(--bg-hover);
    color: var(--nav-icon, var(--primary));
}

.left-nav li a .icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

.left-nav li a .icon-wrapper i {
    font-size: 14px;
    color: var(--nav-icon, var(--primary));
    line-height: 1;
    margin-left: 0;
}

.left-nav li a .icon-wrapper i.fa-bookmark-o {
    margin-right: 11px;
}

.left-nav li a i.fa-bookmark-o {
    margin-left: 8px !important;
    margin-right: 7px !important;
}

.left-nav li a .nav-text {
    margin-left: 8px;
    color: var(--nav-text, var(--text-secondary));
    font-size: 13px;
}

.left-nav li .open {
    position: absolute;
    right: 15px;
    top: 18px;
    font-size: 12px;
    color: var(--nav-arrow, var(--text-muted));
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    transition: transform 0.2s;
}

.left-nav li .open:hover {
    color: var(--nav-icon, var(--primary));
}

.left-nav li ul {
    list-style: none;
    background: var(--bg-hover);
    display: none;
    padding: 0;
    margin: 0;
}

.left-nav li ul li {
    display: block;
    width: 100%;
}

/* 子分类标题样式 - 区分实际内容 */
.left-nav li ul li.sub-category-title {
    background: var(--bg-hover);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 5px 0;
}

.left-nav li ul li.sub-category-title a {
    color: var(--primary);
    font-weight: bold;
    font-size: 12px;
    height: 32px;
    padding: 0 12px 0 30px;
    background: transparent;
}

.left-nav li ul li.sub-category-title a:hover {
    background: var(--bg-hover);
}

.left-nav li ul li a {
    display: flex;
    align-items: center;
    padding: 0 12px 0 45px;
    font-size: 13px;
    height: 40px;
    width: 100%;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.left-nav li ul li a i {
    margin-right: 8px;
    flex-shrink: 0;
}

.left-nav li ul li a .label.proxy-icon {
    background: var(--info-gradient) !important;
    color: var(--text-heading);
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: bold;
    animation: pulse 2s infinite;
    box-shadow: 0 0 6px var(--shadow-info);
}

.right-side {
    flex: 1;
    margin-left: 200px;
    padding: 20px;
}

.box-main {
    max-width: 1200px;
    margin: 0 auto;
}

.s-search {
    background: var(--bg-hover);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 15px var(--shadow);
    margin-bottom: 20px;
}

.hide-type-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 5px;
    padding-left: 12px;
}

.search-category {
    padding: 6px 12px;
    border: none;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-hover);
    cursor: pointer;
    outline: none;
    min-width: 60px;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
}

.search-category option {
    background: var(--bg-hover);
    color: var(--text);
}

.search-category:hover {
    text-decoration: underline;
}

.search-category:focus {
    text-decoration: underline;
}

.s-type {
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s;
    background: var(--bg-hover);
}

.s-type:hover {
    background: var(--border);
}

.s-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.s-type-list label {
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-hover);
    color: var(--text);
    transition: all 0.2s;
}

.s-type-list label:hover {
    background: var(--border);
    color: var(--primary);
}

.search-group {
    display: none;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
    align-items: center;
    flex: 1;
    min-width: 0;
}

.search-group.s-current {
    display: inline-flex;
}

.search-group .type-text {
    display: inline-block;
    font-size: 13px;
    color: var(--primary);
    font-weight: bold;
    margin-right: 12px;
}

.search-type {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-type li {
    display: inline-block;
}

.search-type label {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text);
    transition: all 0.2s;
    display: inline-block;
}

.search-type label:hover {
    background: var(--border);
    color: var(--primary);
    border-color: var(--primary);
}

.search-type input[type="radio"] {
    display: none;
}

.search-type input[type="radio"]:checked + label {
    background: var(--primary);
    color: var(--text-heading);
    border-color: var(--primary);
}

/* 选中状态下覆盖品牌色，确保文字在主色背景上清晰可读 */
.search-type input[type="radio"]:checked + label span[class^="brand-"] {
    color: var(--text-heading) !important;
}

/* ========================================
   搜索引擎品牌色 CSS 类
   替代 inline style，支持主题切换自定义
   ======================================== */

/* --- 通用搜索引擎 --- */
.brand-baidu { color: #6b8aff; }
.brand-360 { color: #EC4989; }
.brand-sogou { color: #00D4FF; }
.brand-bing { color: #5BA0E6; }
.brand-bing-img { color: #00B4D8; }
.brand-yahoo { color: #9B6FFF; }
.brand-douyin { color: #999999; }

/* --- Google 多色字母 --- */
.brand-google-g { color: #5B9AFF; }
.brand-google-o1 { color: #F3442C; }
.brand-google-o2 { color: #FFC300; }
.brand-google-g2 { color: #5BA0FF; }
.brand-google-l { color: #3CCF5E; }
.brand-google-e { color: #F54231; }

/* --- 图片素材 --- */
.brand-pexels { color: #10C9A0; }
.brand-unsplash { color: #ffffff; }
.brand-baidu-img { color: #6b8aff; }
.brand-google-img { color: #5B9AFF; }
.brand-pixabay { color: #50D06A; }
.brand-zcool { color: #FFB300; }
.brand-iconfinder { color: #FF7043; }
.brand-nounproject { color: #C06AD0; }
.brand-flaticon { color: #8B83FF; }
.brand-soogif { color: #26C6DA; }
.brand-ppt { color: #FF5252; }

/* --- 设计平台 --- */
.brand-dribbble { color: #EA4C89; }
.brand-behance { color: #3D8BFF; }
.brand-pinterest { color: #E60023; }
.brand-awwwards { color: #FF6B6B; }
.brand-deviantart { color: #22FFB0; }
.brand-cssdesign { color: #22DD90; }

/* --- 音乐平台 --- */
.brand-netease { color: #FF5252; }
.brand-qqmusic { color: #26C6DA; }
.brand-kugou { color: #22E060; }
.brand-spotify { color: #2BD066; }
.brand-soundcloud { color: #FF7043; }
.brand-baidu-music { color: #6b8aff; }

/* --- 影视平台 --- */
.brand-bilibili { color: #FFA7C4; }
.brand-youku { color: #26C6DA; }
.brand-iqiyi { color: #22DD22; }
.brand-qqvideo { color: #FF6600; }
.brand-youtube { color: #FF0000; }

/* --- 购物平台 --- */
.brand-taobao { color: #FF5722; }
.brand-tmall { color: #E91E63; }
.brand-jd { color: #E04040; }
.brand-pinduoduo { color: #F2140C; }
.brand-amazon { color: #FF9900; }
.brand-dangdang { color: #F44336; }
.brand-dianping { color: #FFA726; }

/* --- 旅游平台 --- */
.brand-ctrip { color: #00B6BF; }
.brand-tuniu { color: #FF6600; }
.brand-qunar { color: #00BCD4; }
.brand-lvmama { color: #FF9900; }
.brand-meituan { color: #00BCD4; }
.brand-airbnb { color: #FF5A5F; }
.brand-googlemap { color: #5B9AFF; }

/* --- 社区平台 --- */
.brand-zhihu { color: #42A5F5; }
.brand-douban { color: #60C068; }
.brand-weibo { color: #E91E63; }
.brand-tieba { color: #6b8aff; }
.brand-juejin { color: #3395FF; }
.brand-csdn { color: #F44336; }
.brand-stackoverflow { color: #F48024; }

/* --- 工具下载 --- */
.brand-pc6 { color: #42A5F5; }
.brand-cr173 { color: #C06AD0; }
.brand-softpedia { color: #FFA726; }
.brand-sourceforge { color: #FF6600; }
.brand-github { color: #8B83FF; }
.brand-gitee { color: #E03040; }
.brand-hao123 { color: #90D050; }

.s-input {
    display: flex;
    margin-top: 10px;
}

.search-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid var(--border);
    border-radius: 8px 0 0 8px;
    font-size: 15px;
    outline: none;
    background: var(--bg-card);
    color: var(--text);
    transition: border-color 0.2s;
}

.search-input:focus {
    border-color: var(--primary);
}

.search-input::placeholder {
    color: var(--text-light);
}

.search-btn {
    background: var(--primary);
    color: var(--text-heading);
    border: none;
    padding: 0 25px;
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover {
    background: var(--primary-hover);
}

#content-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

/* 大分类标题样式 */
.section-header {
    grid-column: 1 / -1;
    margin: 20px 0 10px 0;
    padding: 10px 15px;
    background: var(--gradient-primary);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}

.section-header:first-child {
    margin-top: 0;
}

.section-header h2 {
    color: var(--text-heading);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-header h2 i {
    font-size: 20px;
}

.section-content {
    display: contents;
}

/* 单分类时自适应页面宽度 */
.section-content.single-category {
    display: grid;
    grid-template-columns: 100%;
}

.section-content.single-category .list {
    min-width: 100%;
}

/* 单分类时链接样式优化 - 更大更舒适 */
.section-content.single-category .list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 0;
}

.section-content.single-category .list ul li {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 200px;
}

.section-content.single-category .list ul li a {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--primary-light);
}

.section-content.single-category .list ul li a:hover {
    background: var(--primary-light);
    opacity: 0.8;
}

.section-content.single-category .list ul li a .icon {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
}

.section-content.single-category .list ul li a .text {
    font-size: 14px;
}

.section-content.single-category .list ul li a .label {
    font-size: 10px;
    padding: 2px 5px;
}

.list {
    background: var(--bg-hover);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--shadow);
}

.list-title {
    background: var(--gradient-primary);
    padding: 8px 12px;
    border-bottom: 2px solid var(--primary);
}

.list-title h3 {
    color: var(--text-heading);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.list-title h3 i {
    margin-right: 6px;
}

.list ul {
    list-style: none;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.list ul li {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}

.list ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.list ul li a .icon {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: var(--primary);
    color: var(--text-heading);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    transition: all 0.2s;
}

.list ul li:hover a .icon {
    transform: scale(1.1);
    background: var(--primary-hover);
}

.list ul li a .text {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.list ul li:hover {
    background: var(--bg-hover);
}

.list ul li a .label {
    background: var(--danger);
    color: var(--text-heading);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
}

.list ul li a .label.proxy-icon {
    background: var(--info-gradient);
    color: var(--text-heading);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--shadow-info);
}

.list ul li.hidden-link {
    display: none !important;
}

.more-link {
    display: flex !important;
    grid-column: 1 / -1;
    justify-content: center;
    text-align: center;
    padding: 8px !important;
}

.more-link a {
    color: var(--primary) !important;
    font-size: 13px;
    font-weight: bold;
}

.more-link:hover {
    background: transparent !important;
}

.more-link:hover a {
    text-decoration: underline;
}

.footer {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-light);
    font-size: 13px;
    background: var(--bg-secondary);
    margin-top: 40px;
}

.footer-inner {
    max-width: calc(1200px - 200px);
    margin: 0 0 0 200px;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.footer-col {
    flex: 1;
    min-width: 200px;
    text-align: left;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.footer-note {
    color: var(--text-secondary);
    font-size: 12px;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.footer-logo img {
    border-radius: 8px;
}

.footer-logo-text h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    color: var(--primary);
}

.footer-logo-text p {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
}

.footer-copyright {
    font-size: 12px;
    color: var(--text-muted);
}

.footer-copyright p {
    margin: 5px 0;
}

.text-success {
    color: var(--primary);
}

.text-warning {
    color: var(--warning);
}

.footer a {
    color: var(--primary);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.sync-tip {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--text-heading);
    font-size: 14px;
    z-index: 99999;
    animation: slideIn 0.3s ease;
}

#category-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

#category-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

#category-modal .modal-content {
    position: relative;
    background: var(--bg-hover);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px var(--shadow);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#category-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--gradient-primary);
    border-bottom: 2px solid var(--primary);
}

#category-modal .modal-header h3 {
    color: var(--text-heading);
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

#category-modal .modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

#category-modal .modal-close:hover {
    background: var(--bg-hover);
    color: var(--primary);
}

#category-modal .modal-content ul {
    list-style: none;
    padding: 12px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: calc(80vh - 70px);
    overflow-y: auto;
}

#category-modal .modal-content ul li {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 0;
    overflow: hidden;
}

#category-modal .modal-content ul li:hover {
    background: var(--bg-hover);
}

#category-modal .modal-content ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

#category-modal .modal-content ul li a .icon {
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: var(--primary);
    color: var(--text-heading);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

#category-modal .modal-content ul li a .text {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sync-tip-success {
    background: var(--success);
}

.sync-tip-info {
    background: var(--info);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--shadow-info);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 15px var(--shadow-info);
    }
}

/* 滚动按钮样式 */
.scroll-btn {
    position: fixed;
    right: 20px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 9998;
    transition: all 0.3s ease;
    font-size: 16px;
    box-shadow: 0 2px 10px var(--shadow);
}

.scroll-btn:hover {
    background: var(--primary);
    color: var(--text-heading);
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--shadow-primary);
}

.scroll-btn i {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.scroll-top {
    bottom: 80px;
}

.scroll-bottom {
    bottom: 30px;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .left-side {
        width: 180px;
    }
    
    .right-side {
        margin-left: 180px;
    }
    
    .footer-inner {
        margin-left: 180px;
        max-width: calc(100% - 180px);
    }
    
    #content-blocks {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .left-side {
        width: 200px;
        position: fixed;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    
    .left-side.show {
        transform: translateX(0);
    }
    
    .right-side {
        margin-left: 0;
        padding: 10px;
    }
    
    body.hide-side .left-side {
        transform: translateX(-100%);
    }
    
    body.hide-side .right-side {
        margin-left: 0;
    }
    
    .footer-inner {
        margin-left: 0;
        max-width: 100%;
    }
    
    #content-blocks {
        grid-template-columns: 1fr;
    }
    
    .header-content {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .logo-bg {
        float: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    
    .top-menu {
        float: none;
        margin: 0;
        gap: 4px;
    }
    
    .top-menu li span {
        display: none;
    }
    
    .top-menu li a {
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    
    .top-menu li a i {
        text-indent: 0;
        font-size: 14px;
        color: var(--text);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    .site-title {
        font-size: 15px;
    }
    
    .logo img {
        height: 30px;
    }
    
    .footer-row {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-right {
        text-align: center;
    }
    
    .footer-logo {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 6px 8px;
    }
    
    .header-content {
        gap: 8px;
    }
    
    .logo-bg {
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    .logo img {
        height: 26px;
    }
    
    .header-right {
        gap: 8px;
        flex-shrink: 0;
    }
    
    .site-title {
        display: none;
    }
    
    .search-box {
        flex: 1;
        min-width: 0;
    }
    
    .search-input {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .search-btn {
        padding: 0 12px;
        font-size: 12px;
    }
    
    .top-menu {
        gap: 3px;
    }
    
    .top-menu li span {
        display: none;
    }
    
    .top-menu li a {
        text-indent: -9999px;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    
    .top-menu li a i {
        text-indent: 0;
        font-size: 13px;
        color: inherit;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    #content-blocks {
        padding: 10px;
    }
}

@media (max-width: 320px) {
    .header {
        padding: 5px 6px;
    }
    
    .logo img {
        height: 22px;
    }
    
    .logo-text {
        font-size: 11px;
    }
    
    .header-right {
        gap: 6px;
    }
    
    .search-input {
        font-size: 11px;
        padding: 6px 8px;
    }
    
    .search-btn {
        padding: 0 10px;
        font-size: 11px;
    }
    
    .top-menu {
        gap: 2px;
    }
    
    .top-menu li a {
        width: 20px;
        height: 20px;
    }
    
    .top-menu li a i {
        font-size: 12px;
    }
    
    #content-blocks {
        padding: 8px;
        gap: 8px;
    }
    
    .card {
        padding: 8px;
    }
    
    .card h3 {
        font-size: 12px;
    }
    
    .card .link {
        font-size: 10px;
        padding: 2px 5px;
    }
}

/* ===== 无障碍：减弱动画 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}