/* =========================================================
   style.css —— 各页面（index / admin / login / upload / file）共用的自定义样式
   原来是各页面里重复的三份 <style type="text/tailwindcss">，抽到这个文件统一维护。

   注意：这里必须是普通 CSS，不能带 type="text/tailwindcss"——
   那个属性只对 Tailwind Play CDN 的内联 <style> 标签生效，外部文件它不会去编译。
   下面的规则都是纯 CSS（@layer 是原生语法），浏览器直接就能用，效果和内联时一致。
   包在 @layer utilities 里是为了和 Tailwind 工具类同层，保持原有的优先级关系。

   历史：本文件最初是旧版单页（前端.html）时代的手写全局样式（* 重置、body、
   button 等元素级规则），那套页面已不存在，旧规则也从未包 @layer——
   一旦加载会盖掉 Tailwind 工具类，已整体移除，备份见 %TEMP%\style.css.legacy.bak。
   ========================================================= */

@layer utilities {
    /* 毛玻璃卡片：半透明白底 + 背景模糊 + 柔和投影 */
    .glass-card {
        background: rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
    }

    /* 侧边栏当前选中项：蓝色渐变底 + 白字 */
    .sidebar-active {
        background: linear-gradient(90deg, #3b82f6, #60a5fa);
        color: #fff;
    }

    /* 文件卡片网格：按容器宽度自动决定每行数量 */
    .app-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* 窄屏时缩小单元格 */
    @media (max-width: 768px) {
        .app-grid {
            gap: 0.5rem;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
    }

    /* 文件卡片（全部文件 / 收藏文件 / 我的文件）：悬浮轻微上浮 + 阴影加深 + 手型光标。
       :hover 是「类+伪类」，比 .glass-card 的单类选择器优先级高，悬浮阴影盖得住基础阴影；
       过渡只给 transform / box-shadow，避免改背景时连带动到毛玻璃的模糊效果 */
    .file-card {
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .file-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px -8px rgba(31, 38, 135, 0.2);
    }
}

/* =========================================================
   详情页「使用方法」富文本内容排版（file.js 注入的 #usageBox 内部）
   Tailwind 的 preflight 会把标题字号/字重、列表圆点和缩进、段落间距、
   链接颜色和下划线全部清零——不还回来的话，wangEditor 编辑的
   标题/列表/引用/代码块在详情页会看起来像一坨纯文本。
   规则全部用 #usageBox 作用域隔离，不会外溢影响其他页面元素。
   ========================================================= */
#usageBox h1, #usageBox h2, #usageBox h3,
#usageBox h4, #usageBox h5, #usageBox h6 {
    font-weight: 700;
    line-height: 1.4;
    margin: 0.8em 0 0.4em;
}
#usageBox h1 { font-size: 1.5em; }
#usageBox h2 { font-size: 1.35em; }
#usageBox h3 { font-size: 1.2em; }
#usageBox h4, #usageBox h5, #usageBox h6 { font-size: 1.1em; }

#usageBox p { margin: 0.5em 0; }

/* 列表：恢复圆点/序号和左侧缩进（wangEditor 列表序列化为 ul/ol/li） */
#usageBox ul, #usageBox ol { margin: 0.5em 0; padding-left: 1.6em; }
#usageBox ul { list-style: disc; }
#usageBox ol { list-style: decimal; }
#usageBox li { margin: 0.25em 0; }

/* wangEditor 待办清单：<div data-w-e-type="todo"><input checkbox>文字</div> */
#usageBox div[data-w-e-type="todo"] { margin: 0.35em 0; }

/* 引用块：左侧蓝色竖线 + 浅底 */
#usageBox blockquote {
    margin: 0.6em 0;
    padding: 0.4em 0.9em;
    border-left: 3px solid #bfdbfe;
    background: rgba(59, 130, 246, 0.06);
    color: #4b5563;
}

/* 代码块/行内代码：灰底圆角，长行横向可滚 */
#usageBox pre {
    margin: 0.6em 0;
    padding: 0.75em;
    background: #f3f4f6;
    border-radius: 0.5rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
#usageBox code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    background: #f3f4f6;
    padding: 0 0.3em;
    border-radius: 0.25rem;
}
#usageBox pre code { background: none; padding: 0; }

/* 分割线、链接、贴图、删除线的细节 */
#usageBox hr { margin: 0.8em 0; border: 0; border-top: 1px solid #e5e7eb; }
#usageBox a { color: #3b82f6; text-decoration: underline; }
#usageBox img { margin: 0.5em 0; border-radius: 0.5rem; }
#usageBox s { opacity: 0.75; }