/* ============================================================
   tbox 前台主题覆盖 —— 热橙波普（与后台同一套 tokens）
   引入位置：index.php 中 admin.css 之后加载
   原则：只做视觉覆盖，不改任何 DOM 与 JS 行为
   ============================================================ */

/* ---------- 全局字体与文本 ---------- */
body,
#app {
    font-family: var(--font-body) !important;
    color: var(--color-ink);
    background: var(--color-bg) !important;
}

/* 氛围：颗粒 + 固定贴纸色块 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::before {
    content: "";
    position: fixed;
    top: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    background: var(--color-pop);
    border-radius: 26px;
    transform: rotate(12deg);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

/* ---------- 侧栏 ---------- */
aside {
    background-color: rgba(255, 255, 255, .92) !important;
    border-right: 1px solid var(--color-line) !important;
}

aside .default-category-btn {
    background-color: transparent !important;
    color: var(--color-muted) !important;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}

aside .default-category-btn:hover {
    background-color: var(--color-accent-soft) !important;
    color: var(--color-accent-ink) !important;
}

aside .active-category-btn {
    background-color: var(--color-accent) !important;
    color: var(--color-panel) !important;
    font-weight: 700;
    border-left: none;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
    box-shadow: 3px 3px 0 var(--color-pop) !important;
    transform: none !important;
}

/* ---------- 头部导航 / 搜索 ---------- */
#main header {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(8px);
}

#main header nav a {
    color: var(--color-muted);
    border-radius: var(--radius-pill);
    transition: color var(--dur-fast) ease-out, background var(--dur-fast) ease-out;
}

#main header nav a:hover {
    color: var(--color-accent-ink);
    background: var(--color-accent-soft);
}

#searchEngineDropdownBtn {
    background: var(--color-bg) !important;
    border-color: var(--color-line) !important;
    color: var(--color-muted) !important;
}

#headerSearchInput {
    border-color: var(--color-line) !important;
}

#headerSearchBtn,
#mobileSearchTriggerBtn {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-panel) !important;
    font-weight: 700;
    transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast) ease-out;
}

#headerSearchBtn:hover,
#mobileSearchTriggerBtn:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 3px 3px 0 var(--color-pop);
}

#searchEngineDropdownMenu {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

#searchEngineDropdownMenu button[data-engine]:hover {
    background: var(--color-accent) !important;
}

/* ---------- 分类标题：倾斜橙杠 + 规则线 ---------- */
h2[id^="category-"] {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: var(--space-6);
}

h2[id^="category-"]::before {
    content: "";
    flex: 0 0 10px;
    height: 26px;
    background: var(--color-accent);
    border-radius: 4px;
    transform: rotate(8deg);
    box-shadow: 2px 2px 0 var(--color-pop);
}

h2[id^="category-"]::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-line-soft);
    order: 1;
    margin-left: 6px;
}

/* ---------- 工具卡片 ---------- */
.tool-card-item {
    background: var(--color-surface);
    border: 1.5px solid var(--color-line-soft);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-lg);
    transition: transform var(--dur-base) var(--ease-pop),
                box-shadow var(--dur-base) ease-out,
                border-color var(--dur-base) ease-out;
    animation: cardIn var(--dur-base) var(--ease-out) backwards;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* 入场错峰：按视口内前 12 张卡 stagger */
.tool-card-item:nth-child(1) { animation-delay: 30ms; }
.tool-card-item:nth-child(2) { animation-delay: 90ms; }
.tool-card-item:nth-child(3) { animation-delay: 150ms; }
.tool-card-item:nth-child(4) { animation-delay: 210ms; }
.tool-card-item:nth-child(5) { animation-delay: 270ms; }
.tool-card-item:nth-child(6) { animation-delay: 330ms; }

.tool-card-item:hover {
    border-color: var(--color-accent);
    box-shadow: 4px 4px 0 var(--color-pop);
    transform: translateY(-3px) rotate(-.4deg);
}

/* 访问按钮：橙红胶囊 + 弹性悬停 */
.tool-card-item a {
    background: var(--color-accent) !important;
    color: var(--color-panel) !important;
    font-weight: 700;
    border-radius: var(--radius-pill) !important;
    transition: transform var(--dur-fast) var(--ease-pop),
                box-shadow var(--dur-fast) ease-out,
                background var(--dur-fast) ease-out;
}

.tool-card-item a:hover {
    background: var(--color-accent) !important;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 2px 2px 0 var(--color-pop);
}

/* 卡片内分类标签排版微调 */
.tool-card-item h3 {
    font-weight: 700;
}

.tool-card-item p {
    color: var(--color-muted);
}

/* ---------- 悬浮按钮 ---------- */
#openCommentBtn {
    background: var(--color-panel) !important;
    color: var(--color-panel-ink) !important;
    border: 2px solid var(--color-panel-ink);
    border-radius: var(--radius-pill) !important;
    box-shadow: 3px 3px 0 var(--color-pop);
}

#openCommentBtn:hover { background: var(--color-panel) !important; box-shadow: 4px 4px 0 var(--color-pop); }

#openSearchBtn {
    background: var(--color-accent) !important;
    color: var(--color-panel) !important;
    box-shadow: 3px 3px 0 var(--color-pop);
}

#openSearchBtn:hover { background: var(--color-accent) !important; transform: translateY(-2px); }

#scrollTopBtn { background: var(--color-ok) !important; border-radius: var(--radius-pill) !important; }

/* ---------- 模态框 ---------- */
#modalPanel {
    border: 2px solid var(--color-ink);
    box-shadow: 6px 6px 0 var(--color-pop);
    border-radius: var(--radius-lg);
}

#modalTitle { font-family: var(--font-display); font-weight: 800; }

#modalSearchBtn {
    background: var(--color-accent) !important;
    color: var(--color-panel) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 700;
}
#modalSearchBtn:hover { background: var(--color-accent) !important; box-shadow: 2px 2px 0 var(--color-pop); }

#searchList button {
    font-family: var(--font-body);
}

#searchList button:hover { background: var(--color-accent-soft) !important; }

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
    .tool-card-item { animation: none !important; }
    .tool-card-item:hover { transform: none; }
    body::before { display: none; }
}