:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
    --border: #e4e7ec;
    --border-hover: #b0b8c4;
    --accent: #2563eb;
    --accent-soft: #eff6ff;
    --card-hover-bg: #fafbff;
    --toast-bg: #fef2f2;
    --toast-border: #fecaca;
    --toast-text: #b91c1c;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.02);
    --shadow-hover: 0 12px 28px rgba(0,0,0,0.12),0 4px 10px rgba(0,0,0,0.05);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 40px;
    --font: Arial, Helvetica, sans-serif;
    --transition: 0.2s cubic-bezier(0.25,0.1,0.25,1);
    --grid-line: #f0f1f3;
}

html.dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --text-1: #f1f5f9;
    --text-2: #cbd5e1;
    --text-3: #64748b;
    --border: #334155;
    --border-hover: #475569;
    --accent: #3b82f6;
    --accent-soft: #1e3a5f;
    --card-hover-bg: #1e3a5f;
    --toast-bg: #3b1e1e;
    --toast-border: #5c2a2a;
    --toast-text: #fca5a5;
    --grid-line: #1a2535;
}
html.dark .fixed-header,
html.dark .fixed-footer,
html.dark .icp-info { background: rgba(15,23,42,0.85); }

@media (prefers-color-scheme: dark) {
    html:not(.light) {
        --bg: #0f172a;
        --surface: #1e293b;
        --text-1: #f1f5f9;
        --text-2: #cbd5e1;
        --text-3: #64748b;
        --border: #334155;
        --border-hover: #475569;
        --accent: #3b82f6;
        --accent-soft: #1e3a5f;
        --card-hover-bg: #1e3a5f;
        --toast-bg: #3b1e1e;
        --toast-border: #5c2a2a;
        --toast-text: #fca5a5;
        --grid-line: #1a2535;
    }
    html:not(.light) .fixed-header,
    html:not(.light) .fixed-footer,
    html:not(.light) .icp-info { background: rgba(15,23,42,0.85); }
}

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

html,body{
    width:100%;min-height:100vh;min-height:100dvh;
    font-family:var(--font);background:var(--bg);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    user-select:none;-webkit-user-select:none;overflow-x:hidden;
    background-image: 
        repeating-linear-gradient(45deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 28px),
        repeating-linear-gradient(135deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 28px);
    background-attachment: fixed;
}

.back-to-top {
    position: fixed;
    bottom: 70px;                  /* 位于 fixed-footer 上方 */
    right: clamp(20px, 3vw, 36px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
    transform: translateY(10px);
    color: var(--text-2);
    font-size: 1rem;
    font-weight: 600;
    user-select: none;
}

.back-to-top.visible {
    opacity: 0.8;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    opacity: 1;
    border-color: var(--accent);
    color: var(--accent);
}

.fixed-header{
    position:fixed;top:16px;left:clamp(20px,3vw,36px);z-index:10;
    display:flex;align-items:baseline;gap:12px;
    background:rgba(246,247,249,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:10px 22px;border-radius:32px;box-shadow:var(--shadow-xs);flex-wrap:wrap;
}
.fixed-header .brand{font-size:1.2rem;font-weight:700;color:var(--text-1);letter-spacing:-0.02em;white-space:nowrap;}
.fixed-header .greeting-inline{font-size:0.95rem;font-weight:500;color:var(--text-2);white-space:nowrap;letter-spacing:-0.01em;display:flex;align-items:center;gap:4px;}
.fixed-header .greeting-inline .hand{display:inline-block;animation:wave 1.8s ease-in-out infinite;transform-origin:70% 70%;}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(20deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(12deg)}}
.fixed-header .header-clock{font-size:0.78rem;font-weight:500;color:var(--text-3);letter-spacing:0.03em;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.fixed-header .header-clock .time-part{font-weight:600;color:var(--text-2);font-size:0.82rem;letter-spacing:0.04em;}
.header-divider{width:1px;height:12px;background:var(--border);border-radius:1px;}

/* 主内容区 - 修复垂直居中问题 */
.main-content{
    position:relative;z-index:2;
    padding-top:90px;padding-bottom:90px;
    padding-left:clamp(20px,3vw,36px);padding-right:clamp(20px,3vw,36px);
    max-width:1000px;margin:0 auto;
    display:flex;flex-direction:column;
    justify-content: flex-start; /* 确保内容从顶部开始 */
    gap:clamp(18px,2.5vh,28px);
}

.toolbar,
.tools-grid { width:100%;max-width:100%;margin:0;padding:0;box-sizing:border-box; }

.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
@media(min-width:601px){.toolbar{flex-wrap:nowrap;}}

.filter-chips{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;order:-1;}
.search-wrapper{position:relative;flex:1 1 auto;min-width:200px;order:0;}

.search-input{width:100%;padding:10px 90px 10px 40px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);font-size:0.86rem;color:var(--text-1);outline:none;font-family:var(--font);box-shadow:var(--shadow-xs);transition:all var(--transition);}
.search-input::placeholder{color:var(--text-3);}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.08);}
.search-icon-svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-3);display:flex;transition:color var(--transition);}
.search-input:focus~.search-icon-svg{color:var(--accent);}
.search-clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;color:var(--text-3);display:none;line-height:0;z-index:2;}
.search-clear-btn.visible{display:block;}
.search-clear-btn:hover{color:#ef4444;background:#fef2f2;}
html.dark .search-clear-btn:hover{background: #3b1e1e;}

.search-count {
    position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    font-size: 0.7rem; color: var(--text-3); background: var(--surface);
    padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border);
    white-space: nowrap; pointer-events: none; opacity: 0.8;
}

.filter-chip{padding:8px 16px;border-radius:var(--radius-lg);font-size:0.78rem;font-weight:500;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all var(--transition);white-space:nowrap;font-family:var(--font);letter-spacing:0.01em;box-shadow:var(--shadow-xs);}
.filter-chip:hover{border-color:var(--border-hover);color:var(--text-1);}
.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(37,99,235,0.2);}

