/* ================================================================
   Toolbox �� �ִ����ߵ���վ ��ʽϵͳ
   ================================================================ */

/* ���� CSS ��������ɫ���� (Ĭ��) ���� */
:root {
    --bg-root: #0a0a10;
    --bg-primary: #0f0f1a;
    --bg-secondary: #151525;
    --bg-tertiary: #1a1a30;
    --bg-glass: rgba(255,255,255,0.03);
    --bg-glass-hover: rgba(255,255,255,0.06);
    --text-primary: #e8e8f0;
    --text-secondary: #9898b0;
    --text-muted: #585870;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --border-active: rgba(255,255,255,0.2);
    --accent: #6366f1;
    --accent-hover: #818cf8;
    --accent-glow: rgba(99,102,241,0.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(99,102,241,0.15);
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
    --font-sans: 'Segoe UI',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
    --font-mono: 'Cascadia Code','Fira Code','JetBrains Mono','Consolas',monospace;
    --gap-xs: 6px; --gap-sm: 10px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 36px;
    --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease;
    --header-h: 64px; --sidebar-w: 320px; --content-max-w: 1400px;
    --cat-video: #e74c3c; --cat-anime: #ff6b9d; --cat-music: #8e44ad;
    --cat-book: #2ecc71; --cat-game: #f39c12; --cat-fun: #3498db;
    --cat-toolbox: #1abc9c; --cat-software: #95a5a6; --cat-devtools: #6366f1; --cat-hardware: #e67e22;
    scrollbar-color: rgba(255,255,255,0.1) transparent; scrollbar-width: thin; color-scheme: dark;
}

/* ���� CSS ������dzɫ���� ���� */
[data-theme="light"] {
    --bg-root: #f3f4f6; --bg-primary: #f8f9fb; --bg-secondary: #ffffff;
    --bg-tertiary: #f0f1f5; --bg-glass: rgba(255,255,255,0.7); --bg-glass-hover: rgba(255,255,255,0.9);
    --text-primary: #1a1a2e; --text-secondary: #5c5c78; --text-muted: #a0a0b8;
    --border: rgba(0,0,0,0.07); --border-hover: rgba(0,0,0,0.12); --border-active: rgba(0,0,0,0.2);
    --accent: #4f46e5; --accent-hover: #6366f1; --accent-glow: rgba(79,70,229,0.15);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1); --shadow-glow: 0 0 20px rgba(79,70,229,0.08);
    scrollbar-color: rgba(0,0,0,0.15) transparent; color-scheme: light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text-primary);background:var(--bg-root);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--border-active)}

/* ==================== Header ==================== */
.header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(10,10,16,0.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);transition:background var(--transition-normal),border-color var(--transition-normal)}
[data-theme="light"] .header{background:rgba(248,249,251,0.85)}
.header-inner{max-width:var(--content-max-w);margin:0 auto;padding:0 var(--gap-lg);height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md)}
.logo{display:flex;align-items:center;gap:var(--gap-sm);font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;white-space:nowrap;color:var(--text-primary);flex-shrink:0}
.logo-icon{width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;box-shadow:0 2px 10px var(--accent-glow)}

/* Search */
.search-area{flex:1;max-width:520px;display:flex;align-items:center;gap:0}
.search-box{flex:1;display:flex;align-items:center;gap:var(--gap-sm);padding:8px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);transition:all var(--transition-normal)}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-secondary)}
.search-box .search-icon{color:var(--text-muted);font-size:1.1rem;flex-shrink:0}
.search-box input{flex:1;border:none;background:none;outline:none;color:var(--text-primary);font-size:0.95rem;min-width:0}
.search-box input::placeholder{color:var(--text-muted)}
.search-engine{display:flex;align-items:center;gap:2px}
.engine-btn{padding:6px 10px;font-size:0.8rem;border-radius:var(--radius-sm);color:var(--text-muted);transition:all var(--transition-fast);white-space:nowrap}
.engine-btn:hover,.engine-btn.active{color:var(--accent);background:var(--accent-glow)}

/* Theme toggle */
.header-actions{display:flex;align-items:center;gap:var(--gap-xs);flex-shrink:0}
.theme-toggle{display:flex;align-items:center;gap:2px;padding:4px;background:var(--bg-tertiary);border-radius:var(--radius-full);border:1px solid var(--border)}
.theme-btn{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--text-muted);transition:all var(--transition-fast)}
.theme-btn:hover{color:var(--text-primary)}
.theme-btn.active{background:var(--bg-secondary);color:var(--accent);box-shadow:var(--shadow-sm)}

