/* ==========================================================================
 * 目录页（首页）样式 — onlineTools
 * ==========================================================================
 * 只作用于首页 templates/index.html。工具页用的是 static/tools/common.css，
 * 两套样式互相独立（首页更偏「清爽的信息密度」，工具页偏「居中卡片」）。
 *
 * 设计要点：
 *   - 默认暗色主题；通过给 <body> 加 light-theme 类切换到浅色（与工具页一致）。
 *   - 用 CSS 变量（:root 里定义）承载配色，浅色模式只需覆盖这些变量，
 *     下面的组件样式无需重复写两遍。
 *   - 响应式：卡片网格用 auto-fill + minmax，随屏宽自动增减列数。
 * ========================================================================== */

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* 宽高包含 padding/border，避免撑破布局 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 设计变量（暗色为默认值） ---------- */
:root {
    --bg: #09090b;                       /* 页面底色 */
    --bg-elev: rgba(24, 24, 27, 0.5);    /* 抬升面（预留） */
    --card: rgba(255, 255, 255, 0.03);   /* 卡片背景 */
    --card-hover: rgba(129, 140, 248, 0.1); /* 卡片悬停背景（带一点主题色） */
    --border: rgba(255, 255, 255, 0.08); /* 描边/分隔线 */
    --text: #f4f4f5;                     /* 主文字 */
    --text-dim: #a1a1aa;                 /* 次要文字 */
    --accent: #818cf8;                   /* 主题强调色（靛蓝） */
}

/* ---------- 页面底色 ---------- */
body {
    background-color: var(--bg);
    /* 一层极轻的对角渐变，避免纯黑显得死板；fixed 让滚动时背景不动 */
    background-image: linear-gradient(to bottom left, #1a1a1d, #131314, #000000);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* 主题切换时让颜色平滑过渡 */
    transition: background-color 0.5s ease, background-image 0.5s ease, color 0.5s ease;
}

/* 链接默认不加下划线、继承文字颜色 */
a { text-decoration: none; color: inherit; }

/* ---------- 顶部栏 ---------- */
.site-header {
    position: sticky;      /* 吸顶：向下滚动时工具栏固定在顶部 */
    top: 0;
    z-index: 10;           /* 盖住下方内容 */
    background: rgba(9, 9, 11, 0.7);
    backdrop-filter: blur(12px);           /* 毛玻璃效果（新） */
    -webkit-backdrop-filter: blur(12px);   /* Safari 兼容 */
    border-bottom: 1px solid var(--border);
}

/* 顶部栏内部：左站名、右侧搜索+主题按钮；整体限宽居中 */
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 站名：online + 高亮的 Tools */
.brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;   /* 站名不换行 */
}
.brand span { color: var(--accent); }

/* 右侧控件容器：让搜索框占据剩余空间并靠右 */
.header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

/* ---------- 搜索框 ---------- */
.search {
    flex: 1;              /* 撑满剩余宽度 */
    max-width: 420px;     /* 但不超过 420px，过宽反而难看 */
    padding: 9px 14px;
    font-size: 14px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;        /* 去掉默认聚焦框，改用边框高亮表示聚焦 */
    transition: border-color 0.2s, background 0.2s;
}
.search::placeholder { color: var(--text-dim); }
.search:focus {
    border-color: rgba(129, 140, 248, 0.5);  /* 聚焦时主题色边框 */
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
    width: 38px;
    height: 38px;         /* 与搜索框同高，视觉对齐 */
    font-size: 18px;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: rgba(129, 140, 248, 0.5); }

/* ---------- 主体 ---------- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 20px 60px;   /* 底部留白，避免贴着页脚 */
}

/* 顶部一句说明文字 */
.intro {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 28px;
}

/* 每个分类块之间的间距 */
.category { margin-bottom: 34px; }

/* 分类标题：只负责外边距，内里的可点击折叠按钮单独美化 */
.category-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* ---------- 折叠按钮（嵌在 <h2 class="category-title"> 内） ---------- */
/* 让按钮占满整行、外观像普通标题，但在右侧多一个指示箭头，
   提示可点击折叠/展开该分类的工具列表。 */