.tools-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;align-items:start;
}
@media(max-width:700px){.tools-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:450px){.tools-grid{grid-template-columns:1fr;}}

.tool-card{
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:var(--radius-md);
    padding:20px 18px;
    cursor:pointer;text-decoration:none;color:inherit;
    transition:all var(--transition);
    box-shadow:var(--shadow-sm);
    position:relative;outline:none;
    -webkit-tap-highlight-color:transparent;
    overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:90px;
}
.tool-card:hover{
    border-color:var(--accent);
    box-shadow:var(--shadow-hover);
    transform:translateY(-3px);
    background:var(--card-hover-bg);
    z-index:1;
}
.tool-card:active{transform:scale(0.97);transition:0.1s ease;box-shadow:var(--shadow-xs);background:var(--surface);}
.tool-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.tool-card::after{
    content:'打开 →';
    position:absolute;bottom:12px;right:12px;
    font-size:0.7rem;font-weight:500;color:var(--text-3);opacity:0.55;
    transition:all var(--transition);letter-spacing:0.03em;
    background:var(--surface);padding:2px 8px;border-radius:12px;
    pointer-events:none;white-space:nowrap;
}
.tool-card:hover::after{opacity:1;color:var(--accent);font-weight:600;background:var(--card-hover-bg);box-shadow:0 1px 3px rgba(0,0,0,0.06);}

.card-title{font-weight:600;font-size:0.95rem;color:var(--text-1);letter-spacing:0.01em;line-height:1.3;margin-bottom:2px;}
.card-desc{font-size:0.72rem;color:var(--text-3);line-height:1.4;}

.empty-state{grid-column:1/-1;text-align:center;color:var(--text-3);font-size:0.88rem;padding:32px;opacity:0.65;}

.error-toast {
    background: var(--toast-bg); border: 1px solid var(--toast-border); color: var(--toast-text);
    padding: 8px 16px; border-radius: 30px; font-size: 0.7rem;
    margin-top: 12px; text-align: center; opacity: 0.9;
    transition: opacity 0.5s ease;
}

.fixed-footer {
    background: rgba(246,247,249,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px; border-radius: 30px;
    font-size: 0.65rem; color: var(--text-3); opacity: 0.75; letter-spacing: 0.03em; box-shadow: var(--shadow-xs); white-space: nowrap;
    position: fixed; bottom: 16px; left: clamp(20px,3vw,36px); z-index: 10;
    display: flex; align-items: center; gap: 8px;
}
.fixed-footer strong { font-weight: 600; color: var(--text-2); }

.theme-toggle {
    background: none; border: 1px solid var(--border); border-radius: 50%;
    width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; line-height: 1; transition: all var(--transition); flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); }

.icp-info {
    background: rgba(246,247,249,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 6px 16px; border-radius: 30px; border: 1px solid var(--border);
    font-size: 0.6rem; color: var(--text-3); opacity: 0.75; letter-spacing: 0.03em; box-shadow: var(--shadow-xs);
    white-space: nowrap; text-decoration: none;
    position: fixed; bottom: 16px; right: clamp(20px,3vw,36px); z-index: 10;
}
.icp-info a { color: var(--text-3); text-decoration: none; }
.icp-info a:hover { color: var(--text-2); }

@media(max-width:600px) {
    .fixed-header { top:8px; left:12px; padding:8px 14px; gap:8px; border-radius:24px; font-size:0.8rem; }
    .fixed-header .brand { font-size: 1rem; }
    .fixed-header .greeting-inline { font-size: 0.8rem; }
    .main-content { padding-top:80px; padding-bottom: 24px; padding-left:12px; padding-right:12px; gap:14px; }
    .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .fixed-footer { display: flex; flex-wrap: wrap; justify-content: center; }
    .icp-info { position: static; margin: 12px auto 0; width: fit-content; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; padding: 0; font-size: 0.65rem; opacity: 0.7; white-space: normal; text-align: center; }
    .icp-info a { color: var(--text-3); }
    .tool-card { padding: 16px 14px; min-height: 70px; }
    .back-to-top { bottom: 80px; }
}