/* ==================== Main Layout ==================== */
.main-container{max-width:var(--content-max-w);margin:0 auto;padding:var(--gap-lg);display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--gap-lg);align-items:start}

/* Nav bar */
.nav-bar{grid-column:1/-1;display:flex;gap:var(--gap-xs);padding:4px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-bar::-webkit-scrollbar{display:none}
.nav-link{flex-shrink:0;padding:8px 18px;font-size:0.9rem;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap}
.nav-link:hover{color:var(--text-primary)}
.nav-link.active{color:#fff;background:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}

/* Content */
.content{min-width:0}
.category-section{margin-bottom:var(--gap-xl);scroll-margin-top:calc(var(--header-h) + 20px)}
.category-header{display:flex;align-items:center;gap:var(--gap-sm);margin-bottom:var(--gap-md);padding-bottom:var(--gap-sm);border-bottom:1px solid var(--border)}
.category-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.category-title{font-size:1.25rem;font-weight:700;color:var(--text-primary)}
.category-count{font-size:0.8rem;color:var(--text-muted);background:var(--bg-tertiary);padding:2px 10px;border-radius:var(--radius-full);margin-left:auto}

/* Tool grid */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap-sm)}
.tool-card{display:flex;align-items:center;gap:var(--gap-sm);padding:14px 16px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-md);transition:all var(--transition-normal);cursor:pointer;position:relative;overflow:hidden;user-select:none}
.tool-card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity var(--transition-normal);z-index:0;pointer-events:none}
.tool-card:hover{transform:translateY(-2px);border-color:var(--border-hover);box-shadow:var(--shadow-md);background:var(--bg-glass-hover)}
.tool-card:hover::before{opacity:0.5}
.tool-card:active{transform:translateY(0)}
.card-icon{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;position:relative;z-index:1;transition:all var(--transition-normal)}
.tool-card:hover .card-icon{transform:scale(1.1)}
.card-body{flex:1;min-width:0;position:relative;z-index:1}
.card-name{font-size:0.9rem;font-weight:600;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{font-size:0.78rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-fav{width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:0.9rem;color:var(--text-muted);transition:all var(--transition-fast);position:relative;z-index:1;flex-shrink:0}
.card-fav:hover{color:#f43f5e}
.card-fav.favorited{color:#f43f5e}
.tool-card .card-fav{opacity:0;transform:scale(0.8)}
.tool-card:hover .card-fav{opacity:1;transform:scale(1)}
@media(hover:none){.tool-card .card-fav{opacity:1;transform:scale(1)}}

mark{background:rgba(99,102,241,0.3);color:inherit;border-radius:2px;padding:0 2px}
.empty-state{grid-column:1/-1;text-align:center;padding:var(--gap-xl) var(--gap-lg);color:var(--text-muted)}
.empty-state-icon{font-size:3rem;margin-bottom:var(--gap-sm)}
.empty-state-text{font-size:1rem}

/* ==================== Sidebar ==================== */
.sidebar{position:sticky;top:calc(var(--header-h) + var(--gap-lg));display:flex;flex-direction:column;gap:var(--gap-md)}
.sidebar-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--gap-md);transition:border-color var(--transition-normal)}
.sidebar-card:hover{border-color:var(--border-hover)}
.sidebar-title{font-size:0.85rem;font-weight:700;color:var(--text-secondary);margin-bottom:var(--gap-sm);display:flex;align-items:center;gap:var(--gap-xs);text-transform:uppercase;letter-spacing:0.04em}

.cat-nav-list{display:flex;flex-direction:column;gap:2px}
.cat-nav-item{display:flex;align-items:center;gap:var(--gap-sm);padding:8px 12px;border-radius:var(--radius-sm);font-size:0.88rem;color:var(--text-secondary);transition:all var(--transition-fast)}
.cat-nav-item:hover{background:var(--bg-glass);color:var(--text-primary)}
.cat-nav-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}
.cat-nav-name{flex:1}
.cat-nav-count{font-size:0.75rem;color:var(--text-muted);background:var(--bg-tertiary);padding:1px 8px;border-radius:var(--radius-full)}

.fav-list{display:flex;flex-direction:column}
.fav-item{display:flex;align-items:center;gap:var(--gap-sm);padding:6px 8px;border-radius:var(--radius-sm);font-size:0.85rem;color:var(--text-secondary);transition:all var(--transition-fast)}
.fav-item:hover{background:var(--bg-glass);color:var(--text-primary)}
.fav-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav-item-remove{width:22px;height:22px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:0.7rem;color:var(--text-muted);transition:all var(--transition-fast);opacity:0}
.fav-item:hover .fav-item-remove{opacity:1}
.fav-item-remove:hover{color:#f43f5e;background:rgba(244,63,94,0.1)}
.fav-empty{font-size:0.82rem;color:var(--text-muted);text-align:center;padding:var(--gap-sm) 0}

.recent-item{display:flex;align-items:center;gap:var(--gap-sm);padding:5px 8px;border-radius:var(--radius-sm);font-size:0.82rem;color:var(--text-secondary);transition:all var(--transition-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-item:hover{background:var(--bg-glass);color:var(--text-primary)}
.recent-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--text-muted);flex-shrink:0}

.weather-main{display:flex;align-items:center;gap:var(--gap-md);margin-bottom:var(--gap-sm)}
.weather-icon{font-size:2.6rem}
.weather-temp{font-size:2rem;font-weight:700}
.weather-info{font-size:0.82rem;color:var(--text-secondary)}
.weather-detail{display:flex;gap:var(--gap-md);font-size:0.78rem;color:var(--text-muted);padding-top:var(--gap-sm);border-top:1px solid var(--border)}

.calendar{text-align:center}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gap-sm);font-size:0.88rem;font-weight:600}
.calendar-header button{width:26px;height:26px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all var(--transition-fast)}
.calendar-header button:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendar-weekdays span{font-size:0.7rem;color:var(--text-muted);padding:4px 0}
.calendar-days span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:0.8rem;border-radius:var(--radius-full);color:var(--text-secondary);transition:all var(--transition-fast)}
.calendar-days span:hover{background:var(--bg-glass)}
.calendar-days span.today{background:var(--accent);color:#fff;font-weight:600}
.calendar-days span.other-month{color:var(--text-muted);opacity:0.4}

.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--gap-xs)}
.tag-item{padding:4px 12px;font-size:0.78rem;border-radius:var(--radius-full);background:var(--bg-glass);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:all var(--transition-fast)}
.tag-item:hover{background:var(--accent-glow);border-color:var(--accent);color:var(--accent-hover)}