.category-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 文字靠左、箭头靠右 */
    width: 100%;
    padding: 4px 4px 4px 12px;
    background: none;
    border: none;
    border-left: 3px solid var(--accent);  /* 保留标题左侧的主题色竖线 */
    color: inherit;                        /* 继承文字颜色（随主题） */
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s;
}
.category-toggle:hover { color: var(--accent); }   /* 悬停整行变主题色 */
.category-toggle:focus-visible {
    outline: 2px solid var(--accent);              /* 键盘聚焦可见轮廓 */
    outline-offset: 2px;
    border-radius: 4px;
}

/* 折叠指示箭头：默认朝下（展开）；折叠后旋转朝右 */
.category-toggle .toggle-icon {
    font-size: 14px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
}
.category-toggle[aria-expanded="false"] .toggle-icon {
    transform: rotate(-90deg);   /* 旋转 -90°，箭头由「▾」指向右「▸」 */
}

/* 折叠状态：隐藏该分类下的工具网格（由 home.js 添加/移除该类） */
.tool-grid.grid-hidden { display: none; }

/* ---------- 工具卡片网格 ---------- */
.tool-grid {
    list-style: none;     /* 去掉 <ul> 默认的列表点 */
    display: grid;
    /* auto-fill：尽可能多地排布列；每列最小 180px、最大均分剩余空间。
       屏幕越宽自动越多列，无需写多个断点。 */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;            /* 卡片间距 */
}

/* 单个工具卡片：链接整体可点，内部纵向排列名称与（可选）简介 */
.tool-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    /* 悬停时轻微上浮 + 变色，给可点击的反馈 */
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.tool-card:hover {
    background: var(--card-hover);
    border-color: rgba(129, 140, 248, 0.4);
    transform: translateY(-2px);   /* 上移 2px */
}

.tool-name { font-size: 15px; font-weight: 600; }   /* 工具名 */
.tool-desc { font-size: 12px; color: var(--text-dim); } /* 简介（若注册时填写） */

/* 付费工具徽标（PRICING='paid'） */
.badge-paid {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 500;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.5;
}

/* 搜索无结果时的提示 */
.empty-tip {
    text-align: center;
    color: var(--text-dim);
    padding: 40px 0;
}

/* ---------- 页脚 ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 22px 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}
.site-footer a { color: var(--accent); }

/* ==========================================================================
 * 浅色模式
 * 只需覆盖 <body> 上的 CSS 变量与少量背景，下面所有组件自动适配，
 * 无需为浅色再写一遍组件样式。
 * ========================================================================== */
body.light-theme {
    background-color: #f4f6fb;
    background-image: linear-gradient(to bottom left, #ffffff, #eef2f8, #e5eaf2);
    color: #1f2937;
    /* 覆盖设计变量为浅色取值 */
    --bg-elev: rgba(255, 255, 255, 0.8);
    --card: rgba(0, 0, 0, 0.02);
    --card-hover: rgba(99, 102, 241, 0.08);
    --border: rgba(0, 0, 0, 0.08);
    --text: #1f2937;
    --text-dim: #6b7280;
    --accent: #6366f1;
}

/* 浅色下顶部栏与输入控件换用更亮的底色 */
body.light-theme .site-header { background: rgba(255, 255, 255, 0.75); }
body.light-theme .search,
body.light-theme .theme-toggle { background: rgba(0, 0, 0, 0.03); }

/* ---------- 响应式（小屏） ---------- */
@media (max-width: 640px) {
    /* 顶部栏改为纵向堆叠：站名一行，搜索+按钮一行占满 */
    .header-inner { flex-direction: column; align-items: stretch; }
    .header-tools { justify-content: stretch; }
    .search { max-width: none; }     /* 小屏搜索框占满宽度 */
    /* 小屏卡片最小宽度降到 140px，保证一屏能排下多列 */
    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}