/* --- 基础变量 --- */
        :root {
            --color-beige: #C8B695;
            --color-red: #BB3030;
            --color-yellow: #F0C65F;
            --color-olive: #889C5C;
            --color-teal: #7FB6A3;
            --color-purple: #5C5083;
            
            --bg-main: #f7f8fa;
            --text-main: #333;
            --sidebar-bg: #ffffff;
        }

        /* --- 全局重置 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            display: flex;
            min-height: 100vh;
        }
        a { text-decoration: none; color: inherit; }

        /* --- SVG 图标样式 --- */
        .icon-svg { width: 24px; height: 24px; fill: currentColor; }
        .nav-link .icon-svg { margin-right: 10px; width: 20px; height: 20px; }

        /* --- 侧边栏样式 --- */
        .sidebar {
            width: 260px;
            background-color: var(--sidebar-bg);
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            padding: 20px;
            flex-shrink: 0;
        }
        .user-info { margin-bottom: 30px; }
        .user-name { font-size: 18px; font-weight: bold; color: var(--color-purple); margin-bottom: 5px; }
        .user-status { font-size: 12px; color: #999; }
        
        .nav-menu { list-style: none; }
        .nav-item { margin-bottom: 10px; }
        .nav-link {
            display: flex; align-items: center; padding: 12px 15px;
            border-radius: 12px; font-size: 14px; color: #555; transition: all 0.3s;
            cursor: pointer; /* 增加手型光标 */
        }
        .nav-link.active {
            background-color: var(--color-teal); color: #fff;
            box-shadow: 0 4px 12px rgba(127, 182, 163, 0.4);
        }
        .nav-link:hover:not(.active) { background-color: #f0f2f5; color: var(--color-teal); }
        .badge { margin-left: auto; font-size: 12px; opacity: 0.8; }

        /* --- 主内容区样式 --- */
        .main-content { flex: 1; padding: 30px; overflow-y: auto; }

        .banner {
            background: linear-gradient(90deg, var(--color-red) 0%, var(--color-yellow) 30%, var(--color-olive) 60%, var(--color-teal) 100%);
            border-radius: 16px; padding: 40px 30px; color: white;
            margin-bottom: 40px; display: flex; flex-direction: column;
            justify-content: center; align-items: center; text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0, 0.08);
        }
        .banner h2 { font-size: 24px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .banner p { font-size: 14px; opacity: 0.95; }

        .section-header { display: flex; align-items: baseline; margin-bottom: 20px; padding-left: 5px; }
        .section-title { font-size: 18px; font-weight: bold; margin-right: 10px; color: var(--color-purple); }
        .section-subtitle { font-size: 14px; color: #888; border-left: 2px solid #ddd; padding-left: 10px; }

        .tools-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
        }

        .tool-card {
            background: #fff; border: 1px solid #eaebed; border-radius: 12px;
            padding: 20px; display: flex; align-items: center;
            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; cursor: pointer;
        }
        .tool-card:hover {
            transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.07); border-color: var(--color-teal);
        }
        
        /* 简单的淡入动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .tool-card { animation: fadeIn 0.4s ease-out; }
        
        /* 隐藏元素的类 */
        .hidden { display: none !important; }

        .tool-icon {
            width: 50px; height: 50px; border-radius: 12px; display: flex;
            align-items: center; justify-content: center; margin-right: 15px;
            flex-shrink: 0; background-color: #f8f9fa;
        }
        .tool-icon .icon-svg { width: 28px; height: 28px; }

        /* 图标特定颜色 */
        .icon-json { color: var(--color-yellow); }
        .icon-ps { color: var(--color-teal); }
        .icon-calc { color: var(--color-red); }
        .icon-cut { color: var(--color-purple); }
        .icon-qr { color: var(--color-olive); }
        .icon-more { color: var(--color-beige); }
        .icon-art { color: var(--color-purple); }

        .tool-info { overflow: hidden; }
        .tool-name { font-size: 16px; font-weight: bold; margin-bottom: 6px; color: #333; }
        .tool-desc { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        @media (max-width: 768px) {
            body { flex-direction: column; }
            .sidebar { width: 100%; padding: 15px; border-right: none; border-bottom: 1px solid #e0e0e0; }
            .nav-menu { display: flex; overflow-x: auto; padding-bottom: 5px; gap: 10px; }
            .nav-item { margin-bottom: 0; flex-shrink: 0; }
            .banner { padding: 25px 20px; }
            .main-content { padding: 20px; }
        }