/* ==================== Scroll to Top ==================== */
.scroll-top{position:fixed;bottom:24px;right:40px;z-index:100;width:40px;height:40px;border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;pointer-events:none;transform:translateY(10px);transition:all var(--transition-normal);cursor:pointer}
.scroll-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.scroll-top:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-glow)}

/* ==================== Footer ==================== */
.footer{max-width:var(--content-max-w);margin:0 auto;padding:var(--gap-lg);text-align:center;font-size:0.82rem;color:var(--text-muted);border-top:1px solid var(--border)}
.footer-stats{display:flex;align-items:center;justify-content:center;gap:var(--gap-lg);margin-bottom:var(--gap-sm)}
.footer-stat{display:flex;align-items:center;gap:var(--gap-xs)}
.footer-quote{font-style:italic;margin-top:var(--gap-sm)}

/* ==================== Responsive ==================== */
@media(max-width:1024px){:root{--sidebar-w:280px}.main-container{gap:var(--gap-md)}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
@media(max-width:768px){.main-container{grid-template-columns:1fr;padding:var(--gap-md)}.nav-bar{position:sticky;top:var(--header-h);z-index:90;margin:0;border-radius:0;border-left:none;border-right:none}.sidebar{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.header-inner{gap:var(--gap-sm)}.search-area{max-width:none}.scroll-top{right:16px;bottom:80px}}
@media(max-width:520px){:root{--header-h:56px}.main-container{padding:var(--gap-sm)}.header-inner{padding:0 var(--gap-sm);flex-wrap:wrap;height:auto;padding-top:var(--gap-xs);padding-bottom:var(--gap-xs)}.search-area{order:3;width:100%}.tool-grid{grid-template-columns:1fr;gap:var(--gap-xs)}.sidebar{grid-template-columns:1fr}.tool-card{padding:12px 14px}.scroll-top{right:12px;bottom:72px}}

/* ==================== Category color classes ==================== */
.cat-color-video{background:var(--cat-video)}.cat-color-anime{background:var(--cat-anime)}.cat-color-music{background:var(--cat-music)}
.cat-color-book{background:var(--cat-book)}.cat-color-game{background:var(--cat-game)}.cat-color-fun{background:var(--cat-fun)}
.cat-color-toolbox{background:var(--cat-toolbox)}.cat-color-software{background:var(--cat-software)}
.cat-color-devtools{background:var(--cat-devtools)}.cat-color-hardware{background:var(--cat-hardware)}

/* Fade-in animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.tool-card{animation:fadeInUp 0.4s ease backwards}