/* =========================================================
   OldApps · 界面参考 vexel.belta.cc
   极强兼容：不使用 CSS 变量 / flexbox / grid / sticky，
   老浏览器（IE6/7、旧 WebView）也能正常排版；无 JS 也完整可用。
   ========================================================= */

* { margin: 0; padding: 0; }
/* HTML5 元素在老 WebKit（安卓 2.x）里默认是 inline，显式设为 block */
header, footer, main, nav, section, article, aside { display: block; }
body {
  background: #f7fcff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
a { color: #0077ff; text-decoration: none; }
a:hover { color: #0066dd; text-decoration: underline; }
img { border: 0; }

/* ---- 顶栏 ---- */
.topbar {
  background: #0077ff;
  color: #fff;
  overflow: hidden;               /* 老浏览器清浮动；高度自适应可换行 */
  padding: 0 16px;
  line-height: 52px;
  min-height: 52px;
}
.topbar .brand {
  float: left;
  color: #fff;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.topbar .brand:hover { text-decoration: underline; }
.topbar .nav { float: left; margin-left: 22px; }
.topbar .nav a {
  color: rgba(255,255,255,0.92);
  color: #e8f2ff;
  margin-right: 14px;
  font-size: 15px;
}
.topbar .nav a:hover { color: #fff; }
.topbar .nav-right { float: right; }

/* ---- 按钮 ---- */
.btn {
  display: inline-block;
  padding: 5px 13px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}
.btn-primary { background: #fff; color: #0077ff; font-weight: bold; }
.btn-primary:hover { background: #eef5ff; text-decoration: none; }
.btn-solid { background: #0077ff; color: #fff; }
.btn-solid:hover { background: #0066dd; text-decoration: none; }
.btn-ghost2 { background: #fff; color: #0077ff; border-color: #cfe0ff; }
.btn-ghost2:hover { background: #eef5ff; text-decoration: none; }
.btn-danger { background: #fff; color: #d93026; border-color: #f0c6c2; }
.btn-danger:hover { background: #fdecea; text-decoration: none; }
.btn.big { padding: 9px 22px; font-size: 15px; }

/* ---- 布局 ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 20px 16px 10px; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 22px; font-weight: bold; }
.page-head .sub { color: #999; font-size: 13px; margin-top: 2px; }
.admin-head .btn { margin-right: 6px; }

/* ---- 搜索与排序 ---- */
.searchbar { margin: 14px 0; }
.searchbar input[type=text] {
  width: 320px; max-width: 70%;
  border: 1px solid #d8dde3;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  font-family: inherit;
}
.sortbar { margin: 12px 0 4px; font-size: 13px; color: #666; }

/* ---- 分区 chip 行 ---- */
.chiprow { margin: 6px 0 18px; }
.chiprow .chip { margin-right: 8px; }

/* ---- 标签 chip ---- */
.chips { margin-top: 8px; }
.chip {
  display: inline-block;
  background: #eef5ff;
  color: #0066dd;
  font-size: 12.5px;
  padding: 2px 9px;
  -webkit-border-radius: 999px;
  border-radius: 999px;
  margin-right: 5px;
  margin-bottom: 4px;
}
a.chip:hover { background: #ddeaff; text-decoration: none; }
.chip.on { background: #0077ff; color: #fff; }

/* ---- 瀑布流卡片（不支持 column-count 的老浏览器自动降级为单列） ---- */
.masonry { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 16px; -webkit-column-gap: 16px; column-gap: 16px; }
@media (max-width: 1000px) { .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } }
@media (max-width: 560px)  { .masonry { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } }

.card {
  display: inline-block;          /* 老浏览器列内不拆行的兜底 */
  width: 100%;
  background: #fff;
  border: 1px solid #e3e8ee;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin-bottom: 16px;
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 3px rgba(20,60,120,0.06);
  box-shadow: 0 1px 3px rgba(20,60,120,0.06);
}
.card .thumb { display: block; background: #eef2f7; }
.card .thumb img { width: 100%; display: block; }
.thumb-ph {
  width: 100%; height: 150px; background: linear-gradient(135deg,#0077ff,#39a0ff);
  background-color: #0077ff;
  text-align: center; line-height: 150px;
}
.thumb-ph span { font-size: 64px; color: #fff; font-weight: bold; }
.thumb-ph.big { height: 280px; line-height: 280px; }
.card .body { padding: 10px 12px 12px; }
.card .title { font-size: 15px; font-weight: bold; line-height: 1.4; }
.card .title a { color: #1a1a1a; }
.card .title a:hover { color: #0077ff; }
.card .ver { font-size: 12.5px; color: #666; margin-top: 2px; }
.card .meta {
  margin-top: 8px; font-size: 13px; color: #999;
  border-top: 1px solid #f0f3f7; padding-top: 7px;
}
.card .meta .dev { float: left; }
.card .meta .dl { float: right; }
.card .meta:after { content: ""; display: block; clear: both; }

/* ---- 分页 ---- */
.pager { text-align: center; margin: 24px 0 10px; }
.pager .btn { margin: 0 6px; }
.pager .pinfo { color: #999; font-size: 13px; padding: 0 10px; }

/* ---- 详情页（老浏览器用表格双栏） ---- */
.detail { width: 100%; }
.detail:after { content: ""; display: block; clear: both; }
.detail .main { float: left; width: 62%; }
.detail .side { float: right; width: 35%; }
.detail .side { background: #fff; border: 1px solid #e3e8ee; -webkit-border-radius: 8px;
  border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(20,60,120,0.06); }
.detail .side h1 { font-size: 20px; margin-bottom: 4px; }
.detail .side .by { color: #666; font-size: 14px; margin-bottom: 10px; }
.detailcard { padding: 10px; }
.shot-main img { width: 100%; -webkit-border-radius: 4px;
  border-radius: 4px; display: block; }
.shot-thumbs { margin-top: 8px; }
.shot-thumb { display: inline-block; width: 74px; height: 74px; overflow: hidden; border: 2px solid #e3e8ee; -webkit-border-radius: 6px;
  border-radius: 6px; margin-right: 6px; }
.shot-thumb.on { border-color: #0077ff; }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.desc.card { margin-top: 16px; padding: 16px 18px; }
.desc.card h3 { font-size: 15px; margin-bottom: 8px; }
.desc-text { white-space: pre-wrap; color: #333; font-size: 14px; }

.kv { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 13.5px; }
.kv td { padding: 6px 4px; border-bottom: 1px solid #f0f3f7; }
.kv td:first-child { color: #999; width: 84px; }

.dl-row { margin-top: 16px; }
.dl-note { color: #aaa; font-size: 12px; margin-top: 8px; }

/* ---- 表单 ---- */
.form-card {
  background: #fff; border: 1px solid #e3e8ee; -webkit-border-radius: 8px;
  border-radius: 8px;
  padding: 22px; max-width: 640px; margin: 0 auto; box-shadow: 0 1px 3px rgba(20,60,120,0.06);
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.field .hint { font-weight: normal; color: #999; font-size: 12.5px; margin-left: 2px; }
.field input[type=text], .field input[type=password], .field select, .field textarea, .field input[type=file] {
  width: 100%; border: 1px solid #d8dde3; -webkit-border-radius: 6px;
  border-radius: 6px;
  padding: 8px 10px; font-size: 14px; font-family: inherit; background: #fff;
}
.field textarea { min-height: 90px; }
.field-row:after { content: ""; display: block; clear: both; }
.field-row .field { float: left; width: 48%; margin-right: 4%; }
.field-row .field:last-child { margin-right: 0; }
.mini { height: 44px; -webkit-border-radius: 4px;
  border-radius: 4px; border: 1px solid #e3e8ee; margin: 4px 3px 0 0; }

/* ---- 后台表格 ---- */
.admintable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e3e8ee; -webkit-border-radius: 8px;
  border-radius: 8px; }
.admintable th, .admintable td { padding: 9px 10px; border-bottom: 1px solid #f0f3f7; text-align: left; font-size: 13.5px; }
.admintable th { background: #f5f9ff; color: #555; }
.admintable .th-op { white-space: nowrap; }
.admintable .btn { margin-right: 4px; }

/* ---- 提示 / 空态 ---- */
.alert { padding: 10px 14px; -webkit-border-radius: 6px;
  border-radius: 6px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
.alert-success { background: #e9f9ef; color: #137333; border-color: #bce4c9; }
.alert-error { background: #fdecea; color: #c5221f; border-color: #f0c6c2; }
.empty { text-align: center; color: #999; padding: 60px 0; font-size: 15px; }

/* ---- 登录 ---- */
.login-box { max-width: 420px; margin: 60px auto; text-align: center; }
.login-box .form-card { text-align: left; }
.login-logo { font-size: 30px; font-weight: bold; color: #0077ff; margin-bottom: 2px; }
.login-sub { color: #999; font-size: 14px; margin-bottom: 18px; }

.footer { text-align: center; color: #999; font-size: 13px; padding: 26px 0 40px; }
.muted { color: #999; }

/* ============================================================================
 * 现代化外观层（追加，不改上面任何一条规则）
 *
 * 设计原则：
 *   1. 蓝色顶栏保留 —— #0077ff 是本站的标志，这里只是把它做得更精致（高度、阴影、悬停）
 *   2. 只做加法：原有规则一条都没删，万一浏览器不认新写法，页面仍然是原来那个样子
 *   3. 变量集中在 :root，改一处即可换色（后台的「品牌色」设置就是写这两个值）
 *   4. 移动端优先考虑：@media 断点 900px / 640px，顶栏折成两行，列表变单列，触控目标 ≥44px
 *   5. 不需要兼容老浏览器（IE/旧 Edge 不用管），所以可以放心用 flex / grid / 变量
 * ========================================================================== */

:root {
    --brand:        #0077ff;
    --brand-dark:   #0066dd;
    --brand-soft:   rgba(0, 119, 255, .08);
    --ink:          #1a1f27;
    --ink-soft:     #5a6472;
    --ink-faint:    #8b95a3;
    --line:         #e6eaf1;
    --bg:           #f5f7fb;
    --card:         #ffffff;
    --radius:       12px;
    --radius-sm:    8px;
    --shadow:       0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    --shadow-hover: 0 4px 12px rgba(16, 24, 40, .10), 0 16px 40px rgba(16, 24, 40, .10);
    --max:          1180px;
    --gap:          22px;
}

/* 页面底色与字体：原来偏「文档」，现在偏「应用」，但仍是同一套配色 */
body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* 内容宽度：给正文一个舒服的阅读宽度，同时为将来的侧栏留位置 */
.wrap, .container, main {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}

/* ---- 蓝色顶栏：本站的标志，重点打磨 -------------------------------------- */
.topbar {
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 62%, var(--brand-dark) 100%);
    color: #fff;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 90, 200, .18);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar::after {                      /* 用伪元素做内容居中，不动原来的 float 结构 */
    content: "";
    display: block;
    clear: both;
}
.topbar .brand {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .2px;
    padding: 14px 0;
    display: inline-block;
    float: left;
}
.topbar .brand:hover { color: #fff; text-decoration: none; opacity: .92; }
.topbar .nav { margin-left: 26px; }
.topbar .nav a {
    color: rgba(255, 255, 255, .90);
    padding: 16px 2px 14px;
    margin: 0 12px 0 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.topbar .nav a:hover,
.topbar .nav a.active { color: #fff; border-bottom-color: #fff; text-decoration: none; }
.topbar .nav-right { padding: 14px 0; }
.topbar .nav-right a { color: rgba(255, 255, 255, .92); margin-left: 14px; }

/* ---- 标题与正文 ---------------------------------------------------------- */
h1 { font-size: 26px; line-height: 1.3; margin: 26px 0 6px; letter-spacing: -.2px; }
h2 { font-size: 20px; line-height: 1.35; margin: 26px 0 10px; }
h3 { font-size: 17px; margin: 20px 0 8px; }
p  { margin: 10px 0; }
a  { color: var(--brand); text-decoration: none; transition: color .12s; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ---- 卡片：列表页与详情页的主力 ----------------------------------------- */
.card, .app-card, .item, .box, .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: var(--gap);
    transition: box-shadow .18s, transform .18s, border-color .18s;
    box-sizing: border-box;
}
.card:hover, .app-card:hover, .item:hover, .box:hover, .panel:hover {
    box-shadow: var(--shadow-hover);
    border-color: #d7e2f5;
    transform: translateY(-1px);
}

/* 如果列表是「一堆卡片」，让它自动排成栅格（现代浏览器才有，老浏览器退化成单列） */
.apps, .app-list, .grid, .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
}
.apps > *, .app-list > *, .grid > *, .cards > * { margin-bottom: 0; }

/* ---- 按钮 ---------------------------------------------------------------- */
.btn, button, input[type="submit"] {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 1px 2px rgba(0, 90, 200, .18);
}
.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 90, 200, .22);
}
.btn:active, button:active, input[type="submit"]:active { transform: translateY(1px); }
.btn-primary { background: #fff; color: var(--brand); box-shadow: none; }
.btn-primary:hover { background: #f2f7ff; color: var(--brand-dark); }
.btn-solid { background: var(--brand); color: #fff; }
.btn-ghost, .btn-secondary {
    background: transparent;
    color: var(--brand);
    border: 1px solid #cfe0f8;
    box-shadow: none;
}
.btn-ghost:hover, .btn-secondary:hover { background: var(--brand-soft); }

/* ---- 表单 ---------------------------------------------------------------- */
input[type="text"], input[type="search"], input[type="url"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d7dde7;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
label { display: block; font-size: 14px; color: var(--ink-soft); margin: 14px 0 6px; }

/* ---- 表格（后台大量使用）------------------------------------------------ */
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: #fafbfe; font-size: 13px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcff; }

/* ---- 标签、徽章、提示 ---------------------------------------------------- */
.tag, .badge, .chip {
    display: inline-block;
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12.5px;
    margin: 0 6px 6px 0;
}
.msg, .notice, .alert {
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 14px 0;
    background: #fff;
    border: 1px solid var(--line);
}
.msg.error   { background: #fff5f5; border-color: #ffd3d3; color: #a31212; }
.msg.ok      { background: #f3fdf6; border-color: #c3eccf; color: #146c33; }
.msg.info    { background: #f4f9ff; border-color: #cfe4ff; color: #0b4c8f; }

/* ---- 分页 ---------------------------------------------------------------- */
.pager, .pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.pager a, .pagination a, .pager span, .pagination span {
    display: inline-block;
    min-width: 38px;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.pager a:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.pager .current, .pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- 页脚 ---------------------------------------------------------------- */
footer, .footer {
    margin-top: 40px;
    padding: 22px 0 30px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 13.5px;
    text-align: center;
}

/* ============================================================================
 * 移动端适配
 *   900px 以下：顶栏折成两行，导航横向滚动，卡片变两列
 *   640px 以下：单列，按钮与输入框整行，触控目标 ≥44px
 * ========================================================================== */
@media (max-width: 900px) {
    .wrap, .container, main { padding: 0 14px; }
    .topbar .brand { float: none; display: block; padding: 12px 0 6px; text-align: center; }
    .topbar .nav { float: none; margin: 0; display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .topbar .nav a { padding: 10px 0; margin-right: 16px; border-bottom: 0; }
    .topbar .nav-right { float: none; display: block; padding: 6px 0 12px; text-align: center; border-top: 1px solid rgba(255,255,255,.22); }
    .topbar .nav-right a { margin: 0 8px; display: inline-block; padding: 6px 2px; }
    h1 { font-size: 22px; }
    .apps, .app-list, .grid, .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 640px) {
    :root { --gap: 14px; --radius: 10px; }
    body { font-size: 15px; }
    h1 { font-size: 20px; margin-top: 18px; }
    h2 { font-size: 17px; }
    .apps, .app-list, .grid, .cards { grid-template-columns: 1fr; }
    .card, .app-card, .item, .box, .panel { padding: 14px; }
    .btn, button, input[type="submit"] { display: block; width: 100%; text-align: center; padding: 13px 18px; }
    .topbar .nav-right a, .pager a, .pager span { display: inline-block; width: auto; }
    footer, .footer { font-size: 12.5px; }
}

/* 深色模式（可选，浏览器/系统开启时才生效，不影响默认外观） */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8ecf3;
        --ink-soft: #a7b2c2;
        --ink-faint: #7d8798;
        --line: #2a323d;
        --bg: #12161c;
        --card: #1a1f27;
        --brand-soft: rgba(0, 119, 255, .16);
    }
    input, select, textarea { background: #141920; color: var(--ink); border-color: #2f3844; }
    th { background: #171c24; }
    tbody tr:hover { background: #171d26; }
    .msg { background: #171c24; }
}
/* ============================================================================
 * 卡片内部细节 ＋ 分页主次（v8 追加）
 *
 * 这一批是照着 oa_render_card() 与 oa_pager() 的**真实输出**写的 ✗ 不再靠猜 ✓：
 *   oa_render_card() 输出： .card > a.thumb / .thumb-ph · .body > .title .ver .chips .meta(.dev .dl)
 *   oa_pager()       输出： .pager > a.btn.btn-ghost2 / span.pinfo / a.btn.btn-solid
 *
 * ⚠️ v7 里我写的是 .btn-ghost ✗ 而它实际用 .btn-ghost2 ✗✓ 所以分页两个按钮当时会同色 ✗
 *    这一版补上 .btn-ghost2 ✓ 主次立刻分明 ✓
 * ========================================================================== */

/* ---- 缩略图：统一比例，不因原图大小而参差 --------------------------------- */
.card .thumb,
.card > a:first-child {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;          /* 现代浏览器 ✓ 老浏览器会按图片原比例（不会坏 ✓） */
    background: #eef3fb;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    text-decoration: none;
}
.card .thumb img,
.card > a:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.card:hover .thumb img { transform: scale(1.03); }

/* 没有截图时：浅蓝底 + 大号首字母（原来是一个空方框 ✗ 现在像个应用图标 ✓） */
.card .thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background: linear-gradient(135deg, #eaf2ff 0%, #dbe9ff 100%);
    color: var(--brand);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.02em;
    user-select: none;
}
.card .thumb-ph span { line-height: 1; opacity: .85; }

/* 卡片的 padding 交给内部块，缩略图才能顶到边 ✓ */
.card { padding: 0; overflow: hidden; }

/* ---- 卡片正文 ------------------------------------------------------------- */
.card .body { padding: 14px 16px 16px; }
.card .title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 4px; }
.card .title a { color: var(--ink); }
.card .title a:hover { color: var(--brand); text-decoration: none; }
.card .ver {
    font-size: 12.5px;
    color: var(--ink-faint);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .chips { margin-bottom: 12px; }
.card .chip { font-size: 12px; padding: 2px 9px; }
.card .chip:hover { background: var(--brand); color: #fff; text-decoration: none; }

/* 底部：开发者靠左 ✓ 下载数靠右 ✓ 上方一条细线 ✓ */
.card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-faint);
}
.card .meta .dev {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card .meta .dl { white-space: nowrap; color: var(--ink-soft); }

/* ---- 分页：上一页描边、下一页实心（v7 漏了 btn-ghost2 ✗ 这里补上 ✓）------ */
.pager .btn-ghost2,
.pager .btn-ghost,
.pager .btn-secondary {
    background: #fff;
    color: var(--brand);
    border: 1px solid #cfe0f8;
    box-shadow: none;
}
.pager .btn-ghost2:hover,
.pager .btn-ghost:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: var(--brand);
}
.pager .btn-solid { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.pager .btn-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.pager .pinfo {
    display: inline-block;
    padding: 8px 10px;
    color: var(--ink-faint);
    font-size: 13.5px;
    border: 0;
    background: transparent;
}
.pager { align-items: center; }

/* ---- 栅格：让卡片在列表页自动排成整齐的多列 ------------------------------- */
/* 只有找到容器时才加（容器类名由脚本探测后写在下面一行 ✓ 不再靠猜 ✓） */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); align-items: start; }
.cards > .card { margin-bottom: 0; }

@media (max-width: 900px) {
        .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
        .cards { grid-template-columns: 1fr; }
}
/* ============================================================================
 * 列表容器 .masonry（v9 补正）
 *
 * ⚠️ v8 里我用关键词猜容器类名 ✗ 猜成了 .cards ✗ 而真实容器是 .masonry ✗✓
 *    （index.php 第 45 行、category.php 第 41 行都是 <div class="masonry"> ✓）
 *    结果那一版栅格规则指向了一个不存在的类 ✗ 列表没变化 ✓ 页面也没坏 ✓
 *    这一版按**真实类名**写 ✓ 并且保留对 .cards 的兜底 ✓
 *
 * 名字叫 masonry（瀑布流）✗ 但如果它原来是用 CSS columns 实现的 ✗
 * 那列数是不受控的 ✓ 卡片高度不齐 ✓ 手机上是单列但平板可能挤成 3 列窄条 ✓
 * 这里改成显式栅格：宽度自适应 ✓ 卡片等宽 ✓ 断点可控 ✓ 视觉更整齐 ✓
 * ========================================================================== */

.masonry,
.cards,
.app-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    align-items: start;
    /* 如果原来用 columns 实现，这里把它关掉，避免两套布局打架 */
    columns: auto;
    column-count: auto;
}
.masonry > *,
.cards > *,
.app-list > * {
    margin-bottom: 0;
    break-inside: avoid;
    width: auto;
}

/* 空状态提示（原来就有 .empty ✓ 这里只是让它更像个提示而不是一行干字） */
.empty {
    padding: 42px 20px;
    text-align: center;
    color: var(--ink-faint);
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* 页头与排序条（两个页面都在用 ✓ 顺手对齐一下） */
.page-head { margin: 22px 0 4px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.sortbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 16px 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-soft);
}
.sortbar a { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.sortbar a:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

@media (max-width: 900px) {
    .masonry, .cards, .app-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
    .masonry, .cards, .app-list { grid-template-columns: 1fr; }
    .empty { padding: 30px 14px; }
}
/* ============================================================================
 * 后台主题层（v10）
 *
 * 类名全部来自后台页面的**真实输出**（先读过 login.php 与 index.php 才写 ✗ 不再猜 ✓）：
 *   登录页： .login-box .login-logo .login-sub .form-card .field .alert .alert-error
 *   列表页： .page-head.admin-head .sub .searchbar .admintable .th-op .btn-danger
 * 风格与前台一致（同一套变量 ✓）但更紧凑 ✓ 因为后台是天天用的工具 ✗ 不是展示页 ✓
 * ========================================================================== */

/* ---- 登录页：居中的现代卡片 ----------------------------------------------- */
.login-box {
    max-width: 400px;
    margin: 56px auto;
    text-align: center;
}
.login-logo {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--brand);
    margin-bottom: 4px;
}
.login-sub { color: var(--ink-faint); font-size: 14px; margin-bottom: 22px; }
.form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 24px;
    text-align: left;
}
.form-card .field { margin-bottom: 16px; }
.form-card label { margin-top: 0; font-weight: 500; color: var(--ink-soft); }
.form-card .btn { width: 100%; padding: 12px 18px; margin-top: 4px; }
.login-box + * { margin-top: 0; }

.alert {
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    margin-bottom: 16px;
    font-size: 14px;
    background: #f4f9ff;
    border: 1px solid #cfe4ff;
    color: #0b4c8f;
}
.alert-error { background: #fff5f5; border-color: #ffd3d3; color: #a31212; }
.alert-ok    { background: #f3fdf6; border-color: #c3eccf; color: #146c33; }

/* ---- 后台页头：标题 + 统计 + 一排按钮 ------------------------------------ */
.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.admin-head h1 { margin: 0; font-size: 22px; }
.admin-head .sub { flex: 1 1 100%; color: var(--ink-faint); font-size: 13.5px; margin: 0; order: 3; }
.admin-head .btn { padding: 8px 14px; font-size: 14px; }
.admin-head .btn-solid { margin-left: auto; }   /* 「新增」推到最右 ✓ 主操作最显眼 ✓ */

/* ---- 搜索条：输入框自适应 + 按钮固定 ------------------------------------- */
.searchbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
}
.searchbar input[type="text"] { flex: 1 1 auto; }
.searchbar .btn { flex: 0 0 auto; width: auto; padding: 10px 20px; }

/* ---- 后台表格：整齐、可扫读 ---------------------------------------------- */
.admintable {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.admintable th {
    background: #fafbfe;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.admintable td { font-size: 14px; vertical-align: middle; }
.admintable tr:hover td { background: #fbfcff; }
.admintable td a { font-weight: 500; }
.admintable .th-op,
.admintable td.th-op {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.admintable td.th-op .btn {
    padding: 6px 12px;
    font-size: 13px;
    margin-left: 6px;
    width: auto;
    display: inline-block;
}

/* ---- 危险按钮：红色，与蓝色主操作明确区分（原来它是蓝的 ✗ 容易误点 ✗）---- */
.btn-danger {
    background: #e5484d;
    color: #fff;
    border: 1px solid #e5484d;
    box-shadow: 0 1px 2px rgba(180, 30, 35, .18);
}
.btn-danger:hover {
    background: #cf3a3f;
    border-color: #cf3a3f;
    color: #fff;
    box-shadow: 0 3px 10px rgba(180, 30, 35, .22);
}

/* 后台里的「页面」区块：给表单页一个统一容器 */
.form-page, .edit-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

/* ---- 后台移动端：表格横向滚动，按钮不挤压 -------------------------------- */
@media (max-width: 900px) {
    .admin-head h1 { font-size: 19px; }
    .admin-head .btn-solid { margin-left: 0; }
    .admintable { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 640px) {
    .login-box { margin: 28px auto; }
    .form-card { padding: 20px 16px; }
    .searchbar { flex-wrap: wrap; }
    .searchbar .btn { width: 100%; }
    .admintable td.th-op .btn { margin: 4px 6px 4px 0; }
}
/* ============================================================================
 * freedns.my 的 Material 3 体系 —— 整套照搬（真值取自 freedns 的 theme-modern2.css）
 *
 * 做法：把 freedns 的 61 个 M3 token **原样声明**一遍，然后把本项目已有的变量
 *       （--brand 等）重新指向这些 token，再把形状（胶囊按钮、M3 海拔阴影、
 *       表面色、描边色）覆盖上去。
 *
 * 为什么这样就能「一模一样」：本文件前面所有规则都引用 var(--brand) / var(--line) /
 * var(--card) 这些名字，这里只把它们**指向新的值**，所以全站立刻换色换形，
 * 而**不需要改任何 HTML**。
 *
 * 注意：这一层放在文件最后，级联上它一定赢。
 * ========================================================================== */

/* ---- ① freedns 的 M3 token（61 项，逐字照抄）---- */
.topbar, body, :root {
    color-scheme: light;

    --primary: #1353d8;
    --on-primary: #ffffff;
    --primary-container: #dbe1ff;
    --on-primary-container: #00174d;
    --secondary: #595e72;
    --on-secondary: #ffffff;
    --secondary-container: #dde1f9;
    --on-secondary-container: #161b2c;
    --tertiary: #745470;
    --on-tertiary: #ffffff;
    --tertiary-container: #ffd6f7;
    --on-tertiary-container: #2b122a;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --ok: #006c53;
    --on-ok: #ffffff;
    --ok-container: #81f8d1;
    --on-ok-container: #002117;
    --surface: #fbf8fd;
    --on-surface: #1b1b1f;
    --on-surface-variant: #45464f;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f5f3f7;
    --surface-container: #efedf1;
    --surface-container-high: #eae7ec;
    --surface-container-highest: #e4e2e6;
    --outline: #767680;
    --outline-variant: #c6c6d0;
    --inverse-surface: #303034;
    --inverse-on-surface: #f2f0f4;
    --inverse-primary: #b5c4ff;
    --sl-hover: rgb(27 27 31 / 0.08);
    --sl-press: rgb(27 27 31 / 0.12);
    --pl-hover: rgb(19 83 216 / 0.08);
    --pl-press: rgb(19 83 216 / 0.12);
    --primary-hover: #2661db;
    --primary-press: #2f68dd;
    --tonal-hover: #cdd1e9;
    --tonal-press: #c5c9e0;
    --disabled-bg: rgb(27 27 31 / 0.12);
    --disabled-fg: rgb(27 27 31 / 0.38);
    --scrim: rgb(0 0 0 / .32);
    --bg: var(--surface);
    --fg: var(--on-surface);
    --link: var(--primary);
    --visited: var(--tertiary);
    --active: var(--error);
    --muted: var(--on-surface-variant);
    --hint: var(--on-surface-variant);
    --border: var(--outline-variant);
    --softline: var(--outline-variant);
    --panel: var(--surface-container);
    --code: var(--surface-container-highest);
    --field: var(--surface);
    --fieldborder: var(--outline);
    --button: var(--primary);
    --buttonhover: var(--primary-hover);
    --infoline: var(--primary);

    /* M3 海拔阴影（三层标准值，逐字照抄） */
    --e1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
    --e2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
    --e3: 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);
}

/* ---- ② 把本项目已有的变量重新指向 M3（这一步让全站换色 ✓ 不用改 HTML ✓）---- */
:root {
    --brand:        var(--primary);
    --brand-dark:   var(--primary-hover);
    --brand-soft:   var(--pl-hover);
    --ink:          var(--on-surface);
    --ink-soft:     var(--on-surface-variant);
    --ink-faint:    var(--outline);
    --line:         var(--outline-variant);
    --bg:           var(--surface);
    --card:         var(--surface-container-lowest);
    --radius:       16px;
    --radius-sm:    10px;
    --shadow:       var(--e1);
    --shadow-hover: var(--e2);
    --max:          80rem;          /* freedns 用 80rem ✓ */
    --gap:          20px;
}

/* ---- ③ 形状与表面：覆盖成 M3 的样子 ---- */
body {
    background: var(--surface);
    color: var(--on-surface);
    font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

a { color: var(--link); }
a:hover { color: var(--primary-hover); }
a:visited { color: var(--visited); }

/* 顶栏：换成 M3 主色（#1353d8 靛蓝 —— 完全按 freedns ✓）*/
.topbar {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--e2);
    padding: 0;
}
.topbar .brand { color: var(--on-primary); font-weight: 600; font-size: 17px; padding: 16px 0; }
.topbar .brand:hover { color: var(--on-primary); }
.topbar .nav a { color: var(--on-primary); opacity: .92; padding: 17px 2px 15px; margin-right: 18px; border-bottom: 2px solid transparent; }
.topbar .nav a:hover { opacity: 1; color: var(--on-primary); border-bottom-color: var(--on-primary); text-decoration: none; }
.topbar .nav-right a { color: var(--on-primary); opacity: .94; }
.topbar .nav-right .btn-primary {
    background: var(--on-primary);
    color: var(--primary);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
}

/* 卡片：M3 表面 + 海拔 1 */
.card, .app-card, .item, .box, .panel, .form-card, .form-page, .edit-form {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    box-shadow: var(--e1);
}
.card:hover, .app-card:hover, .item:hover, .box:hover, .panel:hover {
    box-shadow: var(--e2);
    transform: none;
    border-color: var(--outline);
}
.card .body { padding: 16px; }
.card .title { font-size: 16px; font-weight: 600; }
.card .title a { color: var(--on-surface); }
.card .title a:hover { color: var(--primary); }
.card .ver { color: var(--on-surface-variant); }
.card .meta { border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); }
.card .thumb { background: var(--surface-container); }
.card .thumb-ph {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 600;
}

/* 按钮：M3 胶囊（freedns 用 border-radius:28px ✓）*/
.btn, button, input[type="submit"] {
    border-radius: 28px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14.5px;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--e1);
}
.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--primary-hover);
    color: var(--on-primary);
    box-shadow: var(--e2);
}
.btn-primary { background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
.btn-primary:hover { background: var(--tonal-hover); color: var(--on-primary-container); }
.btn-solid { background: var(--primary); color: var(--on-primary); }
.btn-ghost, .btn-ghost2, .btn-secondary {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border: 0;
    box-shadow: none;
}
.btn-ghost:hover, .btn-ghost2:hover, .btn-secondary:hover {
    background: var(--tonal-hover);
    color: var(--on-secondary-container);
}
.btn-danger { background: var(--error); color: var(--on-error); border: 0; }
.btn-danger:hover { background: #a31616; color: var(--on-error); }

/* 表单：M3 填充式输入 */
input[type="text"], input[type="search"], input[type="url"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    background: var(--surface-container-high);
    border: 1px solid transparent;
    border-bottom: 1px solid var(--outline);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 12px 14px;
    color: var(--on-surface);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    border-bottom-width: 2px;
    box-shadow: none;
    background: var(--surface-container-highest);
}
label { color: var(--on-surface-variant); font-size: 13.5px; }

/* 表格（后台）*/
table { background: var(--surface-container-lowest); border-radius: var(--radius); }
.admintable { border: 1px solid var(--outline-variant); box-shadow: var(--e1); }
.admintable th { background: var(--surface-container); color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-variant); }
.admintable td { border-bottom: 1px solid var(--surface-container-high); }
.admintable tr:hover td, tbody tr:hover { background: var(--surface-container-low); }

/* 标签 / 芯片：M3 tonal */
.tag, .badge, .chip {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
}
.card .chip:hover { background: var(--primary); color: var(--on-primary); }

/* 提示条：M3 container 色 ＋ 左侧色条 */
.msg, .alert, .notice { border-radius: var(--radius-sm); border: 1px solid var(--outline-variant); background: var(--surface-container-low); }
.msg.info, .alert { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.msg.error, .alert-error { background: var(--error-container); color: var(--on-error-container); border-color: transparent; }
.msg.ok { background: var(--ok-container); color: var(--on-ok-container); border-color: transparent; }

/* 分页：M3 */
.pager a, .pagination a, .pager span, .pagination span {
    border: 1px solid var(--outline-variant);
    border-radius: 999px;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    min-width: 42px;
    padding: 9px 12px;
}
.pager a:hover { background: var(--surface-container-high); border-color: var(--outline); }
.pager .current, .pagination .current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pager .pinfo { color: var(--on-surface-variant); }

/* 排序条 / 空状态 / 页头 */
.sortbar { border-bottom: 1px solid var(--outline-variant); color: var(--on-surface-variant); }
.sortbar a { background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: 999px; color: var(--on-surface); }
.sortbar a:hover { background: var(--primary-container); border-color: transparent; color: var(--on-primary-container); }
.empty { background: var(--surface-container-low); border: 1px dashed var(--outline); color: var(--on-surface-variant); border-radius: var(--radius); }
.page-head .sub, .admin-head .sub { color: var(--on-surface-variant); }
.admin-head { border-bottom: 1px solid var(--outline-variant); }

/* 登录页 */
.login-logo { color: var(--primary); }
.login-sub { color: var(--on-surface-variant); }
.form-card { padding: 28px 24px; }

/* 页脚 */
footer, .footer { border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); }

/* ---- ④ 深色模式：用 freedns 的 M3 深色对应值 ---- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --primary: #b5c4ff;
        --on-primary: #00297a;
        --primary-container: #003da5;
        --on-primary-container: #dbe1ff;
        --secondary-container: #414659;
        --on-secondary-container: #dde1f9;
        --surface: #131316;
        --on-surface: #e4e2e6;
        --on-surface-variant: #c6c6d0;
        --surface-container-lowest: #0d0e11;
        --surface-container-low: #1b1b1f;
        --surface-container: #1f1f23;
        --surface-container-high: #2a2a2f;
        --surface-container-highest: #35353a;
        --outline: #8f909a;
        --outline-variant: #45464f;
        --error-container: #93000a;
        --on-error-container: #ffdad6;
        --ok-container: #00513e;
        --on-ok-container: #81f8d1;
        --brand-soft: rgb(181 196 255 / 0.12);
        --tonal-hover: #4a4f63;
    }
    .topbar { background: var(--primary-container); color: var(--on-primary-container); }
    .topbar .brand, .topbar .nav a, .topbar .nav-right a { color: var(--on-primary-container); }
}